From 729aaafa63a2568c80d43db0f17bb28f933b8f25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Amaro=20Mari=C3=B1o?= <1252707+amalv@users.noreply.github.com> Date: Wed, 6 Nov 2019 20:45:20 +0100 Subject: [PATCH] fix: icons not displaying in sign in buttons - Fix bug unable to import SVG files in consumer app - Remove SVG files for icons - Uninstall babel file loader - Add icons dictionary --- .babelrc | 3 +- package.json | 2 +- src/components/Icon.tsx | 60 +++++++++++++++++++++++++ src/components/SignIn.styles.ts | 37 ++------------- src/components/SignInButton.stories.tsx | 7 ++- src/components/SignInButton.tsx | 44 ++++++++++++++---- src/components/shared/icons.ts | 13 ++++++ src/components/shared/svgs/email.svg | 1 - src/components/shared/svgs/facebook.svg | 1 - src/components/shared/svgs/google.svg | 1 - 10 files changed, 117 insertions(+), 52 deletions(-) create mode 100644 src/components/Icon.tsx create mode 100644 src/components/shared/icons.ts delete mode 100644 src/components/shared/svgs/email.svg delete mode 100644 src/components/shared/svgs/facebook.svg delete mode 100644 src/components/shared/svgs/google.svg diff --git a/.babelrc b/.babelrc index 5abccec..a5ad5f2 100644 --- a/.babelrc +++ b/.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" ] } diff --git a/package.json b/package.json index 00fb9d2..5412394 100644 --- a/package.json +++ b/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", diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx new file mode 100644 index 0000000..c537905 --- /dev/null +++ b/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` + 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: ``) + * - *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: ``) + */ + +export const Icon: React.FC = ({ + icon, + block, + color, + fillOpacity, + viewBox, +}: IconProps) => { + const viewBoxProp = viewBox || "0 0 24 24"; + return ( + + + + ); +}; diff --git a/src/components/SignIn.styles.ts b/src/components/SignIn.styles.ts index aeba6e6..b57ebef 100644 --- a/src/components/SignIn.styles.ts +++ b/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)` - 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 }; diff --git a/src/components/SignInButton.stories.tsx b/src/components/SignInButton.stories.tsx index f123afe..11344eb 100644 --- a/src/components/SignInButton.stories.tsx +++ b/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 = () => ( - }> + Continue with Facebook ); export const Google: React.FC = () => ( - }> + Continue with Google ); export const Email: React.FC = () => ( - }> + Continue with Email ); diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx index e2d7c22..d82fa7b 100644 --- a/src/components/SignInButton.tsx +++ b/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 = () => ( + +); + +const GoogleIcon: React.FC = () => ( + +); + +const EmailIcon: React.FC = () => ( + +); + +interface ReadonlyReactElementsDictionary { + readonly [index: string]: number | string | React.ReactElement; +} + +const SIGNIN_ICONS: ReadonlyReactElementsDictionary = { + facebook: , + google: , + email: , +}; + export const SignInButton: React.FC = ({ - borderColor, - icon, + type, + bordercolor, children, }: SignInButtonProps) => ( - - + + - {icon} + {SIGNIN_ICONS[type]} - + {children} diff --git a/src/components/shared/icons.ts b/src/components/shared/icons.ts new file mode 100644 index 0000000..6985a78 --- /dev/null +++ b/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", +}; diff --git a/src/components/shared/svgs/email.svg b/src/components/shared/svgs/email.svg deleted file mode 100644 index a0c5323..0000000 --- a/src/components/shared/svgs/email.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/shared/svgs/facebook.svg b/src/components/shared/svgs/facebook.svg deleted file mode 100644 index f5a0945..0000000 --- a/src/components/shared/svgs/facebook.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/shared/svgs/google.svg b/src/components/shared/svgs/google.svg deleted file mode 100644 index 71a9341..0000000 --- a/src/components/shared/svgs/google.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file