From 43366acd98123008a093f63fcd407518459a8d39 Mon Sep 17 00:00:00 2001
From: Purvesh Makode <pmakode@akamai.com>
Date: Fri, 23 Aug 2024 22:22:04 +0530
Subject: [PATCH] feat: [M3-8170] - Add CheckoutBar Story (#10784)

---
 .../pr-10784-added-1723651941893.md           |  5 ++
 .../CheckoutBar/CheckoutBar.stories.tsx       | 70 +++++++++++++++++++
 .../components/CheckoutBar/CheckoutBar.tsx    | 34 +++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10784-added-1723651941893.md
 create mode 100644 packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx

diff --git a/packages/manager/.changeset/pr-10784-added-1723651941893.md b/packages/manager/.changeset/pr-10784-added-1723651941893.md
new file mode 100644
index 00000000000..3d28dae816f
--- /dev/null
+++ b/packages/manager/.changeset/pr-10784-added-1723651941893.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+CheckoutBar Story ([#10784](https://github.com/linode/manager/pull/10784))
diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
new file mode 100644
index 00000000000..85976149c20
--- /dev/null
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { Typography } from 'src/components/Typography';
+
+import { CheckoutBar } from './CheckoutBar';
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof CheckoutBar>;
+
+const Item = ({ children }: { children?: React.ReactNode }) => (
+  <Typography sx={{ fontStyle: 'italic' }}>{children}</Typography>
+);
+
+const defaultArgs = {
+  calculatedPrice: 30.0,
+  children: <Item>Child items can go here!</Item>,
+  heading: 'Checkout',
+  onDeploy: () => alert('Deploy clicked'),
+  submitText: 'Submit',
+};
+
+const meta: Meta<typeof CheckoutBar> = {
+  argTypes: {
+    onDeploy: { action: 'onDeploy' },
+  },
+  component: CheckoutBar,
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ margin: '2em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  title: 'Components/CheckoutBar',
+};
+
+export default meta;
+
+export const Default: Story = {
+  args: defaultArgs,
+};
+
+export const WithAgreement: Story = {
+  args: {
+    ...defaultArgs,
+    agreement: <Item>Agreement item can go here!</Item>,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...defaultArgs,
+    disabled: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    ...defaultArgs,
+    isMakingRequest: true,
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    ...defaultArgs,
+    footer: <Item>Footer element can go here!</Item>,
+  },
+};
diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx
index 492bf4558c8..3d8ffdde20e 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx
@@ -12,16 +12,50 @@ import {
 } from './styles';
 
 interface CheckoutBarProps {
+  /**
+   * JSX element to be displayed as an agreement section.
+   */
   agreement?: JSX.Element;
+  /**
+   * Calculated price to be displayed.
+   */
   calculatedPrice?: number;
+  /**
+   * JSX element for additional content to be rendered within the component.
+   */
   children?: JSX.Element;
+  /**
+   * Boolean to disable the `CheckoutBar` component, making it non-interactive.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * JSX element to be displayed as a footer.
+   */
   footer?: JSX.Element;
+  /**
+   * The heading text to be displayed in the `CheckoutBar`.
+   */
   heading: string;
+  /**
+   * Boolean indicating if a request is currently being processed.
+   */
   isMakingRequest?: boolean;
+  /**
+   * Callback function to be called when the deploy action is triggered.
+   */
   onDeploy: () => void;
+  /**
+   * Helper text to be displayed alongside the price.
+   */
   priceHelperText?: string;
+  /**
+   * Text to describe the price selection.
+   */
   priceSelectionText?: string;
+  /**
+   * Text for the submit button.
+   */
   submitText?: string;
 }