From 8d328f6dcbb1ff5e97d98e328d5e8804309bc621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Andre=CC=81s=20Granero?=
 <joseandres.granero@devo.com>
Date: Tue, 16 May 2023 12:49:13 +0200
Subject: [PATCH] feat(docs): QUV-1018 Create in Storybook the case for
 TagGroup as legend

---
 packages/core/src/components/Tag/StyledTag.ts |  2 +-
 .../src/components/TagGroup/StyledTagGroup.ts |  2 +-
 .../TagGroup/TagGroup.cases.stories.tsx       | 25 +++++++++++++++++++
 .../core/src/components/TagGroup/TagGroup.mdx |  4 +++
 .../core/src/components/TagGroup/TagGroup.tsx |  2 +-
 5 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 packages/core/src/components/TagGroup/TagGroup.cases.stories.tsx

diff --git a/packages/core/src/components/Tag/StyledTag.ts b/packages/core/src/components/Tag/StyledTag.ts
index 42129c6bf..21cb137eb 100644
--- 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
index 735d22c48..7b0a36cd6 100644
--- 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
new file mode 100644
index 000000000..9677d7c8f
--- /dev/null
+++ 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
index 05b6db290..7c18d3a80 100644
--- 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
index 5a60ca2ba..081baa213 100644
--- 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>[];