Merge pull request #294 from PrestaShopCorp/feat_add_disable_state_icon

feat: add disabled state to icon

build/package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.4.2",
     "@pnpm/types": "^9.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@types/rollup-plugin-css-only": "^3.1.0",
     "unbuild": "^1.2.0",
     "vue": "^3.2.47"

build/src/tasks/full-bundle.ts

@@ -8,6 +8,7 @@ import esbuild from 'rollup-plugin-esbuild'
 import { parallel } from 'gulp'
 import glob from 'fast-glob'
 import { camelCase, upperFirst } from 'lodash-unified'
+import json from '@rollup/plugin-json'
 import { version } from '../../../packages/puik/version'
 import { PuikAlias } from '../plugins/puik-alias'
 import {
@@ -48,6 +49,7 @@ async function buildFullEntry(minify: boolean) {
           'process.env.NODE_ENV': JSON.stringify('production'),
         },
       }),
+      json(),
     ],
     external: await generateExternal({ full: true }),
   })
@@ -97,6 +99,7 @@ async function buildFullLocale(minify: boolean) {
             sourceMap: minify,
             target,
           }),
+          json(),
         ],
       })
       await writeBundles(bundle, [

build/src/tasks/modules.ts

@@ -5,6 +5,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
 import glob from 'fast-glob'
+import json from '@rollup/plugin-json'
 import {
   puikRoot,
   pkgRoot,
@@ -44,6 +45,7 @@ export const buildModules = async () => {
           '.vue': 'ts',
         },
       }),
+      json(),
     ],
     external: await generateExternal({ full: false }),
     treeshake: false,

packages/components/icon/src/icon.ts

@@ -26,6 +26,11 @@ export const iconProps = buildProps({
     default: '#00000',
     required: false,
   },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
 } as const)
 
 export type IconProps = ExtractPropTypes<typeof iconProps>

packages/components/icon/src/icon.vue

@@ -11,11 +11,15 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import resolveConfig from 'tailwindcss/resolveConfig'
+import tailwindConfig from '@puik/tailwind-preset/theme'
 import { iconProps } from './icon'
+
 defineOptions({
   name: 'PuikIcon',
 })
 
+const fullConf = resolveConfig(tailwindConfig)
 const props = defineProps(iconProps)
 
 const fontSize = computed(() => {
@@ -28,7 +32,9 @@ const fontSize = computed(() => {
 const style = computed(() => {
   return {
     fontSize: fontSize.value,
-    color: props.color,
+    color: props.isDisabled
+      ? fullConf.extend?.colors?.primary['500']
+      : props.color,
   }
 })
 </script>

packages/components/icon/stories/icon.stories.ts

@@ -34,6 +34,12 @@ export default {
     dataTest: {
       description: 'Set the data-test attribute',
     },
+    isDisabled: {
+      description: 'If the icon is disable',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 } as Meta
 
@@ -56,6 +62,7 @@ export const Default = {
     fontSize: 24,
     nodeType: 'span',
     dataTest: '',
+    isDisabled: false,
   },
 
   parameters: {

packages/components/icon/test/icon.spec.ts

@@ -33,6 +33,16 @@ describe('Icon tests', () => {
     expect(findIcon().text()).toBe('check')
   })
 
+  it('should set the icon disabled', async () => {
+    factory({
+      icon: 'check',
+      color: 'red',
+      isDisabled: true,
+    })
+
+    expect(findIcon().element.style.color).toBe('rgb(187, 187, 187)')
+  })
+
   it('should set the color', async () => {
     factory({
       icon: 'check',
@@ -74,3 +84,6 @@ describe('Icon tests', () => {
     expect(findIcon().attributes('data-test')).toBe('test')
   })
 })
+function resolveConfig(tailwindConfig: any) {
+  throw new Error('Function not implemented.')
+}

packages/puik/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext"
+  }
+}

packages/tailwind-preset/index.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const Puiktheme = require('./theme')
+// const Puiktheme = require('./theme')
+import PuikTheme from './theme'
 
-module.exports = {
-  theme: Puiktheme,
+export default {
+  theme: PuikTheme,
 }

packages/tailwind-preset/theme.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+export default {
   extend: {
     colors: {
       primary: {

packages/theme/tailwind.config.js

@@ -1,6 +1,8 @@
+import tailwindConfig from '@puik/tailwind-preset'
+
 /* eslint-disable @typescript-eslint/no-var-requires */
 module.exports = {
-  presets: [require('@puik/tailwind-preset')],
+  presets: [tailwindConfig],
   content: ['./src/**/*.scss'],
   plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
   darkMode: 'class', // To remove if we wanna use the css' prefers-color-scheme feature (dark mode based on OS/browser preference)