Miscellaneous updates and improvements (#4673)

## Description

This PR contains miscellaneous updates and improvements triggered from
comments in an earlier PR:
[4599](#4599)

It contains the following updates:
* The TypeScript breakpoint object is standardized to defaults, and
comments now reference the TypeScript and SCSS version so that they can
be kept in sync with further changes.
* The `Topics` component has been generalized into a `LinkChips`
component, making it a more reusable content component. This update was
triggered by the request to change the CSS class from "topics" (which
was also done along with this larger change). We can generalize other
content components in later PRs.
* The directory for the SCSS files relating to content components is now
renamed to make that structure more clear.
* Updates to comments, copyright notices and the variable import file
name.

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.
@@ -16,11 +16,11 @@
 
 /* Styles for the about page */
 
-@use "./new_variables" as var;
+@use "./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

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,

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.
@@ -16,15 +16,15 @@
 
 /* Styles for the build page */
 
-@use "./new_variables" as var;
+@use "./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

static/css/components/topics.scss → static/css/content/chips.scss

@@ -15,15 +15,16 @@
  */
 
 /**
- * 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 +35,8 @@
       max-width: 100%;
     }
   }
-  .topic-item {
+
+  .chip-item {
     display: block;
     list-style: none;
     a {

static/css/components/columns_text.scss → static/css/content/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;

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;

static/css/homepage.scss

@@ -16,15 +16,15 @@
 
 /* Styles for the homepage */
 
-@use "./new_variables" as var;
+@use "./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/topics";
-@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

static/js/apps/base/utilities/utilities.ts

@@ -140,10 +140,19 @@ 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 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 = {
-  sm: 599,
-  md: 746,
-  mdExpanded: 859,
-  lg: 1440,
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 1068,
+  xl: 1350,
+  xxl: 1400,
 };

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 { 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";
-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.browseUrl,
+  }));
+
   return (
     <>
       <HeroVideo routes={routes} />
-      <Topics topics={topics} />
+      <LinkChips title={"Topics to explore"} linkChips={topicLinkChips} />
       <SampleQuestions sampleQuestions={sampleQuestions} />
       <Tools routes={routes} />
       <Build routes={routes} />

static/js/components/content/topics.tsx → 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,47 @@ 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[];
+}
+
+export const LinkChips = ({
+  title,
+  linkChips,
+}: LinkChipsProps): ReactElement => {
   return (
-    <section id="topics" className="topics">
+    <section id="chip-section" className="chip-section">
       <div className="container">
-        <h3>Topics to explore</h3>
-        <ul className="topics-container">
-          {topics.map((topic) => (
-            <li key={topic.id} className="topic-item">
+        {title && <h3>{title}</h3>}
+        <ul className="chip-container">
+          {linkChips.map((linkChip) => (
+            <li key={linkChip.id} className="chip-item">
               <a
-                href={topic.browseUrl}
+                href={linkChip.url}
                 onClick={(): void => {
                   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;
                 }}
               >
                 <span className="material-icons-outlined">arrow_forward</span>
-                {topic.title}
+                {linkChip.title}
               </a>
             </li>
           ))}
@@ -61,5 +75,3 @@ const Topics = ({ topics }: TopicsProps): ReactElement => {
     </section>
   );
 };
-
-export default Topics;