From 463e3b0451ffd320d1703149d4f88230e339338d Mon Sep 17 00:00:00 2001 From: David Linke Date: Mon, 28 Apr 2025 15:51:43 -0400 Subject: [PATCH 1/2] feat(component): add enhancements to panel component --- .../__snapshots__/spec.tsx.snap | 2 +- .../components/Panel/Contents/Contents.tsx | 22 ++ .../Contents/__snapshots__/spec.tsx.snap | 10 + .../src/components/Panel/Contents/index.ts | 1 + .../src/components/Panel/Contents/spec.tsx | 53 ++++ .../src/components/Panel/Contents/styled.tsx | 66 ++++ .../big-design/src/components/Panel/Panel.tsx | 57 +++- .../Panel/__snapshots__/spec.tsx.snap | 55 +++- .../big-design/src/components/Panel/index.ts | 1 + .../big-design/src/components/Panel/spec.tsx | 49 ++- .../src/components/Panel/styled.tsx | 1 + packages/docs/PropTables/PanelPropTable.tsx | 90 +++++- packages/docs/pages/panel.tsx | 287 ++++++++++++++++-- 13 files changed, 637 insertions(+), 57 deletions(-) create mode 100644 packages/big-design/src/components/Panel/Contents/Contents.tsx create mode 100644 packages/big-design/src/components/Panel/Contents/__snapshots__/spec.tsx.snap create mode 100644 packages/big-design/src/components/Panel/Contents/index.ts create mode 100644 packages/big-design/src/components/Panel/Contents/spec.tsx create mode 100644 packages/big-design/src/components/Panel/Contents/styled.tsx diff --git a/packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap index 0ba353334..5989a8b21 100644 --- a/packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap +++ b/packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap @@ -2,7 +2,7 @@ exports[`it renders accordion panel header 1`] = `

Accordion Panel Header

diff --git a/packages/big-design/src/components/Panel/Contents/Contents.tsx b/packages/big-design/src/components/Panel/Contents/Contents.tsx new file mode 100644 index 000000000..e7c276cb8 --- /dev/null +++ b/packages/big-design/src/components/Panel/Contents/Contents.tsx @@ -0,0 +1,22 @@ +import React, { memo, ReactNode } from 'react'; + +import { BoxProps } from '../../Box'; + +import { StyledPanelContents, StyledPanelContentsWrapper } from './styled'; + +export interface PanelContentProps extends BoxProps { + children?: ReactNode; + padded?: boolean; + height?: string; + scrollable?: boolean; +} + +export const PanelContents: React.FC = memo(({ children, ...props }) => { + return ( + + {children} + + ); +}); + +PanelContents.displayName = 'PanelContents'; diff --git a/packages/big-design/src/components/Panel/Contents/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Panel/Contents/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000..999de1179 --- /dev/null +++ b/packages/big-design/src/components/Panel/Contents/__snapshots__/spec.tsx.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PanelContents renders StyledPanelContents with correct props 1`] = ` +
+ Test string +
+`; diff --git a/packages/big-design/src/components/Panel/Contents/index.ts b/packages/big-design/src/components/Panel/Contents/index.ts new file mode 100644 index 000000000..eb28c77e1 --- /dev/null +++ b/packages/big-design/src/components/Panel/Contents/index.ts @@ -0,0 +1 @@ +export { PanelContents, type PanelContentProps } from './Contents'; diff --git a/packages/big-design/src/components/Panel/Contents/spec.tsx b/packages/big-design/src/components/Panel/Contents/spec.tsx new file mode 100644 index 000000000..d708dffdf --- /dev/null +++ b/packages/big-design/src/components/Panel/Contents/spec.tsx @@ -0,0 +1,53 @@ +import { theme } from '@bigcommerce/big-design-theme'; +import { render } from '@testing-library/react'; +import React from 'react'; + +import { PanelContents } from './Contents'; + +describe('PanelContents', () => { + it('renders children correctly', () => { + const { getByText } = render( + +
Test Content
+ , + ); + + expect(getByText('Test Content')).toBeInTheDocument(); + }); + + it('applies default props to StyledPanelContentsWrapper', () => { + const { container } = render(); + const wrapper = container.firstChild; + + expect(wrapper).toHaveStyle('height: auto'); + }); + + it('applies the `padded` prop correctly', () => { + const { container } = render(); + const wrapper = container.firstChild; + + expect(wrapper).toHaveStyle(`margin-inline: -${theme.spacing.medium}`); + }); + + it('applies the `height` prop correctly', () => { + const { container } = render(Test string); + const wrapper = container.firstChild; + + expect(wrapper).toHaveStyle('height: 200px'); + }); + + it('applies the `scrollable` prop correctly', () => { + const { container } = render(Test string); + const wrapper = container.firstChild; + + expect(wrapper).toHaveStyle('overflow: auto'); + }); + + it('renders StyledPanelContents with correct props', () => { + const { getByText } = render(Test string); + const contents = getByText('Test string'); + + expect(contents).toBeInTheDocument(); + expect(contents).toMatchSnapshot(); + }); +}); diff --git a/packages/big-design/src/components/Panel/Contents/styled.tsx b/packages/big-design/src/components/Panel/Contents/styled.tsx new file mode 100644 index 000000000..289e0fc3a --- /dev/null +++ b/packages/big-design/src/components/Panel/Contents/styled.tsx @@ -0,0 +1,66 @@ +import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import styled, { css } from 'styled-components'; + +import { Box } from '../../Box'; + +import { PanelContentProps } from './Contents'; + +export const StyledPanelContentsWrapper = styled(Box)>` + ${({ theme, scrollable }) => + scrollable && + css` + background-image: linear-gradient( + 0deg, + ${theme.colors.secondary40} 0%, + transparent 1px, + transparent 100% + ), + linear-gradient(180deg, ${theme.colors.secondary40} 0%, transparent 1px, transparent 100%); + overflow: auto; + `} + + ${({ height }) => + height && + css` + height: ${height}; + `} + + ${({ theme, padded }) => + padded !== true && + css` + margin-inline: -${theme.spacing.medium}; + `} + + ${({ theme }) => theme.breakpoints.tablet} { + ${({ theme, padded }) => + padded !== true && + css` + margin-inline: -${theme.spacing.xLarge}; + `} + } +`; +StyledPanelContentsWrapper.defaultProps = { + theme: defaultTheme, + padded: true, + scrollable: false, + height: 'auto', +}; + +export const StyledPanelContents = styled(Box)>` + min-height: 100%; + ${({ theme, scrollable }) => + scrollable && + css` + border-block-start: ${theme.border.box}; + border-block-end: ${theme.border.box}; + + border-block-start-color: ${theme.colors.white}; + border-block-end-color: ${theme.colors.white}; + `} +`; +StyledPanelContents.defaultProps = { + theme: defaultTheme, + padded: true, + scrollable: false, + height: 'auto', +}; diff --git a/packages/big-design/src/components/Panel/Panel.tsx b/packages/big-design/src/components/Panel/Panel.tsx index 287d25f4d..2bfc033ea 100644 --- a/packages/big-design/src/components/Panel/Panel.tsx +++ b/packages/big-design/src/components/Panel/Panel.tsx @@ -1,12 +1,14 @@ import React, { ComponentPropsWithoutRef, forwardRef, isValidElement, memo, Ref } from 'react'; -import { MarginProps } from '../../helpers'; +import { excludeMarginProps, MarginProps } from '../../helpers'; import { excludePaddingProps } from '../../helpers/paddings/paddings'; import { warning } from '../../utils'; import { Badge, BadgeProps } from '../Badge/Badge'; import { Box } from '../Box'; import { Button, ButtonProps } from '../Button'; +import { Dropdown, DropdownProps } from '../Dropdown'; import { Flex } from '../Flex'; +import { Lozenge, LozengeProps } from '../Lozenge'; import { Text } from '../Typography'; import { StyledH2, StyledPanel } from './styled'; @@ -15,10 +17,16 @@ interface PrivateProps { forwardedRef: Ref; } -export interface PanelAction extends Omit { +export interface PanelActionProps extends Omit { text?: string; } +export interface PanelDropdownProps extends Omit { + toggle: PanelActionProps; +} + +export type PanelAction = PanelActionProps | PanelDropdownProps; + export interface PanelProps extends ComponentPropsWithoutRef<'div'>, MarginProps { children?: React.ReactNode; description?: React.ReactNode; @@ -26,11 +34,39 @@ export interface PanelProps extends ComponentPropsWithoutRef<'div'>, MarginProps headerId?: string; action?: PanelAction; badge?: BadgeProps; + lozenge?: LozengeProps; } +const Action = (action: PanelAction) => { + if ('toggle' in action) { + const { toggle, ...dropdownProps } = action; + const { text, ...buttonProps } = toggle; + + return ( + + {text} + + } + /> + ); + } + + const { text, ...buttonProps } = action; + + return ( + + ); +}; + export const RawPanel: React.FC = memo(({ forwardedRef, ...props }) => { const filteredProps = excludePaddingProps(props); - const { action, children, description, header, headerId, badge, ...rest } = filteredProps; + const { action, children, description, header, headerId, badge, lozenge, ...rest } = + filteredProps; const renderHeader = () => { if (!header && !action) { @@ -42,14 +78,17 @@ export const RawPanel: React.FC = memo(({ forwardedRe } return ( - + {Boolean(header) && ( - - {header} - {badge && } - + + + {header} + + {lozenge && } + {badge && } + )} - {action && } + {action && } ); }; diff --git a/packages/big-design/src/components/Panel/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Panel/__snapshots__/spec.tsx.snap index e4ed948fe..7eb8fd755 100644 --- a/packages/big-design/src/components/Panel/__snapshots__/spec.tsx.snap +++ b/packages/big-design/src/components/Panel/__snapshots__/spec.tsx.snap @@ -48,7 +48,7 @@ exports[`render panel 1`] = ` `; exports[`render panel with only a heading and no content 1`] = ` -.c4 { +.c5 { color: #313440; margin: 0 0 1rem; font-size: 1.5rem; @@ -73,13 +73,39 @@ exports[`render panel with only a heading and no content 1`] = ` -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + gap: 0.5rem; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c4 { + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: 0.5rem; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; @@ -97,14 +123,17 @@ exports[`render panel with only a heading and no content 1`] = ` border-radius: 0; } -.c5 { +.c6 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; } -.c5 ~ .bd-button { +.c6 ~ .bd-button { width: auto; margin-top: 0; } @@ -133,11 +162,15 @@ exports[`render panel with only a heading and no content 1`] = `
-

- Test Header -

+

+ Test Header +

+
`; diff --git a/packages/big-design/src/components/Panel/index.ts b/packages/big-design/src/components/Panel/index.ts index 5a3174208..341be948a 100644 --- a/packages/big-design/src/components/Panel/index.ts +++ b/packages/big-design/src/components/Panel/index.ts @@ -1 +1,2 @@ export { Panel, type PanelProps } from './Panel'; +export { PanelContents, type PanelContentProps } from './Contents'; diff --git a/packages/big-design/src/components/Panel/spec.tsx b/packages/big-design/src/components/Panel/spec.tsx index 4ddc42545..1c14c6a76 100644 --- a/packages/big-design/src/components/Panel/spec.tsx +++ b/packages/big-design/src/components/Panel/spec.tsx @@ -1,5 +1,6 @@ import { theme } from '@bigcommerce/big-design-theme'; import { fireEvent, render, screen } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; import React, { createRef } from 'react'; import 'jest-styled-components'; @@ -40,7 +41,7 @@ test('does not forward styles', () => { expect(container.firstChild).not.toHaveStyle('background: red'); }); -test('renders a header and action', () => { +test('renders a header and a button action', () => { const { getByRole } = render( Dolore proident eiusmod sint est enim laboris anim minim quis ut adipisicing consectetur @@ -61,6 +62,33 @@ test('renders a header and action', () => { expect(actionButton.textContent).toBe('Test Action'); }); +test('renders a header and a dropdown action', async () => { + const dropdownItemCallback = jest.fn(); + const { getByRole } = render( + + Lorem Ipsum + , + ); + + const dropdownToggle = getByRole('button'); + + expect(dropdownToggle).toBeInTheDocument(); + expect(dropdownToggle.textContent).toBe('Toggle Dropdown'); + + await userEvent.click(dropdownToggle); + await userEvent.click(screen.getByRole('option', { name: 'Action 1' })); + + expect(dropdownItemCallback).toHaveBeenCalled(); +}); + test('renders a badge and header', () => { const { getByRole, getByText } = render( @@ -80,6 +108,25 @@ test('renders a badge and header', () => { expect(badge).toBeInTheDocument(); }); +test('renders a lozenge and header', () => { + const { getByRole, getByText } = render( + + Dolore proident eiusmod sint est enim laboris anim minim quis ut adipisicing consectetur + officia ex. Ipsum eiusmod fugiat amet pariatur culpa tempor aliquip tempor nisi. Irure esse + deserunt nostrud ipsum id adipisicing enim velit labore. Nulla exercitation laborum laboris + Lorem irure sit esse nulla mollit aliquip consectetur velit + , + ); + + const header = getByRole('heading'); + + expect(header).toBeInTheDocument(); + + const lozenge = getByText('Beta'); + + expect(lozenge).toBeInTheDocument(); +}); + describe('description', () => { test('renders string description', async () => { render( diff --git a/packages/big-design/src/components/Panel/styled.tsx b/packages/big-design/src/components/Panel/styled.tsx index f0dc187e1..1e1e0e7f1 100644 --- a/packages/big-design/src/components/Panel/styled.tsx +++ b/packages/big-design/src/components/Panel/styled.tsx @@ -14,6 +14,7 @@ export const StyledPanel = styled(Box)` export const StyledH2 = styled(StyleableH2)` flex-grow: 1; + flex-shrink: 1; & ~ .bd-button { width: auto; diff --git a/packages/docs/PropTables/PanelPropTable.tsx b/packages/docs/PropTables/PanelPropTable.tsx index 883398b1f..0d605d4f6 100644 --- a/packages/docs/PropTables/PanelPropTable.tsx +++ b/packages/docs/PropTables/PanelPropTable.tsx @@ -24,10 +24,23 @@ const panelProps: Prop[] = [ }, { name: 'action', - types: 'ButtonProps & { text: string }', + types: [ + + PanelAction + , + + PanelDropdown + , + ], description: ( <> - Defines the Panel action button. + Defines the Panel action button or dropdown. ), }, @@ -44,6 +57,19 @@ const panelProps: Prop[] = [ ), }, + { + name: 'lozenge', + types: [ + + LozengeProps + , + ], + description: ( + <> + See Lozenge for usage. + + ), + }, { name: 'description', types: ['string', 'React.ReactNode'], @@ -54,3 +80,63 @@ const panelProps: Prop[] = [ export const PanelPropTable: React.FC = (props) => ( ); + +const PanelActionProps: Prop[] = [ + { + name: 'text', + types: 'string', + description: 'The text content of the button.', + required: true, + }, +]; + +export const PanelActionPropTable: React.FC = (props) => ( + +); + +const PanelDropdownProps: Prop[] = [ + { + name: 'toggle', + types: ( + + PanelAction + + ), + description: 'The button used to toggle the dropdown.', + required: true, + }, +]; + +export const PanelDropdownPropTable: React.FC = (props) => ( + +); + +const PanelContentsProps: Prop[] = [ + { + name: 'children', + types: 'React.ReactNode', + description: 'The content of the panel.', + }, + { + name: 'padded', + types: 'boolean', + description: 'Determines if the panel contents have padding.', + defaultValue: 'true', + }, + { + name: 'height', + types: 'string', + description: 'Sets the height of the panel contents. Value accepts any valid CSS height value.', + }, + { + name: 'scrollable', + types: 'boolean', + description: + 'Determines if the panel contents are scrollable. Height must be set for this to work.', + defaultValue: 'false', + }, +]; + +export const PanelContentsPropTable: React.FC = (props) => ( + +); diff --git a/packages/docs/pages/panel.tsx b/packages/docs/pages/panel.tsx index 35f75f895..0362ee815 100644 --- a/packages/docs/pages/panel.tsx +++ b/packages/docs/pages/panel.tsx @@ -1,8 +1,17 @@ -import { H1, Panel, Text } from '@bigcommerce/big-design'; +import { H1, Panel, PanelContents, Table, Text } from '@bigcommerce/big-design'; +import { MoreHorizIcon } from '@bigcommerce/big-design-icons'; import React from 'react'; -import { Code, CodePreview, GuidelinesTable, List } from '../components'; -import { MarginPropTable, PanelPropTable } from '../PropTables'; +import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components'; +import { + ButtonPropTable, + DropdownPropTable, + MarginPropTable, + PanelActionPropTable, + PanelContentsPropTable, + PanelDropdownPropTable, + PanelPropTable, +} from '../PropTables'; const PanelPage = () => { return ( @@ -23,39 +32,251 @@ const PanelPage = () => { - - {/* jsx-to-string:start */} - { - // Do some action - }, - }} - badge={{ - label: 'primary', - variant: 'primary', - }} - description="This is the panel's optional description." - header="Panel header" - > - - Lorem ipsum dolor amet officia humblebrag selvage, subway tile vexillologist id - pickled adaptogen fashion axe. Ennui meh pitchfork banh mi. Keffiyeh PBRB echo park - gastropub. Pop-up neutra brunch ullamco affogato shaman vexillologist quinoa - post-ironic locavore. Retro selfies proident synth ethical quinoa marfa chartreuse - dolor vexillologist gochujang. Tempor poke unicorn, readymade crucifix fugiat culpa. - Kinfolk hella asymmetrical, meggings et consectetur lomo farm-to-table exercitation - DIY. - - - {/* jsx-to-string:end */} - + ( + + {/* jsx-to-string:start */} + { + // Do some action + }, + }} + badge={{ + label: 'Status', + variant: 'success', + }} + description="This is the panel's optional description." + header="Panel header" + lozenge={{ + label: 'Beta', + variant: 'beta', + }} + > + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat, + sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant + morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis + efficitur risus quis ante volutpat finibus. In varius mattis orci, et + volutpat erat rhoncus nec. Mauris lectus nisi, pharetra eget mollis id, + pulvinar in nisi. In dapibus urna turpis. Proin iaculis tincidunt turpis ac + viverra. Nullam auctor, leo non imperdiet consectetur, purus orci posuere + magna, eu varius nisl magna semper arcu. In sit amet scelerisque enim. In + varius, libero euismod finibus congue, turpis neque semper dolor, + sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit + magna, quis aliquet arcu pulvinar in. + + + + {/* jsx-to-string:end */} + + ), + }, + { + id: 'dropdown-action', + title: 'Dropdown Action', + render: () => ( + + {/* jsx-to-string:start */} + { + // Do some action + return item.content; + }, + }, + { + content: 'Action 2', + onItemClick: (item) => { + // Do some action + return item.content; + }, + }, + ], + toggle: { + variant: 'utility', + iconOnly: , + }, + }} + description="Use this option when you want to have more than one action." + header="Panel with dropdown action" + > + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat, + sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant + morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis + efficitur risus quis ante volutpat finibus. In varius mattis orci, et + volutpat erat rhoncus nec. Mauris lectus nisi, pharetra eget mollis id, + pulvinar in nisi. In dapibus urna turpis. Proin iaculis tincidunt turpis ac + viverra. Nullam auctor, leo non imperdiet consectetur, purus orci posuere + magna, eu varius nisl magna semper arcu. In sit amet scelerisque enim. In + varius, libero euismod finibus congue, turpis neque semper dolor, + sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit + magna, quis aliquet arcu pulvinar in. + + + + {/* jsx-to-string:end */} + + ), + }, + { + id: 'unpadded-contents', + title: 'Unpadded Contents', + render: () => ( + + {/* jsx-to-string:start */} + + + sku, + }, + { header: 'Name', hash: 'name', render: ({ name }) => name }, + { header: 'Stock', hash: 'stock', render: ({ stock }) => stock }, + ]} + items={[ + { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 }, + { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 }, + { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 }, + { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 }, + { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 }, + ]} + /> + + + {/* jsx-to-string:end */} + + ), + }, + { + id: 'scrollable-contents', + title: 'Scrollable Contents', + render: () => ( + + {/* jsx-to-string:start */} + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat, + sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant + morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis + efficitur risus quis ante volutpat finibus. In varius mattis orci, et + volutpat erat rhoncus nec. Mauris lectus nisi, pharetra eget mollis id, + pulvinar in nisi. In dapibus urna turpis. Proin iaculis tincidunt turpis ac + viverra. Nullam auctor, leo non imperdiet consectetur, purus orci posuere + magna, eu varius nisl magna semper arcu. In sit amet scelerisque enim. In + varius, libero euismod finibus congue, turpis neque semper dolor, + sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit + magna, quis aliquet arcu pulvinar in. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat, + sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant + morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis + efficitur risus quis ante volutpat finibus. In varius mattis orci, et + volutpat erat rhoncus nec. Mauris lectus nisi, pharetra eget mollis id, + pulvinar in nisi. In dapibus urna turpis. Proin iaculis tincidunt turpis ac + viverra. Nullam auctor, leo non imperdiet consectetur, purus orci posuere + magna, eu varius nisl magna semper arcu. In sit amet scelerisque enim. In + varius, libero euismod finibus congue, turpis neque semper dolor, + sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit + magna, quis aliquet arcu pulvinar in. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat, + sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant + morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis + efficitur risus quis ante volutpat finibus. In varius mattis orci, et + volutpat erat rhoncus nec. Mauris lectus nisi, pharetra eget mollis id, + pulvinar in nisi. In dapibus urna turpis. Proin iaculis tincidunt turpis ac + viverra. Nullam auctor, leo non imperdiet consectetur, purus orci posuere + magna, eu varius nisl magna semper arcu. In sit amet scelerisque enim. In + varius, libero euismod finibus congue, turpis neque semper dolor, + sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit + magna, quis aliquet arcu pulvinar in. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sem erat, + sollicitudin quis varius sed, lacinia finibus sem. Pellentesque habitant + morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis + efficitur risus quis ante volutpat finibus. In varius mattis orci, et + volutpat erat rhoncus nec. Mauris lectus nisi, pharetra eget mollis id, + pulvinar in nisi. In dapibus urna turpis. Proin iaculis tincidunt turpis ac + viverra. Nullam auctor, leo non imperdiet consectetur, purus orci posuere + magna, eu varius nisl magna semper arcu. In sit amet scelerisque enim. In + varius, libero euismod finibus congue, turpis neque semper dolor, + sollicitudin pellentesque ante quam lobortis enim. Mauris posuere velit + magna, quis aliquet arcu pulvinar in. + + + + {/* jsx-to-string:end */} + + ), + }, + ]} + /> - } /> + {/* } /> */} + } />, + }, + { + id: 'panel-action', + title: 'PanelAction', + render: () => ( + } + /> + ), + }, + { + id: 'panel-dropdown', + title: 'PanelDropdown', + render: () => ( + } + /> + ), + }, + { + id: 'panel-contents', + title: 'PanelContents', + render: () => , + }, + ]} + /> From d79d8d8e97249577a9bf18c135db021355b509b0 Mon Sep 17 00:00:00 2001 From: David Linke Date: Mon, 28 Apr 2025 16:04:16 -0400 Subject: [PATCH 2/2] feat(component): add changeset to Panel component enhancements --- .changeset/wise-pans-vanish.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/wise-pans-vanish.md diff --git a/.changeset/wise-pans-vanish.md b/.changeset/wise-pans-vanish.md new file mode 100644 index 000000000..3a9ee4427 --- /dev/null +++ b/.changeset/wise-pans-vanish.md @@ -0,0 +1,6 @@ +--- +'@bigcommerce/big-design': minor +'@bigcommerce/docs': minor +--- + +Enhanced Panel component with extra features like Lozenge, Dropdown action and a new PanelContents component