move card and indicator into UI toolkit
This commit is contained in:
parent
9ee577c890
commit
9c3957caa3
16
libs/ui-toolkit/src/components/card/card.stories.tsx
Normal file
16
libs/ui-toolkit/src/components/card/card.stories.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||||
|
|
||||||
|
import { Card } from './card';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Card',
|
||||||
|
component: Card,
|
||||||
|
} as ComponentMeta<typeof Card>;
|
||||||
|
|
||||||
|
const Template: ComponentStory<typeof Card> = (args) => {
|
||||||
|
return <Card>Test</Card>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
Default.args = {};
|
11
libs/ui-toolkit/src/components/card/card.tsx
Normal file
11
libs/ui-toolkit/src/components/card/card.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
|
interface CardProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Card({ children }: CardProps) {
|
||||||
|
return (
|
||||||
|
<div className="px-24 py-16 pr-64 border items-center">{children}</div>
|
||||||
|
);
|
||||||
|
}
|
1
libs/ui-toolkit/src/components/card/index.tsx
Normal file
1
libs/ui-toolkit/src/components/card/index.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './card';
|
1
libs/ui-toolkit/src/components/indicator/index.tsx
Normal file
1
libs/ui-toolkit/src/components/indicator/index.tsx
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './indicator';
|
@ -0,0 +1,31 @@
|
|||||||
|
import type { Story, Meta } from '@storybook/react';
|
||||||
|
import { Indicator } from './indicator';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: Indicator,
|
||||||
|
title: 'Indicator',
|
||||||
|
} as Meta;
|
||||||
|
|
||||||
|
const Template: Story = (args) => <Indicator {...args} />;
|
||||||
|
|
||||||
|
export const Default = Template.bind({});
|
||||||
|
|
||||||
|
export const Highlight = Template.bind({});
|
||||||
|
Highlight.args = {
|
||||||
|
variant: 'highlight',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Success = Template.bind({});
|
||||||
|
Success.args = {
|
||||||
|
variant: 'success',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Warning = Template.bind({});
|
||||||
|
Warning.args = {
|
||||||
|
variant: 'warning',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Danger = Template.bind({});
|
||||||
|
Danger.args = {
|
||||||
|
variant: 'danger',
|
||||||
|
};
|
11
libs/ui-toolkit/src/components/indicator/indicator.tsx
Normal file
11
libs/ui-toolkit/src/components/indicator/indicator.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import classNames from 'classnames';
|
||||||
|
import type { Variant } from '../../utils/intent';
|
||||||
|
import { getVariantBackground } from '../../utils/intent';
|
||||||
|
|
||||||
|
export const Indicator = ({ variant }: { variant?: Variant }) => {
|
||||||
|
const names = classNames(
|
||||||
|
'inline-block w-8 h-8 mb-[0.15rem] mr-8 rounded',
|
||||||
|
getVariantBackground(variant)
|
||||||
|
);
|
||||||
|
return <div className={names} />;
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user