From fd153824d68a13e45eb092b03a1fb5c3e104500e Mon Sep 17 00:00:00 2001 From: Iris Ibekwe Date: Mon, 10 Feb 2025 17:12:50 -0500 Subject: [PATCH 1/5] Hover and disabled styles for buttons and links. --- src/frontend/components/button--custom.tsx | 16 ++ src/frontend/components/view--goal-search.tsx | 159 +++++++++--------- src/frontend/styles/components/button.scss | 19 +++ src/frontend/styles/project-styles.scss | 1 + src/frontend/styles/utilities/mixins.scss | 31 ++++ 5 files changed, 148 insertions(+), 78 deletions(-) create mode 100644 src/frontend/components/button--custom.tsx create mode 100644 src/frontend/styles/components/button.scss create mode 100644 src/frontend/styles/utilities/mixins.scss diff --git a/src/frontend/components/button--custom.tsx b/src/frontend/components/button--custom.tsx new file mode 100644 index 00000000..c9371fd0 --- /dev/null +++ b/src/frontend/components/button--custom.tsx @@ -0,0 +1,16 @@ +interface ButtonProps { + text: string; + onClick?: () => void; + className?: string; +} + +const CustomButton = ({ text, onClick, className }: ButtonProps) => ( + +); + +export default CustomButton; diff --git a/src/frontend/components/view--goal-search.tsx b/src/frontend/components/view--goal-search.tsx index ee920e10..1416f56c 100644 --- a/src/frontend/components/view--goal-search.tsx +++ b/src/frontend/components/view--goal-search.tsx @@ -1,11 +1,12 @@ import { useState, FormEvent, useCallback } from "react"; import { Button } from "@trussworks/react-uswds"; -import Masonry, {ResponsiveMasonry} from "react-responsive-masonry" +import Masonry, { ResponsiveMasonry } from "react-responsive-masonry" import { NodeGoalProps, NodePlanProps, ViewFilter } from "lib/types"; 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, @@ -55,7 +56,7 @@ export default function GoalsSearchView({ filters, goals, total, description }: - const masonryBP = filtersOpen ? {350: 1, 750: 2, 1400: 3} : {350: 1, 750: 2, 1060: 3, 1400: 4}; + const masonryBP = filtersOpen ? { 350: 1, 750: 2, 1400: 3 } : { 350: 1, 750: 2, 1060: 3, 1400: 4 }; return (
@@ -63,92 +64,95 @@ export default function GoalsSearchView({ filters, goals, total, description }:

Smart Strategy. Strong Execution.

Data-Driven Updates on America’s Strategic Goals.

-
-
-
- -
- {!filtersOpen && ( -
- -
- )} -
- -
-
-
- - -
-
+
+
+ setFiltersOpen(!filtersOpen)} + className={`search-goals--filter ${filtersOpen ? `button--is-open` : ``}`} + /> +
+
+
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+
+
+ + +
+
+
+
    +
  • + {/* */} + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
-
-
- {displayGoals?.length ? ( - +
+ +
+
+ {displayGoals?.length ? ( + - + {displayGoals.slice(0, offset).map((goal) => ( isNodeGoalProps(goal) ? ( ) : ( ) - ))} - + ))} + ) : ( -
-
-

- No matching goals. -

-
+
+
+

+ No matching goals. +

- )} +
+ )}
{offset < totalResults && @@ -160,9 +164,8 @@ export default function GoalsSearchView({ filters, goals, total, description }: }
-
-
-
-
+
+
+
); } diff --git a/src/frontend/styles/components/button.scss b/src/frontend/styles/components/button.scss new file mode 100644 index 00000000..b4c52040 --- /dev/null +++ b/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; + } +} diff --git a/src/frontend/styles/project-styles.scss b/src/frontend/styles/project-styles.scss index 8b442c0d..11a8701c 100644 --- a/src/frontend/styles/project-styles.scss +++ b/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; diff --git a/src/frontend/styles/utilities/mixins.scss b/src/frontend/styles/utilities/mixins.scss new file mode 100644 index 00000000..36f27ae5 --- /dev/null +++ b/src/frontend/styles/utilities/mixins.scss @@ -0,0 +1,31 @@ +$ink: #1b1b1b; +$goals-gray: rgba( + 202, + 204, + 216, + 1 +); //@todo Consolidate color in a reused sass file. Or figure out how to use USWDS color tokens. +$goalsblue: #223db2; +$goalsblue-dark: #162152; + +@mixin button-state-styles { + &:hover { + background-color: $goals-gray; + border-color: $goals-gray; + border-bottom-width: 1px; + } + + &.button--is-open { + border-color: $ink; // @todo: Update to uswds token 'ink' + } +} + +@mixin link-styles { + &:hover { + text-decoration: underline; + color: $goalsblue-dark; + } + &:visited { + color: $goalsblue; + } +} From e7310ae12bd8decba56ebf48a31ccaed41147526 Mon Sep 17 00:00:00 2001 From: Iris Ibekwe Date: Mon, 10 Feb 2025 17:19:44 -0500 Subject: [PATCH 2/5] Apply hover and disabled button styles to the grid and list icons button on the plan page. --- src/frontend/components/node--plan.tsx | 128 +++++++++++++------------ 1 file changed, 65 insertions(+), 63 deletions(-) diff --git a/src/frontend/components/node--plan.tsx b/src/frontend/components/node--plan.tsx index fdca9162..bebf3f33 100644 --- a/src/frontend/components/node--plan.tsx +++ b/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 ( <> @@ -77,15 +77,15 @@ export function NodePlan({node, storageData, ...props}: NodePlanProps) {
} {node.body && - ( -
-

Description

-
-
- )} + ( +
+

Description

+
+
+ )} {field_file &&
- +

Goals

@@ -107,6 +107,7 @@ export function NodePlan({node, storageData, ...props}: NodePlanProps) {
- + {listView - ? ( -
    - {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( -
  • - + ? ( +
      + {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 ( +
    • + {goal.title} - -
      • - ); - })} -
    - ) - : ( -
    -
      - + + ); + })} +
    + ) + : ( +
    +
      + - - {field_goals.map((goal) => { - return( - -
      -
      -

      {goal.title}

      -
      -
      -
      - {/* + + {field_goals.map((goal) => { + return ( + +
      +
      +

      {goal.title}

      +
      +
      +
      + {/* A placeholder image */} +
      -
      - - ) - })} - - -
    -
    - ) + + ) + })} + + +
