@designcrowd/fe-shared-lib 1.5.27-ENG-3954 → 1.5.28-ast-jy-1

package/.claude/skills/new-icon/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: new-icon
+description: Add a new SVG icon to the fe-shared-lib icon library. Use when given SVG code and an icon name to create.
+argument-hint: "[icon-name] [svg-code]"
+---
+
+# Add New Icon
+
+Add a new icon to the shared component library given an icon name and SVG source.
+
+## Steps
+
+### 1. Create the icon Vue file
+
+Create `src/atoms/components/icon/icons/<icon-name>.vue`.
+
+Extract only the inner SVG content — no `fill` attributes (color is controlled by the parent via `tw-fill-current`).
+
+**Simple icon** (no clip-path, or clip-path clips to full viewBox — effectively a no-op):
+
+```vue
+<template>
+  <path d="..." />
+</template>
+```
+
+**Icon with meaningful clip-path** (follow the pattern in `hamburger-4.vue`):
+
+```vue
+<template>
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_XXXX)">
+      <path d="..." />
+    </g>
+    <defs>
+      <clipPath id="clip0_XXXX">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+```
+
+> If the `<clipPath>` rect is exactly the same size as the viewBox (`width="16" height="16"`), it clips nothing — use the simple form instead.
+
+---
+
+### 2. Register the icon in `Icon.vue`
+
+**Add the import** (`src/atoms/components/icon/Icon.vue`):
+
+```js
+import IconMyIconName from './icons/my-icon-name.vue';
+```
+
+Place it near other imports with the same first letter, or alongside related icons.
+
+The import name must follow the pattern: `Icon` + PascalCase of the icon name.
+
+- `discount-badge` → `IconDiscountBadge`
+- `arrow-up` → `IconArrowUp`
+
+**Register in `components`**:
+
+```js
+components: {
+  // ...
+  IconMyIconName,
+  // ...
+}
+```
+
+---
+
+### 3. Add to Storybook
+
+In `src/atoms/components/icon/Icon.stories.js`, add to the `icons` array:
+
+```js
+{ name: 'my-icon-name' },
+```
+
+Place it near related or alphabetically adjacent icons.
+
+---
+
+## Example
+
+Given icon name `discount-badge` and SVG with a full-viewBox clip-path (no-op):
+
+**`src/atoms/components/icon/icons/discount-badge.vue`**
+
+```vue
+<template>
+  <path d="M4.99447 0.743491..." />
+</template>
+```
+
+**`Icon.vue` import:**
+
+```js
+import IconDiscountBadge from './icons/discount-badge.vue';
+```
+
+**`Icon.vue` components:**
+
+```js
+IconDiscountBadge,
+```
+
+**`Icon.stories.js`:**
+
+```js
+{ name: 'discount-badge' },
+```
+
+The icon is then usable as:
+
+```html
+<icon name="discount-badge" size="md" />
+```

package/dist/css/tailwind-brandCrowd.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }

package/dist/css/tailwind-brandPage.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }

package/dist/css/tailwind-crazyDomains.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }

package/dist/css/tailwind-designCom.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }

package/dist/css/tailwind-designCrowd.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.27-ENG-3954",
+  "version": "1.5.28-ast-jy-1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -946,9 +946,6 @@ video {
 .theme-brandCrowd .tw-w-96 {
   width: 24rem;
 }
-.theme-brandCrowd .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-brandCrowd .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-brandCrowd .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-brandCrowd .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-brandCrowd .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));
 }
+.theme-brandCrowd .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-brandCrowd .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-brandCrowd .tw-font-bold {
   font-weight: 700;
 }
