Component cleanup

stories/modals/ModalFooter.stories.js

@@ -0,0 +1,71 @@
+import ModalFooter from "../../app/components/modals/ModalFooter";
+
+export default {
+  title: "Components/Modals/ModalFooter",
+  component: ModalFooter,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showBackButton: {
+      control: "boolean",
+      description: "Whether to render the back button on the left",
+    },
+    showNextButton: {
+      control: "boolean",
+      description: "Whether to render the next button on the right",
+    },
+    backButtonText: {
+      control: "text",
+      description: "Override text for the back button",
+    },
+    nextButtonText: {
+      control: "text",
+      description: "Override text for the next button",
+    },
+    nextButtonDisabled: {
+      control: "boolean",
+      description: "Whether the next button is disabled",
+    },
+    currentStep: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Current step (used by the centered Stepper)",
+    },
+    totalSteps: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Total number of steps",
+    },
+    stepper: {
+      control: "boolean",
+      description: "Whether to render the centered stepper",
+    },
+    onBack: { action: "back-clicked" },
+    onNext: { action: "next-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    currentStep: 2,
+    totalSteps: 4,
+  },
+};
+
+export const NextDisabled = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    nextButtonDisabled: true,
+    currentStep: 1,
+    totalSteps: 4,
+  },
+};
+
+export const NextOnly = {
+  args: {
+    showBackButton: false,
+    showNextButton: true,
+  },
+};

stories/modals/ModalHeader.stories.js

@@ -0,0 +1,42 @@
+import ModalHeader from "../../app/components/modals/ModalHeader";
+
+export default {
+  title: "Components/Modals/ModalHeader",
+  component: ModalHeader,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showCloseButton: {
+      control: "boolean",
+      description: "Whether to render the close button on the left",
+    },
+    showMoreOptionsButton: {
+      control: "boolean",
+      description: "Whether to render the more-options button on the right",
+    },
+    onClose: { action: "close-clicked" },
+    onMoreOptions: { action: "more-options-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: true,
+  },
+};
+
+export const CloseOnly = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: false,
+  },
+};
+
+export const MoreOptionsOnly = {
+  args: {
+    showCloseButton: false,
+    showMoreOptionsButton: true,
+  },
+};