woocommerce/plugins/woocommerce-admin/client/layout/section.js

37 lines
859 B
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import { createContext } from '@wordpress/element';
/**
* Context container for heading level. We start at 2 because the `h1` is defined in <Header />
*
* See https://medium.com/@Heydon/managing-heading-levels-in-design-systems-18be9a746fa3
*/
const Level = createContext( 2 );
export function Section( { component, children, ...props } ) {
const Component = component || 'div';
return (
<Level.Consumer>
{ level => (
<Level.Provider value={ level + 1 }>
{ false === component ? children : <Component { ...props }>{ children }</Component> }
</Level.Provider>
) }
</Level.Consumer>
);
}
export function H( props ) {
return (
<Level.Consumer>
{ level => {
const Heading = 'h' + Math.min( level, 6 );
return <Heading { ...props } />;
} }
</Level.Consumer>
);
}