@fluidattacks/design 8.5.0 → 8.7.0

package/dist/components/button/index.stories.d.ts

@@ -12,5 +12,6 @@ declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import(
 declare const Secondary: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
 declare const Tertiary: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
 declare const Ghost: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
-export { Default, Secondary, Tertiary, Ghost };
+declare const TextLink: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, PropsWithChildren<IButtonStoryProps>>;
+export { Default, Secondary, Tertiary, Ghost, TextLink };
 export default config;

package/dist/components/button/styles.js

@@ -2,99 +2,116 @@ import { styled as n } from "styled-components";
 import { variantBuilder as t } from "../@core/variants/utils.js";
 import { BaseButtonComponent as i } from "../@core/styles.js";
 const { getVariant: l } = t(
-  (a) => ({
+  (r) => ({
     ghost: `
       background: transparent;
       border: none;
-      color: ${a.palette.gray[800]};
-      --btn-padding-x: ${a.spacing[0.5]};
-      --btn-padding-y: ${a.spacing[0.625]};
-      --btn-spacing: ${a.spacing[0.25]};
+      color: ${r.palette.gray[800]};
+      --btn-padding-x: ${r.spacing[0.5]};
+      --btn-padding-y: ${r.spacing[0.625]};
+      --btn-spacing: ${r.spacing[0.25]};
 
       &:disabled {
-        color: ${a.palette.gray[400]};
+        color: ${r.palette.gray[400]};
         cursor: not-allowed;
       }
 
       &:hover:not([disabled]) {
-        background-color: ${a.palette.gray[100]};
-        color: ${a.palette.gray[800]};
+        background-color: ${r.palette.gray[100]};
+        color: ${r.palette.gray[800]};
       }
     `,
     link: `
       --btn-padding-x: 0;
       --btn-padding-y: 0;
-      color: ${a.palette.gray[800]};
+      color: ${r.palette.gray[800]};
 
       &:hover {
-        color: ${a.palette.gray[500]};
+        color: ${r.palette.gray[500]};
       }
     `,
     primary: `
-      background: ${a.palette.primary[500]};
+      background: ${r.palette.primary[500]};
       border: none;
-      color: ${a.palette.white};
-      --btn-spacing: ${a.spacing[0.25]};
+      color: ${r.palette.white};
+      --btn-spacing: ${r.spacing[0.25]};
 
       &:disabled {
-        background: ${a.palette.gray[200]};
-        color: ${a.palette.gray[400]};
+        background: ${r.palette.gray[200]};
+        color: ${r.palette.gray[400]};
         cursor: not-allowed;
       }
 
       &:hover:not([disabled]) {
-        background-color: ${a.palette.primary[700]};
-        color: ${a.palette.white};
+        background-color: ${r.palette.primary[700]};
+        color: ${r.palette.white};
       }
     `,
     secondary: `
-      background: ${a.palette.gray[800]};
+      background: ${r.palette.gray[800]};
       border: none;
-      color: ${a.palette.white};
-      --btn-spacing: ${a.spacing[0.25]};
+      color: ${r.palette.white};
+      --btn-spacing: ${r.spacing[0.25]};
 
       &:disabled {
-        background: ${a.palette.gray[200]};
-        color: ${a.palette.gray[400]};
+        background: ${r.palette.gray[200]};
+        color: ${r.palette.gray[400]};
         cursor: not-allowed;
       }
 
       &:hover:not([disabled]) {
-        background-color: ${a.palette.gray[600]};
-        color: ${a.palette.white};
+        background-color: ${r.palette.gray[600]};
+        color: ${r.palette.white};
       }
     `,
     tertiary: `
       background: transparent;
-      border: 1px solid ${a.palette.primary[500]};
-      color: ${a.palette.primary[500]};
-      --btn-spacing: ${a.spacing[0.25]};
+      border: 1px solid ${r.palette.primary[500]};
+      color: ${r.palette.primary[500]};
+      --btn-spacing: ${r.spacing[0.25]};
 
       &:disabled {
         background: transparent;
-        border: 1px solid ${a.palette.gray[200]};
-        color: ${a.palette.gray[300]};
+        border: 1px solid ${r.palette.gray[200]};
+        color: ${r.palette.gray[300]};
         cursor: not-allowed;
       }
 
       &:hover:not([disabled]) {
-        background-color: ${a.palette.primary[500]};
-        color: ${a.palette.white};
+        background-color: ${r.palette.primary[500]};
+        color: ${r.palette.white};
+      }
+    `,
+    textLink: `
+      background: transparent;
+      border: none;
+      color: ${r.palette.primary[500]};
+      --btn-padding-x: 0;
+      --btn-padding-y: 0;
+
+      &:disabled {
+        color: ${r.palette.gray[300]};
+        cursor: not-allowed;
+      }
+
+      &:hover:not([disabled]) {
+        color: ${r.palette.primary[400]};
+        text-decoration: underline;
       }
     `
   })
 ), c = n(i)`
-  ${({ theme: a, justify: o, $variant: r }) => `
+  ${({ theme: r, justify: o, $variant: a }) => `
     align-items: center;
     border-radius: var(--btn-spacing);
     cursor: pointer;
     display: inline-flex;
-    font-family: ${a.typography.type.primary};
-    font-size: ${a.typography.text.md};
-    font-weight: ${a.typography.weight.regular};
+    font-family: ${r.typography.type.primary};
+    font-size: ${r.typography.text.md};
+    font-weight: ${r.typography.weight.regular};
     gap: var(--btn-spacing);
     justify-content: ${o ?? "center"};
-    line-height: ${a.spacing[1.25]};
+    line-height: ${r.spacing[1.25]};
     padding: var(--btn-padding-y) var(--btn-padding-x);
     position: relative;
     text-align: start;
@@ -105,11 +122,11 @@ const { getVariant: l } = t(
       text-decoration: underline;
     }
 
-    @media screen and (max-width: ${a.breakpoints.mobile}) {
-      ${r !== "link" ? `--btn-padding-y: ${a.spacing[1]}` : ""};
+    @media screen and (max-width: ${r.breakpoints.mobile}) {
+      ${a === "link" || a === "textLink" ? "" : `--btn-padding-y: ${r.spacing[1]}`};
     }
 
-    ${l(a, r ?? "primary")}
+    ${l(r, a ?? "primary")}
   `}
 `;
 export {

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

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 import { IBorderModifiable, IDisplayModifiable, IIconModifiable, IMarginModifiable, IPaddingModifiable } from '../@core';
 import { TPlace } from '../tooltip/types';
-type TVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link";
+type TVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link" | "textLink";
 /**
  * Button component props.
  * @interface IButtonProps

package/dist/components/rank-position/index.js

@@ -1,42 +1,25 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useTheme as n } from "styled-components";
-import { RankPositionIcon as c } from "./icon/index.js";
-import { Container as l } from "../container/index.js";
-import { Heading as a } from "../typography/heading/index.js";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useTheme as r } from "styled-components";
+import { RankPositionIcon as t } from "./icon/index.js";
+import { Container as g } from "../container/index.js";
+import { Heading as l } from "../typography/heading/index.js";
 import "../typography/span/index.js";
 import "../typography/text/index.js";
-const x = ({ rank: e }) => {
-  const o = n(), i = {
-    1: {
-      color: o.palette.error[700],
-      icon: "gauge-max"
-    },
-    2: {
-      color: o.palette.error[500],
-      icon: "gauge-high"
-    },
-    3: {
-      color: o.palette.warning[500],
-      icon: "gauge"
-    },
-    4: {
-      color: o.palette.success[500],
-      icon: "gauge-low"
-    },
-    5: {
-      color: o.palette.info[700],
-      icon: "gauge-min"
-    },
-    6: {
-      color: o.palette.gray[400],
-      icon: "gauge-min"
-    }
-  };
-  return /* @__PURE__ */ t(l, { alignItems: "center", display: "inline-flex", gap: 0.5, children: [
-    /* @__PURE__ */ r(c, { color: i[e].color, icon: i[e].icon }),
-    /* @__PURE__ */ r(a, { fontWeight: "bold", size: "xs", children: e })
+const h = {
+  1: { icon: "gauge-max", scale: "error", shade: "700" },
+  2: { icon: "gauge-high", scale: "error", shade: "500" },
+  3: { icon: "gauge-high", scale: "warning", shade: "600" },
+  4: { icon: "gauge", scale: "warning", shade: "500" },
+  5: { icon: "gauge-low", scale: "success", shade: "500" },
+  6: { icon: "gauge-low", scale: "info", shade: "500" },
+  7: { icon: "gauge-min", scale: "info", shade: "700" }
+}, R = ({ rank: e }) => {
+  const i = r(), { icon: n, scale: a, shade: s } = h[e];
+  return /* @__PURE__ */ c(g, { alignItems: "center", display: "inline-flex", gap: 0.5, children: [
+    /* @__PURE__ */ o(t, { color: i.palette[a][s], icon: n }),
+    /* @__PURE__ */ o(l, { fontWeight: "bold", size: "xs", children: e })
   ] });
 };
 export {
-  x as RankPosition
+  R as RankPosition
 };

package/dist/components/rank-position/index.stories.d.ts

@@ -1,6 +1,7 @@
-import { Meta } from '@storybook/react-vite';
+import { Meta, StoryFn } from '@storybook/react-vite';
 import { IRankPositionProps } from './types';
 declare const config: Meta;
 declare const Default: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, IRankPositionProps>;
-export { Default };
+declare const Scale: StoryFn;
+export { Default, Scale };
 export default config;

package/dist/components/rank-position/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/rank-position/types.d.ts

@@ -1,5 +1,6 @@
 import { IconName } from '@fortawesome/free-solid-svg-icons';
-type TRankPosition = 1 | 2 | 3 | 4 | 5 | 6;
+import { ColorPalette } from '../@core/types';
+type TRankPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 /**
  * Rank position icon.
  * @interface IRankPositionIcon
@@ -10,12 +11,24 @@ interface IRankPositionIcon {
     color: string;
     icon: IconName;
 }
+/**
+ * Icon and theme color of one rank, from the most urgent (1) to the least (7).
+ * @interface IRankPositionTone
+ * @property { IconName } icon - The gauge icon, its needle falling with the rank.
+ * @property { string } scale - The theme palette the color comes from.
+ * @property { ColorPalette } shade - The shade of that palette.
+ */
+interface IRankPositionTone {
+    icon: IconName;
+    scale: "error" | "info" | "success" | "warning";
+    shade: ColorPalette;
+}
 /**
  * Rank position component props.
  * @interface IRankPositionProps
- * @property { number } rank - The rank position (1-6).
+ * @property { number } rank - The rank position (1-7).
  */
 interface IRankPositionProps {
     rank: TRankPosition;
 }
-export type { IRankPositionProps, IRankPositionIcon, TRankPosition };
+export type { IRankPositionProps, IRankPositionIcon, IRankPositionTone, TRankPosition, };

package/package.json

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