@croquiscom/pds 0.22.0 → 0.23.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @croquiscom/pds
 
+## 0.23.1
+
+### Patch Changes
+
+- 3b77d51: 전역 Reset 스타일 box-sizing: border-box 추가
+
+## 0.23.0
+
+### Minor Changes
+
+- ddf084e: Input, Textarea, Dropdown 컴포넌트 스타일 변경
+- 5497c25: Button, IconButton variant 및 스타일 변경
+
+  ## BreakPoint
+
+  Button variant가 다음과 같이 변경되었습니다.
+
+  - variant => kind
+  - variant 제거
+    - brand
+    - negative
+    - outlined_primary
+    - outlined_black
+    - outlined_white
+    - outlined_negative
+    - dotted
+
+  IconButton variant가 다음과 같이 변경되었습니다.
+
+  - variant => kind
+
 ## 0.22.0
 
 ### Minor Changes

package/README.md

@@ -68,6 +68,10 @@ yarn storybook
 │   │   ├── generated
 │   │   ├── Icon.stories.tsx
 │   │   └── Icon.stories.mdx
+│   ├── images
+│   │   ├── generated
+│   │   ├── Images.stories.tsx
+│   │   └── Images.stories.mdx
 │   ├── global_styles
 │   ├── themes
 │   ├── styles
@@ -76,8 +80,10 @@ yarn storybook
 │   ├── types
 │   └── index.ts
 └── tools
