fix: icons not displaying in sign in buttons

.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",
+};