From b12c77b7820e04005d0ca4f8e62038b7bf59dc0e Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Mon, 5 Aug 2024 19:00:03 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20extract=20LabeledSwitch=20into?= =?UTF-8?q?=20@ourworldindata/components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/LabeledSwitch/LabeledSwitch.scss | 98 +++++++++++++++++ .../src/LabeledSwitch}/LabeledSwitch.tsx | 0 .../@ourworldindata/components/src/index.ts | 1 + .../grapher/src/controls/LabeledSwitch.scss | 102 ------------------ .../src/controls/settings/AbsRelToggle.tsx | 2 +- .../controls/settings/FacetYDomainToggle.tsx | 2 +- .../controls/settings/NoDataAreaToggle.tsx | 2 +- .../controls/settings/TableFilterToggle.tsx | 2 +- .../src/controls/settings/ZoomToggle.tsx | 2 +- .../grapher/src/core/grapher.scss | 2 +- site/owid.scss | 1 + 11 files changed, 106 insertions(+), 108 deletions(-) create mode 100644 packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss rename packages/@ourworldindata/{grapher/src/controls => components/src/LabeledSwitch}/LabeledSwitch.tsx (100%) delete mode 100644 packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss diff --git a/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss b/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.scss new file mode 100644 index 00000000000..9d7c6cc4486 --- /dev/null +++ b/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%); + } +} diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx b/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.tsx similarity index 100% rename from packages/@ourworldindata/grapher/src/controls/LabeledSwitch.tsx rename to packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.tsx diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts index 03a33d19d32..c7118e4ab21 100644 --- a/packages/@ourworldindata/components/src/index.ts +++ b/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 { diff --git a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss b/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss deleted file mode 100644 index 4096841ada7..00000000000 --- a/packages/@ourworldindata/grapher/src/controls/LabeledSwitch.scss +++ /dev/null @@ -1,102 +0,0 @@ -$light-fill: #dadada; -$active-fill: #dbe5f0; - -$info-icon: #a1a1a1; -$active-switch: #6e87a2; - -$medium: 400; -$lato: $sans-serif-font-stack; - -@at-root { - // placed either directly in controls row or in settings menu - .controlsRow .chart-controls, - .settings-menu-contents { - // 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%); - } - } - } -} diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx index 9b8fb5e89d3..7db655a3e87 100644 --- a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx +++ b/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 diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx index acda814ddb9..359fb224b28 100644 --- a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx +++ b/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 diff --git a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx index f64af1d17c1..2c0af0baba7 100644 --- a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx +++ b/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 diff --git a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx index c2eff6702b5..d0aefe432f1 100644 --- a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx +++ b/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 { diff --git a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx index 56a96380048..cbbaf5871b3 100644 --- a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx +++ b/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 diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss index 901f986381b..cf0da76bce3 100644 --- a/packages/@ourworldindata/grapher/src/core/grapher.scss +++ b/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"; diff --git a/site/owid.scss b/site/owid.scss index f9fd78707ad..b5f2cfa34c0 100644 --- a/site/owid.scss +++ b/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";