Create reusable FieldsetLegend component (#640)

* Create a component for fieldset legend

* Replace logic in Checkbox and Radio Groups

* Create fieldset legend storybook

* Increase minor v

* Add unit tests

* Provide default value inside bracket

* Add a note re: visually-hidden class

* Remove confusing stories

* Remove commented out code

* fix version

* Rename component + files

Author: jhp0621

docs.md

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "engines": {
     "node": "^18.12 || ^20.0"
   },

package.json

@@ -9,11 +9,11 @@ import manageFocus from './focus'
  * @name TabBar
  * @type Function
  * @description A control component for navigating among multiple tabs
- * @param {Boolean} [vertical] - A boolean setting the `className` of the `ul` to 'horizontal' (default), or 'vertical', which determines the alignment of the tabs (optional, default `false`)
+ * @param {Boolean} [vertical=false] - A boolean setting the `className` of the `ul` to 'horizontal' (default), or 'vertical', which determines the alignment of the tabs
  * @param {Array} options - An array of tab values (strings or key-value pairs)
  * @param {String|Number} value - The value of the current tab
  * @param {Function} [onChange] - A function called with the new value when a tab is clicked
- * @param {String} [activeClassName] - The class of the active tab, (optional, default `active`)
+ * @param {String} [activeClassName='active'] - The class of the active tab
  * @example
  *
  * function ShowTabs ({ currentTab, setCurrentTab }) {

src/controls/tab-bar/tab-bar.js

@@ -6,17 +6,15 @@ import {
   fieldOptionsType,
   omitLabelProps,
   replaceEmptyStringValue,
-  convertNameToLabel,
   DropdownSelect,
 } from '../helpers'
-import { LabeledField } from '../labels'
+import { LabeledField, FieldsetLegend } from '../labels'
 import {
   addToArray,
   removeFromArray,
   serializeOptions,
   compose,
 } from '../../utils'
-import classnames from 'classnames'
 
 /**
  *
@@ -101,26 +99,6 @@ const defaultProps = {
   dropdown: false,
 }
 
-function CheckboxGroupLegend({
-  label,
-  name,
-  required,
-  requiredIndicator,
-  hint,
-}) {
-  return (
-    <legend className={classnames({ 'visually-hidden': label === false })}>
-      {label || convertNameToLabel(name)}
-      {required && requiredIndicator && (
-        <span className="required-indicator" aria-hidden="true">
-          {requiredIndicator}
-        </span>
-      )}
-      {hint && <i>{hint}</i>}
-    </legend>
-  )
-}
-
 function CheckboxOptionsContainer({ children, dropdown, ...rest }) {
   if (dropdown)
     return (
@@ -159,7 +137,7 @@ function CheckboxGroup(props) {
   return (
     <LabeledField
       className={className}
-      labelComponent={CheckboxGroupLegend}
+      labelComponent={FieldsetLegend}
       as="fieldset"
       {...props}
     >

src/forms/inputs/checkbox-group.js

@@ -1,14 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {
-  convertNameToLabel,
   radioGroupPropTypes,
   fieldOptionsType,
   omitLabelProps,
 } from '../helpers'
-import { LabeledField } from '../labels'
+import { LabeledField, FieldsetLegend } from '../labels'
 import { serializeOptions, filterInvalidDOMProps } from '../../utils'
-import classnames from 'classnames'
 
 /**
  *
@@ -90,20 +88,6 @@ const defaultProps = {
   radioInputProps: {},
 }
 
-function RadioGroupLegend({ label, name, required, requiredIndicator, hint }) {
-  return (
-    <legend className={classnames({ 'visually-hidden': label === false })}>
-      {label || convertNameToLabel(name)}
-      {required && requiredIndicator && (
-        <span className="required-indicator" aria-hidden="true">
-          {requiredIndicator}
-        </span>
-      )}
-      {hint && <i>{hint}</i>}
-    </legend>
-  )
-}
-
 // This should never be used by itself, so it does not exist as a separate export
 function RadioButton(props) {
   const {
@@ -146,7 +130,7 @@ function RadioGroup(props) {
   return (
     <LabeledField
       className={className}
-      labelComponent={RadioGroupLegend}
+      labelComponent={FieldsetLegend}
       as="fieldset"
       {...props}
     >

src/forms/inputs/radio-group.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { convertNameToLabel } from '../helpers'
+
+/**
+ *
+ * A legend representing a caption for the content of its parent field set element
+ *
+ * This component must be used as a direct child and the only legend of the <fieldset> element that groups related controls
+ * 
+ *
+ * The text of the legend is set using the following rules:
+ * - If the `label` prop is set to `false`, the legend is hidden visually via a class. _Note: It's your responsibility to make sure your styling rules respect the `visually-hidden` class_
+ * - Else If the `label` prop is set to a string, the label will display that text
+ * - Otherwise, the label will be set using the `name` prop.
+ *
+ * 
+ * @name FieldsetLegend
+ * @type Function
+ * @param {String} name - The name of the associated group
+ * @param {String} [hint] - A usage hint for the associated input
+ * @param {String|Boolean} [label] - Custom text for the legend
+ * @param {Boolean} [required=false] - A boolean value to indicate whether the field is required
+ * @param {String} [requiredIndicator=''] - Custom character to denote a field is required
+
+ * @example
+ *
+ *
+ * function ShippingAddress (props) {
+ *   const name = 'shippingAddress'
+ *   return (
+ *      <fieldset>
+ *       <FieldsetLegend name={name} />
+ *       <Input id={`${name}.name`} input={{name: 'name'}} />
+ *       <Input id={`${name}.street`} input={{name: 'street'}} />
+ *       <Input id={`${name}.city`}" input={{name: 'city'}} />
+ *       <Input id={`${name}.state`} input={{name: 'state'}} />
+ *     </fieldset>
+ *   )
+ * }
+ *
+ */
+
+const propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  requiredIndicator: PropTypes.string,
+  className: PropTypes.string,
+  hint: PropTypes.string,
+}
+
+const defaultProps = {
+  children: null,
+  hint: '',
+  label: '',
+  required: false,
+  requiredIndicator: '',
+  className: '',
+}
+
+function FieldsetLegend({
+  label,
+  name,
+  required,
+  requiredIndicator,
+  className,
+  hint,
+}) {
+  return (
+    <legend
+      className={classnames(className, { 'visually-hidden': label === false })}
+    >
+      {label || convertNameToLabel(name)}
+      {required && requiredIndicator && (
+        <span className="required-indicator" aria-hidden="true">
+          {requiredIndicator}
+        </span>
+      )}
+      {hint && <i>{hint}</i>}
+    </legend>
+  )
+}
+
+FieldsetLegend.propTypes = propTypes
+FieldsetLegend.defaultProps = defaultProps
+
+export default FieldsetLegend

src/forms/labels/fieldset-legend.js

@@ -2,3 +2,4 @@ export ErrorLabel from './error-label'
 export InputError from './input-error'
 export InputLabel from './input-label'
 export LabeledField from './labeled-field'
+export FieldsetLegend from './fieldset-legend'

src/forms/labels/index.js

@@ -25,12 +25,12 @@ import { useToggle } from '../../utils'
  * @name InputLabel
  * @type Function
  * @param {String} name - The name of the associated input
- * @param {String} [id=name] - The id of the associated input (defaults to name)
+ * @param {String} [id=name] - The id of the associated input
  * @param {String} [hint] - A usage hint for the associated input
  * @param {String|Boolean} [label] - Custom text for the label
  * @param {String} [tooltip] - A message to display in a tooltip
- * @param {Boolean} [required] - A boolean value to indicate whether the field is required
- * @param {String} [requiredIndicator] - Custom character to denote a field is required (optional, default `''`)
+ * @param {Boolean} [required=false] - A boolean value to indicate whether the field is required
+ * @param {String} [requiredIndicator=''] - Custom character to denote a field is required
 
  * @example
  *
@@ -74,6 +74,7 @@ const defaultProps = {
   id: '',
   label: '',
   tooltip: '',
+  required: false,
   requiredIndicator: '',
   className: '',
 }

src/forms/labels/input-label.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { FieldsetLegend } from 'src'
+
+storiesOf('FieldsetLegend', module)
+  .add('with default label', () => <FieldsetLegend name="nameOfInput" />)
+  .add('with custom label', () => (
+    <FieldsetLegend name="nameOfInput" label="Custom Label" />
+  ))
+  .add('with no label', () => (
+    <FieldsetLegend name="nameOfInput" label={false} />
+  ))
+  .add('with required true custom indicator', () => (
+    <FieldsetLegend
+      name="nameOfInput"
+      label="Custom Label"
+      required={true}
+      requiredIndicator={'*'}
+    />
+  ))
+  .add('with hint', () => <FieldsetLegend name="nameOfInput" hint="hint" />)

stories/forms/labels/fieldset-legend.story.js

@@ -8,14 +8,11 @@ storiesOf('InputLabel', module)
     <InputLabel name="nameOfInput" label="Custom Label" />
   ))
   .add('with no label', () => <InputLabel name="nameOfInput" label={false} />)
