@designcrowd/fe-shared-lib 1.2.7 → 1.2.9-ali-disabled-2

package/CLAUDE.md

@@ -0,0 +1,71 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+### Starting Development
+- `npm start` - Builds Tailwind CSS files for all themes and launches Storybook development server on port 6006
+- `npm run storybook` - Same as `npm start` (alias)
+
+### Building
+- `npm run build` - Builds production CSS using Tailwind
+- `npm run build:css` - Builds CSS files using tailwind.build.js
+- `npm run build:storybook` - Builds static Storybook for deployment
+
+### Code Quality
+- `npm run lint` - Runs ESLint on TypeScript, JavaScript, and Vue files in src/
+- `npm run lint:fix` - Automatically fixes linting issues where possible
+
+### Testing in UAT Environment
+To test experimental versions without publishing to production:
+1. Update package.json version to `[current]-[description]`
+2. Run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN`
+3. Update consumer package reference to the new version
+
+## Architecture Overview
+
+This is a shared component library and design system for DesignCrowd's frontend applications, published as `@designcrowd/fe-shared-lib`.
+
+### Project Structure
+- **`src/atoms/`** - Reusable UI components (Button, Modal, Icon, etc.)
+- **`src/experiences/`** - Complex, business-specific components (AuthFlow, PaymentConfig, etc.)
+- **`src/themes/`** - Tailwind CSS theme configurations for different brands
+- **`src/css/`** - Global CSS and Tailwind configuration
+- **`public/css/`** - Generated CSS output files
+
+### Theme System
+The library supports multiple brand themes through Tailwind CSS:
+- **BrandCrowd** (`bc.js`)
+- **BrandPage** (`bp.js`) 
+- **CrazyDomains** (`cd.js`)
+- **DesignCrowd** (`dc.js`)
+- **Design.com** (`dcom.js`)
+
+Themes are built using `tailwind.themes.js` and exported via `src/themes/themes.js`.
+
+### Component Organization
+- **Atoms**: Basic UI components with stories in Storybook
+- **Experiences**: Complex components combining multiple atoms for specific workflows
+- **Icons**: Extensive icon library with brand-specific variants
+- **Mixins**: Reusable Vue.js mixins for common functionality
+
+### Key Files
+- `index.js` - Main export file exposing all components
+- `tailwind.config.js` - Tailwind CSS configuration
+- `vite.config.ts` - Vite build configuration for development
+
+### Local Development Workflow
+Use `npm link` in this directory and `npm link @designcrowd/fe-shared-lib` in consumer projects for local development.
+
+### Storybook
+- Development server runs on port 6006
+- Live Storybook: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
+- Stories are co-located with components (`.stories.js` files)
+
+### Brand Page Integration
+For changes affecting BrandPage Tab in BC.NET:
+1. Update app.maker's reference to this library
+2. Bump app.maker version
+3. Run `npm run docker:publish:bp`
+4. Update BC.NET's reference to the new app.maker version

package/Dockerfile

@@ -29,7 +29,7 @@ COPY .npmignore ./
 RUN npm run bundle-translation
 
 RUN mkdir artifacts
-RUN npm publish || touch artifacts/npm_publish_failed
+RUN npm publish || (touch artifacts/npm_publish_failed && exit 1)
 RUN cp package.json artifacts/
 
 ENTRYPOINT ["/bin/echo", "Nothing to do."]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.7",
+  "version": "1.2.9-ali-disabled-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -113,4 +113,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package/public/css/tailwind-brandCrowd.css

@@ -719,9 +719,6 @@ video {
 .theme-brandCrowd .tw-ml-auto {
   margin-left: auto;
 }
-.theme-brandCrowd .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-brandCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-brandCrowd .tw-h-auto {
   height: auto;
 }
-.theme-brandCrowd .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-brandCrowd .tw-h-full {
   height: 100%;
 }
@@ -849,6 +842,9 @@ video {
 .theme-brandCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1450,17 +1446,6 @@ video {
 .theme-brandCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-brandCrowd .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-brandCrowd .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-brandCrowd .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-brandCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2038,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));
@@ -2106,10 +2087,6 @@ video {
   --tw-shadow-color: #0097D7 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-brandCrowd .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  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);
-}
 .theme-brandCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));
@@ -2224,9 +2201,6 @@ video {
 .theme-brandCrowd .md\:tw-ml-4 {
     margin-left: 1rem;
   }
-.theme-brandCrowd .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
 .theme-brandCrowd .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-brandPage.css

@@ -719,9 +719,6 @@ video {
 .theme-brandPage .tw-ml-auto {
   margin-left: auto;
 }
-.theme-brandPage .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-brandPage .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-brandPage .tw-h-auto {
   height: auto;
 }
-.theme-brandPage .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-brandPage .tw-h-full {
   height: 100%;
 }
@@ -849,6 +842,9 @@ video {
 .theme-brandPage .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandPage .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandPage .tw-w-10 {
   width: 2.5rem;
 }
@@ -1298,17 +1294,6 @@ video {
 .theme-brandPage .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-brandPage .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-brandPage .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-brandPage .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-brandPage .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1806,10 +1791,6 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.theme-brandPage .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  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);
-}
 .theme-brandPage .focus\:tw-border-grayscale-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
@@ -1908,9 +1889,6 @@ video {
 .theme-brandPage .md\:tw-ml-4 {
     margin-left: 1rem;
   }
-.theme-brandPage .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
 .theme-brandPage .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-crazyDomains.css

@@ -719,9 +719,6 @@ video {
 .theme-crazyDomains .tw-ml-auto {
   margin-left: auto;
 }
-.theme-crazyDomains .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-crazyDomains .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-crazyDomains .tw-h-auto {
   height: auto;
 }
-.theme-crazyDomains .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-crazyDomains .tw-h-full {
   height: 100%;
 }
@@ -849,6 +842,9 @@ video {
 .theme-crazyDomains .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-crazyDomains .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-crazyDomains .tw-w-10 {
   width: 2.5rem;
 }
@@ -1450,17 +1446,6 @@ video {
 .theme-crazyDomains .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-crazyDomains .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-crazyDomains .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-crazyDomains .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-crazyDomains .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2038,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));
@@ -2106,10 +2087,6 @@ video {
   --tw-shadow-color: #00A1EF !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-crazyDomains .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  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);
-}
 .theme-crazyDomains .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));
@@ -2224,9 +2201,6 @@ video {
 .theme-crazyDomains .md\:tw-ml-4 {
     margin-left: 1rem;
   }
-.theme-crazyDomains .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
 .theme-crazyDomains .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-designCom.css

@@ -719,9 +719,6 @@ video {
 .theme-designCom .tw-ml-auto {
   margin-left: auto;
 }
-.theme-designCom .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-designCom .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-designCom .tw-h-auto {
   height: auto;
 }
-.theme-designCom .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-designCom .tw-h-full {
   height: 100%;
 }
@@ -849,6 +842,9 @@ video {
 .theme-designCom .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCom .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCom .tw-w-10 {
   width: 2.5rem;
 }
@@ -1450,17 +1446,6 @@ video {
 .theme-designCom .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-designCom .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-designCom .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-designCom .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-designCom .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2038,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));
@@ -2106,10 +2087,6 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-designCom .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  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);
-}
 .theme-designCom .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
@@ -2224,9 +2201,6 @@ video {
 .theme-designCom .md\:tw-ml-4 {
     margin-left: 1rem;
   }
-.theme-designCom .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
 .theme-designCom .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/public/css/tailwind-designCrowd.css

@@ -719,9 +719,6 @@ video {
 .theme-designCrowd .tw-ml-auto {
   margin-left: auto;
 }
-.theme-designCrowd .tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .theme-designCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -830,10 +827,6 @@ video {
 .theme-designCrowd .tw-h-auto {
   height: auto;
 }
-.theme-designCrowd .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-designCrowd .tw-h-full {
   height: 100%;
 }
@@ -849,6 +842,9 @@ video {
 .theme-designCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1450,17 +1446,6 @@ video {
 .theme-designCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.theme-designCrowd .tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.theme-designCrowd .tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.theme-designCrowd .tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .theme-designCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2038,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));
@@ -2106,10 +2087,6 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.theme-designCrowd .hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  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);
-}
 .theme-designCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
@@ -2224,9 +2201,6 @@ video {
 .theme-designCrowd .md\:tw-ml-4 {
     margin-left: 1rem;
   }
-.theme-designCrowd .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
 .theme-designCrowd .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js

@@ -21,6 +21,7 @@ export const Sample = () => {
         {
           label: 'Medium',
           value: 'medium',
+          disabled: true,
         },
         {
           label: 'Large',

package/src/atoms/components/ButtonGroup/ButtonGroup.vue

@@ -10,11 +10,14 @@
       <button
         class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <slot name="content" :option="option"></slot>
       </button>
@@ -35,8 +38,10 @@
       <button
         v-if="variant === 'icon'"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
           'tw-px-2': !option.iconViewBox,
           'tw-px-px':
             option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
@@ -45,9 +50,10 @@
           'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
         }"
         :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-icon-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <div
           :class="{
@@ -67,12 +73,15 @@
       <button
         v-else
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-image-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
       </button>
@@ -90,11 +99,14 @@
       :key="`button-${option.value}`"
       :class="{
         'tw-ml-2': idx > 0 && !columns,
-        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+        'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+        'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
       }"
+      :disabled="option.disabled"
       class="tw-text-xs button-group-button tw-shadow-inner"
-      @click="$emit('on-select', option)"
+      @click="!option.disabled && $emit('on-select', option)"
     >
       {{ option.label }}
     </button>

package/src/atoms/components/CollapsiblePanel/CollapsiblePanel.mixin.js

@@ -6,6 +6,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    subtitle: {
+      type: String,
+      default: '',
+    },
     isCollapsed: {
       type: Boolean,
       required: false,

package/src/atoms/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -38,3 +38,16 @@ export const WithForm = () => {
     `,
   };
 };
