@team-monolith/cds 1.123.0 → 1.124.0

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 (4) hide show
  1. package/dist/components/Banner.js +4 -5
  2. package/dist/components/Button.js +4 -8
  3. package/dist/foundation/typography.js +29 -0
  4. package/package.json +1 -1
package/dist/components/Banner.js CHANGED
@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
14
14
  import { css, useTheme } from "@emotion/react";
15
15
  import styled from "@emotion/styled";
16
16
  import React from "react";
17
+ import { useTranslation } from "react-i18next";
17
18
  import { CloseFillIcon } from "../icons";
18
19
  import { SquareButton } from "./SquareButton";
19
20
  import { Button } from "./Button";
@@ -60,6 +61,7 @@ export const Banner = React.forwardRef(function Banner(props, ref) {
60
61
  var _a;
61
62
  const { className, component: Component = "div", headline, content, icon, color, buttonLabel, onButtonClick, buttonProps, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "buttonProps", "close", "onClose", "fullWidth"]);
62
63
  const theme = useTheme();
64
+ const { t } = useTranslation();
63
65
  return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [bannerClasses.root, className].filter(Boolean).join(" "), css: [
64
66
  css `
65
67
  display: flex;
@@ -90,7 +92,7 @@ export const Banner = React.forwardRef(function Banner(props, ref) {
90
92
  // component 속성이 없는 경우 제네릭 인자로 전달되는 타입을 확인하지 못하므로 component 속성 명시
91
93
  component: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.component) !== null && _a !== void 0 ? _a : "button" }))), close && (_jsx(SquareButton, { className: bannerClasses.closeSquareButton, css: css `
92
94
  color: ${COLOR_PALETTE(theme, color).content};
93
- `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": "\uB2EB\uAE30" }))] })));
95
+ `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": t("닫기", { context: "배너" }) }))] })));
94
96
  });
95
97
  const Icon = styled.div `
96
98
  display: flex;
@@ -109,10 +111,7 @@ const Headline = styled.div(({ theme }) => css `
109
111
  font-weight: 700;
110
112
  line-height: 20px; /* 125% */
111
113
  `);
112
- const Content = styled.div(({ theme }) => css `
113
- font-family: ${theme.fontFamily.ui};
114
- ${theme.typography.body2Regular}
115
- `);
114
+ const Content = styled.div(({ theme }) => theme.typography.body2Regular);
116
115
  const TextContainer = styled.div `
117
116
  flex: 1;
118
117
 
