3f632e6031
fix(BOOK-293): changed variants and props on IconButton component * fix(BOOK-293): changed variants and props on IconButton component * fix(BOOK-293): inherit color for icon Approved-by: Bianca Widstam Approved-by: Christel Westerberg
56 lines
1.3 KiB
TypeScript
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>
|
|
)
|
|
}
|