@designcrowd/fe-shared-lib 1.1.12 → 1.2.0-ast-disabled-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/.storybook/main.ts +0 -3
  2. package/package.json +16 -15
  3. package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js +1 -0
  4. package/src/atoms/components/ButtonGroup/ButtonGroup.vue +24 -12
package/.storybook/main.ts CHANGED
@@ -4,9 +4,6 @@ module.exports = {
4
4
  stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
5
5
  addons: [
6
6
  '@storybook/addon-a11y',
7
- '@storybook/addon-actions',
8
- '@storybook/addon-controls',
9
- '@storybook/addon-essentials',
10
7
  '@storybook/addon-links',
11
8
  {
12
9
  name: '@storybook/addon-themes',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@designcrowd/fe-shared-lib",
3
- "version": "1.1.12",
3
+ "version": "1.2.0-ast-disabled-1",
4
4
  "scripts": {
5
5
  "start": "npm run storybook",
6
6
  "build": "npm run build:css --production",
@@ -17,7 +17,8 @@
17
17
  "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
18
18
  },
19
19
  "dependencies": {
20
- "@nuxtjs/i18n": "^9.2.1",
20
+ "@nuxtjs/i18n": "9.5.4",
21
+ "@storybook/react": "^9.0.4",
21
22
  "autoprefixer": "10.4.17",
22
23
  "axios": "1.6.7",
23
24
  "click-outside-vue3": "4.0.1",
@@ -29,26 +30,23 @@
29
30
  "postcss-loader": "8.1.0",
30
31
  "swiper": "11.0.6",
31
32
  "tailwindcss": "3.4.1",
32
- "vite": "5.1.4",
33
+ "vite": "6.3.5",
33
34
  "vite-plugin-eslint": "1.8.1",
34
35
  "vite-plugin-vue-devtools": "7.7.0",
35
- "vue": "3.5.13",
36
- "vue-color": "2.8.1",
36
+ "vue": "3.5.15",
37
+ "vue-color": "3.0.2",
37
38
  "vue-cropperjs": "5.0.0",
38
39
  "vue-observe-visibility": "1.0.0",
39
40
  "vue-router": "4.5.0",
40
41
  "yargs": "17.7.2"
41
42
  },
42
43
  "devDependencies": {
43
- "@storybook/addon-a11y": "8.6.11",
44
- "@storybook/addon-actions": "8.6.11",
45
- "@storybook/addon-controls": "8.6.11",
46
- "@storybook/addon-essentials": "8.6.11",
47
- "@storybook/addon-links": "8.6.11",
48
- "@storybook/addon-themes": "8.6.11",
49
- "@storybook/vue3": "8.6.11",
50
- "@storybook/vue3-vite": "8.6.11",
51
- "@vitejs/plugin-vue": "5.0.4",
44
+ "@storybook/addon-a11y": "9.0.4",
45
+ "@storybook/addon-links": "9.0.4",
46
+ "@storybook/addon-themes": "9.0.4",
47
+ "@storybook/vue3": "9.0.4",
48
+ "@storybook/vue3-vite": "9.0.4",
49
+ "@vitejs/plugin-vue": "5.2.4",
52
50
  "@vue/cli-plugin-eslint": "5.0.8",
53
51
  "@vue/cli-service": "5.0.8",
54
52
  "@vue/eslint-config-airbnb": "8.0.0",
@@ -69,7 +67,7 @@
69
67
  "postcss-import": "16.0.0",
70
68
  "postcss-nested": "6.0.1",
71
69
  "prettier": "3.2.4",
72
- "storybook": "8.6.11",
70
+ "storybook": "9.0.4",
73
71
  "stylelint": "16.2.1",
74
72
  "stylelint-config-standard": "36.0.0",
75
73
  "tailwindcss": "3.4.1",
@@ -106,5 +104,8 @@
106
104
  "./src/*.js": {
107
105
  "import": "./src/*.js"
108
106
  }
107
+ },
108
+ "overrides": {
109
+ "storybook": "$storybook"
109
110
  }
110
111
  }
package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js CHANGED
@@ -21,6 +21,7 @@ export const Sample = () => {
21
21
  {
22
22
  label: 'Medium',
23
23
  value: 'medium',
24
+ disabled: true,
24
25
  },
25
26
  {
26
27
  label: 'Large',
package/src/atoms/components/ButtonGroup/ButtonGroup.vue CHANGED
@@ -10,11 +10,14 @@
10
10
  <button
11
11
  class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
12
12
  :class="{
13
- '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
14
- '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
13
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
14
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
15
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
16
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
15
17
  }"
18
+ :disabled="option.disabled"
16
19
  v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
17
- @click="$emit('on-select', option)"
20
+ @click="!option.disabled && $emit('on-select', option)"
18
21
  >
19
22
  <slot name="content" :option="option"></slot>
20
23
  </button>
@@ -35,8 +38,10 @@
35
38
  <button
36
39
  v-if="variant === 'icon'"
37
40
  :class="{
38
- '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
39
- '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
41
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
42
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
43
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
44
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
40
45
  'tw-px-2': !option.iconViewBox,
41
46
  'tw-px-px':
42
47
  option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
@@ -45,9 +50,10 @@
45
50
  'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
46
51
  }"
47
52
  :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
53
+ :disabled="option.disabled"
48
54
  class="tw-text-xs button-group-icon-button tw-shadow-inner"
49
55
  v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
50
- @click="$emit('on-select', option)"
56
+ @click="!option.disabled && $emit('on-select', option)"
51
57
  >
52
58
  <div
53
59
  :class="{
@@ -67,12 +73,15 @@
67
73
  <button
68
74
  v-else
69
75
  :class="{
70
- '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
71
- '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
76
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
77
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
78
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
79
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
72
80
  }"
81
+ :disabled="option.disabled"
73
82
  class="tw-text-xs button-group-image-button tw-shadow-inner"
74
83
  v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
75
- @click="$emit('on-select', option)"
84
+ @click="!option.disabled && $emit('on-select', option)"
76
85
  >
77
86
  <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
78
87
  </button>
@@ -90,11 +99,14 @@
90
99
  :key="`button-${option.value}`"
91
100
  :class="{
92
101
  'tw-ml-2': idx > 0 && !columns,
93
- '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
94
- '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
102
+ '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
103
+ '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
104
+ 'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
105
+ 'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
95
106
  }"
107
+ :disabled="option.disabled"
96
108
  class="tw-text-xs button-group-button tw-shadow-inner"
97
- @click="$emit('on-select', option)"
109
+ @click="!option.disabled && $emit('on-select', option)"
98
110
  >
99
111
  {{ option.label }}
100
112
  </button>