[IOPLT-273] Adds FeatureInfo, ModuleCheckout and ModulePaymentNotice to Storybook

stories/featureInfo/FeatureInfo.stories.ts

@@ -0,0 +1,33 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FeatureInfo } from "../../src/components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "IO-App Design System/Components/FeatureInfo/FeatureInfo",
+  component: FeatureInfo,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"],
+  args: {
+    pictogramName: "cie"
+  }
+} satisfies Meta<typeof FeatureInfo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    body: "Dopo questo passaggio non sarà più possibile annullare il pagamento",
+    actionLabel: "Conferma",
+    actionOnPress: e => {
+      action("clicked")(e);
+    }
+  }
+};

stories/modules/ModuleCheckout.stories.tsx

@@ -0,0 +1,42 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { IOThemeContext, IOThemes } from "../../src";
+
+import { ModuleCheckout } from "../../src/components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "IO-App Design System/Atoms/Modules/ModuleCheckout",
+  component: ModuleCheckout,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"]
+} satisfies Meta<typeof ModuleCheckout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  decorators: [
+    Story => (
+      <IOThemeContext.Provider value={IOThemes.dark}>
+        <div style={{ width: "300px" }}>
+          <Story />
+        </div>
+      </IOThemeContext.Provider>
+    )
+  ],
+  args: {
+    ctaText: "Modifica",
+    isLoading: false,
+    paymentLogo: "maestro",
+    title: "Title",
+    subtitle: "Subtitle",
+    onPress: () => action("clicked")()
+  }
+};

stories/modules/ModulePaymentNotice.stories.tsx

@@ -0,0 +1,43 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { IOThemeContext, IOThemes } from "../../src";
+
+import { ModulePaymentNotice } from "../../src/components";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: "IO-App Design System/Atoms/Modules/ModulePaymentNotice",
+  component: ModulePaymentNotice,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ["autodocs"]
+} satisfies Meta<typeof ModulePaymentNotice>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  decorators: [
+    Story => (
+      <IOThemeContext.Provider value={IOThemes.dark}>
+        <div style={{ width: "300px" }}>
+          <Story />
+        </div>
+      </IOThemeContext.Provider>
+    )
+  ],
+  args: {
+    isLoading: false,
+    title: "Title",
+    paymentNoticeStatus: "default",
+    paymentNoticeAmount: "100,00€",
+    subtitle: "Subtitle",
+    accessibilityLabel: "accessibilityLabel",
+    onPress: () => action("clicked")()
+  }
+};