@team-monolith/cds 0.17.2 → 0.18.1
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/dist/components/Button.js +26 -19
- package/package.json +1 -1
|
@@ -30,27 +30,33 @@ import { css, useTheme } from "@emotion/react";
|
|
|
30
30
|
import styled from "@emotion/styled";
|
|
31
31
|
import React from "react";
|
|
32
32
|
import { HOVER } from "../utils/hover";
|
|
33
|
-
var COLOR_TO_BUTTON_STYLE = function (theme, color) {
|
|
33
|
+
var COLOR_TO_BUTTON_STYLE = function (theme, color, disabled) {
|
|
34
34
|
return ({
|
|
35
|
-
primary: css(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
primary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
36
|
+
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.primaryDisabled) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n ", "\n "], ["\n color: ", ";\n background: ", ";\n ", "\n "])), theme.color.foreground.neutralAlt, theme.color.background.primary, HOVER(css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.primaryActive)))),
|
|
37
|
+
secondary: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
38
|
+
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBaseDisabled) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n ", "\n "], ["\n background: ", ";\n color: ", ";\n ", "\n "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase, HOVER(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)))),
|
|
39
|
+
danger: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
40
|
+
? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.dangerDisabled) : css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n ", "\n "], ["\n color: ", ";\n background: ", ";\n ", "\n "])), theme.color.foreground.neutralAlt, theme.color.background.danger, HOVER(css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.dangerActive)))),
|
|
41
|
+
textNeutral: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
42
|
+
? css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background: none;\n color: ", ";\n "], ["\n background: none;\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled) : css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background: none;\n color: ", ";\n ", "\n "], ["\n background: none;\n color: ", ";\n ", "\n "])), theme.color.foreground.neutralBase, HOVER(css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)))),
|
|
43
|
+
textDanger: css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
44
|
+
? css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background: none;\n color: ", ";\n "], ["\n background: none;\n color: ", ";\n "])), theme.color.foreground.dangerDisabled) : css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background: none;\n color: ", ";\n ", "\n "], ["\n background: none;\n color: ", ";\n ", "\n "])), theme.color.foreground.danger, HOVER(css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.danger)))),
|
|
45
|
+
textPrimary: css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
46
|
+
? css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n background: none;\n color: ", ";\n "], ["\n background: none;\n color: ", ";\n "])), theme.color.foreground.primaryDisabled) : css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n background: none;\n color: ", ";\n ", "\n "], ["\n background: none;\n color: ", ";\n ", "\n "])), theme.color.foreground.primary, HOVER(css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.primary)))),
|
|
41
47
|
}[color]);
|
|
42
48
|
};
|
|
43
49
|
var SIZE_TO_BUTTON_STYLE = {
|
|
44
|
-
large: css(
|
|
45
|
-
medium: css(
|
|
46
|
-
small: css(
|
|
47
|
-
xsmall: css(
|
|
50
|
+
large: css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n padding: 16px 20px;\n gap: 10px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n "], ["\n padding: 16px 20px;\n gap: 10px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n "]))),
|
|
51
|
+
medium: css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n padding: 14px 16px;\n gap: 8px;\n\n svg {\n width: 20px;\n height: 20px;\n }\n "], ["\n padding: 14px 16px;\n gap: 8px;\n\n svg {\n width: 20px;\n height: 20px;\n }\n "]))),
|
|
52
|
+
small: css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n padding: 10px 12px;\n gap: 8px;\n\n svg {\n width: 16px;\n height: 16px;\n }\n "], ["\n padding: 10px 12px;\n gap: 8px;\n\n svg {\n width: 16px;\n height: 16px;\n }\n "]))),
|
|
53
|
+
xsmall: css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n padding: 6px 8px;\n gap: 4px;\n\n svg {\n width: 12px;\n height: 12px;\n }\n "], ["\n padding: 6px 8px;\n gap: 4px;\n\n svg {\n width: 12px;\n height: 12px;\n }\n "]))),
|
|
48
54
|
};
|
|
49
55
|
var SIZE_TO_LABEL_STYLE = {
|
|
50
|
-
large: css(
|
|
51
|
-
medium: css(
|
|
52
|
-
small: css(
|
|
53
|
-
xsmall: css(
|
|
56
|
+
large: css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n font-size: 20px;\n line-height: 24px;\n "], ["\n font-size: 20px;\n line-height: 24px;\n "]))),
|
|
57
|
+
medium: css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n "], ["\n font-size: 18px;\n line-height: 20px;\n "]))),
|
|
58
|
+
small: css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 16px;\n "], ["\n font-size: 14px;\n line-height: 16px;\n "]))),
|
|
59
|
+
xsmall: css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 16px;\n "], ["\n font-size: 14px;\n line-height: 16px;\n "]))),
|
|
54
60
|
};
|
|
55
61
|
/**
|
|
56
62
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
|
|
@@ -59,14 +65,15 @@ var Button = React.forwardRef(function Button(props, ref) {
|
|
|
59
65
|
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"]);
|
|
60
66
|
var theme = useTheme();
|
|
61
67
|
return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
|
|
62
|
-
css(
|
|
63
|
-
|
|
68
|
+
css(templateObject_35 || (templateObject_35 = __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: Pretendard;\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: Pretendard;\n text-decoration: none;\n\n width: ", ";\n "])), disabled
|
|
69
|
+
? css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n cursor: default;\n pointer-events: none;\n "], ["\n cursor: default;\n pointer-events: none;\n "]))) : css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))), fullWidth ? "100%" : "auto"),
|
|
70
|
+
COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
|
|
64
71
|
SIZE_TO_BUTTON_STYLE[size],
|
|
65
72
|
], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
|
|
66
73
|
});
|
|
67
|
-
var Label = styled.span(
|
|
74
|
+
var Label = styled.span(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n font-weight: 400;\n white-space: nowrap;\n ", "\n"], ["\n font-weight: 400;\n white-space: nowrap;\n ", "\n"])), function (_a) {
|
|
68
75
|
var size = _a.size;
|
|
69
76
|
return SIZE_TO_LABEL_STYLE[size];
|
|
70
77
|
});
|
|
71
78
|
export default Button;
|
|
72
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
|
|
79
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36;
|