Merge pull request #161 from reactioncommerce/154-machikoyasuda-font-…

…awesome refactor(icons): Remove Font Awesome font dependency, replace with SVGs
reactioncommerce · Aug 6, 2018 · e67877d · e67877d
2 parents 8266876 + f644c06
commit e67877d
Show file tree

Hide file tree

Showing 13 changed files with 270 additions and 203 deletions.
diff --git a/package/README.md b/package/README.md
@@ -27,7 +27,8 @@ In your HTML:
 ```html
 // Font for display type
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700" rel="stylesheet">
+```
+
+## SVGs
 
-// Font Awesome for icons
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
-```
+Several components in this library use [Font Awesome](https://fontawesome.com/) icons in scalable vector graphic format (SVGs), under the [Font Awesome Free License](https://fontawesome.com/license/free).
diff --git a/package/src/components/Checkbox/v1/Checkbox.js b/package/src/components/Checkbox/v1/Checkbox.js
@@ -8,13 +8,26 @@ const StyledDiv = styled.div`
   margin-bottom: ${applyTheme("checkboxVerticalSpacing")};
 `;
 
+/* eslint-disable max-len */
+/* eslint-disable quotes */
+// credit https://fontawesome.com/icons/check?style=solid
+const checkboxIconSVG = encodeURIComponent(`<svg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='${applyTheme("checkboxIconColor")()}' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'></path></svg>`);
+/* eslint-enable quotes */
+/* eslint-enable max-len */
+
 const StyledInput = styled.input`
   opacity: 0;
   + label::after {
-    content: none;
+    content: " ";
   }
   &:checked + label::after {
-    content: ${applyTheme("checkboxIcon")};
+    background-image: url("data:image/svg+xml; utf8,${checkboxIconSVG}");
+    display: inline-block;
+    position: absolute;
+    width: ${applyTheme("checkboxIconSize")};
+    height: ${applyTheme("checkboxIconSize")};
+    top: ${applyTheme("checkboxIconTopSpacing")};
+    left: ${applyTheme("checkboxIconLeftSpacing")};
   }
   &:focus + label::before {
     outline: ${applyTheme("checkboxFocusStyle")};
@@ -55,18 +68,6 @@ const StyledLabel = styled.label`
     left: ${applyTheme("checkboxLeftSpacing")};
     top: ${applyTheme("checkboxTopSpacing")};
   }
-  &::after {
-    content: ${applyTheme("checkboxIcon")};
-    display: inline-block;
-    font-family: ${applyTheme("checkboxIconFont")};
-    font-size: ${applyTheme("checkboxIconSize")};
-    font-weight: ${applyTheme("checkboxIconFontWeight")};
-    -webkit-font-smoothing: antialiased;
-    color: ${applyTheme("checkboxIconColor")};
-    line-height: 1;
-    left:  ${applyTheme("checkboxIconLeftSpacing")};
-    top:  ${applyTheme("checkboxIconTopSpacing")};
-  }
 `;
 
 class Checkbox extends Component {
@@ -98,7 +99,7 @@ class Checkbox extends Component {
     /**
      * True for a checked checkbox, undefined for an unchecked checkbox
      */
-    value: PropTypes.bool
+    value: PropTypes.bool // eslint-disable-line react/boolean-prop-naming
   };
 
   static defaultProps = {

diff --git a/package/src/components/Checkbox/v1/Checkbox.md b/package/src/components/Checkbox/v1/Checkbox.md
@@ -39,14 +39,12 @@ The checkbox is a styled `::before` pseudoelement on `<input>`. The native `<inp
 
 ##### Checkbox check
 
