@wordpress/block-editor
Version:
105 lines (98 loc) • 2.29 kB
JavaScript
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import TabbedSidebar from '../';
const meta = {
title: 'BlockEditor/TabbedSidebar',
component: TabbedSidebar,
tags: [ 'status-private' ],
parameters: {
docs: {
canvas: { sourceState: 'shown' },
description: {
component:
'A component that creates a tabbed sidebar with a close button.',
},
},
},
argTypes: {
defaultTabId: {
control: { type: null },
table: {
type: { summary: 'string' },
},
description:
'The ID of the tab to be selected by default when the component renders.',
},
onClose: {
action: 'onClose',
control: { type: null },
table: {
type: { summary: 'function' },
},
description: 'Function called when the close button is clicked.',
},
onSelect: {
action: 'onSelect',
control: { type: null },
table: {
type: { summary: 'function' },
},
description:
"Function called when a tab is selected. Receives the selected tab's ID as an argument.",
},
selectedTab: {
control: { type: null },
table: {
type: { summary: 'string' },
},
description: 'The ID of the currently selected tab.',
},
tabs: {
control: { type: 'array' },
table: {
type: { summary: 'array' },
},
description:
'Array of tab objects. Each tab should have: name (string), title (string), panel (React.Node), and optionally panelRef (React.Ref).',
},
closeButtonLabel: {
control: { type: 'text' },
table: {
type: { summary: 'string' },
},
description: 'Accessibility label for the close button.',
},
},
};
export default meta;
const DEMO_TABS = [
{ name: 'tab1', title: 'Settings' },
{ name: 'tab2', title: 'Styles' },
{ name: 'tab3', title: 'Advanced' },
];
export const Default = {
render: function Template( { onSelect, onClose, ...args } ) {
const [ selectedTab, setSelectedTab ] = useState();
return (
<TabbedSidebar
{ ...args }
selectedTab={ selectedTab }
onSelect={ ( ...changeArgs ) => {
onSelect( ...changeArgs );
setSelectedTab( ...changeArgs );
} }
onClose={ onClose }
/>
);
},
args: {
tabs: DEMO_TABS,
defaultTabId: 'tab1',
closeButtonLabel: 'Close Sidebar',
},
};