ae77fa3028
Refactor TripadvisorChip * feat: create new StaticChip componeny * refactor tripadvisor chip to use ChipStatic * refactor: use TripadvisorChip everywhere * fix: use withChipStatic Approved-by: Erik Tiekstra
104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/nextjs-vite"
|
|
|
|
import { ChipStatic } from "./ChipStatic.tsx"
|
|
import { MaterialIcon } from "../Icons/MaterialIcon/index.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" size={16} />
|
|
lowerCase xs
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Neutral" size="xs">
|
|
<MaterialIcon icon="lock" size={16} />
|
|
xs
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Neutral" size="sm">
|
|
<MaterialIcon icon="lock" size={16} />
|
|
sm
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Neutral" size="lg">
|
|
<MaterialIcon icon="lock" size={20} />
|
|
lg
|
|
<MaterialIcon icon="lock" size={20} />
|
|
</ChipStatic>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const Subtle: Story = {
|
|
render: () => (
|
|
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
|
|
<ChipStatic color="Subtle" size="xs" lowerCase>
|
|
<MaterialIcon icon="lock" size={16} />
|
|
lowerCase xs
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Subtle" size="xs">
|
|
<MaterialIcon icon="lock" size={16} />
|
|
xs
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Subtle" size="sm">
|
|
<MaterialIcon icon="lock" size={16} />
|
|
sm
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Subtle" size="lg">
|
|
<MaterialIcon icon="lock" size={20} />
|
|
lg
|
|
<MaterialIcon icon="lock" size={20} />
|
|
</ChipStatic>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
render: () => (
|
|
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
|
|
<ChipStatic color="Disabled" size="xs" lowerCase>
|
|
<MaterialIcon icon="lock" size={16} />
|
|
lowerCase xs
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Disabled" size="xs">
|
|
<MaterialIcon icon="lock" size={16} />
|
|
xs
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Disabled" size="sm">
|
|
<MaterialIcon icon="lock" size={16} />
|
|
sm
|
|
<MaterialIcon icon="lock" size={16} />
|
|
</ChipStatic>
|
|
|
|
<ChipStatic color="Disabled" size="lg">
|
|
<MaterialIcon icon="lock" size={20} />
|
|
lg
|
|
<MaterialIcon icon="lock" size={20} />
|
|
</ChipStatic>
|
|
</div>
|
|
),
|
|
}
|