Merge pull request #3850 from owid/extract-labeled-switch

🔨 extract `LabeledSwitch` into components library

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

@@ -0,0 +1,98 @@
+$dark-text: #5b5b5b;
+$light-text: #858585;
+$light-fill: #dadada;
+$active-fill: #dbe5f0;
+
+$info-icon: #a1a1a1;
+$active-switch: #6e87a2;
+
+$medium: 400;
+$lato: $sans-serif-font-stack;
+
+// on/off switch with label written to the right
+.labeled-switch {
+    // keep in sync with TableFilterToggle.tsx
+    // where the width of a labeled switch is calculated
+
+    display: flex;
+    color: $light-text;
+    font: $medium 13px/16px $lato;
+    letter-spacing: 0.01em;
+
+    position: relative;
+    margin: 8px 0;
+    -webkit-user-select: none;
+    user-select: none;
+
+    label {
+        color: $dark-text;
+        padding-left: 35px;
+        white-space: nowrap;
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        svg {
+            color: $info-icon;
+            height: 13px;
+            padding: 0 0.333em;
+        }
+    }
+
+    .labeled-switch-subtitle {
+        // only show subtitle in settings menu, otherwise use icon + tooltip
+        display: none;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+    }
+
+    .outer {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: " ";
+        width: 29px;
+        height: 16px;
+        background: $light-fill;
+        border-radius: 8px;
+        pointer-events: none;
+        .inner {
+            position: relative;
+            content: " ";
+            width: 10px;
+            height: 10px;
+            background: $light-text;
+            border-radius: 5px;
+            top: 3px;
+            left: 3px;
+            pointer-events: none;
+            transition: transform 333ms;
+        }
+    }
+
+    &:hover {
+        .outer .inner {
+            background: $dark-text;
+        }
+    }
+
+    input:focus-visible + .outer {
+        outline: 2px solid $controls-color;
+    }
+
+    input:checked + .outer {
+        background: $active-fill;
+        .inner {
+            background: $active-switch;
+            transform: translate(13px, 0);
+        }
+    }
+    &:hover input:checked + .outer .inner {
+        background: darken($active-switch, 13%);
+    }
+}

packages/@ourworldindata/components/src/index.ts

@@ -32,6 +32,7 @@ export {
 } from "./IndicatorKeyData/IndicatorKeyData.js"
 export { IndicatorProcessing } from "./IndicatorProcessing/IndicatorProcessing.js"
 
+export { LabeledSwitch } from "./LabeledSwitch/LabeledSwitch.js"
 export { Checkbox } from "./Checkbox.js"
 export { RadioButton } from "./RadioButton.js"
 export {

packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { ChartTypeName, StackMode } from "@ourworldindata/types"
-import { LabeledSwitch } from "../LabeledSwitch"
+import { LabeledSwitch } from "@ourworldindata/components"
 
 const { LineChart, ScatterPlot } = ChartTypeName
 

packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx

@@ -3,7 +3,7 @@ import { computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { FacetAxisDomain, FacetStrategy } from "@ourworldindata/types"
 import { AxisConfig } from "../../axis/AxisConfig"
-import { LabeledSwitch } from "../LabeledSwitch"
+import { LabeledSwitch } from "@ourworldindata/components"
 
 export interface FacetYDomainToggleManager {
     facetStrategy?: FacetStrategy

packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { computed, action } from "mobx"
 import { observer } from "mobx-react"
-import { LabeledSwitch } from "../LabeledSwitch"
+import { LabeledSwitch } from "@ourworldindata/components"
 
 export interface NoDataAreaToggleManager {
     showNoDataArea?: boolean

packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
 import { DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL } from "../../core/GrapherConstants"
-import { LabeledSwitch } from "../LabeledSwitch"
+import { LabeledSwitch } from "@ourworldindata/components"
 import { Bounds } from "@ourworldindata/utils"
 
 export interface TableFilterToggleManager {

packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
-import { LabeledSwitch } from "../LabeledSwitch"
+import { LabeledSwitch } from "@ourworldindata/components"
 
 export interface ZoomToggleManager {
     zoomToSelection?: boolean

packages/@ourworldindata/grapher/src/core/grapher.scss

@@ -7,6 +7,7 @@
 @import "../../../components/src/CodeSnippet/code-snippet.scss";
 @import "../../../components/src/ExpandableToggle/ExpandableToggle.scss";
 
+@import "../../../components/src/LabeledSwitch/LabeledSwitch.scss";
 @import "../../../components/src/IndicatorSources/IndicatorSources.scss";
 @import "../../../components/src/IndicatorProcessing/IndicatorProcessing.scss";
 
@@ -51,7 +52,6 @@ $zindex-controls-drawer: 150;
 // e.g. &.narrow is equivalent to .GrapherComponent.narrow
 .GrapherComponent {
     @import "../controls/CommandPalette.scss";
-    @import "../controls/LabeledSwitch.scss";
     @import "../controls/Controls.scss";
     @import "../controls/SettingsMenu.scss";
     @import "../controls/MapProjectionMenu.scss";

site/owid.scss

@@ -25,6 +25,7 @@
 @import "../packages/@ourworldindata/components/src/styles/util.scss";
 @import "../packages/@ourworldindata/components/src/styles/mixins.scss";
 
+@import "../packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss";
 @import "../packages/@ourworldindata/components/src/CodeSnippet/code-snippet.scss";
 @import "../packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss";
 @import "../packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.scss";