Merge pull request #3254 from owid/red-button

🎉 add reusable Button component

packages/@ourworldindata/components/src/Button/Button.scss

@@ -0,0 +1,41 @@
+.owid-btn {
+    @include body-3-medium;
+    padding: 8.5px 24px;
+    border: 1px solid transparent;
+    border-radius: 0;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+
+    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;
+    }
+}
+
+.owid-btn--solid-blue {
+    background-color: $blue-60;
+    color: #fff;
+
+    &:hover {
+        background-color: $blue-90;
+    }
+}

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" | "solid-blue"
+    /** 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 (
+            <a
+                className={classes}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {text} {icon && <FontAwesomeIcon icon={icon} />}
+            </a>
+        )
+    }
+
+    return (
+        <button className={classes} onClick={onClick}>
+            {text} {icon && <FontAwesomeIcon icon={icon} />}
+        </button>
+    )
+}

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"

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;

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({
             <h2 className="h2-bold span-cols-6 span-md-12 explorer-tiles__title">
                 {title}
             </h2>
-            <a
+            <Button
                 className="span-cols-4 col-start-9 span-md-cols-5 col-md-start-8 col-sm-start-1 span-sm-cols-12 body-3-medium explorer-tiles__cta"
                 href="/charts"
-            >
-                See all our Data Explorers{" "}
-                <FontAwesomeIcon icon={faArrowRight} />
-            </a>
+                text="See all our Data Explorers"
+                theme="outline-vermillion"
+            />
+
             <p className="body-2-regular explorer-tiles__subtitle span-cols-8 span-md-cols-7 span-sm-cols-12">
                 {subtitle}
             </p>

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;

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{" "}
                         <FontAwesomeIcon icon={faArrowRight} />
                     </a>
-                    <a
+                    <Button
                         href="#subscribe"
                         className="homepage-intro__subscribe-button body-3-medium"
-                    >
-                        Subscribe to our newsletter
-                    </a>
+                        text="Subscribe to our newsletter"
+                        theme="outline-vermillion"
+                        icon={null}
+                    />
                 </div>
                 <div className="homepage-intro__mission-wrapper body-3-medium">
                     <p>
@@ -148,9 +150,13 @@ export function HomepageIntro({ className, featuredWork }: HomepageIntroProps) {
                         accessible to everyone. Consider supporting us if you
                         find our work valuable.
                     </p>
-                    <a className="homepage-intro__donate-button" href="/donate">
-                        Donate to support us
-                    </a>
+                    <Button
+                        className="homepage-intro__donate-button"
+                        href="/donate"
+                        text="Donate to support us"
+                        theme="solid-vermillion"
+                        icon={null}
+                    />
                 </div>
                 <div className="h6-black-caps">As seen on</div>
                 <img
@@ -187,23 +193,21 @@ export function HomepageIntro({ className, featuredWork }: HomepageIntroProps) {
                         ))}
                     </div>
                     <div className="span-cols-6 homepage-intro__see-all-work-button-container">
-                        <a
+                        <Button
                             href="/latest"
                             className="body-3-medium homepage-intro__see-all-work-button"
-                        >
-                            See all our latest work
-                            <FontAwesomeIcon icon={faArrowRight} />
-                        </a>
+                            text="See all our latest work"
+                            theme="outline-vermillion"
+                        />
                     </div>
                 </div>
                 <div className="span-cols-6 span-sm-cols-12">
-                    <a
+                    <Button
                         href="/latest"
                         className="body-3-medium homepage-intro__see-all-work-button homepage-intro__see-all-work-button--mobile"
-                    >
-                        See all our latest work
-                        <FontAwesomeIcon icon={faArrowRight} />
-                    </a>
+                        text="See all our latest work"
+                        theme="outline-vermillion"
+                    />
                 </div>
             </section>
         </section>

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 {

site/gdocs/components/KeyIndicator.tsx

@@ -1,13 +1,12 @@
 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"
@@ -45,13 +44,12 @@ export default function KeyIndicator({
                         <Paragraph d={textBlock} key={i} />
                     ))}
                 </div>
-                <a
+                <Button
                     className="datapage-link datapage-link-desktop"
                     href={linkedChart.resolvedUrl}
-                >
-                    Explore and learn more about this data
-                    <FontAwesomeIcon icon={faArrowRight} />
-                </a>
+                    text="Explore and learn more about this data"
+                    theme="solid-blue"
+                />
             </div>
             <Chart
                 className="key-indicator-chart col-start-5 span-cols-8 span-sm-cols-12 margin-0"
@@ -62,12 +60,12 @@ export default function KeyIndicator({
                 }}
                 shouldOptimizeForHorizontalSpace={false}
             />
-            <a
+            <Button
                 className="datapage-link datapage-link-mobile col-start-1 span-cols-12"
                 href={linkedChart.resolvedUrl}
-            >
-                Explore and learn more about this data
-            </a>
+                text="Explore and learn more about this data"
+                theme="solid-blue"
+            />
         </div>
     )
 }

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;