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>
),
}