package/dist/components/Button.js CHANGED
@@ -145,8 +145,7 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
145
145
  const SIZE_TO_BUTTON_STYLE = {
146
146
  large: css `
147
147
  min-width: 100px;
148
- height: 56px;
149
- padding: 0 20px;
148
+ padding: 16px 20px;
150
149
  gap: 10px;
151
150
  border-radius: 12px;
152
151
 
@@ -157,8 +156,7 @@ const SIZE_TO_BUTTON_STYLE = {
157
156
  `,
158
157
  medium: css `
159
158
  min-width: 82px;
160
- height: 48px;
161
- padding: 0 16px;
159
+ padding: 14px 16px;
162
160
  gap: 8px;
163
161
  border-radius: 10px;
164
162
 
@@ -169,8 +167,7 @@ const SIZE_TO_BUTTON_STYLE = {
169
167
  `,
170
168
  small: css `
171
169
  min-width: 64px;
172
- height: 36px;
173
- padding: 0 12px;
170
+ padding: 10px 12px;
174
171
  gap: 8px;
175
172
  border-radius: 8px;
176
173
 
@@ -181,8 +178,7 @@ const SIZE_TO_BUTTON_STYLE = {
181
178
  `,
182
179
  xsmall: css `
183
180
  min-width: 52px;
184
- height: 28px;
185
- padding: 0 8px;
181
+ padding: 6px 8px;
186
182
  gap: 4px;
187
183
  border-radius: 6px;
188
184
 
package/dist/foundation/typography.js CHANGED
@@ -1,13 +1,16 @@
1
1
  import { css } from "@emotion/react";
2
+ import { FONT } from "./font";
2
3
  export const typography = {
3
4
  // Heading 1
4
5
  heading1Regular: css `
6
+ font-family: ${FONT.pretendard};
5
7
  font-size: 40px;
6
8
  font-style: normal;
7
9
  font-weight: 400;
8
10
  line-height: 52px;
9
11
  `,
10
12
  heading1Bold: css `
13
+ font-family: ${FONT.pretendard};
11
14
  font-size: 40px;
12
15
  font-style: normal;
13
16
  font-weight: 700;
@@ -15,12 +18,14 @@ export const typography = {
15
18
  `,
16
19
  // Heading 2
17
20
  heading2Regular: css `
21
+ font-family: ${FONT.pretendard};
18
22
  font-size: 36px;
19
23
  font-style: normal;
20
24
  font-weight: 400;
21
25
  line-height: 44px;
22
26
  `,
23
27
  heading2Bold: css `
28
+ font-family: ${FONT.pretendard};
24
29
  font-size: 36px;
25
30
  font-style: normal;
26
31
  font-weight: 700;
@@ -28,12 +33,14 @@ export const typography = {
28
33
  `,
29
34
  // Heading 3
30
35
  heading3Regular: css `
36
+ font-family: ${FONT.pretendard};
31
37
  font-size: 32px;
32
38
  font-style: normal;
33
39
  font-weight: 400;
34
40
  line-height: 40px;
35
41
  `,
36
42
  heading3Bold: css `
43
+ font-family: ${FONT.pretendard};
37
44
  font-size: 32px;
38
45
  font-style: normal;
39
46
  font-weight: 700;
@@ -41,12 +48,14 @@ export const typography = {
41
48
  `,
42
49
  // Heading 4
43
50
  heading4Regular: css `
51
+ font-family: ${FONT.pretendard};
44
52
  font-size: 28px;
45
53
  font-style: normal;
46
54
  font-weight: 400;
47
55
  line-height: 36px;
48
56
  `,
49
57
  heading4Bold: css `
58
+ font-family: ${FONT.pretendard};
50
59
  font-size: 28px;
51
60
  font-style: normal;
52
61
  font-weight: 700;
@@ -54,12 +63,14 @@ export const typography = {
54
63
  `,
55
64
  // Heading 5
56
65
  heading5Regular: css `
66
+ font-family: ${FONT.pretendard};
57
67
  font-size: 24px;
58
68
  font-style: normal;
59
69
  font-weight: 400;
60
70
  line-height: 32px;
61
71
  `,
62
72
  heading5Bold: css `
73
+ font-family: ${FONT.pretendard};
63
74
  font-size: 24px;
64
75
  font-style: normal;
65
76
  font-weight: 700;
@@ -67,12 +78,14 @@ export const typography = {
67
78
  `,
68
79
  // Heading 6
69
80
  heading6Regular: css `
81
+ font-family: ${FONT.pretendard};
70
82
  font-size: 20px;
71
83
  font-style: normal;
72
84
  font-weight: 400;
73
85
  line-height: 28px;
74
86
  `,
75
87
  heading6Bold: css `
88
+ font-family: ${FONT.pretendard};
76
89
  font-size: 20px;
77
90
  font-style: normal;
78
91
  font-weight: 700;
@@ -80,24 +93,28 @@ export const typography = {
80
93
  `,
81
94
  // Body 1
82
95
  body1Regular: css `
96
+ font-family: ${FONT.pretendard};
83
97
  font-size: 18px;
84
98
  font-style: normal;
85
99
  font-weight: 400;
86
100
  line-height: 28px;
87
101
  `,
88
102
  body1Medium: css `
103
+ font-family: ${FONT.pretendard};
89
104
  font-size: 18px;
90
105
  font-style: normal;
91
106
  font-weight: 500;
92
107
  line-height: 28px;
93
108
  `,
94
109
  body1SemiBold: css `
110
+ font-family: ${FONT.pretendard};
95
111
  font-size: 18px;
96
112
  font-style: normal;
97
113
  font-weight: 600;
98
114
  line-height: 28px;
99
115
  `,
100
116
  body1Bold: css `
117
+ font-family: ${FONT.pretendard};
101
118
  font-size: 18px;
102
119
  font-style: normal;
103
120
  font-weight: 700;
@@ -105,24 +122,28 @@ export const typography = {
105
122
  `,
106
123
  // Body 2
107
124
  body2Regular: css `
125
+ font-family: ${FONT.pretendard};
108
126
  font-size: 16px;
109
127
  font-style: normal;
110
128
  font-weight: 400;
111
129
  line-height: 24px;
112
130
  `,
113
131
  body2Medium: css `
132
+ font-family: ${FONT.pretendard};
114
133
  font-size: 16px;
115
134
  font-style: normal;
116
135
  font-weight: 500;
117
136
  line-height: 24px;
118
137
  `,
119
138
  body2SemiBold: css `
139
+ font-family: ${FONT.pretendard};
120
140
  font-size: 16px;
121
141
  font-style: normal;
122
142
  font-weight: 600;
123
143
  line-height: 24px;
124
144
  `,
125
145
  body2Bold: css `
146
+ font-family: ${FONT.pretendard};
126
147
  font-size: 16px;
127
148
  font-style: normal;
128
149
  font-weight: 700;
@@ -130,24 +151,28 @@ export const typography = {
130
151
  `,
131
152
  // Body 3
132
153
  body3Regular: css `
154
+ font-family: ${FONT.pretendard};
133
155
  font-size: 14px;
134
156
  font-style: normal;
135
157
  font-weight: 400;
136
158
  line-height: 20px;
137
159
  `,
138
160
  body3Medium: css `
161
+ font-family: ${FONT.pretendard};
139
162
  font-size: 14px;
140
163
  font-style: normal;
141
164
  font-weight: 500;
142
165
  line-height: 20px;
143
166
  `,
144
167
  body3SemiBold: css `
168
+ font-family: ${FONT.pretendard};
145
169
  font-size: 14px;
146
170
  font-style: normal;
147
171
  font-weight: 600;
148
172
  line-height: 20px;
149
173
  `,
150
174
  body3Bold: css `
175
+ font-family: ${FONT.pretendard};
151
176
  font-size: 14px;
152
177
  font-style: normal;
153
178
  font-weight: 700;
@@ -155,24 +180,28 @@ export const typography = {
155
180
  `,
156
181
  // Caption
157
182
  captionRegular: css `
183
+ font-family: ${FONT.pretendard};
158
184
  font-size: 12px;
159
185
  font-style: normal;
160
186
  font-weight: 400;
161
187
  line-height: 16px;
162
188
  `,
163
189
  captionMedium: css `
190
+ font-family: ${FONT.pretendard};
164
191
  font-size: 12px;
165
192
  font-style: normal;
166
193
  font-weight: 500;
167
194
  line-height: 16px;
168
195
  `,
169
196
  captionSemiBold: css `
197
+ font-family: ${FONT.pretendard};
170
198
  font-size: 12px;
171
199
  font-style: normal;
172
200
  font-weight: 600;
173
201
  line-height: 16px;
174
202
  `,
175
203
  captionBold: css `
204
+ font-family: ${FONT.pretendard};
176
205
  font-size: 12px;
177
206
  font-style: normal;
178
207
  font-weight: 700;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "1.123.0",
3
+ "version": "1.124.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": false,