@designcrowd/fe-shared-lib 1.5.27 → 1.5.28-ast-jy-2

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

@@ -617,9 +617,6 @@ video {
 .tw-m-3 {
   margin: 0.75rem;
 }
-.tw-m-4 {
-  margin: 1rem;
-}
 .tw-m-5 {
   margin: 1.25rem;
 }
@@ -687,9 +684,6 @@ video {
 .tw-mb-0 {
   margin-bottom: 0px;
 }
-.tw-mb-0\.5 {
-  margin-bottom: 0.125rem;
-}
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -744,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;
 }
@@ -756,9 +753,6 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
-.tw-mt-6 {
-  margin-top: 1.5rem;
-}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -768,48 +762,6 @@ video {
 .tw-box-content {
   box-sizing: content-box;
 }
-.tw-line-clamp-1 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-.tw-line-clamp-2 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-.tw-line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-.tw-line-clamp-4 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-}
-.tw-line-clamp-5 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
-}
-.tw-line-clamp-6 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 6;
-}
-.tw-line-clamp-none {
-  overflow: visible;
-  display: block;
-  -webkit-box-orient: horizontal;
-  -webkit-line-clamp: none;
-}
 .tw-block {
   display: block;
 }
@@ -959,9 +911,6 @@ video {
 .tw-max-w-2xl {
   max-width: 42rem;
 }
-.tw-max-w-3xl {
-  max-width: 48rem;
-}
 .tw-max-w-full {
   max-width: 100%;
 }
@@ -977,9 +926,6 @@ video {
 .tw-flex-none {
   flex: none;
 }
-.tw-flex-shrink-0 {
-  flex-shrink: 0;
-}
 .tw-grow {
   flex-grow: 1;
 }
@@ -1195,9 +1141,6 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.tw-text-ellipsis {
-  text-overflow: ellipsis;
-}
 .tw-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1306,6 +1249,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));
 }
+.tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1322,10 +1269,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.tw-border-grayscale-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(43 43 43 / var(--tw-border-opacity));
-}
 .tw-border-info-300 {
   --tw-border-opacity: 1;
   border-color: rgb(102 193 231 / var(--tw-border-opacity));
@@ -1798,6 +1741,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1820,10 +1766,6 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
-.tw-text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
 .tw-text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -2094,10 +2036,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -2154,10 +2092,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(17 21 23 / var(--tw-text-opacity));
 }
-.hover\:tw-text-primary-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(194 22 50 / var(--tw-text-opacity));
-}
 .hover\:tw-text-secondary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(89 89 89 / var(--tw-text-opacity));
@@ -2245,10 +2179,6 @@ video {
     margin-bottom: 1rem;
   }
 
-  .sm\:tw-ml-2 {
-    margin-left: 0.5rem;
-  }
-
   .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -2297,10 +2227,6 @@ video {
     flex-direction: row;
   }
 
-  .sm\:tw-items-center {
-    align-items: center;
-  }
-
   .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -2312,18 +2238,10 @@ video {
 }
 @media (min-width: 768px) {
 
-  .md\:tw-relative {
-    position: relative;
-  }
-
   .md\:tw-right-6 {
     right: 1.5rem;
   }
 
-  .md\:tw-order-first {
-    order: -9999;
-  }
-
   .md\:tw-mb-0 {
     margin-bottom: 0px;
   }
@@ -2388,10 +2306,6 @@ video {
     width: 6rem;
   }
 
-  .md\:tw-w-3\/4 {
-    width: 75%;
-  }
-
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2404,10 +2318,6 @@ video {
     max-width: 100%;
   }
 
-  .md\:tw-flex-1 {
-    flex: 1 1 0%;
-  }
-
   .md\:tw-grow {
     flex-grow: 1;
   }
@@ -2467,10 +2377,6 @@ video {
        object-fit: contain;
   }
 
-  .md\:tw-p-0 {
-    padding: 0px;
-  }
-
   .md\:tw-p-2 {
     padding: 0.5rem;
   }
@@ -2487,11 +2393,6 @@ video {
     padding: 2rem;
   }
 
-  .md\:tw-px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -2507,10 +2408,6 @@ video {
     padding-bottom: 0.5rem;
   }
 
-  .md\:tw-pb-0 {
-    padding-bottom: 0px;
-  }
-
   .md\:tw-pl-4 {
     padding-left: 1rem;
   }

package/dist/css/tailwind-brandPage.css

@@ -617,9 +617,6 @@ video {
 .tw-m-3 {
   margin: 0.75rem;
 }
-.tw-m-4 {
-  margin: 1rem;
-}
 .tw-m-5 {
   margin: 1.25rem;
 }
@@ -687,9 +684,6 @@ video {
 .tw-mb-0 {
   margin-bottom: 0px;
 }
-.tw-mb-0\.5 {
-  margin-bottom: 0.125rem;
-}
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -744,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;
 }
@@ -756,9 +753,6 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
-.tw-mt-6 {
-  margin-top: 1.5rem;
-}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -768,48 +762,6 @@ video {
 .tw-box-content {
   box-sizing: content-box;
 }
-.tw-line-clamp-1 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-.tw-line-clamp-2 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-.tw-line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-.tw-line-clamp-4 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-}
-.tw-line-clamp-5 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
-}
-.tw-line-clamp-6 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 6;
-}
-.tw-line-clamp-none {
-  overflow: visible;
-  display: block;
-  -webkit-box-orient: horizontal;
-  -webkit-line-clamp: none;
-}
 .tw-block {
   display: block;
 }
