Move icon components to a shared component, add New Releases SVG (https://github.com/woocommerce/woocommerce-blocks/pull/257)
This commit is contained in:
Kelly Dwan
GitHub
parent
3bccfda459
commit
48cd95d64d
|
|
@ -0,0 +1,72 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Icon } from '@wordpress/components';
|
||||
|
||||
export const IconChecked = () => (
|
||||
<Icon
|
||||
icon={
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="checked"
|
||||
d="M15.2222 1H2.7778C1.791 1 1 1.8 1 2.7778v12.4444C1 16.2 1.7911 17 2.7778 17h12.4444C16.209 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2089 1 15.2222 1zm-8 12.4444L2.7778 9 4.031 7.7467l3.1911 3.1822 6.7467-6.7467 1.2533 1.2622-8 8z"
|
||||
/>
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
|
||||
<mask id="checked-mask" fill="#fff">
|
||||
<use xlinkHref="#checked" />
|
||||
</mask>
|
||||
<path fill="#1E8CBE" d="M0 0h18v18H0z" mask="url(#checked-mask)" />
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
export const IconUnchecked = () => (
|
||||
<Icon
|
||||
icon={
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="unchecked"
|
||||
d="M15.2222 2.7778v12.4444H2.7778V2.7778h12.4444zm0-1.7778H2.7778C1.8 1 1 1.8 1 2.7778v12.4444C1 16.2 1.8 17 2.7778 17h12.4444C16.2 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2 1 15.2222 1z"
|
||||
/>
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
|
||||
<mask id="unchecked-mask" fill="#fff">
|
||||
<use xlinkHref="#unchecked" />
|
||||
</mask>
|
||||
<path fill="#6C7781" d="M0 0h18v18H0z" mask="url(#unchecked-mask)" />
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
export const IconNewReleases = () => (
|
||||
<Icon
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z" />
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
|
@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { CheckedIcon, UncheckedIcon } from '../search-list-control/icons';
|
||||
import { IconChecked, IconUnchecked } from '../icons';
|
||||
import SearchListControl from '../search-list-control';
|
||||
|
||||
class ProductCategoryControl extends Component {
|
||||
|
|
@ -92,7 +92,7 @@ class ProductCategoryControl extends Component {
|
|||
) }
|
||||
>
|
||||
<span className="woocommerce-search-list__item-state">
|
||||
{ isSelected ? <CheckedIcon /> : <UncheckedIcon /> }
|
||||
{ isSelected ? <IconChecked /> : <IconUnchecked /> }
|
||||
</span>
|
||||
<span className="woocommerce-product-categories__item-label">
|
||||
{ !! item.breadcrumbs.length && (
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { SVG } from '@wordpress/components';
|
||||
|
||||
export const CheckedIcon = () => (
|
||||
<SVG
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="checked"
|
||||
d="M15.2222 1H2.7778C1.791 1 1 1.8 1 2.7778v12.4444C1 16.2 1.7911 17 2.7778 17h12.4444C16.209 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2089 1 15.2222 1zm-8 12.4444L2.7778 9 4.031 7.7467l3.1911 3.1822 6.7467-6.7467 1.2533 1.2622-8 8z"
|
||||
/>
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
|
||||
<mask id="checked-mask" fill="#fff">
|
||||
<use xlinkHref="#checked" />
|
||||
</mask>
|
||||
<path fill="#1E8CBE" d="M0 0h18v18H0z" mask="url(#checked-mask)" />
|
||||
</g>
|
||||
</SVG>
|
||||
);
|
||||
|
||||
export const UncheckedIcon = () => (
|
||||
<SVG
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
id="unchecked"
|
||||
d="M15.2222 2.7778v12.4444H2.7778V2.7778h12.4444zm0-1.7778H2.7778C1.8 1 1 1.8 1 2.7778v12.4444C1 16.2 1.8 17 2.7778 17h12.4444C16.2 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2 1 15.2222 1z"
|
||||
/>
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
|
||||
<mask id="unchecked-mask" fill="#fff">
|
||||
<use xlinkHref="#unchecked" />
|
||||
</mask>
|
||||
<path fill="#6C7781" d="M0 0h18v18H0z" mask="url(#unchecked-mask)" />
|
||||
</g>
|
||||
</SVG>
|
||||
);
|
||||
|
|
@ -22,7 +22,7 @@ import { Tag } from '@woocommerce/components';
|
|||
*/
|
||||
import './style.scss';
|
||||
import { buildTermsTree } from './hierarchy';
|
||||
import { CheckedIcon, UncheckedIcon } from './icons';
|
||||
import { IconChecked, IconUnchecked } from '../icons';
|
||||
|
||||
const defaultMessages = {
|
||||
clear: __( 'Clear all selected items', 'woo-gutenberg-products-block' ),
|
||||
|
|
@ -121,7 +121,7 @@ export class SearchListControl extends Component {
|
|||
isSelected={ isSelected }
|
||||
>
|
||||
<span className="woocommerce-search-list__item-state">
|
||||
{ isSelected ? <CheckedIcon /> : <UncheckedIcon /> }
|
||||
{ isSelected ? <IconChecked /> : <IconUnchecked /> }
|
||||
</span>
|
||||
<span
|
||||
className="woocommerce-search-list__item-name"
|
||||
|
|
|
|||
Loading…
Reference in New Issue