feat: Added required marker (#2524)

Co-authored-by: Shauna Keating <59394696+shkeating@users.noreply.github.com>

src/components/forms/Fieldset/Fieldset.stories.tsx

@@ -5,6 +5,7 @@ import { Label } from '../Label/Label'
 import { TextInput } from '../TextInput/TextInput'
 import { Checkbox } from '../Checkbox/Checkbox'
 import { Radio } from '../Radio/Radio'
+import { RequiredMarker } from '../Label/RequiredMarker'
 
 export default {
   title: 'Components/Form elements/Fieldset',
@@ -70,33 +71,40 @@ export const checkboxFieldset = (): React.ReactElement => (
 )
 
 export const checkboxFieldsetWithDefaultLegend = (): React.ReactElement => (
-  <Fieldset legend="Historical figures 1">
-    <Checkbox
-      id="truth"
-      name="historical-figures-1"
-      value="truth"
-      defaultChecked
-      label="Sojourner Truth"
-    />
-    <Checkbox
-      id="douglass"
-      name="historical-figures-1"
-      value="douglass"
-      label="Frederick Douglass"
-    />
-    <Checkbox
-      id="washington"
-      name="historical-figures-1"
-      value="washington"
-      label="Booker T. Washington"
-    />
-    <Checkbox
-      id="carver"
-      name="historical-figures-1"
-      label="George Washington Carver"
-      disabled
-    />
-  </Fieldset>
+  <>
+    <p>
+      Required fields are marked with an asterisk (<RequiredMarker />
+      ).
+    </p>
+    <Fieldset legend="Historical figures 1" requiredMarker>
+      <Checkbox
+        required
+        id="truth"
+        name="historical-figures-1"
+        value="truth"
+        defaultChecked
+        label="Sojourner Truth"
+      />
+      <Checkbox
+        id="douglass"
+        name="historical-figures-1"
+        value="douglass"
+        label="Frederick Douglass"
+      />
+      <Checkbox
+        id="washington"
+        name="historical-figures-1"
+        value="washington"
+        label="Booker T. Washington"
+      />
+      <Checkbox
+        id="carver"
+        name="historical-figures-1"
+        label="George Washington Carver"
+        disabled
+      />
+    </Fieldset>
+  </>
 )
 
 export const radioFieldset = (): React.ReactElement => (

src/components/forms/Fieldset/Fieldset.test.tsx

@@ -26,6 +26,17 @@ describe('Fieldset component', () => {
     expect(myFieldset).toHaveAttribute('aria-live', 'polite')
   })
 
+  it('renders with required marker', () => {
+    const { queryByText } = render(
+      <Fieldset legend="Historical figures 1" requiredMarker>
+        My Fieldset
+      </Fieldset>
+    )
+    const marker = queryByText('*')
+    expect(marker).toBeInTheDocument()
+    expect(marker).toHaveClass('usa-hint--required')
+  })
+
   describe('renders uswds classes', () => {
     it('renders legend with class usa-legend by default', () => {
       const { queryByTestId, getByText } = render(

src/components/forms/Fieldset/Fieldset.tsx

@@ -1,18 +1,21 @@
 import React from 'react'
 import classnames from 'classnames'
+import { RequiredMarker } from '../Label/RequiredMarker'
 
 type FieldsetProps = {
   children: React.ReactNode
   legend?: React.ReactNode
   legendStyle?: 'default' | 'large' | 'srOnly'
   className?: string
+  requiredMarker?: boolean
 }
 
 export const Fieldset = ({
   children,
   legend,
   className,
   legendStyle = 'default',
+  requiredMarker,
   ...fieldsetProps
 }: FieldsetProps & JSX.IntrinsicElements['fieldset']): React.ReactElement => {
   const classes = classnames('usa-fieldset', className)
@@ -25,7 +28,17 @@ export const Fieldset = ({
 
   return (
     <fieldset data-testid="fieldset" className={classes} {...fieldsetProps}>
-      {legend && <legend className={legendClasses}>{legend}</legend>}
+      {legend && (
+        <legend className={legendClasses}>
+          {legend}
+          {requiredMarker && (
+            <>
+              {' '}
+              <RequiredMarker />
+            </>
+          )}
+        </legend>
+      )}
       {children}
     </fieldset>
   )

src/components/forms/Form/Form.stories.tsx

@@ -9,6 +9,7 @@ import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
 import { Fieldset } from '../Fieldset/Fieldset'
 import { FormGroup } from '../FormGroup/FormGroup'
 import { Label } from '../Label/Label'
+import { RequiredMarker } from '../Label/RequiredMarker'
 import { TextInput } from '../TextInput/TextInput'
 import { Textarea } from '../Textarea/Textarea'
 
@@ -111,10 +112,7 @@ export const addressForm = (): React.ReactElement => (
   <Form onSubmit={mockSubmit} large>
     <Fieldset legend="Mailing address" legendStyle="large">
       <p>
-        Required fields are marked with an asterisk (
-        <abbr title="required" className="usa-hint usa-hint--required">
-          *
-        </abbr>
+        Required fields are marked with an asterisk (<RequiredMarker />
         ).
       </p>
       <Label htmlFor="mailing-address-1">Street address</Label>
@@ -123,19 +121,13 @@ export const addressForm = (): React.ReactElement => (
       <Label htmlFor="mailing-address-2">Street address line 2</Label>
       <TextInput id="mailing-address-2" name="mailing-address-2" type="text" />
 
-      <Label htmlFor="city">
-        City{' '}
-        <abbr title="required" className="usa-hint usa-hint--required">
-          *
-        </abbr>
+      <Label htmlFor="city" requiredMarker>
+        City
       </Label>
       <TextInput id="city" name="city" type="text" required />
 
-      <Label htmlFor="state">
-        State, territory, or military post{' '}
-        <abbr title="required" className="usa-hint usa-hint--required">
-          *
-        </abbr>
+      <Label htmlFor="state" requiredMarker>
+        State, territory, or military post
       </Label>
       <Dropdown id="state" name="state" required>
         <option>- Select -</option>

src/components/forms/Label/Label.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Label } from './Label'
+import { RequiredMarker } from './RequiredMarker'
 
 export default {
   title: 'Components/Form elements/Label',
@@ -32,3 +33,9 @@ export const withHint = (): React.ReactElement => (
     Text input
   </Label>
 )
+
+export const withRequiredMarker = (): React.ReactElement => (
+  <Label htmlFor="testInputRequired" requiredMarker>
+    Text input
+  </Label>
+)

src/components/forms/Label/Label.test.tsx

@@ -31,4 +31,18 @@ describe('Label component', () => {
     expect(hint).toBeInTheDocument()
     expect(hint).toHaveClass('usa-hint')
   })
+
+  it('renders with required marker', () => {
+    const { queryByText } = render(
+      <Label htmlFor="testInput" requiredMarker>
+        My Text Input
+      </Label>
+    )
+
+    expect(queryByText('My Text Input')).toBeInTheDocument()
+
+    const marker = queryByText('*')
+    expect(marker).toBeInTheDocument()
+    expect(marker).toHaveClass('usa-hint--required')
+  })
 })

src/components/forms/Label/Label.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import { RequiredMarker } from './RequiredMarker'
 
 type LabelProps = {
   children: React.ReactNode
@@ -8,6 +9,7 @@ type LabelProps = {
   error?: boolean
   hint?: React.ReactNode
   srOnly?: boolean
+  requiredMarker?: boolean
 }
 
 export const Label = ({
@@ -17,6 +19,7 @@ export const Label = ({
   error,
   hint,
   srOnly,
+  requiredMarker,
   ...labelProps
 }: LabelProps & JSX.IntrinsicElements['label']): React.ReactElement => {
   const classes = classnames(
@@ -36,6 +39,12 @@ export const Label = ({
       htmlFor={htmlFor}>
       {children}
       {hint && <span className="usa-hint">{hint}</span>}
+      {requiredMarker && (
+        <>
+          {' '}
+          <RequiredMarker />
+        </>
+      )}
     </label>
   )
 }

src/components/forms/Label/RequiredMarker.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+export const RequiredMarker = (): React.ReactElement => {
+  return (
+    <abbr title="required" className="usa-hint usa-hint--required">
+      *
+    </abbr>
+  )
+}
+export default RequiredMarker

src/index.ts

@@ -62,6 +62,7 @@ export { InputGroup } from './components/forms/InputGroup/InputGroup'
 export { InputPrefix } from './components/forms/InputPrefix/InputPrefix'
 export { InputSuffix } from './components/forms/InputSuffix/InputSuffix'
 export { Label } from './components/forms/Label/Label'
+export { RequiredMarker } from './components/forms/Label/RequiredMarker'
 export { LanguageSelector } from './components/LanguageSelector/LanguageSelector'
 export { LanguageSelectorButton } from './components/LanguageSelector/LanguageSelectorButton'
 export type { LanguageDefinition } from './components/LanguageSelector/LanguageSelector'