@team-monolith/cds 1.6.0 → 1.6.1

package/dist/patterns/SegmentedControl/SegmentedControlButton.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { ButtonProps } from "../..";
-export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size"> {
+export interface SegmentedControlButtonProps extends Omit<ButtonProps, "color" | "size" | "startIcon" | "endIcon"> {
     value: string;
+    startIcon?: React.ReactNode | ((isActive: boolean) => React.ReactNode);
+    endIcon?: React.ReactNode | ((isActive: boolean) => React.ReactNode);
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -20,7 +20,7 @@ import { Button, shadows } from "../..";
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export const SegmentedControlButton = React.forwardRef(function SegmentedControlButton(props, ref) {
-    const { onClick } = props, other = __rest(props, ["onClick"]);
+    const { onClick, startIcon, endIcon } = props, other = __rest(props, ["onClick", "startIcon", "endIcon"]);
     const context = useContext(SegmentedControlGroupPropsContext);
     const handleClick = (e) => {
         var _a;
@@ -30,20 +30,17 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
+    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, startIcon: typeof startIcon === "function" ? startIcon(isActive) : startIcon, endIcon: typeof endIcon === "function" ? endIcon(isActive) : endIcon, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
 });
 const StyledButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "isActive",
-})(({ theme, isActive }) => css `
+})(({ isActive }) => css `
     display: flex;
     justify-content: center;
     flex-grow: 1;
     ${isActive &&
     `
       box-shadow: ${shadows.shadow04};
-      svg {
-        color: ${theme.color.foreground.primary};
-      }
       span {
         font-weight: 700;
       }

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { SquareButtonProps } from "../..";
-export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size"> {
+export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size" | "icon"> {
     value: string;
+    icon: React.ReactNode | ((isActive: boolean) => React.ReactNode);
 }
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -20,7 +20,7 @@ import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsC
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export const SegmentedControlSquareButton = React.forwardRef(function SegmentedControlSquareButton(props, ref) {
-    const { onClick } = props, other = __rest(props, ["onClick"]);
+    const { onClick, icon } = props, other = __rest(props, ["onClick", "icon"]);
     const context = useContext(SegmentedControlGroupPropsContext);
     const handleClick = () => {
         var _a;
@@ -30,20 +30,17 @@ export const SegmentedControlSquareButton = React.forwardRef(function SegmentedC
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick })));
+    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, icon: typeof icon === "function" ? icon(isActive) : icon, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick })));
 });
 const StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
-})(({ theme, isActive }) => css `
+})(({ isActive }) => css `
     display: flex;
     justify-content: center;
     flex-grow: 1;
     ${isActive &&
     `
-      box-shadow: ${shadows.shadow04};
-      svg {
-        color: ${theme.color.foreground.primary};
-      }
+      box-shadow: ${shadows.shadow04}; 
       span {
         font-weight: 700;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,