Merge pull request woocommerce/woocommerce-admin#1384 from woocommerce/try/emoji-flags

Flag: Remove React package in favor of emojis

plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js

@@ -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>

plugins/woocommerce-admin/package-lock.json

@@ -5081,8 +5081,7 @@
     "clone": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
-      "dev": true
     },
     "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",

plugins/woocommerce-admin/package.json

@@ -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": {

plugins/woocommerce-admin/packages/components/src/flag/example.md

@@ -2,9 +2,21 @@
 import { Flag } from '@woocommerce/components';
 
 const MyFlag = () => (
-	<Flag
+	<div>
-		code="US"
+		<H>Default (inherits parent font size)</H>
-		size={ 24 }
+		<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>
 );
 ```

plugins/woocommerce-admin/packages/components/src/flag/index.js

@@ -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 Flag = ( { code, order, className, size, hideFromScreenReader } ) => {
-	const classes = classnames( 'woocommerce-flag', className, {
+	const classes = classnames( 'woocommerce-flag', className );
-		'is-round': round,
-	} );
 
 	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 inlineStyles = {
-	const _width = round ? width * 2 : width;
+		fontSize: size,
-	const inlineStyles = round ? { height, width } : {};
+	};
+
+	const emoji = get( emojiFlags.countryCode( _code ), 'emoji' );
 
 	return (
-		<div className={ classes } style={ inlineStyles }>
+		<div className={ classes } style={ inlineStyles } aria-hidden={ hideFromScreenReader }>
-			<ReactFlag
+			{ emoji && <span>{ emoji }</span> }
-				code={ _code }
+			{ ! emoji && <span className="woocommerce-flag__fallback">Invalid country flag</span> }
-				fallback={ <div className="woocommerce-flag__fallback" style={ inlineStyles } /> }
-				height={ _height }
-				width={ _width }
-				alt=""
-			/>
 		</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,
-};
+	/**
-
+	 * Supply a font size to be applied to the emoji flag.
-Flag.defaultProps = {
+	 */
-	height: 24,
+	size: PropTypes.number,
-	width: 24,
-	round: true,
 };
 
 export default Flag;

plugins/woocommerce-admin/packages/components/src/flag/style.scss

@@ -1,16 +1,15 @@
 /** @format */
 .woocommerce-flag {
-	&.is-round {
+	span {
-		overflow: hidden;
+		vertical-align: middle;
-		border-radius: 50%;
-
-		img {
-			width: auto;
-			height: 100%;
-		}
 	}
 
 	.woocommerce-flag__fallback {
 		background: $core-grey-light-500;
+		color: transparent;
+		width: 24px;
+		height: 18px;
+		display: block;
+		overflow: hidden;
 	}
 }

plugins/woocommerce-admin/packages/components/src/search/autocompleters/countries.js

@@ -37,8 +37,8 @@ export default {
 				key="thumbnail"
 				className="woocommerce-search__result-thumbnail"
 				code={ country.code }
-				width={ 18 }
+				size={ 18 }
-				height={ 18 }
+				hideFromScreenReader
 			/>,
 			<span key="name" className="woocommerce-search__result-name" aria-label={ name }>
 				{ match.suggestionBeforeMatch }

plugins/woocommerce-admin/packages/components/src/search/style.scss

@@ -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?
+}

plugins/woocommerce-admin/wc-admin.php

@@ -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' );