fix: PR feedback

homebound-team · Oct 6, 2023 · 1d4de78 · 1d4de78
1 parent 2d0f9e0
commit 1d4de78
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 17 deletions.
diff --git a/src/inputs/IconCardGroup.stories.tsx b/src/inputs/IconCardGroup.stories.tsx
@@ -1,7 +1,8 @@
 import { Meta } from "@storybook/react";
 import { IconCardGroup, IconCardGroupItemOption, IconCardGroupProps } from "./IconCardGroup";
-import { Chips, IconProps } from "src/components";
+import { Chips } from "src/components";
 import { useState } from "react";
+import { Css } from "src/Css";
 
 export default {
   component: IconCardGroup,
@@ -22,19 +23,14 @@ export function Default() {
   return (
     <div>
       <Chips values={values} />
-      <IconCardGroup
-        label="Icon Card Group"
-        // options={Object.values(IconCardGroupValues).map((value, i) => ({
-        //   icon: valuesToIconMap[value],
-        //   label: value,
-        //   value,
-        //   disabled: i === 2, // disable the third option
-        // }))}
-        options={categories}
-        onChange={(values) => setValues(values)}
-        values={values}
-        columns={3}
-      />
+      <div css={Css.df.wPx(500).$}>
+        <IconCardGroup
+          label="Icon Card Group"
+          options={categories}
+          onChange={(values) => setValues(values)}
+          values={values}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/inputs/IconCardGroup.tsx b/src/inputs/IconCardGroup.tsx
@@ -28,7 +28,6 @@ export interface IconCardGroupProps extends Pick<PresentationFieldProps, "labelS
   values: string[];
   errorMsg?: string;
   helperText?: string | ReactNode;
-  columns?: number;
   disabled?: boolean;
 }
 
@@ -41,7 +40,6 @@ export function IconCardGroup(props: IconCardGroupProps) {
     values,
     errorMsg,
     helperText,
-    columns = 1,
     disabled: isDisabled = false,
   } = props;
 
@@ -56,7 +54,7 @@ export function IconCardGroup(props: IconCardGroupProps) {
           <Label label={label} {...labelProps} {...tid.label} />
         </div>
       )}
-      <div css={Css.dg.gtc(`repeat(${columns}, 130px)`).gap2.$}>
+      <div css={Css.df.gap2.add({ flexWrap: "wrap" }).$}>
         {options.map((option) => {
           const { icon, label, disabled } = option;
           const isSelected = state.isSelected(option.value);