web: codemod ExtensionCard component to CSS modules

client/branded/src/components/Toggle.module.scss

@@ -0,0 +1,84 @@
+:root {
+    --toggle-width: 2rem;
+}
+
+.toggle {
+    --toggle-bar-bg: var(--icon-color);
+    --toggle-bar-bg-on: var(--primary);
+    --toggle-knob-bg: var(--body-bg);
+    --toggle-knob-bg-on: var(--body-bg);
+    --toggle-bar-opacity: 1;
+    --toggle-bar-focus-opacity: 1;
+    --toggle-knob-disabled-opacity: 1;
+    --toggle-bar-focus-box-shadow: 0 0 0 1px var(--body-bg), 0 0 0 0.1875rem var(--primary-2);
+
+    background: none;
+    border: none;
+    display: inline-block;
+    outline: none !important;
+    padding: 0;
+    position: relative;
+    width: var(--toggle-width);
+
+    &:focus-visible {
+        /* Move focus style to the rounded bar */
+        box-shadow: none;
+    }
+
+    &:disabled {
+        --toggle-knob-bg: var(--icon-color);
+        --toggle-knob-bg-on: var(--icon-color);
+        --toggle-bar-bg: var(--input-disabled-bg);
+        --toggle-bar-bg-on: var(--input-disabled-bg);
+    }
+
+    &:hover:enabled .bar {
+        opacity: var(--toggle-bar-focus-opacity);
+    }
+
+    &:disabled .knob {
+        opacity: var(--toggle-knob-disabled-opacity);
+    }
+
+    &:focus-visible .bar {
+        box-shadow: var(--toggle-bar-focus-box-shadow);
+    }
+}
+
+.bar {
+    border-radius: 1rem;
+    top: 2px;
+    left: 0;
+    height: 1rem;
+    width: 100%;
+    position: absolute;
+
+    opacity: var(--toggle-bar-opacity);
+    background-color: var(--toggle-bar-bg);
+
+    transition: all 0.3s;
+    transition-property: opacity;
+
+    &--on {
+        background-color: var(--toggle-bar-bg-on);
+    }
+}
+
+.knob {
+    background-color: var(--toggle-knob-bg);
+
+    border-radius: 0.375rem;
+    display: block;
+
+    height: 0.75rem;
+    width: 0.75rem;
+    margin-top: 0.25rem;
+    left: 0.125rem;
+
+    position: relative;
+
+    &--on {
+        background-color: var(--toggle-knob-bg-on);
+        transform: translate3d(1rem, 0, 0);
+    }
+}

client/branded/src/components/Toggle.tsx

@@ -1,6 +1,8 @@
 import classnames from 'classnames'
 import * as React from 'react'
 
+import styles from './Toggle.module.scss'
+
 interface Props {
     /** The initial value. */
     value?: boolean
@@ -58,7 +60,7 @@ export const Toggle: React.FunctionComponent<Props> = ({
     return (
         <button
             type="button"
-            className={classnames('toggle', className, {})}
+            className={classnames(styles.toggle, className)}
             id={id}
             title={title}
             value={value ? 1 : 0}
@@ -73,13 +75,13 @@ export const Toggle: React.FunctionComponent<Props> = ({
             data-test={dataTest}
         >
             <span
-                className={classnames('toggle__bar', {
-                    'toggle__bar--on': value,
+                className={classnames(styles.bar, {
+                    [styles.barOn]: value,
                 })}
             />
             <span
-                className={classnames('toggle__knob', {
-                    'toggle__knob--on': value,
+                className={classnames(styles.knob, {
+                    [styles.knobOn]: value,
                 })}
             />
         </button>

client/branded/src/components/__snapshots__/Toggle.test.tsx.snap

@@ -17,10 +17,10 @@ exports[`Toggle aria 1`] = `
     value={0}
   >
     <span
-      className="toggle__bar"
+      className="bar"
     />
     <span
-      className="toggle__knob"
+      className="knob"
     />
   </button>
 </Toggle>
@@ -38,10 +38,10 @@ exports[`Toggle className 1`] = `
     value={0}
   >
     <span
-      className="toggle__bar"
+      className="bar"
     />
     <span
-      className="toggle__knob"
+      className="knob"
     />
   </button>
 </Toggle>
@@ -61,10 +61,10 @@ exports[`Toggle disabled 1`] = `
     value={0}
   >
     <span
-      className="toggle__bar"
+      className="bar"
     />
     <span
-      className="toggle__knob"
+      className="knob"
     />
   </button>
 </Toggle>
@@ -83,10 +83,10 @@ exports[`Toggle value is false 1`] = `
     value={0}
   >
     <span
-      className="toggle__bar"
+      className="bar"
     />
     <span
-      className="toggle__knob"
+      className="knob"
     />
   </button>
 </Toggle>
@@ -105,10 +105,10 @@ exports[`Toggle value is true 1`] = `
     value={1}
   >
     <span
-      className="toggle__bar toggle__bar--on"
+      className="bar barOn"
     />
     <span
-      className="toggle__knob toggle__knob--on"
+      className="knob knobOn"
     />
   </button>
 </Toggle>

client/browser/src/branded.scss

@@ -2,7 +2,6 @@
 // Bootstrap etc can be used freely here (in opposite to the content page styles in app.scss)
 
 @import '../../branded/src/global-styles/index.scss';
-@import '../../branded/src/components/Toggle';
 @import './browser-extension/after-install-page/AfterInstallPageContent';
 @import './browser-extension/options-menu/OptionsPage';
 @import '../../branded/src/components/LoaderInput.scss';