@croquiscom/pds 0.38.1 → 0.39.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @croquiscom/pds
 
+## 0.39.0
+
+### Minor Changes
+
+- 553b8e9: Modal fullScreen props 추가, Divider vertical spacing 추가
+
 ## 0.38.1
 
 ### Patch Changes

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { SpaceProps } from '../../styles';
 import { CSSValueWithLength } from '../../styles';
 export type direction = 'horizontal' | 'vertical';
 export type DividerSize = 'small' | 'medium';
-export interface DividerProps extends SpaceProps {
+export interface DividerProps {
     /** @default 'horizontal' */
     direction?: direction;
     spacing?: CSSValueWithLength;

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

@@ -6,5 +6,6 @@ declare const _default: ComponentMeta<import("@emotion/styled").StyledComponent<
 } & import("./Divider").DividerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {}>>;
 export default _default;
 export declare const Base: any;
+export declare const HorizontalSpacing: any;
 export declare const Vertical: any;
-export declare const Spacing: any;
+export declare const VerticalSpacing: any;

package/dist/components/modal/AlertModal.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ConfirmModalProps } from './ConfirmModal';
 import { NotificationKind } from '../notification';
 export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' | 'onCancel'> {
@@ -6,4 +7,5 @@ export interface AlertModalProps extends Omit<ConfirmModalProps, 'cancelText' |
      */
     kind?: NotificationKind;
 }
