feat: Add Hint as component and Label and FieldSet props (#1499)

Co-authored-by: Vincent Smedinga <[email protected]> Co-authored-by: Aram <[email protected]>
Amsterdam · Sep 20, 2024 · 3d86882 · 3d86882
1 parent 450b0c3
commit 3d86882
Show file tree

Hide file tree

Showing 28 changed files with 347 additions and 64 deletions.
diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
@@ -21,17 +21,17 @@
   line-height: var(--ams-blockquote-line-height);
   quotes: "“" "”";
 
+  @include hyphenation;
+  @include text-rendering;
+  @include reset;
+
   &::before {
     content: open-quote;
   }
 
   &::after {
     content: close-quote;
   }
-
-  @include hyphenation;
-  @include text-rendering;
-  @include reset;
 }
 
 .ams-blockquote--inverse-color {

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -26,13 +26,13 @@
   padding-inline: var(--ams-button-padding-inline);
   touch-action: manipulation;
 
+  @include text-rendering;
+  @include reset-button;
+
   &:disabled,
   &[aria-disabled="true"] {
     cursor: var(--ams-button-disabled-cursor);
   }
-
-  @include text-rendering;
-  @include reset-button;
 }
 
 @mixin ams-button-forced-color-mode {
@@ -46,6 +46,8 @@
   box-shadow: var(--ams-button-primary-box-shadow);
   color: var(--ams-button-primary-color);
 
+  @include ams-button-forced-color-mode;
+
   &:disabled,
   [aria-disabled="true"] {
     background-color: var(--ams-button-primary-disabled-background-color);
@@ -56,15 +58,15 @@
     background-color: var(--ams-button-primary-hover-background-color);
     box-shadow: var(--ams-button-primary-hover-box-shadow);
   }
-
-  @include ams-button-forced-color-mode;
 }
 
 .ams-button--secondary {
   background-color: var(--ams-button-secondary-background-color);
   box-shadow: var(--ams-button-secondary-box-shadow);
   color: var(--ams-button-secondary-color);
 
+  @include ams-button-forced-color-mode;
+
   &:disabled,
   [aria-disabled="true"] {
     background-color: var(--ams-button-secondary-disabled-background-color);
@@ -76,8 +78,6 @@
     box-shadow: var(--ams-button-secondary-hover-box-shadow);
     color: var(--ams-button-secondary-hover-color);
   }
-
-  @include ams-button-forced-color-mode;
 }
 
 .ams-button--tertiary {

diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -44,6 +44,8 @@
   line-height: var(--ams-checkbox-line-height);
   outline-offset: var(--ams-checkbox-outline-offset);
 
+  @include text-rendering;
+
   &:hover {
     color: var(--ams-checkbox-hover-color);
     text-decoration-line: underline;
@@ -55,8 +57,6 @@
       border-width: var(--ams-checkbox-checkmark-hover-border-width);
     }
   }
-
-  @include text-rendering;
 }
 
 // Default checked

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
@@ -20,12 +20,12 @@
   gap: var(--ams-description-list-gap);
   line-height: var(--ams-description-list-line-height);
 
+  @include reset;
+  @include text-rendering;
+
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-template-columns: 1fr 2fr;
   }
-
-  @include reset;
-  @include text-rendering;
 }
 
 .ams-description-list--inverse-color {
@@ -46,10 +46,10 @@
   font-weight: var(--ams-description-list-details-font-weight);
   padding-inline-start: var(--ams-description-list-details-padding-inline-start);
 
+  @include reset-details;
+
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;
     padding-inline-start: 0;
   }
-
-  @include reset-details;
 }
diff --git a/packages/css/src/components/field-set/README.md b/packages/css/src/components/field-set/README.md
@@ -7,6 +7,8 @@ A component to group related form inputs.
 ## Guidelines
 
 - Use Field Set when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single Field Set when asking for an address.
+- Set `optional` to `true` if all inputs in a Field Set are not required.
+- Use `hint` to show a custom hint text.
 
 ## Relevant WCAG requirements
 

diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
@@ -48,13 +48,13 @@
   padding-block: var(--ams-file-input-file-selector-button-padding-block);
   padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
 
+  @include reset-button;
+
   @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
     border: var(
       --ams-file-input-file-selector-button-forced-color-mode-border
     ); // add border because forced colors changes box-shadow to none
   }
