Files
web/packages/design-system/lib/components/Stepper/index.tsx
Rasmus Langvad d0546926a9 Merged in fix/3697-prettier-configs (pull request #3396)
fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood
2026-01-07 12:45:50 +00:00

56 lines
1.3 KiB
TypeScript

import { IconButton } from "../IconButton"
import { Tooltip } from "../Tooltip"
import { Typography } from "../Typography"
import styles from "./stepper.module.css"
type StepperProps = {
count: number
handleOnIncrease: () => void
handleOnDecrease: () => void
disableIncrease: boolean
disableDecrease: boolean
disabledMessage?: string
}
export default function Stepper({
count,
handleOnIncrease,
handleOnDecrease,
disableIncrease,
disableDecrease,
disabledMessage,
}: StepperProps) {
return (
<div className={styles.counterContainer}>
<IconButton
className={styles.counterBtn}
onPress={handleOnDecrease}
variant="Elevated"
isDisabled={disableDecrease}
iconName="remove"
/>
<div className={styles.countDisplay}>
<Typography variant="Body/Paragraph/mdRegular">
<p>{count}</p>
</Typography>
</div>
<Tooltip
text={disabledMessage}
isVisible={Boolean(disabledMessage && disableIncrease)}
position="top"
arrow="right"
isTouchable
>
<IconButton
className={styles.counterBtn}
onPress={handleOnIncrease}
variant="Elevated"
isDisabled={disableIncrease}
iconName="add"
/>
</Tooltip>
</div>
)
}