Merge pull request #9 from tableflowhq/feature/stepper-styles

Adjusted stepper styles and added rowClick to the Table component

Author: ciminelli

src/Stepper/style/Stepper.module.scss

@@ -44,8 +44,8 @@
     &: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);

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<{