Merge pull request #115 from 18F/ui-styling

Styling and layout improvements
GSA · Jul 6, 2021 · 170b404 · 170b404
2 parents a9863a5 + 679badc
commit 170b404
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 27 deletions.
diff --git a/resources/validations/ui/src/context/browser/util/styles.ts b/resources/validations/ui/src/context/browser/util/styles.ts
@@ -0,0 +1,10 @@
+export const colorTokenForRole = (role: string | undefined) => {
+  const roleLower = (role || '').toLowerCase();
+  if (roleLower.includes('warn')) {
+    return 'warning';
+  }
+  if (roleLower.includes('error') || roleLower.includes('fatal')) {
+    return 'error';
+  }
+  return 'info';
+};
diff --git a/resources/validations/ui/src/context/browser/views/components/SSPValidator.tsx b/resources/validations/ui/src/context/browser/views/components/SSPValidator.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { usePresenter } from '../hooks';
 import { onFileInputChangeGetFile } from '../../util/file-input';
+import { colorTokenForRole } from '../../util/styles';
 import { SSPReport } from './report';
 
 export const SSPValidator = () => {
@@ -32,20 +33,23 @@ export const SSPValidator = () => {
           })}
           disabled={state.report.current === 'PROCESSING'}
         />
-        <div className="usa-hint">
-          Or just use an example file, brought to you by FedRAMP.
-        </div>
-        <div>
-          {state.sampleSSPs.map((sampleSSP, index) => (
-            <button
-              key={index}
-              className="usa-button usa-button--unstyled"
-              onClick={() => actions.report.setXmlUrl(sampleSSP.url)}
-              disabled={state.report.current === 'PROCESSING'}
-            >
-              {sampleSSP.displayName}
-            </button>
-          ))}
+        <div className="margin-y-1">
+          <div className="usa-hint">
+            Or use an example file, brought to you by FedRAMP:
+          </div>
+          <ul>
+            {state.sampleSSPs.map((sampleSSP, index) => (
+              <li key={index}>
+                <button
+                  className="usa-button usa-button--unstyled"
+                  onClick={() => actions.report.setXmlUrl(sampleSSP.url)}
+                  disabled={state.report.current === 'PROCESSING'}
+                >
+                  {sampleSSP.displayName}
+                </button>
+              </li>
+            ))}
+          </ul>
         </div>
         {validatedReport && (
           <form className="usa-form">
@@ -99,9 +103,26 @@ export const SSPValidator = () => {
                       onChange={() => actions.report.setFilterRole(filterRole)}
                     />
                     <label
-                      className="usa-radio__label"
+                      className={`usa-radio__label bg-${colorTokenForRole(
+                        filterRole,
+                      )}-lighter`}
                       htmlFor={`role-${filterRole}`}
                     >
+                      <svg
+                        aria-hidden="true"
+                        role="img"
+                        focusable="false"
+                        className="usa-icon usa-icon--size-3 margin-right-1 margin-bottom-neg-2px"
+                      >
+                        <use
+                          xmlnsXlink="http://www.w3.org/1999/xlink"
+                          xlinkHref={actions.getAssetUrl(
+                            `uswds/img/sprite.svg#${colorTokenForRole(
+                              filterRole,
+                            )}`,
+                          )}
+                        />
+                      </svg>
                       {filterRole || '<not specified>'}
                     </label>
                   </div>

diff --git a/resources/validations/ui/src/context/browser/views/components/report/index.tsx b/resources/validations/ui/src/context/browser/views/components/report/index.tsx
@@ -2,24 +2,17 @@ import React, { useState } from 'react';
 
 import type { ValidationAssert } from '../../../../../use-cases/schematron';
 import { usePresenter } from '../../../views/hooks';
+import { colorTokenForRole } from '../../../util/styles';
 
 const MAX_ASSERT_TEXT_LENGTH = 200;
 
-const alertClassForRole = (role: string | undefined) => {
-  const roleLower = (role || '').toLowerCase();
-  if (roleLower.includes('warn')) {
-    return 'usa-alert--warning';
-  }
-  if (roleLower.includes('error') || roleLower.includes('fatal')) {
-    return 'usa-alert--error';
-  }
-  return 'usa-alert--info';
-};
-
 const Assertion = ({ assert }: { assert: ValidationAssert }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
   return (
-    <div className={`usa-alert ${alertClassForRole(assert.role)}`} role="alert">
+    <div
+      className={`usa-alert usa-alert--${colorTokenForRole(assert.role)}`}
+      role="alert"
+    >
       <div className="usa-alert__body">
         <h4 className="usa-alert__heading">{assert.id}</h4>
         <div className="usa-alert__text">

diff --git a/resources/validations/ui/src/context/browser/views/index.scss b/resources/validations/ui/src/context/browser/views/index.scss
@@ -35,3 +35,15 @@ $theme-image-path: '../../../../uswds/img';
     margin-right: auto;
   }
 }
+
+.bg-error-lighter {
+  background-color: color('error-lighter');
+}
+
+.bg-warning-lighter {
+  background-color: color('warning-lighter');
+}
+
+.bg-info-lighter {
+  background-color: color('info-lighter');
+}