-.theme-brandCrowd .tw-font-medium {
-  font-weight: 500;
-}
 .theme-brandCrowd .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 22 50 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(145 16 38 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(222 222 222 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(71 71 71 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(53 53 53 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(211 238 207 / var(--tw-bg-opacity));

package/public/css/tailwind-brandPage.css

@@ -946,9 +946,6 @@ video {
 .theme-brandPage .tw-w-96 {
   width: 24rem;
 }
-.theme-brandPage .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-brandPage .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-brandPage .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-brandPage .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-brandPage .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1304,6 +1298,10 @@ video {
 .theme-brandPage .tw-border-black\/10 {
   border-color: rgb(0 0 0 / 0.1);
 }
+.theme-brandPage .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-brandPage .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1701,9 +1699,6 @@ video {
 .theme-brandPage .tw-font-bold {
   font-weight: 700;
 }
-.theme-brandPage .tw-font-medium {
-  font-weight: 500;
-}
 .theme-brandPage .tw-font-normal {
   font-weight: 400;
 }
@@ -1867,10 +1862,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.theme-brandPage .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
-}
 .theme-brandPage .hover\:tw-text-grayscale-800:hover {
   --tw-text-opacity: 1;
   color: rgb(17 21 23 / var(--tw-text-opacity));

package/public/css/tailwind-crazyDomains.css

@@ -946,9 +946,6 @@ video {
 .theme-crazyDomains .tw-w-96 {
   width: 24rem;
 }
-.theme-crazyDomains .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-crazyDomains .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-crazyDomains .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-crazyDomains .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-crazyDomains .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));
 }
+.theme-crazyDomains .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-crazyDomains .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(240 240 245 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-crazyDomains .tw-font-bold {
   font-weight: 700;
 }
-.theme-crazyDomains .tw-font-medium {
-  font-weight: 500;
-}
 .theme-crazyDomains .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(235 238 243 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(199 204 207 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(89 138 38 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 103 28 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(218 218 218 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(58 58 58 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 238 213 / var(--tw-bg-opacity));

package/public/css/tailwind-designCom.css

@@ -946,9 +946,6 @@ video {
 .theme-designCom .tw-w-96 {
   width: 24rem;
 }
-.theme-designCom .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-designCom .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-designCom .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-designCom .tw-rounded-lg {
-  border-radius: 0.75rem;
-}
 .theme-designCom .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
 }
+.theme-designCom .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 250 250 / var(--tw-border-opacity));
+}
 .theme-designCom .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(237 237 237 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-designCom .tw-font-bold {
   font-weight: 700;
 }
-.theme-designCom .tw-font-medium {
-  font-weight: 500;
-}
 .theme-designCom .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 209 209 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 53 148 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 236 236 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(49 49 49 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 37 37 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));

package/public/css/tailwind-designCrowd.css

@@ -946,9 +946,6 @@ video {
 .theme-designCrowd .tw-w-96 {
   width: 24rem;
 }
-.theme-designCrowd .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-designCrowd .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-designCrowd .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-designCrowd .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-designCrowd .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
 }
+.theme-designCrowd .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-designCrowd .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-designCrowd .tw-font-bold {
   font-weight: 700;
 }
-.theme-designCrowd .tw-font-medium {
-  font-weight: 500;
-}
 .theme-designCrowd .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(10 91 141 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(223 226 230 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(74 87 103 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 65 77 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(213 242 223 / var(--tw-bg-opacity));

package/src/atoms/components/Button/variants/ButtonGray.vue

@@ -1,14 +1,15 @@
 <template>
   <button
     v-if="!url"
-    class="tw-font-sans tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
+    class="tw-font-sans tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
+          !disabled,
         'tw-bg-grayscale-100 tw-border-grayscale-300 tw-cursor-not-allowed': disabled,
       },
     ]"
@@ -22,15 +23,16 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-justify-center tw-font-sans tw-inline-flex tw-font-bold tw-text-grayscale-800 hover:tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
-        'tw-bg-grayscale-100 tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
+          !disabled,
+        'tw-bg-grayscale-100 tw-border-grayscale-100 tw-cursor-not-allowed': disabled,
       },
     ]"
     :download="download"

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

@@ -14,9 +14,14 @@ export const IconSample = () => {
       return {
         sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
         icons: [
-          { name: 'crown' },
-          { name: 'crown-alt' },
+          { name: 'websites-upgrade-to-add-page' },
+          { name: 'websites-upgrade-to-contact-form' },
+          { name: 'websites-upgrade-to-remove-watermark' },
+          { name: 'websites-upgrade-to-publish' },
+          { name: 'websites-upgrade-to-videos' },
+          { name: 'websites-upgrade-to-maps' },
           { name: 'add-page' },
+          { name: 'page-blank' },
           { name: 'ai' },
           { name: 'arrow-down' },
           { name: 'arrow-left' },
@@ -28,6 +33,7 @@ export const IconSample = () => {
           { name: 'auth-facebook-white' },
           { name: 'auth-google' },
           { name: 'badge' },
+          { name: 'discount-badge' },
           { name: 'briefcase' },
           { name: 'brush' },
           { name: 'banner' },
@@ -145,6 +151,7 @@ export const IconSample = () => {
 
           { name: 'home' },
           { name: 'home-crazy-domains' },
+          { name: 'home-outline' },
           { name: 'info' },
           { name: 'jobs' },
           { name: 'display-style-about-1' },
@@ -383,6 +390,7 @@ export const IconSample = () => {
             <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
               <Icon
                 v-for="size in sizes"
+                viewBox="0 0 96 96"
                 :name="icon.name"
                 :alt-text="icon.altText"
                 :size="size"