feat(rangeinput): creates form RangeInput component, test, and stories

package.json

@@ -43,7 +43,8 @@
     "Sara Bocciardi <sara@truss.works>",
     "Jeri Sommers <sojeri@truss.works>",
     "Emily Mahanna <emahanna@truss.works>",
-    "Hana Worku <hana@truss.works>"
+    "Hana Worku <hana@truss.works>",
+    "Duncan Spencer <duncan@truss.works>"
   ],
   "license": "Apache-2.0",
   "bugs": {

src/components/forms/RangeInput/RangeInput.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { RangeInput } from './RangeInput'
+import { Label } from '../Label/Label'
+
+export default {
+  title: 'Forms/RangeInput',
+  parameters: {
+    info: `
+USWDS 2.0 RangeInput component
+
+Source: https://designsystem.digital.gov/components/form-controls/#range
+`,
+  },
+}
+
+const labelChildren = (
+  <>
+    <div>
+      <span>Start:</span> <span>0</span>
+    </div>
+    <div>
+      <span>End:</span> <span>100</span>
+    </div>
+  </>
+)
+
+const labelHint = <>(drag to adjust or use arrow keys)</>
+
+export const defaultRange = (): React.ReactElement => (
+  <>
+    <Label htmlFor="range-slider" hint={labelHint}>
+      {labelChildren}
+    </Label>
+    <RangeInput id="range-slider" name="range" />
+  </>
+)
+
+export const customRange = (): React.ReactElement => (
+  <RangeInput
+    id="custom-range-slider"
+    name="rangeValue"
+    className="dark-theme"
+    min={1}
+    max={11}
+    step={2}
+    defaultValue={3}
+  />
+)
+
+// Only tick marks are shown in Chrome but not with usa-range class currently because the appearance property is set to none
+export const dataListRange = (): React.ReactElement => (
+  <>
+    <RangeInput
+      id="range-slider"
+      name="range"
+      min={0}
+      max={4}
+      defaultValue={2}
+      list="range-list-id"
+    />
+    <datalist id="range-list-id">
+      <option>0</option>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+    </datalist>
+  </>
+)

src/components/forms/RangeInput/RangeInput.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, queryByText } from '@testing-library/react'
+
+import { RangeInput } from './RangeInput'
+
+describe('RangeInput component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <RangeInput
+        id="range-slider-id"
+        name="rangeName"
+        className="additional-class"
+      />
+    )
+    const rangeElement = queryByTestId('range')
+
+    expect(rangeElement).toBeInTheDocument()
+    expect(rangeElement).toHaveAttribute('id', 'range-slider-id')
+    expect(rangeElement).toHaveAttribute('name', 'rangeName')
+    expect(rangeElement).toHaveClass('usa-range')
+    expect(rangeElement).toHaveClass('additional-class')
+  })
+
+  it('renders with custom range values', () => {
+    const { queryByTestId } = render(
+      <RangeInput
+        id="range-slider-id"
+        name="rangeName"
+        min={0}
+        max={60}
+        step={15}
+        defaultValue={45}
+      />
+    )
+    expect(queryByTestId('range')).toHaveAttribute('min', '0')
+    expect(queryByTestId('range')).toHaveAttribute('max', '60')
+    expect(queryByTestId('range')).toHaveAttribute('step', '15')
+    expect(queryByTestId('range')).toHaveAttribute('value', '45')
+  })
+
+  it('renders with step attribute set to value any', () => {
+    const { queryByTestId } = render(
+      <RangeInput id="range-slider-id" name="rangeName" step="any" />
+    )
+    expect(queryByTestId('range')).toHaveAttribute('step', 'any')
+  })
+
+  it('renders with specified datalist attribute', () => {
+    const { queryByTestId } = render(
+      <RangeInput
+        id="range-slider-id"
+        name="rangeName"
+        list="some-datalist-id"
+      />
+    )
+    expect(queryByTestId('range')).toHaveAttribute('list', 'some-datalist-id')
+  })
+
+  it('renders with attached ref', () => {
+    const rangeRef: React.RefObject<HTMLInputElement> = React.createRef()
+
+    const { queryByTestId } = render(
+      <RangeInput id="range-slider-id" name="rangeName" inputRef={rangeRef} />
+    )
+    expect(queryByTestId('range')).toEqual(rangeRef.current)
+  })
+})

src/components/forms/RangeInput/RangeInput.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface RangeInputProps {
+  id: string
+  name: string
+  inputRef?:
+    | string
+    | ((instance: HTMLInputElement | null) => void)
+    | React.RefObject<HTMLInputElement>
+    | null
+    | undefined
+}
+
+export const RangeInput = (
+  props: RangeInputProps & React.InputHTMLAttributes<HTMLInputElement>
+): React.ReactElement => {
+  // Range defaults to min = 0, max = 100, step = 1, and value = (max/2) if not specified.
+  const { className, inputRef, ...inputProps } = props
+
+  const classes = classnames('usa-range', className)
+
+  return (
+    <input
+      data-testid="range"
+      className={classes}
+      ref={inputRef}
+      type="range"
+      {...inputProps}
+    />
+  )
+}
+
+export default RangeInput

src/index.ts

@@ -25,6 +25,7 @@ export { Form } from './components/forms/Form/Form'
 export { FormGroup } from './components/forms/FormGroup/FormGroup'
 export { Label } from './components/forms/Label/Label'
 export { Radio } from './components/forms/Radio/Radio'
+export { RangeInput } from './components/forms/RangeInput/RangeInput'
 export { Textarea } from './components/forms/Textarea/Textarea'
 export { TextInput } from './components/forms/TextInput/TextInput'