@fluidattacks/design 8.6.0 → 8.7.0

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.6.0"
+  "version": "8.7.0"
 }