Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Add Storybook entry for TotalsWrapper (#11784)
Browse files Browse the repository at this point in the history
  • Loading branch information
opr authored Nov 15, 2023
1 parent 024787e commit ac8b96d
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 1 deletion.
15 changes: 15 additions & 0 deletions packages/components/totals-wrapper/docs/docs.mdx
Original file line number Diff line number Diff line change
@@ -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 />
2 changes: 1 addition & 1 deletion packages/components/totals-wrapper/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
52 changes: 52 additions & 0 deletions packages/components/totals-wrapper/stories/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -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 = {};
1 change: 1 addition & 0 deletions storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit ac8b96d

Please sign in to comment.