From cfa9a9798cf8594cc32ce9538ce1d7c99f06d1a2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Jan 2020 15:43:59 +0100 Subject: [PATCH] Move Alignment, movers and trash icons to the icons package (#19944) --- .../src/components/alignment-toolbar/index.js | 7 +- .../test/__snapshots__/index.js.snap | 38 ++++++++-- .../block-alignment-toolbar/index.js | 23 +++--- .../test/__snapshots__/index.js.snap | 38 ++++++++-- .../block-alignment-toolbar/test/index.js | 4 +- .../block-mobile-toolbar/index.native.js | 3 +- .../src/components/block-mover/icons.js | 14 +--- .../src/components/block-mover/index.js | 7 +- .../src/components/block-mover/test/index.js | 10 ++- .../components/block-settings-menu/index.js | 3 +- packages/block-library/src/table/edit.js | 8 +-- packages/components/src/panel/body.js | 13 +--- packages/components/src/panel/test/body.js | 2 +- .../specs/editor/plugins/align-hook.test.js | 38 ++++++---- .../editor/various/block-grouping.test.js | 6 +- .../test/__snapshots__/index.js.snap | 2 +- .../test/__snapshots__/index.js.snap | 2 +- packages/icons/src/index.js | 11 +++ packages/icons/src/library/align-center.js | 13 ++++ packages/icons/src/library/align-left.js | 13 ++++ packages/icons/src/library/align-right.js | 13 ++++ packages/icons/src/library/chevron-down.js | 12 ++++ packages/icons/src/library/chevron-up.js | 12 ++++ packages/icons/src/library/position-center.js | 13 ++++ packages/icons/src/library/position-left.js | 13 ++++ packages/icons/src/library/position-right.js | 13 ++++ .../icons/src/library/stretch-full-width.js | 13 ++++ packages/icons/src/library/stretch-wide.js | 13 ++++ packages/icons/src/library/trash.js | 13 ++++ storybook/test/__snapshots__/index.js.snap | 72 ++++++------------- 30 files changed, 313 insertions(+), 129 deletions(-) create mode 100644 packages/icons/src/library/align-center.js create mode 100644 packages/icons/src/library/align-left.js create mode 100644 packages/icons/src/library/align-right.js create mode 100644 packages/icons/src/library/chevron-down.js create mode 100644 packages/icons/src/library/chevron-up.js create mode 100644 packages/icons/src/library/position-center.js create mode 100644 packages/icons/src/library/position-left.js create mode 100644 packages/icons/src/library/position-right.js create mode 100644 packages/icons/src/library/stretch-full-width.js create mode 100644 packages/icons/src/library/stretch-wide.js create mode 100644 packages/icons/src/library/trash.js diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index 4f3b9104e1928..40dfa28c0ce88 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -8,20 +8,21 @@ import { find } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; +import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; const DEFAULT_ALIGNMENT_CONTROLS = [ { - icon: 'editor-alignleft', + icon: alignLeft, title: __( 'Align text left' ), align: 'left', }, { - icon: 'editor-aligncenter', + icon: alignCenter, title: __( 'Align text center' ), align: 'center', }, { - icon: 'editor-alignright', + icon: alignRight, title: __( 'Align text right' ), align: 'right', }, diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap index 87dc64ceda18f..8ca05b1361631 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap @@ -34,7 +34,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` Array [ Object { "align": "left", - "icon": "editor-alignleft", + "icon": + + , "isActive": true, "onClick": [Function], "role": "menuitemradio", @@ -42,7 +49,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` }, Object { "align": "center", - "icon": "editor-aligncenter", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", @@ -50,7 +64,14 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` }, Object { "align": "right", - "icon": "editor-alignright", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", @@ -58,7 +79,16 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` }, ] } - icon="editor-alignleft" + icon={ + + + + } isCollapsed={true} label="Change text alignment" /> diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js index da5dbb7317a3a..b3ac1df33142c 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -5,6 +5,13 @@ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { + positionCenter, + positionLeft, + positionRight, + stretchFullWidth, + stretchWide, +} from '@wordpress/icons'; /** * Internal dependencies @@ -13,23 +20,23 @@ import { withBlockEditContext } from '../block-edit/context'; const BLOCK_ALIGNMENTS_CONTROLS = { left: { - icon: 'align-left', + icon: positionLeft, title: __( 'Align left' ), }, center: { - icon: 'align-center', + icon: positionCenter, title: __( 'Align center' ), }, right: { - icon: 'align-right', + icon: positionRight, title: __( 'Align right' ), }, wide: { - icon: 'align-wide', + icon: stretchWide, title: __( 'Wide width' ), }, full: { - icon: 'align-full-width', + icon: stretchFullWidth, title: __( 'Full width' ), }, }; @@ -43,9 +50,9 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON return () => onChange( value === align ? undefined : align ); } - const enabledControls = wideControlsEnabled ? - controls : - controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 ); + const enabledControls = wideControlsEnabled + ? controls + : controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 ); const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ]; const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ]; diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap index ebc927c8eb816..10e88985b76d5 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap @@ -5,21 +5,42 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` controls={ Array [ Object { - "icon": "align-left", + "icon": + + , "isActive": true, "onClick": [Function], "role": "menuitemradio", "title": "Align left", }, Object { - "icon": "align-center", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", "title": "Align center", }, Object { - "icon": "align-right", + "icon": + + , "isActive": false, "onClick": [Function], "role": "menuitemradio", @@ -27,7 +48,16 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` }, ] } - icon="align-left" + icon={ + + + + } isCollapsed={true} label="Change alignment" /> diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js b/packages/block-editor/src/components/block-alignment-toolbar/test/index.js index c7a208006849e..b92ab806746ec 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/test/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/test/index.js @@ -25,7 +25,7 @@ describe( 'BlockAlignmentToolbar', () => { } ); test( 'should call onChange with undefined, when the control is already active', () => { - const activeControl = controls.find( ( { icon } ) => icon === `align-${ alignment }` ); + const activeControl = controls.find( ( { title } ) => title === 'Align left' ); activeControl.onClick(); expect( activeControl.isActive ).toBe( true ); @@ -34,7 +34,7 @@ describe( 'BlockAlignmentToolbar', () => { } ); test( 'should call onChange with alignment value when the control is inactive', () => { - const inactiveCenterControl = controls.find( ( { icon } ) => icon === 'align-center' ); + const inactiveCenterControl = controls.find( ( { title } ) => title === 'Align center' ); inactiveCenterControl.onClick(); expect( inactiveCenterControl.isActive ).toBe( false ); diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js index 46580878ff684..4be16304d9937 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js +++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js @@ -10,6 +10,7 @@ import { ToolbarButton } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { trash } from '@wordpress/icons'; /** * Internal dependencies @@ -39,7 +40,7 @@ const BlockMobileToolbar = ( { ) } onClick={ onDelete } - icon="trash" + icon={ trash } extraProps={ { hint: __( 'Double tap to remove the block' ) } } /> diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js index 2a15b8a6159d5..f3b575bd57a86 100644 --- a/packages/block-editor/src/components/block-mover/icons.js +++ b/packages/block-editor/src/components/block-mover/icons.js @@ -1,13 +1,7 @@ /** * WordPress dependencies */ -import { Path, Polygon, SVG } from '@wordpress/components'; - -export const upArrow = ( - - - -); +import { Path, SVG } from '@wordpress/components'; export const leftArrow = ( @@ -15,12 +9,6 @@ export const leftArrow = ( ); -export const downArrow = ( - - - -); - export const rightArrow = ( diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index 84475b9c60b98..ea5bb8c36d8fe 100644 --- a/packages/block-editor/src/components/block-mover/index.js +++ b/packages/block-editor/src/components/block-mover/index.js @@ -18,7 +18,8 @@ import { withInstanceId, compose } from '@wordpress/compose'; * Internal dependencies */ import { getBlockMoverDescription } from './mover-description'; -import { leftArrow, rightArrow, upArrow, downArrow, dragHandle } from './icons'; +import { leftArrow, rightArrow, dragHandle } from './icons'; +import { chevronUp, chevronDown } from '@wordpress/icons'; import BlockDraggable from '../block-draggable'; export class BlockMover extends Component { @@ -56,12 +57,12 @@ export class BlockMover extends Component { if ( orientation === 'horizontal' ) { return isRTL ? rightArrow : leftArrow; } - return upArrow; + return chevronUp; } else if ( moveDirection === 'down' ) { if ( orientation === 'horizontal' ) { return isRTL ? leftArrow : rightArrow; } - return downArrow; + return chevronDown; } return null; }; diff --git a/packages/block-editor/src/components/block-mover/test/index.js b/packages/block-editor/src/components/block-mover/test/index.js index 5437249304829..e413dc6e8680b 100644 --- a/packages/block-editor/src/components/block-mover/test/index.js +++ b/packages/block-editor/src/components/block-mover/test/index.js @@ -3,11 +3,15 @@ */ import { shallow } from 'enzyme'; +/** + * WordPress dependencies + */ +import { chevronUp, chevronDown } from '@wordpress/icons'; + /** * Internal dependencies */ import { BlockMover } from '../'; -import { upArrow, downArrow } from '../icons'; describe( 'BlockMover', () => { describe( 'basic rendering', () => { @@ -45,7 +49,7 @@ describe( 'BlockMover', () => { className: 'block-editor-block-mover__control', onClick: undefined, label: 'Move up', - icon: upArrow, + icon: chevronUp, 'aria-disabled': undefined, 'aria-describedby': 'block-editor-block-mover__up-description-1', } ); @@ -53,7 +57,7 @@ describe( 'BlockMover', () => { className: 'block-editor-block-mover__control', onClick: undefined, label: 'Move down', - icon: downArrow, + icon: chevronDown, 'aria-disabled': undefined, 'aria-describedby': 'block-editor-block-mover__down-description-1', } ); diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index c73d3ca615eea..375c585a5d412 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -14,6 +14,7 @@ import { MenuItem, } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; +import { trash } from '@wordpress/icons'; /** * Internal dependencies @@ -120,7 +121,7 @@ export function BlockSettingsMenu( { clientIds } ) { { ! isLocked && ( { _n( 'Remove Block', 'Remove Blocks', count ) } diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index 92712c7d2b708..33c0966e8376a 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -26,7 +26,7 @@ import { ToggleControl, ToolbarGroup, } from '@wordpress/components'; -import { table as icon } from '@wordpress/icons'; +import { table as icon, alignLeft, alignRight, alignCenter } from '@wordpress/icons'; /** * Internal dependencies @@ -68,17 +68,17 @@ const BACKGROUND_COLORS = [ const ALIGNMENT_CONTROLS = [ { - icon: 'editor-alignleft', + icon: alignLeft, title: __( 'Align Column Left' ), align: 'left', }, { - icon: 'editor-aligncenter', + icon: alignCenter, title: __( 'Align Column Center' ), align: 'center', }, { - icon: 'editor-alignright', + icon: alignRight, title: __( 'Align Column Right' ), align: 'right', }, diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js index af8cbe38a6dad..e1e17a8a36aa7 100644 --- a/packages/components/src/panel/body.js +++ b/packages/components/src/panel/body.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { Component, forwardRef } from '@wordpress/element'; -import { G, Path, SVG } from '@wordpress/primitives'; +import { chevronUp, chevronDown } from '@wordpress/icons'; /** * Internal dependencies @@ -56,16 +56,7 @@ export class PanelBody extends Component { repaints the whole element, so this wrapping span hides that. */ } { title } { icon && } diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js index 78d4774afccd8..180df741c946b 100644 --- a/packages/components/src/panel/test/body.js +++ b/packages/components/src/panel/test/body.js @@ -23,7 +23,7 @@ describe( 'PanelBody', () => { expect( panelBody.state( 'opened' ) ).toBe( true ); expect( button.prop( 'onClick' ) ).toBe( panelBody.instance().toggle ); expect( button.childAt( 0 ).name() ).toBe( 'span' ); - expect( button.childAt( 0 ).childAt( 0 ).name() ).toBe( 'SVG' ); + expect( button.childAt( 0 ).childAt( 0 ).name() ).toBe( 'Icon' ); expect( button.childAt( 1 ).text() ).toBe( 'Some Text' ); } ); diff --git a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js index b81e7c7a15016..16a61e53f568b 100644 --- a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js +++ b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js @@ -12,6 +12,14 @@ import { setPostContent, } from '@wordpress/e2e-test-utils'; +const alignLabels = { + left: 'Align left', + center: 'Align center', + right: 'Align right', + wide: 'Wide width', + full: 'Full width', +}; + describe( 'Align Hook Works As Expected', () => { const CHANGE_ALIGNMENT_BUTTON_SELECTOR = '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Change alignment"]'; @@ -76,12 +84,12 @@ describe( 'Align Hook Works As Expected', () => { const createCorrectlyAppliesAndRemovesAlignmentTest = ( blockName, alignment ) => { it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => { - const BUTTON_SELECTOR = `.components-dropdown-menu__menu button svg.dashicons-align-${ alignment }`; + const BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), '${ alignLabels[ alignment ] }')]`; const BUTTON_PRESSED_SELECTOR = '.components-dropdown-menu__menu button.is-active'; // set the specified alignment. await insertBlock( blockName ); await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); - await page.click( BUTTON_SELECTOR ); + await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click(); // verify the button of the specified alignment is pressed. await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); @@ -102,7 +110,7 @@ describe( 'Align Hook Works As Expected', () => { // remove the alignment. await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); - await page.click( BUTTON_SELECTOR ); + await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click(); // verify no alignment button is in pressed state. await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); @@ -150,11 +158,11 @@ describe( 'Align Hook Works As Expected', () => { const BLOCK_NAME = 'Test Align True'; createShowsTheExpectedButtonsTest( BLOCK_NAME, [ - 'Align left', - 'Align center', - 'Align right', - 'Wide width', - 'Full width', + alignLabels.left, + alignLabels.center, + alignLabels.right, + alignLabels.wide, + alignLabels.full, ] ); createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME ); @@ -166,8 +174,8 @@ describe( 'Align Hook Works As Expected', () => { const BLOCK_NAME = 'Test Align Array'; createShowsTheExpectedButtonsTest( BLOCK_NAME, [ - 'Align left', - 'Align center', + alignLabels.left, + alignLabels.center, ] ); createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME ); @@ -179,11 +187,11 @@ describe( 'Align Hook Works As Expected', () => { const BLOCK_NAME = 'Test Default Align'; const SELECTED_ALIGNMENT_CONTROL_SELECTOR = '//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")][text()="Align right"]'; createShowsTheExpectedButtonsTest( BLOCK_NAME, [ - 'Align left', - 'Align center', - 'Align right', - 'Wide width', - 'Full width', + alignLabels.left, + alignLabels.center, + alignLabels.right, + alignLabels.wide, + alignLabels.full, ] ); it( 'Applies the selected alignment by default', async () => { diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js index 8d12894a6b311..4822aabe706e9 100644 --- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js +++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js @@ -160,12 +160,14 @@ describe( 'Block Grouping', () => { // Full width image. await insertBlock( 'Image' ); await clickBlockToolbarButton( 'Change alignment' ); - await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-full-width' ); + const FULL_WIDTH_BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]`; + await ( await page.$x( FULL_WIDTH_BUTTON_XPATH ) )[ 0 ].click(); // Wide width image. await insertBlock( 'Image' ); await clickBlockToolbarButton( 'Change alignment' ); - await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-wide' ); + const WIDE_BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]`; + await ( await page.$x( WIDE_BUTTON_XPATH ) )[ 0 ].click(); await insertBlock( 'Paragraph' ); await page.keyboard.type( 'Some paragraph' ); diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap index c4c84425a8ba5..5b0fde0fa5a8a 100644 --- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPostPublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap index 9b509415dd4cd..46104f10b65b4 100644 --- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; +exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 8f9e9f62e638e..356b2784ce521 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -1,12 +1,17 @@ export { default as Icon } from './icon'; +export { default as alignCenter } from './library/align-center'; export { default as alignJustify } from './library/align-justify'; +export { default as alignLeft } from './library/align-left'; +export { default as alignRight } from './library/align-right'; export { default as archive } from './library/archive'; export { default as audio } from './library/audio'; export { default as button } from './library/button'; export { default as calendar } from './library/calendar'; export { default as category } from './library/category'; export { default as check } from './library/check'; +export { default as chevronDown } from './library/chevron-down'; +export { default as chevronUp } from './library/chevron-up'; export { default as classic } from './library/classic'; export { default as code } from './library/code'; export { default as column } from './library/column'; @@ -27,6 +32,9 @@ export { default as more } from './library/more'; export { default as navigation } from './library/navigation'; export { default as pageBreak } from './library/page-break'; export { default as paragraph } from './library/paragraph'; +export { default as positionCenter } from './library/position-center'; +export { default as positionLeft } from './library/position-left'; +export { default as positionRight } from './library/position-right'; export { default as plusCircle } from './library/plus-circle'; export { default as postList } from './library/post-list'; export { default as preformatted } from './library/preformatted'; @@ -37,9 +45,12 @@ export { default as rss } from './library/rss'; export { default as search } from './library/search'; export { default as separator } from './library/separator'; export { default as shortcode } from './library/shortcode'; +export { default as stretchFullWidth } from './library/stretch-full-width'; +export { default as stretchWide } from './library/stretch-wide'; export { default as table } from './library/table'; export { default as tag } from './library/tag'; export { default as title } from './library/title'; +export { default as trash } from './library/trash'; export { default as verse } from './library/verse'; export { default as video } from './library/video'; export { default as widget } from './library/widget'; diff --git a/packages/icons/src/library/align-center.js b/packages/icons/src/library/align-center.js new file mode 100644 index 0000000000000..4b95f643d1061 --- /dev/null +++ b/packages/icons/src/library/align-center.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignCenter = ( + + + +); + +export default alignCenter; + diff --git a/packages/icons/src/library/align-left.js b/packages/icons/src/library/align-left.js new file mode 100644 index 0000000000000..a34551b910bcf --- /dev/null +++ b/packages/icons/src/library/align-left.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignLeft = ( + + + +); + +export default alignLeft; + diff --git a/packages/icons/src/library/align-right.js b/packages/icons/src/library/align-right.js new file mode 100644 index 0000000000000..9398e65c030d9 --- /dev/null +++ b/packages/icons/src/library/align-right.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const alignRight = ( + + + +); + +export default alignRight; + diff --git a/packages/icons/src/library/chevron-down.js b/packages/icons/src/library/chevron-down.js new file mode 100644 index 0000000000000..28fc23bb2cf3b --- /dev/null +++ b/packages/icons/src/library/chevron-down.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const chevronDown = ( + + + +); + +export default chevronDown; diff --git a/packages/icons/src/library/chevron-up.js b/packages/icons/src/library/chevron-up.js new file mode 100644 index 0000000000000..4ed1985d8fdcd --- /dev/null +++ b/packages/icons/src/library/chevron-up.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const chevronUp = ( + + + +); + +export default chevronUp; diff --git a/packages/icons/src/library/position-center.js b/packages/icons/src/library/position-center.js new file mode 100644 index 0000000000000..029f1f4a9aaca --- /dev/null +++ b/packages/icons/src/library/position-center.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const positionCenter = ( + + + +); + +export default positionCenter; diff --git a/packages/icons/src/library/position-left.js b/packages/icons/src/library/position-left.js new file mode 100644 index 0000000000000..6a79937e30b7f --- /dev/null +++ b/packages/icons/src/library/position-left.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const positionLeft = ( + + + +); + +export default positionLeft; diff --git a/packages/icons/src/library/position-right.js b/packages/icons/src/library/position-right.js new file mode 100644 index 0000000000000..d591826569692 --- /dev/null +++ b/packages/icons/src/library/position-right.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const positionRight = ( + + + +); + +export default positionRight; diff --git a/packages/icons/src/library/stretch-full-width.js b/packages/icons/src/library/stretch-full-width.js new file mode 100644 index 0000000000000..e27b0ab2c2eee --- /dev/null +++ b/packages/icons/src/library/stretch-full-width.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const stretchFullWidth = ( + + + +); + +export default stretchFullWidth; diff --git a/packages/icons/src/library/stretch-wide.js b/packages/icons/src/library/stretch-wide.js new file mode 100644 index 0000000000000..6bdda30ede996 --- /dev/null +++ b/packages/icons/src/library/stretch-wide.js @@ -0,0 +1,13 @@ + +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const stretchWide = ( + + + +); + +export default stretchWide; diff --git a/packages/icons/src/library/trash.js b/packages/icons/src/library/trash.js new file mode 100644 index 0000000000000..56c011563ac35 --- /dev/null +++ b/packages/icons/src/library/trash.js @@ -0,0 +1,13 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const trash = ( + + + +); + +export default trash; + diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 104c708c8693a..beb8d37afddbc 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -3883,23 +3883,15 @@ exports[`Storyshots Components/Panel Default 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + My Block Settings @@ -3944,23 +3936,15 @@ exports[`Storyshots Components/Panel Multiple Bodies 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + First Settings @@ -3991,23 +3975,15 @@ exports[`Storyshots Components/Panel Multiple Bodies 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + Second Settings @@ -4047,23 +4023,15 @@ exports[`Storyshots Components/Panel With Icon 1`] = ` aria-hidden="true" className="components-panel__arrow" focusable="false" - height="24px" + height={24} role="img" viewBox="0 0 24 24" - width="24px" + width={24} xmlns="http://www.w3.org/2000/svg" > - - - - - - + My Block Settings