@team-monolith/cds 0.4.0 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/dist/index.d.ts +2 -0
  2. package/dist/index.js +2 -0
  3. package/package.json +5 -1
  4. package/public/favicon.ico +0 -0
  5. package/public/index.html +0 -43
  6. package/public/logo192.png +0 -0
  7. package/public/logo512.png +0 -0
  8. package/public/manifest.json +0 -25
  9. package/public/robots.txt +0 -3
  10. package/src/App.tsx +0 -7
  11. package/src/cds/CodleDesignSystemProvider.tsx +0 -93
  12. package/src/cds/README.md +0 -23
  13. package/src/cds/components/AlertDialog/AlertDialog.tsx +0 -101
  14. package/src/cds/components/AlertDialog/AlertDialogActions.tsx +0 -34
  15. package/src/cds/components/AlertDialog/AlertDialogContent.tsx +0 -36
  16. package/src/cds/components/AlertDialog/AlertDialogTitle.tsx +0 -63
  17. package/src/cds/components/AlertDialog/index.tsx +0 -4
  18. package/src/cds/components/Banner.tsx +0 -176
  19. package/src/cds/components/Button.tsx +0 -256
  20. package/src/cds/components/CheckboxInput.tsx +0 -270
  21. package/src/cds/components/Input.tsx +0 -171
  22. package/src/cds/components/InputBase.tsx +0 -226
  23. package/src/cds/components/Pagination.tsx +0 -99
  24. package/src/cds/components/PinInput.tsx +0 -322
  25. package/src/cds/components/RadioInput.tsx +0 -226
  26. package/src/cds/components/SquareButton.tsx +0 -229
  27. package/src/cds/components/Switch.tsx +0 -129
  28. package/src/cds/components/Tag.tsx +0 -155
  29. package/src/cds/components/Tooltip.tsx +0 -104
  30. package/src/cds/foundation/color.ts +0 -83
  31. package/src/cds/foundation/shadows.ts +0 -17
  32. package/src/cds/icons/Arrows/index.ts +0 -2
  33. package/src/cds/icons/Media/index.ts +0 -2
  34. package/src/cds/icons/System/index.ts +0 -2
  35. package/src/cds/icons/arrows.tsx +0 -116
  36. package/src/cds/icons/brand.tsx +0 -13
  37. package/src/cds/icons/design.tsx +0 -15
  38. package/src/cds/icons/map.tsx +0 -14
  39. package/src/cds/icons/system.tsx +0 -143
  40. package/src/cds/index.ts +0 -64
  41. package/src/cds/patterns/Card/Card.tsx +0 -294
  42. package/src/cds/patterns/Card/class-icon.svg +0 -28
  43. package/src/cds/patterns/Card/index.tsx +0 -2
  44. package/src/cds/patterns/Card/material-icon.svg +0 -25
  45. package/src/cds/patterns/Card/problem-icon.svg +0 -25
  46. package/src/cds/patterns/Card/thumbnail/sample.png +0 -0
  47. package/src/cds/patterns/Dialog/Dialog.tsx +0 -57
  48. package/src/cds/patterns/Dialog/DialogContent.tsx +0 -28
  49. package/src/cds/patterns/Dialog/DialogNavigation.tsx +0 -29
  50. package/src/cds/patterns/Dialog/DialogNavigationContext.tsx +0 -9
  51. package/src/cds/patterns/Dialog/DialogNavigationItem.tsx +0 -42
  52. package/src/cds/patterns/Dialog/DialogPanel.tsx +0 -40
  53. package/src/cds/patterns/Dialog/DialogPanels.tsx +0 -24
  54. package/src/cds/patterns/Dialog/DialogPanelsContext.tsx +0 -9
  55. package/src/cds/patterns/Dialog/DialogTitle.tsx +0 -55
  56. package/src/cds/patterns/Dialog/index.tsx +0 -7
  57. package/src/cds/patterns/Dropdown/Dropdown.tsx +0 -111
  58. package/src/cds/patterns/Dropdown/DropdownItem.tsx +0 -203
  59. package/src/cds/patterns/Dropdown/DropdownMenu.tsx +0 -176
  60. package/src/cds/patterns/Dropdown/index.tsx +0 -2
  61. package/src/cds/patterns/EmptyState/EmptyState.tsx +0 -91
  62. package/src/cds/patterns/EmptyState/empty-state-icon.svg +0 -36
  63. package/src/cds/patterns/EmptyState/index.tsx +0 -2
  64. package/src/cds/patterns/Navigation/NavigationContext.tsx +0 -9
  65. package/src/cds/patterns/Navigation/NavigationHorizontal.tsx +0 -32
  66. package/src/cds/patterns/Navigation/NavigationItem.tsx +0 -36
  67. package/src/cds/patterns/Navigation/NavigationVertical.tsx +0 -39
  68. package/src/cds/patterns/Navigation/index.tsx +0 -3
  69. package/src/cds/patterns/SegmentedControl/SegmentedControlButton.tsx +0 -55
  70. package/src/cds/patterns/SegmentedControl/SegmentedControlGroup.tsx +0 -81
  71. package/src/cds/patterns/SegmentedControl/SegmentedControlGroupPropsContext.tsx +0 -9
  72. package/src/cds/patterns/SegmentedControl/SegmentedControlSquareButton.tsx +0 -51
  73. package/src/cds/patterns/SegmentedControl/index.ts +0 -3
  74. package/src/cds/patterns/Table/Table.tsx +0 -62
  75. package/src/cds/patterns/Table/TableBody.tsx +0 -30
  76. package/src/cds/patterns/Table/TableCell.tsx +0 -253
  77. package/src/cds/patterns/Table/TableHead.tsx +0 -30
  78. package/src/cds/patterns/Table/TablePropsContext.tsx +0 -9
  79. package/src/cds/patterns/Table/TableRow.tsx +0 -70
  80. package/src/cds/patterns/Table/TableVariantContext.tsx +0 -9
  81. package/src/cds/patterns/Table/index.tsx +0 -15
  82. package/src/cds/utils/hover.tsx +0 -24
  83. package/src/cds/utils/reset.tsx +0 -19
  84. package/src/cds/utils/zIndex.tsx +0 -3
  85. package/src/index.tsx +0 -10
  86. package/tsconfig.json +0 -22
  87. /package/{src/cds → @types}/emotion.d.ts +0 -0
  88. /package/{src/cds → @types}/svg.d.ts +0 -0
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference path="../@types/svg.d.ts" />
2
+ /// <reference path="../@types/emotion.d.ts" />
1
3
  export * from "./components/AlertDialog";
