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

Merged in feat-StaticChip-component (pull request #3401)

Browse Source 
feat: create new StaticChip component

* feat: create new StaticChip componeny

* refactor: remove deprecated Chip

* fix: update type

* refactor: remove div


Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2026-01-09 13:55:52 +00:00
parent cd59102ef4
commit d11b50414d
13 changed files with 222 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
packages/design-system/lib/components/Chip/chip.module.css
View File

@@ -1,43 +0,0 @@
div.chip {
--chip-text-color: var(--Base-Text-High-contrast);
--chip-background-color: var(--Base-Surface-Primary-light-Normal);
align-items: center;
color: var(--chip-text-color);
background-color: var(--chip-background-color);
border-radius: var(--Corner-radius-sm);
display: flex;
gap: var(--Space-x05);
justify-content: center;
}
.chip.small {
padding: var(--Space-x025) var(--Space-x05);
}
.chip.medium {
padding: var(--Space-x05) var(--Space-x1);
}
.chip *,
.chip svg * {
fill: var(--chip-text-color);
}
.chip.burgundy {
--chip-text-color: var(--Primary-Dark-On-Surface-Text);
--chip-background-color: var(--Base-Text-High-contrast);
}
.chip.transparent {
--chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
--chip-background-color: rgba(64, 57, 55, 0.9);
}
.chip.tag {
--chip-background-color: var(--Base-Surface-Subtle-Hover);
}
.chip.uiTextHighContrast {
--chip-background-color: var(--UI-Text-High-contrast);
--chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
}

30
packages/design-system/lib/components/Chip/index.tsx
View File

@@ -1,30 +0,0 @@
import { VariantProps } from "class-variance-authority"
import { chipVariants } from "./variants"
import Footnote from "../Footnote"
export interface ChipProps
extends
React.HtmlHTMLAttributes<HTMLDivElement>,
VariantProps<typeof chipVariants> {}
/**
* @deprecated Do not use
*/
export default function Chip({
children,
className,
size,
variant,
}: ChipProps) {
const classNames = chipVariants({
className,
size,
variant,
})
return (
<Footnote asChild>
<div className={classNames}>{children}</div>
</Footnote>
)
}

23
packages/design-system/lib/components/Chip/variants.ts
View File

@@ -1,23 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./chip.module.css"
export const chipVariants = cva(styles.chip, {
variants: {
size: {
small: styles.small,
medium: styles.medium,
},
variant: {
default: styles.default,
burgundy: styles.burgundy,
transparent: styles.transparent,
tag: styles.tag,
uiTextHighContrast: styles.uiTextHighContrast,
},
},
defaultVariants: {
size: "medium",
variant: "default",
},
})

103
packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx Normal file
View File

@@ -0,0 +1,103 @@
import type { Meta, StoryObj } from "@storybook/nextjs-vite"
import { ChipStatic } from "./ChipStatic.tsx"
import { MaterialIcon } from "../Icons/MaterialIcon/MaterialIcon.tsx"
const meta: Meta<typeof ChipStatic> = {
title: "Core Components/ChipStatic",
component: ChipStatic,
}
export default meta
type Story = StoryObj<typeof ChipStatic>
export const Neutral: Story = {
render: () => (
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
<ChipStatic color="Neutral" size="xs" lowerCase>
<MaterialIcon icon="lock" />
lowerCase xs
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Neutral" size="xs">
<MaterialIcon icon="lock" />
xs
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Neutral" size="sm">
<MaterialIcon icon="lock" />
sm
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Neutral" size="lg">
<MaterialIcon icon="lock" />
lg
<MaterialIcon icon="lock" />
</ChipStatic>
</div>
),
}
export const Subtle: Story = {
render: () => (
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
<ChipStatic color="Subtle" size="xs" lowerCase>
<MaterialIcon icon="lock" />
lowerCase xs
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Subtle" size="xs">
<MaterialIcon icon="lock" />
xs
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Subtle" size="sm">
<MaterialIcon icon="lock" />
sm
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Subtle" size="lg">
<MaterialIcon icon="lock" />
lg
<MaterialIcon icon="lock" />
</ChipStatic>
</div>
),
}
export const Disabled: Story = {
render: () => (
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
<ChipStatic color="Disabled" size="xs" lowerCase>
<MaterialIcon icon="lock" />
lowerCase xs
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Disabled" size="xs">
<MaterialIcon icon="lock" />
xs
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Disabled" size="sm">
<MaterialIcon icon="lock" />
sm
<MaterialIcon icon="lock" />
</ChipStatic>
<ChipStatic color="Disabled" size="lg">
<MaterialIcon icon="lock" />
lg
<MaterialIcon icon="lock" />
</ChipStatic>
</div>
),
}

39
packages/design-system/lib/components/ChipStatic/ChipStatic.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { Typography } from "../Typography"
import { variants } from "./variants"
import type { TypographyProps } from "../Typography/types"
import type { VariantProps } from "class-variance-authority"
import type { ReactNode } from "react"
import styles from "./chip-static.module.css"
type ChipStaticProps = {
children: ReactNode
className?: string
lowerCase?: boolean
} & VariantProps<typeof variants>
export function ChipStatic({
className,
color,
size,
lowerCase = false,
children,
}: ChipStaticProps) {
const classNames = variants({ className, color, size })
const typographyVariant = getTypographyVariant(lowerCase)
return (
<Typography variant={typographyVariant}>
<span className={classNames}>{children}</span>
</Typography>
)
}
function getTypographyVariant(lowerCase: boolean): TypographyProps["variant"] {
if (lowerCase) {
return "Body/Supporting text (caption)/smRegular"
}
return "Tag/sm"
}

35
packages/design-system/lib/components/ChipStatic/chip-static.module.css Normal file
View File

@@ -0,0 +1,35 @@
.chip {
border-radius: var(--Corner-radius-sm);
padding: 0 var(--Space-x1);
display: inline-flex;
align-items: center;
gap: var(--Space-x05);
}
.size-xs {
height: 24px;
}
.size-sm {
height: 26px;
}
.size-lg {
height: 32px;
}
.color-subtle {
background-color: var(--Surface-Secondary-Subtle);
color: var(--Text-Interactive-Default);
}
.color-disabled {
background-color: var(--Surface-UI-Fill-Disabled);
border: 1px solid var(--Border-Interactive-Disabled);
color: var(--Text-Interactive-Disabled);
}
.color-neutral {
background-color: var(--Surface-Primary-Default);
color: var(--Text-Interactive-Default);
}

1
packages/design-system/lib/components/ChipStatic/index.tsx Normal file
View File

@@ -0,0 +1 @@
export { ChipStatic } from "./ChipStatic"

24
packages/design-system/lib/components/ChipStatic/variants.ts Normal file
View File

@@ -0,0 +1,24 @@
import { cva } from 'class-variance-authority'
import styles from './chip-static.module.css'
export const config = {
variants: {
color: {
Subtle: styles['color-subtle'],
Disabled: styles['color-disabled'],
Neutral: styles['color-neutral'],
},
size: {
xs: styles['size-xs'],
sm: styles['size-sm'],
lg: styles['size-lg'],
},
},
defaultVariants: {
color: 'Neutral',
size: 'sm',
},
} as const
export const variants = cva(styles.chip, config)

2
packages/design-system/package.json
View File

@@ -16,10 +16,10 @@
"./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
"./Caption": "./lib/components/Caption/index.tsx",
"./Card": "./lib/components/Card/index.tsx",
"./Chip": "./lib/components/Chip/index.tsx",
"./ChipButton": "./lib/components/ChipButton/index.tsx",
"./ChipLink": "./lib/components/ChipLink/index.tsx",
"./Chips": "./lib/components/Chips/index.tsx",
"./ChipStatic": "./lib/components/ChipStatic/index.tsx",
"./CodeRateCard": "./lib/components/RateCard/Code/index.tsx",
"./DeprecatedSelect": "./lib/components/DeprecatedSelect/index.tsx",
"./Divider": "./lib/components/Divider/index.tsx",