+
+export const WithSubtitle = () => {
+  return {
+    ...data,
+    template: `
+      <CollapsiblePanel title="Hello" subtitle="This is a subtitle">
+        <p>Test case with subtitle</p>
+        <p>Test case with subtitle</p>
+        <p>Test case with subtitle</p>
+      </CollapsiblePanel>
+    `,
+  };
+};

package/src/atoms/components/CollapsiblePanel/CollapsiblePanel.vue

@@ -7,8 +7,11 @@
       :class="{ 'tw-mb-2': !selfIsCollapsed }"
       @click="toggleCollapsed()"
     >
-      <div class="tw-grow tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800">
-        {{ title }}
+      <div class="tw-grow">
+        <div class="tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800">
+          {{ title }}
+        </div>
+        <div v-if="subtitle" class="tw-text-sm tw-text-grayscale-700 tw-my-1">{{ subtitle }}</div>
       </div>
       <div class="tw-bg-transparent tw-border-none tw-text-grayscale-600 tw-ml-2">
         <Icon :name="selfIsCollapsed ? 'chevron-down' : 'chevron-up'" size="sm" />

package/src/bundles/bundled-translations.de-DE.json

@@ -22,7 +22,7 @@
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Kostenlose Domain",
     "buyNowButtonLabel": "Jetzt kaufen",