2
4
  export { default as Banner } from "./components/Banner";
3
5
  export * from "./components/Banner";
package/dist/index.js CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference path="../../@types/svg.d.ts" />
2
+ /// <reference path="../../@types/emotion.d.ts" />
1
3
  export * from "./components/AlertDialog";
2
4
  export { default as Banner } from "./components/Banner";
3
5
  export * from "./components/Banner";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "0.4.0",
3
+ "version": "0.4.3",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "dependencies": {
@@ -15,6 +15,10 @@
15
15
  "remixicon": "^3.4.0",
16
16
  "typescript": "^4.5.5"
17
17
  },
18
+ "files": [
19
+ "dist/**/*",
20
+ "@types/**/*"
21
+ ],
18
22
  "scripts": {
19
23
  "clean": "rimraf dist",
20
24
  "compile": "npm run clean && mkdir dist && tsc && npm run postbundle",
package/public/favicon.ico DELETED
Binary file
package/public/index.html DELETED
@@ -1,43 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="theme-color" content="#000000" />
8
- <meta
9
- name="description"
10
- content="Web site created using create-react-app"
11
- />
12
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13
- <!--
14
- manifest.json provides metadata used when your web app is installed on a
15
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16
- -->
17
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18
- <!--
19
- Notice the use of %PUBLIC_URL% in the tags above.
20
- It will be replaced with the URL of the `public` folder during the build.
21
- Only files inside the `public` folder can be referenced from the HTML.
22
-
23
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24
- work correctly both with client-side routing and a non-root public URL.
25
- Learn how to configure a non-root public URL by running `npm run build`.
26
- -->
27
- <title>React App</title>
28
- </head>
29
- <body>
30
- <noscript>You need to enable JavaScript to run this app.</noscript>
31
- <div id="root"></div>
32
- <!--
33
- This HTML file is a template.
34
- If you open it directly in the browser, you will see an empty page.
35
-
36
- You can add webfonts, meta tags, or analytics to this file.
37
- The build step will place the bundled scripts into the <body> tag.
38
-
39
- To begin the development, run `npm start` or `yarn start`.
40
- To create a production bundle, use `npm run build` or `yarn build`.
41
- -->
42
- </body>
43
- </html>
package/public/logo192.png DELETED
Binary file
package/public/logo512.png DELETED
Binary file
package/public/manifest.json DELETED
@@ -1,25 +0,0 @@
1
- {
2
- "short_name": "React App",
3
- "name": "Create React App Sample",
4
- "icons": [
5
- {
6
- "src": "favicon.ico",
7
- "sizes": "64x64 32x32 24x24 16x16",
8
- "type": "image/x-icon"
9
- },
10
- {
11
- "src": "logo192.png",
12
- "type": "image/png",
13
- "sizes": "192x192"
14
- },
15
- {
16
- "src": "logo512.png",
17
- "type": "image/png",
18
- "sizes": "512x512"
19
- }
20
- ],
21
- "start_url": ".",
22
- "display": "standalone",
23
- "theme_color": "#000000",
24
- "background_color": "#ffffff"
25
- }
package/public/robots.txt DELETED
@@ -1,3 +0,0 @@
1
- # https://www.robotstxt.org/robotstxt.html
2
- User-agent: *
3
- Disallow:
package/src/App.tsx DELETED
@@ -1,7 +0,0 @@
1
- import React from "react";
2
-
3
- function App() {
4
- return <div className="App">CDS</div>;
5
- }
6
-
7
- export default App;
package/src/cds/CodleDesignSystemProvider.tsx DELETED
@@ -1,93 +0,0 @@
1
- import { ThemeProvider } from "@emotion/react";
2
- import { ThemeProvider as MuiThemeProvider } from "@mui/material";
3
- import COLOR from "./foundation/color";
4
- import { createTheme } from "@mui/material";
5
-
6
- export const light = {
7
- color: {
8
- background: {
9
- neutralBase: COLOR.white,
10
- neutralAlt: COLOR.grey03,
11
- neutralAltActive: COLOR.grey04,
12
- neutralAltDisabled: COLOR.grey03,
13
- primary: COLOR.blue06,
14
- primaryActive: COLOR.blue07,
15
- primaryDisabled: COLOR.blue03,
16
- secondary: COLOR.orange06,
17
- secondaryActive: COLOR.orange07,
18
- secondaryDisabled: COLOR.orange03,
19
- danger: COLOR.red06,
20
- dangerActive: COLOR.red07,
21
- dangerDisabled: COLOR.red03,
22
- success: COLOR.green06,
23
- successActive: COLOR.green07,
24
- successDisabled: COLOR.green03,
25
- info: COLOR.teal06,
26
- infoActive: COLOR.teal07,
27
- infoDisabled: COLOR.teal03,
28
- warning: COLOR.yellow06,
29
- warningActive: COLOR.yellow07,
30
- warningDisabled: COLOR.yellow03,
31
- },
32
- foreground: {
33
- neutralBase: COLOR.black,
34
- neutralBaseDisabled: COLOR.grey06,
35
- neutralAlt: COLOR.white,
36
- neutralAltDisabled: COLOR.white,
37
- primary: COLOR.blue06,
38
- primaryDisabled: COLOR.blue02,
39
- secondary: COLOR.orange06,
40
- secondaryDisabled: COLOR.orange02,
41
- danger: COLOR.red06,
42
- dangerDisabled: COLOR.red02,
43
- success: COLOR.green06,
44
- successDisabled: COLOR.green02,
45
- info: COLOR.teal06,
46
- infoDisabled: COLOR.teal02,
47
- warning: COLOR.yellow06,
48
- warningDisabled: COLOR.yellow02,
49
- },
50
- container: {
51
- primaryContainer: COLOR.blue01,
52
- primaryOnContainer: COLOR.blue08,
53
- secondaryContainer: COLOR.orange01,
54
- secondaryOnContainer: COLOR.orange08,
55
- dangerContainer: COLOR.red01,
56
- dangerOnContainer: COLOR.red08,
57
- successContainer: COLOR.green01,
58
- successOnContainer: COLOR.green08,
59
- infoContainer: COLOR.teal01,
60
- infoOnContainer: COLOR.teal08,
61
- warningContainer: COLOR.yellow01,
62
- warningOnContainer: COLOR.yellow08,
63
- obsidianContainer: COLOR.black,
64
- obsidianOnContainer: COLOR.grey03,
65
- marbleContainer: COLOR.grey03,
66
- marbleOnContainer: COLOR.grey07,
67
- },
68
- },
69
- };
70
-
71
- // eslint-disable-next-line import/no-anonymous-default-export
72
- export default function (props: {
73
- children: React.ReactNode;
74
- fontFamily?: string;
75
- }): React.ReactElement {
76
- const muiTheme = createTheme({
77
- typography: {
78
- fontFamily: props.fontFamily,
79
- },
80
- components: {
81
- MuiButtonBase: {
82
- defaultProps: {
83
- disableRipple: true, // No more ripple, on the whole application 💣!
84
- },
85
- },
86
- },
87
- });
88
- return (
89
- <MuiThemeProvider theme={muiTheme}>
90
- <ThemeProvider theme={light}>{props.children}</ThemeProvider>
91
- </MuiThemeProvider>
92
- );
93
- }
package/src/cds/README.md DELETED
@@ -1,23 +0,0 @@
1
- # Codle Design System
2
-
3
- 코들 디자인 시스템을 구현합니다. 이 폴더는 앞으로 독립적인 패키지로 구현될 수 있습니다.
4
-
5
- ### /components
6
-
7
- 컴포넌트를 구현합니다.
8
- 컴포넌트는 반드시 `className`과 `component` 인자를 가집니다.
9
- 컴포넌트는 모두 스토리북에 등록해야 합니다.
10
-
11
- ### /foundation
12
-
13
- 색상, 그림자 등을 제공합니다.
14
-
15
- ### /icons
16
-
17
- 아이콘을 제공합니다.
18
-
19
- 아이콘은 [피그마](https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-23307&t=ASkFT82aJsgxrxvr-0)에 정의된대로 24px X 24px 크기의 svg로 정의됩니다. 색상이나 크기를 변경하기 위해 Styled Component를 활용할 수 있으므로 `className` 인자를 받아야합니다.
20
-
21
- svg는 피그마에서 받을 수도 있고 [iconify](https://iconify.design/)에서 받을 수도 있습니다.
22
-
23
- 아이콘은 `System/add-box-fill`과 같은 이름을 가지는데, 이 경우 `icons/system.tsx` 파일에 `AddBoxFillIcon` 컴포넌트로 정의합니다.
package/src/cds/components/AlertDialog/AlertDialog.tsx DELETED
@@ -1,101 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import { Modal as MuiModal } from "@mui/material";
3
- import { css, useTheme } from "@emotion/react";
4
- import React from "react";
5
- import shadows from "../../foundation/shadows";
6
- import styled from "@emotion/styled";
7
-
8
- export interface AlertDialogProps {
9
- className?: string;
10
- component?: React.ElementType;
11
-
12
- /** `true` 값일때 모달이 노출됩니다. */
13
- open: boolean;
14
-
15
- /** 모달이 닫힐 때 호출되는 callback */
16
- onClose?: () => void;
17
-
18
- /** 모달의 내용으로 표기될 값 */
19
- children: React.ReactNode;
20
-
21
- /** 모달 좌측에 표기될 아이콘 */
22
- icon?: React.ReactNode;
23
- }
24
-
25
- export const AlertDialog = React.forwardRef<any, AlertDialogProps>(
26
- (props, ref) => {
27
- const {
28
- className,
29
- component: Component = "div",
30
- open,
31
- onClose,
32
- children,
33
- icon,
34
- ...other
35
- } = props;
36
- const theme = useTheme();
37
- return (
38
- <MuiModal open={open} onClose={onClose} ref={ref} {...other}>
39
- <Component
40
- className={className}
41
- css={css`
42
- width: 480px;
43
- background: ${theme.color.background.neutralBase};
44
- box-shadow: ${shadows.shadow04};
45
- border-radius: 16px;
46
- position: absolute;
47
- top: 50%;
48
- left: 50%;
49
- transform: translate(-50%, -50%);
50
- padding: 24px;
51
- box-sizing: border-box;
52
-
53
- display: grid;
54
- ${icon
55
- ? css`
56
- grid-template-areas:
57
- "icon title"
58
- "iconPadding content"
59
- "actions actions";
60
- `
61
- : css`
62
- grid-template-areas:
63
- "title"
64
- "content"
65
- "actions";
66
- `}
67
-
68
- gap: 8px 16px;
69
- `}
70
- >
71
- {icon && (
72
- <>
73
- <IconDiv>{icon}</IconDiv>
74
- <IconPadding />
75
- </>
76
- )}
77
- {children}
78
- </Component>
79
- </MuiModal>
80
- );
81
- }
82
- );
83
-
84
- const IconDiv = styled.div`
85
- display: flex;
86
- justify-content: center;
87
- align-items: center;
88
- grid-area: icon;
89
- ${({ theme }) =>
90
- css`
91
- color: ${theme.color.background.infoActive};
92
- `}
93
- svg {
94
- width: 32px;
95
- height: 32px;
96
- }
97
- `;
98
-
99
- const IconPadding = styled.div`
100
- grid-area: iconPadding;
101
- `;
package/src/cds/components/AlertDialog/AlertDialogActions.tsx DELETED
@@ -1,34 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import { css } from "@emotion/react";
3
- import React from "react";
4
- export interface AlertDialogActionsProps {
5
- className?: string;
6
- component?: React.ElementType;
7
-
8
- /** Content 내용으로 표기될 값 */
9
- children: React.ReactNode;
10
- }
11
-
12
- export const AlertDialogActions = React.forwardRef<
13
- any,
14
- AlertDialogActionsProps
15
- >((props, ref) => {
16
- const { className, component: Component = "div", children, ...other } = props;
17
- return (
18
- <Component
19
- {...other}
20
- ref={ref}
21
- className={className}
22
- css={css`
23
- grid-area: actions;
24
-
25
- margin-top: 8px;
26
- display: flex;
27
- gap: 16px;
28
- justify-content: flex-end;
29
- `}
30
- >
31
- {children}
32
- </Component>
33
- );
34
- });
package/src/cds/components/AlertDialog/AlertDialogContent.tsx DELETED
@@ -1,36 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import { css, useTheme } from "@emotion/react";
3
- import React from "react";
4
-
5
- export interface AlertDialogContentProps {
6
- className?: string;
7
- component?: React.ElementType;
8
-
9
- /** Content 내용으로 표기될 값 */
10
- children: React.ReactNode;
11
- }
12
-
13
- export const AlertDialogContent = React.forwardRef<
14
- any,
15
- AlertDialogContentProps
16
- >((props, ref) => {
17
- const { className, component: Component = "div", children, ...other } = props;
18
- const theme = useTheme();
19
- return (
20
- <Component
21
- {...other}
22
- ref={ref}
23
- className={className}
24
- css={css`
25
- grid-area: content;
26
-
27
- font-style: normal;
28
- font-size: 18px;
29
- line-height: 28px;
30
- color: ${theme.color.foreground.neutralBase};
31
- `}
32
- >
33
- {children}
34
- </Component>
35
- );
36
- });
package/src/cds/components/AlertDialog/AlertDialogTitle.tsx DELETED
@@ -1,63 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import { css, useTheme } from "@emotion/react";
3
- import React from "react";
4
- import SquareButton from "../SquareButton";
5
- import { CloseFillIcon } from "../../icons/system";
6
-
7
- export interface AlertDialogTitleProps {
8
- className?: string;
9
- component?: React.ElementType;
10
-
11
- /**
12
- * 제목의 X 버튼을 누르를 때 호출되는 callback.
13
- * 이 속성이 전달되면 X 버튼을 Title 영역에 그립니다.
14
- */
15
- onClose?: () => void;
16
-
17
- /** Content 내용으로 표기될 값 */
18
- children: React.ReactNode;
19
- }
20
-
21
- export const AlertDialogTitle = React.forwardRef<any, AlertDialogTitleProps>(
22
- (props, ref) => {
23
- const {
24
- className,
25
- component: Component = "div",
26
- onClose,
27
- children,
28
- ...other
29
- } = props;
30
- const theme = useTheme();
31
- return (
32
- <>
33
- <Component
34
- {...other}
35
- ref={ref}
36
- className={className}
37
- css={css`
38
- grid-area: title;
39
- font-family: "Pretendard";
40
- font-style: normal;
41
- font-weight: 500;
42
- font-size: 20px;
43
- line-height: 36px;
44
- color: ${theme.color.foreground.neutralBase};
45
-
46
- display: flex;
47
- justify-content: space-between;
48
- `}
49
- >
50
- {children}
51
- {onClose && (
52
- <SquareButton
53
- color="icon"
54
- size="small"
55
- icon={<CloseFillIcon />}
56
- onClick={onClose}
57
- />
58
- )}
59
- </Component>
60
- </>
61
- );
62
- }
63
- );
package/src/cds/components/AlertDialog/index.tsx DELETED
@@ -1,4 +0,0 @@
1
- export * from "./AlertDialog";
2
- export * from "./AlertDialogTitle";
3
- export * from "./AlertDialogContent";
4
- export * from "./AlertDialogActions";
package/src/cds/components/Banner.tsx DELETED
@@ -1,176 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import { css, SerializedStyles, Theme, useTheme } from "@emotion/react";
3
- import styled from "@emotion/styled";
4
- import React from "react";
5
- import COLOR from "../foundation/color";
6
- import { CloseFillIcon } from "../icons/system";
7
- import { RESET_BUTTON } from "../utils/reset";
8
-
9
- export type BannerColor = "red" | "blue" | "green" | "yellow";
10
-
11
- export interface BannerProps {
12
- className?: string;
13
- component?: React.ElementType;
14
-
15
- /** 컴포넌트 내 헤드라인으로 표기될 문자열 */
16
- headline?: string;
17
-
18
- /** 컴포넌트 내용으로 표기될 값 */
19
- content?: React.ReactNode;
20
-
21
- /** 컴포넌트 좌측에 표기될 아이콘 */
22
- icon?: React.ReactNode;
23
-
24
- /** 컴포넌트의 색상 */
25
- color: BannerColor;
26
-
27
- /** 컴포넌트 우측에 표기될 버튼의 라벨 */
28
- buttonLabel?: string;
29
-
30
- /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
31
- onButtonClick?: () => void;
32
-
33
- /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
34
- close?: boolean;
35
-
36
- /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
37
- onClose?: () => void;
38
-
39
- /** 전체 너비 유무 */
40
- fullWidth?: boolean;
41
- }
42
-
43
- const COLOR_TO_STYLE = (theme: Theme, color: BannerColor): SerializedStyles =>
44
- ({
45
- red: css`
46
- background: ${theme.color.container.dangerContainer};
47
- color: ${theme.color.container.dangerOnContainer};
48
- `,
49
- blue: css`
50
- background: ${theme.color.container.primaryContainer};
51
- color: ${theme.color.container.primaryOnContainer};
52
- `,
53
- green: css`
54
- background: ${theme.color.container.successContainer};
55
- color: ${theme.color.container.successOnContainer};
56
- `,
57
- yellow: css`
58
- background: ${theme.color.container.warningContainer};
59
- color: ${theme.color.container.warningOnContainer};
60
- `,
61
- }[color]);
62
-
63
- /**
64
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
65
- */
66
- const Banner = React.forwardRef<any, BannerProps>(
67
- (props, ref): React.ReactElement => {
68
- const {
69
- className,
70
- component: Component = "div",
71
- headline,
72
- content,
73
- icon,
74
- color,
75
- buttonLabel,
76
- onButtonClick,
77
- close,
78
- onClose,
79
- fullWidth,
80
- ...other
81
- } = props;
82
- const theme = useTheme();
83
- return (
84
- <Component
85
- {...other}
86
- ref={ref}
87
- className={className}
88
- css={[
89
- css`
90
- box-sizing: border-box;
91
- display: flex;
92
- align-items: center;
93
- color: ${COLOR.white};
94
- line-height: 125%;
95
- `,
96
- COLOR_TO_STYLE(theme, color),
97
- fullWidth
98
- ? css`
99
- width: 100%;
100
- `
101
- : css`
102
- border-radius: 12px;
103
- width: fit-content;
104
- min-width: 343px;
105
- `,
106
- ]}
107
- >
108
- {icon && <IconDiv>{icon}</IconDiv>}
109
- <TextContainer setPaddingRight={!close && !buttonLabel}>
110
- {headline && <HeadlineDiv>{headline}</HeadlineDiv>}
111
- {content && <div>{content}</div>}
112
- </TextContainer>
113
- {buttonLabel && (
114
- <BannerButton onClick={onButtonClick}>{buttonLabel}</BannerButton>
115
- )}
116
- {close && (
117
- <CloseButton onClick={onClose}>
118
- <StyledCloseFillIcon />
119
- </CloseButton>
120
- )}
121
- </Component>
122
- );
123
- }
124
- );
125
-
126
- const StyledCloseFillIcon = styled(CloseFillIcon)`
127
- display: block;
128
- padding: 14px;
129
- width: 20px;
130
- height: 20px;
131
-
132
- color: currentColor;
133
- `;
134
-
135
- const IconDiv = styled.div`
136
- display: flex;
137
- align-items: center;
138
- padding: 16px 0px 16px 16px;
139
- `;
140
-
141
- const HeadlineDiv = styled.div`
142
- font-weight: 700;
143
- `;
144
-
145
- const TextContainer = styled.div<{ setPaddingRight: boolean }>`
146
- flex: 1;
147
-
148
- display: flex;
149
- flex-direction: column;
150
- align-items: flex-start;
151
- padding: 16px 0px 16px 16px;
152
- gap: 4px;
153
- ${(props) =>
154
- props.setPaddingRight &&
155
- css`
156
- padding-right: 16px;
157
- `};
158
- `;
159
-
160
- const BannerButton = styled.button`
161
- ${RESET_BUTTON}
162
- display: flex;
163
- justify-content: center;
164
- align-items: center;
165
- padding: 10px 12px;
166
- cursor: pointer;
167
- color: currentColor;
168
- `;
169
-
170
- const CloseButton = styled.button`
171
- ${RESET_BUTTON}
172
- cursor: pointer;
173
- color: currentColor;
174
- `;
175
-
176
- export default Banner;