Make OcResourceIcon accept space resource, refactor size validation i…

…n design system

packages/design-system/changelog/unreleased/enhancement-resource-icon-space

@@ -0,0 +1,5 @@
+Enhancement: Make OcResourceIcon accept space resource
+
+We have modified the OcResourceIcon component to show the space icon if a space resource is passed.
+
+https://github.com/owncloud/web/pull/8105

packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue

@@ -91,6 +91,8 @@
 </template>
 
 <script>
+import { AVAILABLE_SIZES } from '../../helpers/constants'
+
 import OcButton from '../OcButton/OcButton.vue'
 import OcDrop from '../OcDrop/OcDrop.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -140,7 +142,7 @@ export default {
       required: false,
       default: 'medium',
       validator: (value) => {
-        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge|remove)/)
+        return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
       }
     }
   },

packages/design-system/src/components/OcDrop/OcDrop.vue

@@ -18,6 +18,7 @@
 <script>
 import tippy, { hideAll } from 'tippy.js'
 import { destroy, hideOnEsc } from '../../directives/OcTooltip'
+import { AVAILABLE_SIZES } from '../../helpers/constants'
 import uniqueId from '../../utils/uniqueId'
 import { getSizeClass } from '../../utils/sizeClasses'
 
@@ -107,7 +108,7 @@ export default {
       required: false,
       default: 'medium',
       validator: (value) => {
-        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge|remove)/)
+        return [...AVAILABLE_SIZES, 'remove'].some((e) => e === value)
       }
     },
     /**

packages/design-system/src/components/OcIcon/OcIcon.vue

@@ -20,9 +20,10 @@
 </template>
 
 <script>
-import uniqueId from '../../utils/uniqueId'
 import InlineSvg from 'vue-inline-svg'
+import { AVAILABLE_SIZES } from '../../helpers/constants'
 import { getSizeClass } from '../../utils/sizeClasses'
+import uniqueId from '../../utils/uniqueId'
 /**
  * Icons are used to visually communicate core parts of the product and
  * available actions. They can act as wayfinding tools to help users more
@@ -122,7 +123,7 @@ export default {
       type: String,
       default: 'medium',
       validator: (value) => {
-        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge)/)
+        return AVAILABLE_SIZES.some((e) => e === value)
       }
     },
     /**

packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts

@@ -0,0 +1,5 @@
+import { OcResourceIcon } from '..'
+
+describe('OcRecipient', () => {
+  it.todo(`add tests for ${OcResourceIcon}`)
+})

packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue

@@ -4,24 +4,27 @@
     :name="iconName"
     :color="iconColor"
     :size="size"
-    :class="[
-      'oc-resource-icon',
-      { 'oc-resource-icon-file': !isFolder, 'oc-resource-icon-folder': isFolder }
-    ]"
+    :class="['oc-resource-icon', iconTypeClass]"
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { Resource } from 'web-client'
+
 import OcIcon from '../OcIcon/OcIcon.vue'
-import iconNameMap from '../../helpers/resourceIconExtensionMapping'
-import iconColorMap from '../../helpers/resourceIconColorExtensionMapping'
+import iconNameMap from '../../helpers/resourceIconExtensionMapping.json'
+import iconColorMap from '../../helpers/resourceIconColorExtensionMapping.json'
+import { AVAILABLE_SIZES } from '../../helpers/constants'
 
 const defaultFolderColor = 'var(--oc-color-icon-folder)'
 const defaultFolderIcon = 'resource-type-folder'
+const defaultSpaceColor = 'var(--oc-color-text-default)'
+const defaultSpaceIcon = 'layout-grid'
 const defaultFallbackIconColor = 'var(--oc-color-text-default)'
 const defaultFallbackIcon = 'file'
 
-export default {
+export default defineComponent({
   name: 'OcResourceIcon',
   status: 'ready',
   release: '12.0.0',
@@ -31,7 +34,7 @@ export default {
      * The resource to be displayed
      */
     resource: {
-      type: Object,
+      type: Object as PropType<Resource>,
       required: true
     },
     /**
@@ -41,30 +44,40 @@ export default {
     size: {
       type: String,
       default: 'large',
-      validator: (value) => {
-        return value.match(/(xsmall|small|medium|large|xlarge|xxlarge|xxxlarge)/)
+      validator: (value: string): boolean => {
+        return AVAILABLE_SIZES.some((e) => e === value)
       }
     }
   },
   computed: {
-    iconName() {
+    iconName(): string {
+      if (this.isSpace) return defaultSpaceIcon
       if (this.isFolder) return defaultFolderIcon
       const icon = iconNameMap[this.extension]
       return `resource-type-${icon ? icon : defaultFallbackIcon}`
     },
-    iconColor() {
+    iconColor(): string {
+      if (this.isSpace) return defaultSpaceColor
       if (this.isFolder) return defaultFolderColor
       const color = iconColorMap[this.extension]
       return color ? color : defaultFallbackIconColor
     },
-    isFolder() {
+    iconTypeClass(): string {
+      if (this.isSpace) return 'oc-resource-icon-space'
+      if (this.isFolder) return 'oc-resource-icon-folder'
+      return 'oc-resource-icon-file'
+    },
+    isFolder(): boolean {
       return this.resource.isFolder
     },
-    extension() {
+    isSpace(): boolean {
+      return this.resource.type === 'space'
+    },
+    extension(): string {
       return this.resource.extension?.toLowerCase()
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

packages/design-system/src/helpers/constants.js → packages/design-system/src/helpers/constants.ts

@@ -5,3 +5,13 @@ export const EVENT_TROW_CONTEXTMENU = 'contextmenuClicked'
 export const EVENT_ITEM_DROPPED = 'itemDropped'
 export const EVENT_ITEM_DRAGGED = 'itemDragged'
 export const EVENT_FILE_DROPPED = 'fileDropped'
+
+export const AVAILABLE_SIZES = [
+  'xsmall',
+  'small',
+  'medium',
+  'large',
+  'xlarge',
+  'xxlarge',
+  'xxxlarge'
+]