ntp: prep a re-usable switch (#1339)

Author: shakyShane

special-pages/pages/onboarding/app/Components.js

@@ -12,8 +12,7 @@ import { h } from 'preact';
 import { Background } from './components/Background';
 import { settingsRowItems } from './data';
 import { Summary } from './pages/Summary';
-import { Switch } from './components/Switch';
-import { useState } from 'preact/hooks';
+import { Switch } from '../../../shared/components/Switch/Switch.js';
 import { Typed } from './components/Typed';
 import { CleanBrowsing } from './pages/CleanBrowsing';
 import { useTypedTranslation } from './types';
@@ -27,20 +26,6 @@ function noop(name) {
     };
 }
 
-function NewCheck({ variant }) {
-    const [selected, setSelected] = useState(false);
-    return (
-        <Switch
-            pending={false}
-            variant={variant}
-            ariaLabel={'op'}
-            checked={selected}
-            onChecked={() => setSelected(true)}
-            onUnchecked={() => setSelected(false)}
-        />
-    );
-}
-
 export function Components() {
     const { t } = useTypedTranslation();
     return (
@@ -77,27 +62,14 @@ export function Components() {
                         <CleanBrowsing onNextPage={console.log} />
                     </div>
                     <div>
-                        <ButtonBar>
-                            <NewCheck variant={'windows'} />
-                            <NewCheck variant={'apple'} />
-                        </ButtonBar>
-                        <ButtonBar>
-                            <Switch
-                                pending={false}
-                                ariaLabel={'op'}
-                                checked={true}
-                                onChecked={noop('onChecked')}
-                                onUnchecked={noop('onUnchecked')}
-                            />
-                            <Switch
-                                pending={false}
-                                ariaLabel={'op'}
-                                variant={'apple'}
-                                checked={true}
-                                onChecked={noop('onChecked')}
-                                onUnchecked={noop('onUnchecked')}
-                            />
-                        </ButtonBar>
+                        <p>On Light</p>
+                        <AllSwitches theme={'light'} />
+                    </div>
+                    <div>
+                        <p>On Dark</p>
+                        <div style="background: #333; padding: 1rem;">
+                            <AllSwitches theme={'dark'} />
+                        </div>
                     </div>
                     <ButtonBar>
                         <Button size="large">L Button</Button>
@@ -287,3 +259,50 @@ export function Components() {
         </main>
     );
 }
+
+/**
+ * @param {object} props
+ * @param {'light' | 'dark'} props.theme
+ */
+function AllSwitches({ theme = 'light' }) {
+    return (
+        <ButtonBar>
+            <Switch
+                pending={false}
+                ariaLabel={'op'}
+                checked={true}
+                onChecked={noop('onChecked')}
+                onUnchecked={noop('onUnchecked')}
+                platformName={'macos'}
+                theme={theme}
+            />
+            <Switch
+                pending={false}
+                ariaLabel={'op'}
+                checked={false}
+                onChecked={noop('onChecked')}
+                onUnchecked={noop('onUnchecked')}
+                platformName={'macos'}
+                theme={theme}
+            />
+            <Switch
+                pending={false}
+                ariaLabel={'op'}
+                platformName={'windows'}
+                checked={true}
+                onChecked={noop('onChecked')}
+                onUnchecked={noop('onUnchecked')}
+                theme={theme}
+            />
+            <Switch
+                pending={false}
+                ariaLabel={'op'}
+                platformName={'windows'}
+                checked={false}
+                onChecked={noop('onChecked')}
+                onUnchecked={noop('onUnchecked')}
+                theme={theme}
+            />
+        </ButtonBar>
+    );
+}

special-pages/pages/onboarding/app/components/Switch.module.css

@@ -6,9 +6,10 @@ import { ListItem } from '../../components/ListItem';
 import { BounceIn, Check, FadeIn } from '../../components/Icons';
 import { Stack } from '../../components/Stack';
 import { Button, ButtonBar } from './Buttons';
-import { Switch } from '../../components/Switch';
+import { Switch } from '../../../../../shared/components/Switch/Switch.js';
 import { PlainList } from '../../components/List';
 import { SlideIn } from './Animation';
+import { useEnv } from '../../../../../shared/components/EnvironmentProvider.js';
 
 /**
  * @param {object} props
@@ -73,6 +74,8 @@ export function SettingsStep({ data }) {
 export function SettingListItem({ index, item, dispatch }) {
     const data = item.data;
     const { t } = useTypedTranslation();
+    const { isDarkMode } = useEnv();
+    const platformName = /** @type {'macos'|'windows'} */ (usePlatformName());
 
     const accept = () => {
         dispatch({
@@ -122,6 +125,8 @@ export function SettingListItem({ index, item, dispatch }) {
                             checked={enabled}
                             onChecked={accept}
                             onUnchecked={deny}
+                            platformName={platformName}
+                            theme={isDarkMode ? 'dark' : 'light'}
                         />
                     )}
                 </FadeIn>

special-pages/pages/onboarding/app/components/v3/SettingsStep.js

@@ -7,10 +7,11 @@ import { Stack } from '../components/Stack';
 import { Button, ButtonBar } from '../components/Buttons';
 import { useGlobalDispatch, useGlobalState } from '../global';
 import { useRollin } from '../hooks/useRollin';
-import { Switch } from '../components/Switch';
+import { Switch } from '../../../../shared/components/Switch/Switch.js';
 import { useTypedTranslation } from '../types';
 import { RiveAnimation } from '../components/RiveAnimation';
 import { useEnv } from '../../../../shared/components/EnvironmentProvider';
+import { usePlatformName } from '../components/SettingsProvider.js';
 
 /**
  * @param {object} props
@@ -96,6 +97,8 @@ export function SettingsStep({ onNextPage, data, metaData, subtitle }) {
 export function SettingListItem({ index, item, dispatch }) {
     const data = item.data;
     const { t } = useTypedTranslation();
+    const platformName = /** @type {'macos'|'windows'} */ (usePlatformName());
+    const { isDarkMode } = useEnv();
 
     const accept = () => {
         dispatch({
@@ -145,6 +148,8 @@ export function SettingListItem({ index, item, dispatch }) {
                             checked={enabled}
                             onChecked={accept}
                             onUnchecked={deny}
+                            platformName={platformName}
+                            theme={isDarkMode ? 'dark' : 'light'}
                         />
                     )}
                 </FadeIn>
@@ -170,8 +175,6 @@ export function SettingListItem({ index, item, dispatch }) {
         return { kind: 'button-bar' };
     })();
 
-    const { isDarkMode } = useEnv();
-
     return (
         <ListItem
             key={data.id}

special-pages/pages/onboarding/app/pages/SettingsStep.js

@@ -7,7 +7,7 @@ import { stepDefinitions as defaultStepDefinitions } from './data';
 export class Settings {
     /**
      * @param {object} params
-     * @param {{name: ImportMeta['platform']}} [params.platform]
+     * @param {{name: 'macos' | 'windows'}} [params.platform]
      * @param {import('./types.js').Step['id'][]} [params.order] - determine the order of screens
      * @param {'v1'|'v2'|'v3'} [params.orderName] - determine the order of screens
      * @param {import('./types.js').Step['id'][]} [params.exclude] - a list of screens to exclude