From c79095c1fe760c3619cd16095c6a9954b80271be Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Wed, 14 Aug 2024 20:29:38 +0530
Subject: [PATCH 01/11] Add default story for CheckoutBar

---
 .../CheckoutBar/CheckoutBar.stories.tsx       | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx

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..a9cd2f2cbd6
--- /dev/null
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { CheckoutBar } from './CheckoutBar';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof CheckoutBar>;
+
+export const Default: Story = {
+  args: {
+    heading: 'Checkout',
+    onDeploy: () => alert('Deploy clicked'),
+  },
+  render: (args) => <CheckoutBar {...args} />,
+};
+
+const meta: Meta<typeof CheckoutBar> = {
+  component: CheckoutBar,
+  title: 'Components/CheckoutBar',
+};
+
+export default meta;

From 0cdd3906621dba309f92433ffee368620ece89d5 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Wed, 14 Aug 2024 21:39:20 +0530
Subject: [PATCH 02/11] Add more stories for CheckoutBar

---
 .../CheckoutBar/CheckoutBar.stories.tsx       | 41 +++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index a9cd2f2cbd6..d757e84afa5 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -4,19 +4,54 @@ import { CheckoutBar } from './CheckoutBar';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
+const meta: Meta<typeof CheckoutBar> = {
+  component: CheckoutBar,
+  title: 'Components/CheckoutBar',
+};
+
 type Story = StoryObj<typeof CheckoutBar>;
 
 export const Default: Story = {
   args: {
+    calculatedPrice: 30.0,
+    children: (
+      <div>
+        <i style={{ color: 'white' }}>Children items can go here!</i>
+      </div>
+    ),
     heading: 'Checkout',
     onDeploy: () => alert('Deploy clicked'),
+    submitText: 'Submit',
   },
   render: (args) => <CheckoutBar {...args} />,
 };
 
-const meta: Meta<typeof CheckoutBar> = {
-  component: CheckoutBar,
-  title: 'Components/CheckoutBar',
+export const WithAgreement: Story = {
+  args: {
+    ...Default.args,
+    agreement: (
+      <div>
+        <i style={{ color: 'white' }}>Agreement item can go here</i>
+      </div>
+    ),
+  },
+  render: (args) => <CheckoutBar {...args} />,
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+  render: (args) => <CheckoutBar {...args} />,
+};
+
+export const Loading: Story = {
+  args: {
+    ...Default.args,
+    isMakingRequest: true,
+  },
+  render: (args) => <CheckoutBar {...args} />,
 };
 
 export default meta;

From edea300ecab04db7718101245a158daf76451336 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Wed, 14 Aug 2024 21:42:21 +0530
Subject: [PATCH 03/11] Added changeset: CheckoutBar Story

---
 packages/manager/.changeset/pr-10784-added-1723651941893.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10784-added-1723651941893.md

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))

From 36c99e3b6e823a50595a660049e4f3493d8ffd33 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 15 Aug 2024 01:23:55 +0530
Subject: [PATCH 04/11] Refactor CheckoutBar story

---
 .../CheckoutBar/CheckoutBar.stories.tsx       | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index d757e84afa5..982a986c0c5 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Box } from 'src/components/Box';
+
 import { CheckoutBar } from './CheckoutBar';
 
 import type { Meta, StoryObj } from '@storybook/react';
