@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/src/lib/slider/slider.spec.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
+import { act, fireEvent, render, screen } from '@testing-library/react'
+
+import { Slider } from './slider'
+
+describe('Slider', () => {
+  it('should render', () => {
+    const { container } = render(<Slider />)
+    expect(container.querySelector('input')?.getAttribute('type')).toBe('range')
+  })
+
+  it('should render with value', () => {
+    const { container } = render(<Slider value={10} />)
+    expect(container.querySelector('input')?.getAttribute('value')).toBe('10')
+  })
+
+  it('should render with min', () => {
+    const { container } = render(<Slider min={10} />)
+    expect(container.querySelector('input')?.getAttribute('min')).toBe('10')
+  })
+
+  it('should render with max', () => {
+    const { container } = render(<Slider max={10} />)
+    expect(container.querySelector('input')?.getAttribute('max')).toBe('10')
+  })
+
+  it('should render with step', () => {
+    const { container } = render(<Slider step={10} />)
+    expect(container.querySelector('input')?.getAttribute('step')).toBe('10')
+  })
+
+  it('should render with disabled', () => {
+    const { container } = render(<Slider disabled />)
+    expect(container.querySelector('input')?.getAttribute('disabled')).toBe('')
+  })
+
+  it('should render with label', () => {
+    render(<Slider label="Test label" />)
+    expect(screen.getByText('Test label')).not.toBeNull()
+  })
+
+  it('should update value', () => {
+    const { container, rerender } = render(<Slider />)
+    const input = container.querySelector('input') as HTMLInputElement
+    act(() => {
+      rerender(<Slider value={10} />)
+    })
+    expect(input.value).toBe('10')
+  })
+
+  it('should fire onChange', () => {
+    const onChange = jest.fn()
+    const { container } = render(<Slider onChange={onChange} />)
+    const input = container.querySelector('input') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 10 } })
+    expect(onChange).toBeCalled()
+  })
+
+  it('should clamp to max value', () => {
+    const { container, rerender } = render(<Slider />)
+    const input = container.querySelector('input') as HTMLInputElement
+    act(() => {
+      rerender(<Slider value={200} />)
+    })
+    expect(input.value).toBe('100')
+  })
+
+  it('should clamp to min value', () => {
+    const { container, rerender } = render(<Slider />)
+    const input = container.querySelector('input') as HTMLInputElement
+    act(() => {
+      rerender(<Slider value={-10} />)
+    })
+    expect(input.value).toBe('0')
+  })
+
+  it('should fire onClamp', () => {
+    const onClamp = jest.fn()
+    const { rerender } = render(<Slider onClamp={onClamp} />)
+    act(() => {
+      rerender(<Slider onClamp={onClamp} value={200} />)
+    })
+    expect(onClamp).toBeCalled()
+  })
+
+  it('should emit min value when input field is set to empty', () => {
+    const onChange = jest.fn()
+    const { container } = render(
+      <Slider
+        label={'label'}
+        hasTextbox={true}
+        value={50}
+        min={10}
+        max={60}
+        onChange={onChange}
+      />,
+    )
+    const inputField = container.querySelector(
+      'input[type=text]',
+    ) as HTMLInputElement
+    fireEvent.blur(inputField, { target: { value: '' } })
+    expect(onChange).toBeCalledWith(10)
+  })
+})

package/src/lib/slider/slider.stories.tsx

