feat(icons): update to new globe icon and add new globe tinycon (#1217)

BREAKING CHANGE: update to new globe icon which uses 20x20 by default instead of 16x16 and introduced new globe tinycon

Author: cweeii

src/icons/general/IconGlobe.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 
 import AccessibleSVG from '../accessible-svg';
+import { bdlNeutral03 } from '../../styles/variables';
 
 type Props = {
     className?: string,
@@ -12,18 +13,18 @@ type Props = {
     width?: number,
 };
 
-const IconGlobe = ({ className = '', color = '#000', height = 16, title, width = 16 }: Props) => (
+const IconGlobe = ({ className = '', color = bdlNeutral03, height = 20, title, width = 20 }: Props) => (
     <AccessibleSVG
         className={`icon-globe ${className}`}
         height={height}
         title={title}
-        viewBox="0 0 16 16"
+        viewBox="0 0 20 20"
         width={width}
     >
-        <circle className="fill-color" cx="8" cy="8" fill={color} r="8" />
         <path
-            d="M8 1.5C4.4 1.5 1.5 4.4 1.5 8s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5S11.6 1.5 8 1.5zm-.7 11.7c-2.5-.4-4.5-2.5-4.5-5.2 0-.4.1-.8.1-1.2L6 9.9v.7c0 .7.6 1.3 1.3 1.3v1.3zm4.5-1.7c-.2-.5-.7-.9-1.2-.9h-.7v-2c0-.3-.2-.6-.6-.6H5.4V6.7h1.3c.4 0 .7-.3.7-.7V4.8h1.3c.7 0 1.3-.6 1.3-1.3v-.3c1.9.8 3.2 2.6 3.2 4.8 0 1.4-.5 2.6-1.4 3.5z"
-            fill="#FFF"
+            className="fill-color"
+            d="M10 0A9.98 9.98 0 0 0 0 10a9.98 9.98 0 0 0 10 10 9.98 9.98 0 0 0 10-10A9.98 9.98 0 0 0 10 0zM8.923 18C5.077 17.385 2 14.154 2 10c0-.615.154-1.23.154-1.846l4.77 4.77V14c0 1.077.922 2 2 2v2zm6.923-2.615C15.538 14.615 14.77 14 14 14h-1.077v-3.077c0-.461-.308-.923-.923-.923H6V8h2c.615 0 1.077-.462 1.077-1.077V5.077h2c1.077 0 2-.923 2-2v-.462C16 3.846 18 6.615 18 10c0 2.154-.77 4-2.154 5.385z"
+            fill={color}
         />
     </AccessibleSVG>
 );

src/icons/general/IconGlobeTinycon.js

@@ -0,0 +1,42 @@
+// @flow
+import * as React from 'react';
+
+import AccessibleSVG from '../accessible-svg';
+import { bdlBoxBlue } from '../../styles/variables';
+
+type Props = {
+    className?: string,
+    color?: string,
+    height?: number,
+    /** A text-only string describing the icon if it's not purely decorative for accessibility */
+    title?: string | React.Element<any>,
+    width?: number,
+};
+
+const IconGlobeTinycon = ({ className = '', color = bdlBoxBlue, height = 16, title, width = 16 }: Props) => (
+    <AccessibleSVG
+        className={`icon-globe ${className}`}
+        height={height}
+        title={title}
+        viewBox="0 0 16 16"
+        width={width}
+    >
+        <g fill="none">
+            <path
+                className="fill-color"
+                d="M8 .5A7.484 7.484 0 0 0 .5 8c0 4.155 3.345 7.5 7.5 7.5 4.155 0 7.5-3.345 7.5-7.5C15.5 3.845 12.155.5 8 .5z"
+                stroke={color}
+            />
+            <path
+                className="fill-color"
+                d="M12 12.061c-.107-.28-.512-1.308-1.268-1.883-.187-.142-.718-.217-1.592-.226V8.365c0-.794-.578-.794-1.019-.794H4.594V5.983H6.11c.44 0 .757.065.757-.397V4.395h1.515c.772 0 1.841-.309 1.841-1.9-3.778-.89-6.391.344-7.84 3.703L5.407 9.38l-.07.282a1.482 1.482 0 0 0 1.53 1.835l.586 2.487c1.21-.034 2.087-.166 2.633-.397.464-.196 1.101-.705 1.913-1.526z"
+                fill={color}
+                stroke={color}
+                strokeWidth=".766"
+                strokeLinejoin="round"
+            />
+        </g>
+    </AccessibleSVG>
+);
+
+export default IconGlobeTinycon;

src/icons/general/IconGlobeTinycon.md

@@ -0,0 +1,3 @@
+```
+<IconGlobeTinycon />
+```

src/icons/general/__tests__/IconGlobe-test.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { white } from '../../../styles/variables';
+
 import IconGlobe from '../IconGlobe';
 
 describe('icons/general/IconGlobe', () => {
@@ -10,12 +12,12 @@ describe('icons/general/IconGlobe', () => {
     });
 
     test('should correctly render icon with specified color', () => {
-        const color = '#ffffff';
+        const color = white;
         const wrapper = shallow(<IconGlobe color={color} />);
 
         expect(
             wrapper
-                .find('circle')
+                .find('path')
                 .at(0)
                 .prop('fill'),
         ).toEqual(color);

src/icons/general/__tests__/IconGlobeTinycon-test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { white } from '../../../styles/variables';
+
+import IconGlobeTinycon from '../IconGlobeTinycon';
+
+describe('icons/general/IconGlobeTinycon', () => {
+    test('should correctly render default icon', () => {
+        const wrapper = shallow(<IconGlobeTinycon />);
+
+        expect(wrapper.hasClass('icon-globe')).toEqual(true);
+    });
+
+    test('should correctly render icon with specified color', () => {
+        const color = white;
+        const wrapper = shallow(<IconGlobeTinycon color={color} />);
+
+        expect(
+            wrapper
+                .find('path')
+                .at(0)
+                .prop('stroke'),
+        ).toEqual(color);
+    });
+
+    test('should correctly render icon with specified width and height', () => {
+        const width = 16;
+        const height = 17;
+        const wrapper = shallow(<IconGlobeTinycon height={height} width={width} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('width')).toEqual(width);
+        expect(wrapper.find('AccessibleSVG').prop('height')).toEqual(height);
+    });
+
+    test('should correctly render icon with title', () => {
+        const title = 'fool';
+        const wrapper = shallow(<IconGlobeTinycon title={title} />);
+
+        expect(wrapper.find('AccessibleSVG').prop('title')).toEqual(title);
+    });
+});