diff --git a/.changeset/orange-melons-protect.md b/.changeset/orange-melons-protect.md new file mode 100644 index 000000000..ecf89c950 --- /dev/null +++ b/.changeset/orange-melons-protect.md @@ -0,0 +1,5 @@ +--- +'@bigcommerce/docs': patch +--- + +Added Page pattern component documentation diff --git a/packages/docs/PropTables/PagePropTable.tsx b/packages/docs/PropTables/PagePropTable.tsx new file mode 100644 index 000000000..adfbfd46c --- /dev/null +++ b/packages/docs/PropTables/PagePropTable.tsx @@ -0,0 +1,106 @@ +import React from 'react'; + +import { Code, NextLink, Prop, PropTable, PropTableWrapper } from '../components'; + +const pageProps: Prop[] = [ + { + name: 'header', + types: Header, + description: ( + <> + Pass in an optional Header component for displaying the + page title and description. + + ), + }, + { + name: 'message', + types: MessageProps, + description: ( + <> + An optional Message component for displaying alerts or notifications. + + ), + }, + { + name: 'background', + types: ( + Background + ), + description: 'The background settings for the page, determining background color or image.', + }, + { + name: 'actionBar', + types: ActionBar, + description: ( + <> + Pass in an optional ActionBar component for + displaying action buttons at the bottom. + + ), + }, +]; + +export const PagePropsTable: React.FC = (props) => ( + +); + +const backgroundProps: Prop[] = [ + { + name: 'src', + types: 'string', + description: 'The URL of the background image.', + required: true, + }, + { + name: 'backgroundSize', + types: ['auto', 'length', 'cover', 'contain', 'initial', 'inherit'], + defaultValue: 'contain', + description: ( + <> + Defines the size of the background image. Same as the{' '} + background-size CSS property. + + ), + }, + { + name: 'backgroundPosition', + types: [ + 'left top', + 'left center', + 'left bottom', + 'right top', + 'right center', + 'right bottom', + 'center top', + 'center center', + 'center bottom', + 'x% y%', + 'x-pos y-pos', + 'initial', + 'inherit', + ], + defaultValue: 'top right', + description: ( + <> + Sets the position of the background image. Same as the{' '} + background-position CSS property. + + ), + }, + { + name: 'backgroundRepeat', + defaultValue: 'no-repeat', + types: ['repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'initial', 'inherit'], + description: ( + <> + Specifies if/how the background image repeats. Same as the{' '} + background-repeat CSS property. + + ), + }, +]; + +export const BackgroundPropsTable: React.FC = (props) => ( + +); diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx index 884dc6b9a..ef13bec41 100644 --- a/packages/docs/components/SideNav/SideNav.tsx +++ b/packages/docs/components/SideNav/SideNav.tsx @@ -105,6 +105,7 @@ export const SideNav: React.FC = () => { Action Bar Header + Page diff --git a/packages/docs/pages/page.tsx b/packages/docs/pages/page.tsx new file mode 100644 index 000000000..3db14cb0e --- /dev/null +++ b/packages/docs/pages/page.tsx @@ -0,0 +1,334 @@ +import { H1, Panel, Text } from '@bigcommerce/big-design'; +import { AddIcon, ArrowDropDownIcon } from '@bigcommerce/big-design-icons'; +import { ActionBar, Header, Page } from '@bigcommerce/big-design-patterns'; +import React, { Fragment } from 'react'; + +import { + Code, + CodePreview, + CodeSnippet, + ContentRoutingTabs, + GuidelinesTable, + List, +} from '../components'; +import { BackgroundPropsTable, PagePropsTable } from '../PropTables/PagePropTable'; + +const HeaderPage = () => { + return ( + <> +

Page

+ + + + The Page component serves as a high-level layout component that + organizes the content of a page, including optional elements such as a{' '} + Header, Message, and{' '} + ActionBar. It ensures consistent spacing, background management, and + placement of key UI elements. + + + When to use: + + + To provide a container for the entire page structure, including header, content, + messages, and action buttons. + + + To maintain consistency in page layout and background customization. + + + + + + + + To use Page import the component from the package: + + {`import { Page } from '@bigcommerce/big-design-patterns';`} + + ( + + + Page is a high-level layout component that organizes the + content of a page. + + + {/* jsx-to-string:start */} + + } + > + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + + + + {/* jsx-to-string:end */} + + + ), + }, + { + id: 'message', + title: 'Status messasges', + render: () => ( + + + The Message prop allows you to deliver status information + relevant to the context shown on the page and relates to the information + displayed below it. + + + {/* jsx-to-string:start */} + } + message={{ + header: 'Status message title', + type: 'success', + messages: [ + { + text: 'This is a success message.', + link: { + href: 'https://www.bigcommerce.com', + target: '_blank', + text: 'Learn more', + }, + }, + ], + }} + > + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + + + + {/* jsx-to-string:end */} + + + ), + }, + { + id: 'header-actions', + title: 'Header actions', + render: () => ( + + + The Header component allows you to add actions to the + header, such as buttons or dropdowns. + + + {/* jsx-to-string:start */} + , + }, + { + items: [ + { content: 'Option 1', onItemClick: (item) => item }, + { content: 'Option 2', onItemClick: (item) => item }, + ], + toggle: { + text: 'Secondary', + variant: 'secondary', + iconRight: , + }, + }, + { + text: 'Tertiary', + variant: 'subtle', + }, + ]} + description="Page description (optional)" + title="Header with actions" + /> + } + > + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + + + + {/* jsx-to-string:end */} + + + ), + }, + { + id: 'action-bar', + title: 'Action Bar', + render: () => ( + + + Use to provide quick and consistent access to key actions at the bottom of a + page. Be aware that pages may only have one primary action button, which would + be placed in the action bar. + + + {/* jsx-to-string:start */} + + } + header={ +
, + }, + ]} + description="Page description (optional)" + title="Page with action bar" + /> + } + > + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + + + + {/* jsx-to-string:end */} + + + ), + }, + { + id: 'background-images', + title: 'Background images', + render: () => ( + + + On featured pages, you may want to add a background image to the page to provide + context or visual interest. The Page component allows you + to add a background image with custom positioning and size. + + + {/* jsx-to-string:start */} + + } + > + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. + + + + {/* jsx-to-string:end */} + + + ), + }, + ]} + /> + + + + , + }, + { + id: 'background-props', + title: 'Background', + render: () => , + }, + ]} + /> + + + + + + + ); +}; + +export default HeaderPage; diff --git a/packages/docs/public/page-background.svg b/packages/docs/public/page-background.svg new file mode 100644 index 000000000..158793cc8 --- /dev/null +++ b/packages/docs/public/page-background.svg @@ -0,0 +1 @@ + \ No newline at end of file