Emotion and homepage updates (datacommonsorg#4756)

## Description This PR contains three related updates: ### Homepage redesign The homepage redesign is implemented based on the Homepage Improvements Figma ([link to figma](https://www.figma.com/design/G3D7geGkxHC23lom91oFkE/DC-Homescreen?node-id=701-2802&node-type=frame&t=8C10qesTLIeOxDYI-0)). ### Emotion The core homepage, about page and build page components have been reworked into emotion, with localized styles defined within the component itself. A corresponding emotion theme (which will continue to be expanded on) is provided. ### Component rework In doing the emotion conversion, the components themselves have been significantly refactored and reworked into: * elements: these are small components such as chips, boxes, that can be used either independently or as part of a set within a larger component * content: these are content components that typically represent a block on the page. These include things like hero components, chip sets, brick walls, and other re-usable pieces of content. Note that these components are generic and do not contain page specific content. Page specific content is provided to the components when they are used. * layout: there are two layout components: Section and Separator. Section will wrap a page block and provide the padding and background color of that section (these are adjustable within the block). Separator allows extra padding to be added to the page in fixed amounts, with an optional border. The page content itself will always be located within that page’s `app` directory. So all about page content is located in `static/js/apps/about/components`. These app-specific components make use of the generic content components and providing them with the actual content. ### Merging Note Once the changes are approved we will apply updates to the relevant webdriver tests. --------- Co-authored-by: Pablo Noel <[email protected]>
gmechali · Dec 11, 2024 · 1e5d1d2 · 1e5d1d2
1 parent dfe8688
commit 1e5d1d2
Show file tree

Hide file tree

Showing 72 changed files with 4,130 additions and 1,195 deletions.
diff --git a/server/config/home_page/partners.json b/server/config/home_page/partners.json
@@ -1,4 +1,10 @@
 [
+  {
+    "id": "unSdg",
+    "title": "United Nations Sustainable Development Goals",
+    "sprite-index": 5,
+    "url": "https://unstats.un.org/UNSDWebsite/undatacommons/sdgs"
+  },
   {
     "id": "techsoup",
     "title": "TechSoup",
@@ -28,11 +34,5 @@
     "title": "Stanford University",
     "sprite-index": 4,
     "url": "https://datacommons.stanford.edu"
-  },
-  {
-    "id": "unSdg",
-    "title": "United Nations Sustainable Development Goals",
-    "sprite-index": 5,
-    "url": "https://unstats.un.org/UNSDWebsite/undatacommons/sdgs"
   }
 ]
diff --git a/server/webdriver/shared_tests/browser_test.py b/server/webdriver/shared_tests/browser_test.py
@@ -44,16 +44,17 @@ def test_page_landing(self):
     self.assertIn(title_text, self.driver.title)
 
     # Wait for title to be present
-    title_locator = (By.CSS_SELECTOR, '#kg-title')
+    title_locator = (By.TAG_NAME, 'h1')
     WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
         EC.text_to_be_present_in_element(title_locator, 'Knowledge Graph'))
     title_element = self.driver.find_element(*title_locator)
-    self.assertEqual("Knowledge Graph", title_element.text)
+    self.assertEqual(
+        "Knowledge Graph", title_element.text,
+        f"Expected title 'Knowledge Graph', but found: {title_element.text}")
 
     # Assert intro is correct
-    description_locator = (By.CSS_SELECTOR, '#kg-desc')
-    WebDriverWait(self.driver, self.TIMEOUT_SEC).until(
-        EC.presence_of_element_located(description_locator))
+    description_locator = (
+        By.XPATH, "//h1[text()='Knowledge Graph']/following-sibling::p")
     description_element = self.driver.find_element(*description_locator)
     expected_description_start = 'The Data Commons Knowledge Graph is constructed'
     self.assertTrue(

diff --git a/server/webdriver/tests/homepage_test.py b/server/webdriver/tests/homepage_test.py
@@ -35,7 +35,8 @@ def test_homepage_en_by_css(self):
     hero_msg = self.driver.find_elements(By.ID, 'hero')[0]
     self.assertTrue(
         hero_msg.text.startswith(
-            'Data Commons aggregates and harmonizes global, open data'))
+            'Data Commons brings together the world\'s public data, harmonized for your exploration'
+        ))
 
   def test_homepage_it(self):
     """Test homepage in IT."""
