Update footer to add contribution links (#511)

* First pass at footer update * Update footer text and spacing * Updating breakpoints for footer * Adding styles for links used on .ds-base--inverse * Footer spacing updates and mobile menu button color change * Updated to add responsive classes for button margin
CMSgov · Oct 17, 2019 · 39dc499 · 39dc499
1 parent c9ce0d0
commit 39dc499
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 34 deletions.
diff --git a/packages/core/src/base/body.scss b/packages/core/src/base/body.scss
@@ -37,5 +37,15 @@ Style guide: style.base
   @extend %ds-base;
   background-color: $color-background-inverse;
   color: $color-base-inverse;
+    a {
+      color: $color-base-inverse;
+
+      &:active,
+      &:focus,
+      &:hover {
+        color: $color-base-inverse;
+        opacity: 0.8;
+      }
+    }
 }
 /* stylelint-enable */
diff --git a/packages/docs/src/scripts/Docs.jsx b/packages/docs/src/scripts/Docs.jsx
@@ -59,7 +59,7 @@ class Docs extends React.PureComponent {
           </main>
         </div>
         <button
-          className="ds-c-button ds-u-fill--background-inverse ds-u-color--base-inverse ds-c-button--transparent ds-u-md-display--none docs__toggle"
+          className="ds-c-button ds-c-button--primary ds-u-md-display--none docs__toggle"
           onClick={() => this.toggleMenu()}
         >
           {menuOpen ? 'Close' : 'Menu'}

diff --git a/packages/docs/src/scripts/components/Footer.jsx b/packages/docs/src/scripts/components/Footer.jsx
@@ -32,63 +32,102 @@ function renderLinks(links) {
 
   return urls.map(function(url) {
     return (
-      <li key={url}>
+      <dd key={url} className="ds-u-font-size--small ds-u-margin-left--0">
         <a href={url} target="_blank">
           {links[url]}
         </a>
-      </li>
+      </dd>
     );
   });
 }
 
 const Footer = () => {
   return (
-    <footer className="ds-u-fill--primary-alt-lightest ds-u-padding-y--6 ds-u-md-padding-bottom--3">
-      <div className="ds-u-padding-x--3 ds-u-margin-x--0">
+    <footer className="ds-u-fill--gray-lightest">
+      <section className="ds-u-padding-y--4 ds-l-container">
+        <h2 className="ds-h4">Help make the CMS Design System better</h2>
+        <p className="ds-u-measure--wide">
+          We use Github issues to keep track of new component submissions, bugs,
+          design feedback, and any other suggestions you may have.
+        </p>
         <div className="ds-l-row">
-          <article className="ds-l-col--12 ds-l-lg-col--4 ds-u-margin-bottom--4">
-            <h2 className="ds-h4">Find an issue or have a feature request?</h2>
+          <div className="ds-l-col--12 ds-l-sm-col--4 ds-l-lg-col--4 ds-u-margin-bottom--2 ds-u-sm-margin-bottom--0">
             <a
-              className="ds-c-button ds-c-button--primary"
-              href={githubUrl('issues')}
+              className="ds-c-button"
+              href={githubUrl(
+                'issues/new?assignees=&labels=Bug&template=bug_report.md&title='
+              )}
               target="_blank"
             >
-              Ask questions on GitHub
+              Report a bug
             </a>
-            <p>
-              <a href="https://forms.cms.gov/cms-wds-design-system-contact-form/responses/new">
-                Contact the CMSDS team
-              </a>
-            </p>
-            <p className="ds-text ds-u-color--primary-darkest ds-u-font-size--small ds-u-margin-top--3 ds-u-measure--base">
-              A federal government website managed by the Centers for Medicare &
-              Medicaid Services 7500 Security Boulevard, Baltimore, MD 21124
-            </p>
-          </article>
-          <article className="ds-l-col--12 ds-l-sm-col--6 ds-l-lg-col--4 ds-u-margin-bottom--4">
-            <h2 className="ds-h4">CMS &amp; HHS Websites</h2>
-            <ul className="ds-c-list ds-c-list--bare ds-u-font-size--small">
+          </div>
+          <div className="ds-l-col--12 ds-l-sm-col--4 ds-l-lg-col--4 ds-u-margin-bottom--2 ds-u-sm-margin-bottom--0">
+            <a
+              className="ds-c-button"
+              href={githubUrl(
+                'issues/new?assignees=&labels=&template=general-issue.md&title='
+              )}
+              target="_blank"
+            >
+              Request a change
+            </a>
+          </div>
+          <div className="ds-l-col--12 ds-l-sm-col--4 ds-l-lg-col--4">
+            <a
+              className="ds-c-button"
+              href={githubUrl(
+                'issues/new?assignees=&labels=proposal%2Ffeature+request&template=propose-a-new-item-for-the-cms-design-system.md&title='
+              )}
+              target="_blank"
+            >
+              Propose something new
+            </a>
+          </div>
+        </div>
+      </section>
+      <section className="ds-base--inverse">
+        <div className="ds-l-container ds-u-padding-top--4">
+          <div className="ds-l-row">
+            <div className="ds-l-col--12 ds-l-sm-col--4 ds-l-lg-col--4 ds-u-margin-bottom--4 ds-u-margin-top--2">
+              <h6 className="ds-h4">Contact Us</h6>
+              <p className="ds-u-font-size--small">
+                Need help with the CMS Design System?
+                <br />
+                <a href="https://forms.cms.gov/cms-wds-design-system-contact-form/responses/new">
+                  Drop us a line
+                </a>
+              </p>
+            </div>
+            <dl className="ds-l-col--12 ds-l-sm-col--4 ds-l-lg-col--4 ds-u-margin-bottom--4">
+              <dt className="ds-h4">CMS &amp; HHS Websites</dt>
               {renderLinks(cmsLinks)}
-            </ul>
-          </article>
-          <article className="ds-l-col--12 ds-l-sm-col--6 ds-l-lg-col--4 ds-u-margin-bottom--4">
-            <h2 className="ds-h4">Additional resources</h2>
-            <ul className="ds-c-list ds-c-list--bare ds-u-font-size--small">
+            </dl>
+            <dl className="ds-l-col--12 ds-l-sm-col--4 ds-l-lg-col--4 ds-u-margin-bottom--4">
+              <dt className="ds-h4">Additional resources</dt>
               {renderLinks(helpfulLinks)}
-              <li>
+              <dd className="ds-u-font-size--small ds-u-margin-left--0">
                 <button
                   type="button"
-                  className="ds-c-button ds-c-button--small ds-c-button--transparent ds-u-padding--0 titlelink"
+                  className="ds-c-button ds-c-button--small ds-c-button--transparent-inverse ds-u-padding--0 titlelink"
                   onClick={() => (window.location.href = '#')}
                   data-privacy-policy="modal-trigger-footer"
                 >
                   Privacy settings
                 </button>
-              </li>
-            </ul>
-          </article>
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </section>
+      <section className="ds-base--inverse ds-u-padding-bottom--4">
+        <div className="ds-l-container ds-u-padding-y--2">
+          <p className="ds-text ds-u-font-size--small">
+            A federal government website managed by the Centers for Medicare &
+            Medicaid Services 7500 Security Boulevard, Baltimore, MD 21124
+          </p>
         </div>
-      </div>
+      </section>
     </footer>
   );
 };