From ac8b96dd331316fd596f2de8cd27762913a4b176 Mon Sep 17 00:00:00 2001
From: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:46:09 +0000
Subject: [PATCH] Add Storybook entry for `TotalsWrapper` (#11784)

---
 .../components/totals-wrapper/docs/docs.mdx   | 15 ++++++
 packages/components/totals-wrapper/index.tsx  |  2 +-
 .../totals-wrapper/stories/index.stories.tsx  | 52 +++++++++++++++++++
 storybook/main.js                             |  1 +
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/totals-wrapper/docs/docs.mdx
 create mode 100644 packages/components/totals-wrapper/stories/index.stories.tsx

diff --git a/packages/components/totals-wrapper/docs/docs.mdx b/packages/components/totals-wrapper/docs/docs.mdx
new file mode 100644
index 00000000000..e12bf0a3af1
--- /dev/null
+++ b/packages/components/totals-wrapper/docs/docs.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Meta, ArgTypes, Primary, Source, Controls } from '@storybook/blocks';
+
+import * as TotalsWrapperStories from '../stories/index.stories.tsx';
+
+<Meta name="Docs" of={ TotalsWrapperStories } />
+
+# TotalsWrapper
+
+A wrapper to go around any items displayed in the "Totals" area of the Cart/Checkout blocks. Usually it comes with additional padding so the component rendered inside it doesn't need to add its own padding. If this is being used to wrap a Slot (for use in Slot/Fill patterns) then no padding will be applied.
+
+<Primary />
+
+### Props
+
+<Controls />
diff --git a/packages/components/totals-wrapper/index.tsx b/packages/components/totals-wrapper/index.tsx
index f7b6b8d5d25..457516333d4 100644
--- a/packages/components/totals-wrapper/index.tsx
+++ b/packages/components/totals-wrapper/index.tsx
@@ -10,7 +10,7 @@ import type { ReactNode } from 'react';
  */
 import './style.scss';
 
-interface TotalsWrapperProps {
+export interface TotalsWrapperProps {
 	children: ReactNode;
 	/* If this TotalsWrapper is being used to wrap a Slot */
 	slotWrapper?: boolean;
diff --git a/packages/components/totals-wrapper/stories/index.stories.tsx b/packages/components/totals-wrapper/stories/index.stories.tsx
new file mode 100644
index 00000000000..e6b607ec691
--- /dev/null
+++ b/packages/components/totals-wrapper/stories/index.stories.tsx
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import TotalsWrapper, { TotalsWrapperProps } from '..';
+
+export default {
+	title: 'External Components/Totals/TotalsWrapper',
+	component: TotalsWrapper,
+	argTypes: {
+		className: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		children: {
+			control: null,
+			table: {
+				type: {
+					summary: 'React.Children',
+				},
+			},
+		},
+		slotWrapper: {
+			control: 'boolean',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+			description:
+				'True if this `TotalsWrapper` is being used to wrap a Slot/Fill',
+		},
+	},
+} as Meta< TotalsWrapperProps >;
+const Template: StoryFn< TotalsWrapperProps > = ( args ) => {
+	return (
+		<TotalsWrapper { ...args }>
+			<div>Custom totals content</div>
+		</TotalsWrapper>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {};
diff --git a/storybook/main.js b/storybook/main.js
index 52600169c49..a1f07ef3e8a 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -9,6 +9,7 @@ module.exports = {
 		'../assets/js/**/stories/*.stories.@(js|jsx|ts|tsx)',
 		'../packages/**/stories/*.stories.@(js|jsx|ts|tsx)',
 		'../assets/js/**/*.mdx',
+		'../packages/**/*.mdx',
 	],
 	addons: [
 		'@storybook/addon-essentials',