@team-monolith/cds 0.24.0 → 0.25.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.
- package/@types/emotion.d.ts +6 -0
- package/dist/CodleDesignSystemProvider.d.ts +4 -0
- package/dist/CodleDesignSystemProvider.js +6 -1
- package/dist/components/AlertDialog/AlertDialogTitle.js +1 -1
- package/dist/components/Banner.js +8 -2
- package/dist/components/Button.js +2 -2
- package/dist/components/Tooltip.js +1 -1
- package/dist/foundation/font.d.ts +5 -0
- package/dist/foundation/font.js +5 -0
- package/package.json +10 -10
package/@types/emotion.d.ts
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import "@emotion/react";
|
|
2
2
|
|
|
3
|
+
interface CodleFontFamilies {
|
|
4
|
+
uiFont: string;
|
|
5
|
+
titleFont: string;
|
|
6
|
+
}
|
|
7
|
+
|
|
3
8
|
interface CodleColors {
|
|
4
9
|
background: {
|
|
5
10
|
neutralBase: string;
|
|
@@ -69,5 +74,6 @@ interface CodleColors {
|
|
|
69
74
|
declare module "@emotion/react" {
|
|
70
75
|
export interface Theme {
|
|
71
76
|
color: CodleColors;
|
|
77
|
+
fontFamily: CodleFontFamilies;
|
|
72
78
|
}
|
|
73
79
|
}
|
|
@@ -17,8 +17,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
17
17
|
import { Global, ThemeProvider, css } from "@emotion/react";
|
|
18
18
|
import { ThemeProvider as MuiThemeProvider } from "@mui/material";
|
|
19
19
|
import COLOR from "./foundation/color";
|
|
20
|
+
import FONT from "./foundation/font";
|
|
20
21
|
import { createTheme } from "@mui/material";
|
|
21
22
|
export var light = {
|
|
23
|
+
fontFamily: {
|
|
24
|
+
uiFont: FONT.pretendard,
|
|
25
|
+
titleFont: FONT.naumSquareNeo,
|
|
26
|
+
},
|
|
22
27
|
color: {
|
|
23
28
|
background: {
|
|
24
29
|
neutralBase: COLOR.white,
|
|
@@ -99,6 +104,6 @@ export default function (props) {
|
|
|
99
104
|
},
|
|
100
105
|
},
|
|
101
106
|
});
|
|
102
|
-
return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n body {\n font-family:
|
|
107
|
+
return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n body {\n font-family: ", ";\n }\n "], ["\n body {\n font-family: ", ";\n }\n "])), FONT.pretendard) }), _jsx(MuiThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, __assign({ theme: light }, { children: props.children })) }))] }));
|
|
103
108
|
}
|
|
104
109
|
var templateObject_1;
|
|
@@ -36,6 +36,6 @@ export var AlertDialogTitle = React.forwardRef(function (props, ref) {
|
|
|
36
36
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, onClose = props.onClose, children = props.children, other = __rest(props, ["className", "component", "onClose", "children"]);
|
|
37
37
|
var icon = React.useContext(AlertDialogContext).icon;
|
|
38
38
|
var theme = useTheme();
|
|
39
|
-
return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-area: title;\n font-family:
|
|
39
|
+
return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-area: title;\n font-family: ", ";\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 36px;\n color: ", ";\n\n display: flex;\n justify-content: space-between;\n "], ["\n grid-area: title;\n font-family: ", ";\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 36px;\n color: ", ";\n\n display: flex;\n justify-content: space-between;\n "])), theme.fontFamily.uiFont, theme.color.foreground.neutralBase) }, { children: [_jsxs("div", __assign({ css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 16px;\n "], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 16px;\n "]))) }, { children: [icon && (_jsx("div", __assign({ css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: none;\n ", "\n "], ["\n display: none;\n ", "\n "])), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n\n svg {\n width: 32px;\n height: 32px;\n }\n "], ["\n display: flex;\n justify-content: center;\n align-items: center;\n color: ", ";\n\n svg {\n width: 32px;\n height: 32px;\n }\n "])), theme.color.background.infoActive))) }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
|
|
40
40
|
});
|
|
41
41
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -55,8 +55,14 @@ var Banner = React.forwardRef(function (props, ref) {
|
|
|
55
55
|
] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx(ContentDiv, { children: content })] }), buttonLabel && (_jsx(BannerButton, __assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(SquareButton, { css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n > button,\n > button:hover {\n color: currentColor;\n }\n "], ["\n > button,\n > button:hover {\n color: currentColor;\n }\n "]))), color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
|
|
56
56
|
});
|
|
57
57
|
var IconDiv = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 16px 0px 16px 16px;\n"], ["\n display: flex;\n align-items: center;\n padding: 16px 0px 16px 16px;\n"])));
|
|
58
|
-
var HeadlineDiv = styled.div(
|
|
59
|
-
var
|
|
58
|
+
var HeadlineDiv = styled.div(function (_a) {
|
|
59
|
+
var theme = _a.theme;
|
|
60
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px; /* 125% */\n "], ["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px; /* 125% */\n "])), theme.fontFamily.uiFont);
|
|
61
|
+
});
|
|
62
|
+
var ContentDiv = styled.div(function (_a) {
|
|
63
|
+
var theme = _a.theme;
|
|
64
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n "], ["\n font-family: ", ";\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px; /* 150% */\n "])), theme.fontFamily.uiFont);
|
|
65
|
+
});
|
|
60
66
|
var TextContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n flex: 1;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 16px;\n gap: 4px;\n"], ["\n flex: 1;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 16px;\n gap: 4px;\n"])));
|
|
61
67
|
var BannerButton = styled.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px 12px;\n cursor: pointer;\n color: currentColor;\n"], ["\n ", "\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px 12px;\n cursor: pointer;\n color: currentColor;\n"])), RESET_BUTTON);
|
|
62
68
|
export default Banner;
|
|
@@ -67,8 +67,8 @@ var Button = React.forwardRef(function Button(props, ref) {
|
|
|
67
67
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, fullWidth = props.fullWidth, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth"]);
|
|
68
68
|
var theme = useTheme();
|
|
69
69
|
return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
|
|
70
|
-
css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n ", "\n\n font-family:
|
|
71
|
-
? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n cursor: default;\n pointer-events: none;\n "], ["\n cursor: default;\n pointer-events: none;\n "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))), fullWidth ? "100%" : "auto"),
|
|
70
|
+
css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n ", "\n\n font-family: ", ";\n text-decoration: none;\n\n width: ", ";\n "], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n ", "\n\n font-family: ", ";\n text-decoration: none;\n\n width: ", ";\n "])), disabled
|
|
71
|
+
? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n cursor: default;\n pointer-events: none;\n "], ["\n cursor: default;\n pointer-events: none;\n "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))), theme.fontFamily.uiFont, fullWidth ? "100%" : "auto"),
|
|
72
72
|
COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
|
|
73
73
|
SIZE_TO_BUTTON_STYLE[size],
|
|
74
74
|
], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
|
|
@@ -43,7 +43,7 @@ var StyledTooltip = styled(function (_a) {
|
|
|
43
43
|
return (_jsx(MuiTooltip, __assign({}, props, { classes: { popper: className } })));
|
|
44
44
|
})(function (_a) {
|
|
45
45
|
var theme = _a.theme;
|
|
46
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiTooltip-tooltip {\n background: ", ";\n border-radius: 8px;\n padding: 6px 10px;\n\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n color: ", ";\n font-family:
|
|
46
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiTooltip-tooltip {\n background: ", ";\n border-radius: 8px;\n padding: 6px 10px;\n\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n }\n "], ["\n .MuiTooltip-tooltip {\n background: ", ";\n border-radius: 8px;\n padding: 6px 10px;\n\n display: flex;\n flex-direction: column;\n gap: 2px;\n\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n }\n "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase, theme.fontFamily.uiFont);
|
|
47
47
|
});
|
|
48
48
|
var TitleDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 700;\n"], ["\n font-weight: 700;\n"])));
|
|
49
49
|
export default Tooltip;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@team-monolith/cds",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -52,20 +52,20 @@
|
|
|
52
52
|
"@babel/preset-env": "^7.22.7",
|
|
53
53
|
"@babel/preset-react": "^7.22.5",
|
|
54
54
|
"@babel/preset-typescript": "^7.22.5",
|
|
55
|
-
"@storybook/addon-essentials": "^7.
|
|
56
|
-
"@storybook/addon-interactions": "^7.
|
|
57
|
-
"@storybook/addon-links": "^7.
|
|
58
|
-
"@storybook/blocks": "^7.
|
|
59
|
-
"@storybook/react": "^7.
|
|
60
|
-
"@storybook/react-webpack5": "^7.
|
|
61
|
-
"@storybook/testing-library": "^0.
|
|
55
|
+
"@storybook/addon-essentials": "^7.4.6",
|
|
56
|
+
"@storybook/addon-interactions": "^7.4.6",
|
|
57
|
+
"@storybook/addon-links": "^7.4.6",
|
|
58
|
+
"@storybook/blocks": "^7.4.6",
|
|
59
|
+
"@storybook/react": "^7.4.6",
|
|
60
|
+
"@storybook/react-webpack5": "^7.4.6",
|
|
61
|
+
"@storybook/testing-library": "^0.2.2",
|
|
62
62
|
"chromatic": "^7.1.0",
|
|
63
63
|
"copyfiles": "^2.4.1",
|
|
64
|
-
"eslint-plugin-storybook": "^0.6.
|
|
64
|
+
"eslint-plugin-storybook": "^0.6.15",
|
|
65
65
|
"pascalcase": "^2.0.0",
|
|
66
66
|
"prettier": "^3.0.2",
|
|
67
67
|
"prop-types": "^15.8.1",
|
|
68
68
|
"rimraf": "^5.0.1",
|
|
69
|
-
"storybook": "^7.
|
|
69
|
+
"storybook": "^7.4.6"
|
|
70
70
|
}
|
|
71
71
|
}
|