diff --git a/packages/@ourworldindata/components/src/Button/Button.tsx b/packages/@ourworldindata/components/src/Button/Button.tsx index a0499f90fbc..ee31c825453 100644 --- a/packages/@ourworldindata/components/src/Button/Button.tsx +++ b/packages/@ourworldindata/components/src/Button/Button.tsx @@ -14,11 +14,15 @@ type ButtonCommonProps = { type WithHrefProps = { href: string onClick?: never + ariaLabel?: never + type?: never } type WithOnClickProps = { onClick?: () => void href?: never + ariaLabel: string + type?: "button" | "submit" } export type ButtonProps = @@ -31,6 +35,8 @@ export const Button = ({ href, onClick, text, + ariaLabel, + type = "button", icon = faArrowRight, }: ButtonProps) => { const classes = cx("owid-btn", `owid-btn--${theme}`, className) @@ -44,7 +50,12 @@ export const Button = ({ } return ( - ) diff --git a/packages/@ourworldindata/components/src/styles/mixins.scss b/packages/@ourworldindata/components/src/styles/mixins.scss index 8bc0753e640..4d747a29eb7 100644 --- a/packages/@ourworldindata/components/src/styles/mixins.scss +++ b/packages/@ourworldindata/components/src/styles/mixins.scss @@ -24,6 +24,19 @@ } } +@mixin owid-link-40 { + color: $blue-40; + text-decoration: underline; + text-underline-offset: 4px; + + &:visited { + color: $blue-30; + } + &:hover { + text-decoration: none; + } +} + @mixin cancel-link-styles { color: $blue-90; text-decoration: none; diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx index f731f5978bf..ef9538bb9ba 100644 --- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx +++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx @@ -432,6 +432,7 @@ export class Footer< { e.stopPropagation() diff --git a/site/DataCatalog/DataCatalogPage.tsx b/site/DataCatalog/DataCatalogPage.tsx index aae88809d3e..0af03953dac 100644 --- a/site/DataCatalog/DataCatalogPage.tsx +++ b/site/DataCatalog/DataCatalogPage.tsx @@ -4,6 +4,7 @@ import { SiteHeader } from "../SiteHeader.js" import { SiteFooter } from "../SiteFooter.js" import { SiteFooterContext, TagGraphRoot } from "@ourworldindata/utils" import { DataCatalogInstantSearchWrapper } from "./DataCatalog.js" +import { Html } from "../Html.js" declare global { interface Window { @@ -18,7 +19,7 @@ export const DataCatalogPage = (props: { const { baseUrl, tagGraph } = props return ( - + - + ) } diff --git a/site/Html.tsx b/site/Html.tsx index f013b713974..a3373f270a9 100644 --- a/site/Html.tsx +++ b/site/Html.tsx @@ -7,5 +7,11 @@ import React, { HtmlHTMLAttributes } from "react" * See the