web/packages/design-system/lib/components/Stepper/index.tsx

import { useIntl } from "react-intl"
import { IconButton } from "../IconButton"
import { Tooltip } from "../Tooltip"
import { Typography } from "../Typography"

import styles from "./stepper.module.css"

type StepperProps = {
  count: number
  label: string
  ariaLabelledBy: string
  handleOnIncrease: () => void
  handleOnDecrease: () => void
  disableIncrease: boolean
  disableDecrease: boolean
  disabledMessage?: string
}

export function Stepper({
  count,
  label,
  ariaLabelledBy,
  handleOnIncrease,
  handleOnDecrease,
  disableIncrease,
  disableDecrease,
  disabledMessage,
}: StepperProps) {
  const intl = useIntl()

  return (
    <div
      role="group"
      aria-labelledby={ariaLabelledBy}
      className={styles.counterContainer}
    >
      <IconButton
        type="button"
        className={styles.counterBtn}
        onPress={handleOnDecrease}
        variant="Elevated"
        isDisabled={disableDecrease}
        iconName="remove"
        aria-label={intl.formatMessage(
          {
            id: "designSystem.stepper.ariaLabel.decrease",
            defaultMessage: "Decrease {label}",
          },
          { label }
        )}
        aria-valuetext={intl.formatMessage(
          {
            id: "designSystem.stepper.ariaLabel.currentCount",
            defaultMessage: "Current {label} {count}",
          },
          { label, count }
        )}
      />
      <Typography variant="Body/Paragraph/mdRegular">
        <span
          aria-live="polite"
          aria-atomic="true"
          className={styles.countDisplay}
        >
          {count}
        </span>
      </Typography>

      <Tooltip
        text={disabledMessage}
        isVisible={Boolean(disabledMessage && disableIncrease)}
        position="top"
        arrow="right"
        isTouchable
      >
        <IconButton
          type="button"
          className={styles.counterBtn}
          onPress={handleOnIncrease}
          variant="Elevated"
          isDisabled={disableIncrease}
          iconName="add"
          aria-label={intl.formatMessage(
            {
              id: "designSystem.stepper.ariaLabel.increase",
              defaultMessage: "Increase {label}",
            },
            { label }
          )}
          aria-valuetext={intl.formatMessage(
            {
              id: "designSystem.stepper.ariaLabel.currentCount",
              defaultMessage: "Current {label} {count}",
            },
            { label, count }
          )}
        />
      </Tooltip>
    </div>
  )
}