Merge pull request #1661 from 18F/jf-remove-asset-path

Fix missing checkmarks for sidenav and input fields

package.json

@@ -69,7 +69,9 @@
     "globals": {
       "EAPP_VERSION": "MAJOR.MINOR.PATCH-IDENTIFIER"
     },
-    "setupFiles": ["<rootDir>/node_modules/regenerator-runtime/runtime"]
+    "setupFiles": [
+      "<rootDir>/node_modules/regenerator-runtime/runtime"
+    ]
   },
   "scripts": {
     "test": "NODE_ENV=test jest",
@@ -125,6 +127,7 @@
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
+    "storybook-react-router": "^1.0.5",
     "style-loader": "^0.23.1",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.0.4"

src/components/ErrorList/ErrorList.scss

@@ -46,12 +46,12 @@
   }
 
   &.usa-alert-error {
-    background-image: url('#{$asset-path}/img/error.svg');
+    background-image: url('#{$asset-path}img/error.svg');
     background-size: 2rem;
   }
 
   &.usa-alert-info {
-    background-image: url('#{$asset-path}/img/help-icon-v2-01.svg');
+    background-image: url('#{$asset-path}img/help-icon-v2-01.svg');
     background-size: 2rem;
 
     .close {

src/components/Navigation/Navigation.scss

@@ -57,10 +57,10 @@
       width: $status-icon-width;
     }
     .is-valid .eapp-status-icon {
-      background-image: url('#{$asset-path}/img/checkmark.svg');
+      background-image: url('#{$asset-path}img/checkmark.svg');
     }
     .has-errors .eapp-status-icon {
-      background-image: url('#{$asset-path}/img/exclamation-point-white-bg.svg');
+      background-image: url('#{$asset-path}img/exclamation-point-white-bg.svg');
     }
   }
 

src/components/Navigation/SectionLink.jsx

@@ -10,7 +10,7 @@ import {
   sectionIsValidSelector,
 } from 'selectors/navigation'
 
-const SectionLink = ({
+export const SectionLink = ({
   section, basePath, errors, completed, locked,
 }) => {
   const url = `${basePath}/${section.path}`

src/components/Navigation/SectionLink.stories.jsx

@@ -0,0 +1,41 @@
+/* eslint import/no-extraneous-dependencies: 0 */
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import StoryRouter from 'storybook-react-router'
+
+import { SectionLink } from './SectionLink'
+
+storiesOf('SectionLink', module)
+  .addDecorator(StoryRouter())
+  .add('default', () => (
+    <ol className="usa-sidenav-list">
+      <SectionLink
+        section={{ label: 'Test Link' }}
+      />
+    </ol>
+  ))
+  .add('with errors', () => (
+    <ol className="usa-sidenav-list">
+      <SectionLink
+        section={{ label: 'Test Link' }}
+        errors
+      />
+    </ol>
+  ))
+  .add('completed', () => (
+    <ol className="usa-sidenav-list">
+      <SectionLink
+        section={{ label: 'Test Link' }}
+        completed
+      />
+    </ol>
+  ))
+  .add('locked', () => (
+    <ol className="usa-sidenav-list">
+      <SectionLink
+        section={{ label: 'Test Link' }}
+        locked
+      />
+    </ol>
+  ))

src/components/Section/Package/BasicAccordion.scss

@@ -2,7 +2,7 @@
   margin-top: 5rem;
 
   .valid-icon {
-    background: url('#{$asset-path}/img/checkmark.svg') no-repeat right 0 center / 1.7rem
+    background: url('#{$asset-path}img/checkmark.svg') no-repeat right 0 center / 1.7rem
       auto;
     width: 1.7rem;
     height: 1.7rem;

src/views/Form/Form.scss

@@ -115,15 +115,15 @@ input[type='radio'] {
   input[type='email'],
   textarea,
   select {
-    background: url('#{$asset-path}/img/exclamation-point.svg') no-repeat right 0.7rem
+    background: url('#{$asset-path}img/exclamation-point.svg') no-repeat right 0.7rem
       center / 1.7rem 100%;
     box-shadow: none;
     border-width: 2px;
     width: 100%;
 
     &.usa-input-success {
       box-shadow: none;
-      background: url('#{$asset-path}/img/exclamation-point.svg') no-repeat right 0.7rem
+      background: url('#{$asset-path}img/exclamation-point.svg') no-repeat right 0.7rem
         center / 1.7rem 100%;
       border-width: 2px;
     }
@@ -147,7 +147,7 @@ select {
 
   &.usa-input-success {
     box-shadow: none;
-    background: url('#{$asset-path}/img/checkmark.svg') no-repeat right 0.7rem center /
+    background: url('#{$asset-path}img/checkmark.svg') no-repeat right 0.7rem center /
       1.7rem 100%;
     border-width: 2px;
   }

yarn.lock

@@ -12850,6 +12850,13 @@ store2@^2.7.1:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.7.1.tgz#22070b7dc04748a792fc6912a58ab99d3a21d788"
   integrity sha512-zzzP5ZY6QWumnAFV6kBRbS44pUMcpZBNER5DWUe1HETlaKXqLcCQxbNu6IHaKr1pUsjuhUGBdOy8sWKmMkL6pQ==
 
+storybook-react-router@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/storybook-react-router/-/storybook-react-router-1.0.5.tgz#d955526406e5328251fadce4acfe3a6ce432d31e"
+  integrity sha512-br6y5MerG0Al2lz9I3XMTsKNKgzLiVZBX0F9QdlnSAhq9VMfBJtBwiO+qPaptizKOZ3HZaEuYwhil5dQFNmZdw==
+  dependencies:
+    prop-types "^15.7.2"
+
 stream-browserify@^2.0.0, stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"