Miscellaneous updates and improvements

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;