Merge pull request #282 from Availity/feat/switch-component

feat(mui-form-utils): add switch
Availity · May 15, 2024 · 544474b · 544474b
2 parents d2bbc56 + 9b34c19
commit 544474b
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 5 deletions.
diff --git a/packages/form-utils/src/index.ts b/packages/form-utils/src/index.ts
@@ -4,7 +4,8 @@ export * from './lib/FormControlLabel';
 export * from './lib/FormHelperText';
 export * from './lib/FormLabel';
 export * from './lib/Input';
-export * from './lib/Select';
 export * from './lib/Radio';
 export * from './lib/RadioGroup';
 export * from './lib/RequiredKey';
+export * from './lib/Select';
+export * from './lib/Switch';
diff --git a/packages/form-utils/src/lib/FormControlLabel.stories.tsx b/packages/form-utils/src/lib/FormControlLabel.stories.tsx
@@ -16,16 +16,22 @@ const meta: Meta<typeof FormControlLabel> = {
   title: 'Components/FormUtils/FormControlLabel',
   component: FormControlLabel,
   tags: ['autodocs'],
+  parameters: {
+    controls: {
+      exclude: [
+        'labelPlacement'
+      ],
+    },
+  },
 };
 
 export default meta;
 
 export const _FormLabel: StoryObj<typeof FormControlLabel> = {
-  render: (args: FormControlLabelProps) => <FormControlLabel {...args} />,
+  render: (args: FormControlLabelProps) => <FormControlLabel {...args} control={<Checkbox />} />,
   args: {
     label: 'Label',
     required: true,
-    control: <Checkbox />,
   },
 };
 

diff --git a/packages/form-utils/src/lib/FormControlLabel.tsx b/packages/form-utils/src/lib/FormControlLabel.tsx
@@ -5,11 +5,11 @@ import { styled } from '@mui/material/styles';
 import { FieldHelpIcon } from './FieldHelpIcon';
 
 export type FormControlLabelProps = {
-  /** Adds `FieldHelpIcon` next to the label (should not be within label for accessibility) */
+  /** Adds `FieldHelpIcon` next to the label (should not be within label for accessibility). Should only be used with `end` `labelPlacement`. */
   helpTopicId?: string;
   /** If `true`, adds required to control. (No required asterisk on individual controls in the group) */
   required?: boolean;
-} & Omit<MuiFormControlLabelProps, 'componentsProps' | 'labelPlacement' | 'required'>;
+} & Omit<MuiFormControlLabelProps, 'componentsProps' | 'required'>;
 
 // Form Label styles moved up to wrapper to include field level help
 const Wrapper = styled(Box, {

diff --git a/packages/form-utils/src/lib/Switch.stories.tsx b/packages/form-utils/src/lib/Switch.stories.tsx
@@ -0,0 +1,62 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormControlLabel, Switch, SwitchProps } from '..';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/FormUtils/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  parameters: {
+    controls: {
+      exclude: [
+        'action',
+        'autoFocus',
+        'className',
+        'component',
+        'onChange',
+        'onFocusVisible',
+        'readOnly',
+        'ref',
+        'required',
+        'style',
+        'tabIndex',
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export const _Switch: StoryObj<typeof Switch> = {
+  render: (args: SwitchProps) => <Switch inputProps={{ 'aria-label': 'example' }} {...args} />,
+};
+
+export const _WithLabel: StoryObj<typeof Switch> = {
+  render: () => (
+    <>
+      <FormControlLabel control={<Switch />} label="Form Control Label" />
+      <FormControlLabel control={<Switch />} label="Form Control Label" labelPlacement='start'/>
+    </>
+  ),
+};
+
+export const _Sizes: StoryObj<typeof Switch> = {
+  render: () => (
+    <>
+      <FormControlLabel control={<Switch />} label="small" />
+      <FormControlLabel control={<Switch size="medium"/>} label="medium"/>
+    </>
+  ),
+};
+
+export const _States: StoryObj<typeof Switch> = {
+  render: () => (
+    <>
+      <FormControlLabel control={<Switch />} label="unchecked" />
+      <FormControlLabel control={<Switch defaultChecked={true} />} label="checked" />
+      <FormControlLabel control={<Switch />} label="disabled unchecked" disabled />
+      <FormControlLabel control={<Switch defaultChecked={true} />} label="disabled checked" disabled />
+    </>
+  ),
+};
diff --git a/packages/form-utils/src/lib/Switch.test.tsx b/packages/form-utils/src/lib/Switch.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Switch } from './Switch';
+
+describe('Switch', () => {
+  test('should render successfully', () => {
+    const { getByRole } = render(<Switch />);
+    expect(getByRole('checkbox')).toBeTruthy();
+  });
+});
diff --git a/packages/form-utils/src/lib/Switch.tsx b/packages/form-utils/src/lib/Switch.tsx
@@ -0,0 +1,17 @@
+import MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';
+
+export type SwitchProps = Omit<
+  MuiSwitchProps,
+  | 'centerRipple'
+  | 'disableFocusRipple'
+  | 'disableRipple'
+  | 'disableTouchRipple'
+  | 'focusRipple'
+  | 'focusVisibleClassName'
+  | 'TouchRippleProps'
+  | 'touchRippleRef'
+>;
+
+export const Switch = (args: SwitchProps): JSX.Element => {
+  return <MuiSwitch {...args} />;
+};
diff --git a/packages/theme/src/lib/legacy-theme.ts b/packages/theme/src/lib/legacy-theme.ts
@@ -1492,6 +1492,76 @@ export const legacyTheme = {
         },
       },
     },
+    MuiSwitch: {
+      defaultProps: {
+        size: 'small',
+        disableRipple: true,
+        disableFocusRipple: true,
+        disableTouchRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          height: '1.5em',
+          width: '2.5em',
+          padding: '.25em',
+          '.MuiSwitch-switchBase': {
+            opacity: 1,
+            padding: '0px',
+            top: '.37em',
+            left: '.37em',
+            '.MuiSwitch-thumb': {
+              color: tokens.borderInput,
+              width: '.75em',
+              height: '.75em',
+            },
+            '&.Mui-disabled': {
+              opacity: .5,
+              '+.MuiSwitch-track': {
+                opacity: .5
+              },
+              '&.Mui-checked': {
+                opacity: 1,
+                '+.MuiSwitch-track': {
+                  opacity: .5
+                }
+              }
+            },
+            '&.Mui-focusVisible+.MuiSwitch-track': {
+              outline: '2px solid white',
+              boxShadow: `0 0 0px 4px ${tokens.borderInput}`,
+            },
+            '&.Mui-checked': {
+              transform: 'translateX(1em)',
+              '.MuiSwitch-thumb': {
+                color: tokens.colorCommonWhite,
+                opacity: 1
+              },
+              '+ .MuiSwitch-track': {
+                border: 'none',
+                backgroundColor: '#0075ff',
+                opacity: 'inherit'
+              },
+              '&.Mui-focusVisible+.MuiSwitch-track': {
+                backgroundColor: tokens.colorPrimaryMain,
+                boxShadow: `0 0 0px 4px ${tokens.colorPrimaryMain}`
+              },
+            },
+          },
+        },
+        track: {
+          backgroundColor: 'transparent',
+          border: `1px solid ${tokens.borderInput}`,
+          borderRadius: '.5em',
+          opacity: 1
+        },
+        sizeSmall: {
+          fontSize: '1rem'
+        },
+        sizeMedium: {
+          fontSize: '1.5rem'
+        },
+      },
+    },
     MuiTab: {
       styleOverrides: {
         root: {