Release 2021-04-07

package.json

@@ -47,17 +47,17 @@
     "redux-reqseq": "0.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "~7.12.13",
-    "@babel/core": "~7.12.13",
+    "@babel/cli": "~7.13.10",
+    "@babel/core": "~7.13.10",
     "@babel/plugin-proposal-class-properties": "~7.12.13",
     "@babel/plugin-proposal-object-rest-spread": "~7.12.13",
     "@babel/plugin-transform-runtime": "~7.12.15",
     "@babel/polyfill": "~7.12.1",
-    "@babel/preset-env": "~7.12.13",
+    "@babel/preset-env": "~7.13.10",
     "@babel/preset-flow": "~7.12.13",
     "@babel/preset-react": "~7.12.13",
     "@babel/register": "~7.12.13",
-    "@babel/runtime": "~7.12.13",
+    "@babel/runtime": "~7.13.10",
     "@storybook/addon-actions": "~6.1.17",
     "@storybook/addon-docs": "~6.1.17",
     "@storybook/addon-storysource": "~6.1.17",
@@ -75,7 +75,7 @@
     "enzyme": "~3.11.0",
     "enzyme-adapter-react-16": "~1.15.5",
     "enzyme-to-json": "~3.6.1",
-    "eslint": "~7.19.0",
+    "eslint": "~7.22.0",
     "eslint-config-airbnb": "~18.2.1",
     "eslint-import-resolver-webpack": "~0.13.0",
     "eslint-loader": "~4.0.2",

src/breadcrumbs/src/components/Breadcrumbs.js

@@ -2,6 +2,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import type { Node } from 'react';
 
+import styled from 'styled-components';
 import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Breadcrumbs as MUIBreadcrumbs } from '@material-ui/core';
@@ -10,10 +11,14 @@ type Props = {
   separator ?:Node;
 };
 
+const Separator = styled(FontAwesomeIcon)`
+  font-size: 60%;
+`;
+
 const Breadcrumbs = (props :Props) => <MUIBreadcrumbs {...props} />;
 
 Breadcrumbs.defaultProps = {
-  separator: <FontAwesomeIcon icon={faChevronRight} fixedWidth />
+  separator: <Separator icon={faChevronRight} fixedWidth />
 };
 
 export default Breadcrumbs;

src/breadcrumbs/src/components/__snapshots__/Breadcrumbs.test.js.snap

@@ -1,13 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Breadcrumbs should match snapshot 1`] = `
+.c0 {
+  font-size: 60%;
+}
+
 <Breadcrumbs
   separator={
-    <FontAwesomeIcon
-      border={false}
-      className=""
+    <Styled(FontAwesomeIcon)
       fixedWidth={true}
-      flip={null}
       icon={
         Object {
           "icon": Array [
@@ -21,28 +22,13 @@ exports[`Breadcrumbs should match snapshot 1`] = `
           "prefix": "far",
         }
       }
-      inverse={false}
-      listItem={false}
-      mask={null}
-      pull={null}
-      pulse={false}
-      rotation={null}
-      size={null}
-      spin={false}
-      swapOpacity={false}
-      symbol={false}
-      title=""
-      transform={null}
     />
   }
 >
   <WithStyles(ForwardRef(Breadcrumbs))
     separator={
-      <FontAwesomeIcon
-        border={false}
-        className=""
+      <Styled(FontAwesomeIcon)
         fixedWidth={true}
-        flip={null}
         icon={
           Object {
             "icon": Array [
@@ -56,18 +42,6 @@ exports[`Breadcrumbs should match snapshot 1`] = `
             "prefix": "far",
           }
         }
-        inverse={false}
-        listItem={false}
-        mask={null}
-        pull={null}
-        pulse={false}
-        rotation={null}
-        size={null}
-        spin={false}
-        swapOpacity={false}
-        symbol={false}
-        title=""
-        transform={null}
       />
     }
   >
@@ -81,11 +55,8 @@ exports[`Breadcrumbs should match snapshot 1`] = `
         }
       }
       separator={
-        <FontAwesomeIcon
-          border={false}
-          className=""
+        <Styled(FontAwesomeIcon)
           fixedWidth={true}
-          flip={null}
           icon={
             Object {
               "icon": Array [
@@ -99,18 +70,6 @@ exports[`Breadcrumbs should match snapshot 1`] = `
               "prefix": "far",
             }
           }
-          inverse={false}
-          listItem={false}
-          mask={null}
-          pull={null}
-          pulse={false}
-          rotation={null}
-          size={null}
-          spin={false}
-          swapOpacity={false}
-          symbol={false}
-          title=""
-          transform={null}
         />
       }
     >
