From 50aee97119516fcb5079263df740cc3f069341c5 Mon Sep 17 00:00:00 2001 From: Ashley E Date: Tue, 7 Nov 2023 11:04:05 -0600 Subject: [PATCH] docs(panel): updates React docs for Panel * fix(panel): moves items into variables to fix storybook looping issue * docs(panel): updates Panel docs for React * docs(panel): removes note for divider label and adds periods to prop descriptions * docs(panel): refactors stories and adds canvas control support * docs(panel): adds link to grid templates and updates text for panel row --- .../components/panel/_preview.html.erb | 2 +- packages/sage-react/lib/Panel/Panel.jsx | 6 + packages/sage-react/lib/Panel/Panel.story.jsx | 435 ------------------ packages/sage-react/lib/Panel/Panel.story.mdx | 387 ++++++++++++++++ 4 files changed, 394 insertions(+), 436 deletions(-) delete mode 100644 packages/sage-react/lib/Panel/Panel.story.jsx create mode 100644 packages/sage-react/lib/Panel/Panel.story.mdx diff --git a/docs/app/views/examples/components/panel/_preview.html.erb b/docs/app/views/examples/components/panel/_preview.html.erb index b3fa728c58..9be111ada8 100644 --- a/docs/app/views/examples/components/panel/_preview.html.erb +++ b/docs/app/views/examples/components/panel/_preview.html.erb @@ -56,7 +56,7 @@ Ut elementum id leo ac fringilla.

Body

-There are a few for the panel body container. +There are a few options for the panel body container.

Panel Block

diff --git a/packages/sage-react/lib/Panel/Panel.jsx b/packages/sage-react/lib/Panel/Panel.jsx index 6e13b4545f..50ab032354 100644 --- a/packages/sage-react/lib/Panel/Panel.jsx +++ b/packages/sage-react/lib/Panel/Panel.jsx @@ -72,10 +72,16 @@ Panel.defaultProps = { }; Panel.propTypes = { + /** Renders any content passed within. */ children: PropTypes.node, + /** CSS class that will be applied to the outermost container. */ className: PropTypes.string, + /** Removes padding on both top and bottom of the Panel. */ clearPaddingBoth: PropTypes.bool, + /** Removes padding on the bottom of the Panel. */ clearPaddingBottom: PropTypes.bool, + /** Removes padding on the top of the Panel. */ clearPaddingTop: PropTypes.bool, + /** Setting this to true will display a loading spinner within the Panel. */ loading: PropTypes.bool, }; diff --git a/packages/sage-react/lib/Panel/Panel.story.jsx b/packages/sage-react/lib/Panel/Panel.story.jsx deleted file mode 100644 index 20d5877872..0000000000 --- a/packages/sage-react/lib/Panel/Panel.story.jsx +++ /dev/null @@ -1,435 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Button } from '../Button'; -import { Grid } from '../Grid'; -import { Icon } from '../Icon'; -import { Badge } from '../Badge'; -import { OptionsDropdown } from '../Dropdown'; -import { SageClassnames, SageTokens } from '../configs'; -import { Panel } from './Panel'; - -export default { - title: 'Sage/Panel', - component: Panel, - // displays description on Docs tab - parameters: { - docs: { - description: { - component: 'Panels are used as multi-purpose containers for a variety of content.' - }, - }, - }, - subcomponents: { - 'Panel.Header': Panel.Header, - 'Panel.Block': Panel.Block, - 'Panel.Divider': Panel.Divider, - 'Panel.Footer': Panel.Footer, - 'Panel.Stack': Panel.Stack, - 'Panel.List': Panel.List, - 'Panel.Subheader': Panel.Subheader, - 'Panel.Subtext': Panel.Subtext, - 'Panel.Tiles': Panel.Tiles, - 'Panel.Figure': Panel.Figure, - 'Panel.Row': Panel.Row - }, -}; - -export const Default = (args) => ( - - - All kinds of awesome, wonderful content can go in here! Learn more

- )} - > - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Duis sit amet libero lacus. - Aenean ullamcorper faucibus purus a ultrices. - Curabitur congue dolor eu condimentum scelerisque. - Morbi at elit nunc. Nulla tellus elit, tincidunt non cursus sit amet, - dapibus eu enim. -

-

