feat!: Rename Form Field Character Counter to Character Count (#1363)

packages/css/src/components/form-field-character-counter/README.md → packages/css/src/components/character-count/README.md

@@ -1,19 +1,19 @@
 <!-- @license CC0-1.0 -->
 
-# Form Field Character Counter
+# Character Count
 
 Help users know how much text they can enter when there is a limit on the number of characters.
 
 Users will get updates at a pace that works best for the way they interact with the textarea. This means:
 
-- sighted users will see a count message that updates as they type
+- sighted users will see a count message that updates as they type;
 - screen reader users will hear the count announcement when they stop typing.
 
 This component does not restrict the user from entering information. The user can enter more than the character limit, but are told they’ve entered too many characters. This lets them type or copy and paste their full answer, then edit it down.
 
 ## Guidelines
 
-- Only use a character counter when there is a good reason for limiting the number of characters users can enter.
+- Only use a character count when there is a good reason for limiting the number of characters users can enter.
   For example, if there is an indication that users are likely to enter more information than they need to.
   Or when there is a legal or technical reason that means an entry must be no more than a certain number of characters.
-- If your users keep hitting the character limit imposed by the backend of your service then try to increase the limit rather than use a character counter.
+- If your users keep hitting the character limit imposed by the backend of your service then try to increase the limit rather than use a character count.

packages/css/src/components/character-count/character-count.scss

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

packages/css/src/components/index.scss

@@ -13,7 +13,7 @@
 @import "./date-input/date-input";
 @import "./document/document";
 @import "./avatar/avatar";
-@import "./form-field-character-counter/form-field-character-counter";
+@import "./character-count/character-count";
 @import "./description-list/description-list";
 @import "./row/row";
 @import "./radio/radio";

packages/css/src/components/pagination/README.md

@@ -13,7 +13,7 @@ Pagination indicates the current page and allows users to navigate to other page
 - Place pagination below the overview list.
 - Pagination should not be displayed if there is only one page.
 - Redirect users to the first page if they enter a URL with a page number that doesn’t exist.
-- Pagination can be combined with a counter at the top of the page indicating “Page # of ##.”
+- Pagination can be combined with a count at the top of the page indicating “Page # of ##.”
 - Start a page with an overview list at the top after changing the page.
 - Make sure that the visible and accessible labels for the ‘previous’ and ‘next’ buttons convey the same meaning at all times – e.g. don’t update one and forget the other.
 

packages/react/src/FormFieldCharacterCounter/FormFieldCharacterCounter.test.tsx → packages/react/src/CharacterCount/CharacterCount.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
-import { FormFieldCharacterCounter } from './FormFieldCharacterCounter'
+import { CharacterCount } from './CharacterCount'
 import '@testing-library/jest-dom'
 
-describe('Form field character counter', () => {
+describe('Character count', () => {
   it('renders', () => {
-    render(<FormFieldCharacterCounter length={10} maxLength={100} />)
+    render(<CharacterCount length={10} maxLength={100} />)
 
     const component = screen.getByRole('status')
 
@@ -14,33 +14,33 @@ describe('Form field character counter', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<FormFieldCharacterCounter length={10} maxLength={100} />)
+    render(<CharacterCount length={10} maxLength={100} />)
 
     const component = screen.getByRole('status')
 
-    expect(component).toHaveClass('ams-form-field-character-counter')
+    expect(component).toHaveClass('ams-character-count')
   })
 
   it('renders an additional class name', () => {
-    render(<FormFieldCharacterCounter length={10} maxLength={100} className="extra" />)
+    render(<CharacterCount length={10} maxLength={100} className="extra" />)
 
     const component = screen.getByRole('status')
 
-    expect(component).toHaveClass('ams-form-field-character-counter extra')
+    expect(component).toHaveClass('ams-character-count extra')
   })
 
   it('renders an error class when length is larger than maxLength', () => {
-    render(<FormFieldCharacterCounter length={101} maxLength={100} />)
+    render(<CharacterCount length={101} maxLength={100} />)
 
     const component = screen.getByRole('status')
 
-    expect(component).toHaveClass('ams-form-field-character-counter--error')
+    expect(component).toHaveClass('ams-character-count--error')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
 
-    render(<FormFieldCharacterCounter length={10} maxLength={100} ref={ref} />)
+    render(<CharacterCount length={10} maxLength={100} ref={ref} />)
 
     const component = screen.getByRole('status')
 

packages/react/src/CharacterCount/CharacterCount.tsx

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
+
+export type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
+  /** The current length of the field’s value. */
+  length: number
+  /** The maximum length of the field’s value. */
+  maxLength: number
+}
+
+export const CharacterCount = forwardRef(
+  ({ className, length, maxLength, ...restProps }: CharacterCountProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className)}
+      role="status"
+    >
+      {`${length} van ${maxLength} tekens`}
+    </div>
+  ),
+)
+
+CharacterCount.displayName = 'CharacterCount'

packages/react/src/CharacterCount/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React Character Count component
+
+[Character Count documentation](../../../css/src/components/character-count/README.md)

packages/react/src/CharacterCount/index.ts

@@ -0,0 +1,2 @@
+export { CharacterCount } from './CharacterCount'
+export type { CharacterCountProps } from './CharacterCount'

packages/react/src/index.ts

@@ -13,7 +13,7 @@ export * from './Select'
 export * from './TimeInput'
 export * from './DateInput'
 export * from './Avatar'
-export * from './FormFieldCharacterCounter'
+export * from './CharacterCount'
 export * from './DescriptionList'
 export * from './Row'
 export * from './Radio'

proprietary/tokens/src/components/ams/form-field-character-counter.tokens.json → proprietary/tokens/src/components/ams/character-count.tokens.json

@@ -1,6 +1,6 @@
 {
   "ams": {
-    "form-field-character-counter": {
+    "character-count": {
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.6.font-size}" },

storybook/src/components/CharacterCount/CharacterCount.docs.mdx

@@ -0,0 +1,19 @@
+{/* @license CC0-1.0 */}
+
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as CharacterCountStories from "./CharacterCount.stories.tsx";
+import README from "../../../../packages/css/src/components/character-count/README.md?raw";
+
+<Meta of={CharacterCountStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
+
+## Error
+
+When the length exceeds the maximum length, the color of the text changes to red.
+
+<Canvas of={CharacterCountStories.Error} />

storybook/src/components/FormFieldCharacterCounter/FormFieldCharacterCounter.stories.tsx → storybook/src/components/CharacterCount/CharacterCount.stories.tsx

@@ -3,17 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { FormFieldCharacterCounter } from '@amsterdam/design-system-react/src'
+import { CharacterCount } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
-  title: 'Components/Forms/Form Field Character Counter',
-  component: FormFieldCharacterCounter,
+  title: 'Components/Forms/Character Count',
+  component: CharacterCount,
   args: {
     length: 7,
     maxLength: 10,
   },
-} satisfies Meta<typeof FormFieldCharacterCounter>
+} satisfies Meta<typeof CharacterCount>
 
 export default meta
 

storybook/src/pages/amsterdam/FormPage/FormPage.tsx

@@ -2,10 +2,10 @@ import {
   Alert,
   Breadcrumb,
   Button,
+  CharacterCount,
   Column,
   Field,
   FieldSet,
-  FormFieldCharacterCounter,
   Grid,
   Heading,
   Label,
@@ -40,7 +40,7 @@ export const FormPage = () => {
               onChange={(e) => setTextareaLength(e.target.value.length)}
               rows={4}
             />
-            <FormFieldCharacterCounter length={textareaLength} maxLength={1000} />
+            <CharacterCount length={textareaLength} maxLength={1000} />
           </Field>
           <FieldSet aria-describedby="contactDetailsDescription" legend="Wat zijn uw gegevens?">
             <Column gap="small">