+export declare const AlertModal: ({ opened: openProp, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element;
 export declare const Alert: (properties: AlertModalProps) => Promise<void>;

package/dist/components/modal/AlertModal.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { AlertModal, AlertModalProps } from './AlertModal';
+declare const _default: ComponentMeta<({ opened: openProp, kind, dense, fill, title, confirmText, text, subtext, onConfirm, onExited, ...props }: AlertModalProps) => JSX.Element>;
+export default _default;
+export declare const Base: ComponentStory<typeof AlertModal>;
+export declare const Dense: ComponentStory<typeof AlertModal>;
+export declare const Fill: ComponentStory<typeof AlertModal>;
+export declare const Kind: ComponentStory<typeof AlertModal>;

package/dist/components/modal/ConfirmModal.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { ModalProps } from './Modal';
-export interface ConfirmModalProps extends Omit<ModalProps, 'closeButton' | 'onConfirm' | 'onCancel' | 'onClose' | 'width' | 'footerAddon'> {
+export interface ConfirmModalProps extends Omit<ModalProps, 'closeButton' | 'onConfirm' | 'onCancel' | 'onClose' | 'width' | 'footerAddon' | 'fullScreen'> {
     onConfirm?: () => void | Promise<void>;
     onCancel?: () => void | Promise<void>;
     text: ReactNode;
     subtext?: ReactNode;
 }
+export declare const ConfirmModal: ({ opened: openProp, title, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onExited, ...props }: ConfirmModalProps) => JSX.Element;
 export declare const Confirm: (properties: ConfirmModalProps) => Promise<boolean>;

package/dist/components/modal/ConfirmModal.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ConfirmModal } from './ConfirmModal';
+declare const _default: ComponentMeta<({ opened: openProp, title, dense, fill, text, subtext, confirmText, cancelText, onConfirm, onCancel, onExited, ...props }: import("./ConfirmModal").ConfirmModalProps) => JSX.Element>;
+export default _default;
+export declare const Base: ComponentStory<typeof ConfirmModal>;
+export declare const Dense: ComponentStory<typeof ConfirmModal>;
+export declare const Fill: ComponentStory<typeof ConfirmModal>;

package/dist/components/modal/Modal.d.ts

@@ -1,9 +1,14 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
+import { ButtonProps } from '../button';
+import { SpaceProps } from '../../styles';
 import { ModalOverlayBaseProps } from './ModalOverlay';
+export type ModalButtonProps = Omit<ButtonProps, 'onClick'>;
 export interface ModalProps extends ModalOverlayBaseProps {
     title?: ReactNode;
     confirmText?: string;
+    confirmButtonProps?: ModalButtonProps;
     cancelText?: string;
+    cancelButtonProps?: ModalButtonProps;
     /**
      * @default false
      */
@@ -16,16 +21,33 @@ export interface ModalProps extends ModalOverlayBaseProps {
      * @default false
      */
     dense?: boolean;
+    contentProps?: ModalContentProps;
     /**
-     * @desc Footer 영역 좌측 영역에 렌더링될 요소
+     * @desc Footer content, 커스텀 푸터 요소 사용시 default Footer(confirmText, cancelText)는 미노출됩니다.
      */
-    footerAddon?: ReactNode;
+    footer?: ReactNode;
+    /**
+     * @desc Modal Header position 고정 여부, fullScreen일 경우만 적용됩니다.
+     * @default false
+     */
+    fixedHeader?: boolean;
+    /**
+     * @desc Modal Footer position 고정 여부, fullScreen일 경우만 적용됩니다.
+     * @default false
+     */
+    fixedFooter?: boolean;
     onConfirm?: () => void;
     onCancel?: () => void;
     onClickBackButton?: () => void;
 }
+export interface ModalContentProps extends Pick<ModalProps, 'fixedHeader' | 'fixedFooter' | 'dense'>, SpaceProps {
+}
 export declare const MIN_WIDTH = 480;
-export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, footerAddon, onConfirm, onCancel, onClose, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
 export declare const ModalTitle: import("@emotion/styled").StyledComponent<(import("../text").BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)) & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+export declare const ModalContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & ModalContentProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/modal/Modal.stories.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, footerAddon, onConfirm, onCancel, onClose, onExited, onClickBackButton, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Modal } from './Modal';
+declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, backButton, dense, fill, fullScreen, fixedHeader, fixedFooter, footer, confirmButtonProps, cancelButtonProps, contentProps, onConfirm, onCancel, onClose, onExited, onClickBackButton, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
 export default _default;
-export declare const BasicModal: any;
-export declare const BasicModalDense: any;
+export declare const Base: any;
+export declare const Dense: any;
+export declare const Fill: any;
 export declare const canClickOutside: any;
-export declare const BasicModalWithBackButton: any;
-export declare const Custom: any;
-export declare const ConfirmModal: () => JSX.Element;
-export declare const ConfirmModalDenseWithFill: () => JSX.Element;
-export declare const AlertModal: () => JSX.Element;
-export declare const AlertModalDenseWithFill: () => JSX.Element;
-export declare const AlertModalKind: () => JSX.Element;
-export declare const NoticeModal: any;
+export declare const WithBackButton: any;
+export declare const CustomFooter: ComponentStory<typeof Modal>;
+export declare const CustomContent: ComponentStory<typeof Modal>;
+export declare const FullScreen: ComponentStory<typeof Modal>;

package/dist/components/modal/ModalOverlay.d.ts

@@ -3,10 +3,15 @@ import { CSSValueWithLength } from '../../styles';
 import { CornerRadiusSize } from '../../foundation';
 export interface ModalOverlayBaseProps {
     /**
-     * @desc 100% 너비 사용, Alert 또는 Confirm Modal의 경우 최소너비(480) 범위내에서 적용됩니다.
+     * @desc 안전여백을 포함한 100% 너비 사용, Alert 또는 Confirm Modal의 경우 최소너비(480) 범위내에서 적용됩니다.
      * @default false
      */
     fill?: boolean;
+    /**
+     * @desc 전체화면 가로 세로폭 사용 유무, Alert 또는 Confirm Modal의 경우 적용되지 않습니다.
+     * @default false
+     */
+    fullScreen?: boolean;
     width?: CSSValueWithLength;
     className?: string;
     opened?: boolean;
@@ -29,4 +34,4 @@ export interface ModalOverlayProps extends ModalOverlayBaseProps {
     borderRadiusSize?: CornerRadiusSize;
     setOpened: Dispatch<SetStateAction<boolean>>;
 }
-export declare const ModalOverlay: ({ width, maxWidth, borderRadiusSize, fill, className, children, opened: openProp, zIndex, canClickOutside, onExited, onClose, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;
+export declare const ModalOverlay: ({ width, maxWidth, borderRadiusSize, fill, fullScreen, className, children, opened: openProp, zIndex, canClickOutside, onExited, onClose, setOpened, }: PropsWithChildren<ModalOverlayProps>) => JSX.Element;

package/dist/components/modal/NoticeModal.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { ModalOverlayBaseProps } from './ModalOverlay';
-export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill'> {
+export interface NoticeModalProps extends Omit<ModalOverlayBaseProps, 'fill' | 'fullScreen'> {
     label?: string;
     title?: ReactNode;
     text?: ReactNode;

package/dist/components/modal/NoticeModal.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ opened: openProp, children, width, label, title, text, checkReplay, checkReplayText, onClose, onExited, onChangeCheckReplay, ...props }: React.PropsWithChildren<import("./NoticeModal").NoticeModalProps>) => JSX.Element>;
+export default _default;
+export declare const Base: any;