@fluidattacks/design 8.3.1 → 8.4.0

package/dist/components/tag/index.d.ts

@@ -1,4 +1,4 @@
 import { ITagProps, TTagVariant } from './types';
-declare const Tag: ({ disabled, dot, icon, iconColor, iconType, id, filterId, filterValues, fontSize, href, linkLabel, onBodyClick, onClose, priority, selected, tagTitle, tagLabel, truncate, variant, }: Readonly<ITagProps>) => JSX.Element;
+declare const Tag: ({ disabled, dot, icon, iconColor, iconType, id, filterId, filterValues, fontSize, fullWidth, href, linkLabel, onBodyClick, onClose, priority, selected, tagTitle, tagLabel, truncate, variant, }: Readonly<ITagProps>) => JSX.Element;
 export type { ITagProps, TTagVariant };
 export { Tag };

package/dist/components/tag/index.js

@@ -1,40 +1,41 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { l as b } from "../../_virtual/lodash.js";
-import { StyledTag as k, StyledTagContent as E, StyledDot as j } from "./styles.js";
-import { Icon as K } from "../icon/index.js";
-import { IconButton as P } from "../icon-button/index.js";
+import { l as k } from "../../_virtual/lodash.js";
+import { StyledTag as E, StyledTagContent as j, StyledDot as K } from "./styles.js";
+import { Icon as P } from "../icon/index.js";
+import { IconButton as W } from "../icon-button/index.js";
 import { Link as C } from "../link/index.js";
 import "../typography/heading/index.js";
-import { Span as W } from "../typography/span/index.js";
+import { Span as q } from "../typography/span/index.js";
 import "../typography/text/index.js";