@@ -11,31 +13,31 @@ const meta: Meta<typeof CheckoutBar> = {
 
 type Story = StoryObj<typeof CheckoutBar>;
 
+const Item = ({ children }: any) => (
+  <div style={{ color: 'white', fontStyle: 'italic' }}>{children}</div>
+);
+
 export const Default: Story = {
   args: {
     calculatedPrice: 30.0,
-    children: (
-      <div>
-        <i style={{ color: 'white' }}>Children items can go here!</i>
-      </div>
-    ),
+    children: <Item>Children items can go here!</Item>,
     heading: 'Checkout',
     onDeploy: () => alert('Deploy clicked'),
     submitText: 'Submit',
   },
-  render: (args) => <CheckoutBar {...args} />,
+  render: (args) => (
+    <Box sx={{ margin: '1em 2em' }}>
+      <CheckoutBar {...args} />
+    </Box>
+  ),
 };
 
 export const WithAgreement: Story = {
   args: {
     ...Default.args,
-    agreement: (
-      <div>
-        <i style={{ color: 'white' }}>Agreement item can go here</i>
-      </div>
-    ),
+    agreement: <Item>Agreement item can go here!</Item>,
   },
-  render: (args) => <CheckoutBar {...args} />,
+  render: Default.render,
 };
 
 export const Disabled: Story = {
@@ -43,7 +45,7 @@ export const Disabled: Story = {
     ...Default.args,
     disabled: true,
   },
-  render: (args) => <CheckoutBar {...args} />,
+  render: Default.render,
 };
 
 export const Loading: Story = {
@@ -51,7 +53,7 @@ export const Loading: Story = {
     ...Default.args,
     isMakingRequest: true,
   },
-  render: (args) => <CheckoutBar {...args} />,
+  render: Default.render,
 };
 
 export default meta;

From f61d09456094ef0318f94e92c787589815ba9e36 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 15 Aug 2024 01:34:08 +0530
Subject: [PATCH 05/11] Update types

---
 .../manager/src/components/CheckoutBar/CheckoutBar.stories.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index 982a986c0c5..dc6329b1981 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta<typeof CheckoutBar> = {
 
 type Story = StoryObj<typeof CheckoutBar>;
 
-const Item = ({ children }: any) => (
+const Item = ({ children }: { children: React.ReactNode }) => (
   <div style={{ color: 'white', fontStyle: 'italic' }}>{children}</div>
 );
 

From dd6e378bf1726734610d7499ad306f6313f7050b Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 15 Aug 2024 03:12:22 +0530
Subject: [PATCH 06/11] Refactor again

---
 .../CheckoutBar/CheckoutBar.stories.tsx       | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index dc6329b1981..5ca195c476b 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
 
-import { Box } from 'src/components/Box';
-
 import { CheckoutBar } from './CheckoutBar';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof CheckoutBar> = {
   component: CheckoutBar,
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ margin: '2em' }}>
+        <Story />
+      </div>
+    ),
+  ],
   title: 'Components/CheckoutBar',
 };
 
