Full cleanup pass

stories/cards/Mini.stories.js

@@ -1,4 +1,5 @@
 import Mini from "../../app/components/cards/Mini";
+import { getAssetPath, featurePanelPath } from "../../lib/assetUtils";
 
 export default {
   title: "Components/Cards/Mini",
@@ -30,7 +31,7 @@ export const Default = {
     backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
     labelLine1: "Decision-making",
     labelLine2: "support",
-    panelContent: "assets/marketing/feature-support.png",
+    panelContent: getAssetPath(featurePanelPath("support")),
   },
 };
 
@@ -41,25 +42,25 @@ export const ColorVariants = {
         backgroundColor="bg-[var(--color-surface-default-brand-royal)]"
         labelLine1="Decision-making"
         labelLine2="support"
-        panelContent="assets/marketing/feature-support.png"
+        panelContent={getAssetPath(featurePanelPath("support"))}
       />
       <Mini
         backgroundColor="bg-[#D1FFE2]"
         labelLine1="Values alignment"
         labelLine2="exercises"
-        panelContent="assets/marketing/feature-exercises.png"
+        panelContent={getAssetPath(featurePanelPath("exercises"))}
       />
       <Mini
         backgroundColor="bg-[#F4CAFF]"
         labelLine1="Membership"
         labelLine2="guidance"
-        panelContent="assets/marketing/feature-guidance.png"
+        panelContent={getAssetPath(featurePanelPath("guidance"))}
       />
       <Mini
         backgroundColor="bg-[#CBDDFF]"
         labelLine1="Conflict resolution"
         labelLine2="tools"
-        panelContent="assets/marketing/feature-tools.png"
+        panelContent={getAssetPath(featurePanelPath("tools"))}
       />
     </div>
   ),
@@ -70,7 +71,7 @@ export const AsLink = {
     backgroundColor: "bg-[var(--color-surface-default-brand-royal)]",
     labelLine1: "Decision-making",
     labelLine2: "support",
-    panelContent: "assets/marketing/feature-support.png",
+    panelContent: getAssetPath(featurePanelPath("support")),
     href: "#decision-making",
     ariaLabel: "Navigate to decision-making support tools",
   },

stories/cards/Stat.stories.js

@@ -0,0 +1,27 @@
+import Stat from "../../app/components/cards/Stat";
+
+export default {
+  title: "Components/Cards/Stat",
+  component: Stat,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    value: { control: "text" },
+    label: { control: "text" },
+    asOf: { control: "text" },
+    shapeVariant: {
+      control: { type: "select" },
+      options: [1, 2, 3, 4],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    value: "420M+",
+    label: "open source projects",
+    asOf: "as of June 30, 2024",
+    shapeVariant: 1,
+  },
+};

stories/modals/Dialog.stories.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import Dialog from "../../app/components/modals/Dialog";
+import Button from "../../app/components/buttons/Button";
+
+export default {
+  title: "Components/Modals/Dialog",
+  component: Dialog,
+};
+
+function DialogStoryHost(args) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div className="p-8">
+      <Button
+        buttonType="filled"
+        palette="default"
+        size="medium"
+        onClick={() => setIsOpen(true)}
+      >
+        Open dialog
+      </Button>
+      <Dialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        footer={
+          <>
+            <Button
+              buttonType="outline"
+              palette="default"
+              size="medium"
+              onClick={() => setIsOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="medium"
+              onClick={() => setIsOpen(false)}
+            >
+              Confirm
+            </Button>
+          </>
+        }
+      />
+    </div>
+  );
+}
+
+export const Default = {
+  render: (args) => <DialogStoryHost {...args} />,
+  args: {
+    title: "Confirm action",
+    description: "This cannot be undone.",
+  },
+};

stories/modals/Popover.stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Popover from "../../app/components/modals/Popover";
+import ListItem from "../../app/components/layout/ListItem";
+
+export default {
+  title: "Components/Modals/Popover",
+  component: Popover,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const Default = {
+  render: () => (
+    <Popover id="export-menu" menuAriaLabel="Export format">
+      <ListItem
+        showDivider
+        leadingIcon="markdown_copy"
+        label="Download Markdown"
+        onClick={() => {}}
+      />
+      <ListItem
+        showDivider={false}
+        leadingIcon="csv"
+        label="Download CSV"
+        onClick={() => {}}
+      />
+    </Popover>
+  ),
+};

stories/monitor/WebVitalsDashboard.stories.js

@@ -1,4 +1,4 @@
-import WebVitalsDashboard from "../app/(admin)/monitor/_components/WebVitalsDashboard";
+import WebVitalsDashboard from "../../app/(admin)/monitor/_components/WebVitalsDashboard";
 
 export default {
   title: "Components/Monitor/WebVitalsDashboard",

stories/sections/ContentBanner.stories.js

@@ -14,7 +14,7 @@ const mockBlogPost = {
       vertical: "resolving-active-conflicts-vertical.svg",
     },
     banner: {
-      horizontal: "resolving-active-conflicts-banner.svg",
+      horizontal: "resolving-active-conflicts-section.svg",
     },
   },
   htmlContent:

stories/sections/Groups.stories.js

@@ -1,10 +1,11 @@
 import Groups from "../../app/components/sections/Groups";
+import { getAssetPath, vectorMarkPath } from "../../lib/assetUtils";
 
 const vectorIconSrc = [
-  "/assets/vector/worker-coop.svg",
-  "/assets/vector/mutual-aid.svg",
-  "/assets/vector/open-source.svg",
-  "/assets/vector/dao.svg",
+  getAssetPath(vectorMarkPath("worker-coop")),
+  getAssetPath(vectorMarkPath("mutual-aid")),
+  getAssetPath(vectorMarkPath("open-source")),
+  getAssetPath(vectorMarkPath("dao")),
 ];
 
 const sampleItems = [