From 54fc914a0980ab058be1394d4cca02d22de20eef Mon Sep 17 00:00:00 2001 From: Michael Levin Date: Tue, 19 Nov 2024 16:54:41 -0500 Subject: [PATCH] [Feature] Add cards to dashboard layout --- _includes/dashboard_content.html | 2 +- ga4-data/live/realtime-event-counts.json | 180 ++++ ga4-data/live/realtime.json | 16 +- .../realtime-event-counts.json | 25 + .../trade-development-agency/realtime.json | 23 + js/components/card/Card.js | 22 + js/components/card/CardContent.js | 22 + js/components/card/CardGroup.js | 22 + .../dashboard_content/DashboardContent.js | 176 ++-- .../LocationsAndLanguages.js | 49 +- .../dashboard_content/SidebarContent.js | 208 +++-- .../dashboard_content/TopCitiesRealtime.js | 2 +- .../dashboard_content/TopCountriesRealtime.js | 6 +- .../TopDownloadsAndVideoPlays.js | 6 +- .../TopLanguagesHistorical.js | 2 +- .../LocationsAndLanguages.spec.js.snap | 135 +-- .../__snapshots__/SidebarContent.spec.js.snap | 878 +++++++++--------- .../TopCitiesRealtime.spec.js.snap | 6 +- .../TopCountriesRealtime.spec.js.snap | 48 +- .../TopDownloadsAndVideoPlays.spec.js.snap | 50 +- .../TopLanguagesHistorical.spec.js.snap | 6 +- .../data_visualization/RealtimeEventCount.js | 77 ++ .../data_visualization/RealtimeMetricCount.js | 69 ++ sass/_global.scss | 4 + sass/_text-theme.scss | 8 +- sass/_uswds-overrides.scss | 19 + sass/elements/_text.scss | 17 + sass/pages/root/_main-data.scss | 4 +- sass/pages/root/_secondary-data.scss | 42 +- 29 files changed, 1361 insertions(+), 763 deletions(-) create mode 100644 ga4-data/live/realtime-event-counts.json create mode 100644 ga4-data/trade-development-agency/realtime-event-counts.json create mode 100644 ga4-data/trade-development-agency/realtime.json create mode 100644 js/components/card/Card.js create mode 100644 js/components/card/CardContent.js create mode 100644 js/components/card/CardGroup.js create mode 100644 js/components/data_visualization/RealtimeEventCount.js create mode 100644 js/components/data_visualization/RealtimeMetricCount.js diff --git a/_includes/dashboard_content.html b/_includes/dashboard_content.html index 9e7faf02..bf5a71ea 100755 --- a/_includes/dashboard_content.html +++ b/_includes/dashboard_content.html @@ -8,7 +8,7 @@ -->
{children}; +} + +Card.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, +}; + +export default Card; diff --git a/js/components/card/CardContent.js b/js/components/card/CardContent.js new file mode 100644 index 00000000..d87ab6c6 --- /dev/null +++ b/js/components/card/CardContent.js @@ -0,0 +1,22 @@ +import React from "react"; +import PropTypes from "prop-types"; + +/** + * Wrapper react component which creates a USWDS card container component. + * + * @param {object} props the properties for the component. + * @param {import('react').ReactNode} props.children the wrapped elements. + * @param {string} props.className the class names to append to the rendered + * element. + * @returns {import('react').ReactElement} The rendered element + */ +function CardContent({ children, className = "" }) { + return
{children}
; +} + +CardContent.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, +}; + +export default CardContent; diff --git a/js/components/card/CardGroup.js b/js/components/card/CardGroup.js new file mode 100644 index 00000000..106b264c --- /dev/null +++ b/js/components/card/CardGroup.js @@ -0,0 +1,22 @@ +import React from "react"; +import PropTypes from "prop-types"; + +/** + * Wrapper react component which creates a USWDS card group component. + * + * @param {object} props the properties for the component. + * @param {import('react').ReactNode} props.children the wrapped elements. + * @param {string} props.className the class names to append to the rendered + * element. + * @returns {import('react').ReactElement} The rendered element + */ +function CardGroup({ children, className = "" }) { + return ; +} + +CardGroup.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, +}; + +export default CardGroup; diff --git a/js/components/dashboard_content/DashboardContent.js b/js/components/dashboard_content/DashboardContent.js index 6a08476b..07b5f66f 100644 --- a/js/components/dashboard_content/DashboardContent.js +++ b/js/components/dashboard_content/DashboardContent.js @@ -5,11 +5,15 @@ import Config from "../../lib/config"; import DeviceDemographics from "./DeviceDemographics"; import Engagement from "./Engagement"; import LocationsAndLanguages from "./LocationsAndLanguages"; -import RealtimeVisitors from "./RealtimeVisitors"; import Sessions30Days from "./Sessions30Days"; import SidebarContent from "./SidebarContent"; import TrafficSources from "./TrafficSources"; import Visitors30Days from "./Visitors30Days"; +import Card from "../card/Card"; +import CardContent from "../card/CardContent"; +import CardGroup from "../card/CardGroup"; +import RealtimeMetricCount from "../data_visualization/RealtimeMetricCount"; +import RealtimeEventCount from "../data_visualization/RealtimeEventCount"; /** * Contains charts and other data visualizations for the main page of the site. @@ -34,63 +38,131 @@ function DashboardContent({ dataURL, dataPrefix, agency }) { return ( <> -
-
- -
+
+
+

+ {agency} Website and App Analytics +

+
+
+ + + +
+

Total Users

+

+ +

+

in the last 30 minutes

+
+ + + + +
+

First Time Users

+

+ +

+

in the last 30 minutes

+
+ + + + +
+

Total Views

+

+ +

+

in the last 30 minutes

+
+ + + + +
+

Files Downloaded

+

+ +

+

in the last 30 minutes

+
+ + + + + + +
+
+ +
-
- -
+
+
+ 30 Day Historical Data and Trends +
+
-
-
- 30 Day Historical Data and Trends -
-
+
+ +
-
- -
+
+
+ +
+
-
-
- -
-
+
+
+ +
+
-
-
- -
-
+ - - - -
- -
- -
+ + + + + + + + + + ); } diff --git a/js/components/dashboard_content/LocationsAndLanguages.js b/js/components/dashboard_content/LocationsAndLanguages.js index 7df72b82..3225802b 100644 --- a/js/components/dashboard_content/LocationsAndLanguages.js +++ b/js/components/dashboard_content/LocationsAndLanguages.js @@ -5,6 +5,9 @@ import Config from "../../lib/config"; import TopCitiesRealtime from "./TopCitiesRealtime"; import TopCountriesRealtime from "./TopCountriesRealtime"; import TopLanguagesHistorical from "./TopLanguagesHistorical"; +import CardGroup from "../card/CardGroup"; +import Card from "../card/Card"; +import CardContent from "../card/CardContent"; /** * Contains charts and other data visualizations for the user locations and @@ -26,29 +29,29 @@ function LocationsAndLanguages({ dataHrefBase }) { User Locations and Languages in the Last 30 Minutes - -
-
- -
- -
- -
- -
- -
-
+ + + + + + + + + + + + + + + + + ); } diff --git a/js/components/dashboard_content/SidebarContent.js b/js/components/dashboard_content/SidebarContent.js index ed37ec04..dfe42d2d 100644 --- a/js/components/dashboard_content/SidebarContent.js +++ b/js/components/dashboard_content/SidebarContent.js @@ -33,116 +33,118 @@ function SidebarContent({ dataHrefBase, agency }) { const numberOfTopPagesToDisplay = 30; return ( -
-
-

- - Top {numberOfTopPagesToDisplay} Web Pages and App Screens - -

-
- - - - - - - - - - - - +
+
+ + + + + + + + + + + + + - -
-

- Users on a{" "} - single, specific page or app screen in the last - 30 minutes. Hostnames are not currently reported in real-time, so - only page title and screen name information is available. -

- +
+

+ Users on a{" "} + single, specific page or app screen in the last + 30 minutes. Hostnames are not currently reported in real-time, + so only page title and screen name information is available. +

+ +
+ -
- - - -
-

- Sessions over the last week on hostnames, - including traffic to all web pages and app screens within that - hostname. -

- + +
+

+ Sessions over the last week on hostnames, + including traffic to all web pages and app screens within that + hostname. +

+ +
+ -
- - - -
-

- Sessions over the last month on hostnames, - including traffic to all web pages and app screens within that - hostname.{" "} - - Download the full dataset - - . -

- + +
+

+ Sessions over the last month on hostnames, + including traffic to all web pages and app screens within that + hostname.{" "} + + Download the full dataset + + . +

+ +
+ -
- - - -
+ + +
+ ); } diff --git a/js/components/dashboard_content/TopCitiesRealtime.js b/js/components/dashboard_content/TopCitiesRealtime.js index 654590f5..05c1070b 100644 --- a/js/components/dashboard_content/TopCitiesRealtime.js +++ b/js/components/dashboard_content/TopCitiesRealtime.js @@ -64,7 +64,7 @@ function TopCitiesRealtime({ dataHrefBase, refreshSeconds }) { Cities
-
+
); diff --git a/js/components/dashboard_content/TopCountriesRealtime.js b/js/components/dashboard_content/TopCountriesRealtime.js index 8c0dd721..3221ee45 100644 --- a/js/components/dashboard_content/TopCountriesRealtime.js +++ b/js/components/dashboard_content/TopCountriesRealtime.js @@ -145,12 +145,12 @@ function TopCountriesRealtime({ dataHrefBase, refreshSeconds }) { }, [countryData, chartsLoaded]); return ( -
-
+
+
-
+
-
+
-

+

Top file downloads {timeIntervalDescription} on {agency} hostnames. @@ -92,7 +92,7 @@ function TopDownloadsAndVideoPlays({ : `Top Video Plays ${timeIntervalHeader}`}

-

+

{__shouldDisplayVideoPlays() ? `Top videos played ${timeIntervalDescription} on ${agency} hostnames.` diff --git a/js/components/dashboard_content/TopLanguagesHistorical.js b/js/components/dashboard_content/TopLanguagesHistorical.js index 5b2a27a7..81d28ff4 100644 --- a/js/components/dashboard_content/TopLanguagesHistorical.js +++ b/js/components/dashboard_content/TopLanguagesHistorical.js @@ -73,7 +73,7 @@ function TopLanguagesHistorical({ dataHrefBase }) { Languages

-
+
); diff --git a/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap index dee29ece..c068ab0e 100644 --- a/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap +++ b/js/components/dashboard_content/__tests__/__snapshots__/LocationsAndLanguages.spec.js.snap @@ -11,90 +11,101 @@ exports[`LocationsAndLanguages renders 1`] = ` User Locations and Languages in the Last 30 Minutes
-
-
- - Cities - -
-
-
-
-
-
- -
-
+
  • - - Languages - +
    + + Countries + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • -
    +
  • +
    -
    • -
    - + class="chart__title" + > + + Languages + + +
    +
    +
    + + + `; diff --git a/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap index dc478df0..56f2ed86 100644 --- a/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap +++ b/js/components/dashboard_content/__tests__/__snapshots__/SidebarContent.spec.js.snap @@ -2,487 +2,517 @@ exports[`SidebarContent when 7 days tab is selected renders a component with top pages for 7 days, and top downloads for 7 days 1`] = ` - +
    +

    + Top Video Plays Last 7 Days +

    +
    +

    + + Video play data is unavailable for Department of Interior hostnames. + +

    +
    + +
    +
    -
    -
    - + +     `; exports[`SidebarContent when 30 days tab is selected renders a component with top pages for 30 days, and top downloads for 30 days 1`] = ` - +
    +

    + Top Video Plays Last 30 Days +

    +
    +

    + + Video play data is unavailable for Department of Interior hostnames. + +

    +
    + +
    - - + +     `; exports[`SidebarContent when 30 minutes tab is selected renders a component with top pages realtime, and top downloads yesterday 1`] = ` - +
    +

    + Top Video Plays Yesterday +

    +
    +

    + + Video play data is unavailable for Department of Interior hostnames. + +

    +
    + +
    +
    +
    -
    -
    -
    - + +
    `; diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap index a082025d..cdf35c1b 100644 --- a/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap +++ b/js/components/dashboard_content/__tests__/__snapshots__/TopCitiesRealtime.spec.js.snap @@ -15,7 +15,7 @@ exports[`TopCitiesRealtime when data is loaded renders a component with data loa id="chart_top-cities-realtime" >
    @@ -292,7 +292,7 @@ exports[`TopCitiesRealtime when data loading has an error renders a component in id="chart_top-cities-realtime" >
    diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap index 569f4660..2d59ae0f 100644 --- a/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap +++ b/js/components/dashboard_content/__tests__/__snapshots__/TopCountriesRealtime.spec.js.snap @@ -2,9 +2,11 @@ exports[`TopCountriesRealtime when data is loaded and a country with name "" exists renders a component with data loaded 1`] = ` -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    2 results renders a component with data loaded 1`] = `
    -

    +

    Top file downloads over the last week on NASA hostnames. @@ -730,7 +732,9 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has > Top 10 Video Plays Last Week

    -

    +

    Top videos played over the last week on NASA hostnames. @@ -990,7 +994,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has > exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2 results renders a component with data loaded 1`] = `

    -

    +

    Top file downloads over the last week on NASA hostnames. @@ -2407,7 +2413,9 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2 Top Video Plays Last Week

    -

    +

    Video play data is unavailable for NASA hostnames. @@ -2420,7 +2428,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data has 2 exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is empty renders a component with data loaded 1`] = `

    -

    +

    Top file downloads over the last week on NASA hostnames. @@ -3837,7 +3847,9 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em Top Video Plays Last Week

    -

    +

    Video play data is unavailable for NASA hostnames. @@ -3850,7 +3862,7 @@ exports[`TopDownloadsAndVideoPlays when data is loaded and video play data is em exports[`TopDownloadsAndVideoPlays when data is not loaded renders a component in loading state 1`] = `

    -

    +

    Top file downloads over the last week on NASA hostnames. @@ -3886,7 +3900,9 @@ exports[`TopDownloadsAndVideoPlays when data is not loaded renders a component i Top Video Plays Last Week

    -

    +

    Video play data is unavailable for NASA hostnames. @@ -3899,7 +3915,7 @@ exports[`TopDownloadsAndVideoPlays when data is not loaded renders a component i exports[`TopDownloadsAndVideoPlays when data loading has an error renders a component in error state 1`] = `

    -

    +

    Top file downloads over the last week on NASA hostnames. @@ -3935,7 +3953,9 @@ exports[`TopDownloadsAndVideoPlays when data loading has an error renders a comp Top Video Plays Last Week

    -

    +

    Video play data is unavailable for NASA hostnames. diff --git a/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap index cc4520c0..c6b6da20 100644 --- a/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap +++ b/js/components/dashboard_content/__tests__/__snapshots__/TopLanguagesHistorical.spec.js.snap @@ -15,7 +15,7 @@ exports[`TopLanguagesHistorical when data is loaded renders a component with dat id="chart_top-languages" >
    @@ -238,7 +238,7 @@ exports[`TopLanguagesHistorical when data loading has an error renders a compone id="chart_top-languages" >
    diff --git a/js/components/data_visualization/RealtimeEventCount.js b/js/components/data_visualization/RealtimeEventCount.js new file mode 100644 index 00000000..eb22c116 --- /dev/null +++ b/js/components/data_visualization/RealtimeEventCount.js @@ -0,0 +1,77 @@ +import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; + +import DataLoader from "../../lib/data_loader"; +import formatters from "../../lib/chart_helpers/formatters"; + +/** + * Retrieves the realtime users report from the passed data URL and creates a + * visualization for the count of active users. + * + * @param {object} props the properties for the component + * @param {string} props.dataHrefBase the URL of the base location of the data + * to be downloaded including the agency path. In production this is proxied and + * redirected to the S3 bucket URL. + * @param {number} props.refreshSeconds the number of seconds to wait before + * refreshing the data. + * @param {string} props.eventName the + * @returns {import('react').ReactElement} The rendered element + */ +function RealtimeEventCount({ dataHrefBase, refreshSeconds, eventName }) { + const dataURL = `${dataHrefBase}/realtime-event-counts.json`; + const [realtimeReportData, setRealtimeReportData] = useState(null); + // Set a non-breaking space to the initial display value so the div does not + // collapse + const [displayValue, setDisplayValue] = useState("\u00A0"); + + useEffect(() => { + const fetchData = async () => { + if (!realtimeReportData) { + const data = await DataLoader.loadJSON(dataURL); + await setRealtimeReportData(data); + // Refresh data every interval. useEffect will run and update the chart + // when the state is changed. + setInterval(() => { + DataLoader.loadJSON(dataURL).then((data) => { + setRealtimeReportData(data); + }); + }, refreshSeconds * 1000); + } else { + if (shouldDisplayEventCount()) { + setDisplayValue(formattedEventCount()); + } else { + setDisplayValue("0"); + } + } + }; + fetchData().catch(console.error); + }, [realtimeReportData]); + + function shouldDisplayEventCount() { + return !!realtimeReportData.data && eventMatches(realtimeReportData.data); + } + + function eventMatches(eventList) { + return !!findEvent(eventList); + } + + function findEvent(eventList) { + return eventList.find((listItem) => listItem.event_label == eventName); + } + + function formattedEventCount() { + return formatters.addCommas( + findEvent(realtimeReportData.data).total_events, + ); + } + + return {displayValue}; +} + +RealtimeEventCount.propTypes = { + dataHrefBase: PropTypes.string.isRequired, + refreshSeconds: PropTypes.number.isRequired, + eventName: PropTypes.string.isRequired, +}; + +export default RealtimeEventCount; diff --git a/js/components/data_visualization/RealtimeMetricCount.js b/js/components/data_visualization/RealtimeMetricCount.js new file mode 100644 index 00000000..54161eb0 --- /dev/null +++ b/js/components/data_visualization/RealtimeMetricCount.js @@ -0,0 +1,69 @@ +import React, { useEffect, useState } from "react"; +import PropTypes from "prop-types"; + +import DataLoader from "../../lib/data_loader"; +import formatters from "../../lib/chart_helpers/formatters"; + +/** + * Retrieves the realtime users report from the passed data URL and creates a + * visualization for the count of the passed metric name. + * + * @param {object} props the properties for the component + * @param {string} props.dataHrefBase the URL of the base location of the data + * to be downloaded including the agency path. In production this is proxied and + * redirected to the S3 bucket URL. + * @param {number} props.refreshSeconds the number of seconds to wait before + * refreshing the data. + * @param {string} props.metricName the name of the report metric to display. + * @returns {import('react').ReactElement} The rendered element + */ +function RealtimeMetricCount({ dataHrefBase, refreshSeconds, metricName }) { + const dataURL = `${dataHrefBase}/realtime.json`; + const [realtimeReportData, setRealtimeReportData] = useState(null); + // Set a non-breaking space to the initial display value so the div does not + // collapse + const [displayValue, setDisplayValue] = useState("\u00A0"); + + useEffect(() => { + const fetchData = async () => { + if (!realtimeReportData) { + const data = await DataLoader.loadJSON(dataURL); + await setRealtimeReportData(data); + // Refresh data every interval. useEffect will run and update the chart + // when the state is changed. + setInterval(() => { + DataLoader.loadJSON(dataURL).then((data) => { + setRealtimeReportData(data); + }); + }, refreshSeconds * 1000); + } else { + if (shouldDisplayMetricCount()) { + setDisplayValue(formattedMetricCount()); + } else { + setDisplayValue("0"); + } + } + }; + fetchData().catch(console.error); + }, [realtimeReportData]); + + function shouldDisplayMetricCount() { + return ( + !!realtimeReportData.data[0] && realtimeReportData.data[0][metricName] + ); + } + + function formattedMetricCount() { + return formatters.addCommas(realtimeReportData.data[0][metricName]); + } + + return {displayValue}; +} + +RealtimeMetricCount.propTypes = { + dataHrefBase: PropTypes.string.isRequired, + refreshSeconds: PropTypes.number.isRequired, + metricName: PropTypes.string.isRequired, +}; + +export default RealtimeMetricCount; diff --git a/sass/_global.scss b/sass/_global.scss index 85acd2a2..08dd5b55 100644 --- a/sass/_global.scss +++ b/sass/_global.scss @@ -1,3 +1,7 @@ .hide { display: none !important; } + +.no-border { + border: none; +} diff --git a/sass/_text-theme.scss b/sass/_text-theme.scss index 240b930e..12e40159 100644 --- a/sass/_text-theme.scss +++ b/sass/_text-theme.scss @@ -1,5 +1,9 @@ @use "uswds-core" as *; +$default-font-family-name: "ui"; +$header-font-family-name: "sans"; +$font-size-names: "3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"; + $default-font-weight: font-weight(400); -$default-font-family: font-family("ui"); -$header-font-family: font-family("sans"); +$default-font-family: font-family($default-font-family-name); +$header-font-family: font-family($header-font-family-name); diff --git a/sass/_uswds-overrides.scss b/sass/_uswds-overrides.scss index f6978912..fa196adb 100644 --- a/sass/_uswds-overrides.scss +++ b/sass/_uswds-overrides.scss @@ -22,6 +22,7 @@ font-size: size("sans", "md"); padding: units(2); } + // add bottom spacing for download buttons in table .usa-button:first-child { margin-bottom: units("05"); @@ -31,3 +32,21 @@ } } } + +// This definition has to be very specific to override. USWDS really wants to +// put an extra margin at the bottom of the last child card in a card group. +ul.usa-card-group { + li.usa-card { + margin-bottom: units(2); + + &:last-child { + margin-bottom: units(2); + } + } +} + +// USWDS wants to add padding when there is a single element in the card +// container, but if we add padding-0 class, it should not have padding +.usa-card:not(.usa-card--flag) .usa-card__container>.padding-0 { + padding: 0; +} diff --git a/sass/elements/_text.scss b/sass/elements/_text.scss index a68fe59d..f80c8b02 100644 --- a/sass/elements/_text.scss +++ b/sass/elements/_text.scss @@ -1,4 +1,17 @@ @use "uswds-core" as *; +@use "text-theme"; + +@each $font-size-name in text-theme.$font-size-names { + .text--header-#{$font-size-name} { + font-family: family(text-theme.$header-font-family-name); + font-size: size(text-theme.$header-font-family-name, $font-size-name); + } + + .text--#{$font-size-name} { + font-family: family(text-theme.$default-font-family-name); + font-size: size(text-theme.$default-font-family-name, $font-size-name); + } +} .text--bold { font-weight: font-weight("bold"); @@ -8,6 +21,10 @@ font-weight: 500; } +.text--normal { + font-weight: text-theme.$default-font-weight; +} + .text--capitalize { text-transform: capitalize; } diff --git a/sass/pages/root/_main-data.scss b/sass/pages/root/_main-data.scss index 145edebf..2672d230 100644 --- a/sass/pages/root/_main-data.scss +++ b/sass/pages/root/_main-data.scss @@ -7,8 +7,8 @@ #main_data { @include at-media("tablet") { - border-bottom: 1px solid color("gray-cool-40"); - border-right: none; + //border-bottom: 1px solid color("gray-cool-40"); + //border-right: none; } .locations-and-languages-section { diff --git a/sass/pages/root/_secondary-data.scss b/sass/pages/root/_secondary-data.scss index 6e95add3..856f58e8 100644 --- a/sass/pages/root/_secondary-data.scss +++ b/sass/pages/root/_secondary-data.scss @@ -6,28 +6,10 @@ */ #secondary_data { - border-left: none; - border-right: none; - border-top: 1px solid colors.$uswds-light-gray; - - @include at-media("tablet") { - border-bottom: 1px solid colors.$uswds-light-gray; - border-left: 1px solid colors.$uswds-light-gray; - border-top: none; - } - .sidebar { min-height: units("tablet-lg"); } - .sidebar__headline { - padding: 0 units(2); - - @include at-media("tablet") { - padding: 0 units(3); - } - } - .sidebar__tab-select__button { background-color: colors.$palette-color-3; width: 100%; @@ -39,12 +21,7 @@ // overrides some default uswds styles, see https://designsystem.digital.gov/components/button-group/#segmented-button-group-2 .sidebar__tab-select__button-group { - padding: 0 units(2); width: 100%; - - @include at-media("tablet") { - padding: 0 units(3); - } } .sidebar__tab-select__button-group__item { @@ -61,16 +38,11 @@ } .sidebar__tab__content { - border-bottom: 1px solid colors.$uswds-light-gray; // This prevents "jumping" in the sidebar when chart data is loading. // Assumes there are 30 items in the top pages charts. Will need adjusted // accordingly if the number of chart items changes. min-height: 60rem; - padding: 0 units(2); - - @include at-media("tablet") { - padding: 0 units(3); - } + border-bottom: 1px solid colors.$uswds-light-gray; .chart__bar-chart { margin-top: 0; @@ -92,18 +64,12 @@ .top-downloads { border-bottom: 1px solid colors.$uswds-light-gray; - padding: 0 units(2); - - @include at-media("tablet") { - padding: 0 units(3); - } &__headline { padding-top: 0; } h4 { - font-weight: font-weight("light"); margin: units(1) 0 units(1) 0; } @@ -147,18 +113,12 @@ // Assumes there are 30 items in the top pages charts. Will need adjusted // accordingly if the number of chart items changes. min-height: 10rem; - padding: 0 units(2); - - @include at-media("tablet") { - padding: 0 units(3); - } &__headline { padding-top: 0; } h4 { - font-weight: font-weight("light"); margin: units(1) 0 units(1) 0; }