@team-monolith/cds 0.1.0

package/src/cds/components/AlertDialog/AlertDialogActions.tsx

@@ -0,0 +1,34 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import React from "react";
+export interface AlertDialogActionsProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** Content 내용으로 표기될 값 */
+  children: React.ReactNode;
+}
+
+export const AlertDialogActions = React.forwardRef<
+  any,
+  AlertDialogActionsProps
+>((props, ref) => {
+  const { className, component: Component = "div", children, ...other } = props;
+  return (
+    <Component
+      {...other}
+      ref={ref}
+      className={className}
+      css={css`
+        grid-area: actions;
+
+        margin-top: 8px;
+        display: flex;
+        gap: 16px;
+        justify-content: flex-end;
+      `}
+    >
+      {children}
+    </Component>
+  );
+});

package/src/cds/components/AlertDialog/AlertDialogContent.tsx

@@ -0,0 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import React from "react";
+
+export interface AlertDialogContentProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** Content 내용으로 표기될 값 */
+  children: React.ReactNode;
+}
+
+export const AlertDialogContent = React.forwardRef<
+  any,
+  AlertDialogContentProps
+>((props, ref) => {
+  const { className, component: Component = "div", children, ...other } = props;
+  const theme = useTheme();
+  return (
+    <>
+      <Component
+        {...other}
+        ref={ref}
+        className={className}
+        css={css`
+          grid-area: content;
+
+          font-style: normal;
+          font-size: 18px;
+          line-height: 28px;
+          color: ${theme.color.foreground.neutralBase};
+        `}
+      >
+        {children}
+      </Component>
+    </>
+  );
+});

package/src/cds/components/AlertDialog/AlertDialogTitle.tsx

@@ -0,0 +1,63 @@
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import React from "react";
+import SquareButton from "../SquareButton";
+import { CloseFillIcon } from "../../icons/system";
+
+export interface AlertDialogTitleProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /**
+   * 제목의 X 버튼을 누르를 때 호출되는 callback.
+   * 이 속성이 전달되면 X 버튼을 Title 영역에 그립니다.
+   */
+  onClose?: () => void;
+
+  /** Content 내용으로 표기될 값 */
+  children: React.ReactNode;
+}
+
+export const AlertDialogTitle = React.forwardRef<any, AlertDialogTitleProps>(
+  (props, ref) => {
+    const {
+      className,
+      component: Component = "div",
+      onClose,
+      children,
+      ...other
+    } = props;
+    const theme = useTheme();
+    return (
+      <>
+        <Component
+          {...other}
+          ref={ref}
+          className={className}
+          css={css`
+            grid-area: title;
+            font-family: "Pretendard";
+            font-style: normal;
+            font-weight: 500;
+            font-size: 20px;
+            line-height: 36px;
+            color: ${theme.color.foreground.neutralBase};
+
+            display: flex;
+            justify-content: space-between;
+          `}
+        >
+          {children}
+          {onClose && (
+            <SquareButton
+              color="icon"
+              size="small"
+              icon={<CloseFillIcon />}
+              onClick={onClose}
+            />
+          )}
+        </Component>
+      </>
+    );
+  }
+);

package/src/cds/components/AlertDialog/index.tsx

@@ -0,0 +1,4 @@
+export * from "./AlertDialog";
+export * from "./AlertDialogTitle";
+export * from "./AlertDialogContent";
+export * from "./AlertDialogActions";

package/src/cds/components/Banner.tsx

