@croquiscom/pds 0.36.0 → 0.37.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @croquiscom/pds
 
+## 0.37.1
+
+### Patch Changes
+
+- fc20524: FormLabel width값 커스텀 가능하도록 수정
+
+## 0.37.0
+
+### Minor Changes
+
+- dd74b5b: BasicModal BackButton 추가
+- afc5c74: IconPause20 추가
+
+### Patch Changes
+
+- 5cd44e7: PageHeader, SectionTitle 컨테이너 분리
+
 ## 0.36.0
 
 ### Minor Changes

package/assets/icons/Pause20.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 19H18V1H12.6667M2 19H7.33333V1H2V19Z" fill="#363644"/>
+</svg>

package/dist/components/form/FormField.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode, PropsWithChildren } from 'react';
 import { HelpTextProps } from '../text';
+import { CSSValueWithLength } from '../../styles';
 export interface FormFieldProps {
     className?: string;
     label?: string;
     rightAddon?: ReactNode;
     required?: boolean;
     helper?: HelpTextProps;
+    labelWidth?: CSSValueWithLength;
 }
-export declare const FormField: ({ className, label, rightAddon, required, helper, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;
+export declare const FormField: ({ className, label, rightAddon, required, helper, labelWidth, children, }: PropsWithChildren<FormFieldProps>) => JSX.Element;

package/dist/components/form/FormField.stories.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FormField } from './FormField';
-declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
+declare const _default: ComponentMeta<({ className, label, rightAddon, required, helper, labelWidth, children, }: React.PropsWithChildren<import("./FormField").FormFieldProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
+export declare const LabelWith: any;
 export declare const WithRadioGroup: ComponentStory<typeof FormField>;
 export declare const WithCheckboxGroup: ComponentStory<typeof FormField>;
 export declare const WithHelpPopover: any;

package/dist/components/form/FormLabel.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode, LabelHTMLAttributes } from 'react';
 import { HelpTextProps } from '../text';
+import { CSSValueWithLength } from '../../styles';
 export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     /** @default false */
     required?: boolean;
@@ -7,5 +8,6 @@ export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     helper?: HelpTextProps;
     /** 라벨 우측 렌더링될 Addon 요소 */
     rightAddon?: ReactNode;
+    width?: CSSValueWithLength;
 }
 export declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/form/FormLabel.stories.d.ts

@@ -4,5 +4,6 @@ declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./
 export default _default;
 export declare const Base: any;
 export declare const Required: any;
+export declare const Width: any;
 export declare const Help: any;
 export declare const HelpWithRequired: any;

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

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

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

@@ -123,6 +123,7 @@ export { default as IconOrdering16 } from './Ordering16';
 export { default as IconOrders18 } from './Orders18';
 export { default as IconOutlinkOne14 } from './OutlinkOne14';
 export { default as IconOutlinkTwo14 } from './OutlinkTwo14';
+export { default as IconPause20 } from './Pause20';
 export { default as IconPenaltyBad20 } from './PenaltyBad20';
 export { default as IconPenaltyGood20 } from './PenaltyGood20';
 export { default as IconPenaltyNotsobad20 } from './PenaltyNotsobad20';

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

@@ -4,6 +4,10 @@ export interface ModalProps extends ModalOverlayBaseProps {
     title?: ReactNode;
     confirmText?: string;
     cancelText?: string;
+    /**
+     * @default false
+     */
+    backButton?: boolean;
     /**
      * @default true
      */
@@ -18,9 +22,10 @@ export interface ModalProps extends ModalOverlayBaseProps {
     footerAddon?: ReactNode;
     onConfirm?: () => void;
     onCancel?: () => void;
+    onClickBackButton?: () => void;
 }
 export declare const MIN_WIDTH = 480;
-export declare const Modal: ({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, dense, fill, footerAddon, onConfirm, onCancel, onClose, onExited, ...props }: PropsWithChildren<ModalProps>) => JSX.Element;
+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 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;
 }, {}, {}>;

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ opened: openProp, children, title, width, confirmText, cancelText, closeButton, dense, fill, footerAddon, onConfirm, onCancel, onClose, onExited, ...props }: React.PropsWithChildren<import("./Modal").ModalProps>) => JSX.Element>;
+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>;
 export default _default;
 export declare const BasicModal: any;
 export declare const BasicModalDense: 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;

package/dist/container/index.d.ts

@@ -2,3 +2,4 @@ export * from './topBar';
 export * from './footer';
 export * from './top-navigation';
 export * from './page-header';
+export * from './section-title';

package/dist/container/page-header/PageHeader.d.ts

@@ -1,23 +1,15 @@
-import React, { ReactNode, PropsWithChildren } from 'react';
-export type PageHeaderDirection = 'horizontal' | 'vertical';
-export type PageHeaderSize = 'small' | 'medium' | 'large';
+import React, { PropsWithChildren } from 'react';
 export interface PageHeaderProps {
     /** @default false */
     dense?: boolean;
-    /** @default horizontal */
-    direction?: PageHeaderDirection;
-    /** @default large */
-    size?: PageHeaderSize;
-    caption?: string;
-    title: ReactNode;
-    description?: ReactNode;
-    textButton?: ReactNode;
-    actions?: ReactNode;
+    /** @default true */
+    border?: boolean;
 }
-export declare const PageHeader: ({ dense, direction, size, caption, title, description, textButton, actions, children, }: PropsWithChildren<PageHeaderProps>) => JSX.Element;
+export declare const PageHeader: ({ dense, border, children }: PropsWithChildren<PageHeaderProps>) => JSX.Element;
 export declare const Header: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
 } & {
     dense: boolean;
+    border: boolean;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/dist/container/page-header/PageHeader.stories.d.ts

@@ -1,11 +1,8 @@
 import React from 'react';
 import { ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ dense, direction, size, caption, title, description, textButton, actions, children, }: React.PropsWithChildren<import("./PageHeader").PageHeaderProps>) => JSX.Element>;
+declare const _default: ComponentMeta<({ dense, border, children }: React.PropsWithChildren<import("./PageHeader").PageHeaderProps>) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Dense: any;
-export declare const Vertical: any;
-export declare const SizeWithHorizontal: () => JSX.Element[];
-export declare const SizeWithVertical: () => JSX.Element[];
+export declare const WithSectionTitleVertical: any;
 export declare const WithLineTab: () => JSX.Element;
-export declare const Custom: any;

package/dist/container/section-title/SectionTitle.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type SectionTitleDirection = 'horizontal' | 'vertical';
+export type SectionTitleSize = 'small' | 'medium' | 'large';
+export interface SectionTitleProps {
+    /** @default horizontal */
+    direction?: SectionTitleDirection;
+    /** @default large */
+    size?: SectionTitleSize;
+    caption?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    textButton?: ReactNode;
+    actions?: ReactNode;
+}
+export declare const SectionTitle: ({ direction, size, caption, title, description, textButton, actions, }: SectionTitleProps) => JSX.Element;

package/dist/container/section-title/SectionTitle.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ direction, size, caption, title, description, textButton, actions, }: import("./SectionTitle").SectionTitleProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const Vertical: any;
+export declare const SizeWithHorizontal: () => JSX.Element;
+export declare const SizeWithVertical: () => JSX.Element;
+export declare const Custom: any;

package/dist/container/section-title/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionTitle';