@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.21

package/src/stories/canvases/ButtonsCanvas.tsx

@@ -1,107 +1,107 @@
-import { AttachmentIcon } from "../../icons";
-import { Button } from "../../primitives";
-import { FigmaContent, FigmaPage, FigmaSection } from "../_layout";
-import { FIGMA_WIDTHS } from "./figma-widths";
-import {
-  BUTTON_VARIANT_SLOTS,
-  FIGMA_BUTTON_SLOTS,
-  FIGMA_BUTTONS_CANVAS,
-  FIGMA_BUTTONS_GRID,
-  type ButtonVisualState,
-} from "./figma-buttons-layout";
-import { IconButtonSnapshot } from "./helpers";
-
-const demoDropdownOptions = [
-  { label: "Option A", onSelect: () => undefined },
-  { label: "Option B", onSelect: () => undefined },
-];
-
-const slotProps = (visualState: ButtonVisualState) => ({
-  forcedState: visualState === "idle" ? undefined : visualState,
-  disabled: visualState === "disabled",
-});
-
-export const ButtonsCanvas = () => (
-  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttons}>
-    <FigmaContent padding={0}>
-      <div className="px-8 pb-8 pt-6">
-        <FigmaSection label="Button">
-          <div
-            className="relative"
-            style={{
-              width: FIGMA_BUTTONS_CANVAS.width,
-              height: FIGMA_BUTTONS_CANVAS.height,
-            }}
-          >
-            <div
-              data-figma-buttons-grid
-              className="absolute left-0 top-0"
-              style={{
-                width: FIGMA_BUTTONS_GRID.width,
-                height: FIGMA_BUTTONS_GRID.height,
-              }}
-            >
-              {FIGMA_BUTTON_SLOTS.map((slot) => (
-                <div
-                  key={`${slot.hierarchy}-${slot.visualState}`}
-                  className="absolute"
-                  style={{ left: slot.x, top: slot.y }}
-                >
-                  <Button
-                    hierarchy={slot.hierarchy}
-                    icon={AttachmentIcon}
-                    dropdownOptions={demoDropdownOptions}
-                    {...slotProps(slot.visualState)}
-                  >
-                    Button
-                  </Button>
-                </div>
-              ))}
-            </div>
-
-            {BUTTON_VARIANT_SLOTS.map((slot) => (
-              <div
-                key={`${slot.hierarchy}-${slot.variant}`}
-                data-visual-test-only
-                className="absolute"
-                style={{ left: slot.x, top: slot.y }}
-              >
-                {slot.variant === "noIcon" ? (
-                  <Button
-                    hierarchy={slot.hierarchy}
-                    dropdownOptions={demoDropdownOptions}
-                  >
-                    Button
-                  </Button>
-                ) : (
-                  <Button hierarchy={slot.hierarchy} icon={AttachmentIcon}>
-                    Button
-                  </Button>
-                )}
-              </div>
-            ))}
-          </div>
-        </FigmaSection>
-
-        <FigmaSection label="Icon Button" className="mt-8">
-          <div className="flex flex-wrap items-center gap-6">
-            <IconButtonSnapshot hierarchy="tertiary" visualState="idle" />
-            <IconButtonSnapshot hierarchy="tertiary" visualState="hover" />
-            <IconButtonSnapshot hierarchy="quaternary" visualState="idle" />
-            <IconButtonSnapshot hierarchy="quaternary" visualState="hover" />
-            <IconButtonSnapshot
-              hierarchy="quaternary"
-              visualState="idle"
-              size="small"
-            />
-            <IconButtonSnapshot
-              hierarchy="quaternary"
-              visualState="hover"
-              size="small"
-            />
-          </div>
-        </FigmaSection>
-      </div>
-    </FigmaContent>
-  </FigmaPage>
-);
+import { AttachmentIcon } from "../../icons";
+import { Button } from "../../primitives";
+import { FigmaContent, FigmaPage, FigmaSection } from "../_layout";
+import { FIGMA_WIDTHS } from "./figma-widths";
+import {
+  BUTTON_VARIANT_SLOTS,
+  FIGMA_BUTTON_SLOTS,
+  FIGMA_BUTTONS_CANVAS,
+  FIGMA_BUTTONS_GRID,
+  type ButtonVisualState,
+} from "./figma-buttons-layout";
+import { IconButtonSnapshot } from "./helpers";
+
+const demoDropdownOptions = [
+  { label: "Option A", onSelect: () => undefined },
+  { label: "Option B", onSelect: () => undefined },
+];
+
+const slotProps = (visualState: ButtonVisualState) => ({
+  forcedState: visualState === "idle" ? undefined : visualState,
+  disabled: visualState === "disabled",
+});
+
+export const ButtonsCanvas = () => (
+  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttons}>
+    <FigmaContent padding={0}>
+      <div className="px-8 pb-8 pt-6">
+        <FigmaSection label="Button">
+          <div
+            className="relative"
+            style={{
+              width: FIGMA_BUTTONS_CANVAS.width,
+              height: FIGMA_BUTTONS_CANVAS.height,
+            }}
+          >
+            <div
+              data-figma-buttons-grid
+              className="absolute left-0 top-0"
+              style={{
+                width: FIGMA_BUTTONS_GRID.width,
+                height: FIGMA_BUTTONS_GRID.height,
+              }}
+            >
+              {FIGMA_BUTTON_SLOTS.map((slot) => (
+                <div
+                  key={`${slot.hierarchy}-${slot.visualState}`}
+                  className="absolute"
+                  style={{ left: slot.x, top: slot.y }}
+                >
+                  <Button
+                    hierarchy={slot.hierarchy}
+                    icon={AttachmentIcon}
+                    dropdownOptions={demoDropdownOptions}
+                    {...slotProps(slot.visualState)}
+                  >
+                    Button
+                  </Button>
+                </div>
+              ))}
+            </div>
+
+            {BUTTON_VARIANT_SLOTS.map((slot) => (
+              <div
+                key={`${slot.hierarchy}-${slot.variant}`}
+                data-visual-test-only
+                className="absolute"
+                style={{ left: slot.x, top: slot.y }}
+              >
+                {slot.variant === "noIcon" ? (
+                  <Button
+                    hierarchy={slot.hierarchy}
+                    dropdownOptions={demoDropdownOptions}
+                  >
+                    Button
+                  </Button>
+                ) : (
+                  <Button hierarchy={slot.hierarchy} icon={AttachmentIcon}>
+                    Button
+                  </Button>
+                )}
+              </div>
+            ))}
+          </div>
+        </FigmaSection>
+
+        <FigmaSection label="Icon Button" className="mt-8">
+          <div className="flex flex-wrap items-center gap-6">
+            <IconButtonSnapshot hierarchy="tertiary" visualState="idle" />
+            <IconButtonSnapshot hierarchy="tertiary" visualState="hover" />
+            <IconButtonSnapshot hierarchy="quaternary" visualState="idle" />
+            <IconButtonSnapshot hierarchy="quaternary" visualState="hover" />
+            <IconButtonSnapshot
+              hierarchy="quaternary"
+              visualState="idle"
+              size="small"
+            />
+            <IconButtonSnapshot
+              hierarchy="quaternary"
+              visualState="hover"
+              size="small"
+            />
+          </div>
+        </FigmaSection>
+      </div>
+    </FigmaContent>
+  </FigmaPage>
+);

