change: [M3-9939] - Akamai Design System: Switch (Toggle) Component (#12303)

* change: [M3-9939] - Akamai Design System: Switch (Toggle) Component

* added size prop and checkmarkIcon

* Added changeset: Add `Toggle` design tokens and update styles to match Akamai Design System

* fixed small checkbox styling and added story for disabled

* fix transition for checkMark Icon and added story for disabled state

* cleanup in styles and added story for label and disabled

* fixed couple of unit tests

* fixed unit tests

Author: hasyed-akamai

packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx

@@ -72,9 +72,9 @@ export const ControlPlaneACLPane = (props: ControlPlaneACLProps) => {
             control={
               <StyledACLToggle
                 checked={enableControlPlaneACL}
-                disabled={isEnterpriseCluster}
                 name="ipacl-checkbox"
                 onChange={() => setControlPlaneACL(!enableControlPlaneACL)}
+                toggleDisabled={isEnterpriseCluster}
               />
             }
             label="Enable Control Plane ACL"

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx

@@ -239,7 +239,6 @@ export const KubeControlPlaneACLDrawer = (
                       checked={
                         isEnterpriseCluster ? true : (field.value ?? false)
                       }
-                      disabled={isEnterpriseCluster}
                       name="ipacl-checkbox"
                       onBlur={field.onBlur}
                       onChange={() => {
@@ -270,6 +269,7 @@ export const KubeControlPlaneACLDrawer = (
                           );
                         }
                       }}
+                      toggleDisabled={isEnterpriseCluster}
                     />
                   }
                   label="Enable Control Plane ACL"

packages/manager/src/features/Profile/Settings/MaskSensitiveData.test.tsx

@@ -25,9 +25,9 @@ describe('MaskSensitiveData', () => {
 
     await waitFor(() => {
       expect(getByRole('checkbox')).toBeEnabled();
+      expect(getByRole('checkbox')).toBeChecked();
     });
 
-    expect(getByRole('checkbox')).toBeChecked();
     expect(getByText('Sensitive data is masked')).toBeVisible();
   });
 

packages/manager/src/features/Profile/Settings/Notifications.test.tsx

@@ -25,9 +25,9 @@ describe('Notifications', () => {
 
     await waitFor(() => {
       expect(getByRole('checkbox')).toBeEnabled();
+      expect(getByRole('checkbox')).toBeChecked();
     });
 
-    expect(getByRole('checkbox')).toBeChecked();
     expect(
       getByText('Email alerts for account activity are enabled')
     ).toBeVisible();

packages/manager/src/features/Profile/Settings/TypeToConfirm.test.tsx

@@ -23,9 +23,9 @@ describe('TypeToConfirm', () => {
 
     await waitFor(() => {
       expect(getByRole('checkbox')).toBeEnabled();
+      expect(getByRole('checkbox')).toBeChecked();
     });
 
-    expect(getByRole('checkbox')).toBeChecked();
     expect(getByText('Type-to-confirm is enabled')).toBeVisible();
   });
 
@@ -40,9 +40,9 @@ describe('TypeToConfirm', () => {
 
     await waitFor(() => {
       expect(getByRole('checkbox')).toBeEnabled();
+      expect(getByRole('checkbox')).toBeChecked();
     });
 
-    expect(getByRole('checkbox')).toBeChecked();
     expect(getByText('Type-to-confirm is enabled')).toBeVisible();
   });
 

packages/manager/src/features/Profile/Settings/TypeToConfirm.tsx

@@ -22,7 +22,7 @@ export const TypeToConfirm = () => {
       <FormControlLabel
         control={
           <Toggle
-            checked={typeToConfirmPreference}
+            checked={!!typeToConfirmPreference}
             onChange={(_, checked) =>
               updatePreferences({ type_to_confirm: checked })
             }

packages/ui/.changeset/pr-12303-changed-1748925816810.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Changed
+---
+
+Add `Toggle` design tokens and update styles to match Akamai Design System ([#12303](https://github.com/linode/manager/pull/12303))

packages/ui/src/assets/icons/checkmark.svg

@@ -3,6 +3,7 @@ export { default as CheckIcon } from './check.svg';
 export { default as CheckboxIcon } from './checkbox.svg';
 export { default as CheckboxCheckedIcon } from './checkboxChecked.svg';
 export { default as CheckboxIndeterminateIcon } from './checkboxIndeterminate.svg';
+export { default as CheckMarkIcon } from './checkmark.svg';
 export { default as ChevronDownIcon } from './chevron-down.svg';
 export { default as ChevronUpIcon } from './chevron-up.svg';
 export { default as CloseIcon } from './close.svg';

packages/ui/src/assets/icons/index.ts

@@ -1,14 +1,94 @@
 import React from 'react';
 
+import { FormControlLabel } from '../FormControlLabel';
 import { Toggle } from './Toggle';
 
 import type { ToggleProps } from './Toggle';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const EXAMPLE_TEXT = "This is some example text for the toggle's tooltip";
 
+const ToggleWrapper = ({
+  children,
+}: {
+  children: (state: {
+    checked: boolean;
+    onChange: (
+      event: React.ChangeEvent<HTMLInputElement>,
+      checked: boolean,
+    ) => void;
+  }) => React.ReactNode;
+}) => {
+  const [checked, setChecked] = React.useState(true);
+
+  return (
+    <>
+      {children({
+        checked,
+        onChange: (_, newChecked) => setChecked(newChecked),
+      })}
+    </>
+  );
+};
+
 export const Default: StoryObj<ToggleProps> = {
-  render: (args) => <Toggle {...args} tooltipText={EXAMPLE_TEXT} />,
+  render: (args) => (
+    <ToggleWrapper>
+      {({ checked, onChange }) => (
+        <Toggle
+          {...args}
+          checked={checked}
+          onChange={onChange}
+          tooltipText={EXAMPLE_TEXT}
+        />
+      )}
+    </ToggleWrapper>
+  ),
+};
+
+export const Disabled: StoryObj<ToggleProps> = {
+  render: (args) => (
+    <ToggleWrapper>
+      {({ checked, onChange }) => (
+        <Toggle
+          {...args}
+          checked={checked}
+          onChange={onChange}
+          toggleDisabled
+          tooltipText={EXAMPLE_TEXT}
+        />
+      )}
+    </ToggleWrapper>
+  ),
+};
+
+export const ToggleWithLabel: StoryObj<ToggleProps> = {
+  render: (args) => (
+    <ToggleWrapper>
+      {({ checked, onChange }) => (
+        <FormControlLabel
+          control={<Toggle {...args} checked={checked} onChange={onChange} />}
+          label={'Label'}
+        />
+      )}
+    </ToggleWrapper>
+  ),
+};
+
+export const ToggleWithSmallSize: StoryObj<ToggleProps> = {
+  render: (args) => (
+    <ToggleWrapper>
+      {({ checked, onChange }) => (
+        <Toggle
+          {...args}
+          checked={checked}
+          onChange={onChange}
+          size="small"
+          tooltipText={EXAMPLE_TEXT}
+        />
+      )}
+    </ToggleWrapper>
+  ),
 };
 
 const meta: Meta<ToggleProps> = {