@@ -0,0 +1,176 @@
+/** @jsxImportSource @emotion/react */
+import { css, SerializedStyles, Theme, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+import COLOR from "../foundation/color";
+import { CloseFillIcon } from "../icons/system";
+import { RESET_BUTTON } from "../utils/reset";
+
+export type BannerColor = "red" | "blue" | "green" | "yellow";
+
+export interface BannerProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** 컴포넌트 내 헤드라인으로 표기될 문자열 */
+  headline?: string;
+
+  /** 컴포넌트 내용으로 표기될 값 */
+  content: React.ReactNode;
+
+  /** 컴포넌트 좌측에 표기될 아이콘 */
+  icon?: React.ReactNode;
+
+  /** 컴포넌트의 색상 */
+  color: BannerColor;
+
+  /** 컴포넌트 우측에 표기될 버튼의 라벨 */
+  buttonLabel?: string;
+
+  /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
+  onButtonClick?: () => void;
+
+  /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
+  close?: boolean;
+
+  /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
+  onClose?: () => void;
+
+  /** 전체 너비 유무 */
+  fullWidth?: boolean;
+}
+
+const COLOR_TO_STYLE = (theme: Theme, color: BannerColor): SerializedStyles =>
+  ({
+    red: css`
+      background: ${theme.color.container.dangerContainer};
+      color: ${theme.color.container.dangerOnContainer};
+    `,
+    blue: css`
+      background: ${theme.color.container.primaryContainer};
+      color: ${theme.color.container.primaryOnContainer};
+    `,
+    green: css`
+      background: ${theme.color.container.successContainer};
+      color: ${theme.color.container.successOnContainer};
+    `,
+    yellow: css`
+      background: ${theme.color.container.warningContainer};
+      color: ${theme.color.container.warningOnContainer};
+    `,
+  }[color]);
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
+ */
+const Banner = React.forwardRef<any, BannerProps>(
+  (props, ref): React.ReactElement => {
+    const {
+      className,
+      component: Component = "div",
+      headline,
+      content,
+      icon,
+      color,
+      buttonLabel,
+      onButtonClick,
+      close,
+      onClose,
+      fullWidth,
+      ...other
+    } = props;
+    const theme = useTheme();
+    return (
+      <Component
+        {...other}
+        ref={ref}
+        className={className}
+        css={[
+          css`
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            color: ${COLOR.white};
+            line-height: 125%;
+          `,
+          COLOR_TO_STYLE(theme, color),
+          fullWidth
+            ? css`
+                width: 100%;
+              `
+            : css`
+                border-radius: 12px;
+                width: fit-content;
+                min-width: 343px;
+              `,
+        ]}
+      >
+        {icon && <IconDiv>{icon}</IconDiv>}
+        <TextContainer setPaddingRight={!close && !buttonLabel}>
+          {headline && <HeadlineDiv>{headline}</HeadlineDiv>}
+          <div>{content}</div>
+        </TextContainer>
+        {buttonLabel && (
+          <BannerButton onClick={onButtonClick}>{buttonLabel}</BannerButton>
+        )}
+        {close && (
+          <CloseButton onClick={onClose}>
+            <StyledCloseFillIcon />
+          </CloseButton>
+        )}
+      </Component>
+    );
+  }
+);
+
+const StyledCloseFillIcon = styled(CloseFillIcon)`
+  display: block;
+  padding: 14px;
+  width: 20px;
+  height: 20px;
+
+  color: currentColor;
+`;
+
+const IconDiv = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 16px 0px 16px 16px;
+`;
+
+const HeadlineDiv = styled.div`
+  font-weight: 700;
+`;
+
+const TextContainer = styled.div<{ setPaddingRight: boolean }>`
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px 0px 16px 16px;
+  gap: 4px;
+  ${(props) =>
+    props.setPaddingRight &&
+    css`
+      padding-right: 16px;
+    `};
+`;
+
+const BannerButton = styled.button`
+  ${RESET_BUTTON}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  color: currentColor;
+`;
+
+const CloseButton = styled.button`
+  ${RESET_BUTTON}
+  cursor: pointer;
+  color: currentColor;
+`;
+
+export default Banner;

package/src/cds/components/Button.tsx

@@ -0,0 +1,239 @@
+/** @jsxImportSource @emotion/react */
+import { css, SerializedStyles, Theme, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+import { HOVER } from "../utils/hover";
+
+export type ButtonColor =
+  | "primary"
+  | "secondary"
+  | "danger"
+  | "textNeutral"
+  | "textDanger"
+  | "textPrimary";
+
+export type ButtonSize = "large" | "medium" | "small" | "xsmall";
+
+export interface ButtonProps {
+  className?: string;
+  component?: React.ElementType;
+
+  /** 비활성화 여부 */
+  disabled?: boolean;
+
+  /** 컴포넌트 색상 */
+  color: ButtonColor;
+
+  /** 컴포넌트 크기 */
+  size: ButtonSize;
+
+  /** 컴포넌트 좌측에 표기될 아이콘 */
+  startIcon?: React.ReactNode;
+
+  /** 컴포넌트 우측에 표기될 아이콘 */
+  endIcon?: React.ReactNode;
+
+  /** 컴포넌트 내 표기될 문자열 */
+  label: string;
+
+  /** 버튼 클릭 시 호출될 콜백 함수 */
+  onClick?: () => void;
+}
+
+const COLOR_TO_BUTTON_STYLE = (theme: Theme, color: ButtonColor) =>
+  ({
+    primary: css`
+      background: ${theme.color.background.primary};
+      color: ${theme.color.foreground.neutralAlt};
+
+      ${HOVER(css`
+        background: ${theme.color.background.primaryActive};
+      `)}
+      &:disabled {
+        background: ${theme.color.background.primaryDisabled};
+      }
+    `,
+    secondary: css`
+      background: ${theme.color.background.neutralAlt};
+      color: ${theme.color.foreground.neutralBase};
+
+      ${HOVER(css`
+        background: ${theme.color.background.neutralAltActive};
+        color: ${theme.color.foreground.neutralBase};
+      `)}
+      &:disabled {
+        background: ${theme.color.background.neutralAlt};
+        color: ${theme.color.foreground.neutralBaseDisabled};
+      }
+    `,
+    danger: css`
+      background: ${theme.color.background.danger};
+      color: ${theme.color.foreground.neutralAlt};
+
+      ${HOVER(css`
+        background: ${theme.color.background.dangerActive};
+      `)}
+      &:disabled {
+        background: ${theme.color.background.dangerDisabled};
+      }
+    `,
+    textNeutral: css`
+      background: none;
+      color: ${theme.color.foreground.neutralBase};
+
+      ${HOVER(css`
+        background: ${theme.color.background.neutralAltActive};
+        color: ${theme.color.foreground.neutralBase};
+      `)}
+      &:disabled {
+        background: none;
+        color: ${theme.color.foreground.neutralBaseDisabled};
+      }
+    `,
+    textDanger: css`
+      background: none;
+      color: ${theme.color.foreground.danger};
+
+      ${HOVER(css`
+        background: ${theme.color.background.neutralAltActive};
+        color: ${theme.color.foreground.danger};
+      `)}
+      &:disabled {
+        background: none;
+        color: ${theme.color.foreground.dangerDisabled};
+      }
+    `,
+    textPrimary: css`
+      background: none;
+      color: ${theme.color.foreground.primary};
+
+      ${HOVER(css`
+        background: ${theme.color.background.neutralAltActive};
+        color: ${theme.color.foreground.primary};
+      `)}
+      &:disabled {
+        background: none;
+        color: ${theme.color.foreground.primaryDisabled};
+      }
+    `,
+  }[color]);
+
+const SIZE_TO_BUTTON_STYLE: { [K in ButtonSize]: SerializedStyles } = {
+  large: css`
+    padding: 16px 20px;
+    gap: 10px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  `,
+  medium: css`
+    padding: 14px 16px;
+    gap: 8px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  `,
+  small: css`
+    padding: 10px 12px;
+    gap: 8px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  `,
+  xsmall: css`
+    padding: 6px 8px;
+    gap: 4px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  `,
+};
+
+const SIZE_TO_LABEL_STYLE: { [K in ButtonSize]: SerializedStyles } = {
+  large: css`
+    font-size: 20px;
+    line-height: 24px;
+  `,
+  medium: css`
+    font-size: 18px;
+    line-height: 20px;
+  `,
+  small: css`
+    font-size: 14px;
+    line-height: 16px;
+  `,
+  xsmall: css`
+    font-size: 14px;
+    line-height: 16px;
+  `,
+};
+
+/**
+ * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
+ */
+const Button = React.forwardRef<any, ButtonProps>(
+  (props, ref): React.ReactElement => {
+    const {
+      className,
+      component: Component = "button",
+      disabled,
+      color,
+      size,
+      startIcon,
+      endIcon,
+      label,
+      onClick,
+      ...other
+    } = props;
+    const theme = useTheme();
+
+    return (
+      <Component
+        {...other}
+        className={className}
+        ref={ref}
+        css={[
+          css`
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+
+            border: none;
+            border-radius: 8px;
+
+            cursor: pointer;
+            &:disabled {
+              cursor: default;
+              pointer-events: none;
+            }
+
+            font: inherit;
+          `,
+          COLOR_TO_BUTTON_STYLE(theme, color),
+          SIZE_TO_BUTTON_STYLE[size],
+        ]}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        {startIcon}
+        <Label size={size}>{label}</Label>
+        {endIcon}
+      </Component>
+    );
+  }
+);
+
+const Label = styled.span<{ size: ButtonSize }>`
+  font-weight: 400;
+  ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
+`;
+
+export default Button;