Make OcResourceIcon accept space resource, refactor size validation i…

…n design system
owncloud · Dec 13, 2022 · 11a4863 · 11a4863
1 parent f200071
commit 11a4863
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 21 deletions.
diff --git a/packages/design-system/changelog/unreleased/enhancement-resource-icon-space b/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
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/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)
       }
     }
   },

diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/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)
       }
     },
     /**

diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/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)
       }
     },
     /**

diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts b/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.spec.ts
@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils'
+
+import { AVAILABLE_SIZES } from '../../helpers/constants'
+import { OcResourceIcon } from '..'
+
+const resources = ['file', 'folder', 'space']
+
+function getWrapper(props) {
+  return shallowMount(OcResourceIcon, {
+    propsData: {
+      resource: { type: props.resourceType },
+      size: props.size
+    }
+  })
+}
+
+describe('OcResourceIcon', () => {
+  resources.forEach((resourceType) => {
+    AVAILABLE_SIZES.forEach((size) => {
+      it(`renders OcIcon for resource type ${resourceType} in size ${size}`, () => {
+        const wrapper = getWrapper({ resourceType, size })
+        expect(wrapper).toMatchSnapshot()
+      })
+    })
+  })
+})
diff --git a/packages/design-system/src/components/OcResourceIcon/OcResourceIcon.vue b/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 { AVAILABLE_SIZES } from '../../helpers/constants'
+import iconColorMap from '../../helpers/resourceIconColorExtensionMapping.json'
+import iconNameMap from '../../helpers/resourceIconExtensionMapping.json'
 
 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,38 @@ 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() {
-      return this.resource.isFolder
+    iconTypeClass(): string {
+      return `oc-resource-icon-${this.resource.type}`
+    },
+    isFolder(): boolean {
+      return this.resource.type === 'folder'
     },
-    extension() {
+    isSpace(): boolean {
+      return this.resource.type === 'space'
+    },
+    extension(): string {
       return this.resource.extension?.toLowerCase()
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/...ges/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap b/...ges/design-system/src/components/OcResourceIcon/__snapshots__/OcResourceIcon.spec.ts.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OcResourceIcon renders OcIcon for resource type file in size large 1`] = `<oc-icon-stub name="resource-type-file" filltype="fill" accessiblelabel="" type="span" size="large" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-file"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type file in size medium 1`] = `<oc-icon-stub name="resource-type-file" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-file"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type file in size small 1`] = `<oc-icon-stub name="resource-type-file" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-file"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type file in size xlarge 1`] = `<oc-icon-stub name="resource-type-file" filltype="fill" accessiblelabel="" type="span" size="xlarge" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-file"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type file in size xsmall 1`] = `<oc-icon-stub name="resource-type-file" filltype="fill" accessiblelabel="" type="span" size="xsmall" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-file"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type file in size xxlarge 1`] = `<oc-icon-stub name="resource-type-file" filltype="fill" accessiblelabel="" type="span" size="xxlarge" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-file"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type file in size xxxlarge 1`] = `<oc-icon-stub name="resource-type-file" filltype="fill" accessiblelabel="" type="span" size="xxxlarge" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-file"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type folder in size large 1`] = `<oc-icon-stub name="resource-type-folder" filltype="fill" accessiblelabel="" type="span" size="large" variation="passive" color="var(--oc-color-icon-folder)" class="oc-resource-icon oc-resource-icon-folder"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type folder in size medium 1`] = `<oc-icon-stub name="resource-type-folder" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-icon-folder)" class="oc-resource-icon oc-resource-icon-folder"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type folder in size small 1`] = `<oc-icon-stub name="resource-type-folder" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color="var(--oc-color-icon-folder)" class="oc-resource-icon oc-resource-icon-folder"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type folder in size xlarge 1`] = `<oc-icon-stub name="resource-type-folder" filltype="fill" accessiblelabel="" type="span" size="xlarge" variation="passive" color="var(--oc-color-icon-folder)" class="oc-resource-icon oc-resource-icon-folder"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type folder in size xsmall 1`] = `<oc-icon-stub name="resource-type-folder" filltype="fill" accessiblelabel="" type="span" size="xsmall" variation="passive" color="var(--oc-color-icon-folder)" class="oc-resource-icon oc-resource-icon-folder"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type folder in size xxlarge 1`] = `<oc-icon-stub name="resource-type-folder" filltype="fill" accessiblelabel="" type="span" size="xxlarge" variation="passive" color="var(--oc-color-icon-folder)" class="oc-resource-icon oc-resource-icon-folder"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type folder in size xxxlarge 1`] = `<oc-icon-stub name="resource-type-folder" filltype="fill" accessiblelabel="" type="span" size="xxxlarge" variation="passive" color="var(--oc-color-icon-folder)" class="oc-resource-icon oc-resource-icon-folder"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type space in size large 1`] = `<oc-icon-stub name="layout-grid" filltype="fill" accessiblelabel="" type="span" size="large" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-space"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type space in size medium 1`] = `<oc-icon-stub name="layout-grid" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-space"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type space in size small 1`] = `<oc-icon-stub name="layout-grid" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-space"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type space in size xlarge 1`] = `<oc-icon-stub name="layout-grid" filltype="fill" accessiblelabel="" type="span" size="xlarge" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-space"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type space in size xsmall 1`] = `<oc-icon-stub name="layout-grid" filltype="fill" accessiblelabel="" type="span" size="xsmall" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-space"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type space in size xxlarge 1`] = `<oc-icon-stub name="layout-grid" filltype="fill" accessiblelabel="" type="span" size="xxlarge" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-space"></oc-icon-stub>`;
+
+exports[`OcResourceIcon renders OcIcon for resource type space in size xxxlarge 1`] = `<oc-icon-stub name="layout-grid" filltype="fill" accessiblelabel="" type="span" size="xxxlarge" variation="passive" color="var(--oc-color-text-default)" class="oc-resource-icon oc-resource-icon-space"></oc-icon-stub>`;
diff --git a/...es/design-system/src/helpers/constants.js → ...es/design-system/src/helpers/constants.ts b/...es/design-system/src/helpers/constants.js → ...es/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'
+]