-const R = ({
+const U = ({
   disabled: f,
   dot: h = !1,
-  icon: c,
+  icon: d,
   iconColor: u = "inherit",
   iconType: v = "fa-light",
   id: g = "close-tag",
   filterId: x = "",
-  filterValues: d = "",
+  filterValues: c = "",
   fontSize: y,
+  fullWidth: S = !1,
   href: r,
-  linkLabel: S,
+  linkLabel: $,
   onBodyClick: i,
   onClose: n,
-  priority: $ = "default",
+  priority: T = "default",
   selected: a,
   tagTitle: p = "",
-  tagLabel: s,
-  truncate: T = !0,
-  variant: w = "default"
+  tagLabel: l,
+  truncate: w = !0,
+  variant: z = "default"
 }) => {
-  const z = s.length > 25 && T && b.isEmpty(p + d), D = `${s.slice(0, 25)}...`, I = (t) => {
+  const D = l.length > 25 && w && k.isEmpty(p + c), I = `${l.slice(0, 25)}...`, N = (t) => {
     t.target === t.currentTarget && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i?.());
-  }, N = (t) => {
+  }, b = (t) => {
     t.stopPropagation(), n?.();
-  }, l = i !== void 0, m = l && typeof a == "boolean";
+  }, s = i !== void 0, m = s && typeof a == "boolean";
   return /* @__PURE__ */ e(
-    W,
+    q,
     {
       className: "gap-0.5",
       color: "inherit",
@@ -42,42 +43,43 @@ const R = ({
       size: "md",
       children: [
         /* @__PURE__ */ e(
-          k,
+          E,
           {
             $fontSize: y,
-            $interactive: l,
+            $fullWidth: S,
+            $interactive: s,
             $selectable: m,
             $selected: a === !0,
-            $variant: w,
-            className: $,
+            $variant: z,
+            className: T,
             "data-testid": x,
-            ...l && {
+            ...s && {
               ...m ? { "aria-pressed": a } : {},
               onClick: i,
-              onKeyDown: I,
+              onKeyDown: N,
               role: "button",
               tabIndex: 0
             },
             children: [
-              /* @__PURE__ */ e(E, { children: [
-                c ? /* @__PURE__ */ o(
-                  K,
+              /* @__PURE__ */ e(j, { children: [
+                d ? /* @__PURE__ */ o(
+                  P,
                   {
-                    icon: c,
+                    icon: d,
                     iconColor: u,
                     iconSize: "sm",
                     iconType: v
                   }
                 ) : void 0,
-                h ? /* @__PURE__ */ o(j, { "data-testid": "tag-dot" }) : void 0,
+                h ? /* @__PURE__ */ o(K, { "data-testid": "tag-dot" }) : void 0,
                 /* @__PURE__ */ e("span", { className: "w-full", children: [
                   /* @__PURE__ */ o("strong", { children: p }),
-                  /* @__PURE__ */ o("span", { children: z ? D : s }),
-                  /* @__PURE__ */ o("strong", { className: "w-full", children: d })
+                  /* @__PURE__ */ o("span", { children: D ? I : l }),
+                  /* @__PURE__ */ o("strong", { className: "w-full", children: c })
                 ] })
               ] }),
               n ? /* @__PURE__ */ o(
-                P,
+                W,
                 {
                   disabled: f,
                   icon: "xmark",
@@ -85,7 +87,7 @@ const R = ({
                   iconSize: "xs",
                   iconType: "fa-light",
                   id: g,
-                  onClick: i !== void 0 ? N : n,
+                  onClick: i !== void 0 ? b : n,
                   px: 0.125,
                   py: 0.125,
                   variant: "ghost"
@@ -94,11 +96,11 @@ const R = ({
             ]
           }
         ),
-        r === void 0 ? void 0 : /* @__PURE__ */ o(C, { href: r, children: S })
+        r === void 0 ? void 0 : /* @__PURE__ */ o(C, { href: r, children: $ })
       ]
     }
   );
 };
 export {
-  R as Tag
+  U as Tag
 };

package/dist/components/tag/styles.d.ts

@@ -1,6 +1,7 @@
 import { TTagVariant } from './types';
 interface IStyledTag {
     $fontSize?: string;
+    $fullWidth?: boolean;
     $interactive?: boolean;
     $selectable?: boolean;
     $selected?: boolean;

package/dist/components/tag/styles.js

@@ -1,11 +1,24 @@
 import { styled as a } from "styled-components";
 import { variantBuilder as i } from "../@core/variants/utils.js";
-const { getVariant: p } = i(
+const { getVariant: g } = i(
   (o) => ({
     complementary: `
       background-color: ${o.palette.complementary[300]};
       color: ${o.palette.white};
     `,
+    cwe: `
+      --tag-padding-y: calc(${o.spacing[0.125]} - 1px);
+      --tag-padding-x: ${o.spacing[0.25]};
+
+      background-color: ${o.palette.gray[50]};
+      border: 1px solid ${o.palette.gray[300]};
+      border-radius: ${o.spacing[0.5]};
+      color: ${o.palette.gray[600]};
+
+      a:hover & {
+        text-decoration: underline;
+      }
+    `,
     default: `
       background-color: ${o.palette.gray[100]};
       color: ${o.palette.gray[600]};
@@ -47,6 +60,21 @@ const { getVariant: p } = i(
         color: ${o.palette.info[50]};
       }
     `,
+    overflow: `
+      --tag-padding-y: calc(${o.spacing[0.125]} - 1px);
+      --tag-padding-x: ${o.spacing[0.25]};
+
+      background-color: ${o.palette.gray[300]};
+      border: 1px solid ${o.palette.gray[300]};
+      border-radius: ${o.spacing[0.5]};
+      color: ${o.palette.gray[600]};
+
+      &[role="button"]:hover {
+        background-color: ${o.palette.gray[500]};
+        border-color: ${o.palette.gray[500]};
+        color: ${o.palette.gray[25]};
+      }
+    `,
     reachable: `
       background-color: ${o.palette.gray[50]};
       color: ${o.palette.gray[800]};
@@ -106,14 +134,15 @@ const { getVariant: p } = i(
   &:hover {
     background-color: ${r ? o.palette.gray[800] : o.palette.gray[100]};
   }
-`, d = a.span`
+`, $ = a.span`
   ${({
   theme: o,
   $fontSize: r = o.typography.text.sm,
+  $fullWidth: t = !1,
   $variant: l,
-  $interactive: c = !1,
-  $selectable: t = !1,
-  $selected: n = !1
+  $interactive: n = !1,
+  $selectable: c = !1,
+  $selected: p = !1
 }) => `
     align-items: center;
     border-radius: ${o.spacing[l === "technique" ? 1 : 0.25]};
@@ -127,8 +156,8 @@ const { getVariant: p } = i(
     line-height: 18px;
     padding: var(--tag-padding-y) var(--tag-padding-x);
     white-space: nowrap;
-    width: max-content;
-    ${c && !t ? "cursor: pointer;" : ""}
+    width: ${t ? "100%" : "max-content"};
+    ${n && !c ? "cursor: pointer;" : ""}
 
     ~ a {
       font-size: ${o.typography.text.xs};
@@ -148,17 +177,17 @@ const { getVariant: p } = i(
       }
     }
 
-    ${p(o, l)}
-    ${t ? e(o, n) : ""}
+    ${g(o, l)}
+    ${c ? e(o, p) : ""}
   `}
-`, $ = a.span`
+`, u = a.span`
   ${({ theme: o }) => `
     align-items: center;
     display: inline-flex;
     gap: ${o.spacing[0.25]};
     min-width: 0;
   `}
-`, u = a.span`
+`, y = a.span`
   background-color: currentColor;
   border-radius: 50%;
   flex-shrink: 0;
@@ -166,7 +195,7 @@ const { getVariant: p } = i(
   width: 6px;
 `;
 export {
-  u as StyledDot,
-  d as StyledTag,
-  $ as StyledTagContent
+  y as StyledDot,
+  $ as StyledTag,
+  u as StyledTagContent
 };

package/dist/components/tag/types.d.ts

@@ -1,5 +1,5 @@
 import { IIconModifiable } from '../@core';
-type TTagVariant = "complementary" | "default" | "error" | "inactive" | "inactiveOutline" | "info" | "reachable" | "remediation" | "role" | "success" | "technique" | "warning";
+type TTagVariant = "complementary" | "cwe" | "default" | "error" | "inactive" | "inactiveOutline" | "info" | "overflow" | "reachable" | "remediation" | "role" | "success" | "technique" | "warning";
 type TTagPriority = "default" | "high" | "low" | "medium";
 /**
  * Tag component props.
@@ -10,6 +10,8 @@ type TTagPriority = "default" | "high" | "low" | "medium";
  * @property { boolean } [dot] - Whether to render a status dot before the label.
  * @property { string } [filterValues] - The filter values for the tag.
  * @property { string } [fontSize] - The font size for the tag.
+ * @property { boolean } [fullWidth] - Whether the tag fills the width of its
+ *   container instead of fitting its content.
  * @property { string } [href] - The href for the tag.
  * @property { string } [linkLabel] - The link label for the tag.
  * @property { Function } [onClose] - Function handler for close button click.
@@ -29,6 +31,7 @@ interface ITagProps extends Partial<Pick<IIconModifiable, "icon" | "iconColor" |
     filterValues?: string;
     filterId?: string;
     fontSize?: string;
+    fullWidth?: boolean;
     href?: string;
     linkLabel?: string;
     onBodyClick?: () => void;

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "8.3.1"
+  "version": "8.4.0"
 }