Merge pull request #82 from iris-i/hover-link-styles-ii

Hover and link styles for buttons and pages.

src/frontend/components/button--custom.tsx

@@ -0,0 +1,16 @@
+interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+const CustomButton = ({ text, onClick, className }: ButtonProps) => (
+  <button
+    className={`button-state-styles usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black ${className}`}
+    onClick={onClick}
+  >
+    {text}
+  </button>
+);
+
+export default CustomButton;

src/frontend/components/node--goal--card.tsx

@@ -40,7 +40,7 @@ export function NodeGoalCard({ goal, ...props }: NodeGoalCardProps) {
               />
             )}
           </div>
-          <div className="usa-card__footer padding-bottom-1 border-top-2px border-base-lighter">
+          <div className="usa-card__footer padding-bottom-1 border-top-1px border-base-lighter">
             <AgencyInfoBox
               title={agencyTitle}
               logo={agencyLogo}

src/frontend/components/node--plan--card.tsx

@@ -27,7 +27,7 @@ export function NodePlanCard({ goal, ...props }: NodePlanCardProps) {
 
           <div className="usa-card__body grid-row flex-column flex-align-center">
           </div>
-          <div className="usa-card__footer padding-bottom-1 border-top-2px border-base-lighter">
+          <div className="usa-card__footer padding-bottom-1 border-top-1px border-base-lighter">
             <AgencyInfoBox
               title={agencyTitle}
               logo={agencyLogo}

src/frontend/components/node--plan.tsx

@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import Link from 'next/link'
 import { DrupalNode } from "next-drupal";
 import { Icon, Button, ButtonGroup } from "@trussworks/react-uswds";
-import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
 import { USABreadcrumb } from "./usa--breadcrumb";
 import GoalsTotals from "./goal-totals";
 import { FieldLogo } from "./field--logo";
@@ -34,15 +34,15 @@ function calculateObjectiveIndicatorTotals(goals) {
   }
 }
 