@@ -49,7 +50,8 @@ def test_homepage_it(self):
     hero_msg = self.driver.find_elements(By.ID, 'hero')[0]
     self.assertTrue(
         hero_msg.text.startswith(
-            'Data Commons aggregates and harmonizes global, open data'))
+            'Data Commons brings together the world\'s public data, harmonized for your exploration'
+        ))
 
   # def test_hero_all_langs(self):
   #   """Test hero message translation in *all* languages.

diff --git a/static/css/about.scss b/static/css/about.scss
@@ -18,7 +18,6 @@
 
 @use "./variables" as var;
 @import "base";
-@import "./content/media_text";
 @import "./content/columns_text";
 @import "./content/quote";
 

diff --git a/static/css/build.scss b/static/css/build.scss
@@ -20,7 +20,6 @@
 @import "base";
 @import "./content/partners";
 @import "./content/hero_columns";
-@import "./content/media_text";
 @import "./content/quote";
 @import "./content/simple_text";
 @import "./content/slide_carousel";

diff --git a/static/css/content/hero_video.scss b/static/css/content/hero_video.scss
@@ -63,4 +63,4 @@
       @include var.text_lg;
     }
   }
-}
+}
diff --git a/static/css/content/media_text.scss b/static/css/content/media_text.scss
@@ -62,4 +62,3 @@
       @include var.text_md;
     }
   }
-}
diff --git a/static/css/content/tools.scss b/static/css/content/tools.scss
@@ -90,4 +90,4 @@
       background-image: url('/images/icons/icon-scaterplot.svg')
     }
   }
-}
+}
diff --git a/static/css/homepage.scss b/static/css/homepage.scss
@@ -19,12 +19,6 @@
 @use "./variables" as var;
 @import "base";
 @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
@@ -38,4 +32,4 @@
       padding: var.$container-horizontal-padding calc(#{var.$spacing} * 3);
     }
   }
-}
+}
diff --git a/static/css/variables.scss b/static/css/variables.scss
@@ -169,7 +169,7 @@ $color-gray_pill_bckg:#E2E2EC;
     bottom: 0;
     left: 0;
     -webkit-mask-image: -webkit-radial-gradient(white, black);
-    mask-image: -webkit-radial-gradient(white, black);
+    mask-image: radial-gradient(white, black);
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     backface-visibility: hidden;

diff --git a/static/images/icons/icon-api.svg b/static/images/icons/icon-api.svg
diff --git a/static/images/icons/icon-download.svg b/static/images/icons/icon-download.svg
diff --git a/static/images/icons/icon-map.svg b/static/images/icons/icon-map.svg
diff --git a/static/images/icons/icon-scaterplot.svg b/static/images/icons/icon-scaterplot.svg
diff --git a/static/images/icons/icon-timeline.svg b/static/images/icons/icon-timeline.svg
diff --git a/static/js/apps/about/app.tsx b/static/js/apps/about/app.tsx
@@ -18,11 +18,17 @@
  * Main component for the about your own Data Commons page
  */
 
+import { ThemeProvider } from "@emotion/react";
 import React, { ReactElement } from "react";
 
-import MediaText from "../../components/content/media_text";
-import Quote from "../../components/content/quote";
+import { Section } from "../../components/elements/layout/section";
 import { Routes } from "../../shared/types/base";
