TEC-4386: Update RadioTagContainer and RadioTagLabel styles and stories.

vissimo-group · Apr 1, 2024 · 909ed42 · 909ed42
1 parent 095afd5
commit 909ed42
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/src/components/RadioTag/RadioTagContainer/index.stories.tsx b/src/components/RadioTag/RadioTagContainer/index.stories.tsx
@@ -7,7 +7,10 @@ const meta: Meta<typeof RadioTagContainer> = {
   component: RadioTagContainer,
   tags: ['autodocs'],
   argTypes: {
-    width: { control: 'text' },
+    width: {
+      control: 'text',
+      description: 'Container width. If no value was set, fit-content.',
+    },
   },
 }
 

diff --git a/src/components/RadioTag/RadioTagContainer/style.tsx b/src/components/RadioTag/RadioTagContainer/style.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 const RadioTagContainerStyled = styled.div<{ width?: string }>`
-  ${(props) => props.width && `width: ${props.width};`}
+  width: ${(props) => (props.width ? props.width : 'fit-content')};
   display: flex;
   gap: 0.5rem;
   overflow-x: auto;

diff --git a/src/components/RadioTag/RadioTagLabel/index.stories.tsx b/src/components/RadioTag/RadioTagLabel/index.stories.tsx
@@ -6,7 +6,14 @@ const meta: Meta<typeof RadioTagLabel> = {
   component: RadioTagLabel,
   tags: ['autodocs'],
   argTypes: {
-    width: { control: 'text' },
+    width: {
+      control: 'text',
+      description: 'Label width. If no value was set, fit-content.',
+    },
+    fontSize: {
+      control: 'text',
+      description: 'Font size of the label. Default value "1rem"',
+    },
   },
   parameters: {
     docs: {
@@ -26,7 +33,7 @@ export default meta
 type Story = StoryObj<typeof RadioTagLabel>
 
 export const Checked: Story = {
-  args: { width: '9rem' },
+  args: { width: '9rem', fontSize: '1rem' },
   render: (args) => (
     <>
       <RadioTagInput checked id="one" name="my-radio-tag-v" />
@@ -94,3 +101,35 @@ export const WithFixedWidth: Story = {
     </>
   ),
 }
+
+export const WithCustomFontSize: Story = {
+  args: { fontSize: '14px' },
+  render: (args) => (
+    <>
+      <RadioTagInput id="one" name="my-radio-tag-font" />
+      <RadioTagLabel {...args} htmlFor="one">
+        Label One
+      </RadioTagLabel>
+
+      <RadioTagInput id="two" name="my-radio-tag-font" />
+      <RadioTagLabel {...args} htmlFor="two">
+        Label Two
+      </RadioTagLabel>
+
+      <RadioTagInput id="three" name="my-radio-tag-font" />
+      <RadioTagLabel {...args} htmlFor="three">
+        Label Three
+      </RadioTagLabel>
+
+      <RadioTagInput id="four" name="my-radio-tag-font" />
+      <RadioTagLabel {...args} htmlFor="four">
+        Label Four
+      </RadioTagLabel>
+
+      <RadioTagInput id="five" name="my-radio-tag-font" />
+      <RadioTagLabel {...args} htmlFor="five">
+        Label Three
+      </RadioTagLabel>
+    </>
+  ),
+}
diff --git a/src/components/RadioTag/RadioTagLabel/style.tsx b/src/components/RadioTag/RadioTagLabel/style.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
 
-const RadioTagLabelStyled = styled.label<{ width?: string }>`
+const RadioTagLabelStyled = styled.label<{ width?: string; fontSize?: string }>`
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '1rem')};
   width: ${(props) => (props.width ? props.width : 'fit-content')};
   display: flex;
   align-items: center;