-export function NodePlan({node, storageData, ...props}: NodePlanProps) {
+export function NodePlan({ node, storageData, ...props }: NodePlanProps) {
   let mainContentRef = useRef();
   const { title, field_agency, field_file, field_goals } = node;
   const [listView, setListView] = useState(true);
   const totals = calculateObjectiveIndicatorTotals(field_goals);
-  const masonryBP = {350: 1, 750: 2, 1060: 3, 1400: 4};
+  const masonryBP = { 350: 1, 750: 2, 1060: 3, 1400: 4 };
   const startDate = new Date(storageData.administration?.dateRange?.start.time);
   const endDate = new Date(storageData.administration?.dateRange?.end.time)
-  const dateOptions: Intl.DateTimeFormatOptions = {year: "numeric"}
+  const dateOptions: Intl.DateTimeFormatOptions = { year: "numeric" }
   return (
     <>
       <USABreadcrumb activeItem={title} links={[]} />
@@ -77,15 +77,15 @@ export function NodePlan({node, storageData, ...props}: NodePlanProps) {
             </div>
           }
           {node.body &&
-          (
-            <div className="margin-bottom-2 border-top border-base-lighter">
-              <h2 className="font-sans-3xs text-semibold margin-bottom-05">Description</h2>
-              <div
-                dangerouslySetInnerHTML={{ __html: node.body?.processed }}
-                className="font-body-sm"
-              />
-            </div>
-          )}
+            (
+              <div className="margin-bottom-2 border-top border-base-lighter">
+                <h2 className="font-sans-3xs text-semibold margin-bottom-05">Description</h2>
+                <div
+                  dangerouslySetInnerHTML={{ __html: node.body?.processed }}
+                  className="font-body-sm"
+                />
+              </div>
+            )}
           {field_file &&
             <div>
               <Link
@@ -99,14 +99,15 @@ export function NodePlan({node, storageData, ...props}: NodePlanProps) {
           }
         </div>
         <div className="content-area">
-          
+
           <main id="main-content" className="main-content padding-x-4 padding-bottom-5 padding-top-8" ref={mainContentRef}>
             <div className="grid-row flex-justify">
               <h2 className="font-sans-xl margin-top-0">Goals</h2>
               <ButtonGroup type="segmented">
                 <Button
                   outline
                   type="button"
+                  className="button-state-styles"
                   onClick={() => setListView(false)}
                   disabled={!listView}
                 >
@@ -116,6 +117,7 @@ export function NodePlan({node, storageData, ...props}: NodePlanProps) {
                 <Button
                   outline
                   type="button"
+                  className="button-state-styles"
                   onClick={() => setListView(true)}
                   disabled={listView}
                 >
@@ -124,64 +126,64 @@ export function NodePlan({node, storageData, ...props}: NodePlanProps) {
                 </Button>
               </ButtonGroup>
             </div>
-            
+
             {listView
-            ? (
-              <ul className="add-list-reset">
-                {field_goals.map((goal, index) => {
-                  let listBorders = "border-top";
-                  let linkBorders = ""
-                  if (index === 0) {
-                    listBorders = "radius-top-lg";
-                    linkBorders = "radius-top-lg";
-                  } else if (index === field_goals.length - 1) {
-                    listBorders = "radius-bottom-lg border-top";
-                  }
-                  return(
-                    <li key={goal.id} className={`bg-white ${listBorders}`}>
-                      <Link
-                        className={`grid-row flex-no-wrap flex-justify text-no-underline font-sans-md padding-2 text-base-darkest ${linkBorders}`}
-                        href={goal.path.alias}>
+              ? (
+                <ul className="add-list-reset">
+                  {field_goals.map((goal, index) => {
+                    let listBorders = "border-top";
+                    let linkBorders = ""
+                    if (index === 0) {
+                      listBorders = "radius-top-lg";
+                      linkBorders = "radius-top-lg";
+                    } else if (index === field_goals.length - 1) {
+                      listBorders = "radius-bottom-lg border-top";
+                    }
+                    return (
+                      <li key={goal.id} className={`bg-white ${listBorders}`}>
+                        <Link
+                          className={`grid-row flex-no-wrap flex-justify text-no-underline font-sans-md padding-2 text-base-darkest ${linkBorders}`}
+                          href={goal.path.alias}>
                           <span>{goal.title}</span>
                           <Icon.NavigateNext size={3} aria-hidden={true} />
-                      </Link>
-                    </li>
-                  );
-                })}
-              </ul>
-            )
-            : (
-              <div>
-                <ul>
-                  <ResponsiveMasonry
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )
+              : (
+                <div>
+                  <ul>
+                    <ResponsiveMasonry
                       columnsCountBreakPoints={masonryBP}
-                      gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
-                  >
-                    <Masonry>
-                      {field_goals.map((goal) => {
-                        return(
-                          <Link key={goal.id} href={goal.path.alias} className="text-no-underline">
-                            <div className="usa-card__container">
-                              <div className="usa-card__header">
-                                <h4 className="usa-card__heading ">{goal.title}</h4>
-                              </div>
-                              <div className="usa-card__media">
-                                <div className="usa-card__img">
-                                  {/* <img
+                      gutterBreakpoints={{ 350: "12px", 750: "16px", 900: "24px" }}
+                    >
+                      <Masonry>
+                        {field_goals.map((goal) => {
+                          return (
+                            <Link key={goal.id} href={goal.path.alias} className="text-no-underline">
+                              <div className="usa-card__container">
+                                <div className="usa-card__header">
+                                  <h4 className="usa-card__heading ">{goal.title}</h4>
+                                </div>
+                                <div className="usa-card__media">
+                                  <div className="usa-card__img">
+                                    {/* <img
                                     src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
                                     alt="A placeholder image"
                                   /> */}
+                                  </div>
                                 </div>
                               </div>
-                            </div>
-                          </Link>
-                        )
-                      })}
-                    </Masonry>
-                  </ResponsiveMasonry>
-                </ul>
-              </div>
-            )
+                            </Link>
+                          )
+                        })}
+                      </Masonry>
+                    </ResponsiveMasonry>
+                  </ul>
+                </div>
+              )
             }
           </main>
         </div>

src/frontend/components/view--goal-search.tsx

@@ -6,6 +6,7 @@ import { NodeGoalCard } from "./node--goal--card";
 import { NodePlanCard } from "./node--plan--card";
 import { ViewGoalSearchFulltext } from "./view--goal-search--fulltext";
 import ViewGoalFacets from "./view--goal-facets";
+import CustomButton from "./button--custom";
 
 interface ViewGoalSearch {
   goals: Array<NodeGoalProps | NodePlanProps>,
@@ -70,9 +71,11 @@ export default function GoalsSearchView({ filters, goals, total, description }:
           </div>
           {!filtersOpen && (
             <div className="grid-col flex-auto">
-              <button className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black search-goals--filter" onClick={() => toggleFilters()}>
-                Filter by topic
-              </button>
+              <CustomButton
+                text="Filter by topic"
+                onClick={() => setFiltersOpen(!filtersOpen)}
+                className={`search-goals--filter ${filtersOpen ? `button--is-open` : ``}`}
+              />
             </div>
           )}
           <div className="grid-col flex-fill">
@@ -96,28 +99,28 @@ export default function GoalsSearchView({ filters, goals, total, description }:
         <div className="grid-row margin-y-3 padding-x-205 padding-y-105 overflow-hidden">
           <ul className="add-list-reset search-goals--toggle hr-lines">
             <li>
-              <button
-                className={"usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill active"}>
-                Everything
-              </button>
+              <CustomButton
+                text="Everything"
+                className={`radius-pill active`}
+              />
             </li>
             <li>
-              <button
-                className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
-                Plans
-              </button>
+              <CustomButton
+                text="Plans"
+                className={`radius-pill`}
+              />
             </li>
             <li>
-              <button
-                className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
-                Goals
-              </button>
+              <CustomButton
+                text="Goals"
+                className={`radius-pill`}
+              />
             </li>
             <li>
-              <button
-                className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
-                Indicators
-              </button>
+              <CustomButton
+                text="Indicators"
+                className={`radius-pill`}
+              />
             </li>
           </ul>
         </div>
@@ -165,4 +168,4 @@ export default function GoalsSearchView({ filters, goals, total, description }:
       </div>
     </div>
   );
-}
+}

src/frontend/styles/components/button.scss

@@ -0,0 +1,19 @@
+@use "../utilities/mixins.scss" as mixin;
+
+$goals-gray: rgba(202, 204, 216, 1);
+
+.button-state-styles {
+  @include mixin.button-state-styles;
+}
+
+// Gray bg for disabled buttons
+button,
+.usa-button,
+.usa-button--outline {
+  &:disabled {
+    background-color: $goals-gray;
+  }
+  &:hover:disabled {
+    background-color: $goals-gray;
+  }
+}

src/frontend/styles/components/usa--header.scss

@@ -13,7 +13,12 @@
   border-bottom: 2px transparent solid;
   &:hover,
   &:focus,
+  &:visited,
   &.usa-current {
     border-bottom: 2px #ffffff solid;
   }
 }
+
+header a:visited {
+  color: #fff;
+}

src/frontend/styles/project-styles.scss

@@ -3,6 +3,7 @@
 @import "./components/usa--in-page-nav.scss";
 @import "./components/usa--breadcrumb.scss";
 @import "./components/objective-indicator.scss";
+@import "./components/button.scss";
 
 body {
   background-color: #e6e6e6;