Skip to content
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

feat: Badge 컴포넌트 구현 #18

Merged
merged 2 commits into from
Jan 27, 2024
Merged

feat: Badge 컴포넌트 구현 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa81883
feat: 뱃지에 필요한 색상 팔레트 값 추가
alstn2468 Jan 27, 2024
60fbb04
feat: 뱃지 컴포넌트 추가
alstn2468 Jan 27, 2024
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
23 changes: 16 additions & 7 deletions apps/preview/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, TextButton, ThemeProvider } from '@boolti/ui';
import { Badge, Button, TextButton, ThemeProvider } from '@boolti/ui';

const Icon = () => (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -184,12 +184,21 @@ const App = () => {
BUTTON
</Button>
</div>
<TextButton>TEXT BUTTON</TextButton>
<TextButton icon={<Icon />}>TEXT BUTTON</TextButton>
<TextButton disabled>TEXT BUTTON</TextButton>
<TextButton icon={<Icon />} disabled>
TEXT BUTTON
</TextButton>
<div style={{ marginBottom: 20 }}>
<TextButton>TEXT BUTTON</TextButton>
<TextButton icon={<Icon />}>TEXT BUTTON</TextButton>
<TextButton disabled>TEXT BUTTON</TextButton>
<TextButton icon={<Icon />} disabled>
TEXT BUTTON
</TextButton>
</div>
<div style={{ display: 'flex', width: 600, justifyContent: 'space-between' }}>
<Badge colorTheme="purple">티켓 판매 오픈 D-n</Badge>
<Badge colorTheme="blue">티켓 판매 중</Badge>
<Badge colorTheme="green">티켓 판매 종료</Badge>
<Badge colorTheme="red">공연 당일</Badge>
<Badge colorTheme="grey">공연 종료</Badge>
</div>
</h1>
</ThemeProvider>
);
Expand Down
26 changes: 26 additions & 0 deletions packages/ui/src/components/Badge/Badge.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import styled from '@emotion/styled';

type colorTheme = 'purple' | 'blue' | 'green' | 'red' | 'grey';

export interface BadgeProps {
colorTheme: colorTheme;
}

const Container = styled.span<BadgeProps>`
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 24px;
padding: 3px 8px;
${({ theme }) => theme.typo.b1};
${({ colorTheme, theme }) => {
return `
color: ${theme.palette[colorTheme].main};
background-color: ${theme.palette[colorTheme].sub};
`;
}}
`;

export default {
Container,
};
7 changes: 7 additions & 0 deletions packages/ui/src/components/Badge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import Styled, { BadgeProps } from './Badge.style';

const Badge = ({ colorTheme, children }: React.PropsWithChildren<BadgeProps>) => {
return <Styled.Container colorTheme={colorTheme}>{children}</Styled.Container>;
};

export default Badge;
3 changes: 2 additions & 1 deletion packages/ui/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import ThemeProvider from './ThemeProvider';
import Button from './Button';
import TextButton from './TextButton';
import Badge from './Badge';

export { ThemeProvider, Button, TextButton };
export { ThemeProvider, Button, TextButton, Badge };
18 changes: 18 additions & 0 deletions packages/ui/src/systems/palette.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,25 @@ const palette = {
success: '#52C41A',
link: '#1890FF',
},
purple: {
main: '#B150FF',
sub: '#E6C8FE',
},
blue: {
main: '#2B7BE9',
sub: '#C8E7FE',
},
green: {
main: '#52C41A',
sub: '#CCF3BA',
},
red: {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

red, green, grey 같은 경우에는 기존에 status 같은 곳에 들어가 있는 색상이 있지만 개발 편의를 위해 main, sub에도 추가하였음

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오키

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혜선, 보영이한테도 피그마로 공유해뒀어!

main: '#FF5A14',
sub: '#FFCFBA',
},
grey: {
main: '#87909B',
sub: '#EAECEF',
w: '#FFFFFF',
g00: '#F8F9FA',
g10: '#F2F3F5',
Expand Down
Loading