scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in refactor-tripadvisor-chip (pull request #3404)

Browse Source 
Refactor TripadvisorChip

* feat: create new StaticChip componeny

* refactor tripadvisor chip to use ChipStatic

* refactor: use TripadvisorChip everywhere

* fix: use withChipStatic


Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2026-01-23 12:19:37 +00:00
parent 5171d2d4d7
commit ae77fa3028
18 changed files with 129 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx
View File

@@ -16,27 +16,27 @@ export const Neutral: Story = {
render: () => (
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
<ChipStatic color="Neutral" size="xs" lowerCase>
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
lowerCase xs
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Neutral" size="xs">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
xs
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Neutral" size="sm">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
sm
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Neutral" size="lg">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={20} />
lg
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={20} />
</ChipStatic>
</div>
),
@@ -46,27 +46,27 @@ export const Subtle: Story = {
render: () => (
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
<ChipStatic color="Subtle" size="xs" lowerCase>
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
lowerCase xs
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Subtle" size="xs">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
xs
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Subtle" size="sm">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
sm
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Subtle" size="lg">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={20} />
lg
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={20} />
</ChipStatic>
</div>
),
@@ -76,27 +76,27 @@ export const Disabled: Story = {
render: () => (
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
<ChipStatic color="Disabled" size="xs" lowerCase>
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
lowerCase xs
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Disabled" size="xs">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
xs
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Disabled" size="sm">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
sm
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={16} />
</ChipStatic>
<ChipStatic color="Disabled" size="lg">
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={20} />
lg
<MaterialIcon icon="lock" />
<MaterialIcon icon="lock" size={20} />
</ChipStatic>
</div>
),

2
packages/design-system/lib/components/ChipStatic/index.tsx
View File

@@ -1 +1,3 @@
export { ChipStatic } from "./ChipStatic"
// eslint-disable-next-line react-refresh/only-export-components
export { variants as chipStaticVariants, withChipStatic } from "./variants"

15
packages/design-system/lib/components/ChipStatic/variants.ts
View File

@@ -2,6 +2,8 @@ import { cva } from "class-variance-authority"
import styles from "./chip-static.module.css"
import { deepmerge } from "deepmerge-ts"
const config = {
variants: {
color: {
@@ -22,3 +24,16 @@ const config = {
} as const
export const variants = cva(styles.chip, config)
const chipConfig = {
variants: {
...config.variants,
},
defaultVariants: {
...config.defaultVariants,
},
} as const
export function withChipStatic<T>(config: T) {
return deepmerge(chipConfig, config)
}