🔨 extract LabeledSwitch into components library

[ikesau]

I need this thing for the data catalog, and didn't want to bog that PR down with a dependency refactor 🙂

The SCSS was scoped pretty aggressively to

@at-root {
    .controlsRow .chart-controls,
    .settings-menu-contents {
        .labeled-switch {
            // rules here
        }
}

It's the only component we have with the class name labeled-switch - so my first instinct is that it's safe to lift this up. I've also gone through and checked each of the places it's used:

TableFilterToggle.tsx
https://github.com/user-attachments/assets/d916b9bd-c613-47a7-b3b3-522d60a4aaec

FacetYDomainToggle.tsx
https://github.com/user-attachments/assets/263aa2bd-3ebe-43fa-b136-5a3473464358

AbsRelToggle.tsx
https://github.com/user-attachments/assets/9d2cdf3a-b12d-4a48-871f-06f32144dbe7

ZoomToggle.tsx
https://github.com/user-attachments/assets/e21a0686-86dc-4a7c-aa8e-fb1603eeb9eb

NoDataAreaToggle.tsx
Where do we show this? 😀

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-extract-labeled-switch

• Site-screenshots: https://github.com/owid/site-screenshots/compare/extract-labeled-switch
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/extract-labeled-switch

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-08-05 23:37:20 UTC
Execution time: 1.18 seconds

[marcelgerber]

NoDataAreaToggle.tsx
Where do we show this? 😀

On Marimekko only, you're fine :) http://staging-site-extract-labeled-switch/grapher/life-expectancy-marimekko

[marcelgerber]

yes please!