✨ (entity selector) redesign

owid · Apr 8, 2024 · 889ebd5 · 889ebd5
1 parent 07f7537
commit 889ebd5
Show file tree

Hide file tree

Showing 20 changed files with 715 additions and 283 deletions.
diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -57,11 +57,10 @@
     }
 
     .label {
+        @include grapher_label-2-regular;
         padding-left: $checkbox-size + 8px;
         cursor: pointer;
-        font-size: 14px;
-        letter-spacing: 0.01em;
-        line-height: 1.15;
+        user-select: none;
     }
 
     &:hover {

diff --git a/packages/@ourworldindata/components/src/Checkbox.tsx b/packages/@ourworldindata/components/src/Checkbox.tsx
@@ -4,8 +4,8 @@ import { faCheck } from "@fortawesome/free-solid-svg-icons"
 
 export class Checkbox extends React.Component<{
     checked: boolean
-    onChange: () => any
-    label: string | React.ReactNode
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    label: React.ReactNode
 }> {
     render(): JSX.Element {
         const { checked, onChange, label } = this.props

diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
@@ -0,0 +1,72 @@
+.radio {
+    $radio-size: 16px;
+
+    $light-stroke: #dadada;
+    $hover-stroke: #a4b6ca;
+    $active-fill: #dbe5f0;
+
+    position: relative;
+
+    input {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        cursor: pointer;
+    }
+
+    .outer {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: " ";
+        width: $radio-size;
+        height: $radio-size;
+
+        background: white;
+        pointer-events: none;
+        border-radius: 50%;
+        border: 1px solid #a4b6ca;
+        color: $dark-text;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .inner {
+            display: none;
+            width: $radio-size / 2;
+            height: $radio-size / 2;
+            background-color: #6e87a2;
+            border-radius: 50%;
+        }
+    }
+
+    input:focus-visible + .outer {
+        outline: 2px solid $controls-color;
+    }
+
+    input:active + .outer > .inner {
+        display: block;
+    }
+
+    input:checked + .outer > .inner {
+        display: block;
+    }
+
+    input:checked:active + .outer > .inner {
+        display: block;
+    }
+
+    .label {
+        @include grapher_label-2-regular;
+        padding-left: $radio-size + 8px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    &:hover {
+        input:not(:checked) + .custom {
+            border-color: $hover-stroke;
+        }
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.tsx b/packages/@ourworldindata/grapher/src/controls/RadioButton.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+
+export class RadioButton extends React.Component<{
+    checked: boolean
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    label: React.ReactNode
+    group?: string
+}> {
+    render(): JSX.Element {
+        const { checked, onChange, label, group } = this.props
+
+        return (
+            <div className="radio">
+                <label>
+                    <input
+                        type="radio"
+                        name={group}
+                        checked={checked}
+                        onChange={onChange}
+                    />
+                    <div className="outer">
+                        {checked && <div className="inner" />}
+                    </div>
+                    <div className="label">
+                        {label} {checked}
+                    </div>
+                </label>
+            </div>
+        )
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -202,7 +202,10 @@ import {
 } from "../captionedChart/StaticChartRasterizer.js"
 import { SlopeChartManager } from "../slopeCharts/SlopeChart"
 import { SidePanel } from "../sidePanel/SidePanel"
-import { EntitySelector } from "../entitySelector/EntitySelector"
+import {
+    EntitySelector,
+    type EntitySelectorState,
+} from "../entitySelector/EntitySelector"
 import { SlideInDrawer } from "../slideInDrawer/SlideInDrawer"
 
 declare global {
@@ -464,6 +467,8 @@ export class Grapher
 
     @observable.ref legacyConfigAsAuthored: Partial<LegacyGrapherInterface> = {}
 
+    @observable entitySelectorState: Partial<EntitySelectorState> = {}
+
     @computed get dataApiUrlForAdmin(): string | undefined {
         return this.props.dataApiUrlForAdmin
     }
@@ -2151,7 +2156,7 @@ export class Grapher
             0,
             // the chart takes up 9 columns in 12-column grid
             (9 / 12) * this.frameBounds.width,
-            this.frameBounds.height
+            this.frameBounds.height - 2 // 2px accounts for the border
         )
     }
 
@@ -2162,7 +2167,7 @@ export class Grapher
             0, // not in use; intentionally set to zero
             0, // not in use; intentionally set to zero
             this.frameBounds.width - this.captionedChartBounds.width,
-            this.frameBounds.height
+            this.captionedChartBounds.height
         )
     }
 
@@ -3128,7 +3133,7 @@ export class Grapher
         return this.canHighlightEntities
             ? `Select ${this.entityTypePlural}`
             : this.canChangeEntity
-              ? `Change ${a(this.entityType)}`
+              ? `Choose ${a(this.entityType)}`
               : `Add/remove ${this.entityTypePlural}`
     }
 

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -4,10 +4,9 @@ export const GRAPHER_EMBEDDED_FIGURE_ATTR = "data-grapher-src"
 export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config"
 
 export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage"
-
-export const GRAPHER_DRAWER_ID = "grapher-drawer"
-
+export const GRAPHER_SCROLLABLE_CONTAINER_CLASS = "scrollable-container"
 export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe"
+export const GRAPHER_DRAWER_ID = "grapher-drawer"
 
 export const DEFAULT_GRAPHER_CONFIG_SCHEMA =
     "https://files.ourworldindata.org/schemas/grapher-schema.003.json"

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -88,6 +88,7 @@ $zindex-controls-drawer: 150;
 @import "../fullScreen/FullScreen.scss";
 @import "../../../components/src/Checkbox.scss";
 @import "../closeButton/CloseButton.scss";
+@import "../controls/RadioButton.scss";
 
 .grapher_dark {
     color: $dark-text;

diff --git a/packages/@ourworldindata/grapher/src/core/typography.scss b/packages/@ourworldindata/grapher/src/core/typography.scss
@@ -83,6 +83,24 @@
     @include grapher_body-3-medium;
 }
 
+@mixin grapher_body-3-regular {
+    @include grapher_body-3-medium;
+    font-weight: 400;
+}
+
+.grapher_body-3-regular {
+    @include grapher_body-3-regular;
+}
+
+@mixin grapher_body-3-medium-italic {
+    @include grapher_body-3-medium;
+    font-style: italic;
+}
+
+.grapher_body-3-medium-italic {
+    @include grapher_body-3-medium-italic;
+}
+
 //
 // labels
 //
@@ -101,3 +119,18 @@
 .grapher_label-1-medium {
     @include grapher_label-1-medium;
 }
+
+@mixin grapher_label-2-regular {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: 0.01em;
+}
+
+.grapher_label-2-regular {
+    @include grapher_label-2-regular;
+}