diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index a346cde84f..054fa96170 100644 --- a/packages/web-react/scripts/entryPoints.js +++ b/packages/web-react/scripts/entryPoints.js @@ -33,6 +33,7 @@ const entryPoints = [ { dirs: ['components', 'Heading'] }, { dirs: ['components', 'Icon'] }, { dirs: ['components', 'Item'] }, + { dirs: ['components', 'Label'] }, { dirs: ['components', 'Link'] }, { dirs: ['components', 'Modal'] }, { dirs: ['components', 'NoSsr'] }, diff --git a/packages/web-react/src/components/Label/Label.tsx b/packages/web-react/src/components/Label/Label.tsx new file mode 100644 index 0000000000..4dab1e76d8 --- /dev/null +++ b/packages/web-react/src/components/Label/Label.tsx @@ -0,0 +1,18 @@ +'use client'; + +import React, { ElementType } from 'react'; +import { useStyleProps } from '../../hooks'; +import { SpiritLabelProps } from '../../types'; + +const Label = (props: SpiritLabelProps): JSX.Element => { + const { elementType: ElementTag = 'label', children, ...restProps } = props; + const { styleProps, props: otherProps } = useStyleProps(restProps); + + return ( + + {children} + + ); +}; + +export default Label; diff --git a/packages/web-react/src/components/Label/README.md b/packages/web-react/src/components/Label/README.md new file mode 100644 index 0000000000..4d067854f4 --- /dev/null +++ b/packages/web-react/src/components/Label/README.md @@ -0,0 +1,100 @@ +# Label + +The `Label` component is used to associate text with a form control, such as an input, checkbox, or radio button. +It improves accessibility by allowing users to click the label to interact with the corresponding input. +This component can be customized using various props to fit different use cases. + +Simple Item example: + +```jsx +import { Label } from '@lmc-eu/spirit-web-react'; + + +``` + +## Full Example + +```jsx +import { Label } from '@lmc-eu/spirit-web-react'; + + +``` + +## API + +| Name | Type | Default | Required | Description | +| ------------- | ------------- | ------- | -------- | ----------------------------------------------- | +| `elementType` | `ElementType` | `label` | ✕ | Type of element used as wrapper | +| `htmlFor` | `string` | — | ✕ | ID of the associated form element (e.g., input) | + +On top of the API options, the components accept [additional attributes][readme-additional-attributes]. +If you need more control over the styling of a component, you can use [style props][readme-style-props] +and [escape hatches][readme-escape-hatches]. + +# ValidationText + +The ValidationText subcomponent displays validation texts for Field components like TextField, TextArea, Checkbox, FileUploader, etc. + +```jsx +import { ValidationText } from '@lmc-eu/spirit-web-react/components'; +``` + +Basic example usage: + +```jsx + +``` + +Advanced example: + +```jsx + +``` + +## Role Attribute + +When displaying text dynamically, set [`role="alert"`][aria-alert-role] on the `ValidationText` component to improve accessibility. This will help screen readers notify users about content updates. + +## API + +| Name | Type | Default | Required | Description | +| ---------------- | ------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------- | +| `className` | `string` | — | ✓ | Wrapper custom class name | +| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as main wrapper (applied only for single validation text, otherwise `ul`) | +| `id` | `string` | — | ✕ | Component id | +| `role` | `string` | - | ✕ | The role attribute that describes the role of an element | +| `validationText` | \[`ReactNode` \| `ReactNode[]`] | — | ✕ | Validation text, only visible if validationState is set | + +# HelperText + +The HelperText subcomponent displays helper texts for Field components like TextField, TextArea, Checkbox, FileUploader, etc. + +```jsx + +``` + +Advanced example: + +```jsx + +``` + +## API + +| Name | Type | Default | Required | Description | +| ------------- | ------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------- | +| `className` | `string` | — | ✓ | Wrapper custom class name | +| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as main wrapper (applied only for single validation text, otherwise `ul`) | +| `helperText` | \[`ReactNode` \| `ReactNode[]`] | — | ✕ | Validation text, only visible if validationState is | +| `id` | `string` | — | ✕ | Component id | + +[aria-alert-role]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role +[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes +[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches +[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props diff --git a/packages/web-react/src/components/Label/__tests__/Label.test.tsx b/packages/web-react/src/components/Label/__tests__/Label.test.tsx new file mode 100644 index 0000000000..b123c8fbbd --- /dev/null +++ b/packages/web-react/src/components/Label/__tests__/Label.test.tsx @@ -0,0 +1,25 @@ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import { restPropsTest, stylePropsTest } from '@local/tests'; +import { SpiritLabelProps } from '../../../types'; +import Label from '../Label'; + +describe('Label', () => { + stylePropsTest(Label); + + restPropsTest((props: SpiritLabelProps) =>