- Duis gravida lobortis libero, et suscipit ligula pharetra in. - Morbi convallis felis massa, ac pharetra sem vestibulum volutpat. - Mauris id varius lacus, vel pharetra dui. -

- - - - - - - -); - -export const PanelStack = (args) => ( - - - - - -

- Each item is spaced appropriately. Lorem ipsum dolor sit amet -

-

- Aliquam malesuada leo -

- - - -); - -export const PanelList = (args) => ( - - - - - - -

- Lorem ipsum dolor sit amet -

-

- Aliquam malesuada leo -

- - - - ), - ( - <> - - -

- Lorem ipsum dolor sit amet -

-

- Aliquam malesuada leo -

- - - - ), - ( - <> - - -

- Lorem ipsum dolor sit amet -

-

- Aliquam malesuada leo -

- - - - ) - ]} - /> - - -); - -export const PanelTiles = ({ tiles, ...args }) => ( - - - - - - -

- Lorem ipsum dolor sit amet -

-

- Aliquam malesuada leo -

- - ), - ( - - -

- Consectetur adipiscing elit -

-

- Ut posuere tortor sodales -

- - ), - ( - - -

- Nunc quis arcu maximus -

-

- Praesent id urna vel arcu -

- - ), - ( - - -

- Sed at ipsum pretium -

-

- Ornare convallis vitae sit -

- - ), - ( - - -

- Eleifend ligula -

-

- Finibus est -

- - ), - ( - - -

- Mauris in orci ac odio -

-

- Aliquet tristique nec et mi -

- - ), - ( - - -

- Proin nec tellus varius -

-

- Molestie libero vel -

- - ) - ]} - /> - - - - - -

- Lorem ipsum dolor sit amet -

-

- Aliquam malesuada leo -

- - - -

- Consectetur adipiscing elit -

-

- Ut posuere tortor sodales -

- - - -

- Nunc quis arcu maximus -

-

- Praesent id urna vel arcu -

- - - -

- Sed at ipsum pretium -

-

- Ornare convallis vitae sit -

- - - -

- Eleifend ligula -

-

- Finibus est -

- - - -

- Mauris in orci ac odio -

-

- Aliquet tristique nec et mi -

- - - -

- Proin nec tellus varius -

-

- Molestie libero vel -

- - - - -); -PanelTiles.args = { - tiles: 3, -}; -// fully custom ArgsTable -PanelTiles.argTypes = { - tiles: { - control: { - type: 'select', - options: [2, 3, 4] - } - } -}; -PanelTiles.defaultProps = { - tiles: null -}; -PanelTiles.propTypes = { - tiles: PropTypes.number -}; - -export const PanelRow = (args) => ( - - - - - - -

- Proin nec tellus varius -

-

- Molestie libero vel -

- - - - - - -); - -export const PanelFigure = ({ aspectRatio, backgroundColor, bleed, padded }) => ( - -

- Note: Normally there would be other content along with the figure. - Observe the space that remains inside the panel outside the figure with each setting. -

- - - - - - -); -PanelFigure.args = { - aspectRatio: null, - backgroundColor: null, - bleed: null, - padded: false, -}; -// fully custom ArgsTable -PanelFigure.argTypes = { - bleed: { - control: { - type: 'radio', - options: Panel.Figure.BLEED_OPTIONS - } - }, -}; -PanelFigure.defaultProps = { - aspectRatio: null, - backgroundColor: null, - bleed: null, - padded: false, -}; -PanelFigure.propTypes = { - aspectRatio: PropTypes.number, - backgroundColor: PropTypes.string, - bleed: PropTypes.oneOf(Object.values(Panel.Figure.BLEED_OPTIONS)), - padded: PropTypes.bool, -}; diff --git a/packages/sage-react/lib/Panel/Panel.story.mdx b/packages/sage-react/lib/Panel/Panel.story.mdx new file mode 100644 index 0000000000..585cca4b74 --- /dev/null +++ b/packages/sage-react/lib/Panel/Panel.story.mdx @@ -0,0 +1,387 @@ +import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks"; +import { Badge } from "../Badge"; +import { Button } from "../Button"; +import { Icon } from "../Icon"; +import { OptionsDropdown } from "../Dropdown"; +import { Panel } from "./Panel"; +import { SageClassnames, SageTokens } from "../configs"; + + + +export const DefaultTemplate = args => ( + + + + Eu occaecat dolor minim mollit dolore qui cillum aliquip mollit ipsum et + ullamco consectetur occaecat. Officia irure elit ex nulla. Labore qui sit + nulla ex excepteur qui id sit id minim irure excepteur et. Excepteur + consectetur nisi Lorem tempor do deserunt veniam occaecat. + + + + + +); + +# Panel + +Panels are rich containers that allow for grouping and organizing content details. + +All panels are made up of three basic building blocks: Header, Body, and Footer. + + + + + Eu occaecat dolor minim mollit dolore qui cillum aliquip mollit ipsum et + ullamco consectetur occaecat. Officia irure elit ex nulla. Labore qui + sit nulla ex excepteur qui id sit id minim irure excepteur et. Excepteur + consectetur nisi Lorem tempor do deserunt veniam occaecat. + + + + + +`} +> + + {DefaultTemplate.bind({})} + + + +## Properties + + + +## Panel Building blocks + +### Header + +This area usually contains at least a title and an icon or menu positioned in the right corner, both optional. An optional subtext element is useful for documenting the panel objective. It employs the Sage Row layout base with `24px` gutters. + +### Body + +There are a few options for the panel body container. + +#### Panel Block + +A block is a completely unopinionated container meant to provide the most flexible way to group elements within a panel. This component is purely a wrapper and does not apply any layout or spacing by default so it is great for blocks of text or small groups of content within some of the other panel components. Set `type_block` to `true` to enforce open text spacing rules as established by the `sage-type` class. + + + +

