Skip to content

82 designtoken #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dyeon-dev merged 4 commits into from
Jan 29, 2025
Merged

82 designtoken #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
07deb38
style: colors
dyeon-dev Jan 28, 2025
94d65a9
style: sementic colors
dyeon-dev Jan 28, 2025
fcf2ee0
style: typography
dyeon-dev Jan 28, 2025
427c8e8
style: grid
dyeon-dev Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions src/stories/Avatar.stories.tsx → src/stories/Atoms/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { Avatar } from '../components/Avatar/Avatar';
import { Avatar } from '../../components/Avatar/Avatar';

const meta: Meta<typeof Avatar> = {
title: 'Design System/Avatar',
Expand Down Expand Up @@ -36,12 +36,7 @@ export const Sizes: Story = {
export const Circle: Story = {
render: () => (
<>
<Avatar
size="medium"
username="Da Yeon"
src="https://avatars.githubusercontent.com/u/93921784?v=4"
selected={true}
/>
<Avatar size="medium" username="Da Yeon" src="https://avatars.githubusercontent.com/u/93921784?v=4" selected={true} />
</>
),
};
8 changes: 4 additions & 4 deletions src/stories/AvatarList.stories.tsx → src/stories/Atoms/AvatarList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Meta, StoryFn } from '@storybook/react';

import { AvatarList, AvatarListProps } from '../components/AvatarList/AvatarList';
import { AvatarList, AvatarListProps } from '../../components/AvatarList/AvatarList';

export default {
title: 'Design System/AvatarList',
Expand Down Expand Up @@ -44,11 +44,11 @@ Ellipsized.args = {

export const BigUserCount = Template.bind({});
BigUserCount.args = {
users: Ellipsized.args.users as AvatarListProps['users'],
userCount: 100,
users: Ellipsized.args.users as AvatarListProps['users'],
userCount: 100,
};

export const Empty = Template.bind({});
Empty.args = {
users: [],
};
};
8 changes: 4 additions & 4 deletions src/stories/Badge.stories.tsx → src/stories/Atoms/Badge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { containerStyle, informationStyle } from './styles';
import Badge from '../components/Badge/Badge';
import Badge from '../../components/Badge/Badge';
import type { Meta, StoryObj } from '@storybook/react';

const meta = {
Expand Down Expand Up @@ -36,7 +36,7 @@ type Story = StoryObj<typeof meta>;
export const Playground: Story = {};

export const Variants: Story = {
render: ({children}) => (
render: ({ children }) => (
<ul css={containerStyle}>
<li css={informationStyle}>
<h6>keyword</h6>
Expand Down Expand Up @@ -65,13 +65,13 @@ export const Sizes: Story = {
<ul css={containerStyle}>
<li css={informationStyle}>
<h6>Small</h6>
<Badge variant={variant} size='small'>
<Badge variant={variant} size="small">
{children}
</Badge>
</li>
<li css={informationStyle}>
<h6>Large</h6>
<Badge variant={variant} size='large'>
<Badge variant={variant} size="large">
{children}
</Badge>
</li>
Expand Down
47 changes: 23 additions & 24 deletions src/stories/Body.stories.tsx → src/stories/Atoms/Body.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { containerStyle, informationStyle } from '@stories/styles';
import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
import type { Meta, StoryObj } from '@storybook/react';

import type { BodyProps } from '../components/Body/Body';
import Body from '../components/Body/Body';
import type { BodyProps } from '../../components/Body/Body';
import Body from '../../components/Body/Body';

const meta = {
title: 'Design System/Body',
Expand Down Expand Up @@ -47,37 +47,36 @@ export const Playground: Story = {};

export const Sizes: Story = {
render: ({ children }) => (
<>
<li css={informationStyle}>
<h6>Small</h6>
<Body size="small">{children}</Body>
</li>
<li css={informationStyle}>
<h6>Medium</h6>
<Body size="medium">{children}</Body>
</li>
<li css={informationStyle}>
<h6>Large</h6>
<Body size="large">{children}</Body>
</li>
<li css={informationStyle}>
<h6>X Large</h6>
<Body size="xLarge">{children}</Body>
</li>
</>
),
<>
<li css={informationStyle}>
<h6>Small</h6>
<Body size="small">{children}</Body>
</li>
<li css={informationStyle}>
<h6>Medium</h6>
<Body size="medium">{children}</Body>
</li>
<li css={informationStyle}>
<h6>Large</h6>
<Body size="large">{children}</Body>
</li>
<li css={informationStyle}>
<h6>X Large</h6>
<Body size="xLarge">{children}</Body>
</li>
</>
),
argTypes: {
size: {
control: false,
},
},
};


export const Small: Story = createBodyStory('small') as Story;

export const Medium: Story = createBodyStory('medium') as Story;

export const Large: Story = createBodyStory('large') as Story;

export const XLarge: Story = createBodyStory('xLarge') as Story;;
export const XLarge: Story = createBodyStory('xLarge') as Story;
16 changes: 8 additions & 8 deletions src/stories/Button.stories.tsx → src/stories/Atoms/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { containerStyle, informationStyle } from '../stories/styles';
import { containerStyle, informationStyle } from './styles';
import type { Meta, StoryObj } from '@storybook/react';

import type { ButtonProps } from '../components/Button/Button';
import Button from '../components/Button/Button';
import type { ButtonProps } from '../../components/Button/Button';
import Button from '../../components/Button/Button';

const meta = {
title: 'Design System/Button',
Expand Down Expand Up @@ -52,13 +52,13 @@ export const Variants: Story = {
<ul css={containerStyle}>
<li css={informationStyle}>
<h6>Primary</h6>
<Button variant='primary' size={size} disabled={disabled}>
<Button variant="primary" size={size} disabled={disabled}>
{children}
</Button>
</li>
<li css={informationStyle}>
<h6>Secondary</h6>
<Button variant='secondary' size={size} disabled={disabled}>
<Button variant="secondary" size={size} disabled={disabled}>
{children}
</Button>
</li>
Expand All @@ -76,19 +76,19 @@ export const Sizes: Story = {
<ul css={containerStyle}>
<li css={informationStyle}>
<h6>Small</h6>
<Button variant={variant} size='small' disabled={disabled}>
<Button variant={variant} size="small" disabled={disabled}>
{children}
</Button>
</li>
<li css={informationStyle}>
<h6>Medium</h6>
<Button variant={variant} size='medium' disabled={disabled}>
<Button variant={variant} size="medium" disabled={disabled}>
{children}
</Button>
</li>
<li css={informationStyle}>
<h6>Large</h6>
<Button variant={variant} size='large' disabled={disabled}>
<Button variant={variant} size="large" disabled={disabled}>
{children}
</Button>
</li>
Expand Down
57 changes: 57 additions & 0 deletions src/stories/Atoms/Checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
import type { Meta, StoryObj } from '@storybook/react';

import Checkbox from '../../components/Checkbox/Checkbox';

const meta = {
title: 'Design System/Checkbox',
component: Checkbox,
argTypes: {
checked: {
control: { type: 'boolean' },
},
label: {
control: { type: 'text' },
},
},
args: {
checked: true,
label: 'Label',
},
} satisfies Meta<typeof Checkbox>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Playground: Story = {};

export const Checkboxes: Story = {
render: () => (
<ul css={containerStyle}>
<li css={informationStyle}>
<h6>Checked</h6>
<Checkbox isChecked />
</li>
<li css={informationStyle}>
<h6>Unchecked</h6>
<Checkbox />
</li>
<li css={informationStyle}>
<h6>Checked with Label</h6>
<Checkbox checked label="Label" isChecked />
</li>
<li css={informationStyle}>
<h6>Unchecked with Label</h6>
<Checkbox label="Label" />
</li>
</ul>
),
argTypes: {
checked: {
control: false,
},
label: {
control: false,
},
},
};
55 changes: 27 additions & 28 deletions src/stories/Heading.stories.tsx → src/stories/Atoms/Heading.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { containerStyle, informationStyle } from '@stories/styles';
import { containerStyle, informationStyle } from '@/stories/Atoms/styles';
import type { Meta, StoryObj } from '@storybook/react';
import type { HeadingProps } from '../components/Heading/Heading';
import Heading from '../components/Heading/Heading';
import type { HeadingProps } from '../../components/Heading/Heading';
import Heading from '../../components/Heading/Heading';

const meta = {
title: 'Design System/Heading',
Expand Down Expand Up @@ -46,43 +46,42 @@ export const Playground: Story = {};

export const Sizes: Story = {
render: ({ children }) => (
<>
<li css={informationStyle}>
<h6>Small</h6>
<Heading size="small">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>Medium</h6>
<Heading size="medium">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>Large</h6>
<Heading size="large">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>X Large</h6>
<Heading size="xLarge">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>XX Large</h6>
<Heading size="xxLarge">{children}</Heading>
</li>
</>
),
<>
<li css={informationStyle}>
<h6>Small</h6>
<Heading size="small">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>Medium</h6>
<Heading size="medium">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>Large</h6>
<Heading size="large">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>X Large</h6>
<Heading size="xLarge">{children}</Heading>
</li>
<li css={informationStyle}>
<h6>XX Large</h6>
<Heading size="xxLarge">{children}</Heading>
</li>
</>
),
argTypes: {
size: {
control: false,
},
},
};


export const Small: Story = createHeadingStory('small') as Story;

export const Medium: Story = createHeadingStory('medium') as Story;

export const Large: Story = createHeadingStory('large') as Story;

export const XLarge: Story = createHeadingStory('xLarge') as Story;;
export const XLarge: Story = createHeadingStory('xLarge') as Story;

export const XXLarge: Story = createHeadingStory('xxLarge') as Story;
Loading
Loading