TEC-4386: Radio Tag component (#26)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chardonnay",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "A mobile first frontend framework made with wine",
   "homepage": "https://vissimo-group.github.io/chardonnay/",
   "main": "./dist/index.js",

src/components/RadioTag/RadioTagContainer/index.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RadioTagContainer } from '.'
+import { RadioTagLabel } from '../RadioTagLabel'
+import { RadioTagInput } from '../RadioTagInput'
+
+const meta: Meta<typeof RadioTagContainer> = {
+  component: RadioTagContainer,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Container width. If no value was set, fit-content.',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof RadioTagContainer>
+
+export const Default: Story = {
+  render: (args) => (
+    <RadioTagContainer {...args}>
+      <RadioTagInput id="one" name="my-radio-tag" />
+      <RadioTagLabel htmlFor="one">Option One</RadioTagLabel>
+
+      <RadioTagInput id="two" name="my-radio-tag" />
+      <RadioTagLabel htmlFor="two">Option Two</RadioTagLabel>
+
+      <RadioTagInput id="three" name="my-radio-tag" />
+      <RadioTagLabel htmlFor="three">Option Three</RadioTagLabel>
+
+      <RadioTagInput id="four" name="my-radio-tag" />
+      <RadioTagLabel htmlFor="four">Option Four</RadioTagLabel>
+
+      <RadioTagInput id="five" name="my-radio-tag" />
+      <RadioTagLabel htmlFor="five">Option Five</RadioTagLabel>
+    </RadioTagContainer>
+  ),
+}
+
+export const WithFixedWidth: Story = {
+  args: { width: '300px' },
+  render: (args) => (
+    <RadioTagContainer {...args}>
+      <RadioTagInput id="one" name="my-radio-tag-ii" />
+      <RadioTagLabel htmlFor="one">Option One</RadioTagLabel>
+
+      <RadioTagInput id="two" name="my-radio-tag-ii" />
+      <RadioTagLabel htmlFor="two">Option Two</RadioTagLabel>
+
+      <RadioTagInput id="three" name="my-radio-tag-ii" />
+      <RadioTagLabel htmlFor="three">Option Three</RadioTagLabel>
+
+      <RadioTagInput id="four" name="my-radio-tag-ii" />
+      <RadioTagLabel htmlFor="four">Option Four</RadioTagLabel>
+
+      <RadioTagInput id="five" name="my-radio-tag-ii" />
+      <RadioTagLabel htmlFor="five">Option Five</RadioTagLabel>
+    </RadioTagContainer>
+  ),
+}

src/components/RadioTag/RadioTagContainer/index.tsx

@@ -0,0 +1,10 @@
+import { RadioTagContainerStyled } from './style'
+import { RadioTagContainerProps } from './type'
+
+const RadioTagContainer = ({ children, width }: RadioTagContainerProps) => {
+  return (
+    <RadioTagContainerStyled width={width}>{children}</RadioTagContainerStyled>
+  )
+}
+
+export { RadioTagContainer }

src/components/RadioTag/RadioTagContainer/style.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+const RadioTagContainerStyled = styled.div<{ width?: string }>`
+  width: ${(props) => (props.width ? props.width : 'fit-content')};
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+`
+
+export { RadioTagContainerStyled }

src/components/RadioTag/RadioTagContainer/type.ts

@@ -0,0 +1,6 @@
+type RadioTagContainerProps = {
+  children?: React.ReactNode
+  width?: string
+}
+
+export type { RadioTagContainerProps }

src/components/RadioTag/RadioTagInput/index.tsx

@@ -0,0 +1,3 @@
+import { RadioTagInputStyled } from './style'
+
+export { RadioTagInputStyled as RadioTagInput }

src/components/RadioTag/RadioTagInput/style.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+const RadioTagInputStyled = styled.input.attrs({ type: 'radio' })`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+`
+
+export { RadioTagInputStyled }

src/components/RadioTag/RadioTagLabel/index.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RadioTagLabel } from '.'
+import { RadioTagInput } from '../RadioTagInput'
+
+const meta: Meta<typeof RadioTagLabel> = {
+  component: RadioTagLabel,
+  tags: ['autodocs'],
+  argTypes: {
+    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: {
+      controls: { exclude: ['ref', 'theme', 'as', 'forwardedAs'] },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', gap: '1rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof RadioTagLabel>
+
+export const Checked: Story = {
+  args: { width: '9rem', fontSize: '1rem' },
+  render: (args) => (
+    <>
+      <RadioTagInput checked id="one" name="my-radio-tag-v" />
+      <RadioTagLabel {...args} htmlFor="one">
+        Option One
+      </RadioTagLabel>
+
+      <span style={{ textWrap: 'balance', textAlign: 'center' }}>
+        The <strong>RadioTagLabel</strong> component must always be preceded by
+        a <strong>RadioTagInput</strong> for styles to be applied correctly.
+      </span>
+    </>
+  ),
+}
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <RadioTagInput id="one" name="my-radio-tag-iii" />
+      <RadioTagLabel htmlFor="one">Label One</RadioTagLabel>
+
+      <RadioTagInput id="two" name="my-radio-tag-iii" />
+      <RadioTagLabel htmlFor="two">Label Two</RadioTagLabel>
+
+      <RadioTagInput id="three" name="my-radio-tag-iii" />
+      <RadioTagLabel htmlFor="three">Label Three</RadioTagLabel>
+
+      <RadioTagInput id="four" name="my-radio-tag-iii" />
+      <RadioTagLabel htmlFor="four">Label Four</RadioTagLabel>
+
+      <RadioTagInput id="five" name="my-radio-tag-iii" />
+      <RadioTagLabel htmlFor="five">Label Three</RadioTagLabel>
+    </>
+  ),
+}
+
+export const WithFixedWidth: Story = {
+  args: { width: '10rem' },
+  render: (args) => (
+    <>
+      <RadioTagInput id="one" name="my-radio-tag-iv" />
+      <RadioTagLabel {...args} htmlFor="one">
+        Option One
+      </RadioTagLabel>
+
+      <RadioTagInput id="two" name="my-radio-tag-iv" />
+      <RadioTagLabel {...args} htmlFor="two">
+        Option Two
+      </RadioTagLabel>
+
+      <RadioTagInput id="three" name="my-radio-tag-iv" />
+      <RadioTagLabel {...args} htmlFor="three">
+        Option Three
+      </RadioTagLabel>
+
+      <RadioTagInput id="four" name="my-radio-tag-iv" />
+      <RadioTagLabel {...args} htmlFor="four">
+        Option Four
+      </RadioTagLabel>
+
+      <RadioTagInput id="five" name="my-radio-tag-iv" />
+      <RadioTagLabel {...args} htmlFor="five">
+        Option Five
+      </RadioTagLabel>
+    </>
+  ),
+}
+
+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>
+    </>
+  ),
+}

src/components/RadioTag/RadioTagLabel/index.tsx

@@ -0,0 +1,3 @@
+import { RadioTagLabelStyled } from './style'
+
+export { RadioTagLabelStyled as RadioTagLabel }

src/components/RadioTag/RadioTagLabel/style.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+
+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;
+  justify-content: center;
+  min-width: fit-content;
+  gap: 0.5em;
+  border-radius: 2rem;
+  padding: 0.5em 1em;
+  background-color: ${(props) => props.theme.colors.neutral.neutral200};
+  color: ${(props) => props.theme.colors.neutral.neutral400};
+  border: 2px solid ${(props) => props.theme.colors.neutral.neutral200};
+  scroll-snap-align: center;
+
+  input[type='radio']:checked + & {
+    background-color: ${(props) => props.theme.colors.background.background200};
+    border: 2px solid ${(props) => props.theme.colors.action.action100};
+    color: ${(props) => props.theme.colors.action.action100};
+  }
+
+  input[type='radio']:disabled + & {
+    cursor: not-allowed;
+  }
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+`
+export { RadioTagLabelStyled }