-
-  @include reset-button;
 }
 
 .ams-file-input:disabled::file-selector-button {

diff --git a/packages/css/src/components/hint/README.md b/packages/css/src/components/hint/README.md
@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# Hint
+
+Shows a hint text. Only used internally by Label and Field Set. 
+
+## Class name
+
+`ams-hint`
diff --git a/packages/css/src/components/hint/hint.scss b/packages/css/src/components/hint/hint.scss
@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-hint {
+  color: var(--ams-hint-color);
+  display: inline-block;
+}
diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss
@@ -20,6 +20,8 @@
   outline-offset: var(--ams-icon-button-outline-offset);
   touch-action: manipulation;
 
+  @include reset;
+
   &:hover {
     background-color: var(--ams-icon-button-hover-background-color);
     color: var(--ams-icon-button-hover-color);
@@ -30,8 +32,6 @@
     color: var(--ams-icon-button-disabled-color);
     cursor: not-allowed;
   }
-
-  @include reset;
 }
 
 .ams-icon-button--contrast-color {

diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./hint/hint";
 @import "./password-input/password-input";
 @import "./form-error-list/form-error-list";
 @import "./table-of-contents/table-of-contents";

diff --git a/packages/css/src/components/label/README.md b/packages/css/src/components/label/README.md
@@ -7,3 +7,5 @@ Describes a form control.
 ## Guidelines
 
 - Always associate a form element (such as an `input` or `textarea`) with a label.
+- Set `optional` to `true` if the input is not required.
+- Use `hint` to show a custom hint text.
diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
@@ -11,11 +11,11 @@
   font-weight: var(--ams-link-font-weight);
   outline-offset: var(--ams-link-outline-offset);
 
+  @include text-rendering;
+
   &:hover {
     color: var(--ams-link-hover-color);
   }
-
-  @include text-rendering;
 }
 
 .ams-link--standalone {

diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss
@@ -45,22 +45,22 @@
   text-underline-offset: var(--ams-pagination-button-text-underline-offset);
   touch-action: manipulation;
 
-  &:hover {
-    color: var(--ams-pagination-button-hover-color);
-    text-decoration-line: var(--ams-pagination-button-hover-text-decoration-line);
-  }
+  @include text-rendering;
 
   &:disabled {
     display: none;
   }
 
+  &:hover {
+    color: var(--ams-pagination-button-hover-color);
+    text-decoration-line: var(--ams-pagination-button-hover-text-decoration-line);
+  }
+
   // Override for icon size
   span.ams-icon svg {
     block-size: 1rem;
     inline-size: 1rem;
   }
-
-  @include text-rendering;
 }
 
 .ams-pagination__button--current {

diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
@@ -45,6 +45,8 @@
   line-height: var(--ams-radio-line-height);
   outline-offset: var(--ams-radio-outline-offset);
 
+  @include text-rendering;
+
   &:hover {
     color: var(--ams-radio-hover-color);
     text-decoration-line: underline;
@@ -55,8 +57,6 @@
       border-color: var(--ams-radio-circle-hover-border-color);
     }
   }
-
-  @include text-rendering;
 }
 
 // Default checked

diff --git a/packages/css/src/components/select/select.scss b/packages/css/src/components/select/select.scss
@@ -23,6 +23,8 @@
   padding-inline: var(--ams-select-padding-inline);
   touch-action: manipulation;
 
+  @include reset;
+
   &:not([multiple]) {
     background-image: var(--ams-select-background-image);
     background-position: var(--ams-select-background-position);
@@ -33,8 +35,6 @@
   &:hover {
     box-shadow: var(--ams-select-hover-box-shadow);
   }
-
-  @include reset;
 }
 
 .ams-select:invalid,

diff --git a/packages/react/src/FieldSet/FieldSet.test.tsx b/packages/react/src/FieldSet/FieldSet.test.tsx
@@ -54,4 +54,36 @@ describe('FieldSet', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  it('renders the provided hint text after the legend', () => {
+    render(<FieldSet legend="Legend" hint="hint text" />)
+
+    const component = screen.getByRole('group', { name: 'Legend (hint text)' })
+
+    expect(component).toBeInTheDocument()
+  })
+
+  it('renders the default hint text after the legend', () => {
+    render(<FieldSet legend="Legend" optional />)
+
+    const component = screen.getByRole('group', { name: 'Legend (niet verplicht)' })
+
+    expect(component).toBeInTheDocument()
+  })
+
+  it('renders the provided hint text after the legend when both `optional` and `hint` props are used', () => {
+    render(<FieldSet legend="Legend" optional={true} hint="not required" />)
+
+    const component = screen.getByRole('group', { name: 'Legend (not required)' })
+
+    expect(component).toBeInTheDocument()
+  })
+
+  it('renders the provided hint text after the legend while `optional` is set to `false`', () => {
+    render(<FieldSet legend="Legend" optional={false} hint="required" />)
+
+    const component = screen.getByRole('group', { name: 'Legend (required)' })
+
+    expect(component).toBeInTheDocument()
+  })
 })
diff --git a/packages/react/src/FieldSet/FieldSet.tsx b/packages/react/src/FieldSet/FieldSet.tsx
@@ -6,25 +6,33 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { Hint, HintProps } from '../Hint'
 
 export type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
   /** Whether the field set has an input with a validation error */
   invalid?: boolean
   /** The text for the caption. */
   legend: string
-}
+} & HintProps
 
 export const FieldSet = forwardRef(
-  ({ children, className, invalid, legend, ...restProps }: FieldSetProps, ref: ForwardedRef<HTMLFieldSetElement>) => (
-    <fieldset
-      {...restProps}
-      ref={ref}
-      className={clsx('ams-field-set', invalid && 'ams-field-set--invalid', className)}
-    >
-      <legend className="ams-field-set__legend">{legend}</legend>
-      {children}
-    </fieldset>
-  ),
+  (
+    { children, className, hint, invalid, legend, optional, ...restProps }: FieldSetProps,
+    ref: ForwardedRef<HTMLFieldSetElement>,
+  ) => {
+    return (
+      <fieldset
+        {...restProps}
+        ref={ref}
+        className={clsx('ams-field-set', invalid && 'ams-field-set--invalid', className)}
+      >
+        <legend className="ams-field-set__legend">
+          {legend} <Hint hint={hint} optional={optional} />
+        </legend>
+        {children}
+      </fieldset>
+    )
+  },
 )
 
 FieldSet.displayName = 'FieldSet'