+
+ ) }
From ff7250dd1ce2b9c88630db44a3c53c8065049cf0 Mon Sep 17 00:00:00 2001 From: Iris Ibekwe Date: Mon, 10 Feb 2025 17:20:25 -0500 Subject: [PATCH 3/5] Style search results cards and links. --- src/frontend/components/view--goal-search.tsx | 162 +++++++++--------- .../styles/components/usa--header.scss | 5 + src/frontend/styles/style.scss | 36 +++- 3 files changed, 121 insertions(+), 82 deletions(-) diff --git a/src/frontend/components/view--goal-search.tsx b/src/frontend/components/view--goal-search.tsx index 1416f56c..bfd074af 100644 --- a/src/frontend/components/view--goal-search.tsx +++ b/src/frontend/components/view--goal-search.tsx @@ -1,6 +1,6 @@ import { useState, FormEvent, useCallback } from "react"; import { Button } from "@trussworks/react-uswds"; -import Masonry, { ResponsiveMasonry } from "react-responsive-masonry" +import Masonry, {ResponsiveMasonry} from "react-responsive-masonry" import { NodeGoalProps, NodePlanProps, ViewFilter } from "lib/types"; import { NodeGoalCard } from "./node--goal--card"; import { NodePlanCard } from "./node--plan--card"; @@ -56,7 +56,7 @@ export default function GoalsSearchView({ filters, goals, total, description }: - const masonryBP = filtersOpen ? { 350: 1, 750: 2, 1400: 3 } : { 350: 1, 750: 2, 1060: 3, 1400: 4 }; + const masonryBP = filtersOpen ? {350: 1, 750: 2, 1400: 3} : {350: 1, 750: 2, 1060: 3, 1400: 4}; return (
@@ -64,95 +64,94 @@ export default function GoalsSearchView({ filters, goals, total, description }:

Smart Strategy. Strong Execution.

Data-Driven Updates on America’s Strategic Goals.

-
-
- setFiltersOpen(!filtersOpen)} - className={`search-goals--filter ${filtersOpen ? `button--is-open` : ``}`} - /> -
-
- +
+
+
+ +
+ {!filtersOpen && ( +
+ setFiltersOpen(!filtersOpen)} + className={`search-goals--filter ${filtersOpen ? `button--is-open` : ``}`} + /> +
+ )} +
+ +
+
+
+ + +
+
-
-
- - -
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
-
-
-
    -
  • - {/* */} - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
-
- -
-
- {displayGoals?.length ? ( - +
+ {displayGoals?.length ? ( + - + {displayGoals.slice(0, offset).map((goal) => ( isNodeGoalProps(goal) ? ( ) : ( ) - ))} - + ))} + ) : ( -
-
-

- No matching goals. -

+
+
+

+ No matching goals. +

+
-
- )} + )}
{offset < totalResults && @@ -164,8 +163,9 @@ export default function GoalsSearchView({ filters, goals, total, description }: }
-
-
-
+
+
+
+
); -} +} \ No newline at end of file diff --git a/src/frontend/styles/components/usa--header.scss b/src/frontend/styles/components/usa--header.scss index a02337d0..69c2010b 100644 --- a/src/frontend/styles/components/usa--header.scss +++ b/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; +} diff --git a/src/frontend/styles/style.scss b/src/frontend/styles/style.scss index 99b58c2a..6c5df2de 100644 --- a/src/frontend/styles/style.scss +++ b/src/frontend/styles/style.scss @@ -4,10 +4,18 @@ // 2. Load USWDS source code @forward "uswds"; -//// 3. Load custom Sass +// 3. Load extra utility files & helpers. +@use './utilities/mixins.scss' as mixin; + +// 3. Load custom Sass @forward "project-styles.scss"; $goals-gray: rgba(202, 204, 216, 1); +$ink: #1b1b1b; + +a { + @include mixin.link-styles; +} .goal-card { min-width: 360px; @@ -26,6 +34,21 @@ $goals-gray: rgba(202, 204, 216, 1); padding-left: 394px; } +.goal-card .usa-card__container { + border-width: 1px; +} + +.usa-card__footer { + padding-left: 0; + padding-right: 0; + margin-left: 1.5rem; + margin-right: 1.5rem; +} + +.goal-card:hover .usa-card__container { + border-color: $ink; +} + .side-bar { background-color: white; min-height: 100%; @@ -109,13 +132,24 @@ $goals-gray: rgba(202, 204, 216, 1); &--toggle { margin: 0 auto; + + // 30em = mobile-lg breakpoint for USWDS. Source: https://designsystem.digital.gov/utilities/layout-grid/#responsive-variants. + @media (min-width: 40em) { + display: flex; + gap: 4px; + } + > li { display: inline-block; width: auto; } .active { background: white; + &:hover { + background: white; + } } + } } From ff67806569c5c098276d572edd445191afaa11d7 Mon Sep 17 00:00:00 2001 From: Iris Ibekwe Date: Mon, 10 Feb 2025 21:56:36 -0500 Subject: [PATCH 4/5] Narrow the scope of the link styles. --- src/frontend/styles/style.scss | 13 ++++++++++--- src/frontend/styles/utilities/mixins.scss | 6 +----- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/frontend/styles/style.scss b/src/frontend/styles/style.scss index 6c5df2de..78ee1c4b 100644 --- a/src/frontend/styles/style.scss +++ b/src/frontend/styles/style.scss @@ -5,7 +5,7 @@ @forward "uswds"; // 3. Load extra utility files & helpers. -@use './utilities/mixins.scss' as mixin; +@use "./utilities/mixins.scss" as mixin; // 3. Load custom Sass @forward "project-styles.scss"; @@ -14,7 +14,7 @@ $goals-gray: rgba(202, 204, 216, 1); $ink: #1b1b1b; a { - @include mixin.link-styles; + @include mixin.universal-link-styles; } .goal-card { @@ -55,6 +55,14 @@ a { width: 394px; max-width: 394px; padding: 24px; + + a { + color: mixin.$goalsblue-dark; + + &:visited { + color: mixin.$goalsblue; + } + } } .filter-bar { @@ -149,7 +157,6 @@ a { background: white; } } - } } diff --git a/src/frontend/styles/utilities/mixins.scss b/src/frontend/styles/utilities/mixins.scss index 36f27ae5..44c8bab3 100644 --- a/src/frontend/styles/utilities/mixins.scss +++ b/src/frontend/styles/utilities/mixins.scss @@ -20,12 +20,8 @@ $goalsblue-dark: #162152; } } -@mixin link-styles { +@mixin universal-link-styles { &:hover { text-decoration: underline; - color: $goalsblue-dark; - } - &:visited { - color: $goalsblue; } } From 6cd82bdbbf5fb9f9b49e128ebd557e39aefb35e1 Mon Sep 17 00:00:00 2001 From: Iris Ibekwe Date: Mon, 10 Feb 2025 22:12:47 -0500 Subject: [PATCH 5/5] Match search result card footer border with design comps. --- src/frontend/components/node--goal--card.tsx | 2 +- src/frontend/components/node--plan--card.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/components/node--goal--card.tsx b/src/frontend/components/node--goal--card.tsx index 2d8bfa4b..085df651 100644 --- a/src/frontend/components/node--goal--card.tsx +++ b/src/frontend/components/node--goal--card.tsx @@ -40,7 +40,7 @@ export function NodeGoalCard({ goal, ...props }: NodeGoalCardProps) { /> )}
-
+
-
+