From a474ac1a5391b69801ccf0c4a28414bbac56374e Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 16 Oct 2024 17:27:54 -0700 Subject: [PATCH 1/8] Updates to comments and copyright notices. --- static/css/about.scss | 2 +- static/css/build.scss | 2 +- static/css/components/columns_text.scss | 18 ++++++++++++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/static/css/about.scss b/static/css/about.scss index c22519b71a..dc069ae121 100644 --- a/static/css/about.scss +++ b/static/css/about.scss @@ -1,5 +1,5 @@ /** - * Copyright 2023 Google LLC + * Copyright 2024 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/static/css/build.scss b/static/css/build.scss index a38b590194..b504db1fc7 100644 --- a/static/css/build.scss +++ b/static/css/build.scss @@ -1,5 +1,5 @@ /** - * Copyright 2023 Google LLC + * Copyright 2024 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. diff --git a/static/css/components/columns_text.scss b/static/css/components/columns_text.scss index 3ee9a71a4b..67a54086a9 100644 --- a/static/css/components/columns_text.scss +++ b/static/css/components/columns_text.scss @@ -1,3 +1,21 @@ +/** + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Styles for the text column sections */ + .text-columns { .container { display: grid; From 3c0f0b7c2a510644f470d570ce0f5b5681c8ebf3 Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 16 Oct 2024 17:32:02 -0700 Subject: [PATCH 2/8] Conversion of the Topics component into a more generic LinkChips component. There was a comment that the use of a "topic" class in the CSS had potential for clashing. This is fixed, and that triggered the reworking of the component itself to make it more generic. --- .../components/{topics.scss => chips.scss} | 8 ++-- static/css/homepage.scss | 2 +- static/js/apps/homepage/app.tsx | 10 ++++- .../content/{topics.tsx => link_chips.tsx} | 45 ++++++++++++------- 4 files changed, 41 insertions(+), 24 deletions(-) rename static/css/components/{topics.scss => chips.scss} (88%) rename static/js/components/content/{topics.tsx => link_chips.tsx} (51%) diff --git a/static/css/components/topics.scss b/static/css/components/chips.scss similarity index 88% rename from static/css/components/topics.scss rename to static/css/components/chips.scss index 696669b307..3f1eb1f9fb 100644 --- a/static/css/components/topics.scss +++ b/static/css/components/chips.scss @@ -15,15 +15,15 @@ */ /** - * Styles for the topics component located on the home page + * Styles for the LinkChips component and any other component that will display chips in the same way */ -.topics { +.chip-section { h3 { @include var.title_xs; margin-bottom: calc(#{var.$spacing} * 3); } - .topics-container { + .chip-container { margin: 0; padding: 0; display: flex; @@ -34,7 +34,7 @@ max-width: 100%; } } - .topic-item { + .chip-item { display: block; list-style: none; a { diff --git a/static/css/homepage.scss b/static/css/homepage.scss index 8d182d960c..843d9169e4 100644 --- a/static/css/homepage.scss +++ b/static/css/homepage.scss @@ -23,7 +23,7 @@ @import "./components/tools"; @import "./components/partners"; @import "./components/build_your_own"; -@import "./components/topics"; +@import "./components/chips"; @import "./components/slide_carousel"; #homepage { diff --git a/static/js/apps/homepage/app.tsx b/static/js/apps/homepage/app.tsx index db30d2d8d9..abc1c97163 100644 --- a/static/js/apps/homepage/app.tsx +++ b/static/js/apps/homepage/app.tsx @@ -24,10 +24,10 @@ import React, { ReactElement } from "react"; import Build from "../../components/content/build_your_own"; import HeroVideo from "../../components/content/hero_video"; +import LinkChips, { LinkChip } from "../../components/content/link_chips"; import Partners from "../../components/content/partners"; import SampleQuestions from "../../components/content/sample_questions"; import Tools from "../../components/content/tools"; -import Topics from "../../components/content/topics"; import { GA_EVENT_HOMEPAGE_CLICK } from "../../shared/ga_events"; import { Routes } from "../../shared/types/base"; import { @@ -56,10 +56,16 @@ export function App({ sampleQuestions, routes, }: AppProps): ReactElement { + const topicLinkChips: LinkChip[] = topics.map((topic) => ({ + id: topic.id, + title: topic.title, + url: topic.url, + })); + return ( <> - + diff --git a/static/js/components/content/topics.tsx b/static/js/components/content/link_chips.tsx similarity index 51% rename from static/js/components/content/topics.tsx rename to static/js/components/content/link_chips.tsx index 4edb147b35..2cdb0f27ce 100644 --- a/static/js/components/content/topics.tsx +++ b/static/js/components/content/link_chips.tsx @@ -15,7 +15,7 @@ */ /** - * A component that renders the topics section of the home page. + * A component that renders a series of chips that function as links with titles */ import React, { ReactElement } from "react"; @@ -26,33 +26,44 @@ import { GA_PARAM_URL, triggerGAEvent, } from "../../shared/ga_events"; -import { Topic } from "../../shared/types/homepage"; -interface TopicsProps { - //the topics passed from the backend through to the JavaScript via the templates - topics: Topic[]; +//an individual LinkChip comprising the title and url attributes of the chip. +export interface LinkChip { + //a unique identifier for the chip (used for map keys) + id: string; + //the title of the chip - this will be the text of the link + title: string; + //the url of the chip link + url: string; } -const Topics = ({ topics }: TopicsProps): ReactElement => { +interface LinkChipsProps { + //the title of the component, displayed as a header above the chips + title?: string; + //the link + linkChips: LinkChip[]; +} + +const LinkChips = ({ title, linkChips }: LinkChipsProps): ReactElement => { return ( -
+
-

Topics to explore

-
    - {topics.map((topic) => ( -
  • + {title &&

    {title}

    } +
      + {linkChips.map((linkChip) => ( +
    • { triggerGAEvent(GA_EVENT_HOMEPAGE_CLICK, { - [GA_PARAM_ID]: `topic ${topic.id}`, - [GA_PARAM_URL]: topic.browseUrl, + [GA_PARAM_ID]: `topic ${linkChip.id}`, + [GA_PARAM_URL]: linkChip.url, }); - window.location.href = topic.browseUrl; + window.location.href = linkChip.url; }} > arrow_forward - {topic.title} + {linkChip.title}
      • ))} @@ -62,4 +73,4 @@ const Topics = ({ topics }: TopicsProps): ReactElement => { ); }; -export default Topics; +export default LinkChips; From 4322b853528fdb9ff1ecdc27bed59dd596a82bab Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 16 Oct 2024 17:39:41 -0700 Subject: [PATCH 3/8] Converted the "components" directory into a "content" directory, to make it clear that these are specifically for components relating to content (articles, informational pages), as opposed to functional components such as topic explorer tools). --- static/css/about.scss | 6 +++--- static/css/build.scss | 14 +++++++------- .../{components => content}/build_your_own.scss | 0 static/css/{components => content}/chips.scss | 0 .../css/{components => content}/columns_text.scss | 0 .../css/{components => content}/hero_columns.scss | 0 static/css/{components => content}/hero_video.scss | 0 static/css/{components => content}/media_text.scss | 0 .../{components => content}/one_data_commons.scss | 0 static/css/{components => content}/partners.scss | 0 static/css/{components => content}/quote.scss | 0 .../{components => content}/sample_questions.scss | 0 .../css/{components => content}/simple_text.scss | 0 .../{components => content}/slide_carousel.scss | 0 static/css/{components => content}/tools.scss | 0 static/css/homepage.scss | 14 +++++++------- 16 files changed, 17 insertions(+), 17 deletions(-) rename static/css/{components => content}/build_your_own.scss (100%) rename static/css/{components => content}/chips.scss (100%) rename static/css/{components => content}/columns_text.scss (100%) rename static/css/{components => content}/hero_columns.scss (100%) rename static/css/{components => content}/hero_video.scss (100%) rename static/css/{components => content}/media_text.scss (100%) rename static/css/{components => content}/one_data_commons.scss (100%) rename static/css/{components => content}/partners.scss (100%) rename static/css/{components => content}/quote.scss (100%) rename static/css/{components => content}/sample_questions.scss (100%) rename static/css/{components => content}/simple_text.scss (100%) rename static/css/{components => content}/slide_carousel.scss (100%) rename static/css/{components => content}/tools.scss (100%) diff --git a/static/css/about.scss b/static/css/about.scss index dc069ae121..0e3c14041e 100644 --- a/static/css/about.scss +++ b/static/css/about.scss @@ -18,9 +18,9 @@ @use "./new_variables" as var; @import "base"; -@import "./components/media_text"; -@import "./components/columns_text"; -@import "./components/quote"; +@import "./content/media_text"; +@import "./content/columns_text"; +@import "./content/quote"; #about { // General Styles diff --git a/static/css/build.scss b/static/css/build.scss index b504db1fc7..ef993b5fb2 100644 --- a/static/css/build.scss +++ b/static/css/build.scss @@ -18,13 +18,13 @@ @use "./new_variables" as var; @import "base"; -@import "./components/partners"; -@import "./components/hero_columns"; -@import "./components/media_text"; -@import "./components/quote"; -@import "./components/simple_text"; -@import "./components/slide_carousel"; -@import "./components/one_data_commons"; +@import "./content/partners"; +@import "./content/hero_columns"; +@import "./content/media_text"; +@import "./content/quote"; +@import "./content/simple_text"; +@import "./content/slide_carousel"; +@import "./content/one_data_commons"; #build { // General Styles diff --git a/static/css/components/build_your_own.scss b/static/css/content/build_your_own.scss similarity index 100% rename from static/css/components/build_your_own.scss rename to static/css/content/build_your_own.scss diff --git a/static/css/components/chips.scss b/static/css/content/chips.scss similarity index 100% rename from static/css/components/chips.scss rename to static/css/content/chips.scss diff --git a/static/css/components/columns_text.scss b/static/css/content/columns_text.scss similarity index 100% rename from static/css/components/columns_text.scss rename to static/css/content/columns_text.scss diff --git a/static/css/components/hero_columns.scss b/static/css/content/hero_columns.scss similarity index 100% rename from static/css/components/hero_columns.scss rename to static/css/content/hero_columns.scss diff --git a/static/css/components/hero_video.scss b/static/css/content/hero_video.scss similarity index 100% rename from static/css/components/hero_video.scss rename to static/css/content/hero_video.scss diff --git a/static/css/components/media_text.scss b/static/css/content/media_text.scss similarity index 100% rename from static/css/components/media_text.scss rename to static/css/content/media_text.scss diff --git a/static/css/components/one_data_commons.scss b/static/css/content/one_data_commons.scss similarity index 100% rename from static/css/components/one_data_commons.scss rename to static/css/content/one_data_commons.scss diff --git a/static/css/components/partners.scss b/static/css/content/partners.scss similarity index 100% rename from static/css/components/partners.scss rename to static/css/content/partners.scss diff --git a/static/css/components/quote.scss b/static/css/content/quote.scss similarity index 100% rename from static/css/components/quote.scss rename to static/css/content/quote.scss diff --git a/static/css/components/sample_questions.scss b/static/css/content/sample_questions.scss similarity index 100% rename from static/css/components/sample_questions.scss rename to static/css/content/sample_questions.scss diff --git a/static/css/components/simple_text.scss b/static/css/content/simple_text.scss similarity index 100% rename from static/css/components/simple_text.scss rename to static/css/content/simple_text.scss diff --git a/static/css/components/slide_carousel.scss b/static/css/content/slide_carousel.scss similarity index 100% rename from static/css/components/slide_carousel.scss rename to static/css/content/slide_carousel.scss diff --git a/static/css/components/tools.scss b/static/css/content/tools.scss similarity index 100% rename from static/css/components/tools.scss rename to static/css/content/tools.scss diff --git a/static/css/homepage.scss b/static/css/homepage.scss index 843d9169e4..090814438d 100644 --- a/static/css/homepage.scss +++ b/static/css/homepage.scss @@ -18,13 +18,13 @@ @use "./new_variables" as var; @import "base"; -@import "./components/hero_video"; -@import "./components/sample_questions"; -@import "./components/tools"; -@import "./components/partners"; -@import "./components/build_your_own"; -@import "./components/chips"; -@import "./components/slide_carousel"; +@import "./content/hero_video"; +@import "./content/sample_questions"; +@import "./content/tools"; +@import "./content/partners"; +@import "./content/build_your_own"; +@import "./content/chips"; +@import "./content/slide_carousel"; #homepage { // General Styles From c6096faae447966f735e00b4e80e00c7987e39ca Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 16 Oct 2024 17:43:15 -0700 Subject: [PATCH 4/8] Renamed variable import file. --- static/css/about.scss | 2 +- static/css/build.scss | 2 +- static/css/core.scss | 2 +- static/css/homepage.scss | 2 +- static/css/{new_variables.scss => variables.scss} | 0 5 files changed, 4 insertions(+), 4 deletions(-) rename static/css/{new_variables.scss => variables.scss} (100%) diff --git a/static/css/about.scss b/static/css/about.scss index 0e3c14041e..6d3a19c4a5 100644 --- a/static/css/about.scss +++ b/static/css/about.scss @@ -16,7 +16,7 @@ /* Styles for the about page */ -@use "./new_variables" as var; +@use "./variables" as var; @import "base"; @import "./content/media_text"; @import "./content/columns_text"; diff --git a/static/css/build.scss b/static/css/build.scss index ef993b5fb2..6aba4247ed 100644 --- a/static/css/build.scss +++ b/static/css/build.scss @@ -16,7 +16,7 @@ /* Styles for the build page */ -@use "./new_variables" as var; +@use "./variables" as var; @import "base"; @import "./content/partners"; @import "./content/hero_columns"; diff --git a/static/css/core.scss b/static/css/core.scss index 933e004f11..15b2223c9e 100644 --- a/static/css/core.scss +++ b/static/css/core.scss @@ -16,7 +16,7 @@ /* Styles for the header reflected in version 2 of the homepage */ -@use "./new_variables" as var; +@use "./variables" as var; @import "base"; $header-desktop-height: 96px; diff --git a/static/css/homepage.scss b/static/css/homepage.scss index 090814438d..64e4aca868 100644 --- a/static/css/homepage.scss +++ b/static/css/homepage.scss @@ -16,7 +16,7 @@ /* Styles for the homepage */ -@use "./new_variables" as var; +@use "./variables" as var; @import "base"; @import "./content/hero_video"; @import "./content/sample_questions"; diff --git a/static/css/new_variables.scss b/static/css/variables.scss similarity index 100% rename from static/css/new_variables.scss rename to static/css/variables.scss From c40bd3116eb685b89adfdd3a2b2599ff49a699e1 Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 16 Oct 2024 18:32:47 -0700 Subject: [PATCH 5/8] Standardized the TS breakpoint object to defaults, and annotated with a more thorough note. --- static/js/apps/base/utilities/utilities.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/static/js/apps/base/utilities/utilities.ts b/static/js/apps/base/utilities/utilities.ts index 4f366cb39e..a44ecbe823 100644 --- a/static/js/apps/base/utilities/utilities.ts +++ b/static/js/apps/base/utilities/utilities.ts @@ -140,10 +140,16 @@ export const extractLabels = (elementId = "metadata-labels"): Labels => { return labels; }; -//A breakpoints constant object for responsiveness, for access on the TypeScript side. +/* + A breakpoints constant object for responsiveness, for access on the TypeScript side. + These are the default breakpoints for a page that does not have custom breakpoints applied + to it. If a page does not use default breakpoints and those breakpoints are required on + the TypeScript side, a separate breakpoint object should be created. +*/ export const BREAKPOINTS = { - sm: 599, - md: 746, - mdExpanded: 859, - lg: 1440, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, }; From a07db5f3a872b96fbd0c9f79c43643d341dd1366 Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 16 Oct 2024 18:59:25 -0700 Subject: [PATCH 6/8] Update to breakpoints to match the CSS source and added a link to source in the comments. --- static/js/apps/base/utilities/utilities.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/static/js/apps/base/utilities/utilities.ts b/static/js/apps/base/utilities/utilities.ts index a44ecbe823..c9ee36ed95 100644 --- a/static/js/apps/base/utilities/utilities.ts +++ b/static/js/apps/base/utilities/utilities.ts @@ -142,14 +142,17 @@ export const extractLabels = (elementId = "metadata-labels"): Labels => { /* A breakpoints constant object for responsiveness, for access on the TypeScript side. - These are the default breakpoints for a page that does not have custom breakpoints applied - to it. If a page does not use default breakpoints and those breakpoints are required on + These are the default breakpoints for a page that does not have custom breakpoints and are + applied in: `static/css/base.scss` + + If a page does not use default breakpoints and those breakpoints are required on the TypeScript side, a separate breakpoint object should be created. */ export const BREAKPOINTS = { + xs: 0, sm: 576, md: 768, - lg: 992, - xl: 1200, + lg: 1068, + xl: 1350, xxl: 1400, }; From fd357408c6330a2c5f8feb4c0fd4770389728a1c Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 16 Oct 2024 21:42:40 -0700 Subject: [PATCH 7/8] Added a reference from the CSS breakpoint definitions to the TypeScript equivalent. --- static/css/base.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/css/base.scss b/static/css/base.scss index faf68eafb3..3a79adf932 100644 --- a/static/css/base.scss +++ b/static/css/base.scss @@ -36,6 +36,10 @@ $h3-font-size: 1.2rem; $headings-font-weight: 600; +/* + If the grid-breakpoints change, the TypeScript equivalent should be updated: + `static/js/apps/base/utilities/utilities.ts`, `export const BREAKPOINTS` + */ $grid-breakpoints: ( xs: 0, sm: 576px, From e9f98fa27d35f6f30c6db8c64c0f2d12e31573a3 Mon Sep 17 00:00:00 2001 From: Nick B Date: Wed, 23 Oct 2024 19:06:56 -0700 Subject: [PATCH 8/8] Resolution to Codacy analysis findings and fix to link source issue. --- static/css/content/chips.scss | 2 ++ static/js/apps/homepage/app.tsx | 4 ++-- static/js/components/content/link_chips.tsx | 7 ++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/static/css/content/chips.scss b/static/css/content/chips.scss index 3f1eb1f9fb..e66bb1633f 100644 --- a/static/css/content/chips.scss +++ b/static/css/content/chips.scss @@ -23,6 +23,7 @@ @include var.title_xs; margin-bottom: calc(#{var.$spacing} * 3); } + .chip-container { margin: 0; padding: 0; @@ -34,6 +35,7 @@ max-width: 100%; } } + .chip-item { display: block; list-style: none; diff --git a/static/js/apps/homepage/app.tsx b/static/js/apps/homepage/app.tsx index abc1c97163..f530d30978 100644 --- a/static/js/apps/homepage/app.tsx +++ b/static/js/apps/homepage/app.tsx @@ -24,7 +24,7 @@ import React, { ReactElement } from "react"; import Build from "../../components/content/build_your_own"; import HeroVideo from "../../components/content/hero_video"; -import LinkChips, { LinkChip } from "../../components/content/link_chips"; +import { LinkChip, LinkChips } from "../../components/content/link_chips"; import Partners from "../../components/content/partners"; import SampleQuestions from "../../components/content/sample_questions"; import Tools from "../../components/content/tools"; @@ -59,7 +59,7 @@ export function App({ const topicLinkChips: LinkChip[] = topics.map((topic) => ({ id: topic.id, title: topic.title, - url: topic.url, + url: topic.browseUrl, })); return ( diff --git a/static/js/components/content/link_chips.tsx b/static/js/components/content/link_chips.tsx index 2cdb0f27ce..39de5cd42e 100644 --- a/static/js/components/content/link_chips.tsx +++ b/static/js/components/content/link_chips.tsx @@ -44,7 +44,10 @@ interface LinkChipsProps { linkChips: LinkChip[]; } -const LinkChips = ({ title, linkChips }: LinkChipsProps): ReactElement => { +export const LinkChips = ({ + title, + linkChips, +}: LinkChipsProps): ReactElement => { return (
      @@ -72,5 +75,3 @@ const LinkChips = ({ title, linkChips }: LinkChipsProps): ReactElement => {
      ); }; - -export default LinkChips;