From caafb8b25dcf52f55cfb989c9cfdf2edf85c9e5a Mon Sep 17 00:00:00 2001 From: Cristian Moller <52261018+Cristian-Moller@users.noreply.github.com> Date: Wed, 5 Jun 2024 08:53:07 +0200 Subject: [PATCH] 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 --- packages/ui/CHANGELOG.md | 5 ++ packages/ui/package.json | 2 +- .../__tests__/molecules/RadioGroup.test.tsx | 40 +++++++++ .../src/components/molecules/RadioGroup.tsx | 70 ++++++++++++++++ packages/ui/src/components/molecules/index.ts | 1 + .../stories/molecules/RadioGroup.stories.ts | 81 +++++++++++++++++++ 6 files changed, 198 insertions(+), 1 deletion(-) create mode 100644 packages/ui/src/__tests__/molecules/RadioGroup.test.tsx create mode 100644 packages/ui/src/components/molecules/RadioGroup.tsx create mode 100644 packages/ui/src/stories/molecules/RadioGroup.stories.ts diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 3fb558334..dc1812bec 100644 --- 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 index 40c6b4429..8d3546712 100644 --- 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 new file mode 100644 index 000000000..566436eff --- /dev/null +++ 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( + + ) + expect(screen.getByText('testid')).toBeInTheDocument() + }) + + it('displays all options', () => { + render( + + ); + mockRadioGroupProps.options.forEach(option => { + expect(screen.getByLabelText(option.name)).toBeInTheDocument(); + }); + }); + + it('renders correctly with error message', () => { + render( + + ) + expect(screen.getByText('error')).toBeInTheDocument() + }) +}) \ No newline at end of file diff --git a/packages/ui/src/components/molecules/RadioGroup.tsx b/packages/ui/src/components/molecules/RadioGroup.tsx new file mode 100644 index 000000000..49130396a --- /dev/null +++ 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 + ) => ( + + + + { + error && + + } + + ) +) \ No newline at end of file diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index 83242183b..3bc0418a4 100644 --- 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 new file mode 100644 index 000000000..bd080f792 --- /dev/null +++ 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 + +export default meta +type RadioGroupStory = StoryObj + +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.', + }, +}