-  .add('with required true default indicator', () => (
-    <InputLabel name="nameOfInput" label="Custom Label" required />
-  ))
   .add('with required true custom indicator', () => (
     <InputLabel
       name="nameOfInput"
       label="Custom Label"
-      required
+      required={true}
       requiredIndicator={'*'}
     />
   ))

stories/forms/labels/input-label.story.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { FieldsetLegend } from '../../../src/'
+
+const name = 'contactDetails'
+const formattedName = 'Contact Details'
+
+describe('FieldsetLegend', () => {
+  test('renders label correctly when label prop is a string', () => {
+    render(<FieldsetLegend name={name} label="Your Information" />)
+    expect(screen.getByText('Your Information')).toBeInTheDocument()
+  })
+
+  test('renders label correctly using name prop when label prop is not provided', () => {
+    render(<FieldsetLegend name={name} />)
+    expect(screen.getByText(formattedName)).toBeInTheDocument()
+  })
+
+  test('renders label with class "visually-hidden" when label prop is false', () => {
+    render(<FieldsetLegend name={name} label={false} />)
+    expect(screen.getByText(formattedName)).toHaveClass('visually-hidden')
+  })
+
+  test('does not show required indicator when no custom required indicator is provided', () => {
+    render(<FieldsetLegend name={name} required />)
+    expect(screen.getByText(formattedName).textContent).toEqual(formattedName)
+  })
+
+  test('shows custom indicator when required is true and custom requiredIndicator is provided', () => {
+    render(<FieldsetLegend name={name} required requiredIndicator={'*'} />)
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+
+  test('hides custom indicator when required is false and custom requiredIndicator is provided', () => {
+    render(
+      <FieldsetLegend name={name} required={false} requiredIndicator={'*'} />
+    )
+    expect(screen.queryByText('*')).not.toBeInTheDocument()
+  })
+
+  test('shows hint when hint is provided', () => {
+    render(<FieldsetLegend name={name} hint="hint" />)
+    expect(screen.getByText(formattedName)).toHaveTextContent('hint')
+  })
+})