@team-monolith/cds 0.3.1 → 0.4.0

package/dist/components/Banner.d.ts

@@ -6,7 +6,7 @@ export interface BannerProps {
     /** 컴포넌트 내 헤드라인으로 표기될 문자열 */
     headline?: string;
     /** 컴포넌트 내용으로 표기될 값 */
-    content: React.ReactNode;
+    content?: React.ReactNode;
     /** 컴포넌트 좌측에 표기될 아이콘 */
     icon?: React.ReactNode;
     /** 컴포넌트의 색상 */

package/dist/components/Banner.js

@@ -51,7 +51,7 @@ var Banner = React.forwardRef(function (props, ref) {
             COLOR_TO_STYLE(theme, color),
             fullWidth
                 ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                width: 100%;\n              "], ["\n                width: 100%;\n              "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                border-radius: 12px;\n                width: fit-content;\n                min-width: 343px;\n              "], ["\n                border-radius: 12px;\n                width: fit-content;\n                min-width: 343px;\n              "]))),
-        ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, __assign({ setPaddingRight: !close && !buttonLabel }, { children: [headline && _jsx(HeadlineDiv, { children: headline }), _jsx("div", { children: content })] })), buttonLabel && (_jsx(BannerButton, __assign({ onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(CloseButton, __assign({ onClick: onClose }, { children: _jsx(StyledCloseFillIcon, {}) })))] })));
+        ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, __assign({ setPaddingRight: !close && !buttonLabel }, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx("div", { children: content })] })), buttonLabel && (_jsx(BannerButton, __assign({ onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(CloseButton, __assign({ onClick: onClose }, { children: _jsx(StyledCloseFillIcon, {}) })))] })));
 });
 var StyledCloseFillIcon = styled(CloseFillIcon)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  padding: 14px;\n  width: 20px;\n  height: 20px;\n\n  color: currentColor;\n"], ["\n  display: block;\n  padding: 14px;\n  width: 20px;\n  height: 20px;\n\n  color: currentColor;\n"])));
 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"])));

package/dist/components/Button.js

@@ -58,7 +58,7 @@ var SIZE_TO_LABEL_STYLE = {
 var Button = React.forwardRef(function Button(props, ref) {
     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"]);
     var theme = useTheme();
-    return (_jsxs(Component, __assign({}, other, { className: className, ref: ref, css: [
+    return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
             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        "]))),
             COLOR_TO_BUTTON_STYLE(theme, color),
             SIZE_TO_BUTTON_STYLE[size],

package/dist/components/InputBase.js

@@ -38,7 +38,7 @@ var SIZE_TO_STYLES = function (size) {
 };
 export function InputBase(props) {
     var className = props.className, color = props.color, size = props.size, placeholder = props.placeholder, _a = props.disabled, disabled = _a === void 0 ? false : _a, startIcon = props.startIcon, startLabel = props.startLabel, endLabel = props.endLabel, endIcon = props.endIcon, inputProps = props.inputProps, inputRef = props.inputRef, _b = props.fullWidth, fullWidth = _b === void 0 ? false : _b, onChange = props.onChange, onClear = props.onClear, defaultValue = props.defaultValue, value = props.value;
-    return (_jsxs(InputContainer, __assign({ className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth }, { children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(StyledInput, __assign({}, inputProps, { ref: inputRef, onChange: onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })), endLabel && _jsx("span", { children: endLabel }), endIcon, onClear && (_jsx(ClearButton, __assign({ onClick: onClear, disabled: disabled }, { children: _jsx(CloseCircleFillIcon, {}) })))] })));
+    return (_jsxs(InputContainer, __assign({ className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth }, { children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(StyledInput, __assign({}, inputProps, { ref: inputRef, onChange: onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })), endLabel && _jsx("span", { children: endLabel }), endIcon, onClear && (_jsx(ClearButton, __assign({ onClick: onClear, disabled: disabled, tabIndex: -1 }, { children: _jsx(CloseCircleFillIcon, {}) })))] })));
 }
 var InputContainer = styled.div(function (_a) {
     var theme = _a.theme, color = _a.color, inputSize = _a.inputSize, disabled = _a.disabled, fullWidth = _a.fullWidth;

package/dist/index.d.ts

@@ -22,7 +22,7 @@ export * from "./components/Tag";
 export { default as Tooltip } from "./components/Tooltip";
 export * from "./components/Tooltip";
 export { default as color } from "./foundation/color";
-export { default as shadow } from "./foundation/shadows";
+export { default as shadows } from "./foundation/shadows";
 export * from "./icons/brand";
 export * from "./icons/map";
 export * from "./icons/system";

package/dist/index.js

@@ -22,7 +22,7 @@ export * from "./components/Tag";
 export { default as Tooltip } from "./components/Tooltip";
 export * from "./components/Tooltip";
 export { default as color } from "./foundation/color";
-export { default as shadow } from "./foundation/shadows";
+export { default as shadows } from "./foundation/shadows";
 export * from "./icons/brand";
 export * from "./icons/map";
 export * from "./icons/system";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/cds/components/Banner.tsx

@@ -16,7 +16,7 @@ export interface BannerProps {
   headline?: string;
 
   /** 컴포넌트 내용으로 표기될 값 */
-  content: React.ReactNode;
+  content?: React.ReactNode;
 
   /** 컴포넌트 좌측에 표기될 아이콘 */
   icon?: React.ReactNode;
@@ -108,7 +108,7 @@ const Banner = React.forwardRef<any, BannerProps>(
         {icon && <IconDiv>{icon}</IconDiv>}
         <TextContainer setPaddingRight={!close && !buttonLabel}>
           {headline && <HeadlineDiv>{headline}</HeadlineDiv>}
-          <div>{content}</div>
+          {content && <div>{content}</div>}
         </TextContainer>
         {buttonLabel && (
           <BannerButton onClick={onButtonClick}>{buttonLabel}</BannerButton>

package/src/cds/components/Button.tsx

@@ -213,6 +213,7 @@ const Button: ButtonComponent = React.forwardRef(function Button<
 
   return (
     <Component
+      type="button"
       {...other}
       className={className}
       ref={ref}

package/src/cds/components/InputBase.tsx

@@ -167,7 +167,7 @@ export function InputBase(props: InputBaseProps): React.ReactElement {
       {endLabel && <span>{endLabel}</span>}
       {endIcon}
       {onClear && (
-        <ClearButton onClick={onClear} disabled={disabled}>
+        <ClearButton onClick={onClear} disabled={disabled} tabIndex={-1}>
           <CloseCircleFillIcon />
         </ClearButton>
       )}

package/src/cds/index.ts

@@ -34,7 +34,7 @@ export { default as Tooltip } from "./components/Tooltip";
 export * from "./components/Tooltip";
 
 export { default as color } from "./foundation/color";
-export { default as shadow } from "./foundation/shadows";
+export { default as shadows } from "./foundation/shadows";
 
 export * from "./icons/brand";
 export * from "./icons/map";