Docs(web-react): Add Tag demo #DS-911

- Tag demo in web-react is now same as demo in web and web-twig

packages/web-react/docs/DocsSections.tsx

@@ -5,7 +5,7 @@ import DocsStack from './DocsStack';
 interface DocsSectionProps {
   children: ReactNode;
   hasStack?: boolean;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
   tag?: string;
   title: string;
 }

packages/web-react/docs/DocsStack.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 interface DocsStackProps {
   children: ReactNode;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
 const DocsStack = ({ children, stackAlignment }: DocsStackProps) => {

packages/web-react/src/components/Tag/demo/TagDefault.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import DocsSection from '../../../../docs/DocsSections';
+import { EmotionColors, SizesExtended } from '../../../constants';
+import { Grid } from '../../Grid';
+import { Tag } from '../Tag';
+
+const TagDefault = () => {
+  const sizes = Object.values(SizesExtended);
+  const emotionColors = Object.values(EmotionColors);
+  const colors = ['neutral', ...emotionColors];
+
+  return (
+    <Grid cols={1} tablet={3} desktop={5}>
+      {sizes.map((size) => (
+        <DocsSection key={size} title={`Size ${size}`}>
+          {colors.map((color) => (
+            <>
+              <Tag color={color} size={size} isSubtle>
+                Tag {color}
+              </Tag>
+              <Tag color={color} size={size}>
+                Tag {color}
+              </Tag>
+            </>
+          ))}
+        </DocsSection>
+      ))}
+    </Grid>
+  );
+};
+
+export default TagDefault;

packages/web-react/src/components/Tag/demo/index.tsx

@@ -2,27 +2,13 @@
 /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import Tag from './Tag';
-import TagColors from './TagColors';
-import TagSizes from './TagSizes';
+import TagDefault from './TagDefault';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <IconsProvider value={icons}>
-      <DocsSection title="Default">
-        <Tag {...Tag.args} />
-      </DocsSection>
-      <DocsSection title="Colors">
-        <TagColors />
-      </DocsSection>
-      <DocsSection title="Sizes">
-        <TagSizes />
-      </DocsSection>
-    </IconsProvider>
+    <DocsSection title="Default" stackAlignment="stretch">
+      <TagDefault />
+    </DocsSection>
   </React.StrictMode>,
 );