tags
-}
-
-const transformDodLinks: Plugin<[], Root> = () => {
- return function (tree) {
- visit(tree, "element", function (node) {
- if (node.tagName === "a")
- if (
- node.properties &&
- typeof node.properties.href === "string" &&
- node.properties.href.startsWith("#dod:")
- ) {
- // use a regex to split the #dod: part from the term of the href. Use a named capture group
- // to capture the term
- const match = node.properties.href.match(/#dod:(?
- Checked: Use the explorer version
- with changes as present in the admin.
-
- Unchecked: Use the currently-saved
- version.
-
- Note that some features may only work
- correctly when this checkbox is unchecked:
- in particular, using catalogPaths
- and grapherIds and variable IDs.
-
- {option.description}
-
- This chart is composed of multiple indicators. Select an
- indicator for more information.
-
-
-
- )
-}
diff --git a/packages/charts/src/components/stubs/DataCitation.tsx b/packages/charts/src/components/stubs/DataCitation.tsx
deleted file mode 100644
index 46bce06b28d..00000000000
--- a/packages/charts/src/components/stubs/DataCitation.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Stub component for DataCitation.
- * This is a placeholder for data page functionality.
- */
-import React from "react"
-
-export interface DataCitationProps {
- citation?: string
- citationShort?: string
- citationLong?: string
- [key: string]: unknown
-}
-
-export function DataCitation(_props: DataCitationProps): React.ReactElement | null {
- return null
-}
diff --git a/packages/charts/src/components/stubs/IndicatorKeyData.tsx b/packages/charts/src/components/stubs/IndicatorKeyData.tsx
deleted file mode 100644
index e7adbfd1b15..00000000000
--- a/packages/charts/src/components/stubs/IndicatorKeyData.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Stub functions for IndicatorKeyData.
- * These are placeholders for data page functionality.
- */
-import React from "react"
-
-export interface KeyDataItem {
- label: string
- value: React.ReactNode
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function makeSource(_source: unknown): any {
- return null
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function makeLastUpdated(_date: unknown): any {
- return null
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function makeNextUpdate(_date: unknown): any {
- return null
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function makeDateRange(_range: unknown): any {
- return null
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function makeUnit(_unit: unknown): any {
- return null
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function makeUnitConversionFactor(_factor: unknown): any {
- return null
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function makeLinks(_links: unknown): any {
- return null
-}
diff --git a/packages/charts/src/components/stubs/IndicatorProcessing.tsx b/packages/charts/src/components/stubs/IndicatorProcessing.tsx
deleted file mode 100644
index caf29303b8a..00000000000
--- a/packages/charts/src/components/stubs/IndicatorProcessing.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Stub component for IndicatorProcessing.
- * This is a placeholder for data page functionality.
- */
-import React from "react"
-
-export interface IndicatorProcessingProps {
- processing?: unknown
- descriptionProcessing?: string
- [key: string]: unknown
-}
-
-export function IndicatorProcessing(_props: IndicatorProcessingProps): React.ReactElement | null {
- return null
-}
diff --git a/packages/charts/src/components/stubs/IndicatorSources.tsx b/packages/charts/src/components/stubs/IndicatorSources.tsx
deleted file mode 100644
index ffe7823dcfd..00000000000
--- a/packages/charts/src/components/stubs/IndicatorSources.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Stub component for IndicatorSources.
- * This is a placeholder for data page functionality.
- */
-import React from "react"
-
-export interface IndicatorSourcesProps {
- sources?: unknown[]
- isEmbeddedInADataPage?: boolean
- [key: string]: unknown
-}
-
-export function IndicatorSources(_props: IndicatorSourcesProps): React.ReactElement | null {
- return null
-}
diff --git a/packages/charts/src/components/styles/colors.scss b/packages/charts/src/components/styles/colors.scss
deleted file mode 100644
index 4f51a9121d4..00000000000
--- a/packages/charts/src/components/styles/colors.scss
+++ /dev/null
@@ -1,243 +0,0 @@
-/*******************************************************************************
- * Colors - Build Canada Design System
- *
- * This file imports and extends the Build Canada color tokens for use in charts.
- ******************************************************************************/
-
-@use "sass:color";
-
-/*******************************************************************************
- * Import Build Canada Design Tokens
- ******************************************************************************/
-
-@use "@buildcanada/components/src/styles/tokens" as bc;
-
-/*******************************************************************************
- * Brand Colors (from Build Canada design system)
- ******************************************************************************/
-
-$linen: bc.$linen;
-$charcoal: bc.$charcoal;
-$auburn: bc.$auburn;
-$white: bc.$white;
-
-/*******************************************************************************
- * Primary Color Scale - Auburn (Red)
- ******************************************************************************/
-
-$auburn-50: bc.$auburn-50;
-$auburn-100: bc.$auburn-100;
-$auburn-200: bc.$auburn-200;
-$auburn-300: bc.$auburn-300;
-$auburn-400: bc.$auburn-400;
-$auburn-500: bc.$auburn-500;
-$auburn-600: bc.$auburn-600;
-$auburn-700: bc.$auburn-700;
-$auburn-800: bc.$auburn-800;
-$auburn-900: bc.$auburn-900;
-$auburn-950: bc.$auburn-950;
-
-/*******************************************************************************
- * Secondary Color Scale - Cerulean (Blue)
- ******************************************************************************/
-
-$cerulean-50: bc.$cerulean-50;
-$cerulean-100: bc.$cerulean-100;
-$cerulean-200: bc.$cerulean-200;
-$cerulean-300: bc.$cerulean-300;
-$cerulean-400: bc.$cerulean-400;
-$cerulean-500: bc.$cerulean-500;
-$cerulean-600: bc.$cerulean-600;
-$cerulean-700: bc.$cerulean-700;
-$cerulean-800: bc.$cerulean-800;
-$cerulean-900: bc.$cerulean-900;
-$cerulean-950: bc.$cerulean-950;
-
-/*******************************************************************************
- * Tertiary Color Scale - Sienna (Orange)
- ******************************************************************************/
-
-$sienna-50: bc.$sienna-50;
-$sienna-100: bc.$sienna-100;
-$sienna-200: bc.$sienna-200;
-$sienna-300: bc.$sienna-300;
-$sienna-400: bc.$sienna-400;
-$sienna-500: bc.$sienna-500;
-$sienna-600: bc.$sienna-600;
-$sienna-700: bc.$sienna-700;
-$sienna-800: bc.$sienna-800;
-$sienna-900: bc.$sienna-900;
-$sienna-950: bc.$sienna-950;
-
-/*******************************************************************************
- * Supporting Color Scale - Fantasia (Purple)
- ******************************************************************************/
-
-$fantasia-50: bc.$fantasia-50;
-$fantasia-100: bc.$fantasia-100;
-$fantasia-200: bc.$fantasia-200;
-$fantasia-300: bc.$fantasia-300;
-$fantasia-400: bc.$fantasia-400;
-$fantasia-500: bc.$fantasia-500;
-$fantasia-600: bc.$fantasia-600;
-$fantasia-700: bc.$fantasia-700;
-$fantasia-800: bc.$fantasia-800;
-$fantasia-900: bc.$fantasia-900;
-$fantasia-950: bc.$fantasia-950;
-
-/*******************************************************************************
- * Supporting Color Scale - Emerald (Green)
- ******************************************************************************/
-
-$emerald-50: bc.$emerald-50;
-$emerald-100: bc.$emerald-100;
-$emerald-200: bc.$emerald-200;
-$emerald-300: bc.$emerald-300;
-$emerald-400: bc.$emerald-400;
-$emerald-500: bc.$emerald-500;
-$emerald-600: bc.$emerald-600;
-$emerald-700: bc.$emerald-700;
-$emerald-800: bc.$emerald-800;
-$emerald-900: bc.$emerald-900;
-$emerald-950: bc.$emerald-950;
-
-/*******************************************************************************
- * Gray Scale
- ******************************************************************************/
-
-$gray-5: #f7f7f7;
-$gray-10: bc.$gray-100;
-$gray-20: bc.$gray-200;
-$gray-30: bc.$gray-300;
-$gray-50: bc.$gray-400;
-$gray-60: bc.$gray-500;
-$gray-70: bc.$gray-600;
-$gray-80: bc.$gray-700;
-$gray-90: bc.$gray-800;
-$gray-100: bc.$gray-900;
-
-/*******************************************************************************
- * Legacy Brand Colors (backwards compatibility)
- * Maps old OWID colors to Build Canada equivalents
- ******************************************************************************/
-
-$oxford-blue: $charcoal;
-$vermillion: $auburn;
-$amber: $sienna-400;
-
-// Legacy blue shades mapped to cerulean
-$blue-100: $cerulean-950;
-$blue-95: $cerulean-900;
-$blue-90: $cerulean-800;
-$blue-65: $cerulean-700;
-$blue-60: $cerulean-600;
-$blue-50: $cerulean-500;
-$blue-40: $cerulean-400;
-$blue-30: $cerulean-300;
-$blue-20: $cerulean-200;
-$blue-10: $cerulean-100;
-$blue-5: $cerulean-50;
-
-// Legacy amber shades mapped to sienna
-$amber-110: $sienna-300;
-$amber-10: $sienna-50;
-
-$beige: $linen;
-
-/*******************************************************************************
- * Accent Colors
- ******************************************************************************/
-
-$accent-electric-blue: $cerulean-500;
-$accent-pale-blue: $cerulean-50;
-$accent-vermillion: $auburn-700;
-
-// Visited link colors mapped to fantasia (purple)
-$purple-90: $fantasia-800;
-$purple-60: $fantasia-600;
-$visited-light: $fantasia-300;
-
-/*******************************************************************************
- * Text Colors
- ******************************************************************************/
-
-$text-color: $charcoal;
-$secondary-text-color: bc.$gray-600;
-$tertiary-text-color: $sienna-500;
-$grey-text-color: bc.$gray-500;
-$bluish-grey-text-color: $cerulean-600;
-$error-text-color: $auburn;
-
-/*******************************************************************************
- * Category Colors (for data visualization)
- * Using Build Canada palette
- ******************************************************************************/
-
-$population-color: $cerulean-500;
-$health-color: $auburn-500;
-$food-color: $emerald-600;
-$energy-color: $sienna-500;
-$environment-color: $emerald-800;
-$technology-color: $cerulean-600;
-$growth-inequality-color: $emerald-500;
-$work-life-color: $fantasia-500;
-$public-sector-color: $sienna-400;
-$global-connections-color: $cerulean-900;
-$war-peace-color: $auburn-900;
-$politics-color: $fantasia-900;
-$violence-rights-color: $auburn-400;
-$education-color: $cerulean-800;
-$media-color: $cerulean-400;
-$culture-color: $fantasia-600;
-
-/*******************************************************************************
- * Controls & UI Colors
- ******************************************************************************/
-
-$controls-color: $cerulean-500;
-$light-shadow:
- rgba(39, 39, 39, 0.1) 0px 0px 0px 1px,
- rgba(39, 39, 39, 0.08) 0px 2px 2px;
-
-/*******************************************************************************
- * SDG Colors (UN Sustainable Development Goals)
- ******************************************************************************/
-
-$sdgColors: (
- 1: color.scale(#e5243b, $lightness: -15%),
- 2: #dda63a,
- 3: color.scale(#4c9f38, $lightness: -17%),
- 4: color.scale(#c5192d, $lightness: -15%),
- 5: color.scale(#ff3a21, $lightness: -19%),
- 6: #26bde2,
- 7: #fcc30b,
- 8: color.scale(#a21942, $lightness: -15%),
- 9: #fd6925,
- 10: color.scale(#dd1367, $lightness: -15%),
- 11: #fd9d24,
- 12: #bf8b2e,
- 13: color.scale(#3f7e44, $lightness: -15%),
- 14: color.scale(#0a97d9, $lightness: -20%),
- 15: #56c02b,
- 16: color.scale(#00689d, $lightness: -15%),
- 17: color.scale(#19486a, $lightness: -15%),
-);
-
-/*******************************************************************************
- * CSS Custom Properties Export
- ******************************************************************************/
-
-:root {
- // Brand colors
- --bc-linen: #{$linen};
- --bc-charcoal: #{$charcoal};
- --bc-auburn: #{$auburn};
-
- // Legacy variables for backwards compatibility
- --amber: #{$amber};
-
- // SDG colors
- @each $i, $sdgColor in $sdgColors {
- --sdg-color-#{$i}: #{$sdgColor};
- }
-}
diff --git a/packages/charts/src/components/styles/mixins.scss b/packages/charts/src/components/styles/mixins.scss
deleted file mode 100644
index cbdcefc671d..00000000000
--- a/packages/charts/src/components/styles/mixins.scss
+++ /dev/null
@@ -1,630 +0,0 @@
-@use "sass:math";
-
-@mixin link-90 {
- color: $blue-90;
- text-decoration: underline;
- text-underline-offset: 4px;
-
- &:visited {
- color: $purple-90;
- }
- &:hover {
- text-decoration: none;
- }
-}
-
-@mixin link-60 {
- color: $blue-60;
- text-decoration: underline;
- text-underline-offset: 4px;
-
- &:visited {
- color: $purple-60;
- }
- &:hover {
- text-decoration: none;
- }
-}
-
-@mixin 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;
- &:visited {
- color: $blue-90;
- }
- &:hover {
- text-decoration: none;
- color: $blue-100;
- }
-}
-
-@mixin dod-container {
- padding: 16px;
- max-height: 300px;
- overflow-y: auto;
- scrollbar-width: thin;
- @include body-3-regular;
-
- > span.markdown-text-wrap {
- > .markdown-text-wrap__line:first-child {
- font-weight: bold;
- font-size: 1rem;
- }
-
- > .markdown-text-wrap__line:not(:first-child) {
- margin-top: 8px;
- font-size: 0.875rem;
- }
-
- a {
- @include link-90;
- }
- }
-}
-
-@mixin dod-span {
- text-decoration: underline;
- text-decoration-style: dotted;
- text-underline-offset: 2px;
- cursor: help;
-
- span,
- strong,
- em {
- pointer-events: none;
- }
-}
-
-@mixin info {
- font-size: 0.875rem;
-
- p {
- margin-top: 0;
- &:last-child {
- margin-bottom: 0;
- }
- }
-}
-
-@mixin block-spacing {
- margin-bottom: 2rem;
- padding-top: 1rem;
- padding-bottom: 1rem;
- @include wrapper-spacing-sm;
- @include md-up {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
- @include wrapper-spacing-md;
- }
-}
-
-@mixin text-block-override {
- .article-block__text,
- .article-block__list,
- .article-block__html,
- .article-block__numbered-list {
- @content;
- }
-}
-
-@mixin table-block-override {
- .article-block__table--narrow,
- .article-block__table--wide,
- .raw-html-table__container {
- @content;
- }
-}
-
-@mixin column-block-override {
- .article-block__sticky-right,
- .article-block__sticky-left,
- .article-block__side-by-side {
- @content;
- }
-}
-
-@mixin sticky-child {
- top: 24px;
- position: sticky;
- padding-top: 0;
-}
-
-@mixin grid($columns) {
- display: grid;
- grid-template-columns: repeat($columns, 1fr);
- column-gap: var(--grid-gap);
-}
-
-@mixin left-media-columns {
- @include md-up {
- &.with-image .content-wrapper {
- display: flex;
- figure {
- flex: 1 1 40%;
- margin-right: $padding-x-md;
- img {
- width: 100%;
- }
- }
- .content {
- flex: 1 1 60%;
- *:first-child {
- margin-top: 0;
- }
- *:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
-
- figure,
- img {
- width: 100%;
- margin: 0;
- }
-}
-
-@mixin block-shadow {
- box-shadow: $light-shadow;
-}
-
-@mixin h3-style {
- font-family: $serif-font-stack;
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.25em;
- @include md-up {
- font-size: 2.25rem;
- }
-}
-
-@mixin h4-style {
- font-family: $serif-font-stack;
- font-weight: 400;
- font-size: 1.5rem;
- line-height: 1.4em;
-
- @include sm-only {
- font-size: 1.25rem;
- }
-}
-
-@mixin button-disabled {
- &:disabled {
- opacity: 0.5;
- cursor: auto;
- }
-}
-
-@mixin button-hover {
- &:hover {
- background-color: $blue-90;
- }
-}
-
-@mixin popover-box-button {
- padding: 0.2rem 0.5rem;
- line-height: 1.6rem;
- border: none;
- border-radius: 3px;
- box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
- color: white;
- cursor: pointer;
- font-size: 0.875rem;
- background: $oxford-blue;
- outline: none;
-
- @include button-hover;
- @include button-disabled;
-
- svg {
- margin-right: 0.5rem;
- }
-}
-
-@mixin popover-box-styles {
- border-radius: 3px;
- width: 411px; // see SiteNavigationToggle__dropdown
- box-shadow:
- 0 1px 3px 0 rgba(0, 0, 0, 0.15),
- 0 3px 15px rgba(0, 0, 0, 0.25);
- background: hsla(0, 0%, 100%, 0.98);
- color: #333;
-
- .header {
- background: $oxford-blue;
- color: white;
- font-size: 1rem;
- font-weight: 700;
- padding: 0.5rem 1rem;
- }
-
- form {
- display: flex;
- flex-direction: column;
- }
- button {
- @include popover-box-button;
- }
-
- button.close {
- align-self: flex-end;
- color: $oxford-blue;
- background-color: $white;
- &:hover {
- color: $white;
- background-color: $oxford-blue;
- }
- }
-}
-
-@mixin light-blue-button {
- background-color: $blue-10;
- border-radius: 3px;
- border: none;
- cursor: pointer;
- outline: none;
- padding: 0.25rem;
- color: $blue-100;
- transition: all 150ms;
- &:hover {
- background-color: $blue-20;
- }
-}
-
-@mixin topic-chip {
- a {
- display: flex;
- align-items: center;
- background-color: $blue-10;
- border-radius: 50px;
- padding: 8px 16px;
- white-space: nowrap;
- @include body-3-medium;
- color: $blue-90;
- transition: background-color 150ms;
- height: 32px;
-
- &:hover {
- background-color: $blue-20;
- }
- }
-}
-
-@mixin wrapper-spacing-sm {
- margin-left: auto;
- margin-right: auto;
- padding-left: $padding-x-sm;
- padding-right: $padding-x-sm;
-}
-
-@mixin wrapper-spacing-md {
- padding-left: $padding-x-md;
- padding-right: $padding-x-md;
-}
-
-@mixin wrapper-x-spacing {
- @include wrapper-spacing-sm;
-
- @include md-up {
- @include wrapper-spacing-md;
- }
-}
-
-@mixin content-wrapper {
- @include wrapper-x-spacing;
-}
-
-@mixin full-width {
- width: 100vw;
- margin-left: calc(50% - 50vw);
-}
-
-@mixin posts-list {
- margin-bottom: $vertical-spacing * 2;
- list-style-type: none;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax($grid-card-min-width, 1fr));
- gap: 1rem;
-}
-
-@mixin hide {
- display: none;
-}
-
-@mixin titling($h1-font-size) {
- .supertitle {
- margin-bottom: -($h1-font-size * 0.1);
- font-size: $h1-font-size * 40 * 0.01;
- }
- h1 {
- font-size: $h1-font-size;
- }
-}
-
-@mixin image-shadow {
- display: block;
- margin: 0 auto 1rem;
- box-shadow:
- rgba(0, 0, 0, 0.1) 0px 0px 2px 0px,
- rgba(0, 0, 0, 0.25) 0px 1px 2px 0px;
- padding: 10px;
- background-color: #fff;
- transition: all 300ms ease;
-}
-
-@mixin image-hover {
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
- opacity: 0.9;
-}
-
-@mixin overlay {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.4);
-}
-
-@mixin mobile-toggle-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 40px;
- height: 40px;
- padding: 0;
- font-size: 1.125rem;
-}
-
-// Polyfills for flexbox gap (https://caniuse.com/flexbox-gap)
-// In the (near) future, this can be removed and replaced with (column-)gap: $gap
-@mixin column-gap($gap) {
- > * {
- margin-right: $gap;
- &:last-child {
- margin-right: 0;
- }
- }
-}
-
-@mixin row-gap($gap) {
- > * {
- display: block;
- margin-bottom: $gap !important; // for subscribe popup in navbar
- &:last-child {
- margin-bottom: 0 !important;
- }
- }
-}
-
-// Adapted from https://coryrylan.com/blog/css-gap-space-with-flexbox
-@mixin gap-wrap($row-gap, $col-gap) {
- display: flex;
- flex-wrap: wrap;
- margin: -#{$row-gap} 0 0 -#{$col-gap};
- width: calc(100% + #{$col-gap});
-
- & > * {
- margin: #{$row-gap} 0 0 #{$col-gap};
- }
-}
-
-@mixin hide-site-chrome {
- .site-header,
- .alert-banner,
- .offset-subnavigation,
- .donate-footer,
- .cookie-notice,
- .site-footer {
- display: none;
- }
-}
-
-@mixin figure-margin {
- margin: 0 0 1rem;
-}
-
-@mixin figure-grapher-reset {
- @include figure-margin;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 1rem;
- text-align: center;
- line-height: 0;
- width: 100%;
-}
-
-@mixin datapage-section-title {
- @include h2-bold;
- & {
- margin: 0 0 24px;
- }
- @include sm-up {
- margin: 0 0 32px;
- }
-}
-
-@mixin expandable-paragraph__expand-button--full {
- display: block;
- height: 40px;
- padding: 8px 24px;
- @include body-3-medium;
- text-align: center;
- color: $blue-90;
- background-color: $blue-20;
- cursor: pointer;
- border: none;
- transition: background-color 0.1s ease-in-out;
- @include sm-up {
- display: inline-block;
- }
-
- &:hover {
- background-color: $blue-10;
- }
-}
-
-@mixin related-topics {
- h4 {
- color: $blue-40;
- }
-
- ul {
- list-style-type: none;
-
- li {
- margin-top: 16px;
-
- a {
- @include body-3-medium;
- color: $blue-90;
- position: relative;
-
- &:hover {
- text-decoration: underline;
- }
-
- &:after {
- content: "";
- background-color: $blue-90;
- mask: url($right-arrow) no-repeat;
- -webkit-mask: url($right-arrow) no-repeat;
- position: absolute;
- width: 9px;
- top: 0;
- height: 12px;
- background-repeat: no-repeat;
- margin-top: 4px;
- margin-left: 6px;
- }
- }
- }
- }
-}
-
-@mixin charts-checkbox {
- background: #fff;
- appearance: none;
- width: 16px;
- height: 16px;
- outline: 1px solid $gray-30;
- border-radius: 0;
- &:focus {
- outline-color: $blue-60;
- }
-
- &:active {
- background-color: $blue-10;
- }
- &:checked {
- background-color: $blue-50;
- outline-color: $blue-50;
- &:before {
- position: absolute;
- width: 16px;
- height: 16px;
- content: "";
- clip-path: path(
- "M3.087,8.509C2.799,8.218 2.802,7.749 3.093,7.461C3.383,7.173 3.853,7.176 4.141,7.466L6.528,9.878L11.862,4.547C12.152,4.257 12.621,4.258 12.91,4.547C13.2,4.836 13.199,5.306 12.91,5.595L7.049,11.453C6.909,11.593 6.72,11.671 6.523,11.67C6.326,11.67 6.137,11.59 5.998,11.45L3.087,8.509Z"
- );
- background-color: #fff;
- }
- &:focus {
- outline-color: $blue-90;
- }
- }
-}
-
-@mixin autocomplete-item-icon {
- @include body-3-medium;
- width: 16px;
- height: 16px;
- font-size: 12px;
- color: $blue-50;
-}
-
-// Trick to maintain aspect ratio of the container. We can use the
-// aspect-ratio property in the future when more browsers support it.
-// https://stackoverflow.com/a/10441480/9846837
-// $ratio is the aspect ratio as width/height (default: 1 for square)
-@mixin aspect-ratio($ratio: 1) {
- position: relative;
- width: 100%;
- height: 0;
- padding-bottom: math.percentage(math.div(1, $ratio));
-}
-
-// This mixin calculates the width of an item in a flex container given the
-// number of items we want per row. This is useful for situations where we want
-// the benefits of a grid (n items per row) but need to use flexbox for other
-// reasons (e.g. centering the last row of items rather than aligning it to the
-// grid).
-//
-// The calculation is as follows:
-// - We want the size of individual links to be such that we could fit N of them
-// side by side, with (N-1) gaps in between.
-// - This makes up 100% of the width: N * link width + (N-1) * gap = 100%
-// - Solving for link width: link width = (100% - (N-1) * gap) / N
-@mixin flex-item-width-for-row-of($items-per-row) {
- width: calc(
- (100% - (var(--grid-gap) * #{$items-per-row - 1})) / #{$items-per-row}
- );
-}
-
-@mixin heading-variant-base {
- text-wrap: unset;
- position: relative;
- @include sm-only {
- font-size: 1.5rem;
- line-height: 2rem;
- }
-}
-
-// Shared styles for heading variant decorative pseudo-elements
-// At lg, heading takes up 6 columns, so 200% is 12 columns then we add a missing gutter
-// Using percentages instead of absolute values because different browsers calculate the grid size differently
-@mixin heading-variant-pseudo-widths {
- @include md-up {
- width: calc(200% + var(--grid-gap));
- left: calc(-50% - var(--grid-gap) / 2);
- }
- @include md-only {
- width: 120%;
- left: -10%;
- }
- @include sm-only {
- width: 100%;
- left: 0;
- }
-}
-
-/* Add a light gray line above a heading when it's in the main article body (i.e. not an all-charts block, or in a two-column section) */
-@mixin h1-hr {
- text-wrap: unset;
- position: relative;
- margin-top: 96px;
- @include heading-variant-base;
-
- &::before {
- content: "";
- position: absolute;
- top: -48px;
- border-top: 1px solid $blue-10;
- @include heading-variant-pseudo-widths;
- }
-}
diff --git a/packages/charts/src/components/styles/typography.scss b/packages/charts/src/components/styles/typography.scss
deleted file mode 100644
index b3d542cf139..00000000000
--- a/packages/charts/src/components/styles/typography.scss
+++ /dev/null
@@ -1,585 +0,0 @@
-// Build Canada brand fonts
-// Headlines: Söhne Kraftig - modern neo-grotesque
-// Body: Financier Text - serif for readability
-// Mono: Founder's Grotesk Mono - for data/code
-$font-headline: "Soehne Kraftig", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-body: "Financier Text", Georgia, "Times New Roman", serif;
-$font-mono: "Founders Grotesk Mono", "Menlo", "Courier New", monospace;
-
-// Legacy aliases for backwards compatibility
-$sans-serif-font-stack: $font-headline;
-$serif-font-stack: $font-body;
-$monospace-font-stack: $font-mono;
-$default-font-features: "liga", "kern", "calt", "lnum";
-
-//
-// typographic features
-//
-
-@mixin small-caps {
- // only applies to Playfair
- font-family: $serif-font-stack;
- font-feature-settings: $default-font-features, "c2sc", "smcp";
- letter-spacing: 0.05em;
-}
-
-@mixin oldstyle-numerals {
- // useful for changing Lato's numerals
- font-feature-settings: $default-font-features, "onum";
-}
-
-@mixin lining-numerals {
- // useful for changing Playfair's numerals
- font-feature-settings: $default-font-features, "lnum";
-}
-
-@mixin superscript {
- position: static;
- top: auto;
- font-size: 100%;
- font-feature-settings: $default-font-features, "sups";
-}
-
-@mixin subscript {
- position: static;
- bottom: auto;
- font-size: 100%;
- font-feature-settings: $default-font-features, "subs";
-}
-
-@mixin fraction {
- // when enabled, render digits/slashes as fractions
- // e.g., "in 3/4 time" renders as "in ¾ time"
- font-feature-settings: $default-font-features, "frac";
-}
-
-body {
- // use the default features everywhere
- font-feature-settings: $default-font-features;
-}
-
-//
-// page elements
-//
-
-@mixin display-1-semibold {
- font-family: $serif-font-stack;
- font-size: 3.5rem;
- line-height: 1.4;
- font-weight: 600;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: -0.01rem;
-}
-
-.display-1-semibold {
- @include display-1-semibold;
-}
-
-@mixin display-2-semibold {
- font-family: $serif-font-stack;
- font-size: 2.5rem;
- line-height: 1.2;
- font-weight: 600;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: -0.01rem;
-
- @include sm-up {
- font-size: 2.5rem;
- }
-}
-
-.display-2-semibold {
- @include display-2-semibold;
-}
-
-@mixin display-3-semibold {
- font-family: $sans-serif-font-stack;
- font-size: 2rem;
- line-height: 1.1875;
- font-weight: 500;
- display: block;
- margin-top: 32px;
- margin-bottom: 24px;
-
- @include sm-up {
- margin-top: 48px;
- font-size: 2rem;
- }
-}
-
-.display-3-semibold {
- @include display-3-semibold;
-}
-
-@mixin h1-semibold {
- font-family: $serif-font-stack;
- font-size: 1.5rem;
- line-height: 1.25;
- font-weight: 600;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: 0;
-
- @include sm-up {
- font-size: 2rem;
- }
-}
-
-.h1-semibold {
- @include h1-semibold;
-}
-
-@mixin h1-bold-italic {
- font-family: $serif-font-stack;
- font-size: 1.5rem;
- line-height: 1.25;
- font-weight: 700;
- font-style: italic;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: 0;
-
- @include sm-up {
- font-size: 2rem;
- }
-}
-
-.h1-bold-italic {
- @include h1-bold-italic;
-}
-
-@mixin h2-bold {
- font-family: $serif-font-stack;
- font-size: 1.25rem;
- line-height: calc(4 / 3);
- font-weight: 700;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: 0;
-
- @include sm-up {
- font-size: 1.5rem;
- }
-}
-
-.h2-bold {
- @include h2-bold;
-}
-
-@mixin h2-semibold {
- font-family: $serif-font-stack;
- font-size: 1.25rem;
- line-height: 1.2;
- font-weight: 600;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: 0;
-}
-
-.h2-semibold {
- @include h2-bold;
-}
-
-@mixin h3-bold {
- font-family: $serif-font-stack;
- font-size: 1.125rem;
- line-height: calc(4 / 3);
- font-weight: 700;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: 0;
-}
-
-.h3-bold {
- @include h3-bold;
-}
-
-@mixin h3-semibold {
- font-family: $serif-font-stack;
- font-size: 1.125rem;
- line-height: calc(4 / 3);
- font-weight: 600;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: 0;
-}
-
-.h3-semibold {
- @include h3-semibold;
-}
-
-@mixin h4-semibold {
- font-family: $serif-font-stack;
- font-size: 1rem;
- line-height: 1.5;
- font-weight: 600;
- display: block;
- margin-top: 48px;
- margin-bottom: 24px;
- letter-spacing: 0;
-}
-
-.h4-semibold {
- @include h4-semibold;
-}
-
-@mixin h5-black-caps {
- font-family: $sans-serif-font-stack;
- font-size: 0.75rem;
- font-weight: 900;
- line-height: calc(4 / 3);
- letter-spacing: 0.1em;
- text-transform: uppercase;
-}
-
-.h5-black-caps {
- @include h5-black-caps;
-}
-
-@mixin h6-black-caps {
- font-family: $sans-serif-font-stack;
- font-size: 0.625rem;
- font-weight: 900;
- line-height: 1.25;
- letter-spacing: 0.1em;
- text-transform: uppercase;
-}
-
-.h6-black-caps {
- @include h6-black-caps;
-}
-
-@mixin subtitle-1 {
- font-family: $sans-serif-font-stack;
- font-size: 1.5rem;
- line-height: calc(4 / 3);
- font-weight: 400;
- letter-spacing: 0;
- margin-top: 32px;
- margin-bottom: 16px;
-}
-
-.subtitle-1 {
- @include subtitle-1;
-}
-
-@mixin subtitle-1-bold {
- @include subtitle-1;
- font-weight: 700;
-}
-
-.subtitle-1-bold {
- @include subtitle-1-bold;
-}
-
-@mixin subtitle-2 {
- font-family: $sans-serif-font-stack;
- font-size: 1.375rem;
- line-height: calc(28 / 22);
- font-weight: 400;
- letter-spacing: 0;
-}
-
-.subtitle-2 {
- @include subtitle-2;
-}
-
-@mixin subtitle-2-bold {
- font-family: $sans-serif-font-stack;
- font-size: 1.25rem;
- line-height: 1.2;
- font-weight: 700;
-}
-
-.subtitle-2-bold {
- @include subtitle-2-bold;
-}
-
-@mixin overline-black-caps {
- font-family: $sans-serif-font-stack;
- font-size: 0.75rem;
- line-height: calc(4 / 3);
- font-weight: 900;
- letter-spacing: 0.1rem;
- text-transform: uppercase;
-}
-
-.overline-black-caps {
- @include overline-black-caps;
-}
-
-@mixin body-1-regular {
- font-family: $sans-serif-font-stack;
- font-size: 1.125rem;
- line-height: 1.55;
- font-weight: 400;
- letter-spacing: 0;
-}
-
-.body-1-regular {
- @include body-1-regular;
-}
-
-@mixin body-1-bold {
- @include body-1-regular;
- font-weight: 700;
-}
-
-.body-1-bold {
- @include body-1-bold;
-}
-
-@mixin body-1-regular-underlined {
- @include body-1-regular;
- text-decoration: underline;
-}
-
-.body-1-regular-underlined {
- @include body-1-regular-underlined;
-}
-
-@mixin body-1-regular-superscript {
- @include body-1-regular;
- font-size: 0.5625rem;
- vertical-align: top;
-}
-
-.body-1-regular-superscript {
- @include body-1-regular-superscript;
-}
-
-@mixin body-1-bold {
- @include body-1-regular;
- font-weight: 700;
-}
-
-.body-1-bold {
- @include body-1-bold;
-}
-
-@mixin body-2-regular {
- font-family: $sans-serif-font-stack;
- font-size: 1rem;
- line-height: 1.5;
- font-weight: 400;
- letter-spacing: 0;
-}
-
-.body-2-regular {
- @include body-2-regular;
-}
-@mixin body-2-bold {
- font-family: $sans-serif-font-stack;
- font-size: 1rem;
- line-height: 1.5;
- font-weight: 700;
- letter-spacing: 0;
-}
-
-.body-2-bold {
- @include body-2-bold;
-}
-
-@mixin body-2-regular-underlined {
- @include body-2-regular;
- text-decoration: underline;
-}
-
-.body-2-regular-underlined {
- @include body-2-regular-underlined;
-}
-
-@mixin body-2-regular-superscript {
- @include body-2-regular;
- font-size: 0.5rem;
- vertical-align: top;
-}
-
-.body-2-regular-superscript {
- @include body-2-regular-superscript;
-}
-
-@mixin body-2-semibold {
- @include body-2-regular;
- font-weight: 600;
-}
-
-.body-2-semibold {
- @include body-2-semibold;
-}
-
-@mixin body-3-regular {
- font-family: $sans-serif-font-stack;
- font-size: 0.875rem;
- line-height: 1.5;
- font-weight: 400;
-}
-
-.body-3-regular {
- @include body-3-regular;
-}
-
-@mixin body-3-medium {
- font-family: $sans-serif-font-stack;
- font-size: 0.875rem;
- line-height: 1.5;
- font-weight: 500;
-}
-
-.body-3-medium {
- @include body-3-medium;
-}
-
-@mixin body-3-medium-underlined {
- @include body-3-medium;
- text-decoration: underline;
-}
-
-.body-3-medium-underlined {
- @include body-3-medium-underlined;
-}
-
-@mixin body-3-medium-italic {
- @include body-3-medium;
- font-style: italic;
-}
-
-.body-3-medium-italic {
- @include body-3-medium-italic;
-}
-
-@mixin body-3-medium-italic-underlined {
- @include body-3-medium;
- text-decoration: underline;
- font-style: italic;
-}
-
-.body-3-medium-italic-underlined {
- @include body-3-medium-italic-underlined;
-}
-
-@mixin body-3-bold {
- font-family: $sans-serif-font-stack;
- font-size: 0.875rem;
- line-height: 1.5;
- font-weight: 700;
-}
-
-.body-3-bold {
- @include body-3-bold;
-}
-
-@mixin label-1-regular {
- font-family: $sans-serif-font-stack;
- font-size: 0.875rem;
- font-weight: 400;
- letter-spacing: normal;
- line-height: normal;
-}
-
-.label-1-regular {
- @include label-1-regular;
-}
-
-@mixin label-2-medium {
- font-family: $sans-serif-font-stack;
- font-size: 0.8125rem;
- font-weight: 500;
- letter-spacing: 0.01em;
- line-height: normal;
-}
-
-.label-2-medium {
- @include label-2-medium;
-}
-
-@mixin label-2-regular {
- font-family: $sans-serif-font-stack;
- font-size: 0.8125rem;
- font-weight: 400;
- letter-spacing: 0.01em;
- line-height: normal;
-}
-
-.label-2-regular {
- @include label-2-regular;
-}
-
-@mixin label-2-bold {
- font-family: $sans-serif-font-stack;
- font-size: 0.8125rem;
- font-weight: 700;
- line-height: normal;
- letter-spacing: 0.01em;
-}
-
-.label-2-bold {
- @include label-2-bold;
-}
-
-@mixin note-1-regular {
- font-family: $sans-serif-font-stack;
- font-size: 0.75rem;
- font-weight: 400;
- letter-spacing: 0.01em;
- line-height: calc(4 / 3);
-}
-
-.note-1-regular {
- @include note-1-regular;
-}
-
-@mixin note-1-medium {
- @include note-1-regular;
- font-weight: 500;
-}
-
-.note-1-medium {
- @include note-1-medium;
-}
-
-@mixin note-2-regular {
- font-family: $sans-serif-font-stack;
- font-size: 11px;
- font-style: normal;
- font-weight: 400;
- line-height: normal;
- letter-spacing: 0.22px;
-}
-
-.note-2-regular {
- @include note-2-regular;
-}
-
-@mixin note-12-medium {
- font-family: $sans-serif-font-stack;
- font-size: 0.75rem;
- font-weight: 500;
- line-height: 1.33;
- letter-spacing: 0.0075rem;
-}
-
-.note-12-medium {
- @include note-12-medium;
-}
-
-@mixin note-13-medium {
- font-family: $sans-serif-font-stack;
- font-size: 0.8125rem;
- font-weight: 500;
- line-height: 1rem;
-}
-
-.note-13-medium {
- @include note-13-medium;
-}
diff --git a/packages/charts/src/components/styles/util.scss b/packages/charts/src/components/styles/util.scss
deleted file mode 100644
index a621b4bce37..00000000000
--- a/packages/charts/src/components/styles/util.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-/* Float Clearing
---------------------------------------------- */
-
-.clearfix:before {
- content: " ";
- display: table;
-}
-
-.clearfix:after {
- clear: both;
- content: " ";
- display: table;
-}
-
-.nowrap {
- white-space: nowrap;
-}
-
-.align-left {
- text-align: left;
-}
-.align-center {
- text-align: center;
-}
-.align-right {
- text-align: right;
-}
-
-.list-style-none {
- list-style: none;
-}
-
-.display-block {
- display: block;
-}
-
-.hide-sm-only {
- @include sm-only {
- display: none !important;
- }
-}
-
-.show-sm-only {
- @include sm-up {
- display: none !important;
- }
-}
-
-.hide-sm-up {
- @include sm-up {
- display: none !important;
- }
-}
-
-.hide-md-down {
- @include md-down {
- display: none !important;
- }
-}
-
-.hide-md-up {
- @include md-up {
- display: none !important;
- }
-}
-
-.hide-lg-down {
- @include lg-down {
- display: none !important;
- }
-}
-
-.hide-lg-up {
- @include lg-up {
- display: none !important;
- }
-}
-
-// only show for screen readers
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- border: 0;
-}
diff --git a/packages/charts/src/components/styles/variables.scss b/packages/charts/src/components/styles/variables.scss
deleted file mode 100644
index 86038050b34..00000000000
--- a/packages/charts/src/components/styles/variables.scss
+++ /dev/null
@@ -1,208 +0,0 @@
-/*******************************************************************************
- * Spacing
- */
-
-$padding-x-sm: 24px;
-$padding-x-md: 80px;
-$vertical-spacing: 16px;
-
-:root {
- --grid-gap: 24px;
-
- @media (max-width: 768px) {
- --grid-gap: 16px;
- }
-}
-
-/*******************************************************************************
-* Sizes
-*/
-
-$header-border-height: 4px;
-$header-bar-height-sm: 64px;
-$header-bar-height-md: 72px;
-$header-height-sm: $header-bar-height-sm + $header-border-height;
-$header-height-md: $header-bar-height-md + $header-border-height;
-
-$content-max-width: 800px;
-$sidebar-content-width: 224px;
-$sidebar-width: #{$sidebar-content-width + 2 * $padding-x-md};
-$sidebar-padding-top: 32px;
-$sidebar-toggle-width: 32px;
-$sidebar-closed-drawer-width: 0;
-$text-min-content-width: 480px;
-$text-max-content-width: 640px;
-// NB: the side by side layout depends on
-// $graph-min-content-width < $text-max-content-width + $graph-max-content-width
-$graph-min-content-width: 700px;
-$graph-max-content-width: 800px;
-
-$wrapper-max-width: $text-min-content-width + $graph-min-content-width + 3 *
- $padding-x-md;
-
-$grid-card-min-width: 320px;
-
-$grapher-height: 575px;
-
-$article-cover-height: 224px;
-$article-page-top-offset: 88px;
-
-$search-cta-height: 40px;
-
-// Grapher sizing
-// Keep in sync with DEFAULT_GRAPHER_WIDTH, and the (dynamic/static) thumbnail generation code
-$grapher-thumbnail-width_deprecated: 850px;
-$grapher-thumbnail-height_deprecated: 600px;
-
-// Keep in sync with GRAPHER_THUMBNAIL_WIDTH and GRAPHER_THUMBNAIL_HEIGHT
-$grapher-thumbnail-width: 300px;
-$grapher-thumbnail-height: 160px;
-
-/*******************************************************************************
-* Breakpoints
-*/
-
-// $sm is duplicated in SiteConstants.ts and @ourworldindata/utils/../image.ts
-// Please change them there if you change them here.
-$sm: 768px;
-$md: 960px;
-$lg: 1280px;
-$xlg: 1440px;
-$xxlg: 1536px;
-
-@mixin sm-only {
- @media (max-width: $sm) {
- @content;
- }
-}
-
-@mixin sm-up {
- @media (min-width: #{$sm + 1}) {
- @content;
- }
-}
-
-@mixin md-only {
- @media (min-width: #{$sm + 1}) and (max-width: $md) {
- @content;
- }
-}
-
-@mixin md-down {
- @media (max-width: $md) {
- @content;
- }
-}
-
-@mixin md-up {
- @media (min-width: #{$md + 1}) {
- @content;
- }
-}
-
-@mixin lg-only {
- @media (min-width: #{$md + 1}) and (max-width: $lg) {
- @content;
- }
-}
-
-@mixin lg-down {
- @media (max-width: $lg) {
- @content;
- }
-}
-
-@mixin lg-up {
- @media (min-width: #{$lg + 1}) {
- @content;
- }
-}
-
-@mixin xlg-only {
- @media (min-width: #{$lg + 1}) and (max-width: $xlg) {
- @content;
- }
-}
-
-// Blocks are shown side-by-side from that breakpoint up (when applicable)
-
-@mixin xlg-up {
- @media only screen and (min-width: #{$xlg + 1}) {
- @content;
- }
-}
-
-// mixin duplicated in packages/@ourworldindata/grapher/src/core/grapher.scss
-@mixin xxlg-down {
- @media only screen and (max-width: $xxlg) {
- @content;
- }
-}
-
-// The sidebar is shown from that breakpoint up
-@mixin xxlg-up {
- @media only screen and (min-width: #{$xxlg + 1}) {
- @content;
- }
-}
-
-@mixin touch-device {
- @media (hover: none) {
- @content;
- }
-}
-
-/*******************************************************************************
- * Z-index
- */
-
-$zindex-input: 1;
-$zindex-deprecation-notice: 10;
-$zindex-global-entity-select: 11;
-$zindex-footnote: 15;
-$zindex-sidebar: 20;
-$zindex-sidebar-page-overlay: $zindex-sidebar - 1;
-$zindex-popover: 100;
-$zindex-search-overlay: 100;
-$zindex-cookie-notice: 110;
-$zindex-site-header: 120;
-$zindex-extended-header: $zindex-site-header - 1; // ensures search overlays topic-page headers and ToC does not
-$zindex-tooltip: 1070;
-$zindex-lightbox: 99998;
-$zindex-adminbar: 99999;
-
-/*******************************************************************************
- * Explorers
- */
-
-$max-width-data-explorer: 1200px;
-
-/*******************************************************************************
-* Icons
-*/
-
-$right-arrow: 'data:image/svg+xml;utf8,';
-
-/*******************************************************************************
-* Box Shadows
-*/
-
-$box-shadow-m:
- 0px 0px 0px 0px #31250208,
- 0px 6px 13px 0px #31250208,
- 0px 93px 37px 0px #31250203,
- 0px 145px 41px 0px #31250200;
-
-$box-shadow-xl:
- 0px 0px 0px 0px #00000005,
- 0px 10px 23px 0px #00000005,
- 0px 41px 41px 0px #00000005,
- 0px 92px 55px 0px #00000003,
- 0px 164px 66px 0px #00000000,
- 0px 256px 72px 0px #00000000;
-
-/*******************************************************************************
-* Linear topic pages
-*/
-
-$margin-bottom-section-heading-ltp: 32px;
diff --git a/packages/charts/src/config/ChartsConfig.ts b/packages/charts/src/config/ChartsConfig.ts
deleted file mode 100644
index 2fd46d491d9..00000000000
--- a/packages/charts/src/config/ChartsConfig.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- * Configuration interface for @buildcanada/charts
- *
- * This allows customization of branding, API endpoints, and error handling
- * to make the library work independently of any specific data provider.
- */
-
-export interface ChartsBranding {
- /**
- * Text displayed for the license (e.g., "CC BY")
- * @default "CC BY"
- */
- licenseText?: string
-
- /**
- * URL for the license link
- * @default "https://creativecommons.org/licenses/by/4.0/"
- */
- licenseUrl?: string
-
- /**
- * Text displayed when showing "Powered by" attribution
- * @default "Powered by Charts"
- */
- poweredByText?: string
-
- /**
- * URL for the "Powered by" link
- */
- poweredByUrl?: string
-
- /**
- * Support email for error messages
- */
- supportEmail?: string
-
- /**
- * Custom tooltip text for the license/attribution section
- */
- licenseTooltip?: string
-
- /**
- * Custom logos to use in charts
- */
- logos?: Record{code}
-
-
- {option.title}
-
- {title}
- {onDismiss &&
- What you should know about this data
-
-
- {props.descriptionKey.map((text, i) => (
-
- )}
-
- {this.title.title}{" "}
- {(this.title.attributionShort || this.title.titleVariant) && (
- <>
-
- {joinTitleFragments(
- this.title.attributionShort,
- this.title.titleVariant
- )}
- {" "}
-
- )}
- {this.editUrl && (
-
-
- )
- }
-
- override render(): React.ReactElement {
- return (
-
- {this.sourcesSectionHeading}
-
-
- How we process data at Our World in Data:
-
-
- How to cite this data:
-
-
- {displayedNames.map((entityName) => (
-
- {remaining > 0 && (
-