@designcrowd/fe-shared-lib 1.2.0-tr-11 → 1.2.1-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 (26) hide show
  1. package/Dockerfile +0 -2
  2. package/index.js +0 -2
  3. package/package.json +2 -7
  4. package/public/css/tailwind-brandCrowd.css +25 -0
  5. package/public/css/tailwind-brandPage.css +25 -0
  6. package/public/css/tailwind-crazyDomains.css +25 -0
  7. package/public/css/tailwind-designCom.css +25 -0
  8. package/public/css/tailwind-designCrowd.css +25 -0
  9. package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js +1 -0
  10. package/src/atoms/components/ButtonGroup/ButtonGroup.vue +24 -12
  11. package/src/atoms/components/Icon/Icon.vue +3 -3
  12. package/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js +1 -1
  13. package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue +8 -16
  14. package/nodemon.translation.json +0 -7
  15. package/src/bundleTranslation.js +0 -79
  16. package/src/bundles/bundled-translations.de-DE.json +0 -5
  17. package/src/bundles/bundled-translations.es-ES.json +0 -5
  18. package/src/bundles/bundled-translations.fr-FR.json +0 -5
  19. package/src/bundles/bundled-translations.json +0 -5
  20. package/src/bundles/bundled-translations.pt-PT.json +0 -5
  21. package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.de-DE.json +0 -5
  22. package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.es-ES.json +0 -5
  23. package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.fr-FR.json +0 -5
  24. package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.json +0 -5
  25. package/src/experiences/components/PublishBrandPageModal/i18n/publish-modal.pt-PT.json +0 -5
  26. package/src/useSharedLibTranslate.js +0 -38
package/Dockerfile CHANGED
@@ -26,8 +26,6 @@ COPY . .
26
26
 
27
27
  COPY .npmignore ./
28
28
 
29
- RUN npm run bundle-translation
30
-
31
29
  RUN mkdir artifacts
32
30
  RUN npm publish || touch artifacts/npm_publish_failed
33
31
  RUN cp package.json artifacts/
package/index.js CHANGED
@@ -19,8 +19,6 @@ export { default as SellDomainNameWidget } from './src/experiences/components/Se
19
19
  export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
20
20
  export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
21
21
 
22
- export { setLocaleAsync, tr } from './src/useSharedLibTranslate';
23
-
24
22
  export { default as Button } from './src/atoms/components/Button/Button.vue';
25
23
  export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
26
24
  export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';
