From 60a4f5fdb1c31e2a74f26173db2ecc553c9b9a70 Mon Sep 17 00:00:00 2001 From: Nicholas Blumberg <41446765+nick-next@users.noreply.github.com> Date: Wed, 30 Oct 2024 18:49:17 -0700 Subject: [PATCH] Miscellaneous updates and improvements (#4673) ## Description This PR contains miscellaneous updates and improvements triggered from comments in an earlier PR: [4599](https://github.com/datacommonsorg/website/pull/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 | 10 ++-- static/css/base.scss | 4 ++ static/css/build.scss | 18 +++---- .../build_your_own.scss | 0 .../topics.scss => content/chips.scss} | 10 ++-- .../{components => content}/columns_text.scss | 18 +++++++ .../{components => content}/hero_columns.scss | 0 .../{components => content}/hero_video.scss | 0 .../{components => content}/media_text.scss | 0 .../one_data_commons.scss | 0 .../css/{components => content}/partners.scss | 0 static/css/{components => content}/quote.scss | 0 .../sample_questions.scss | 0 .../{components => content}/simple_text.scss | 0 .../slide_carousel.scss | 0 static/css/{components => content}/tools.scss | 0 static/css/core.scss | 2 +- static/css/homepage.scss | 16 +++---- .../{new_variables.scss => variables.scss} | 0 static/js/apps/base/utilities/utilities.ts | 19 ++++++-- static/js/apps/homepage/app.tsx | 10 +++- .../content/{topics.tsx => link_chips.tsx} | 48 ++++++++++++------- 22 files changed, 103 insertions(+), 52 deletions(-) rename static/css/{components => content}/build_your_own.scss (100%) rename static/css/{components/topics.scss => content/chips.scss} (88%) rename static/css/{components => content}/columns_text.scss (55%) 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%) rename static/css/{new_variables.scss => variables.scss} (100%) rename static/js/components/content/{topics.tsx => link_chips.tsx} (51%) diff --git a/static/css/about.scss b/static/css/about.scss index c22519b71a..6d3a19c4a5 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. @@ -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 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, diff --git a/static/css/build.scss b/static/css/build.scss index a38b590194..6aba4247ed 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. @@ -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 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/topics.scss b/static/css/content/chips.scss similarity index 88% rename from static/css/components/topics.scss rename to static/css/content/chips.scss index 696669b307..e66bb1633f 100644 --- a/static/css/components/topics.scss +++ b/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 { diff --git a/static/css/components/columns_text.scss b/static/css/content/columns_text.scss similarity index 55% rename from static/css/components/columns_text.scss rename to static/css/content/columns_text.scss index 3ee9a71a4b..67a54086a9 100644 --- a/static/css/components/columns_text.scss +++ b/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; 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/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 8d182d960c..64e4aca868 100644 --- a/static/css/homepage.scss +++ b/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 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 diff --git a/static/js/apps/base/utilities/utilities.ts b/static/js/apps/base/utilities/utilities.ts index 4f366cb39e..c9ee36ed95 100644 --- a/static/js/apps/base/utilities/utilities.ts +++ b/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, }; diff --git a/static/js/apps/homepage/app.tsx b/static/js/apps/homepage/app.tsx index db30d2d8d9..f530d30978 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 { 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 ( <> - + 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..39de5cd42e 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,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 ( -
+
); }; - -export default Topics;