@team-monolith/cds 0.8.4 → 0.9.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.
|
@@ -17,6 +17,8 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
|
|
|
17
17
|
endIcon?: React.ReactNode;
|
|
18
18
|
/** 컴포넌트 내 표기될 문자열 */
|
|
19
19
|
label: string;
|
|
20
|
+
/** 전체 너비 유무 */
|
|
21
|
+
fullWidth?: boolean;
|
|
20
22
|
}
|
|
21
23
|
export type ButtonProps<RootComponentType extends React.ElementType = ButtonTypeMap["defaultComponent"]> = PolymorphicProps<ButtonTypeMap<RootComponentType>, RootComponentType>;
|
|
22
24
|
export interface ButtonTypeMap<RootComponentType extends React.ElementType = "button"> {
|
|
@@ -56,10 +56,10 @@ var SIZE_TO_LABEL_STYLE = {
|
|
|
56
56
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
|
|
57
57
|
*/
|
|
58
58
|
var Button = React.forwardRef(function Button(props, ref) {
|
|
59
|
-
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, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label"]);
|
|
59
|
+
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
60
|
var theme = useTheme();
|
|
61
61
|
return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
|
|
62
|
-
css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n cursor: pointer;\n &:disabled {\n cursor: default;\n pointer-events: none;\n }\n\n font: inherit;\n text-decoration: none;\n "], ["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n border: none;\n border-radius: 8px;\n\n cursor: pointer;\n &:disabled {\n cursor: default;\n pointer-events: none;\n }\n\n font: inherit;\n text-decoration: none;\n "]))),
|
|
62
|
+
css(templateObject_21 || (templateObject_21 = __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 cursor: pointer;\n &:disabled {\n cursor: default;\n pointer-events: none;\n }\n\n font: inherit;\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 cursor: pointer;\n &:disabled {\n cursor: default;\n pointer-events: none;\n }\n\n font: inherit;\n text-decoration: none;\n\n width: ", ";\n "])), (fullWidth ? "100%" : "auto")),
|
|
63
63
|
COLOR_TO_BUTTON_STYLE(theme, color),
|
|
64
64
|
SIZE_TO_BUTTON_STYLE[size],
|
|
65
65
|
], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
|
package/dist/icons/Custom.d.ts
CHANGED
|
@@ -15,3 +15,11 @@ export declare const customSymbolSvg: string;
|
|
|
15
15
|
export declare const CustomSymbolIcon: (props: {
|
|
16
16
|
className?: string;
|
|
17
17
|
}) => JSX.Element;
|
|
18
|
+
export declare const customGoogleSvg: string;
|
|
19
|
+
export declare const CustomGoogleIcon: (props: {
|
|
20
|
+
className?: string;
|
|
21
|
+
}) => JSX.Element;
|
|
22
|
+
export declare const customWhaleSvg: string;
|
|
23
|
+
export declare const CustomWhaleIcon: (props: {
|
|
24
|
+
className?: string;
|
|
25
|
+
}) => JSX.Element;
|
package/dist/icons/Custom.js
CHANGED
|
@@ -22,3 +22,9 @@ export var CustomProblemIcon = function (props) { return (_jsxs("svg", __assign(
|
|
|
22
22
|
import customSymbolSvgImport from "./custom/symbol.svg";
|
|
23
23
|
export var customSymbolSvg = customSymbolSvgImport;
|
|
24
24
|
export var CustomSymbolIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "currentColor", d: "M11.8927 2C6.98164 2 3 5.80096 3 10.4903C3 14.0308 5.26988 17.0622 8.4957 18.336C9.05262 18.5557 9.36122 19.1512 9.19366 19.7238L8.83323 20.9592C8.66206 21.5427 9.17196 22.1009 9.76987 21.9845C11.478 21.6495 14.564 20.7587 17.0701 18.4644C19.9898 15.7908 20.7854 12.9527 20.7854 10.4915C20.7854 5.80337 16.8037 2.0012 11.8927 2.0012V2Z" }) }))); };
|
|
25
|
+
import customGoogleSvgImport from "./custom/google.svg";
|
|
26
|
+
export var customGoogleSvg = customGoogleSvgImport;
|
|
27
|
+
export var CustomGoogleIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z", fill: "currentColor" }) }))); };
|
|
28
|
+
import customWhaleSvgImport from "./custom/whale.svg";
|
|
29
|
+
export var customWhaleSvg = customWhaleSvgImport;
|
|
30
|
+
export var CustomWhaleIcon = function (props) { return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M13.834 5.80006C12.7674 6.51562 11.9359 7.17053 11.2243 7.73094C9.69999 8.93152 8.72638 9.69833 7.17354 9.69833C5.3568 9.69833 2.43202 7.88378 3.45298 4.28945C3.46442 4.26459 3.46614 4.23632 3.45779 4.21025C3.44944 4.18419 3.43165 4.16226 3.40796 4.14882C3.38264 4.13564 3.35343 4.13223 3.32579 4.13919C3.29816 4.14613 3.27398 4.16301 3.25781 4.18662C1.78218 6.32766 1.13261 8.93724 1.43085 11.5261C1.7291 14.1151 2.95467 16.5055 4.87785 18.2495C3.97843 19.1515 2.91239 19.8677 1.73986 20.3574C1.71407 20.3695 1.69226 20.3889 1.67698 20.4131C1.6617 20.4373 1.6536 20.4654 1.6536 20.4942C1.6536 20.5229 1.6617 20.551 1.67698 20.5752C1.69226 20.5995 1.71407 20.6188 1.73986 20.6311C3.70974 21.2359 6.05046 21.1059 7.87921 20.1774L7.89722 20.1682C8.47353 19.8761 9.01631 19.5211 9.51577 19.1098C10.1437 18.6346 10.6948 18.0643 11.1493 17.4193C12.0817 16.1083 13.0711 14.0805 14.1897 11.1727C15.7272 7.1761 17.9973 5.21638 20.2885 4.20476C20.3577 4.17452 20.4281 4.14579 20.4988 4.12008C20.5693 4.09438 20.5588 4.046 20.4988 4.0354C20.3953 4.0178 20.2912 4.00568 20.1864 3.99912C19.1804 3.9235 16.628 3.9235 13.834 5.80006Z", fill: "currentColor" }), _jsx("path", { d: "M20.9522 4.47713L20.8396 4.51192C18.2391 5.43581 16.0276 8.04272 14.5922 11.8427C13.6102 14.4572 12.7619 16.1779 11.756 17.5994C11.305 18.2428 10.7569 18.8112 10.1314 19.2839C9.80568 19.5468 9.4609 19.7849 9.09992 19.9961L8.46783 20.3726C10.5586 21.1145 12.8272 21.1799 14.9568 20.5599C17.0863 19.9398 18.9703 18.6653 20.3455 16.9143C21.7208 15.1634 22.5185 13.0234 22.6272 10.7936C22.736 8.56377 22.1504 6.35543 20.9522 4.47713Z", fill: "currentColor" })] }))); };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path
|
|
3
|
+
d="M13.834 5.80006C12.7674 6.51562 11.9359 7.17053 11.2243 7.73094C9.69999 8.93152 8.72638 9.69833 7.17354 9.69833C5.3568 9.69833 2.43202 7.88378 3.45298 4.28945C3.46442 4.26459 3.46614 4.23632 3.45779 4.21025C3.44944 4.18419 3.43165 4.16226 3.40796 4.14882C3.38264 4.13564 3.35343 4.13223 3.32579 4.13919C3.29816 4.14613 3.27398 4.16301 3.25781 4.18662C1.78218 6.32766 1.13261 8.93724 1.43085 11.5261C1.7291 14.1151 2.95467 16.5055 4.87785 18.2495C3.97843 19.1515 2.91239 19.8677 1.73986 20.3574C1.71407 20.3695 1.69226 20.3889 1.67698 20.4131C1.6617 20.4373 1.6536 20.4654 1.6536 20.4942C1.6536 20.5229 1.6617 20.551 1.67698 20.5752C1.69226 20.5995 1.71407 20.6188 1.73986 20.6311C3.70974 21.2359 6.05046 21.1059 7.87921 20.1774L7.89722 20.1682C8.47353 19.8761 9.01631 19.5211 9.51577 19.1098C10.1437 18.6346 10.6948 18.0643 11.1493 17.4193C12.0817 16.1083 13.0711 14.0805 14.1897 11.1727C15.7272 7.1761 17.9973 5.21638 20.2885 4.20476C20.3577 4.17452 20.4281 4.14579 20.4988 4.12008C20.5693 4.09438 20.5588 4.046 20.4988 4.0354C20.3953 4.0178 20.2912 4.00568 20.1864 3.99912C19.1804 3.9235 16.628 3.9235 13.834 5.80006Z"
|
|
4
|
+
fill="currentColor" />
|
|
5
|
+
<path
|
|
6
|
+
d="M20.9522 4.47713L20.8396 4.51192C18.2391 5.43581 16.0276 8.04272 14.5922 11.8427C13.6102 14.4572 12.7619 16.1779 11.756 17.5994C11.305 18.2428 10.7569 18.8112 10.1314 19.2839C9.80568 19.5468 9.4609 19.7849 9.09992 19.9961L8.46783 20.3726C10.5586 21.1145 12.8272 21.1799 14.9568 20.5599C17.0863 19.9398 18.9703 18.6653 20.3455 16.9143C21.7208 15.1634 22.5185 13.0234 22.6272 10.7936C22.736 8.56377 22.1504 6.35543 20.9522 4.47713Z"
|
|
7
|
+
fill="currentColor" />
|
|
8
|
+
</svg>
|