1319-feui-create-radiogroup-component (#1321)

* Create RadioGroup Component * Fix Lint Error RadioGroup Component * Fix Lint Error2 RadioGroup Component * Fix Lint Error3 RadioGroup Component * Fix lint error * Fix RadioGroup * Fix RadioGroup 1
IT-Academy-BCN · Jun 5, 2024 · caafb8b · caafb8b
1 parent d95ad5d
commit caafb8b
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 1 deletion.
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.34.0] - 2024-06-03
+
+### Added
+
+- Create RadioGroup Molecule
 ## [0.33.1] - 2024-05-29
 
 ### Changed

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@itacademy/ui",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "description": "React FE components for ITAcademy projects.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.es.js",

diff --git a/packages/ui/src/__tests__/molecules/RadioGroup.test.tsx b/packages/ui/src/__tests__/molecules/RadioGroup.test.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { RadioGroup } from '../../components/molecules'
+
+const mockRadioGroupProps = {
+  id: 'testid',
+  label: 'testid',
+  options: [
+    { id: 'test1', name: 'Test1' },
+    { id: 'test2', name: 'Test2' },
+    { id: 'test3', name: 'Test3' },
+  ],
+  direction: 'row',
+  inputName: 'test_name',
+  errorMessage: 'error',
+}
+
+describe('RadioGroupText', () => {
+  it('renders correctly', () => {
+    render(
+      <RadioGroup {...mockRadioGroupProps} direction='row' />
+    )
+    expect(screen.getByText('testid')).toBeInTheDocument()
+  })
+
+  it('displays all options', () => {
+    render(
+      <RadioGroup {...mockRadioGroupProps} direction='row' />
+    );
+    mockRadioGroupProps.options.forEach(option => {
+      expect(screen.getByLabelText(option.name)).toBeInTheDocument();
+    });
+  });
+
+  it('renders correctly with error message', () => {
+    render(
+      <RadioGroup {...mockRadioGroupProps} direction='row' error />
+    )
+    expect(screen.getByText('error')).toBeInTheDocument()    
+  })
+})
diff --git a/packages/ui/src/components/molecules/RadioGroup.tsx b/packages/ui/src/components/molecules/RadioGroup.tsx
@@ -0,0 +1,70 @@
+
+import { forwardRef, Ref } from "react";
+import styled from "styled-components";
+import { colors, dimensions, FlexBox } from "../../styles";
+import { Label, Radio, TRadio, ValidationMessage } from "../atoms";
+
+
+export type TRadioGroup = {
+  id: string
+  label: string
+  error?: boolean | string
+  errorMessage?: string
+  hiddenLabelGroup?: boolean
+} & TRadio
+
+const RadioGroupContainer = styled.div`
+  margin-top: ${dimensions.spacing.xs};
+  width: 100%;
+`;
+
+const RadioStyled = styled(Radio)`
+  padding: ${dimensions.spacing.xs};
+`;
+
+const ValidationMessageStyled = styled(ValidationMessage)`
+  margin-bottom: ${dimensions.spacing.none}!important;
+`
+
+const RadioGroupStyled = styled(FlexBox).withConfig({
+  shouldForwardProp: (prop) => !['error'].includes(prop),
+})<{ error?: boolean }>`
+  padding: ${dimensions.spacing.xxxs};
+  margin-top: ${dimensions.spacing.xs};
+  border-radius: ${dimensions.borderRadius.base};
+
+  ${({ error }) => error && `
+    border: 1px solid ${colors.error};
+  `}
+`
+
+export const RadioGroup = forwardRef(
+  (
+    {
+      id,
+      options,
+      inputName,
+      direction,
+      label,
+      hiddenLabelGroup,
+      error,
+      errorMessage,
+      ...rest
+    }: TRadioGroup,
+    ref: Ref<HTMLInputElement>
+  ) => (
+    <RadioGroupContainer>
+      <RadioGroupStyled direction='column' error={!!error} align='start' >
+        <Label text={label} htmlFor={id} hiddenLabel={hiddenLabelGroup} />
+        <RadioStyled {...rest} direction={direction} inputName={inputName} options={options} ref={ref} />
+      </RadioGroupStyled>
+      {
+        error &&
+        <ValidationMessageStyled
+          text={errorMessage}
+          color='error'
+        />
+      }
+    </RadioGroupContainer>
+  )
+)
diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts
@@ -27,6 +27,7 @@ export {
   NotificationsProvider,
   useNotifications,
 } from './Notifications'
+export { RadioGroup, type TRadioGroup } from './RadioGroup'
 export { ResourceTitleLink, type TResourceTitleLink } from './ResourceTitleLink'
 export { Search, useDebounce, type TSearch } from './Search'
 export { SelectGroup, type TSelectGroup } from './SelectGroup'

diff --git a/packages/ui/src/stories/molecules/RadioGroup.stories.ts b/packages/ui/src/stories/molecules/RadioGroup.stories.ts
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RadioGroup } from '../../components/molecules'
+
+ const meta = {
+  title: 'Molecules/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    errorMessage: { control: 'text' },
+    hiddenLabelGroup: { control: 'boolean', defaultValue: false },
+    error: { control: 'boolean', defaultValue: false },
+    options: [
+      {
+        id: { control: 'text' },
+        name: { control: 'text' },
+      },
+    ],
+    inputName: { control: 'text' },
+    onChange: { action: 'clicked' },
+    hiddenLabel: { control: 'boolean', defaultValue: false },
+    defaultChecked: { control: 'text' },
+    direction: {
+      control: 'select',
+      options: ['row', 'column'],
+      defaultValue: 'row',
+    },
+  },
+} satisfies Meta<typeof RadioGroup>
+
+export default meta
+type RadioGroupStory = StoryObj<typeof RadioGroup>
+
+export const Default: RadioGroupStory = {
+  args: {
+    id: 'resourceType',
+    label: 'Resource Type',
+    options: [
+      { id: 'option1', name: 'Option1' },
+      { id: 'option2', name: 'Option2' },
+      { id: 'option3', name: 'Option3' },
+    ],
+    direction: 'row',
+    inputName: 'resourceType',
+    error: false,
+  },
+}
+
+export const WithValidationMessageRow: RadioGroupStory = {
+  args: {
+    id: 'resourceType',
+    inputName: 'RadioGroup_name',
+    label: 'RadioGroup with validation message',
+    options: [
+      { id: 'option1', name: 'Option1' },
+      { id: 'option2', name: 'Option2' },
+      { id: 'option3', name: 'Option3' },
+    ],
+    direction: 'row',
+    error: true,
+    errorMessage: 'Error message.',
+  },
+}
+
+export const WithValidationMessageColumn: RadioGroupStory = {
+  args: {
+    id: 'resourceType',
+    inputName: 'RadioGroup_name',
+    label: 'RadioGroup with validation message',
+    options: [
+      { id: 'option1', name: 'Option1' },
+      { id: 'option2', name: 'Option2' },
+      { id: 'option3', name: 'Option3' },
+    ],
+    direction: 'column',
+    error: true,
+    errorMessage: 'Error message.',
+  },
+}