@team-monolith/cds 0.3.2 → 0.4.1

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/emotion.d.ts

@@ -0,0 +1,70 @@
+import "@emotion/react";
+
+interface CodleColors {
+  background: {
+    neutralBase: string;
+    neutralAlt: string;
+    neutralAltActive: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryActive: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryActive: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerActive: string;
+    dangerDisabled: string;
+    success: string;
+    successActive: string;
+    successDisabled: string;
+    info: string;
+    infoActive: string;
+    infoDisabled: string;
+    warning: string;
+    warningActive: string;
+    warningDisabled: string;
+  };
+  foreground: {
+    neutralBase: string;
+    neutralBaseDisabled: string;
+    neutralAlt: string;
+    neutralAltDisabled: string;
+    primary: string;
+    primaryDisabled: string;
+    secondary: string;
+    secondaryDisabled: string;
+    danger: string;
+    dangerDisabled: string;
+    success: string;
+    successDisabled: string;
+    info: string;
+    infoDisabled: string;
+    warning: string;
+    warningDisabled: string;
+  };
+  container: {
+    primaryContainer: string;
+    primaryOnContainer: string;
+    secondaryContainer: string;
+    secondaryOnContainer: string;
+    dangerContainer: string;
+    dangerOnContainer: string;
+    successContainer: string;
+    successOnContainer: string;
+    infoContainer: string;
+    infoOnContainer: string;
+    warningContainer: string;
+    warningOnContainer: string;
+    obsidianContainer: string;
+    obsidianOnContainer: string;
+    marbleContainer: string;
+    marbleOnContainer: string;
+  };
+}
+
+declare module "@emotion/react" {
+  export interface Theme {
+    color: CodleColors;
+  }
+}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference path="./svg.d.ts" />
+/// <reference path="./emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";

package/dist/index.js

@@ -1,3 +1,5 @@
+/// <reference path="./svg.d.ts" />
+/// <reference path="./emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";

package/dist/svg.d.ts

@@ -0,0 +1,10 @@
+declare module "*.svg" {
+  import * as React from "react";
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "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

@@ -1,3 +1,6 @@
+/// <reference path="./svg.d.ts" />
+/// <reference path="./emotion.d.ts" />
+
 export * from "./components/AlertDialog";
 
 export { default as Banner } from "./components/Banner";
@@ -62,3 +65,4 @@ export * from "./patterns/Table";
 
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
 export { light } from "./CodleDesignSystemProvider";
+

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "typeRoots": ["./@types"],
     "outDir": "./dist",
     "declaration": true,
     "allowJs": true,
@@ -17,6 +18,6 @@
     "isolatedModules": true,
     "jsx": "react-jsx"
   },
-  "include": ["src/cds", "src/cds/svg.d.ts"],
+  "include": ["src/cds"],
   "exclude": ["node_modules", "dist"]
 }