@@ -0,0 +1,190 @@
+import { Slider } from './slider'
+
+const Template = (props) => <Slider {...props} />
+
+export default {
+  title: 'Components/Slider',
+  component: Slider,
+
+  argTypes: {
+    name: {
+      name: 'name',
+
+      control: {
+        type: 'text',
+      },
+    },
+
+    value: {
+      name: 'value',
+      defaultValue: 50,
+
+      control: {
+        type: 'number',
+      },
+    },
+
+    min: {
+      name: 'min',
+      defaultValue: 0,
+
+      control: {
+        type: 'number',
+      },
+    },
+
+    max: {
+      name: 'max',
+      defaultValue: 100,
+
+      control: {
+        type: 'number',
+      },
+    },
+
+    showMinMax: {
+      name: 'showMinMax',
+      defaultValue: false,
+
+      control: {
+        type: 'boolean',
+      },
+    },
+
+    step: {
+      name: 'step',
+      defaultValue: 1,
+
+      control: {
+        type: 'number',
+      },
+    },
+
+    label: {
+      name: 'label',
+      defaultValue: 'Slider label text in one line',
+
+      control: {
+        type: 'text',
+      },
+    },
+
+    instruction: {
+      name: 'instruction',
+      defaultValue: 'Element instruction',
+
+      control: {
+        type: 'text',
+      },
+    },
+
+    hasTextbox: {
+      name: 'hasTextbox',
+
+      control: {
+        type: 'boolean',
+      },
+    },
+
+    unitLabel: {
+      name: 'Unit label',
+
+      control: {
+        type: 'text',
+      },
+    },
+
+    errorMessage: {
+      name: 'errorMessage',
+
+      control: {
+        type: 'text',
+      },
+    },
+
+    disabled: {
+      name: 'disabled',
+
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Default',
+
+  args: {
+    label: 'Slider label text in one line',
+    instruction: 'Element instruction',
+    value: 0,
+  },
+}
+
+export const Textbox = {
+  render: Template.bind({}),
+  name: 'Textbox',
+
+  args: {
+    label: 'Slider label text in one line',
+    instruction: 'Element instruction',
+    value: 50,
+    hasTextbox: true,
+  },
+}
+
+export const UnitTextbox = {
+  render: Template.bind({}),
+  name: 'UnitTextbox',
+
+  args: {
+    label: 'Slider label text in one line',
+    instruction: 'Element instruction',
+    value: 50,
+    hasTextbox: true,
+    unitLabel: 'kr',
+    showMinMax: true,
+  },
+}
+
+export const Error = {
+  render: Template.bind({}),
+  name: 'Error',
+
+  args: {
+    label: 'Slider label text in one line',
+    instruction: 'Element instruction',
+    value: 50,
+    hasTextbox: true,
+    errorMessage: 'Error text can be quite long',
+  },
+}
+
+export const Disabled = {
+  render: Template.bind({}),
+  name: 'Disabled',
+
+  args: {
+    label: 'Slider label text in one line',
+    instruction: 'Element instruction',
+    value: 50,
+    hasTextbox: true,
+    disabled: true,
+  },
+}
+
+export const HighNumber = {
+  render: Template.bind({}),
+  name: 'HighNumber',
+
+  args: {
+    label: 'Slider label text in one line',
+    instruction: 'Element instruction',
+    min: 3000,
+    max: 15000,
+    value: 5000,
+    hasTextbox: true,
+  },
+}

package/src/lib/slider/slider.tsx

@@ -0,0 +1,179 @@
+import React from 'react'
+
+import {
+  getSliderTrackBackground,
+  randomId,
+  sliderColors,
+} from '@sebgroup/extract'
+import { SliderProps } from '../../types'
+
+const InputWrapper = ({
+  children,
+  unitLabel,
+}: {
+  children: React.ReactNode
+  unitLabel?: string
+}) => (
+  <>
+    {unitLabel ? (
+      <div className="group group-border group-focus">
+        {children}
+        <span className="form-text">{unitLabel}</span>
+      </div>
+    ) : (
+      children
+    )}
+  </>
+)
+
+const minMaxFormatFn = (value: number, unit?: string) => {
+  if (unit) return `${value} ${unit}`
+  return value.toString()
+}
+
+export function Slider({
+  name = `${randomId()}-slider`,
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  minMaxFormat = minMaxFormatFn,
+  showMinMax = false,
+  step = 1,
+  label,
+  instruction,
+  errorMessage,
+  hasTextbox = false,
+  unitLabel,
+  disabled = false,
+  onChange,
+  enableClamping = true,
+  onClamp,
+  enterKeyHint,
+}: SliderProps) {
+  const [background, setBackground] = React.useState<string>()
+  const [sliderValue, setSliderValue] = React.useState<number | undefined>(
+    value ?? defaultValue,
+  )
+  const [inputFieldValue, setInputFieldValue] = React.useState<string>(
+    sliderValue + '',
+  )
+
+  React.useLayoutEffect(() => {
+    if (disabled) {
+      setBackground(sliderColors.disabled)
+      return
+    }
+
+    let percent = 0
+    if (sliderValue !== undefined)
+      percent = ((sliderValue - min) / (max - min)) * 100
+
+    setBackground(getSliderTrackBackground(percent))
+  }, [disabled, sliderValue])
+
+  const clamp = (unclamped: number | undefined | string): number => {
+    if (!enableClamping) return Number(unclamped)
+
+    if (typeof unclamped === 'string') unclamped = Number(unclamped)
+    if (!unclamped || Number.isNaN(unclamped)) return min
+
+    const clamped = Math.min(Math.max(min, unclamped), max)
+    if (clamped !== unclamped && onClamp) onClamp(unclamped)
+
+    return clamped
+  }
+
+  const setNumValue = (value: number | undefined | string) => {
+    if (value === '') value = min
+    const unclamped = Number(value)
+    const clamped = clamp(unclamped)
+    setSliderValue(clamped)
+    return [unclamped, clamped]
+  }
+
+  React.useEffect(() => {
+    setNumValue(value)
+  }, [value])
+
+  const handleChange = (value: string) => {
+    const [unclamped, clamped] = setNumValue(value)
+    setInputFieldValue(unclamped + '')
+    if (onChange) onChange(clamped)
+  }
+
+  const handleInputFieldChange = (value: string, shouldClamp = false) => {
+    handleChange(value)
+    if (value === '') setInputFieldValue('')
+    else if (shouldClamp) setInputFieldValue(clamp(value) + '')
+  }
+
+  return (
+    <>
+      <div className="gds-slider-label-container">
+        <div>
+          {label && (
+            <>
+              <label htmlFor={name} id={`${name}-label`}>
+                {label}
+              </label>
+              {instruction && <p>{instruction}</p>}
+            </>
+          )}
+        </div>
+        {hasTextbox && (
+          <InputWrapper unitLabel={unitLabel}>
+            <input
+              type="text"
+              inputMode="numeric"
+              pattern="[0-9]*"
+              value={inputFieldValue}
+              id={`${name}-textbox`}
+              name={name}
+              aria-labelledby={`${name}-label`}
+              enterKeyHint={enterKeyHint}
+              className={errorMessage ? 'is-invalid' : ''}
+              disabled={disabled}
+              onChange={(e) => handleInputFieldChange(e.currentTarget.value)}
+              onKeyDown={(e) =>
+                e.key === 'Enter' &&
+                handleInputFieldChange(e.currentTarget.value, true)
+              }
+              onBlur={(e) =>
+                handleInputFieldChange(e.currentTarget.value, true)
+              }
+              min={min}
+              max={max}
+              onInvalid={(e) => {
+                e.preventDefault()
+              }}
+            />
+          </InputWrapper>
+        )}
+      </div>
+      <input
+        type="range"
+        value={sliderValue || 0}
+        id={name}
+        name={name}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        onChange={(e) => handleChange(e.currentTarget.value)}
+        style={{
+          background,
+        }}
+      />
+      {showMinMax && (
+        <div className="gds-slider-min-max">
+          <div>{minMaxFormat(min, unitLabel)}</div>
+          <div>{minMaxFormat(max, unitLabel)}</div>
+        </div>
+      )}
+      {errorMessage && <p className="gds-slider-error-info">{errorMessage}</p>}
+    </>
+  )
+}
+
+export default Slider

package/src/lib/stepper/index.tsx

@@ -0,0 +1 @@
+export * from './stepper'

package/src/lib/stepper/stepper.mdx

@@ -0,0 +1,81 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { Stepper, StepperProps } from './stepper'
+import * as StepperStories from './stepper.stories';
+
+export const Template = (props) => <Stepper {...props} />
+
+<Meta of={StepperStories} />
+
+# Stepper
+
+<Canvas of={StepperStories.Default} />
+
+A stepper makes it easier to input values that are in a narrow range.
+
+## Basic stepper
+
+Create a basic Stepper that can be placed within a form by passing a label. The component has a `form-group` wrapping to simplify form building.
+
+<Canvas of={StepperStories.BasicStepper} />
+
+The Stepper currently only works in *controlled* mode, meaning that you app needs to handle all state.
+Here's a basic example:
+
+```jsx
+const [value, setValue] = useState(0)
+
+return (
+  <Stepper
+    label="Label"
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    onIncrease={() => setValue(value + 1)}
+    onDecrease={() => setValue(value - 1)}
+  />
+)
+```
+
+## Primitive stepper
+
+By omitting `label`, `description` and `statusMessage` props we don't wrap the component in a `form-group` and you can use it more unrestricted.
+
+<Canvas of={StepperStories.PrimitiveStepper} />
+
+We can then custom build our `form-group`as needed.
+
+***If using the component in this way you have to handle rendering of error messages yourself***.
+
+<div className="form-group">
+  <label htmlFor="multiple-steppers" className="mb-5">
+    How many people will live in your new home?
+  </label>
+
+  <div id="multiple-steppers" className="horizontal">
+    <div>
+      <div>
+        <div className="form-info">Adults</div>
+
+        <Stepper />
+      </div>
+    </div>
+
+    <div>
+      <div>
+        <div className="form-info">Children under 18</div>
+
+        <Stepper />
+      </div>
+    </div>
+  </div>
+</div>
+
+
+## Validation
+
+<Canvas of={StepperStories.StepperValidation} />
+
+## Properties
+
+Note: Many of these are default HTMLInput props, and may not be relevant for this component.
+
+<Controls />

package/src/lib/stepper/stepper.spec.tsx

@@ -0,0 +1,90 @@
+import { ChangeEvent } from 'react'
+import { render, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Stepper, StepperProps } from './stepper'
+
+jest.setTimeout(50000)
+
+describe('Stepper', () => {
+  let props: StepperProps
+  beforeEach(() => {
+    props = {}
+  })
+  it('renders', () => {
+    const component = render(<Stepper {...props} />)
+    expect(component.baseElement).toBeTruthy()
+  })
+  it('sets value', () => {
+    props.value = 10
+    const component = render(<Stepper {...props} />)
+    const input = component.baseElement.getElementsByTagName('input')[0]
+    expect(input.value).toEqual('10')
+  })
+  it('renders label', async () => {
+    props.label = 'Label'
+    const { findByText } = render(<Stepper {...props} />)
+
+    expect(await findByText('Label')).toBeTruthy()
+  })
+  it('renders description', async () => {
+    props.description = 'Description'
+    const { findByText } = render(<Stepper {...props} />)
+
+    expect(await findByText('Description')).toBeTruthy()
+  })
+  it('renders status message', async () => {
+    props.validator = {
+      message: 'Status',
+      indicator: 'error',
+    }
+    const { findByText } = render(<Stepper {...props} />)
+
+    expect(await findByText('Status')).toBeTruthy()
+  })
+  describe('mouse interactions', () => {
+    const renderComponent = async (props: StepperProps = {}) => {
+      const component = render(<Stepper {...props} />)
+      const [buttonDown, buttonUp] = await component.findAllByRole('button')
+      const input = component.baseElement.getElementsByTagName(
+        'input',
+      )[0] as HTMLInputElement
+      return {
+        component,
+        buttonDown,
+        buttonUp,
+        input,
+      }
+    }
+    it('goes up', async () => {
+      const onIncrease = jest.fn()
+      const user = userEvent.setup()
+      const { buttonUp } = await renderComponent({ onIncrease })
+
+      await user.click(buttonUp)
+
+      expect(onIncrease).toHaveBeenCalledTimes(1)
+    })
+    it('goes down', async () => {
+      const onDecrease = jest.fn()
+      const user = userEvent.setup()
+      const { buttonDown } = await renderComponent({ onDecrease })
+
+      await user.click(buttonDown)
+
+      expect(onDecrease).toHaveBeenCalledTimes(1)
+    })
+    it('calls onChange', async () => {
+      const onChange = jest.fn()
+      const user = userEvent.setup()
+      const { input } = await renderComponent({
+        value: 0,
+        onChange,
+      })
+
+      await user.type(input, '1')
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/lib/stepper/stepper.stories.tsx

@@ -0,0 +1,47 @@
+import { Stepper, StepperProps } from './stepper'
+
+const Template = (props) => <Stepper {...props} />
+
+export default {
+  title: 'Components/Stepper',
+  component: Stepper,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Stepper',
+
+  parameters: {
+    componentIds: ['component-stepper'],
+  },
+
+  args: {
+    label: 'Label',
+    description: 'Label information',
+  },
+}
+
+export const BasicStepper = {
+  name: 'Basic stepper',
+
+  args: {
+    label: 'Label',
+  },
+}
+
+export const PrimitiveStepper = {
+  name: 'Primitive Stepper',
+}
+
+export const StepperValidation = {
+  name: 'Stepper validation',
+
+  args: {
+    value: 'Two',
+
+    validator: {
+      message: 'Must be a number',
+      indicator: 'error',
+    },
+  },
+}