fix: icons not displaying in sign in buttons (#30)

- Fix bug unable to import SVG files in consumer app
- Remove SVG files for icons
- Uninstall babel file loader
- Add icons dictionary

.babelrc

@@ -3,7 +3,6 @@
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/transform-runtime",
-    "@babel/plugin-transform-modules-commonjs",
-    "file-loader"
+    "@babel/plugin-transform-modules-commonjs"
   ]
 }

package.json

@@ -31,7 +31,7 @@
     "eslint": "eslint './src/**/*' --ext .ts,.tsx --fix",
     "start": "react-scripts start",
     "build": "build-storybook -o build && npm run build-package",
-    "build-package": "BABEL_ENV=production babel src -d dist --extensions .ts,.tsx --copy-files",
+    "build-package": "BABEL_ENV=production babel src -d dist --extensions .ts,.tsx",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 9009 -s public",

src/components/Icon.tsx

@@ -0,0 +1,60 @@
+import React, { ReactText } from "react";
+import styled from "styled-components";
+import { icons } from "./shared/icons";
+
+interface MyType {
+  [key: string]: string;
+}
+
+interface IconProps {
+  icon: string;
+  block?: boolean;
+  color: string;
+  fillOpacity: string;
+  viewBox?: string;
+}
+
+interface PathProps {
+  [index: string]: number | string;
+  fillOpacity: ReactText;
+}
+
+const Svg = styled.svg<{ block?: boolean }>`
+  display: ${({ block }): string => (block ? "block" : "inline-block")};
+  vertical-align: middle;
+  shape-rendering: inherit;
+  transform: translate3d(0, 0, 0);
+`;
+
+const Path = styled.path<PathProps>`
+  fill-opacity: ${({ fillOpacity }): ReactText => fillOpacity};
+  fill: currentColor;
+`;
+
+/**
+ * An Icon is a piece of visual element, but we must ensure its accessibility while using it.
+ * It can have 2 purposes:
+ *
+ * - *decorative only*: for example, it illustrates a label next to it.
+ *    We must ensure that it is ignored by screen readers,
+ *    by setting `aria-hidden` attribute (ex: `<Icon icon="check" aria-hidden />`)
+ * - *non-decorative*: it means that it delivers information.
+ *    For example, an icon as only child in a button.
+ *    The meaning can be obvious visually, but it must have a proper text alternative via
+ *    `aria-label` for screen readers (ex: `<Icon icon="print" aria-label="Print this document" />`)
+ */
+
+export const Icon: React.FC<IconProps> = ({
+  icon,
+  block,
+  color,
+  fillOpacity,
+  viewBox,
+}: IconProps) => {
+  const viewBoxProp = viewBox || "0 0 24 24";
+  return (
+    <Svg viewBox={viewBoxProp} width="24px" height="24px" block={block}>
+      <Path color={color} fillOpacity={fillOpacity} d={icons[icon]} />
+    </Svg>
+  );
+};

src/components/SignIn.styles.ts

@@ -2,41 +2,17 @@ import styled from "styled-components";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
-import FacebookSvg from "./shared/svgs/facebook.svg";
-import GoogleSvg from "./shared/svgs/google.svg";
-import EmailSvg from "./shared/svgs/email.svg";
 
 export interface BaseButtonProps {
-  borderColor: string;
+  bordercolor: string;
 }
 
 const TextGridItem = styled(Grid)`
   text-align: start;
 `;
 
