@croquiscom/pds 8.16.3 → 8.18.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 8.18.0
+
+### Minor Changes
+
+- c005db8: Badge 아이콘 크기 제한 해제 및 startIcon prop 추가
+
+## 8.17.0
+
+### Minor Changes
+
+- c13d7fd: Arrow 아이콘 추가
+
 ## 8.16.3
 
 ### Patch Changes

package/assets/icons/ArrowBottom.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M4.46967 8.53033L12 16.0607L19.5303 8.53033L18.4697 7.46967L12 13.9393L5.53033 7.46967L4.46967 8.53033Z" fill="#363644"/>
+  <path d="M4 20.25H20V18.75H4V20.25Z" fill="#363644"/>
+</svg>

package/assets/icons/ArrowTop.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M4 5.25H20V3.75H4V5.25Z" fill="#363644"/>
+  <path d="M12 7.93934L4.46967 15.4697L5.53033 16.5303L12 10.0607L18.4697 16.5303L19.5303 15.4697L12 7.93934Z" fill="#363644"/>
+</svg>

package/assets/icons/Change.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M7 2.93933L12.0303 7.96966L10.9697 9.03032L7.75 5.81065L7.75 21H6.25L6.25 5.81065L3.03033 9.03032L1.96967 7.96966L7 2.93933Z" fill="#363644"/>
+  <path d="M17.75 18.1893L20.9697 14.9697L22.0303 16.0303L17 21.0607L11.9697 16.0303L13.0303 14.9697L16.25 18.1893L16.25 2.99999L17.75 2.99999L17.75 18.1893Z" fill="#363644"/>
+</svg>

package/assets/icons/ChangeBold.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M7.00001 2.58582L12.2071 7.79292L10.7929 9.20714L8.00001 6.41424L8.00001 21H6.00001L6.00001 6.41424L3.20712 9.20714L1.79291 7.79292L7.00001 2.58582Z" fill="#363644"/>
+  <path d="M18 17.5858L20.7929 14.7929L22.2071 16.2071L17 21.4142L11.7929 16.2071L13.2071 14.7929L16 17.5858L16 3.00003L18 3.00003V17.5858Z" fill="#363644"/>
+</svg>

package/assets/icons/ColoredTrendIncreasingLine.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M14.2126 14.6173C14.0903 14.8292 13.8723 14.968 13.6286 14.9894C13.3849 15.0108 13.1461 14.9119 12.9887 14.7245L9.91412 11.0625L3.94951 21.3936C3.7424 21.7523 3.28371 21.8752 2.92499 21.6681C2.56627 21.461 2.44337 21.0023 2.65047 20.6436L9.15047 9.38522C9.2728 9.17334 9.49079 9.03444 9.73451 9.01308C9.97824 8.99172 10.2171 9.09059 10.3744 9.27796L13.449 12.94L17.8601 5.29975L14.7903 5.92352C14.3844 6.006 13.9884 5.74381 13.906 5.33789C13.8235 4.93197 14.0857 4.53604 14.4916 4.45356L19.3915 3.45792C19.7974 3.37543 20.1933 3.63763 20.2758 4.04355L21.2714 8.94342C21.3539 9.34933 21.0917 9.74526 20.6858 9.82774C20.2799 9.91023 19.884 9.64803 19.8015 9.24211L19.1544 6.05784L14.2126 14.6173Z" fill="#4769F7"/>
+</svg>

package/dist/components/badge/Badge.d.ts

@@ -9,11 +9,21 @@ export interface BadgeProps {
     size?: BadgeSize;
     /** @default black */
     color?: BadgeColor;
+    /**
+     * @deprecated endIcon이 있을 경우 무시됩니다. endIcon을 사용해주세요.
+     */
+    icon?: ReactElement<IconProps>;
+    /**
+     * 라벨 좌측 영역에 렌더링 될 아이콘 요소
+     *  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.
+     *  - Icon 컴포넌트 size props가 없으면 기본으로 8이 지정됩니다.
+     */
+    startIcon?: ReactElement<IconProps>;
     /**
      * 라벨 우측 영역에 렌더링 될 아이콘 요소
      *  - Icon 컴포넌트 color props가 있더라도 BadgeColor에 따라 currentColor가 지정됩니다.
-     *  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 8로 고정됩니다.
+     *  - Icon 컴포넌트 size props가 없으면 기본으로 8이 지정됩니다.
      */
-    icon?: ReactElement<IconProps>;
+    endIcon?: ReactElement<IconProps>;
 }
-export declare const Badge: ({ className, kind, size, color, icon, children, }: PropsWithChildren<BadgeProps>) => React.JSX.Element;
+export declare const Badge: ({ className, kind, size, color, icon, startIcon, endIcon, children, }: PropsWithChildren<BadgeProps>) => React.JSX.Element;

package/dist/components/badge/Badge.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof Badge>;
 export declare const Outline: Story;
 export declare const Fill: Story;
 export declare const Icon: Story;
+export declare const DeprecatedIconProp: Story;

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

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

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@ export interface IconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
     secondaryColor?: string;
 }
+export { default as IconArrowBottom } from './ArrowBottom';
 export { default as IconArrowChevronDoubleLeftBold } from './ArrowChevronDoubleLeftBold';
 export { default as IconArrowChevronDoubleRightBold } from './ArrowChevronDoubleRightBold';
 export { default as IconArrowChevronDown } from './ArrowChevronDown';
@@ -20,6 +21,7 @@ export { default as IconArrowDirectionUp } from './ArrowDirectionUp';
 export { default as IconArrowIncrease } from './ArrowIncrease';
 export { default as IconArrowIndent } from './ArrowIndent';
 export { default as IconArrowStick } from './ArrowStick';
+export { default as IconArrowTop } from './ArrowTop';
 export { default as IconArrowTriangleDown } from './ArrowTriangleDown';
 export { default as IconArrowTriangleUp } from './ArrowTriangleUp';
 export { default as IconBarChart } from './BarChart';
@@ -61,6 +63,8 @@ export { default as IconCategoryLife } from './CategoryLife';
 export { default as IconCategoryShop } from './CategoryShop';
 export { default as IconCategoryZDelivery } from './CategoryZDelivery';
 export { default as IconCellphone } from './Cellphone';
+export { default as IconChange } from './Change';
+export { default as IconChangeBold } from './ChangeBold';
 export { default as IconCheck } from './Check';
 export { default as IconCheckBold } from './CheckBold';
 export { default as IconChecklist } from './Checklist';
@@ -133,6 +137,7 @@ export { default as IconColoredSiren } from './ColoredSiren';
 export { default as IconColoredStar } from './ColoredStar';
 export { default as IconColoredThumbsUp } from './ColoredThumbsUp';
 export { default as IconColoredTip } from './ColoredTip';
+export { default as IconColoredTrendIncreasingLine } from './ColoredTrendIncreasingLine';
 export { default as IconColoredWarning } from './ColoredWarning';
 export { default as IconColoredWarningRed } from './ColoredWarningRed';
 export { default as IconColoredWrite } from './ColoredWrite';