From 637e06caaa4396b9e05064ccca0e2c93691ba3b1 Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Tue, 27 Feb 2024 20:19:18 +0000 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=89=20add=20reusable=20Button=20co?= =?UTF-8?q?mponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/src/Button/Button.scss | 31 ++++++++++ .../components/src/Button/Button.tsx | 56 +++++++++++++++++++ .../@ourworldindata/components/src/index.ts | 2 + site/gdocs/components/ExplorerTiles.scss | 14 +---- site/gdocs/components/ExplorerTiles.tsx | 13 ++--- site/gdocs/components/HomepageIntro.scss | 32 ----------- site/gdocs/components/HomepageIntro.tsx | 29 ++++++---- .../components/KeyIndicatorCollection.scss | 7 --- .../components/KeyIndicatorCollection.tsx | 9 +-- site/gdocs/components/LatestDataInsights.scss | 11 ---- site/gdocs/components/LatestDataInsights.tsx | 11 ++-- site/owid.scss | 1 + 12 files changed, 124 insertions(+), 92 deletions(-) create mode 100644 packages/@ourworldindata/components/src/Button/Button.scss create mode 100644 packages/@ourworldindata/components/src/Button/Button.tsx diff --git a/packages/@ourworldindata/components/src/Button/Button.scss b/packages/@ourworldindata/components/src/Button/Button.scss new file mode 100644 index 00000000000..a96bf2f9101 --- /dev/null +++ b/packages/@ourworldindata/components/src/Button/Button.scss @@ -0,0 +1,31 @@ +.owid-btn { + @include body-3-medium; + padding: 8.5px 24px; + border: 1px solid transparent; + border-radius: 0; + text-align: center; + display: block; + + svg { + font-size: 0.75rem; + } +} + +.owid-btn--solid-vermillion { + background-color: $vermillion; + color: #fff; + + &:hover { + background-color: $accent-vermillion; + } +} + +.owid-btn--outline-vermillion { + border-color: $vermillion; + color: $vermillion; + + &:hover { + border-color: $accent-vermillion; + color: $accent-vermillion; + } +} diff --git a/packages/@ourworldindata/components/src/Button/Button.tsx b/packages/@ourworldindata/components/src/Button/Button.tsx new file mode 100644 index 00000000000..917a6fdd760 --- /dev/null +++ b/packages/@ourworldindata/components/src/Button/Button.tsx @@ -0,0 +1,56 @@ +import React from "react" +import cx from "classnames" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" +import { IconDefinition, faArrowRight } from "@fortawesome/free-solid-svg-icons" + +type ButtonCommonProps = { + text: string + className?: string + theme: "solid-vermillion" | "outline-vermillion" + /** Set to null to hide the icon */ + icon?: IconDefinition | null +} + +type WithHrefProps = { + href: string + onClick?: never +} + +type WithOnClickProps = { + onClick: () => void + href?: never +} + +export type ButtonProps = + | (ButtonCommonProps & WithHrefProps) + | (ButtonCommonProps & WithOnClickProps) + +export const Button = ({ + theme = "solid-vermillion", + className, + href, + onClick, + text, + icon = faArrowRight, +}: ButtonProps) => { + const classes = cx("owid-btn", `owid-btn--${theme}`, className) + + if (href) { + return ( + + {text} {icon && } + + ) + } + + return ( + + ) +} diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts index d5e088b7264..76b1808944f 100644 --- a/packages/@ourworldindata/components/src/index.ts +++ b/packages/@ourworldindata/components/src/index.ts @@ -45,3 +45,5 @@ export { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID, REUSE_THIS_WORK_SECTION_ID, } from "./SharedDataPageConstants.js" + +export { Button } from "./Button/Button.js" diff --git a/site/gdocs/components/ExplorerTiles.scss b/site/gdocs/components/ExplorerTiles.scss index bf3d0c2fb65..69658f22cde 100644 --- a/site/gdocs/components/ExplorerTiles.scss +++ b/site/gdocs/components/ExplorerTiles.scss @@ -8,23 +8,11 @@ margin: 0 0 16px 0; } .explorer-tiles__cta { - display: block; - padding: 8.5px 16px; - color: $vermillion; - border: 1px solid $vermillion; - border-radius: 0; width: fit-content; justify-self: end; grid-row: span 2; align-self: center; - height: 40px; - &:hover { - color: $accent-vermillion; - border-color: $accent-vermillion; - } - svg { - font-size: 0.75rem; - } + @include sm-only { justify-self: start; margin-top: 16px; diff --git a/site/gdocs/components/ExplorerTiles.tsx b/site/gdocs/components/ExplorerTiles.tsx index 3e18c988d78..9e5667c71c2 100644 --- a/site/gdocs/components/ExplorerTiles.tsx +++ b/site/gdocs/components/ExplorerTiles.tsx @@ -1,8 +1,7 @@ import { EnrichedBlockExplorerTiles } from "@ourworldindata/types" +import { Button } from "@ourworldindata/components" import React, { useContext } from "react" import { useLinkedChart } from "../utils.js" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" -import { faArrowRight } from "@fortawesome/free-solid-svg-icons" import { DocumentContext } from "../OwidGdoc.js" import { BAKED_BASE_URL } from "../../../settings/clientSettings.js" @@ -55,13 +54,13 @@ export function ExplorerTiles({

{title}

- - See all our Data Explorers{" "} - - + text="See all our Data Explorers" + theme="outline-vermillion" + /> +

{subtitle}

diff --git a/site/gdocs/components/HomepageIntro.scss b/site/gdocs/components/HomepageIntro.scss index 00501c80311..ab0892984c6 100644 --- a/site/gdocs/components/HomepageIntro.scss +++ b/site/gdocs/components/HomepageIntro.scss @@ -129,22 +129,6 @@ margin-top: 0; } -.homepage-intro__subscribe-button, -.homepage-intro__see-all-work-button, -.homepage-intro__donate-button { - display: block; - width: 100%; - border: 1px solid $vermillion; - color: $vermillion; - text-align: center; - padding: 8.5px 0; - - &:hover { - border-color: $accent-vermillion; - color: $accent-vermillion; - } -} - .homepage-intro__see-all-work-button-container { display: flex; margin-top: 32px; @@ -161,11 +145,6 @@ .homepage-intro__see-all-work-button { align-self: flex-end; width: auto; - padding: 8.5px 24px; - display: inline-block; - svg { - margin-left: 8px; - } @include sm-only { display: none; @@ -181,17 +160,6 @@ } } -.homepage-intro__donate-button { - background-color: $vermillion; - color: #fff; - border-color: none; - - &:hover { - background-color: $accent-vermillion; - color: #fff; - } -} - .homepage-intro__mission-wrapper { padding-bottom: 24px; margin-bottom: 24px; diff --git a/site/gdocs/components/HomepageIntro.tsx b/site/gdocs/components/HomepageIntro.tsx index ed7b25292f6..37da3cdc868 100644 --- a/site/gdocs/components/HomepageIntro.tsx +++ b/site/gdocs/components/HomepageIntro.tsx @@ -5,6 +5,7 @@ import { EnrichedBlockHomepageIntroPost, } from "@ourworldindata/types" import { formatAuthors, groupBy } from "@ourworldindata/utils" +import { Button } from "@ourworldindata/components" import { useLinkedDocument } from "../utils.js" import { DocumentContext } from "../OwidGdoc.js" import Image from "./Image.js" @@ -131,12 +132,13 @@ export function HomepageIntro({ className, featuredWork }: HomepageIntroProps) { Read about our mission{" "} - - Subscribe to our newsletter - + text="Subscribe to our newsletter" + theme="outline-vermillion" + icon={null} + />

@@ -148,9 +150,13 @@ export function HomepageIntro({ className, featuredWork }: HomepageIntroProps) { accessible to everyone. Consider supporting us if you find our work valuable.

- - Donate to support us - +
As seen on
- - See all our latest work - - + text="See all our latest work" + theme="outline-vermillion" + />
diff --git a/site/gdocs/components/KeyIndicatorCollection.scss b/site/gdocs/components/KeyIndicatorCollection.scss index e6546b813e7..a8aa831e88f 100644 --- a/site/gdocs/components/KeyIndicatorCollection.scss +++ b/site/gdocs/components/KeyIndicatorCollection.scss @@ -96,18 +96,11 @@ } .key-indicator-collection__all-charts-button { - color: $vermillion; - border: 1px solid $vermillion; - padding: 8.5px 24px; // needed to align the button with the header margin-top: -16px; align-self: center; justify-self: end; - svg { - font-size: 0.75rem; - } - @include sm-only { margin: 24px 16px; justify-self: unset; diff --git a/site/gdocs/components/KeyIndicatorCollection.tsx b/site/gdocs/components/KeyIndicatorCollection.tsx index d1190fe9a2f..dae6bb9a16b 100644 --- a/site/gdocs/components/KeyIndicatorCollection.tsx +++ b/site/gdocs/components/KeyIndicatorCollection.tsx @@ -20,6 +20,7 @@ import { Url, urlToSlug } from "@ourworldindata/utils" import { useLinkedChart, useLinkedIndicator } from "../utils.js" import KeyIndicator from "./KeyIndicator.js" import { AttachmentsContext } from "../OwidGdoc.js" +import { Button } from "@ourworldindata/components" // keep in sync with $duration in KeyIndicatorCollection.scss const HEIGHT_ANIMATION_DURATION_IN_SECONDS = 0.4 @@ -63,12 +64,12 @@ export default function KeyIndicatorCollection({

)} - - See all our data - + text="See all our data" + theme="outline-vermillion" + />
{blocks.map( (block: EnrichedBlockKeyIndicator, blockIndex: number) => { diff --git a/site/gdocs/components/LatestDataInsights.scss b/site/gdocs/components/LatestDataInsights.scss index c3ae964855a..2e7db5a18af 100644 --- a/site/gdocs/components/LatestDataInsights.scss +++ b/site/gdocs/components/LatestDataInsights.scss @@ -54,21 +54,10 @@ } .latest-data-insights-block__see-all-data-insights-button { - color: $vermillion; - border: 1px solid $vermillion; - padding: 8.5px 24px; justify-self: end; align-self: center; // necessary to be centered with heading margin-bottom: 16px; - &:hover { - border-color: $accent-vermillion; - color: $accent-vermillion; - } - - svg { - font-size: 0.75rem; - } @include sm-only { margin-top: 16px; diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx index f4dc6956041..f84cdc73187 100644 --- a/site/gdocs/components/LatestDataInsights.tsx +++ b/site/gdocs/components/LatestDataInsights.tsx @@ -1,10 +1,9 @@ import React, { useContext } from "react" import cx from "classnames" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" import { AttachmentsContext } from "../OwidGdoc.js" -import { faArrowRight } from "@fortawesome/free-solid-svg-icons" import { dataInsightIndexToIdMap } from "../pages/DataInsight.js" import { formatDate } from "@ourworldindata/utils" +import { Button } from "@ourworldindata/components" export const LatestDataInsightsBlock = ({ className, @@ -22,12 +21,12 @@ export const LatestDataInsightsBlock = ({ Bite-sized insights on how the world is changing.

- - See all Data Insights - + text="See all Data Insights" + theme="outline-vermillion" + />
{latestDataInsights.map((dataInsight, index) => ( Date: Tue, 27 Feb 2024 20:30:04 +0000 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=89=20add=20solid-blue=20Button=20?= =?UTF-8?q?theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/src/Button/Button.scss | 10 +++++++ .../components/src/Button/Button.tsx | 2 +- site/gdocs/components/KeyIndicator.scss | 28 +------------------ site/gdocs/components/KeyIndicator.tsx | 18 ++++++------ 4 files changed, 21 insertions(+), 37 deletions(-) diff --git a/packages/@ourworldindata/components/src/Button/Button.scss b/packages/@ourworldindata/components/src/Button/Button.scss index a96bf2f9101..d15fc502879 100644 --- a/packages/@ourworldindata/components/src/Button/Button.scss +++ b/packages/@ourworldindata/components/src/Button/Button.scss @@ -5,6 +5,7 @@ border-radius: 0; text-align: center; display: block; + cursor: pointer; svg { font-size: 0.75rem; @@ -29,3 +30,12 @@ color: $accent-vermillion; } } + +.owid-btn--solid-blue { + background-color: $blue-60; + color: #fff; + + &:hover { + background-color: $blue-90; + } +} diff --git a/packages/@ourworldindata/components/src/Button/Button.tsx b/packages/@ourworldindata/components/src/Button/Button.tsx index 917a6fdd760..b6bb93d57f9 100644 --- a/packages/@ourworldindata/components/src/Button/Button.tsx +++ b/packages/@ourworldindata/components/src/Button/Button.tsx @@ -6,7 +6,7 @@ import { IconDefinition, faArrowRight } from "@fortawesome/free-solid-svg-icons" type ButtonCommonProps = { text: string className?: string - theme: "solid-vermillion" | "outline-vermillion" + theme: "solid-vermillion" | "outline-vermillion" | "solid-blue" /** Set to null to hide the icon */ icon?: IconDefinition | null } diff --git a/site/gdocs/components/KeyIndicator.scss b/site/gdocs/components/KeyIndicator.scss index cb81a2e91ec..7d840969917 100644 --- a/site/gdocs/components/KeyIndicator.scss +++ b/site/gdocs/components/KeyIndicator.scss @@ -81,34 +81,8 @@ } .datapage-link { - @include body-3-medium; - - display: block; - @include sm-up { - display: inline-flex; - align-items: center; - } - - min-height: 40px; - padding: 8px 24px; margin-top: 16px; - text-align: center; - color: $white; - background-color: $blue-60; - cursor: pointer; - border: none; - display: flex; - align-items: center; - justify-content: center; - - &:hover { - background-color: $blue-90; - } - - svg { - font-size: 0.75rem; - margin-left: 8px; - } + display: inline-block; } .datapage-link-desktop { diff --git a/site/gdocs/components/KeyIndicator.tsx b/site/gdocs/components/KeyIndicator.tsx index 98b30bfd3dd..8eb397dd02b 100644 --- a/site/gdocs/components/KeyIndicator.tsx +++ b/site/gdocs/components/KeyIndicator.tsx @@ -12,6 +12,7 @@ import { capitalize } from "@ourworldindata/utils" import Chart from "./Chart.js" import Paragraph from "./Paragraph.js" import { useLinkedChart, useLinkedIndicator } from "../utils.js" +import { Button } from "@ourworldindata/components" export default function KeyIndicator({ d, @@ -45,13 +46,12 @@ export default function KeyIndicator({ ))}
- - Explore and learn more about this data - - + text="Explore and learn more about this data" + theme="solid-blue" + />
- - Explore and learn more about this data - + text="Explore and learn more about this data" + theme="solid-blue" + />
) } From 3a60b5df8ea02545d4d2bd5d114c0d40ed4b359f Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Tue, 27 Feb 2024 20:43:07 +0000 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=A8=20use=20Button=20in=20homepage-in?= =?UTF-8?q?tro=20on=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/gdocs/components/HomepageIntro.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/site/gdocs/components/HomepageIntro.tsx b/site/gdocs/components/HomepageIntro.tsx index 37da3cdc868..b5c4cf7b87d 100644 --- a/site/gdocs/components/HomepageIntro.tsx +++ b/site/gdocs/components/HomepageIntro.tsx @@ -202,13 +202,12 @@ export function HomepageIntro({ className, featuredWork }: HomepageIntroProps) {
- - See all our latest work - - + text="See all our latest work" + theme="outline-vermillion" + />
From 12802ac0912b3318a9bd1468a0e45c0b016e6e8c Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Fri, 1 Mar 2024 21:28:51 +0000 Subject: [PATCH 4/4] =?UTF-8?q?=E2=9C=85=20fix=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/gdocs/components/KeyIndicator.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/gdocs/components/KeyIndicator.tsx b/site/gdocs/components/KeyIndicator.tsx index 8eb397dd02b..97e1ccca43e 100644 --- a/site/gdocs/components/KeyIndicator.tsx +++ b/site/gdocs/components/KeyIndicator.tsx @@ -1,18 +1,16 @@ import React from "react" import cx from "classnames" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" -import { faArrowRight } from "@fortawesome/free-solid-svg-icons" import { EnrichedBlockKeyIndicator, EnrichedBlockText, } from "@ourworldindata/types" import { capitalize } from "@ourworldindata/utils" +import { Button } from "@ourworldindata/components" import Chart from "./Chart.js" import Paragraph from "./Paragraph.js" import { useLinkedChart, useLinkedIndicator } from "../utils.js" -import { Button } from "@ourworldindata/components" export default function KeyIndicator({ d,