77 lines
1.9 KiB
Plaintext
77 lines
1.9 KiB
Plaintext
/**
|
|
* External dependencies
|
|
*/
|
|
import { addFilter } from '@wordpress/hooks';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Dropdown } from '@wordpress/components';
|
|
import * as Woo from '@woocommerce/components';
|
|
import { Fragment } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './index.scss';
|
|
|
|
const MyExamplePage = () => (
|
|
<Fragment>
|
|
<Woo.Section component="article">
|
|
<Woo.SectionHeader title={ __( 'Search', '{{textdomain}}' ) } />
|
|
<Woo.Search
|
|
type="products"
|
|
placeholder="Search for something"
|
|
selected={ [] }
|
|
onChange={ ( items ) => setInlineSelect( items ) }
|
|
inlineTags
|
|
/>
|
|
</Woo.Section>
|
|
|
|
<Woo.Section component="article">
|
|
<Woo.SectionHeader title={ __( 'Dropdown', '{{textdomain}}' ) } />
|
|
<Dropdown
|
|
renderToggle={ ( { isOpen, onToggle } ) => (
|
|
<Woo.DropdownButton
|
|
onClick={ onToggle }
|
|
isOpen={ isOpen }
|
|
labels={ [ 'Dropdown' ] }
|
|
/>
|
|
) }
|
|
renderContent={ () => <p>Dropdown content here</p> }
|
|
/>
|
|
</Woo.Section>
|
|
|
|
<Woo.Section component="article">
|
|
<Woo.SectionHeader title={ __( 'Pill shaped container', '{{textdomain}}' ) } />
|
|
<Woo.Pill className={ 'pill' }>
|
|
{ __( 'Pill Shape Container', '{{textdomain}}' ) }
|
|
</Woo.Pill>
|
|
</Woo.Section>
|
|
|
|
<Woo.Section component="article">
|
|
<Woo.SectionHeader title={ __( 'Spinner', '{{textdomain}}' ) } />
|
|
<Woo.H>I am a spinner!</Woo.H>
|
|
<Woo.Spinner />
|
|
</Woo.Section>
|
|
|
|
<Woo.Section component="article">
|
|
<Woo.SectionHeader title={ __( 'Datepicker', '{{textdomain}}' ) } />
|
|
<Woo.DatePicker
|
|
text={ __( 'I am a datepicker!', '{{textdomain}}' ) }
|
|
dateFormat={ 'MM/DD/YYYY' }
|
|
/>
|
|
</Woo.Section>
|
|
</Fragment>
|
|
);
|
|
|
|
addFilter( 'woocommerce_admin_pages_list', '{{slug}}', ( pages ) => {
|
|
pages.push( {
|
|
container: MyExamplePage,
|
|
path: '/{{slug}}',
|
|
breadcrumbs: [ __( '{{title}}', '{{textdomain}}' ) ],
|
|
navArgs: {
|
|
id: '{{slugSnakeCase}}',
|
|
},
|
|
} );
|
|
|
|
return pages;
|
|
} );
|