120 lines
2.8 KiB
TypeScript
120 lines
2.8 KiB
TypeScript
import { cva } from 'class-variance-authority'
|
|
|
|
import { deepmerge } from 'deepmerge-ts'
|
|
import styles from './chip-button.module.css'
|
|
import { config as typographyConfig } from '../Typography/variants'
|
|
|
|
const variantKeys = {
|
|
variant: {
|
|
Default: 'Default',
|
|
Outlined: 'Outlined',
|
|
FilterRounded: 'FilterRounded',
|
|
},
|
|
style: {
|
|
Medium: 'Medium',
|
|
Large: 'Large',
|
|
},
|
|
typography: {
|
|
Bold: 'Body/Supporting text (caption)/smBold',
|
|
Regular: 'Body/Supporting text (caption)/smRegular',
|
|
},
|
|
} as const
|
|
|
|
export const config = {
|
|
variants: {
|
|
variant: {
|
|
[variantKeys.variant.Default]: styles.Default,
|
|
[variantKeys.variant.Outlined]: styles.Outlined,
|
|
[variantKeys.variant.FilterRounded]: styles.FilterRounded,
|
|
},
|
|
selected: {
|
|
true: '',
|
|
false: '',
|
|
},
|
|
size: {
|
|
[variantKeys.style.Medium]: '',
|
|
[variantKeys.style.Large]: '',
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
variant: variantKeys.variant.Default,
|
|
className: [
|
|
typographyConfig.variants.variant[
|
|
'Body/Supporting text (caption)/smBold'
|
|
],
|
|
],
|
|
},
|
|
{
|
|
variant: variantKeys.variant.Outlined,
|
|
className: [
|
|
typographyConfig.variants.variant[
|
|
'Body/Supporting text (caption)/smBold'
|
|
],
|
|
],
|
|
},
|
|
{
|
|
variant: variantKeys.variant.FilterRounded,
|
|
size: variantKeys.style.Medium,
|
|
selected: true,
|
|
className: [
|
|
typographyConfig.variants.variant[
|
|
'Body/Supporting text (caption)/smRegular'
|
|
],
|
|
styles.selected,
|
|
styles.medium,
|
|
],
|
|
},
|
|
{
|
|
variant: variantKeys.variant.FilterRounded,
|
|
size: variantKeys.style.Medium,
|
|
selected: false,
|
|
className: [
|
|
typographyConfig.variants.variant[
|
|
'Body/Supporting text (caption)/smRegular'
|
|
],
|
|
styles.medium,
|
|
],
|
|
},
|
|
{
|
|
variant: variantKeys.variant.FilterRounded,
|
|
size: variantKeys.style.Large,
|
|
selected: true,
|
|
className: [
|
|
typographyConfig.variants.variant[
|
|
'Body/Supporting text (caption)/smRegular'
|
|
],
|
|
styles.selected,
|
|
styles.large,
|
|
],
|
|
},
|
|
{
|
|
variant: variantKeys.variant.FilterRounded,
|
|
size: variantKeys.style.Large,
|
|
selected: false,
|
|
className: [
|
|
typographyConfig.variants.variant[
|
|
'Body/Supporting text (caption)/smRegular'
|
|
],
|
|
styles.large,
|
|
],
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
variant: variantKeys.variant.Default,
|
|
},
|
|
}
|
|
|
|
export const variants = cva(styles.chip, config)
|
|
|
|
const chipConfig = {
|
|
variants: {
|
|
...config.variants,
|
|
},
|
|
defaultVariants: config.defaultVariants,
|
|
} as const
|
|
|
|
export function withChipButton<T>(config: T) {
|
|
return deepmerge(chipConfig, config)
|
|
}
|