feat: Apply default theme to beta pages & components (#374)

* Add color swatches to Storybook * Add font face * SFDS * Link colors * Update header/footer * Add sfds class to beta component stories * Only use Sharp Sans for headers * Use theme colors * Style side navigation * Create PageHeader component * Styling PageHeader, Search * Style tweaks * Minor cleanup * Update content of PersonalData * Add disabled Search * Add PageHeader background image * Add buttons, hover states * Change focus color * Selection color * Resolve eslint warning * Misc minor color fixes * Design feedback * Add align prop to Dropdown component * Fix tests
USSF-ORBIT · Nov 29, 2021 · 01dfdc0 · 01dfdc0
1 parent 17b81d6
commit 01dfdc0
Show file tree

Hide file tree

Showing 43 changed files with 475 additions and 171 deletions.
diff --git a/public/assets/images/hero.jpeg b/public/assets/images/hero.jpeg
diff --git a/src/__tests__/pages/beta/sites-and-applications.test.tsx b/src/__tests__/pages/beta/sites-and-applications.test.tsx
@@ -191,13 +191,13 @@ describe('Sites and Applications page', () => {
     describe('selecting collections', () => {
       beforeEach(async () => {
         await screen.findByRole('button', {
-          name: 'Select multiple collections',
+          name: 'Select collections',
         })
       })
 
       it('can enter select mode', () => {
         const selectBtn = screen.getByRole('button', {
-          name: 'Select multiple collections',
+          name: 'Select collections',
         })
         expect(selectBtn).toBeInTheDocument()
         userEvent.click(selectBtn)
@@ -209,7 +209,7 @@ describe('Sites and Applications page', () => {
         ).toBeDisabled()
 
         expect(
-          screen.queryByRole('button', { name: 'Select multiple collections' })
+          screen.queryByRole('button', { name: 'Select collections' })
         ).not.toBeInTheDocument()
         expect(
           screen.getByRole('button', { name: 'Cancel' })
@@ -238,7 +238,7 @@ describe('Sites and Applications page', () => {
 
         userEvent.click(
           screen.getByRole('button', {
-            name: 'Select multiple collections',
+            name: 'Select collections',
           })
         )
 
@@ -254,7 +254,7 @@ describe('Sites and Applications page', () => {
       it('can select multiple collections and add them', () => {
         userEvent.click(
           screen.getByRole('button', {
-            name: 'Select multiple collections',
+            name: 'Select collections',
           })
         )
 
@@ -291,7 +291,7 @@ describe('Sites and Applications page', () => {
       it('selecting the same collection twice removes it from the selection', () => {
         userEvent.click(
           screen.getByRole('button', {
-            name: 'Select multiple collections',
+            name: 'Select collections',
           })
         )
 
@@ -411,7 +411,7 @@ describe('Sites and Applications page', () => {
 
     expect(
       screen.queryByRole('button', {
-        name: 'Select multiple collections',
+        name: 'Select collections',
       })
     ).not.toBeInTheDocument()
 

diff --git a/src/components/AddWidget/AddWidget.module.scss b/src/components/AddWidget/AddWidget.module.scss
@@ -1,4 +1,5 @@
 @import 'styles/uswdsDependencies';
+@import 'styles/sfds/sfdsDependencies';
 
 .addWidget {
   display: block;
@@ -22,6 +23,7 @@
   background: transparent;
   color: #585a5c;
   @include u-font-size('body', 'lg');
+  font-family: $sfds-heading-font;
 
   svg {
     pointer-events: none;

diff --git a/src/components/AddWidget/AddWidget.stories.tsx b/src/components/AddWidget/AddWidget.stories.tsx
@@ -15,6 +15,13 @@ export default {
     handleSelectCollection: { action: 'Select collection from template' },
     handleCreateCollection: { action: 'Create new collection' },
   },
+  decorators: [
+    (Story) => (
+      <div className="sfds">
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta
 
 export const DefaultAddWidget = (argTypes: StorybookArgTypes) => (

diff --git a/src/components/AddWidget/AddWidget.tsx b/src/components/AddWidget/AddWidget.tsx
@@ -31,6 +31,7 @@ const AddWidget = ({
   return (
     <div className={styles.addWidget}>
       <DropdownMenu
+        align="center"
         toggleEl={
           <button
             className={styles.addWidgetButton}

diff --git a/src/components/Bookmark/Bookmark.stories.tsx b/src/components/Bookmark/Bookmark.stories.tsx
@@ -10,6 +10,13 @@ export default {
   title: 'Components/Bookmark',
   component: Bookmark,
   argTypes: { onDelete: { action: 'Deleted' } },
+  decorators: [
+    (Story) => (
+      <div className="sfds">
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta
 
 export const ExampleBookmark = () => <Bookmark href="#">Example</Bookmark>

diff --git a/src/components/BookmarkList/BookmarkList.stories.tsx b/src/components/BookmarkList/BookmarkList.stories.tsx
@@ -13,6 +13,13 @@ export default {
   argTypes: {
     handleAddToCollection: { action: 'Add to collection' },
   },
+  decorators: [
+    (Story) => (
+      <div className="sfds">
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta
 
 const exampleBookmarks: Bookmark[] = [

diff --git a/src/components/BookmarkList/BookmarkList.tsx b/src/components/BookmarkList/BookmarkList.tsx
@@ -73,6 +73,7 @@ const BookmarkListRow = ({
               )}
             </Button>
           }
+          align="right"
           isActive={isDropdownOpen}
           dropdownRef={dropdownEl}>
           <ol className={styles.collectionOptions}>{collectionOptions}</ol>

diff --git a/src/components/Collection/Collection.stories.tsx b/src/components/Collection/Collection.stories.tsx
@@ -6,6 +6,13 @@ import Bookmark from 'components/Bookmark/Bookmark'
 export default {
   title: 'Components/Collections/Collection',
   component: Collection,
+  decorators: [
+    (Story) => (
+      <div className="sfds">
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta
 
 export const ExampleCollection = () => (

diff --git a/src/components/CustomCollection/CustomCollection.module.scss b/src/components/CustomCollection/CustomCollection.module.scss
@@ -1,10 +1,11 @@
 @import 'styles/uswdsDependencies';
 @import 'styles/deps';
+@import 'styles/sfds/sfdsDependencies';
 
 .undo {
   @extend %button-reset;
-  background: #f2784b;
-  color: white;
+  background: $theme-mars-base;
+  color: $theme-white;
   flex: auto;
   text-align: left;
   @include u-padding('205' 4);
@@ -23,8 +24,8 @@
 }
 
 button.collectionSettingsDropdown {
-  background-color: #ffffff;
-  color: #005ea2;
+  background-color: $theme-white;
+  color: $theme-ultraviolet-base;
   border: 0;
   border-radius: 0;
   font-weight: normal;
@@ -43,6 +44,7 @@ h3.collectionTitle {
 }
 
 textarea.collectionTitle {
+  font-family: $sfds-heading-font;
   font-size: font-size('heading', 'lg');
   line-height: lh('heading', 2);
   flex-grow: 1;

diff --git a/src/components/CustomCollection/CustomCollection.stories.tsx b/src/components/CustomCollection/CustomCollection.stories.tsx
@@ -18,6 +18,13 @@ export default {
     handleRemoveCollection: { action: 'Remove collection' },
     handleEditCollection: { action: 'Edit collection' },
   },
+  decorators: [
+    (Story) => (
+      <div className="sfds">
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta
 
 export const ExampleCustomCollection = (argTypes: StorybookArgTypes) => (

diff --git a/src/components/CustomCollection/CustomCollection.tsx b/src/components/CustomCollection/CustomCollection.tsx
@@ -226,6 +226,7 @@ const CustomCollection = ({
           </button>
         }
         dropdownRef={dropdownEl}
+        align="right"
         isActive={isDropdownOpen}>
         {editCustomCollectionItem}
       </DropdownMenu>

diff --git a/src/components/DropdownMenu/DropdownMenu.module.scss b/src/components/DropdownMenu/DropdownMenu.module.scss
@@ -1,4 +1,5 @@
 @import 'styles/uswdsDependencies';
+@import 'styles/sfds/sfdsDependencies';
 
 .dropdown {
   position: relative;
@@ -7,11 +8,24 @@
 
 .dropdownMenu {
   position: absolute;
-  background: #ffffff;
+  background: $theme-white;
   border: 1px solid color('base-dark');
   width: 100%;
   z-index: 1;
 
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.center {
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
   border-radius: 2px 2px 0px 0px;
 
@@ -31,15 +45,21 @@
       margin-right: 0;
     }
 
-    > button {
+    > button,
+    > button:global(.usa-button) {
       width: 100%;
-      background-color: #fff;
-      color: color('primary');
+      background-color: $theme-white;
+      color: $theme-ultraviolet-base;
       border: 0;
       border-radius: 0;
       font-weight: normal;
       text-align: left;
       padding: units(1) units('105');
+
+      &:hover {
+        background-color: #f0f0f0;
+        color: $theme-ultraviolet-dark;
+      }
     }
   }
 

diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -1,26 +1,38 @@
 import React from 'react'
+import classnames from 'classnames'
 import styles from 'components/DropdownMenu/DropdownMenu.module.scss'
 
+type DropdownMenuAlignment = 'left' | 'right' | 'center'
+
 type PropTypes = {
   toggleEl: React.ReactNode
   children: React.ReactNode
   isActive: boolean
+  align?: DropdownMenuAlignment
   dropdownRef?: React.RefObject<HTMLDivElement>
 }
+
 const DropdownMenu = ({
   children,
   isActive,
+  align,
   dropdownRef,
   toggleEl,
 }: PropTypes) => {
+  const menuClasses = classnames(styles.dropdownMenu, {
+    [styles.left]: align === 'left',
+    [styles.right]: align === 'right',
+    [styles.center]: align === 'center',
+  })
+
   return (
     // Ref needs to encompass the menu trigger in order
     // to properly track inside/outside click for open/close
     <div ref={dropdownRef} className={styles.dropdown}>
       {toggleEl}
 
       {isActive && (
-        <div className={styles.dropdownMenu}>
+        <div className={menuClasses}>
           <ol>
             {Array.isArray(children) ? (
               children.map((child, i) => <li key={`dropdown${i}`}>{child}</li>)

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -1,8 +1,9 @@
 @import 'styles/uswdsDependencies';
+@import 'styles/sfds/sfdsDependencies';
 
 .footer {
-  background: #333;
-  color: #fff;
+  background: $theme-black;
+  color: $theme-white;
   @include u-font-size('body', '2xs');
 
   :global {
@@ -11,11 +12,16 @@
     }
 
     .usa-footer__secondary-section {
-      color: white;
+      color: $theme-white;
       background-color: transparent;
 
       a {
-        color: #fff;
+        color: $theme-white;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
       }
 
       > .grid-container {

diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react'
 import Footer from './Footer'
 
 export default {
-  title: 'Components/Footer',
+  title: 'Layout/Footer',
   component: Footer,
 } as Meta
 

diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -1,7 +1,8 @@
 @import 'styles/uswdsDependencies';
+@import 'styles/sfds/sfdsDependencies';
 
 .header {
-  background: #333;
+  background: $black;
 
   @include at-media('desktop') {
     padding: units('105') 0;
@@ -27,7 +28,7 @@
     }
 
     .usa-nav {
-      background: #333;
+      background: $black;
 
       @include at-media('desktop') {
         align-self: center;
@@ -36,13 +37,13 @@
     }
 
     .usa-nav__primary > .usa-nav__primary-item > a {
-      color: #fff;
+      color: $theme-white;
       font-weight: normal;
       font-family: 'Trebuchet MS', sans-serif;
 
       &:hover {
-        background: #e4e4e4;
-        color: #000000;
+        background: $theme-white;
+        color: $theme-black;
         border-radius: 6px;
       }
     }

diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from '@storybook/react'
 import Header from './Header'
 
 export default {
-  title: 'Components/Header',
+  title: 'Layout/Header',
   component: Header,
 } as Meta