@@ -179,11 +138,8 @@ exports[`Breadcrumbs should match snapshot 1`] = `
                 className="MuiBreadcrumbs-separator"
                 key="separator-0"
               >
-                <FontAwesomeIcon
-                  border={false}
-                  className=""
+                <Styled(FontAwesomeIcon)
                   fixedWidth={true}
-                  flip={null}
                   icon={
                     Object {
                       "icon": Array [
@@ -197,37 +153,57 @@ exports[`Breadcrumbs should match snapshot 1`] = `
                       "prefix": "far",
                     }
                   }
-                  inverse={false}
-                  listItem={false}
-                  mask={null}
-                  pull={null}
-                  pulse={false}
-                  rotation={null}
-                  size={null}
-                  spin={false}
-                  swapOpacity={false}
-                  symbol={false}
-                  title=""
-                  transform={null}
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-chevron-right fa-w-8 fa-fw "
-                    data-icon="chevron-right"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 256 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <FontAwesomeIcon
+                    border={false}
+                    className="c0"
+                    fixedWidth={true}
+                    flip={null}
+                    icon={
+                      Object {
+                        "icon": Array [
+                          256,
+                          512,
+                          Array [],
+                          "f054",
+                          "M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z",
+                        ],
+                        "iconName": "chevron-right",
+                        "prefix": "far",
+                      }
+                    }
+                    inverse={false}
+                    listItem={false}
+                    mask={null}
+                    pull={null}
+                    pulse={false}
+                    rotation={null}
+                    size={null}
+                    spin={false}
+                    swapOpacity={false}
+                    symbol={false}
+                    title=""
+                    transform={null}
                   >
-                    <path
-                      d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"
-                      fill="currentColor"
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-chevron-right fa-w-8 fa-fw c0"
+                      data-icon="chevron-right"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
                       style={Object {}}
-                    />
-                  </svg>
-                </FontAwesomeIcon>
+                      viewBox="0 0 256 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
+                  </FontAwesomeIcon>
+                </Styled(FontAwesomeIcon)>
               </li>
               <li
                 className="MuiBreadcrumbs-li"
@@ -244,11 +220,8 @@ exports[`Breadcrumbs should match snapshot 1`] = `
                 className="MuiBreadcrumbs-separator"
                 key="separator-1"
               >
-                <FontAwesomeIcon
-                  border={false}
-                  className=""
+                <Styled(FontAwesomeIcon)
                   fixedWidth={true}
-                  flip={null}
                   icon={
                     Object {
                       "icon": Array [
@@ -262,37 +235,57 @@ exports[`Breadcrumbs should match snapshot 1`] = `
                       "prefix": "far",
                     }
                   }
-                  inverse={false}
-                  listItem={false}
-                  mask={null}
-                  pull={null}
-                  pulse={false}
-                  rotation={null}
-                  size={null}
-                  spin={false}
-                  swapOpacity={false}
-                  symbol={false}
-                  title=""
-                  transform={null}
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-chevron-right fa-w-8 fa-fw "
-                    data-icon="chevron-right"
-                    data-prefix="far"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 256 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <FontAwesomeIcon
+                    border={false}
+                    className="c0"
+                    fixedWidth={true}
+                    flip={null}
+                    icon={
+                      Object {
+                        "icon": Array [
+                          256,
+                          512,
+                          Array [],
+                          "f054",
+                          "M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z",
+                        ],
+                        "iconName": "chevron-right",
+                        "prefix": "far",
+                      }
+                    }
+                    inverse={false}
+                    listItem={false}
+                    mask={null}
+                    pull={null}
+                    pulse={false}
+                    rotation={null}
+                    size={null}
+                    spin={false}
+                    swapOpacity={false}
+                    symbol={false}
+                    title=""
+                    transform={null}
                   >
-                    <path
-                      d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"
-                      fill="currentColor"
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-chevron-right fa-w-8 fa-fw c0"
+                      data-icon="chevron-right"
+                      data-prefix="far"
+                      focusable="false"
+                      role="img"
                       style={Object {}}
-                    />
-                  </svg>
-                </FontAwesomeIcon>
+                      viewBox="0 0 256 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
+                  </FontAwesomeIcon>
+                </Styled(FontAwesomeIcon)>
               </li>
               <li
                 className="MuiBreadcrumbs-li"

src/chip/index.js

@@ -0,0 +1,11 @@
+/*
+ * @flow
+ */
+
+export { default as Chip } from './src/components/Chip';
+
+export type {
+  ChipColor,
+  ChipProps,
+  ChipSize,
+} from './src/components/types';