-const EmailIcon = styled.div`
-  width: 24px;
-  height: 24px;
-  background-image: url(${EmailSvg});
-`;
-
-const FacebookIcon = styled.div`
-  width: 24px;
-  height: 24px;
-  background-image: url(${FacebookSvg});
-  background-repeat: no-repeat;
-  background-position: center;
-`;
-
-const GoogleIcon = styled.div`
-  width: 24px;
-  height: 24px;
-  background-image: url(${GoogleSvg});
-  background-size: cover;
-`;
-
 const BaseButton = styled(Button)<BaseButtonProps>`
-  border: 1px solid ${({ borderColor }): string => borderColor};
+  border: 1px solid ${({ bordercolor }): string => bordercolor};
   justify-content: right;
   height: 46px;
   width: 272px;
@@ -55,11 +31,4 @@ const TypographySignIn = styled(Typography)`
   margin-top: 216px;
 `;
 
-export {
-  BaseButton,
-  TextGridItem,
-  EmailIcon,
-  GoogleIcon,
-  FacebookIcon,
-  TypographySignIn,
-};
+export { BaseButton, TextGridItem, TypographySignIn };

src/components/SignInButton.stories.tsx

@@ -1,25 +1,24 @@
 import React from "react";
 import { SignInButton } from "./SignInButton";
-import { FacebookIcon, GoogleIcon, EmailIcon } from "./SignIn.styles";
 
 export default {
   title: "Sign In Button",
 };
 
 export const Facebook: React.FC = () => (
-  <SignInButton borderColor="#3b5998" icon={<FacebookIcon />}>
+  <SignInButton type="facebook" bordercolor="#3b5998">
     Continue with Facebook
   </SignInButton>
 );
 
 export const Google: React.FC = () => (
-  <SignInButton borderColor="#db4437" icon={<GoogleIcon />}>
+  <SignInButton type="google" bordercolor="#db4437">
     Continue with Google
   </SignInButton>
 );
 
 export const Email: React.FC = () => (
-  <SignInButton borderColor="#5600e8" icon={<EmailIcon />}>
+  <SignInButton type="email" bordercolor="#5600e8">
     Continue with Email
   </SignInButton>
 );

src/components/SignInButton.tsx

@@ -2,25 +2,53 @@ import React from "react";
 import Grid from "@material-ui/core/Grid";
 import { StylesProvider } from "@material-ui/core/styles";
 import { TextGridItem, BaseButton } from "./SignIn.styles";
+import { Icon } from "./Icon";
 
 export interface SignInButtonProps {
-  borderColor: string;
-  icon: React.ReactNode;
+  bordercolor: string;
+  type: string;
   children: React.ReactNode;
 }
 
+const FacebookIcon: React.FC = () => (
+  <Icon
+    color="#3b5998"
+    fillOpacity="0.74"
+    viewBox="0 0 12 24"
+    icon="facebook"
+  />
+);
+
+const GoogleIcon: React.FC = () => (
+  <Icon color="#db4437" fillOpacity="0.74" icon="google" />
+);
+
+const EmailIcon: React.FC = () => (
+  <Icon color="#5600e8" fillOpacity="0.74" icon="email" />
+);
+
+interface ReadonlyReactElementsDictionary {
+  readonly [index: string]: number | string | React.ReactElement;
+}
+
+const SIGNIN_ICONS: ReadonlyReactElementsDictionary = {
+  facebook: <FacebookIcon />,
+  google: <GoogleIcon />,
+  email: <EmailIcon />,
+};
+
 export const SignInButton: React.FC<SignInButtonProps> = ({
-  borderColor,
-  icon,
+  type,
+  bordercolor,
   children,
 }: SignInButtonProps) => (
   <StylesProvider injectFirst>
-    <BaseButton variant="contained" borderColor={borderColor}>
-      <Grid container xs={12} spacing={0} item>
+    <BaseButton variant="contained" bordercolor={bordercolor}>
+      <Grid container xs={12} spacing={2} item>
         <Grid item xs={2}>
-          {icon}
+          {SIGNIN_ICONS[type]}
         </Grid>
-        <TextGridItem item xs={9}>
+        <TextGridItem item xs={10}>
           {children}
         </TextGridItem>
       </Grid>

src/components/shared/icons.ts

@@ -0,0 +1,13 @@
+// Icon paths
+interface ReadonlyStringArray {
+  readonly [index: string]: number | string;
+}
+
+export const icons: ReadonlyStringArray = {
+  facebook:
+    "M7.59 23.832V13.3h3.403l.51-4.107H7.59V6.571c0-1.189.317-1.999 1.96-1.999h2.092V.897c-.362-.049-1.604-.16-3.05-.16-3.018 0-5.084 1.913-5.084 5.426v3.028H.094V13.3h3.414v10.533z",
+  google:
+    "M12.464 10.371H23.59c.123.672.185 1.313.185 1.925 0 2.175-.466 4.117-1.397 5.826-.93 1.71-2.258 3.045-3.982 4.007-1.724.962-3.7 1.443-5.93 1.443-1.607 0-3.136-.303-4.589-.91-1.453-.606-2.706-1.425-3.76-2.458-1.053-1.032-1.89-2.26-2.508-3.683a11.155 11.155 0 0 1-.929-4.496c0-1.574.31-3.072.929-4.496.619-1.423 1.455-2.651 2.509-3.683 1.053-1.033 2.306-1.852 3.76-2.459a11.791 11.791 0 0 1 4.587-.91c3.07 0 5.704 1.008 7.903 3.023L17.16 6.522c-1.258-1.193-2.824-1.79-4.696-1.79-1.32 0-2.54.326-3.66.978a7.274 7.274 0 0 0-2.662 2.654 7.114 7.114 0 0 0-.982 3.661c0 1.323.327 2.544.982 3.661a7.274 7.274 0 0 0 2.662 2.654c1.12.652 2.34.977 3.66.977.89 0 1.709-.12 2.455-.36.747-.241 1.361-.542 1.842-.903.48-.36.9-.771 1.258-1.233.358-.46.622-.897.79-1.308a5.44 5.44 0 0 0 .346-1.172h-6.69z",
+  email:
+    "M12.226 15.604c-2.13 0-3.849-1.72-3.849-3.849 0-2.13 1.72-3.85 3.85-3.85s3.848 1.72 3.848 3.85-1.719 3.85-3.849 3.85zm0-15.396C5.852.207.68 5.38.68 11.755c0 6.374 5.173 11.547 11.547 11.547H18v-2.309h-5.774c-5.011 0-9.237-4.226-9.237-9.238s4.226-9.238 9.237-9.238c5.012 0 9.238 4.226 9.238 9.238v1.651c0 .913-.82 1.813-1.732 1.813S18 14.32 18 13.406v-1.651a5.776 5.776 0 0 0-5.774-5.774 5.776 5.776 0 0 0-5.773 5.774 5.776 5.776 0 0 0 5.773 5.774 5.74 5.74 0 0 0 4.088-1.698c.75 1.028 2.044 1.698 3.418 1.698 2.275 0 4.042-1.848 4.042-4.123v-1.651C23.774 5.381 18.6.207 12.226.207z",
+};