Fix merge conflict

Author: alotropico

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tableflow/ui-library",
-    "version": "1.43.0",
+    "version": "1.49.0",
     "description": "A library of frontend components used by TableFlow",
     "repository": {
         "type": "git",

src/Button/style/Button.module.scss

@@ -57,8 +57,8 @@
         }
 
         &:is([disabled]) {
-            background-color: var(--color-primary-disabled);
-            color: var(--color-text-on-primary-disabled);
+            background-color: var(--color-primary-button-disabled);
+            color: var(--color-text-on-primary-button-disabled);
         }
     }
 

src/Checkbox/style/Checkbox.module.scss

@@ -1,6 +1,5 @@
 .container {
   display: inline-block;
-  display: flex;
   gap: var(--m-xs);
   align-items: center;
 

src/Stepper/index.tsx

@@ -4,27 +4,30 @@ import style from "./style/Stepper.module.scss";
 import Icon from "../Icon";
 
 export default function Stepper({ steps, current, clickable, setCurrent }: StepperProps) {
-    return (
-        <div className={style.stepper}>
-            {steps.map((step, i) => {
-                const done = i < current;
+  return (
+    <div className={style.stepper}>
+      {steps.map((step, i) => {
+        const done = i < current;
 
-                const Element = clickable ? "button" : "div";
+        const Element = clickable ? "button" : "div";
 
-                const buttonProps: any = clickable
-                    ? {
-                          onClick: () => setCurrent(i),
-                          type: "button",
-                      }
-                    : {};
+        const buttonProps: any = clickable
+          ? {
+              onClick: () => setCurrent(i),
+              type: "button",
+            }
+          : {};
 
-                return (
-                    <Element key={i} className={classes([style.step, i === current ? style.active : done && style.done])} {...buttonProps}>
-                        <div className={style.badge}>{done ? <Icon icon="check" /> : i + 1}</div>
-                        <div className={style.label}>{step.label}</div>
-                    </Element>
-                );
-            })}
-        </div>
-    );
+        return (
+          <Element
+            key={i}
+            className={classes([style.step, i === current ? style.active : done && style.done, steps.length < 4 && style.stepWide])}
+            {...buttonProps}>
+            <div className={style.badge}>{done ? <Icon icon="check" /> : i + 1}</div>
+            <div className={style.label}>{step.label}</div>
+          </Element>
+        );
+      })}
+    </div>
+  );
 }

src/Stepper/style/Stepper.module.scss

@@ -44,12 +44,20 @@
     &:not(:first-of-type) {
       &:before {
         content: "";
-        height: 2px;
-        width: min(140px, 10vw);
+        height: 1px;
+        width: min(140px, 4vw);
         background-color: var(--color-border);
         border-radius: 2px;
         margin-right: var(--m-xs);
       }
     }
   }
+
+  .stepWide {
+    &:not(:first-of-type) {
+      &:before {
+        width: min(120px, 10vw);
+      }
+    }
+  }
 }

src/Stepper/types/Stepper.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { StepperProps } from ".";
+import Stepper from "..";
+
+const steps = [
+  { label: "Upload", id: "upload" },
+  { label: "Select Header Row", id: "row-selection" },
+  { label: "Review", id: "review" },
+  { label: "Complete", id: "complete" },
+];
+
+export default {
+  title: "User Interface/Stepper",
+  component: Stepper,
+  argTypes: {},
+} as ComponentMeta<typeof Stepper>;
+
+const Template: ComponentStory<typeof Stepper> = (args: StepperProps) => {
+  return (
+    <div style={{ textAlign: "left" }}>
+      <Stepper {...args} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  steps,
+};

src/Table/Table.stories.tsx

@@ -24,3 +24,4 @@ Table.args = {
     hideColumns: ["id"],
     fixHeader: true,
 };
+Table.args.onRowClick = (row: any) => console.log("Row clicked", row);

src/Table/index.tsx

@@ -18,6 +18,7 @@ export default function Table({
     columnWidths = [],
     columnAlignments = [],
     fixHeader = false,
+    onRowClick,
 }: TableProps): React.ReactElement {
     // THEME
     // Tables receive a full CSS module as theme or applies default styles
@@ -60,7 +61,7 @@ export default function Table({
                 <div className={style.tbody} role="rowgroup">
                     {data.map((d, i) => {
                         const key = keyAsId && d?.[keyAsId] ? d[keyAsId] : i;
-                        const props = { datum: d };
+                        const props = { datum: d, onClick: onRowClick };
                         return <Row {...props} key={key?.toString()} />;
                     })}
                 </div>
@@ -74,13 +75,13 @@ export default function Table({
     );
 }
 
-const Row = ({ datum }: RowProps) => {
+const Row = ({ datum, onClick }: RowProps) => {
     const { style, highlightColumns, hideColumns, columnWidths, columnAlignments } = useContext(TableContext);
 
     const className = classes([style?.tr]);
 
     return (
-        <div className={className} role="row">
+        <div className={className} role="row" onClick={() => onClick?.(datum)}>
             {Object.keys(datum)
                 .filter((k) => !hideColumns.includes(datum[k]) && !hideColumns.includes(k))
                 .map((k, i) => {

src/Table/types/index.ts

@@ -31,11 +31,13 @@ export type TableProps = {
     columnWidths?: string[];
     columnAlignments?: ("left" | "center" | "right" | "")[];
     fixHeader?: boolean;
+    onRowClick?: (row: TableDatum) => void;
 };
 
 export type RowProps = {
     datum: TableDatum;
     isHeading?: boolean;
+    onClick?: (row: TableDatum) => void;
 };
 
 export type CellProps = PropsWithChildren<{

src/style/themes/common.scss

@@ -5,6 +5,7 @@
   --color-primary-hover: #{$primary-700};
   --color-primary-focus: #{$primary-600};
   --color-primary-disabled: #{$primary-200};
+  --color-primary-button-disabled: #3f3b55;
 
   --color-secondary: #{$gray-800};
   --color-secondary-hover: #{$gray-600};
@@ -15,6 +16,7 @@
 
   --color-text-on-primary: #{$base-white};
   --color-text-on-primary-disabled: #{$gray-500};
+  --color-text-on-primary-button-disabled: #{$base-white};
 
   --color-text-on-secondary: #{$gray-100};
   --color-text-on-secondary-disabled: #{$gray-600};