Merge pull request woocommerce/woocommerce-admin#1384 from woocommerce/try/emoji-flags
Flag: Remove React package in favor of emojis
This commit is contained in:
Paul Sealock
GitHub
commit
a72b9ee064
|
|
@ -85,7 +85,7 @@ function OrdersPanel( { orders, isRequesting, isError } ) {
|
|||
orderLink: <Link href={ 'post.php?action=edit&post=' + order.id } type="wp-admin" />,
|
||||
// @TODO: Hook up customer name link
|
||||
customerLink: <Link href={ '#' } type="wp-admin" />,
|
||||
destinationFlag: <Flag order={ order } round={ false } height={ 9 } width={ 12 } />,
|
||||
destinationFlag: <Flag order={ order } round={ false } />,
|
||||
},
|
||||
} ) }
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -5081,8 +5081,7 @@
|
|||
"clone": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
|
||||
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
|
||||
"dev": true
|
||||
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
|
||||
},
|
||||
"clone-deep": {
|
||||
"version": "2.0.2",
|
||||
|
|
@ -6808,7 +6807,6 @@
|
|||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
|
||||
"integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"clone": "^1.0.2"
|
||||
}
|
||||
|
|
@ -7375,6 +7373,39 @@
|
|||
"minimalistic-crypto-utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"emoji-flags": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-flags/-/emoji-flags-1.2.0.tgz",
|
||||
"integrity": "sha1-VrZGKUwYmoo/jRIjOfqIJqSgDO8=",
|
||||
"requires": {
|
||||
"columnify": "1.5.1",
|
||||
"lodash.find": "3.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-1.1.1.tgz",
|
||||
"integrity": "sha1-QchHGUZGN15qGl0Qw8oFTvn8mA0="
|
||||
},
|
||||
"columnify": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/columnify/-/columnify-1.5.1.tgz",
|
||||
"integrity": "sha1-Ff3agDo4dfh/nTArO8goky1mQAM=",
|
||||
"requires": {
|
||||
"strip-ansi": "^2.0.1",
|
||||
"wcwidth": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-2.0.1.tgz",
|
||||
"integrity": "sha1-32LBqpTtLxFOHQ8h/R1QSCt5pg4=",
|
||||
"requires": {
|
||||
"ansi-regex": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "6.5.1",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
|
||||
|
|
@ -12920,6 +12951,35 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
|
||||
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
|
||||
},
|
||||
"lodash._basecallback": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash._basecallback/-/lodash._basecallback-3.3.1.tgz",
|
||||
"integrity": "sha1-t7K7Q9whYEJKIczybFfkQ3cqjic=",
|
||||
"requires": {
|
||||
"lodash._baseisequal": "^3.0.0",
|
||||
"lodash._bindcallback": "^3.0.0",
|
||||
"lodash.isarray": "^3.0.0",
|
||||
"lodash.pairs": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash._baseeach": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/lodash._baseeach/-/lodash._baseeach-3.0.4.tgz",
|
||||
"integrity": "sha1-z4cGVyyhROjZ11InyZDamC+TKvM=",
|
||||
"requires": {
|
||||
"lodash.keys": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash._basefind": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._basefind/-/lodash._basefind-3.0.0.tgz",
|
||||
"integrity": "sha1-srugXMZF+XLeLPkl+iv2Og9gyK4="
|
||||
},
|
||||
"lodash._basefindindex": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._basefindindex/-/lodash._basefindindex-3.6.0.tgz",
|
||||
"integrity": "sha1-8IM2ChsCJBjtgbyJm+sxLiHnSk8="
|
||||
},
|
||||
"lodash._baseisequal": {
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/lodash._baseisequal/-/lodash._baseisequal-3.0.7.tgz",
|
||||
|
|
@ -12974,6 +13034,19 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
|
||||
"integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg="
|
||||
},
|
||||
"lodash.find": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-3.2.1.tgz",
|
||||
"integrity": "sha1-BG4xnzrOkSrGySRsf2g8XsB7Nq0=",
|
||||
"requires": {
|
||||
"lodash._basecallback": "^3.0.0",
|
||||
"lodash._baseeach": "^3.0.0",
|
||||
"lodash._basefind": "^3.0.0",
|
||||
"lodash._basefindindex": "^3.0.0",
|
||||
"lodash.isarray": "^3.0.0",
|
||||
"lodash.keys": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.flattendeep": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
|
||||
|
|
@ -13015,6 +13088,14 @@
|
|||
"integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.pairs": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.pairs/-/lodash.pairs-3.0.1.tgz",
|
||||
"integrity": "sha1-u+CNV4bu6qCaFckevw3LfSvjJqk=",
|
||||
"requires": {
|
||||
"lodash.keys": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.sortby": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
|
||||
|
|
@ -16571,15 +16652,6 @@
|
|||
"global-cache": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"react-world-flags": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.2.4.tgz",
|
||||
"integrity": "sha512-7WVe6w8SsKo3ySnzZHEZaqBogizU/u952YeQF19AyQ2EItxb4xzgBkUaMuSEXa8AxpK0id/hvJslNhSYdIWMMg==",
|
||||
"requires": {
|
||||
"svg-country-flags": "^1.2.3",
|
||||
"world-countries": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"read": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||
|
|
@ -19640,11 +19712,6 @@
|
|||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"svg-country-flags": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.6.tgz",
|
||||
"integrity": "sha512-loHSF5qIEXoUgcXxLBlGG2eczDvqjzhyjdu2cIxcuHbJDGPUFBIsKnlp3N/+KBhaIZWbpksoczghkJsyJxbSGQ=="
|
||||
},
|
||||
"svg-tags": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
|
||||
|
|
@ -20714,7 +20781,6 @@
|
|||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
|
||||
"integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"defaults": "^1.0.3"
|
||||
}
|
||||
|
|
@ -21356,11 +21422,6 @@
|
|||
"errno": "~0.1.7"
|
||||
}
|
||||
},
|
||||
"world-countries": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/world-countries/-/world-countries-2.1.0.tgz",
|
||||
"integrity": "sha512-g8DRgoH7UJiF5L0xjj+RP/GFH4fOVlD3J5CxkJ+PZYH1PNl0i5JrstBOX53Ub8ObTZ6lCx0V7nIA8BuCvxMoSg=="
|
||||
},
|
||||
"wrap-ansi": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -131,6 +131,7 @@
|
|||
"d3-shape": "^1.2.2",
|
||||
"d3-time-format": "^2.1.3",
|
||||
"dompurify": "1.0.9",
|
||||
"emoji-flags": "^1.2.0",
|
||||
"gfm-code-blocks": "1.0.0",
|
||||
"gridicons": "3.1.1",
|
||||
"history": "4.7.2",
|
||||
|
|
@ -147,7 +148,6 @@
|
|||
"react-router-dom": "4.3.1",
|
||||
"react-slot-fill": "^2.0.1",
|
||||
"react-transition-group": "^2.4.0",
|
||||
"react-world-flags": "1.2.4",
|
||||
"redux": "^4.0.0"
|
||||
},
|
||||
"husky": {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,21 @@
|
|||
import { Flag } from '@woocommerce/components';
|
||||
|
||||
const MyFlag = () => (
|
||||
<Flag
|
||||
code="US"
|
||||
size={ 24 }
|
||||
/>
|
||||
<div>
|
||||
<H>Default (inherits parent font size)</H>
|
||||
<Section component={ false }>
|
||||
<Flag code="VU" />
|
||||
</Section>
|
||||
|
||||
<H>Large</H>
|
||||
<Section component={ false }>
|
||||
<Flag code="VU" size={ 48 } />
|
||||
</Section>
|
||||
|
||||
<H>Invalid Country Code</H>
|
||||
<Section component={ false }>
|
||||
<Flag code="invalid country code" />
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
|
|
|||
|
|
@ -3,40 +3,36 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import ReactFlag from 'react-world-flags';
|
||||
import classnames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import emojiFlags from 'emoji-flags';
|
||||
import { get } from 'lodash';
|
||||
|
||||
/**
|
||||
* Use the `Flag` component to display a country's flag.
|
||||
* Use the `Flag` component to display a country's flag using the operating system's emojis.
|
||||
*
|
||||
* @return { object } -
|
||||
* @return { object } - React component.
|
||||
*/
|
||||
const Flag = ( { code, order, round, height, width, className } ) => {
|
||||
const classes = classnames( 'woocommerce-flag', className, {
|
||||
'is-round': round,
|
||||
} );
|
||||
const Flag = ( { code, order, className, size, hideFromScreenReader } ) => {
|
||||
const classes = classnames( 'woocommerce-flag', className );
|
||||
|
||||
let _code = code || 'unknown';
|
||||
if ( order && order.shipping ) {
|
||||
if ( order && order.shipping && order.shipping.country ) {
|
||||
_code = order.shipping.country;
|
||||
} else if ( order && order.billing && order.billing.country ) {
|
||||
_code = order.billing.country;
|
||||
}
|
||||
|
||||
const _height = round ? height * 2 : height;
|
||||
const _width = round ? width * 2 : width;
|
||||
const inlineStyles = round ? { height, width } : {};
|
||||
const inlineStyles = {
|
||||
fontSize: size,
|
||||
};
|
||||
|
||||
const emoji = get( emojiFlags.countryCode( _code ), 'emoji' );
|
||||
|
||||
return (
|
||||
<div className={ classes } style={ inlineStyles }>
|
||||
<ReactFlag
|
||||
code={ _code }
|
||||
fallback={ <div className="woocommerce-flag__fallback" style={ inlineStyles } /> }
|
||||
height={ _height }
|
||||
width={ _width }
|
||||
alt=""
|
||||
/>
|
||||
<div className={ classes } style={ inlineStyles } aria-hidden={ hideFromScreenReader }>
|
||||
{ emoji && <span>{ emoji }</span> }
|
||||
{ ! emoji && <span className="woocommerce-flag__fallback">Invalid country flag</span> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -50,28 +46,14 @@ Flag.propTypes = {
|
|||
* An order can be passed instead of `code` and the code will automatically be pulled from the billing or shipping data.
|
||||
*/
|
||||
order: PropTypes.object,
|
||||
/**
|
||||
* True to display a rounded flag.
|
||||
*/
|
||||
round: PropTypes.bool,
|
||||
/**
|
||||
* Flag image height.
|
||||
*/
|
||||
height: PropTypes.number,
|
||||
/**
|
||||
* Flag image width.
|
||||
*/
|
||||
width: PropTypes.number,
|
||||
/**
|
||||
* Additional CSS classes.
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
Flag.defaultProps = {
|
||||
height: 24,
|
||||
width: 24,
|
||||
round: true,
|
||||
/**
|
||||
* Supply a font size to be applied to the emoji flag.
|
||||
*/
|
||||
size: PropTypes.number,
|
||||
};
|
||||
|
||||
export default Flag;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
/** @format */
|
||||
.woocommerce-flag {
|
||||
&.is-round {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.woocommerce-flag__fallback {
|
||||
background: $core-grey-light-500;
|
||||
color: transparent;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ export default {
|
|||
key="thumbnail"
|
||||
className="woocommerce-search__result-thumbnail"
|
||||
code={ country.code }
|
||||
width={ 18 }
|
||||
height={ 18 }
|
||||
size={ 18 }
|
||||
hideFromScreenReader
|
||||
/>,
|
||||
<span key="name" className="woocommerce-search__result-name" aria-label={ name }>
|
||||
{ match.suggestionBeforeMatch }
|
||||
|
|
|
|||
|
|
@ -96,7 +96,6 @@
|
|||
align-items: center;
|
||||
padding: $gap-small;
|
||||
color: $woocommerce;
|
||||
text-decoration: underline; // @todo Not actually a link, should underline?
|
||||
text-align: left;
|
||||
background: $core-grey-light-100;
|
||||
border-bottom: 1px solid $core-grey-light-500;
|
||||
|
|
@ -124,3 +123,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-search__result-name {
|
||||
text-decoration: underline; // @todo Not actually a link, should underline?
|
||||
}
|
||||
|
|
|
|||
|
|
@ -192,3 +192,9 @@ function wc_admin_woocommerce_updated() {
|
|||
WC_Admin_Notes_Settings_Notes::add_notes_for_settings_that_have_moved();
|
||||
}
|
||||
add_action( 'woocommerce_updated', 'wc_admin_woocommerce_updated' );
|
||||
|
||||
/*
|
||||
* Remove the emoji script as it always defaults to replacing emojis with Twemoji images.
|
||||
* Gutenberg has also disabled emojis. More on that here -> https://github.com/WordPress/gutenberg/pull/6151
|
||||
*/
|
||||
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
|
||||
|
|
|
|||
Loading…
Reference in New Issue