package/package.json CHANGED
@@ -1,14 +1,12 @@
1
1
  {
2
2
  "name": "@designcrowd/fe-shared-lib",
3
- "version": "1.2.0-tr-11",
3
+ "version": "1.2.1-ast-disabled-1",
4
4
  "scripts": {
5
- "start": "run-p storybook watch:translation",
5
+ "start": "npm run storybook",
6
6
  "build": "npm run build:css --production",
7
7
  "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006 public",
8
8
  "build:css": "node ./tailwind.build.js",
9
9
  "build:storybook": "mkdir -p public && mkdir -p public/css && npm run storybook:css && storybook build -c .storybook -o .storybook-static && cp -R ./public/css .storybook-static/",
10
- "bundle-translation": "node ./src/bundleTranslation.js",
11
- "watch:translation": "nodemon --config nodemon.translation.json",
12
10
  "storybook:themes": "node ./tailwind.themes.js",
13
11
  "storybook:css": "node ./tailwind.build.js --storybook",
14
12
  "lint": "NODE_ENV=production eslint ./src/ --ext .ts,.js,.vue",
@@ -28,7 +26,6 @@
28
26
  "cropperjs": "1.6.1",
29
27
  "dropzone-vue3": "1.0.2",
30
28
  "fs-extra": "11.2.0",
31
- "i18next": "25.2.1",
32
29
  "lodash.throttle": "4.1.1",
33
30
  "postcss-loader": "8.1.0",
34
31
  "swiper": "11.0.6",
@@ -65,8 +62,6 @@
65
62
  "eslint-plugin-vue": "9.21.1",
66
63
  "husky": "9.0.10",
67
64
  "lint-staged": "15.2.1",
68
- "nodemon": "3.0.3",
69
- "npm-run-all": "4.1.5",
70
65
  "postcss": "8.4.33",
71
66
  "postcss-cli": "11.0.0",
72
67
  "postcss-import": "16.0.0",
@@ -719,6 +719,9 @@ video {
719
719
  .theme-brandCrowd .tw-ml-auto {
720
720
  margin-left: auto;
721
721
  }
722
+ .theme-brandCrowd .tw-mr-1 {
723
+ margin-right: 0.25rem;
724
+ }
722
725
  .theme-brandCrowd .tw-mr-2 {
723
726
  margin-right: 0.5rem;
724
727
  }
@@ -827,6 +830,10 @@ video {
827
830
  .theme-brandCrowd .tw-h-auto {
828
831
  height: auto;
829
832
  }
833
+ .theme-brandCrowd .tw-h-fit {
834
+ height: -moz-fit-content;
835
+ height: fit-content;
836
+ }
830
837
  .theme-brandCrowd .tw-h-full {
831
838
  height: 100%;
832
839
  }
@@ -1013,6 +1020,9 @@ video {
1013
1020
  .theme-brandCrowd .tw-animate-spin {
1014
1021
  animation: tw-spin 1s linear infinite;
1015
1022
  }
1023
+ .\!tw-cursor-not-allowed {
1024
+ cursor: not-allowed !important;
1025
+ }
1016
1026
  .theme-brandCrowd .tw-cursor-not-allowed {
1017
1027
  cursor: not-allowed;
1018
1028
  }
@@ -1446,6 +1456,17 @@ video {
1446
1456
  .theme-brandCrowd .tw-bg-opacity-80 {
1447
1457
  --tw-bg-opacity: 0.8;
1448
1458
  }
1459
+ .theme-brandCrowd .tw-bg-gradient-to-t {
1460
+ background-image: linear-gradient(to top, var(--tw-gradient-stops));
1461
+ }
1462
+ .theme-brandCrowd .tw-from-\[\#d946ef\] {
1463
+ --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
1464
+ --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
1465
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1466
+ }
1467
+ .theme-brandCrowd .tw-to-\[\#8b5cf6\] {
1468
+ --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
1469
+ }
1449
1470
  .theme-brandCrowd .tw-bg-no-repeat {
1450
1471
  background-repeat: no-repeat;
1451
1472
  }
@@ -2087,6 +2108,10 @@ video {
2087
2108
  --tw-shadow-color: #0097D7 !important;
2088
2109
  --tw-shadow: var(--tw-shadow-colored) !important;
2089
2110
  }
2111
+ .theme-brandCrowd .hover\:tw-brightness-\[0\.85\]:hover {
2112
+ --tw-brightness: brightness(0.85);
2113
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2114
+ }
2090
2115
  .theme-brandCrowd .focus\:tw-border-error-600:focus {
2091
2116
  --tw-border-opacity: 1;
2092
2117
  border-color: rgb(194 22 50 / var(--tw-border-opacity));
@@ -719,6 +719,9 @@ video {
719
719
  .theme-brandPage .tw-ml-auto {
720
720
  margin-left: auto;
721
721
  }
722
+ .theme-brandPage .tw-mr-1 {
723
+ margin-right: 0.25rem;
724
+ }
722
725
  .theme-brandPage .tw-mr-2 {
723
726
  margin-right: 0.5rem;
724
727
  }
@@ -827,6 +830,10 @@ video {
827
830
  .theme-brandPage .tw-h-auto {
828
831
  height: auto;
829
832
  }
833
+ .theme-brandPage .tw-h-fit {
834
+ height: -moz-fit-content;
835
+ height: fit-content;
836
+ }
830
837
  .theme-brandPage .tw-h-full {
831
838
  height: 100%;
832
839
  }
@@ -1013,6 +1020,9 @@ video {
1013
1020
  .theme-brandPage .tw-animate-spin {
1014
1021
  animation: tw-spin 1s linear infinite;
1015
1022
  }
1023
+ .\!tw-cursor-not-allowed {
1024
+ cursor: not-allowed !important;
1025
+ }
1016
1026
  .theme-brandPage .tw-cursor-not-allowed {
1017
1027
  cursor: not-allowed;
1018
1028
  }
@@ -1294,6 +1304,17 @@ video {
1294
1304
  .theme-brandPage .tw-bg-opacity-80 {
1295
1305
  --tw-bg-opacity: 0.8;
1296
1306
  }
1307
+ .theme-brandPage .tw-bg-gradient-to-t {
1308
+ background-image: linear-gradient(to top, var(--tw-gradient-stops));
1309
+ }
1310
+ .theme-brandPage .tw-from-\[\#d946ef\] {
1311
+ --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
1312
+ --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
1313
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1314
+ }
1315
+ .theme-brandPage .tw-to-\[\#8b5cf6\] {
1316
+ --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
1317
+ }
1297
1318
  .theme-brandPage .tw-bg-no-repeat {
1298
1319
  background-repeat: no-repeat;
1299
1320
  }
@@ -1791,6 +1812,10 @@ video {
1791
1812
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1792
1813
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1793
1814
  }
1815
+ .theme-brandPage .hover\:tw-brightness-\[0\.85\]:hover {
1816
+ --tw-brightness: brightness(0.85);
1817
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1818
+ }
1794
1819
  .theme-brandPage .focus\:tw-border-grayscale-600:focus {
1795
1820
  --tw-border-opacity: 1;
1796
1821
  border-color: rgb(94 94 94 / var(--tw-border-opacity));
@@ -719,6 +719,9 @@ video {
719
719
  .theme-crazyDomains .tw-ml-auto {
720
720
  margin-left: auto;
721
721
  }
722
+ .theme-crazyDomains .tw-mr-1 {
723
+ margin-right: 0.25rem;
724
+ }
722
725
  .theme-crazyDomains .tw-mr-2 {
723
726
  margin-right: 0.5rem;
724
727
  }
@@ -827,6 +830,10 @@ video {
827
830
  .theme-crazyDomains .tw-h-auto {
828
831
  height: auto;
829
832
  }
833
+ .theme-crazyDomains .tw-h-fit {
834
+ height: -moz-fit-content;
835
+ height: fit-content;
836
+ }
830
837
  .theme-crazyDomains .tw-h-full {
831
838
  height: 100%;
832
839
  }
@@ -1013,6 +1020,9 @@ video {
1013
1020
  .theme-crazyDomains .tw-animate-spin {
1014
1021
  animation: tw-spin 1s linear infinite;
1015
1022
  }
1023
+ .\!tw-cursor-not-allowed {
1024
+ cursor: not-allowed !important;
1025
+ }
1016
1026
  .theme-crazyDomains .tw-cursor-not-allowed {
1017
1027
  cursor: not-allowed;
1018
1028
  }
@@ -1446,6 +1456,17 @@ video {
1446
1456
  .theme-crazyDomains .tw-bg-opacity-80 {
1447
1457
  --tw-bg-opacity: 0.8;
1448
1458
  }
1459
+ .theme-crazyDomains .tw-bg-gradient-to-t {
1460
+ background-image: linear-gradient(to top, var(--tw-gradient-stops));
1461
+ }
1462
+ .theme-crazyDomains .tw-from-\[\#d946ef\] {
1463
+ --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
1464
+ --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
1465
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1466
+ }
1467
+ .theme-crazyDomains .tw-to-\[\#8b5cf6\] {
1468
+ --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
1469
+ }
1449
1470
  .theme-crazyDomains .tw-bg-no-repeat {
1450
1471
  background-repeat: no-repeat;
1451
1472
  }
@@ -2087,6 +2108,10 @@ video {
2087
2108
  --tw-shadow-color: #00A1EF !important;
2088
2109
  --tw-shadow: var(--tw-shadow-colored) !important;
2089
2110
  }
2111
+ .theme-crazyDomains .hover\:tw-brightness-\[0\.85\]:hover {
2112
+ --tw-brightness: brightness(0.85);
2113
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2114
+ }
2090
2115
  .theme-crazyDomains .focus\:tw-border-error-600:focus {
2091
2116
  --tw-border-opacity: 1;
2092
2117
  border-color: rgb(186 24 79 / var(--tw-border-opacity));
@@ -719,6 +719,9 @@ video {
719
719
  .theme-designCom .tw-ml-auto {
720
720
  margin-left: auto;
721
721
  }
722
+ .theme-designCom .tw-mr-1 {
723
+ margin-right: 0.25rem;
724
+ }
722
725
  .theme-designCom .tw-mr-2 {
723
726
  margin-right: 0.5rem;
724
727
  }
@@ -827,6 +830,10 @@ video {
827
830
  .theme-designCom .tw-h-auto {
828
831
  height: auto;
829
832
  }
833
+ .theme-designCom .tw-h-fit {
834
+ height: -moz-fit-content;
835
+ height: fit-content;
836
+ }
830
837
  .theme-designCom .tw-h-full {
831
838
  height: 100%;
832
839
  }
@@ -1013,6 +1020,9 @@ video {
1013
1020
  .theme-designCom .tw-animate-spin {
1014
1021
  animation: tw-spin 1s linear infinite;
1015
1022
  }
1023
+ .\!tw-cursor-not-allowed {
1024
+ cursor: not-allowed !important;
1025
+ }
1016
1026
  .theme-designCom .tw-cursor-not-allowed {
1017
1027
  cursor: not-allowed;
1018
1028
  }
@@ -1446,6 +1456,17 @@ video {
1446
1456
  .theme-designCom .tw-bg-opacity-80 {
1447
1457
  --tw-bg-opacity: 0.8;
1448
1458
  }
1459
+ .theme-designCom .tw-bg-gradient-to-t {
1460
+ background-image: linear-gradient(to top, var(--tw-gradient-stops));
1461
+ }
1462
+ .theme-designCom .tw-from-\[\#d946ef\] {
1463
+ --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
1464
+ --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
1465
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1466
+ }
1467
+ .theme-designCom .tw-to-\[\#8b5cf6\] {
1468
+ --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
1469
+ }
1449
1470
  .theme-designCom .tw-bg-no-repeat {
1450
1471
  background-repeat: no-repeat;
1451
1472
  }
@@ -2087,6 +2108,10 @@ video {
2087
2108
  --tw-shadow-color: #3f59f6 !important;
2088
2109
  --tw-shadow: var(--tw-shadow-colored) !important;
2089
2110
  }
2111
+ .theme-designCom .hover\:tw-brightness-\[0\.85\]:hover {
2112
+ --tw-brightness: brightness(0.85);
2113
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2114
+ }
2090
2115
  .theme-designCom .focus\:tw-border-error-600:focus {
2091
2116
  --tw-border-opacity: 1;
2092
2117
  border-color: rgb(182 58 42 / var(--tw-border-opacity));
@@ -719,6 +719,9 @@ video {
719
719
  .theme-designCrowd .tw-ml-auto {
720
720
  margin-left: auto;
721
721
  }
722
+ .theme-designCrowd .tw-mr-1 {
723
+ margin-right: 0.25rem;
724
+ }
722
725
  .theme-designCrowd .tw-mr-2 {
723
726
  margin-right: 0.5rem;
724
727
  }
@@ -827,6 +830,10 @@ video {
827
830
  .theme-designCrowd .tw-h-auto {
828
831
  height: auto;
829
832
  }
833
+ .theme-designCrowd .tw-h-fit {
834
+ height: -moz-fit-content;
835
+ height: fit-content;
836
+ }
830
837
  .theme-designCrowd .tw-h-full {
831
838
  height: 100%;
832
839
  }
@@ -1013,6 +1020,9 @@ video {
1013
1020
  .theme-designCrowd .tw-animate-spin {
1014
1021
  animation: tw-spin 1s linear infinite;
1015
1022
  }
1023
+ .\!tw-cursor-not-allowed {
1024
+ cursor: not-allowed !important;
1025
+ }
1016
1026
  .theme-designCrowd .tw-cursor-not-allowed {
1017
1027
  cursor: not-allowed;
1018
1028
  }
@@ -1446,6 +1456,17 @@ video {
1446
1456
  .theme-designCrowd .tw-bg-opacity-80 {
1447
1457
  --tw-bg-opacity: 0.8;
1448
1458
  }
1459
+ .theme-designCrowd .tw-bg-gradient-to-t {
1460
+ background-image: linear-gradient(to top, var(--tw-gradient-stops));
1461
+ }
1462
+ .theme-designCrowd .tw-from-\[\#d946ef\] {
1463
+ --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
1464
+ --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
1465
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1466
+ }
1467
+ .theme-designCrowd .tw-to-\[\#8b5cf6\] {
1468
+ --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
1469
+ }
1449
1470
  .theme-designCrowd .tw-bg-no-repeat {
1450
1471
  background-repeat: no-repeat;
1451
1472
  }
@@ -2087,6 +2108,10 @@ video {
2087
2108
  --tw-shadow-color: #1197EB !important;
2088
2109
  --tw-shadow: var(--tw-shadow-colored) !important;
2089
2110
  }
2111
+ .theme-designCrowd .hover\:tw-brightness-\[0\.85\]:hover {
2112
+ --tw-brightness: brightness(0.85);
2113
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2114
+ }
2090
2115
  .theme-designCrowd .focus\:tw-border-error-600:focus {
2091
2116
  --tw-border-opacity: 1;
2092
2117
  border-color: rgb(195 50 48 / var(--tw-border-opacity));
@@ -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',
@@ -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>
@@ -20,8 +20,8 @@
20
20
  aria-labelledby="title"
21
21
  aria-describedby="desc"
22
22
  >
23
- <title v-if="title" :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
24
- <desc v-if="description" :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
23
+ <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
24
+ <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
25
25
  <component :is="`icon-${iconName}`"></component>
26
26
  </svg>
27
27
  </div>
@@ -799,7 +799,7 @@ export default {
799
799
  return css || null;
800
800
  },
801
801
  title() {
802
- return this.altText;
802
+ return this.altText || `${this.titleCase(this.name)}`;
803
803
  },
804
804
  description() {
805
805
  return `${this.title} Icon`;
@@ -1,5 +1,5 @@
1
- import vClickOutside from 'click-outside-vue3';
2
1
  import brandPageApiClient from '../../clients/brand-page-api.client';
2
+ import vClickOutside from 'click-outside-vue3';
3
3
 
4
4
  export const paymentConfigStatuses = Object.freeze({
5
5
  active: 'Active',
@@ -50,7 +50,7 @@
50
50
  <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
51
51
  <PublishBrandPageCard
52
52
  v-if="!hasPurchasedDomains"
53
- :img-url="iconUrl"
53
+ :imgUrl="iconUrl"
54
54
  title="Free Address"
55
55
  description="Choose a free address to publish now. You can always edit the URL later"
56
56
  :is-design-com="isDesignCom"
@@ -84,11 +84,11 @@
84
84
  data-test-brand-page-publish-button
85
85
  variant="primary"
86
86
  size="small-medium"
87
+ @on-click="onPublish"
87
88
  :full-width="isMobile"
88
89
  :class="{
89
90
  'tw-uppercase': !isDesignCom,
90
91
  }"
91
- @on-click="onPublish"
92
92
  />
93
93
  </div>
94
94
  </template>
@@ -246,21 +246,19 @@
246
246
  </div>
247
247
  </template>
248
248
  <script>
249
- import { computed } from 'vue';
250
- import Modal from '../../../atoms/components/Modal/Modal.vue';
249
+ import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
251
250
  import PublishBrandPageCard from './PublishBrandPageCard.vue';
252
- import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
253
- import Dropdown from '../../../atoms/components/Dropdown/Dropdown.vue';
254
- import DropdownItem from '../../../atoms/components/Dropdown/DropdownItem.vue';
255
- import Button from '../../../atoms/components/Button/Button.vue';
256
- import TextCopyField from '../../../atoms/components/TextCopyField/TextCopyField.vue';
251
+ import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
252
+ import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
253
+ import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
254
+ import Button from '../../../../src/atoms/components/Button/Button.vue';
255
+ import TextCopyField from '../../../../src/atoms/components/TextCopyField/TextCopyField.vue';
257
256
 
258
257
  import SellDomainNameSearchWithResults from '../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
259
258
  import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
260
259
  import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
261
260
  import Events, { sitePublishedModal } from '../../constants/event-constants';
262
261
  import mediaQueryMixin from '../../mixins/mediaQueryMixin';
263
- import { tr } from '../../../useSharedLibTranslate';
264
262
 
265
263
  const headerSubtitle = 'Buy matching domain name for your brand';
266
264
 
@@ -415,12 +413,6 @@ export default {
415
413
  'on-view-more-domains',
416
414
  'on-slug-changed',
417
415
  ],
418
- setup() {
419
- return {
420
- tr,
421
- testMessage: computed(() => tr('publishModal.test')),
422
- };
423
- },
424
416
  data() {
425
417
  return {
426
418
  DOMAIN_TYPES,
@@ -1,7 +0,0 @@
1
- {
2
- "exec": "npm run bundle-translation",
3
- "ext": ".json",
4
- "watch": [
5
- "./src"
6
- ]
7
- }
@@ -1,79 +0,0 @@
1
- const path = require('path');
2
- const fs = require('fs');
3
-
4
- const localeSuffixes = ['.de-DE', '.fr-FR', '.es-ES', '.pt-PT', ''];
5
-
6
- const findTranslationFiles = (dir, localeString) => {
7
- const files = [];
8
- const entries = fs.readdirSync(dir);
9
-
10
- entries.forEach((entry) => {
11
- const fullPath = path.join(dir, entry);
12
-
13
- if (fs.statSync(fullPath).isDirectory()) {
14
- if (entry === 'i18n') {
15
- files.push(
16
- ...fs
17
- .readdirSync(fullPath)
18
- .filter((file) => file.endsWith(`${localeString}.json`))
19
- .map((file) => path.join(fullPath, file)),
20
- );
21
- } else {
22
- // Recursively find translation files in nested folders
23
- files.push(...findTranslationFiles(fullPath, localeString));
24
- }
25
- }
26
- });
27
-
28
- return files;
29
- };
30
-
31
- const bundle = () => {
32
- console.log('Bundling translations...', __dirname);
33
-
34
- const bundlesDir = path.resolve(__dirname, './bundles');
35
-
36
- console.log('bundlesDir', bundlesDir);
37
-
38
- if (!fs.existsSync(bundlesDir)) {
39
- console.log('Creating bundles dir');
40
- fs.mkdirSync(bundlesDir);
41
- }
42
-
43
- const rootDir = path.resolve(__dirname, '../src');
44
-
45
- localeSuffixes.forEach((locale) => {
46
- const outputFile = path.resolve(bundlesDir, `bundled-translations${locale}.json`);
47
-
48
- const translationFiles = findTranslationFiles(rootDir, locale);
49
-
50
- console.log(
51
- `Found ${translationFiles.length} translation files in BrandPage for file prefix: ${`bundled-translations${locale}.json`}`,
52
- );
53
-
54
- const translations = {};
55
-
56
- translationFiles.forEach((file) => {
57
- const fileContent = fs.readFileSync(file, 'utf-8');
58
-
59
- Object.assign(translations, JSON.parse(fileContent));
60
- });
61
-
62
- console.log(`Writing bundled translations to: ${outputFile}`);
63
-
64
- try {
65
- const potentiallyExistingFile = fs.readFileSync(outputFile, 'utf-8');
66
-
67
- if (potentiallyExistingFile === JSON.stringify(translations, null, 2)) {
68
- console.log('Current translations are the same as the existing file - skipping write');
69
- } else {
70
- fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
71
- }
72
- } catch (e) {
73
- console.log("Translation file doesn't exist, creating new one");
74
- fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
75
- }
76
- });
77
- };
78
-
79
- bundle();
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "DE-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "ES-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "FR-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "PT-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "PT-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "DE-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "ES-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "FR-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "EN-Publish Brand Page"
4
- }
5
- }
@@ -1,5 +0,0 @@
1
- {
2
- "publishModal": {
3
- "test": "PT-Publish Brand Page"
4
- }
5
- }
@@ -1,38 +0,0 @@
1
- // eslint-disable-next-line import/no-extraneous-dependencies
2
- import i18next from 'i18next';
3
-
4
- const fallbackLocale = 'en-US';
5
-
6
- const relativePathsToTranslationFiles = {
7
- 'en-US': () => import('./bundles/bundled-translations.json'),
8
- 'de-DE': () => import('./bundles/bundled-translations.de-DE.json'),
9
- 'fr-FR': () => import('./bundles/bundled-translations.fr-FR.json'),
10
- 'es-ES': () => import('./bundles/bundled-translations.es-ES.json'),
11
- 'pt-PT': () => import('./bundles/bundled-translations.pt-PT.json'),
12
- };
13
-
14
- const setLocaleAsync = async (locale = 'en-US') => {
15
- const localeToUse = locale;
16
-
17
- if (!i18next.isInitialized) {
18
- await i18next.init({
19
- debug: false,
20
- fallbackLng: fallbackLocale,
21
- lng: localeToUse,
22
- });
23
- }
24
-
25
- const languageFile = (await relativePathsToTranslationFiles[localeToUse]()).default;
26
-
27
- await i18next.addResourceBundle(localeToUse, 'fe-shared-lib', {
28
- ...languageFile,
29
- });
30
- };
31
-
32
- const tr = (key, valuesToInterpolate = {}) => {
33
- const translated = i18next.t(key, { ns: 'fe-shared-lib', ...valuesToInterpolate });
34
-
35
- return translated;
36
- };
37
-
38
- export { setLocaleAsync, tr };