Merge branch 'main' into 808-implement-new-icon-variant-of-toggle

chanzuckerberg · Oct 16, 2024 · 25eb970 · 25eb970
2 parents a3ce137 + 8820260
commit 25eb970
Show file tree

Hide file tree

Showing 10 changed files with 461 additions and 44 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [21.5.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/[email protected]...@czi-sds/[email protected]) (2024-10-09)
+
+### Features
+
+- **icons:** add new s and xs sizes for the Book icon ([#873](https://github.com/chanzuckerberg/sci-components/issues/873)) ([a256f8c](https://github.com/chanzuckerberg/sci-components/commit/a256f8cc45d7f895130d9b326bace180f6a717e9))
+
+# [21.4.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/[email protected]...@czi-sds/[email protected]) (2024-10-09)
+
+### Features
+
+- **segmentedcontrol:** add disabled state in button definition and controlled/uncontrolled state ([#869](https://github.com/chanzuckerberg/sci-components/issues/869)) ([d59af72](https://github.com/chanzuckerberg/sci-components/commit/d59af72ced81f4e4577aa85b6cd272a343170931))
+
 # [21.3.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/[email protected]...@czi-sds/[email protected]) (2024-10-02)
 
 ### Bug Fixes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/components",
-  "version": "21.3.0",
+  "version": "21.5.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.cjs.d.ts",

diff --git a/packages/components/src/common/svgs/IconBookSmall.svg b/packages/components/src/common/svgs/IconBookSmall.svg
diff --git a/packages/components/src/core/Icon/map.ts b/packages/components/src/core/Icon/map.ts
@@ -5,6 +5,7 @@ import { ReactComponent as IconBarChartHorizontal3Small } from "../../common/svg
 import { ReactComponent as IconBarChartVertical3Small } from "../../common/svgs/IconBarChartVertical3Small.svg";
 import { ReactComponent as IconBarChartVertical4Small } from "../../common/svgs/IconBarChartVertical4Small.svg";
 import { ReactComponent as IconBookLarge } from "../../common/svgs/IconBookLarge.svg";
+import { ReactComponent as IconBookSmall } from "../../common/svgs/IconBookSmall.svg";
 import { ReactComponent as IconCheckCircleLarge } from "../../common/svgs/IconCheckCircleLarge.svg";
 import { ReactComponent as IconCheckCircleSmall } from "../../common/svgs/IconCheckCircleSmall.svg";
 import { ReactComponent as IconCheckSmall } from "../../common/svgs/IconCheckSmall.svg";
@@ -144,7 +145,7 @@ export interface IconNameToSizes {
   BarChartHorizontal3: "xs" | "s";
   BarChartVertical3: "xs" | "s";
   BarChartVertical4: "xs" | "s";
-  Book: "l" | "xl";
+  Book: "xs" | "s" | "l" | "xl";
   Check: "xs" | "s";
   CheckCircle: "xs" | "s" | "l" | "xl";
   ChevronDown: "xs" | "s" | "l" | "xl";
@@ -280,7 +281,7 @@ export const iconMap: Props = {
   },
   Book: {
     largeIcon: IconBookLarge,
-    smallIcon: null,
+    smallIcon: IconBookSmall,
   },
   Check: {
     largeIcon: null,

diff --git a/packages/components/src/core/SegmentedControl/__storybook__/index.stories.tsx b/packages/components/src/core/SegmentedControl/__storybook__/index.stories.tsx
@@ -3,6 +3,7 @@ import { BADGE } from "@geometricpanda/storybook-addon-badges";
 import { SegmentedControl } from "./stories/default";
 import { SEGMENTED_CONTROL_EXCLUDED_CONTROLS } from "./constants";
 import { TestDemo } from "./stories/test";
+import { ControlledSegmentedControlDemo } from "./stories/controlledSegmentedControl";
 
 export default {
   argTypes: {
@@ -24,15 +25,92 @@ export default {
 export const Default = {
   args: {
     buttonDefinition: [
-      { icon: "List", tooltipText: "List A", value: "A" },
-      { icon: "List", tooltipText: "List B", value: "B" },
-      { icon: "List", tooltipText: "List C", value: "C" },
-      { icon: "List", tooltipText: "List D", value: "D" },
+      {
+        icon: "List",
+        tooltipText: "List A",
+        value: "A",
+      },
+      {
+        icon: "List",
+        tooltipText: "List B",
+        value: "B",
+      },
+      {
+        icon: "List",
+        tooltipText: "List C",
+        value: "C",
+      },
+      {
+        icon: "List",
+        tooltipText: "List D",
+        value: "D",
+      },
     ],
   },
   render: SegmentedControl,
 };
 
+// Disabled Buttons
+
+export const WithDisabledButton = {
+  args: {
+    buttonDefinition: [
+      {
+        icon: "LinesHorizontal3",
+        tooltipText: "List A",
+        value: "A",
+      },
+      {
+        disabled: true,
+        icon: "LinesHorizontal3",
+        tooltipText: "List B",
+        value: "B",
+      },
+      {
+        icon: "LinesHorizontal3",
+        tooltipText: "List C",
+        value: "C",
+      },
+      {
+        icon: "LinesHorizontal3",
+        tooltipText: "List D",
+        value: "D",
+      },
+    ],
+  },
+  render: SegmentedControl,
+};
+
+// Controlled
+
+export const ControlledSegmentedControl = {
+  args: {
+    buttonDefinition: [
+      {
+        icon: "List",
+        tooltipText: "List A",
+        value: "A",
+      },
+      {
+        icon: "List",
+        tooltipText: "List B",
+        value: "B",
+      },
+      {
+        icon: "List",
+        tooltipText: "List C",
+        value: "C",
+      },
+      {
+        icon: "List",
+        tooltipText: "List D",
+        value: "D",
+      },
+    ],
+  },
+  render: ControlledSegmentedControlDemo,
+};
+
 // Test
 
 export const Test = {

diff --git a/...components/src/core/SegmentedControl/__storybook__/stories/controlledSegmentedControl.tsx b/...components/src/core/SegmentedControl/__storybook__/stories/controlledSegmentedControl.tsx
@@ -0,0 +1,20 @@
+import { Args } from "@storybook/react";
+import { useState } from "react";
+import RawSegmentedControl from "src/core/SegmentedControl";
+
+export const ControlledSegmentedControlDemo = (props: Args): JSX.Element => {
+  const { buttonDefinition, ...rest } = props;
+
+  const [value, setValue] = useState("C");
+  return (
+    <RawSegmentedControl
+      buttonDefinition={buttonDefinition}
+      onChange={(_event, newValue) => {
+        console.log(newValue);
+        setValue(newValue);
+      }}
+      value={value}
+      {...rest}
+    />
+  );
+};
diff --git a/packages/components/src/core/SegmentedControl/__storybook__/stories/default.tsx b/packages/components/src/core/SegmentedControl/__storybook__/stories/default.tsx
@@ -4,11 +4,5 @@ import RawSegmentedControl from "src/core/SegmentedControl";
 export const SegmentedControl = (props: Args): JSX.Element => {
   const { buttonDefinition, ...rest } = props;
 
-  return (
-    <RawSegmentedControl
-      buttonDefinition={buttonDefinition}
-      color="error"
-      {...rest}
-    />
-  );
+  return <RawSegmentedControl buttonDefinition={buttonDefinition} {...rest} />;
 };