@team-monolith/cds 0.27.0 → 0.28.0

package/README.md

@@ -23,4 +23,13 @@
 - 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
 - string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: `arrowDownCircleFillSvg`)
 - React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
-- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
+- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
+
+### 개발 및 배포 절차
+
+`npm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
+
+패키지 특성상 개발환경이 따로 존재하지 않으며 `npm run compile` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
+
+이때 npm team-monolith 에 소속되어 있어야 합니다.
+

package/dist/components/Popover.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface PopoverProps {
+    className?: string;
+    /** 제목 */
+    headline?: React.ReactNode;
+    /** 내용 */
+    content?: React.ReactNode;
+    /** 좌측 아이콘 */
+    icon?: React.ReactNode;
+    /** 우측 버튼 텍스트 */
+    buttonLabel?: string;
+    /** 우측 버튼 클릭시 동작 */
+    onButtonClick?: () => void;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export default Popover;

package/dist/components/Popover.js

@@ -0,0 +1,40 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import React from "react";
+import shadows from "../foundation/shadows";
+import { RESET_BUTTON } from "../utils/reset";
+import { HOVER } from "../utils/hover";
+import { css } from "@emotion/react";
+var Popover = React.forwardRef(function (props, ref) {
+    var className = props.className, headline = props.headline, content = props.content, icon = props.icon, buttonLabel = props.buttonLabel, onButtonClick = props.onButtonClick;
+    return (_jsxs(Container, __assign({ ref: ref, className: className }, { children: [icon != null && _jsx(Icon, { children: icon }), _jsxs(ContentArea, { children: [headline != null && _jsx(Headline, { children: headline }), content != null && _jsx(Content, { children: content })] }), buttonLabel != null && (_jsx(PopoverButton, __assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel })))] })));
+});
+export default Popover;
+var Container = styled.div(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    width: auto;\n    padding: 6px 16px;\n    gap: 12px;\n    border-radius: 100px;\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n  "], ["\n    display: inline-flex;\n    align-items: center;\n    width: auto;\n    padding: 6px 16px;\n    gap: 12px;\n    border-radius: 100px;\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n  "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase, shadows.shadow32);
+});
+var Icon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  width: 20px;\n  height: 20px;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  display: block;\n  width: 20px;\n  height: 20px;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var ContentArea = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1 0 auto;\n  font-size: 14px;\n  line-height: 20px;\n"], ["\n  flex: 1 0 auto;\n  font-size: 14px;\n  line-height: 20px;\n"])));
+var Headline = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: 2px;\n  font-weight: 700;\n"], ["\n  margin-bottom: 2px;\n  font-weight: 700;\n"])));
+var Content = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-weight: 400;\n"], ["\n  font-weight: 400;\n"])));
+var PopoverButton = styled.button(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n    margin: 4px;\n    padding: 6px 8px;\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 16px;\n    border-radius: 8px;\n    ", "\n  "], ["\n    ", "\n    margin: 4px;\n    padding: 6px 8px;\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 16px;\n    border-radius: 8px;\n    ", "\n  "])), RESET_BUTTON, theme.color.background.primary, theme.color.background.neutralAlt, HOVER(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n    "], ["\n      color: ", ";\n      background: ", ";\n    "])), theme.color.foreground.neutralAlt, theme.color.background.primaryActive)));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
 export * from "./components/PinInput";
+export { default as Popover } from "./components/Popover";
+export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
 export { default as SquareButton } from "./components/SquareButton";

package/dist/index.js

@@ -12,6 +12,8 @@ export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
 export * from "./components/PinInput";
+export { default as Popover } from "./components/Popover";
+export * from "./components/Popover";
 export { default as RadioInput } from "./components/RadioInput";
 export * from "./components/RadioInput";
 export { default as SquareButton } from "./components/SquareButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,