feat: [M3-8171] - Add CheckoutSummary Story

packages/manager/src/components/CheckoutSummary/CheckoutSummary.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Typography } from 'src/components/Typography';
+
+import { CheckoutSummary } from './CheckoutSummary';
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof CheckoutSummary>;
+
+const Item = ({ children }: { children?: React.ReactNode }) => (
+  <Typography sx={{ fontStyle: 'italic', marginTop: '1em' }}>
+    {children}
+  </Typography>
+);
+
+const defaultArgs = {
+  displaySections: [
+    { title: 'Debian 11' },
+    { details: '$36/month', title: 'Dedicated 4GB' },
+  ],
+  heading: 'Checkout Summary',
+};
+
+const meta: Meta<typeof CheckoutSummary> = {
+  component: CheckoutSummary,
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ margin: '2em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  title: 'Components/CheckoutSummary',
+};
+
+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 WithChildren: Story = {
+  args: {
+    ...defaultArgs,
+    children: <Item>Child items can go here!</Item>,
+  },
+};

packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx

@@ -1,17 +1,31 @@
 import { useTheme } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
-import { Theme, styled } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
 import { Paper } from '../Paper';
 import { Typography } from '../Typography';
 import { SummaryItem } from './SummaryItem';
 
-interface Props {
+import type { Theme } from '@mui/material/styles';
+
+interface CheckoutSummaryProps {
+  /**
+   * JSX element to be displayed as an agreement section.
+   */
   agreement?: JSX.Element;
+  /**
+   * JSX element for additional content to be rendered within the component.
+   */
   children?: JSX.Element | null;
+  /**
+   * The sections to be displayed in the `CheckoutSumamry`
+   */
   displaySections: SummaryItem[];
+  /**
+   * The heading text to be displayed in the `CheckoutSummary`.
+   */
   heading: string;
 }
 
@@ -22,7 +36,7 @@ export interface SummaryItem {
   title?: string;
 }
 
-export const CheckoutSummary = (props: Props) => {
+export const CheckoutSummary = (props: CheckoutSummaryProps) => {
   const theme = useTheme<Theme>();
   const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));