@@ -20,16 +25,12 @@ const Item = ({ children }: { children: React.ReactNode }) => (
 export const Default: Story = {
   args: {
     calculatedPrice: 30.0,
-    children: <Item>Children items can go here!</Item>,
+    children: <Item>Child items can go here!</Item>,
     heading: 'Checkout',
     onDeploy: () => alert('Deploy clicked'),
     submitText: 'Submit',
   },
-  render: (args) => (
-    <Box sx={{ margin: '1em 2em' }}>
-      <CheckoutBar {...args} />
-    </Box>
-  ),
+  render: (args) => <CheckoutBar {...args} />,
 };
 
 export const WithAgreement: Story = {

From 9961d4812247072b03c1ea7abf6eea62fcf22197 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 15 Aug 2024 04:03:11 +0530
Subject: [PATCH 07/11] Refactor and add footer story

---
 .../CheckoutBar/CheckoutBar.stories.tsx       | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index 5ca195c476b..0c940ea3b38 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -4,6 +4,12 @@ import { CheckoutBar } from './CheckoutBar';
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
+type Story = StoryObj<typeof CheckoutBar>;
+
+const Item = ({ children }: { children?: React.ReactNode }) => (
+  <div style={{ color: 'white', fontStyle: 'italic' }}>{children}</div>
+);
+
 const meta: Meta<typeof CheckoutBar> = {
   component: CheckoutBar,
   decorators: [
@@ -16,12 +22,6 @@ const meta: Meta<typeof CheckoutBar> = {
   title: 'Components/CheckoutBar',
 };
 
-type Story = StoryObj<typeof CheckoutBar>;
-
-const Item = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ color: 'white', fontStyle: 'italic' }}>{children}</div>
-);
-
 export const Default: Story = {
   args: {
     calculatedPrice: 30.0,
@@ -57,4 +57,12 @@ export const Loading: Story = {
   render: Default.render,
 };
 
+export const WithFooter: Story = {
+  args: {
+    ...Default.args,
+    footer: <Item>Footer element can go here!</Item>,
+  },
+  render: Default.render,
+};
+
 export default meta;

From c9f64d18eedfff320d24005d1b72f15f08689a55 Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Thu, 15 Aug 2024 23:44:03 +0530
Subject: [PATCH 08/11] Clean up...

---
 .../components/CheckoutBar/CheckoutBar.stories.tsx   | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index 0c940ea3b38..b8b28c983c3 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -11,6 +11,9 @@ const Item = ({ children }: { children?: React.ReactNode }) => (
 );
 
 const meta: Meta<typeof CheckoutBar> = {
+  argTypes: {
+    onDeploy: { action: 'onDeploy' },
+  },
   component: CheckoutBar,
   decorators: [
     (Story: StoryFn) => (
@@ -22,6 +25,8 @@ const meta: Meta<typeof CheckoutBar> = {
   title: 'Components/CheckoutBar',
 };
 
+export default meta;
+
 export const Default: Story = {
   args: {
     calculatedPrice: 30.0,
@@ -30,7 +35,6 @@ export const Default: Story = {
     onDeploy: () => alert('Deploy clicked'),
     submitText: 'Submit',
   },
-  render: (args) => <CheckoutBar {...args} />,
 };
 
 export const WithAgreement: Story = {
@@ -38,7 +42,6 @@ export const WithAgreement: Story = {
     ...Default.args,
     agreement: <Item>Agreement item can go here!</Item>,
   },
-  render: Default.render,
 };
 
 export const Disabled: Story = {
@@ -46,7 +49,6 @@ export const Disabled: Story = {
     ...Default.args,
     disabled: true,
   },
-  render: Default.render,
 };
 
 export const Loading: Story = {
@@ -54,7 +56,6 @@ export const Loading: Story = {
     ...Default.args,
     isMakingRequest: true,
   },
-  render: Default.render,
 };
 
 export const WithFooter: Story = {
@@ -62,7 +63,4 @@ export const WithFooter: Story = {
     ...Default.args,
     footer: <Item>Footer element can go here!</Item>,
   },
-  render: Default.render,
 };
-
-export default meta;

From b016654af1fc8e2a0ea15abe1f687263655451df Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 20 Aug 2024 15:07:12 +0530
Subject: [PATCH 09/11] Refactor CheckoutBar.stories.tsx

---
 .../CheckoutBar/CheckoutBar.stories.tsx       | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index b8b28c983c3..0a62cd0bb74 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -1,5 +1,8 @@
+import { styled } from '@mui/material/styles';
 import React from 'react';
 
+import { Typography } from 'src/components/Typography';
+
 import { CheckoutBar } from './CheckoutBar';
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
@@ -7,9 +10,23 @@ import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 type Story = StoryObj<typeof CheckoutBar>;
 
 const Item = ({ children }: { children?: React.ReactNode }) => (
-  <div style={{ color: 'white', fontStyle: 'italic' }}>{children}</div>
+  <StyledItem>{children}</StyledItem>
 );
 
+const StyledItem = styled(Typography, {
+  label: 'StyledItem',
+})(() => ({
+  fontStyle: 'italic',
+}));
+
+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' },
@@ -28,39 +45,33 @@ const meta: Meta<typeof CheckoutBar> = {
 export default meta;
 
 export const Default: Story = {
-  args: {
-    calculatedPrice: 30.0,
-    children: <Item>Child items can go here!</Item>,
-    heading: 'Checkout',
-    onDeploy: () => alert('Deploy clicked'),
-    submitText: 'Submit',
-  },
+  args: defaultArgs,
 };
 
 export const WithAgreement: Story = {
   args: {
-    ...Default.args,
+    ...defaultArgs,
     agreement: <Item>Agreement item can go here!</Item>,
   },
 };
 
 export const Disabled: Story = {
   args: {
-    ...Default.args,
+    ...defaultArgs,
     disabled: true,
   },
 };
 
 export const Loading: Story = {
   args: {
-    ...Default.args,
+    ...defaultArgs,
     isMakingRequest: true,
   },
 };
 
 export const WithFooter: Story = {
   args: {
-    ...Default.args,
+    ...defaultArgs,
     footer: <Item>Footer element can go here!</Item>,
   },
 };

From e22d521ec80347e0f56ad107aa17f1ca8d70cb7b Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 20 Aug 2024 15:46:07 +0530
Subject: [PATCH 10/11] Add documentation to CheckoutBarProps

---
 .../components/CheckoutBar/CheckoutBar.tsx    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

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;
 }
 

From 322071c72ba02b989e3d7c1413e93bd8c0f9912e Mon Sep 17 00:00:00 2001
From: pmakode-akamai <pmakode@akamai.com>
Date: Tue, 20 Aug 2024 20:44:04 +0530
Subject: [PATCH 11/11] Clean up...

---
 .../src/components/CheckoutBar/CheckoutBar.stories.tsx   | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
index 0a62cd0bb74..85976149c20 100644
--- a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
+++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -1,4 +1,3 @@
-import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import { Typography } from 'src/components/Typography';
@@ -10,15 +9,9 @@ import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 type Story = StoryObj<typeof CheckoutBar>;
 
 const Item = ({ children }: { children?: React.ReactNode }) => (
-  <StyledItem>{children}</StyledItem>
+  <Typography sx={{ fontStyle: 'italic' }}>{children}</Typography>
 );
 
-const StyledItem = styled(Typography, {
-  label: 'StyledItem',
-})(() => ({
-  fontStyle: 'italic',
-}));
-
 const defaultArgs = {
   calculatedPrice: 30.0,
   children: <Item>Child items can go here!</Item>,