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

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)