Tag content update (#3605)

Co-authored-by: shey-v <[email protected]>

site/docs/components/tag/examples.mdx

@@ -9,30 +9,23 @@ data:
 ---
 
 <LivePreviewControls>
-<LivePreview componentName="tag" exampleName="Primary">
+<LivePreview componentName="tag" exampleName="Variants">
 
-## Primary
+## Variants
 
-Primary tags feature subtle background colors by default, making them ideal for presenting information or content without being overly attention-grabbing.
-
-To add an optional border, simply pass the `bordered` prop to the component.
-
-### Best practices
-
-- Ensure tag colors are consistent with their associated categories.
-- Be mindful that using an excessive number of colors can impose a heavy cognitive load on some users.
+Tag has two variants: primary and secondary. The primary variant is set by default. Set to secondary with variant=”secondary”.
 
 </LivePreview>
-<LivePreview componentName="tag" exampleName="Secondary">
+<LivePreview componentName="tag" exampleName="Bordered">
 
-## Secondary
+## Bordered
 
-Secondary tags are generally used to emphasize or highlight specific content. These tags use a bold background color to draw more attention and make the highlighted content stand out.
+To add a border, simply pass the `bordered` prop to the component.
 
 </LivePreview>
-<LivePreview componentName="tag" exampleName="Icon">
+<LivePreview componentName="tag" exampleName="WithIcon">
 
-## With Icon
+## With icon
 
 Display icons inside a tag by passing an icon as children to visually reinforce its content for quick recognition.
 
@@ -43,7 +36,11 @@ Display icons inside a tag by passing an icon as children to visually reinforce
 
 To differentiate between different categories, set a category by passing a value from 1 to 20 to the `category` prop.
 
-Note that if a category outside the range is passed, the styles will default to category 1
+Note that if a category outside the range is passed, the styles will default to category 1.
+
+### Best practices
+
+- Be consistent when assigning categories. For example, avoid assigning two different categories to the same piece of metadata.
 
 </LivePreview> 
 </LivePreviewControls>

site/src/examples/tag/Bordered.tsx

@@ -0,0 +1,12 @@
+import { ReactElement } from "react";
+import { Tag } from "@salt-ds/lab";
+import { FlowLayout } from "@salt-ds/core";
+
+export const Bordered = (): ReactElement => (
+  <FlowLayout>
+    <Tag bordered>Primary</Tag>
+    <Tag variant="secondary" bordered>
+      Secondary
+    </Tag>
+  </FlowLayout>
+);

site/src/examples/tag/Categories.tsx

@@ -3,26 +3,84 @@ import { Tag } from "@salt-ds/lab";
 import { GridLayout } from "@salt-ds/core";
 
 export const Categories = (): ReactElement => (
-  <GridLayout rows={{ sm: 7, lg: 4 }} columns={{ xs: 2, sm: 3, lg: 5 }}>
+  <GridLayout columns={{ xs: 2, sm: 4, lg: 8 }} gap={2}>
     <Tag>Cat-1</Tag>
+    <Tag variant="secondary">Cat-1</Tag>
     <Tag category={2}>Cat-2</Tag>
+    <Tag variant="secondary" category={2}>
+      Cat-2
+    </Tag>
     <Tag category={3}>Cat-3</Tag>
+    <Tag variant="secondary" category={3}>
+      Cat-3
+    </Tag>
     <Tag category={4}>Cat-4</Tag>
+    <Tag variant="secondary" category={4}>
+      Cat-4
+    </Tag>
     <Tag category={5}>Cat-5</Tag>
+    <Tag variant="secondary" category={5}>
+      Cat-5
+    </Tag>
     <Tag category={6}>Cat-6</Tag>
+    <Tag variant="secondary" category={6}>
+      Cat-6
+    </Tag>
     <Tag category={7}>Cat-7</Tag>
+    <Tag variant="secondary" category={7}>
+      Cat-7
+    </Tag>
     <Tag category={8}>Cat-8</Tag>
+    <Tag variant="secondary" category={8}>
+      Cat-8
+    </Tag>
     <Tag category={9}>Cat-9</Tag>
+    <Tag variant="secondary" category={9}>
+      Cat-9
+    </Tag>
     <Tag category={10}>Cat-10</Tag>
+    <Tag variant="secondary" category={10}>
+      Cat-10
+    </Tag>
     <Tag category={11}>Cat-11</Tag>
+    <Tag variant="secondary" category={11}>
+      Cat-11
+    </Tag>
     <Tag category={12}>Cat-12</Tag>
+    <Tag variant="secondary" category={12}>
+      Cat-12
+    </Tag>
     <Tag category={13}>Cat-13</Tag>
+    <Tag variant="secondary" category={13}>
+      Cat-13
+    </Tag>
     <Tag category={14}>Cat-14</Tag>
+    <Tag variant="secondary" category={14}>
+      Cat-14
+    </Tag>
     <Tag category={15}>Cat-15</Tag>
+    <Tag variant="secondary" category={15}>
+      Cat-15
+    </Tag>
     <Tag category={16}>Cat-16</Tag>
+    <Tag variant="secondary" category={16}>
+      Cat-16
+    </Tag>
     <Tag category={17}>Cat-17</Tag>
+    <Tag variant="secondary" category={17}>
+      Cat-17
+    </Tag>
     <Tag category={18}>Cat-18</Tag>
+    <Tag variant="secondary" category={18}>
+      Cat-18
+    </Tag>
     <Tag category={19}>Cat-19</Tag>
+    <Tag variant="secondary" category={19}>
+      Cat-19
+    </Tag>
     <Tag category={20}>Cat-20</Tag>
+    <Tag variant="secondary" category={20}>
+      Cat-20
+    </Tag>
   </GridLayout>
 );

site/src/examples/tag/Primary.tsx → site/src/examples/tag/Variants.tsx

@@ -2,9 +2,9 @@ import { ReactElement } from "react";
 import { Tag } from "@salt-ds/lab";
 import { FlowLayout } from "@salt-ds/core";
 
-export const Primary = (): ReactElement => (
+export const Variants = (): ReactElement => (
   <FlowLayout>
     <Tag>Primary</Tag>
-    <Tag bordered>Bordered</Tag>
+    <Tag variant="secondary">Secondary</Tag>
   </FlowLayout>
 );

site/src/examples/tag/WithIcon.tsx

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+import { FlowLayout } from "@salt-ds/core";
+import { Tag } from "@salt-ds/lab";
+import { LineChartIcon, ClockIcon } from "@salt-ds/icons";
+
+export const WithIcon = (): ReactElement => (
+  <FlowLayout>
+    <Tag>
+      <LineChartIcon />
+      Data
+    </Tag>
+    <Tag variant="secondary">
+      <ClockIcon /> Coming soon
+    </Tag>
+  </FlowLayout>
+);

site/src/examples/tag/index.ts

@@ -1,4 +1,4 @@
-export * from "./Secondary";
+export * from "./Bordered";
 export * from "./Categories";
-export * from "./Primary";
-export * from "./Icon";
+export * from "./Variants";
+export * from "./WithIcon";