-The checkbox's check icon an `::after` pseudoelement on `<input>`, with a `content` set to FontAwesome's [check](https://fontawesome.com/icons/check?style=solid): <i class="fas fa-check"></i>
+The checkbox's check icon an `::after` pseudoelement on `<input>`, with a `content` set to FontAwesome's [check](https://fontawesome.com/icons/check?style=solid) as an SVG.
 
 |Property     |Style               |
 |-------------|:------------------:|
 |Color        |`@cool-grey-500`    |
-|Font family  |`FontAwesome`       |
-|Font size    |`0.875rem`          |
-|Content      |`\f00c`             |
+|Icon size    |`0.875rem`          |
 
 ##### Label
 

diff --git a/package/src/components/Checkbox/v1/__snapshots__/Checkbox.test.js.snap b/package/src/components/Checkbox/v1/__snapshots__/Checkbox.test.js.snap
@@ -10,11 +10,17 @@ exports[`renders with props 1`] = `
 }
 
 .c1 + label::after {
-  content: none;
+  content: " ";
 }
 
 .c1:checked + label::after {
-  content: '\\f00c';
+  background-image: url("data:image/svg+xml; utf8,%3Csvg%20aria-hidden%3D'true'%20role%3D'img'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%3E%3Cpath%20fill%3D'%233c3c3c'%20d%3D'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
+  display: inline-block;
+  position: absolute;
+  width: 0.875em;
+  height: 0.875em;
+  top: 3px;
+  left: 4px;
 }
 
 .c1:focus + label::before {
@@ -63,19 +69,6 @@ exports[`renders with props 1`] = `
   top: -1px;
 }
 
-.c2::after {
-  content: '\\f00c';
-  display: inline-block;
-  font-family: 'Font Awesome 5 Free';
-  font-size: 0.8rem;
-  font-weight: 900;
-  -webkit-font-smoothing: antialiased;
-  color: #3c3c3c;
-  line-height: 1;
-  left: 4px;
-  top: 4px;
-}
-
 <div
   className="c0"
 >
@@ -107,11 +100,17 @@ exports[`renders disabled 1`] = `
 }
 
 .c1 + label::after {
-  content: none;
+  content: " ";
 }
 
 .c1:checked + label::after {
-  content: '\\f00c';
+  background-image: url("data:image/svg+xml; utf8,%3Csvg%20aria-hidden%3D'true'%20role%3D'img'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%3E%3Cpath%20fill%3D'%233c3c3c'%20d%3D'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z'%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
+  display: inline-block;
+  position: absolute;
+  width: 0.875em;
+  height: 0.875em;
+  top: 3px;
+  left: 4px;
 }
 
 .c1:focus + label::before {
@@ -160,19 +159,6 @@ exports[`renders disabled 1`] = `
   top: -1px;
 }
 
-.c2::after {
-  content: '\\f00c';
-  display: inline-block;
-  font-family: 'Font Awesome 5 Free';
-  font-size: 0.8rem;
-  font-weight: 900;
-  -webkit-font-smoothing: antialiased;
-  color: #3c3c3c;
-  line-height: 1;
-  left: 4px;
-  top: 4px;
-}
-
 <div
   className="c0"
 >

diff --git a/package/src/components/ErrorsBlock/v1/ErrorsBlock.js b/package/src/components/ErrorsBlock/v1/ErrorsBlock.js
@@ -17,14 +17,15 @@ const Error = styled.div`
 `;
 
 const IconWrapper = styled.div`
-  color: ${applyTheme("errorsBlockColor")};
   display: inline-block;
-  fill: currentColor;
   margin: ${applyTheme("errorsBlockIconMargin")};
 
-  & * {
-   color: inherit;
-   fill: inherit;
+  path {
+   fill: ${applyTheme("errorsBlockIconColor")};
+  }
+
+  svg {
+    height: 0.875em;
   }
 `;
 

diff --git a/package/src/components/ErrorsBlock/v1/ErrorsBlock.md b/package/src/components/ErrorsBlock/v1/ErrorsBlock.md
@@ -1,19 +1,57 @@
 ### Overview
 
+The `ErrorsBlock` is used to provide helpful information to the user when a form is invalid. The block takes an array of errors that are displayed with an optional icon.
+
 ```jsx
+const TwoColumnExamples = require("../../../../../styleguide/src/components/TwoColumnExamples").default;
+
 const errors = [{ name: "example", message: "This field is required" }];
-<Field name="example" label="Label" errors={errors}>
- <TextInput name="example" errors={errors} />
- <ErrorsBlock names={["example"]} errors={errors} />
-</Field>
+
+<TwoColumnExamples hasDarkRightBackground>
+    <Field name="example" label="Label" errors={errors}>
+        <TextInput name="example" errors={errors} placeholder="I'm a single-line input."/>
+        <ErrorsBlock names={["example"]} errors={errors} />
+    </Field>
+    <Field name="example" label="Label" errors={errors}>
+        <TextInput name="example" errors={errors} placeholder="I'm a multi-line input with a dark background." shouldAllowLineBreaks />
+        <ErrorsBlock names={["example"]} errors={errors} shouldShowIcon />
+    </Field>
+</TwoColumnExamples>
 ```
 
 #### Usage
 