@@ -959,9 +911,6 @@ video {
 .tw-max-w-2xl {
   max-width: 42rem;
 }
-.tw-max-w-3xl {
-  max-width: 48rem;
-}
 .tw-max-w-full {
   max-width: 100%;
 }
@@ -977,9 +926,6 @@ video {
 .tw-flex-none {
   flex: none;
 }
-.tw-flex-shrink-0 {
-  flex-shrink: 0;
-}
 .tw-grow {
   flex-grow: 1;
 }
@@ -1195,9 +1141,6 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.tw-text-ellipsis {
-  text-overflow: ellipsis;
-}
 .tw-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1298,6 +1241,10 @@ video {
 .tw-border-black\/10 {
   border-color: rgb(0 0 0 / 0.1);
 }
+.tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1314,10 +1261,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.tw-border-grayscale-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(43 43 43 / var(--tw-border-opacity));
-}
 .tw-border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1646,6 +1589,9 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.tw-pt-4 {
+  padding-top: 1rem;
+}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1668,10 +1614,6 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
-.tw-text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
 .tw-text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -1858,10 +1800,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
-}
 .hover\:tw-text-grayscale-800:hover {
   --tw-text-opacity: 1;
   color: rgb(17 21 23 / var(--tw-text-opacity));
@@ -1925,10 +1863,6 @@ video {
     margin-bottom: 1rem;
   }
 
-  .sm\:tw-ml-2 {
-    margin-left: 0.5rem;
-  }
-
   .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -1977,10 +1911,6 @@ video {
     flex-direction: row;
   }
 
-  .sm\:tw-items-center {
-    align-items: center;
-  }
-
   .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -1992,18 +1922,10 @@ video {
 }
 @media (min-width: 768px) {
 
-  .md\:tw-relative {
-    position: relative;
-  }
-
   .md\:tw-right-6 {
     right: 1.5rem;
   }
 
-  .md\:tw-order-first {
-    order: -9999;
-  }
-
   .md\:tw-mb-0 {
     margin-bottom: 0px;
   }
@@ -2068,10 +1990,6 @@ video {
     width: 6rem;
   }
 
-  .md\:tw-w-3\/4 {
-    width: 75%;
-  }
-
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2084,10 +2002,6 @@ video {
     max-width: 100%;
   }
 
-  .md\:tw-flex-1 {
-    flex: 1 1 0%;
-  }
-
   .md\:tw-grow {
     flex-grow: 1;
   }
@@ -2147,10 +2061,6 @@ video {
        object-fit: contain;
   }
 
-  .md\:tw-p-0 {
-    padding: 0px;
-  }
-
   .md\:tw-p-2 {
     padding: 0.5rem;
   }
@@ -2167,11 +2077,6 @@ video {
     padding: 2rem;
   }
 
-  .md\:tw-px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -2187,10 +2092,6 @@ video {
     padding-bottom: 0.5rem;
   }
 
-  .md\:tw-pb-0 {
-    padding-bottom: 0px;
-  }
-
   .md\:tw-pl-4 {
     padding-left: 1rem;
   }