+import theme from "../../theme/theme";
+import { Collaborations } from "./components/collaborations";
+import { SplashQuote } from "./components/splash_quote";
+import { StayInTouch } from "./components/stay_in_touch";
+import { WhoCanUse } from "./components/who_can_use";
+import { WhyDataCommons } from "./components/why_data_commons";
 
 interface AppProps {
   //the routes dictionary - this is used to convert routes to resolved urls
@@ -35,139 +41,26 @@ interface AppProps {
 
 export function App({ routes }: AppProps): ReactElement {
   return (
-    <>
-      <section className="blue big">
-        <Quote
-          quote="Every moment around the world people and organizations are generating data that can be extraordinarily useful and I think we have to find the way to harness that to solve problems.
-The challenge is that a lot of this data is very fragmented."
-          byline="James Manyika, Senior  Vice President, Research, Technology & Society at Google"
-        />
-      </section>
-      <section className="text-columns">
-        <div className="container">
-          <header className="header">
-            <h3>Why Data Commons</h3>
-          </header>
-          <div className="col_left">
-            <p>
-              Many of the big challenges we face — climate change, increasing
-              inequities, epidemics of diabetes and other health conditions —
-              will need deep insights to solve. These insights will need to be
-              firmly grounded in data. Fortunately, a lot of this data is
-              already publicly available. Unfortunately, there is a difference
-              between data being public and data being easily usable by those
-              who need access to it. It is this gap that we are trying to
-              bridge. Google has organized and made easily accessible many kinds
-              of information — web pages, images, maps, videos and so on. Now we
-              are doing this for publicly available data. We have organized the
-              core of this data from a wide range of sources, ranging from
-              governmental statistical organizations like census bureaus to
-              organizations like the World Bank and the United Nations. And
-              recent advances in AI have enabled us to go much farther than we
-              had thought possible in making this data easily accessible - now
-              you can use natural language to access the data.{" "}
-            </p>
-          </div>
-          <div className="col_right">
-            <p>
-              Data Commons synthesizes a single graph from these different data
-              sources. It links references to the same entities (such as cities,
-              counties, organizations, etc.) across different datasets to nodes
-              on the graph, so that users can access data about a particular
-              entity aggregated from different sources without data cleaning or
-              joining.{" "}
-            </p>
-            <p>
-              <strong>
-                We hope the data contained within Data Commons will be useful to
-                students, researchers, and enthusiasts across different
-                disciplines.
-              </strong>
-            </p>
-          </div>
-        </div>
-      </section>
+    <ThemeProvider theme={theme}>
+      <Section colorVariant="light" variant="large">
+        <SplashQuote />
+      </Section>
 
-      <MediaText
-        title="Who can use it"
-        mediaType="video"
-        mediaSource="O6iVsS-RDYI"
-      >
-        <>
-          <p>
-            {" "}
-            Data Commons can be accessed by anyone here at Datacommons.org.
-            Students, researchers, journalists, non profits, policymakers, and
-            private enterprises can access the tools and allow them to
-            manipulate and make decisions based on data without the need to know
-            how to code. Software developers can use the REST, Python and Google
-            Sheets APIs, all of which are free for educational, academic and
-            journalistic research purposes.{" "}
-          </p>
-        </>
-      </MediaText>
+      <Section>
+        <WhyDataCommons />
+      </Section>
 
-      <section className="text-columns">
-        <div className="container">
-          <header className="header">
-            <h3>Collaborations</h3>
-          </header>
-          <div className="col_left">
-            <p>
-              Data Commons has benefited greatly from many collaborations. In
-              addition to help from US Department of Commerce (notably the
-              Census Bureau), we have received help from our many academic
-              collaborations, including, University of California San Francisco,
-              Stanford University, University of California Berkeley, Harvard
-              University and Indian Institute of Technology Madras. We have also
-              collaborated with nonprofits such as Techsoup, Feeding America,
-              and Resources for the Future.
-            </p>
-          </div>
-          <div className="col_right">
-            <p>
-              We are looking for more collaborators, both for adding new data to
-              Data Commons and for building new and interesting applications of
-              Data Commons. Please fill out this form if you are interested in
-              working with us.
-            </p>
-          </div>
-        </div>
-      </section>
+      <Section>
+        <WhoCanUse routes={routes} />
+      </Section>
 
-      <section className="text-columns no-header">
-        <div className="container">
-          <div className="col_left">
-            <h3>Stay in touch</h3>
-            <p>
-              Stay informed about the latest Data Commons developments: visit
-              our blog or sign up for our mailing list
-            </p>
-            <a
-              href="https://groups.google.com/g/datacommons-announce"
-              className="btn btn-primary"
-            >
-              Join the mailing list
-            </a>
-          </div>
-          <div className="col_right">
-            <h3>See Also</h3>
-            <ul>
-              <li>
-                <a href="https://docs.datacommons.org/datasets/">
-                  Data Sources
-                </a>
-              </li>
-              <li>
-                <a href={routes["static.faq"]}>Frequently Asked Questions</a>
-              </li>
-              <li>
-                <a href="https://blog.datacommons.org/">Blog</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </section>
-    </>
+      <Section>
+        <Collaborations />
+      </Section>
+
+      <Section>
+        <StayInTouch routes={routes} />
+      </Section>
+    </ThemeProvider>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,4 +63,4 @@ @@
           @include var.text_lg;
         }
       }
-    }
+    }