+Use `ErrorsBlock` components with form fields and pass in an array of errors to display error messages.
+
+##### With icon
+
+Pass `shouldShowIcon` to show an icon before each error message.
+
 ```jsx
 const errors = [{ name: "example", message: "This field is required" }, { name: "example", message: "Another error" }];
 <Field name="example" label="Label" errors={errors}>
  <TextInput name="example" errors={errors} shouldAllowLineBreaks />
  <ErrorsBlock names={["example"]} errors={errors} shouldShowIcon />
 </Field>
 ```
+
+#### Specs
+
+##### Text
+
+The error text is set to red.
+
+|Property     |Variable               | Default theme style       |
+|-------------|-----------------------|:-------------------------:|
+|Text color   |`errorsBlockColor`     |`@cd3f4c`                  |
+|Text size    |`errorsBlockFontSize`  |14                         |
+|Block margin |`errorsBlockMargin`    |`${baseUnit(1)} 0`         |
+
+##### Icon
+
+The error icon is from FontAwesome's [exclamation-triangle](https://fontawesome.com/icons/exclamation-triangle?style=solid) as an SVG.
+
+|Property     |Variable               | Default theme style       |
+|-------------|-----------------------|:-------------------------:|
+|Icon margin  |`errorsBlockIconMargin`|`0 ${baseUnit(0.5)} 0 00 ` |
+|Icon color   |`errorsBlockIconColor` |`#cd3f4c`                  |
diff --git a/package/src/components/Field/v1/__snapshots__/Field.test.js.snap b/package/src/components/Field/v1/__snapshots__/Field.test.js.snap
@@ -47,7 +47,6 @@ exports[`renders with help text 1`] = `
   flex-grow: 2;
   font-family: inherit;
   font-size: 14px;
-  line-height: 1;
   outline: none;
 }
 
@@ -158,7 +157,6 @@ exports[`renders with label 1`] = `
   flex-grow: 2;
   font-family: inherit;
   font-size: 14px;
-  line-height: 1;
   outline: none;
 }
 
@@ -260,7 +258,6 @@ exports[`renders with no help text 1`] = `
   flex-grow: 2;
   font-family: inherit;
   font-size: 14px;
-  line-height: 1;
   outline: none;
 }
 
@@ -356,7 +353,6 @@ exports[`renders with no label 1`] = `
   flex-grow: 2;
   font-family: inherit;
   font-size: 14px;
-  line-height: 1;
   outline: none;
 }
 

diff --git a/package/src/components/TextInput/v1/TextInput.js b/package/src/components/TextInput/v1/TextInput.js
@@ -61,7 +61,6 @@ const StyledInput = styled.input`
   flex-grow: 2;
   font-family: ${applyTheme("inputFontFamily")};
   font-size: ${applyTheme("inputFontSize")};
-  line-height: ${applyTheme("inputLineHeight")};
   outline: none;
 
   &::placeholder {
@@ -97,10 +96,9 @@ const StyledTextarea = Textarea.extend`
 
 const IconWrapper = styled.div`
   box-sizing: border-box;
-  color: ${applyValidationColor("inputIconColor")};
-  fill: currentColor;
   margin-left: ${applyTheme("inputHorizontalPadding")};
-
+  height: ${applyTheme("inputIconWrapperSize")};
+  width: ${applyTheme("inputIconWrapperSize")};
   position: relative;
   right: ${applyTextareaVariant(applyTheme("textareaIconRight"), 0)};
   top: ${applyTextareaVariant(applyTheme("textareaIconTop"), 0)};
@@ -280,10 +278,10 @@ class TextInput extends Component {
     iconClearAccessibilityText: "Clear",
     isOnDarkBackground: false,
     isReadOnly: false,
-    onChange() {},
-    onChanging() {},
-    onIconClick() {},
-    onSubmit() {},
+    onChange() { },
+    onChanging() { },
+    onIconClick() { },
+    onSubmit() { },
     shouldAllowLineBreaks: false,
     shouldConvertEmptyStringToNull: true,
     shouldTrimValue: true,