@croquiscom/pds 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @croquiscom/pds
 
+## 2.8.0
+
+### Minor Changes
+
+- 0b2ad5a: IconBell 아이콘, Divider color 옵션, TopBar container 작은해상도 예시 추가
+- 0b2ad5a: Semantic Color Background Scrim 추가
+- 0b2ad5a: Menu dense, onMenuGroupOpenChange 옵션 추가
+- 0b2ad5a: Drawer 컴포넌트 추가
+
 ## 2.7.0
 
 ### Minor Changes

package/assets/icons/Bell.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 16.25V9.86111C4.25 5.64351 7.73403 2.25 12 2.25C16.266 2.25 19.75 5.64351 19.75 9.86111V16.25H21V17.75H15.75V18C15.75 20.0711 14.0711 21.75 12 21.75C9.92893 21.75 8.25 20.0711 8.25 18V17.75H3V16.25H4.25ZM5.75 9.86111C5.75 6.50014 8.53398 3.75 12 3.75C15.466 3.75 18.25 6.50014 18.25 9.86111V16.25H5.75V9.86111ZM9.75 17.75V18C9.75 19.2426 10.7574 20.25 12 20.25C13.2426 20.25 14.25 19.2426 14.25 18V17.75H9.75Z" fill="#363644"/>
+</svg>

package/dist/components/divider/Divider.d.ts

@@ -13,6 +13,13 @@ export interface DividerProps {
     spacing?: CSSValueWithLength;
     /** @default 'small' */
     size?: DividerSize;
+    /**
+     * border color를 지정할 수 있습니다.
+     *  - 지정하지 않을 경우 size medium 일경우 semantic_colors.background.base로 적용됩니다.
+     *  - 지정하지 않을 경우 size small 일경우 semantic_colors.border.default로 적용됩니다.
+     * @default semantic_colors.border.default
+     */
+    color?: string;
     /**
      * 지정된 길이를 설정할 수 있습니다.
      *  - 지정하지 않을 경우 direction horizontal 이라면 width 값이 100%로 고정됩니다.

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CSSValueWithLength } from '../../styles';
+export type DrawerDirection = 'left' | 'right';
+export interface DrawerProps {
+    className?: string;
+    /**
+     * @default 'right'
+     */
+    direction?: DrawerDirection;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1000
+     */
+    zIndex?: number;
+    /**
+     * @default 280
+     */
+    width?: CSSValueWithLength;
+    opened?: boolean;
+    /**
+     * outside 영역 클릭시 닫힘 사용 여부
+     * @default true
+     */
+    canClickOutside?: boolean;
+    /**
+     * escapeKey 키이벤트 닫힘 사용 여부
+     * @default true
+     */
+    canCloseEscapeKey?: boolean;
+    /**
+     * main app node 바깥영역으로 생성할지 여부
+     * @default false
+     */
+    noUsePortal?: boolean;
+    /**
+     * 오버레이가 렌더링되는 동안 스크롤 금지 여부
+     * @default true
+     */
+    lockScroll?: boolean;
+    onClose?: () => void;
+}
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/drawer/Drawer.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Drawer } from './Drawer';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Drawer").DrawerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>>;
+export default _default;
+export declare const Base: any;
+export declare const Width: any;
+export declare const NoUsePortal: any;
+export declare const Direction: any;
+export declare const DrawerWithNavigation: ComponentStory<typeof Drawer>;

package/dist/components/drawer/DrawerCloseButton.d.ts

@@ -0,0 +1,12 @@
+import React, { ButtonHTMLAttributes } from 'react';
+export interface DrawerCloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * @default 24
+     */
+    size?: number;
+    /**
+     * @default semantic_colors.content.tertiary
+     */
+    color?: string;
+}
+export declare const DrawerCloseButton: React.ForwardRefExoticComponent<DrawerCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+export * from './DrawerCloseButton';

package/dist/components/icons/generated/Bell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgBell: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgBell;

package/dist/components/icons/generated/index.d.ts

@@ -19,6 +19,7 @@ export { default as IconArrowStick } from './ArrowStick';
 export { default as IconArrowTriangleDown } from './ArrowTriangleDown';
 export { default as IconArrowTriangleUp } from './ArrowTriangleUp';
 export { default as IconBarChart } from './BarChart';
+export { default as IconBell } from './Bell';
 export { default as IconBelow } from './Below';
 export { default as IconBoxBestFill } from './BoxBestFill';
 export { default as IconBoxCanada } from './BoxCanada';

package/dist/components/index.d.ts

@@ -27,3 +27,4 @@ export * from './time-picker';
 export * from './pagination';
 export * from './file-upload';
 export * from './table';
+export * from './drawer';

package/dist/components/menu/Menu.d.ts

@@ -10,16 +10,26 @@ export interface MenuContextProps {
         id: string;
         groupId: string;
     }) => void;
+    onMenuGroupOpenChange?: (groupId: string) => void;
     toggleMode: boolean;
+    dense: boolean;
 }
 export declare const MenuContext: React.Context<MenuContextProps>;
 export declare const useMenuContext: () => MenuContextProps;
 export interface MenuProps extends HTMLAttributes<HTMLUListElement> {
     selectedMenu?: MenuContextProps['activeMenu'];
-    onClickMenu?: (id: MenuContextProps['activeMenuGroup']) => void;
+    onClickMenu?: (id: MenuContextProps['activeMenu']) => void;
+    /**
+     * MenuGroup 서브 메뉴 open/close시 이벤트를 전달합니다.
+     */
+    onMenuGroupOpenChange?: (id: MenuContextProps['activeMenuGroup']) => void;
     /**
      * Toggle 기능 사용 여부
      */
     toggleMode?: MenuContextProps['toggleMode'];
+    /**
+     * @default true
+     */
+    dense?: boolean;
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/menu/styles.d.ts

@@ -1,3 +1,11 @@
 export declare const menu_base_css: import("@emotion/utils").SerializedStyles;
 export declare const menu_item_base_css: import("@emotion/utils").SerializedStyles;
 export declare const menu_group_item_css: import("@emotion/utils").SerializedStyles;
+export declare function getMenuGroupStyles(dense: boolean): {
+    height: number;
+    padding: string;
+};
+export declare function getMenuItemStyles(dense: boolean): {
+    height: number;
+    padding: string;
+};

package/dist/container/topBar/TopBar.d.ts

@@ -1,10 +1,13 @@
 import { CSSProperties } from 'react';
+import { Typography } from '../../foundation';
+import { CSSValueWithLength } from '../../styles';
 export declare const TopBar: {
     Container: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme;
         as?: import("react").ElementType<any>;
     } & {
         backgroundColor?: CSSProperties['backgroundColor'];
+        height?: CSSValueWithLength;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
     Title: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme;
@@ -14,12 +17,10 @@ export declare const TopBar: {
         theme?: import("@emotion/react").Theme;
         as?: import("react").ElementType<any>;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Divider: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme;
-        as?: import("react").ElementType<any>;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
     ActionButton: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme;
         as?: import("react").ElementType<any>;
+    } & {
+        kind?: Typography;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 };

package/dist/container/topBar/TopBar.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Base: any;
+export declare const Mobile: any;

package/dist/foundation/semantic_colors.d.ts

@@ -5,6 +5,7 @@ export declare const semantic_colors: {
         elevated: string;
         disabled: string;
         base_inverse: string;
+        scrim: any;
     };
     border: {
         default: string;