@agregio-solutions/design-system 1.96.0 → 1.97.0

package/dist/packages/components/Tag/Tag.d.ts

@@ -4,7 +4,12 @@ export type Props = {
     /**
      * Specifies the tag color. The default is "default".
      */
-    nature?: "default" | "informative" | "negative" | "positive" | "warning";
+    nature?: "default" | "informative" | "negative" | "positive" | "warning" | "azure" | "purple" | "pink" | "orange";
+    /**
+     * Specifies the tag color intensity: "default" (light background), "enhanced" (saturated background) or "reversed" (dark background with light text, to be used on dense backgrounds). The default is "default".
+     * @default default
+     */
+    mode?: "default" | "enhanced" | "reversed";
     /**
      * Icon displayed on the extreme left.
      */

package/dist/packages/components/Tag/doc.md

@@ -13,11 +13,29 @@ Here are the Storybook Stories.
 Base stories:
 
 ```tsx
+import { Fragment } from "react";
 import { Meta, StoryObj } from "@storybook/react-vite";
 import Tag from "./Tag";
-import { within } from "storybook/test";
+import { expect, within } from "storybook/test";
 import { ICON_NAMES_ARRAY } from "@components/Icon/Icon";
 
+const NATURES = [
+  "default",
+  "informative",
+  "negative",
+  "warning",
+  "positive",
+  "azure",
+  "purple",
+  "pink",
+  "orange",
+] as const;
+
+const MODES = ["default", "enhanced", "reversed"] as const;
+
+const getTag = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-design-system-component="Tag"]');
+
 const meta: Meta<typeof Tag> = {
   component: Tag,
   tags: ["autodocs"],
@@ -41,6 +59,7 @@ export const Default: StoryObj<typeof Tag> = {
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
     await canvas.findByText(args.children as string);
+    await expect(getTag(canvasElement)).toHaveAttribute("data-mode", "default");
   },
 };
 
@@ -49,33 +68,82 @@ export const WithIcon: StoryObj<typeof Tag> = {
     ...Default.args,
     iconLeft: "help_outline",
   },
+  play: async ({ canvasElement }) => {
+    await expect(getTag(canvasElement)).toHaveAttribute(
+      "data-have-icon",
+      "true",
+    );
+  },
 };
 
-export const Informative: StoryObj<typeof Tag> = {
+export const Enhanced: StoryObj<typeof Tag> = {
   args: {
     ...WithIcon.args,
-    nature: "informative",
+    mode: "enhanced",
+  },
+  play: async ({ canvasElement }) => {
+    await expect(getTag(canvasElement)).toHaveAttribute(
+      "data-mode",
+      "enhanced",
+    );
   },
 };
 
-export const Negative: StoryObj<typeof Tag> = {
+export const Reversed: StoryObj<typeof Tag> = {
   args: {
     ...WithIcon.args,
-    nature: "negative",
+    mode: "reversed",
+  },
+  play: async ({ canvasElement }) => {
+    await expect(getTag(canvasElement)).toHaveAttribute(
+      "data-mode",
+      "reversed",
+    );
   },
 };
 
-export const Positive: StoryObj<typeof Tag> = {
-  args: {
-    ...WithIcon.args,
-    nature: "positive",
+export const AllVariants: StoryObj<typeof Tag> = {
+  parameters: {
+    layout: "padded",
   },
-};
+  render: () => (
+    <div
+      style={{
+        display: "inline-grid",
+        gridTemplateColumns: "repeat(4, max-content)",
+        columnGap: "var(--spacing-md)",
+        rowGap: "var(--spacing-sm)",
+        alignItems: "center",
+        justifyItems: "start",
+      }}
+    >
+      <span />
+      {MODES.map((mode) => (
+        <strong key={mode}>{mode}</strong>
+      ))}
 
-export const Warning: StoryObj<typeof Tag> = {
-  args: {
-    ...WithIcon.args,
-    nature: "warning",
+      {NATURES.map((nature) => (
+        <Fragment key={nature}>
+          <strong>{nature}</strong>
+          {MODES.map((mode) => (
+            <Tag key={mode} nature={nature} mode={mode} iconLeft="help_outline">
+              [Insert tag]
+            </Tag>
+          ))}
+        </Fragment>
+      ))}
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    for (const nature of NATURES) {
+      for (const mode of MODES) {
+        await expect(
+          canvasElement.querySelector(
+            `[data-nature="${nature}"][data-mode="${mode}"]`,
+          ),
+        ).toBeInTheDocument();
+      }
+    }
   },
 };
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.96.0",
+  "version": "1.97.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",