37 lines
859 B
JavaScript
37 lines
859 B
JavaScript
|
/** @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>
|
||
|
|
);
|
||
|
|
}
|