Dashboard v2: Add SummaryButtonList and SectionHeader components
#103555
+599
−191
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { SummaryButton } from '@automattic/components'; | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { Icon } from '@wordpress/components'; | ||
| import { brush, home, seen } from '@wordpress/icons'; | ||
| import { SummaryButtonList } from './'; | ||
|
|
||
| const meta: Meta< typeof SummaryButtonList > = { | ||
| title: 'client/dashboard/SummaryButtonList', | ||
| component: SummaryButtonList, | ||
| tags: [ 'autodocs' ], | ||
| parameters: { | ||
| actions: { argTypesRegex: '^on.*' }, | ||
| }, | ||
| decorators: [ | ||
| ( Story ) => ( | ||
| <div style={ { maxWidth: '600px', margin: '0 auto' } }> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj< typeof SummaryButtonList >; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| title: 'General Settings', | ||
| children: [ | ||
| <SummaryButton | ||
| key="visibility" | ||
| title="Site visibility" | ||
| decoration={ <Icon icon={ seen } /> } | ||
| badges={ [ { text: 'Public', intent: 'success' } ] } | ||
| />, | ||
| <SummaryButton | ||
| key="theme" | ||
| title="Theme" | ||
| decoration={ <Icon icon={ brush } /> } | ||
| badges={ [ { text: 'Twenty Twenty-Four' } ] } | ||
| />, | ||
| <SummaryButton | ||
| key="home" | ||
| title="Homepage settings" | ||
| decoration={ <Icon icon={ home } /> } | ||
| badges={ [ { text: 'Latest posts' } ] } | ||
| />, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const WithDescription: Story = { | ||
| args: { | ||
| ...Default.args, | ||
| description: 'Configure the basic settings for your site', | ||
| }, | ||
| }; | ||
|
|
||
| export const LowDensity: Story = { | ||
| args: { | ||
| ...Default.args, | ||
| density: 'low', | ||
| }, | ||
| }; | ||
|
|
||
| export const WithDescriptionsInButtons: Story = { | ||
| args: { | ||
| title: 'General Settings', | ||
| density: 'low', | ||
| children: [ | ||
| <SummaryButton | ||
| key="visibility" | ||
| title="Site visibility" | ||
| description="Control who can see your site" | ||
| decoration={ <Icon icon={ seen } /> } | ||
| badges={ [ { text: 'Public', intent: 'success' } ] } | ||
| />, | ||
| <SummaryButton | ||
| key="theme" | ||
| title="Theme" | ||
| description="Change the look and feel of your site" | ||
| decoration={ <Icon icon={ brush } /> } | ||
| badges={ [ { text: 'Twenty Twenty-Four' } ] } | ||
| />, | ||
| <SummaryButton | ||
| key="home" | ||
| title="Homepage settings" | ||
| description="Choose what appears on your homepage" | ||
| decoration={ <Icon icon={ home } /> } | ||
| badges={ [ { text: 'Latest posts' } ] } | ||
| />, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const Empty: Story = { | ||
| args: { | ||
| title: 'Empty Section', | ||
| description: 'This section has no buttons', | ||
| children: [], | ||
| }, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { | ||
| Card, | ||
| CardHeader, | ||
| __experimentalVStack as VStack, | ||
| __experimentalText as Text, | ||
| } from '@wordpress/components'; | ||
| import clsx from 'clsx'; | ||
| import { isValidElement, cloneElement, Children, ReactElement } from 'react'; | ||
| import { SummaryButtonListProps } from './types'; | ||
| import './style.scss'; | ||
|
|
||
| /** | ||
| * The SummaryButtonList is a utility component that wraps multiple SummaryButton instances | ||
| * along with an optional section header. It provides consistent layout, spacing, and | ||
| * grouping behavior for presenting a collection of summary actions or options. | ||
| * | ||
| * This component ensures visual coherence and structural alignment when multiple | ||
| * SummaryButton elements are displayed together. It is intended for use in contexts | ||
| * where a list of summarised items or actions needs to be grouped under a shared | ||
| * label or heading. | ||
| */ | ||
| export function SummaryButtonList( { | ||
| title, | ||
| description, | ||
| density = 'medium', | ||
| children, | ||
| }: SummaryButtonListProps ) { | ||
| const isMediumDensity = density === 'medium'; | ||
| // Clone children and override their density prop. | ||
| const clonedChildren = Children.map( children, ( child ) => { | ||
| if ( isValidElement( child ) ) { | ||
| return cloneElement( child as ReactElement< { density?: string } >, { density } ); | ||
| } | ||
| return child; | ||
| } ); | ||
| const header = ( | ||
| <VStack spacing={ 4 }> | ||
| <h3 className="client-dashboard-components-summary-button-list__heading">{ title }</h3> | ||
| { description && <Text variant="muted">{ description }</Text> } | ||
| </VStack> | ||
| ); | ||
| const className = clsx( | ||
| 'client-dashboard-components-summary-button-list', | ||
| `has-density-${ density }` | ||
| ); | ||
| if ( isMediumDensity ) { | ||
| return ( | ||
| <Card className={ className }> | ||
| <CardHeader>{ header }</CardHeader> | ||
| <VStack | ||
| spacing="1px" | ||
| className="client-dashboard-components-summary-button-list__children-container" | ||
|
There was a problem hiding this comment. Those long classnames are giving me headaches 😅 Is this some remnant of abiding |
||
| > | ||
| { clonedChildren } | ||
| </VStack> | ||
| </Card> | ||
| ); | ||
| } | ||
| return ( | ||
| <VStack className={ className } spacing={ 4 }> | ||
| { header } | ||
| { clonedChildren } | ||
| </VStack> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| @import "@wordpress/base-styles/variables"; | ||
|
|
||
| .client-dashboard-components-summary-button-list { | ||
|
|
||
| .client-dashboard-components-summary-button-list__heading { | ||
| margin: 0; | ||
| font-weight: $font-weight-medium; | ||
| } | ||
|
|
||
| &.has-density-low { | ||
| .client-dashboard-components-summary-button-list__heading { | ||
| font-size: $font-size-x-large; | ||
| line-height: $font-line-height-x-large; | ||
| } | ||
| } | ||
|
|
||
| &.has-density-medium { | ||
| .client-dashboard-components-summary-button-list__heading { | ||
| font-size: $font-size-large; | ||
| line-height: $font-line-height-large; | ||
| } | ||
|
|
||
| .client-dashboard-components-summary-button-list__children-container { | ||
| > *:last-child { | ||
| /* stylelint-disable-next-line scales/radii */ | ||
| border-radius: 7px; | ||
| } | ||
|
|
||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| /** | ||
| * @jest-environment jsdom | ||
| */ | ||
| import '@testing-library/jest-dom'; | ||
| import { SummaryButton } from '@automattic/components'; | ||
| import { Density } from '@automattic/components/src/summary-button/types'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import * as React from 'react'; | ||
| import { SummaryButtonList } from '../index'; | ||
|
|
||
| describe( 'SummaryButtonList', () => { | ||
| it( 'renders a title and description', () => { | ||
| render( | ||
| <SummaryButtonList title="My Settings" description="Configure your settings"> | ||
| <SummaryButton title="Setting One" /> | ||
| </SummaryButtonList> | ||
| ); | ||
| const heading = screen.getByRole( 'heading', { name: 'My Settings' } ); | ||
| expect( heading ).toBeVisible(); | ||
| expect( screen.getByText( 'Configure your settings' ) ).toBeVisible(); | ||
| } ); | ||
| it( 'passes the density prop to children', () => { | ||
| interface TestChildProps { | ||
| density?: Density; | ||
| } | ||
| const TestChild = ( props: TestChildProps ) => ( | ||
| <button aria-label="Test Child" data-density={ props.density }> | ||
| Child | ||
| </button> | ||
| ); | ||
| render( | ||
| <SummaryButtonList title="My Settings" density="low"> | ||
| <TestChild /> | ||
| </SummaryButtonList> | ||
| ); | ||
| const testChild = screen.getByRole( 'button', { name: 'Test Child' } ); | ||
| expect( testChild ).toBeVisible(); | ||
| expect( testChild ).toHaveAttribute( 'data-density', 'low' ); | ||
| } ); | ||
| } ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { ReactNode } from 'react'; | ||
| import type { Density } from '@automattic/components/src/summary-button/types'; | ||
|
|
||
| export interface SummaryButtonListProps { | ||
| /** | ||
| * The main label that identifies the section. | ||
| */ | ||
| title: string; | ||
| /** | ||
| * Optional supporting text that provides additional context or detail about the section. | ||
| */ | ||
| description?: string; | ||
| /** | ||
| * The density of the component. This affects both the container styling | ||
| * and the density of child SummaryButton components. It should be one of the `Density` values | ||
| * from the SummaryButton component ('low|medium'). | ||
| * @default 'medium' | ||
| */ | ||
| density?: Density; | ||
| /** | ||
| * The child components should be either SummaryButton instances or components that | ||
| * wrap SummaryButton internally and pass the `density` prop to them. This is because | ||
| * the component will override the 'density' prop of these children to match the parent's density. | ||
| */ | ||
| children: ReactNode; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.