-    "pricePerYearLabel": "/Jahr",
+    "pricePerYearLabel": "/yr",
     "costPriceLabel": "Kostenpreis:"
   },
   "sellDomainNameListModal": {
@@ -40,7 +40,7 @@
     "searchBarPreText": "Domainname"
   },
   "sellDomainNameListSearchResult": {
-    "domainSearchEmptyMessage": "Leider konnten wir keine Domain für \"{{domainNameSearchTerm}}\" finden.",
+    "domainSearchEmptyMessage": "Leider konnten wir keine Domain für „{{domainNameSearchTerm}}“ finden.",
     "searchAnotherDomainMessage": "Versuchen Sie, mit einer anderen Domain zu suchen."
   },
   "sellDomainNameWidget": {

package/src/bundles/bundled-translations.es-ES.json

@@ -22,7 +22,7 @@
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Dominio gratis",
     "buyNowButtonLabel": "Comprar ahora",
-    "pricePerYearLabel": "/año",
+    "pricePerYearLabel": "/yr",
     "costPriceLabel": "Precio de coste:"
   },
   "sellDomainNameListModal": {

package/src/bundles/bundled-translations.fr-FR.json

@@ -22,8 +22,8 @@
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domaine gratuit",
     "buyNowButtonLabel": "Acheter",
-    "pricePerYearLabel": "/an",
-    "costPriceLabel": "Prix de revient:"
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Prix de revient :"
   },
   "sellDomainNameListModal": {
     "domainSearchHeaderTitle": "Rechercher un nom de domaine",
@@ -40,7 +40,7 @@
     "searchBarPreText": "Nom de domaine"
   },
   "sellDomainNameListSearchResult": {
-    "domainSearchEmptyMessage": "Désolé, nous n’avons pas trouvé de nom de domaine pour \"{{domainNameSearchTerm}}\".",
+    "domainSearchEmptyMessage": "Désolé, nous n’avons pas trouvé de nom de domaine pour « {{domainNameSearchTerm}} ».",
     "searchAnotherDomainMessage": "Essayez de faire une recherche avec un autre nom de domaine."
   },
   "sellDomainNameWidget": {

package/src/bundles/bundled-translations.pt-PT.json

@@ -22,7 +22,7 @@
   "sellDomainNameList": {
     "freeDomainButtonLabel": "Domínio gratuito",
     "buyNowButtonLabel": "Comprar Agora",
-    "pricePerYearLabel": "/ano",
+    "pricePerYearLabel": "/yr",
     "costPriceLabel": "Preço de Custo:"
   },
   "sellDomainNameListModal": {