feat(docs): QUV-1018 Create in Storybook the case for TagGroup as legend

DevoInc · May 16, 2023 · 8d328f6 · 8d328f6
1 parent 233a021
commit 8d328f6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git a/packages/core/src/components/Tag/StyledTag.ts b/packages/core/src/components/Tag/StyledTag.ts
@@ -52,7 +52,7 @@ export const StyledTag = styled.div<StyledTagProps>`
       border-radius: ${cmpTokens.shape.borderRadius};
       max-width: 100%;
       height: ${cmpTokens.size.height[size]};
-      padding: 0 ${cmpTokens.space.padding.hor[size]};
+      padding: ${quiet ? '0' : `0 ${cmpTokens.space.padding.hor[size]}`};
       background-color: ${bgColor};
       ${typoMixin({ bold: bold, theme, size })};
       color: ${textColor};

diff --git a/packages/core/src/components/TagGroup/StyledTagGroup.ts b/packages/core/src/components/TagGroup/StyledTagGroup.ts
@@ -5,7 +5,7 @@ import { StyledTagProps } from '../Tag/StyledTag';
 
 export interface StyledTagGroupProps {
   /** Position of the label text relative to the tags */
-  labelPosition: LabelPosition;
+  labelPosition?: LabelPosition;
 }
 
 export const StyledTagGroup = styled.div<StyledTagGroupProps>`

diff --git a/packages/core/src/components/TagGroup/TagGroup.cases.stories.tsx b/packages/core/src/components/TagGroup/TagGroup.cases.stories.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Tag, TagGroup } from '..';
+
+const meta: Meta<typeof TagGroup> = {
+  title: 'Components/Core/Feedback/TagGroup/Cases',
+  component: TagGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof TagGroup>;
+
+export const AsLegend: Story = {
+  name: 'As legend',
+  render: () =>
+    (() => (
+      <TagGroup>
+        <Tag text="New alerts" colorScheme="success" quiet />
+        <Tag text="Warning alerts" colorScheme="warning" quiet />
+        <Tag text="Error alerts" colorScheme="error" quiet />
+        <Tag text="Not defined alerts" colorScheme="data-blue" quiet />
+      </TagGroup>
+    ))(),
+};
diff --git a/packages/core/src/components/TagGroup/TagGroup.mdx b/packages/core/src/components/TagGroup/TagGroup.mdx
@@ -28,6 +28,10 @@ import { TagGroup } from '@devoinc/genesys-ui';
 
 <Canvas of={Stories.Base} />
 
+## As legend
+
+<Canvas of={Stories.AsLegend} />
+
 ## Props
 
 <ArgTypes of={Stories} />
diff --git a/packages/core/src/components/TagGroup/TagGroup.tsx b/packages/core/src/components/TagGroup/TagGroup.tsx
@@ -25,7 +25,7 @@ export interface TagGroupProps
     GlobalAttrProps,
     GlobalAriaProps,
     StyledTagGroupProps,
-    StyledTagGroupLabelProps {
+    Omit<StyledTagGroupLabelProps, 'labelPosition'> {
   /** Polymorphic prop to create a different tag or styled component
    * https://styled-components.com/docs/api#as-polymorphic-prop */
   children: React.ReactElement<TagProps>[];