feat!: Rename Form Label to Label

packages/css/src/components/index.scss

@@ -40,7 +40,7 @@
 @import "./button/button";
 @import "./card/card";
 @import "./checkbox/checkbox";
-@import "./form-label/form-label";
+@import "./label/label";
 @import "./grid/grid";
 @import "./heading/heading";
 @import "./spotlight/spotlight";

packages/css/src/components/form-label/README.md → packages/css/src/components/label/README.md

@@ -1,6 +1,6 @@
 <!-- @license CC0-1.0 -->
 
-# Form Label
+# Label
 
 Describes a form control.
 

packages/css/src/components/label/label.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+
+.ams-label {
+  color: var(--ams-label-color);
+  font-family: var(--ams-label-font-family);
+  font-size: var(--ams-label-font-size);
+  font-weight: var(--ams-label-font-weight);
+  line-height: var(--ams-label-line-height);
+
+  @include hyphenation;
+  @include text-rendering;
+}

packages/react/src/FormLabel/FormLabel.test.tsx → packages/react/src/Label/Label.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
-import { FormLabel } from './FormLabel'
+import { Label } from './Label'
 import '@testing-library/jest-dom'
 
-describe('Form label', () => {
+describe('Label', () => {
   it('renders an HTML label element', () => {
-    const { container } = render(<FormLabel htmlFor="form-control" />)
+    const { container } = render(<Label htmlFor="form-control" />)
 
     const label = container.querySelector('label:only-child')
 
@@ -14,26 +14,26 @@ describe('Form label', () => {
   })
 
   it('renders an HTML label element with for attribute', () => {
-    const { container } = render(<FormLabel htmlFor="form-control" />)
+    const { container } = render(<Label htmlFor="form-control" />)
 
     const label = container.querySelector('label[for="form-control"]:only-child')
 
     expect(label).toBeInTheDocument()
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<FormLabel htmlFor="form-control" />)
+    const { container } = render(<Label htmlFor="form-control" />)
 
     const label = container.querySelector(':only-child')
 
-    expect(label).toHaveClass('ams-form-label')
+    expect(label).toHaveClass('ams-label')
   })
 
   it('renders rich text content', () => {
     const { container } = render(
-      <FormLabel htmlFor="form-control">
+      <Label htmlFor="form-control">
         <strong>Current</strong> password
-      </FormLabel>,
+      </Label>,
     )
 
     const label = container.querySelector(':only-child')
@@ -46,7 +46,7 @@ describe('Form label', () => {
   it('can be associated with an HTML form input', () => {
     render(
       <>
-        <FormLabel htmlFor="email">Email</FormLabel>
+        <Label htmlFor="email">Email</Label>
         <input type="email" id="email" />
       </>,
     )
@@ -60,27 +60,27 @@ describe('Form label', () => {
   })
 
   it('can be hidden', () => {
-    const { container } = render(<FormLabel hidden htmlFor="form-control" />)
+    const { container } = render(<Label hidden htmlFor="form-control" />)
 
     const label = container.querySelector(':only-child')
 
     expect(label).not.toBeVisible()
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<FormLabel className="large" htmlFor="form-control" />)
+    const { container } = render(<Label className="large" htmlFor="form-control" />)
 
     const label = container.querySelector(':only-child')
 
     expect(label).toHaveClass('large')
 
-    expect(label).toHaveClass('ams-form-label')
+    expect(label).toHaveClass('ams-label')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLLabelElement>()
 
-    const { container } = render(<FormLabel htmlFor="form-control" ref={ref} />)
+    const { container } = render(<Label htmlFor="form-control" ref={ref} />)
 
     const div = container.querySelector(':only-child')
 

packages/react/src/FormLabel/FormLabel.tsx → packages/react/src/Label/Label.tsx

@@ -8,15 +8,15 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, LabelHTMLAttributes, PropsWithChildren } from 'react'
 
-export const FormLabel = forwardRef(
+export const Label = forwardRef(
   (
     { children, className, ...restProps }: PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>,
     ref: ForwardedRef<HTMLLabelElement>,
   ) => (
-    <label {...restProps} ref={ref} className={clsx('ams-form-label', className)}>
+    <label {...restProps} ref={ref} className={clsx('ams-label', className)}>
       {children}
     </label>
   ),
 )
 
-FormLabel.displayName = 'FormLabel'
+Label.displayName = 'Label'

packages/react/src/Label/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React Label Component
+
+[Label documentation](../../../css/src/components/label/README.md)

packages/react/src/Label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label'

packages/react/src/Switch/README.md

@@ -5,6 +5,6 @@
 The React `<Switch />` component is a wrapper around the `<input type="checkbox" />`.
 It can be used as a standalone component or as a form control element.
 When used as a standalone component provide a `aria-labelledby` prop to keep it accessible.
-When used as a form control, make sure to add the associated `<FormLabel>` component.
+When used as a form control, make sure to add the associated `<Label>` component.
 
 [Switch documentation](../../../css/src/components/switch/README.md)

packages/react/src/index.ts

@@ -48,7 +48,7 @@ export * from './Breadcrumb'
 export * from './Link'
 export * from './Button'
 export * from './Paragraph'
-export * from './FormLabel'
+export * from './Label'
 export * from './UnorderedList'
 export * from './Icon'
 export * from './Accordion'

proprietary/tokens/src/components/ams/form-label.tokens.json → proprietary/tokens/src/components/ams/label.tokens.json

@@ -1,6 +1,6 @@
 {
   "ams": {
-    "form-label": {
+    "label": {
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.4.font-size}" },

storybook/src/components/Label/Label.docs.mdx

@@ -0,0 +1,11 @@
+import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as LabelStories from "./Label.stories.tsx";
+import README from "../../../../packages/css/src/components/label/README.md?raw";
+
+<Meta of={LabelStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />

storybook/src/components/FormLabel/FormLabel.stories.tsx → storybook/src/components/Label/Label.stories.tsx

@@ -3,21 +3,21 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { FormLabel } from '@amsterdam/design-system-react/src'
+import { Label } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'Components/Forms/Form Label',
-  component: FormLabel,
+  title: 'Components/Forms/Label',
+  component: Label,
   args: {
-    children: 'Form label',
+    children: 'Label',
   },
   argTypes: {
     children: {
       table: { disable: false },
     },
   },
-} satisfies Meta<typeof FormLabel>
+} satisfies Meta<typeof Label>
 
 export default meta
 

storybook/src/components/Switch/Switch.docs.mdx

@@ -8,7 +8,7 @@ import README from "../../../../packages/css/src/components/switch/README.md?raw
 
 It can be used as a standalone component or as a form control element.
 When used as a standalone component provide an `aria-label` or `aria-labelledby` prop to keep it accessible.
-When used as a formcontrol, make sure to add the associated `<FormLabel>` component.
+When used as a formcontrol, make sure to add the associated `<Label>` component.
 
 <Primary />
 

storybook/src/components/Switch/Switch.stories.tsx

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { FormLabel, Switch } from '@amsterdam/design-system-react/src'
+import { Label, Switch } from '@amsterdam/design-system-react/src'
 import { useArgs } from '@storybook/preview-api'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -55,7 +55,7 @@ export const WithLabel: Story = {
 
     return (
       <>
-        <FormLabel htmlFor="switch-with-label">Label</FormLabel>
+        <Label htmlFor="switch-with-label">Label</Label>
         <Switch onClick={handleClick} {...args} id="switch-with-label" />
       </>
     )