8b32abbefc
* fix(SW-1563): Added new IconButton component to the design system and removed Icon variant inside the Button component * fix(SW-1563): Added buttons around clickable images and changed to design system components * fix(SW-1563): Renamed variants to match Figma * fix(SW-1563): Renamed AriaButton to ButtonRAC Approved-by: Michael Zetterberg Approved-by: Matilda Landström
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { cva } from 'class-variance-authority'
|
|
|
|
import styles from './iconButton.module.css'
|
|
|
|
const variantKeys = {
|
|
theme: {
|
|
Primary: 'Primary',
|
|
Tertiary: 'Tertiary',
|
|
Inverted: 'Inverted',
|
|
Black: 'Black',
|
|
},
|
|
style: {
|
|
Normal: 'Normal',
|
|
Muted: 'Muted',
|
|
Elevated: 'Elevated',
|
|
Faded: 'Faded',
|
|
},
|
|
} as const
|
|
|
|
export const config = {
|
|
variants: {
|
|
theme: {
|
|
[variantKeys.theme.Primary]: styles['theme-primary'],
|
|
[variantKeys.theme.Tertiary]: styles['theme-tertiary'],
|
|
[variantKeys.theme.Inverted]: styles['theme-inverted'],
|
|
[variantKeys.theme.Black]: styles['theme-black'],
|
|
},
|
|
// Some variants cannot be used in combination with certain style variants.
|
|
// The style variant will be applied using the compoundVariants.
|
|
style: {
|
|
[variantKeys.style.Normal]: '',
|
|
[variantKeys.style.Muted]: '',
|
|
[variantKeys.style.Elevated]: '',
|
|
[variantKeys.style.Faded]: '',
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
// Primary should only use Normal
|
|
{ theme: variantKeys.theme.Primary, className: styles['style-normal'] },
|
|
|
|
// Tertiary should only use Elevated
|
|
{
|
|
theme: variantKeys.theme.Tertiary,
|
|
className: styles['style-elevated'],
|
|
},
|
|
|
|
// Black should only use Muted
|
|
{ theme: variantKeys.theme.Black, className: styles['style-muted'] },
|
|
|
|
// Inverted can use any style variant
|
|
{
|
|
theme: variantKeys.theme.Inverted,
|
|
style: variantKeys.style.Normal,
|
|
className: styles['style-normal'],
|
|
},
|
|
{
|
|
theme: variantKeys.theme.Inverted,
|
|
style: variantKeys.style.Muted,
|
|
className: styles['style-muted'],
|
|
},
|
|
{
|
|
theme: variantKeys.theme.Inverted,
|
|
style: variantKeys.style.Elevated,
|
|
className: styles['style-elevated'],
|
|
},
|
|
{
|
|
theme: variantKeys.theme.Inverted,
|
|
style: variantKeys.style.Faded,
|
|
className: styles['style-faded'],
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
theme: variantKeys.theme.Primary,
|
|
style: variantKeys.style.Normal,
|
|
},
|
|
}
|
|
|
|
export const variants = cva(styles.iconButton, config)
|