package/src/stories/canvases/ButtonsMatrixCanvas.tsx

@@ -1,65 +1,65 @@
-import { AddIcon } from "../../icons";
-import { Button } from "../../primitives";
-import {
-  FigmaContent,
-  FigmaPage,
-  FigmaRow,
-  FigmaSection,
-} from "../_layout";
-import { ButtonSnapshot } from "./helpers";
-import { FIGMA_WIDTHS } from "./figma-widths";
-
-const hierarchies = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "quaternary",
-  "destructive",
-] as const;
-const columnLabels = ["Primary", "Secondary", "Tertiary", "Quaternary", "Destructive"];
-const rowLabels = ["Idle", "Hover", "Disabled"];
-
-export const ButtonsMatrixCanvas = () => (
-  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttonsMatrix}>
-    <FigmaContent>
-      <FigmaSection>
-        <div className="mb-4 grid grid-cols-[104px_repeat(5,1fr)] gap-4">
-          <div />
-          {columnLabels.map((label) => (
-            <p key={label} className="text-center text-caption-1 text-display-on-light-secondary">
-              {label}
-            </p>
-          ))}
-        </div>
-
-        {rowLabels.map((rowLabel) => (
-          <FigmaRow key={rowLabel} label={rowLabel} gap={24}>
-            <div className="w-24" />
-            {hierarchies.map((hierarchy) => (
-              <ButtonSnapshot
-                key={hierarchy}
-                hierarchy={hierarchy}
-                visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
-              />
-            ))}
-          </FigmaRow>
-        ))}
-
-        <FigmaRow label="Idle" gap={24}>
-          <div className="w-24" />
-          <Button icon={<AddIcon size="small" />} className="min-w-[304px]">
-            New chat
-          </Button>
-        </FigmaRow>
-
-        <FigmaRow label="Hover" gap={24}>
-          <div className="w-24" />
-          <span className="inline-flex min-h-10 min-w-[304px] items-center justify-center gap-2 rounded-control bg-action-primary-hover px-2 text-caption-1 text-action-primary-on-hover">
-            <AddIcon />
-            New chat
-          </span>
-        </FigmaRow>
-      </FigmaSection>
-    </FigmaContent>
-  </FigmaPage>
-);
+import { AddIcon } from "../../icons";
+import { Button } from "../../primitives";
+import {
+  FigmaContent,
+  FigmaPage,
+  FigmaRow,
+  FigmaSection,
+} from "../_layout";
+import { ButtonSnapshot } from "./helpers";
+import { FIGMA_WIDTHS } from "./figma-widths";
+
+const hierarchies = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "quaternary",
+  "destructive",
+] as const;
+const columnLabels = ["Primary", "Secondary", "Tertiary", "Quaternary", "Destructive"];
+const rowLabels = ["Idle", "Hover", "Disabled"];
+
+export const ButtonsMatrixCanvas = () => (
+  <FigmaPage title="Buttons" width={FIGMA_WIDTHS.buttonsMatrix}>
+    <FigmaContent>
+      <FigmaSection>
+        <div className="mb-4 grid grid-cols-[104px_repeat(5,1fr)] gap-4">
+          <div />
+          {columnLabels.map((label) => (
+            <p key={label} className="text-center text-caption-1 text-display-on-light-secondary">
+              {label}
+            </p>
+          ))}
+        </div>
+
+        {rowLabels.map((rowLabel) => (
+          <FigmaRow key={rowLabel} label={rowLabel} gap={24}>
+            <div className="w-24" />
+            {hierarchies.map((hierarchy) => (
+              <ButtonSnapshot
+                key={hierarchy}
+                hierarchy={hierarchy}
+                visualState={rowLabel.toLowerCase() as "idle" | "hover" | "disabled"}
+              />
+            ))}
+          </FigmaRow>
+        ))}
+
+        <FigmaRow label="Idle" gap={24}>
+          <div className="w-24" />
+          <Button icon={<AddIcon size="small" />} className="min-w-[304px]">
+            New chat
+          </Button>
+        </FigmaRow>
+
+        <FigmaRow label="Hover" gap={24}>
+          <div className="w-24" />
+          <span className="inline-flex min-h-10 min-w-[304px] items-center justify-center gap-2 rounded-control bg-action-primary-hover px-2 text-caption-1 text-action-primary-on-hover">
+            <AddIcon />
+            New chat
+          </span>
+        </FigmaRow>
+      </FigmaSection>
+    </FigmaContent>
+  </FigmaPage>
+);