-    ├── svgr-component-template.js
-    └── svgr-index-template.js
+    ├── svgr-icons-component-template.js
+    ├── svgr-icons-template.js
+    ├── svgr-images-component-template.js
+    └── svgr-images-template.js
 ```
 
 - **[COMPONENT]**: 컴포넌트 디렉토리 이름은 소문자, 구분자는 -로 (eg. toggle-switch) 작성합니다. 하위에는 관련 컴포넌트 파일과 해당 컴포넌트의 스토리북(`*.stories.tsx`) 파일을 포함합니다.
@@ -86,7 +92,7 @@ yarn storybook
   - 각 컴포넌트 디렉토리와 src 하위의 `index.ts`를 통해 export 합니다.
 - **global_styles**: 리셋 스타일을 포함한 글로벌 스타일을 포함합니다.
   - 리셋 스타일을 위한 class 네임은 prefix로 `pds-`를 붙여줍니다.
-- **themes**: color, typography와 같은 theme과 관련된 스타일, 스타일 토큰을 포함합니다.
+- **foundation**: color, typography와 같은 theme과 관련된 스타일, 스타일 토큰을 포함합니다.
 - **styles**: 컴포넌트에 공용으로 사용할 스타일, 스타일 함수를 포함합니다.
 - **hooks**: 커스텀 훅을 포함합니다.
 - **stories**: 스토리북용 컴포넌트나 스타일, 컴포넌트 외의 스토리북 문서
@@ -95,12 +101,12 @@ yarn storybook
 
 ### 아이콘 추가
 
-⚠️ SVGR을 통해 svg파일을 리액트 컴포넌트로 제네레이트합니다. `src/icons/generated` 하위에서 직접 수정하지 말아주세요!
+⚠️ SVGR을 통해 svg파일을 리액트 컴포넌트로 제네레이트합니다. `src/[icons|images]/generated` 하위에서 직접 수정하지 말아주세요!
 
-- `assets/icons`에 svg를 추가합니다.
+- `assets/icons`, `assets/images`에 svg를 추가합니다.
 - `yarn svgr`을 실행합니다.
-- `src/icons/generated` 하위에 제네레이트된 아이콘 리액트 컴포넌트와 `src/icons/generated/index.ts`에 해당 컴포넌트의 export가 추가된 것을 확인합니다.
-- `yarn storybook`을 실행하여 스토리북 내에서 Icon/Icons 메뉴로 이동하여 목록에서 해당 아이콘이 잘 추가되었는지 확입니다.
+- `src/[icons|images]/generated` 하위에 제네레이트된 아이콘 리액트 컴포넌트와 `src/[icons|images]/generated/index.ts`에 해당 컴포넌트의 export가 추가된 것을 확인합니다.
+- `yarn storybook`을 실행하여 스토리북 내에서 Icon/Icons, Image/Images 메뉴로 이동하여 목록에서 해당 아이콘이 잘 추가되었는지 확입니다.
 
 ### PR
 

package/dist/button/Button.d.ts

@@ -1,19 +1,19 @@
 import React, { ButtonHTMLAttributes, ReactElement } from 'react';
-import { ButtonSize, ButtonVariant } from './types';
+import { ButtonSize, ButtonKind } from './types';
 import { IconProps } from '../icons/generated';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     fill?: boolean;
     /** @default secondary */
-    variant?: ButtonVariant;
+    kind?: ButtonKind;
     /** @default medium */
     size?: ButtonSize;
     /** @default button */
     type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
     /** @default false */
     loading?: boolean;
-    /** 좌측 영역에 렌더링 될 아이콘 요소 */
+    /** @desc 좌측 영역에 렌더링 될 아이콘 요소 */
     startIcon?: ReactElement<IconProps>;
-    /** 우측 영역에 렌더링 될 아이콘 요소 */
+    /** @desc 우측 영역에 렌더링 될 아이콘 요소 */
     endIcon?: ReactElement<IconProps>;
 }
 export interface ButtonIconProps {

package/dist/button/Button.stories.d.ts

@@ -2,17 +2,11 @@ import React from 'react';
 import { ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Button").ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
 export default _default;
-export declare const Brand: any;
 export declare const Primary: any;
 export declare const Secondary: any;
 export declare const Black: any;
-export declare const Negative: any;
-export declare const OutlinedPrimary: any;
-export declare const OutlinedNegative: any;
-export declare const OutlinedBlack: any;
-export declare const OutlinedWhite: any;
-export declare const Dotted: any;
 export declare const StartIcon: any;
 export declare const EndIcon: any;
 export declare const Loading: any;
+export declare const FullWidth: any;
 export declare const Focus: () => JSX.Element;

package/dist/button/IconButton.d.ts

@@ -1,11 +1,16 @@
 import React, { ReactElement } from 'react';
-import { ButtonShape, IconButtonVariant } from './types';
+import { ButtonShape, IconButtonKind } from './types';
 import { ButtonProps } from './Button';
 import { IconProps } from '../icons/generated';
-export interface IconButtonProps extends Omit<ButtonProps, 'size' | 'loading' | 'startIcon' | 'endIcon'> {
-    /** @default secondary */
-    variant?: IconButtonVariant;
-    /** 렌더링 될 아이콘 요소 */
+export interface IconButtonProps extends Omit<ButtonProps, 'size' | 'loading' | 'startIcon' | 'endIcon' | 'kind'> {
+    /**
+     * @desc shape 'circle'의 경우 적용되지 않습니다.
+     * @default outlined_secondary
+     */
+    kind?: IconButtonKind;
+    /**
+     * @desc 렌더링 될 아이콘 요소
+     */
     icon?: ReactElement<IconProps>;
     /** @default rectangle */
     shape?: ButtonShape;

package/dist/button/IconButton.stories.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-};
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./IconButton").IconButtonProps & React.RefAttributes<HTMLButtonElement>>>;
 export default _default;
 export declare const Rectangle: any;
 export declare const Circle: any;

package/dist/button/TextButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonProps } from './Button';
 import { TextButtonKind, TextButtonSize } from './types';
-export interface TextButtonProps extends Omit<ButtonProps, 'loading' | 'variant'> {
+export interface TextButtonProps extends Omit<ButtonProps, 'loading' | 'kind'> {
     /** @default text */
     kind?: TextButtonKind;
     /** @default false */

package/dist/button/styles.d.ts

@@ -1,6 +1,6 @@
-import { ButtonSize, ButtonVariant, ButtonShape, TextButtonKind, TextButtonSize } from './types';
+import { ButtonSize, ButtonKind, ButtonShape, TextButtonKind, TextButtonSize, IconButtonKind } from './types';
 export declare const button_base_css: import("@emotion/utils").SerializedStyles;
-export declare const getButtonVariant: (variant?: ButtonVariant) => import("@emotion/utils").SerializedStyles;
+export declare const getButtonKind: (kind?: ButtonKind | IconButtonKind) => import("@emotion/utils").SerializedStyles;
 export declare const button_size_css: Record<ButtonSize, string>;
 export declare const button_icon_size_css: Record<ButtonSize, number>;
 export declare const text_button_icon_size_css: Record<TextButtonSize, number>;

package/dist/button/types.d.ts

@@ -1,6 +1,6 @@
-export declare type ButtonVariant = 'brand' | 'primary' | 'secondary' | 'black' | 'negative' | 'outlined_primary' | 'outlined_black' | 'outlined_white' | 'outlined_negative' | 'dotted';
+export declare type ButtonKind = 'primary' | 'secondary' | 'black';
 export declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 export declare type ButtonShape = 'rectangle' | 'circle';
-export declare type IconButtonVariant = 'secondary' | 'outlined_primary' | 'outlined_negative';
+export declare type IconButtonKind = 'outlined_secondary' | 'outlined_primary' | 'outlined_negative';
 export declare type TextButtonKind = 'text' | 'link';
 export declare type TextButtonSize = Exclude<ButtonSize, 'xsmall' | 'xlarge'>;

package/dist/dropdown/styles.d.ts

@@ -1,27 +1,20 @@
 export declare const dropdown_label_base_css: import("@emotion/utils").SerializedStyles;
-export declare const dropdown_label_expanded_style: {
-    border: string;
-    '&:hover': {
-        border: string;
-    };
-};
 export declare const dropdown_label_selected_style: {
     color: string;
 };
 export declare const dropdown_item_group_css: import("@emotion/utils").SerializedStyles;
 export declare const dropdown_item_base_css: import("@emotion/utils").SerializedStyles;
 export declare const dropdown_item_disabled_style: {
-    backgroundColor: string;
     color: string;
     cursor: string;
-};
-export declare const dropdown_item_selected_style: {
-    backgroundColor: string;
-    color: string;
     '&:hover, &:focus': {
         backgroundColor: string;
     };
 };
+export declare const dropdown_item_selected_style: {
+    color: string;
+    backgroundColor: string;
+};
 export declare const dropdown_item_focused_style: {
     backgroundColor: string;
 };