Panel block text

+ + + `} +> + + + +

Panel block text

+ + + + + +#### Panel Stack + +A stack is a single column of elements sitting atop each other with the standard `8px` gap between each item in the stack. A common use is for stacking cards, but this is also help for presentation of several distinct lines of text content beyond open type formatting. + + + +

Panel stack text

+

Panel stack text

+

Panel stack text

+ + + `} +> + + + +

Panel stack text

+

Panel stack text

+

Panel stack text

+ + + + + +#### Panel List + +A list is a similar to a stack but has no space between items, and each item has a border that extends into the panel's outer gutters. Lists can also have row-like layouts with elements setup inline. + + + + +

Panel list text

+ + +

Panel list text

+ + +

Panel list text

+ + + + `} +> + + + + +

Panel list text

+ + +

Panel list text

+ + +

Panel list text

+ + + + + + +### Footer + +This area often contains one or more buttons that can be sent to the right edge of the panel with the `align_spread: true` component attribute. It employs the Sage Row layout base with `24px` gutters. + +### Miscellaneous + +#### Panel Row + +A panel row is a single or isolated inline arrangement of elements. It can either be a custom component or employ one of the standard [Grid Template Patterns](https://sage.kajabi.com/pages/patterns/grid_templates). + + + + + +

Proin nec tellus varius

+

+ Molestie libero vel +

+ + + + + + `} +> + + + + + +

Proin nec tellus varius

+

+ Molestie libero vel +

+ + + + + + + + +#### Panel Tiles + +Tiles are groups of elements that typically also each contain additional content but are laid out in a neat tiling pattern. Items can use the generic `.sage-panel__tile`, or be another Sage Component such as a Card. Use one of the tiling pattern modifiers to determine how many tiles appear in a row of the grid: 2-up, 3-up, and 4-up patterns. + + + + + +

Sed at ipsum pretium

+

+ Ornare convallis vitae sit +

+ + + +

Sed at ipsum pretium

+

+ Ornare convallis vitae sit +

+ + + +

Sed at ipsum pretium

+

+ Ornare convallis vitae sit +

+ + + + `} +> + + + + + +

Sed at ipsum pretium

+

+ Ornare convallis vitae sit +

+ + + +

Sed at ipsum pretium

+

+ Ornare convallis vitae sit +

+ + + +

Sed at ipsum pretium

+

+ Ornare convallis vitae sit +

+ + + + + + +#### Panel Divider + +The Divider is a thin rule that helps to provide additional visual separation between groups within the panel. + + + +

Divider

+ + + +

Divider with label

+ + + +

Divider with full bleed

+ + + +

Panel block text

+ + + `} +> + + + +

Divider

+ + + +

Divider with label

+ + + +

Divider with full bleed

+ + + +

Panel block text

+ + + + + +#### Panel Figure + +A panel figure contains an image that occupies a substantive space in the panel. + + + + + + + `} +> + + + + + + + +