@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/atoms/rangeSlider/__stories__/variants/CustomLabels.story.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { RangeSlider } from '@/index';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 // CSF format story
 export const cutsomLabels = () => {

package/core/components/atoms/spinner/Spinner.tsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type Appearance = 'primary' | 'secondary' | 'white';
-export type Size = 'small' | 'medium' | 'large';
+export type SpinnerAppearance = 'primary' | 'secondary' | 'white';
+export type SpinnerSize = 'small' | 'medium' | 'large';
 
 export interface SpinnerProps extends BaseProps {
   /**
    * Color of `Spinner`
    */
-  appearance: Appearance;
+  appearance: SpinnerAppearance;
   /**
    * Size of `Spinner`
    */
-  size: Size;
+  size: SpinnerSize;
 }
 
 export const Spinner = (props: SpinnerProps) => {

package/core/components/atoms/spinner/__stories__/variants/Appearance.story.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import Spinner, { Appearance } from '../../Spinner';
+import Spinner, { SpinnerAppearance } from '../../Spinner';
 import Text from '@/components/atoms/text';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['primary', 'secondary', 'white'];
+  const appearances: SpinnerAppearance[] = ['primary', 'secondary', 'white'];
   return (
     <div className="d-flex">
       {appearances.map((appear, ind) => {

package/core/components/atoms/spinner/__stories__/variants/Size.story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Spinner, { Size } from '../../Spinner';
+import Spinner, { SpinnerSize as Size } from '../../Spinner';
 import Text from '@/components/atoms/text';
 
 // CSF format story

package/core/components/atoms/statusHint/StatusHint.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import Text from '@/components/atoms/text';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-
-export type Appearance = 'info' | 'alert' | 'warning' | 'success' | 'default';
+import { MessageAppearance } from '@/common.type';
 
 export interface StatusHintProps extends BaseProps {
   /**
@@ -13,7 +12,7 @@ export interface StatusHintProps extends BaseProps {
   /**
    * Color of Icon
    */
-  appearance: Appearance;
+  appearance: MessageAppearance;
   /**
    * Handler to be called when `Status Hint` is clicked
    */
@@ -46,6 +45,8 @@ export const StatusHint = (props: StatusHintProps) => {
   });
 
   return (
+    // TODO(a11y): fix accessibility
+    /* eslint-disable */
     <div
       data-test="DesignSystem-StatusHint"
       {...baseProps}
@@ -54,6 +55,7 @@ export const StatusHint = (props: StatusHintProps) => {
       onMouseEnter={(e) => onMouseEnter && onMouseEnter(e)}
       onMouseLeave={(e) => onMouseLeave && onMouseLeave(e)}
     >
+      {/* eslint-enable */}
       <span data-test="DesignSystem-StatusHint--Icon" className={StatusHintIconClass} />
       <Text data-test="DesignSystem-StatusHint--Text" weight={'medium'}>
         {children}

package/core/components/atoms/statusHint/__stories__/variants/Appearance.story.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import StatusHint, { Appearance } from '../../StatusHint';
+import StatusHint from '../../StatusHint';
+import { MessageAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['info', 'success', 'alert', 'warning', 'default'];
+  const appearances: MessageAppearance[] = ['info', 'success', 'alert', 'warning', 'default'];
 
   return (
     <div>

package/core/components/atoms/statusHint/__tests__/StatusHint.test.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import StatusHint, { StatusHintProps as IProps, Appearance } from '../StatusHint';
+import StatusHint, { StatusHintProps as IProps } from '../StatusHint';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { MessageAppearance } from '@/common.type';
 
 const label = 'StatusHint';
-const appearances: Appearance[] = ['default', 'alert', 'info', 'warning', 'success'];
+const appearances: MessageAppearance[] = ['default', 'alert', 'info', 'warning', 'success'];
 
 describe('StatusHint component', () => {
   const mapper = {

package/core/components/atoms/subheading/Subheading.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import GenericText from '../_text';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
+import { HeadingAppearance } from '@/common.type';
 
-export type Appearance = 'default' | 'subtle' | 'disabled' | 'white';
 export interface SubheadingProps extends BaseProps, BaseHtmlProps<HTMLHeadingElement> {
   /**
    * Text to be rendered
@@ -13,7 +13,7 @@ export interface SubheadingProps extends BaseProps, BaseHtmlProps<HTMLHeadingEle
   /**
    * Color of `Subheading`
    */
-  appearance: Appearance;
+  appearance: HeadingAppearance;
 }
 
 export const Subheading = (props: SubheadingProps) => {

package/core/components/atoms/subheading/__stories__/variants/Appearance.story.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import Subheading, { Appearance } from '../../index';
+import Subheading from '../../index';
 import Text from '@/components/atoms/text';
+import { HeadingAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['default', 'subtle', 'disabled', 'white'];
+  const appearances: HeadingAppearance[] = ['default', 'subtle', 'disabled', 'white'];
 
   return (
     <div className="d-flex">

package/core/components/atoms/subheading/__tests__/Subheading.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Subheading, { SubheadingProps as Props, Appearance } from '../Subheading';
+import Subheading, { SubheadingProps as Props } from '../Subheading';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { HeadingAppearance } from '@/common.type';
 
-const appearance: Appearance[] = ['default', 'subtle', 'disabled', 'white'];
+const appearance: HeadingAppearance[] = ['default', 'subtle', 'disabled', 'white'];
 
 const mapper = {
   appearance: valueHelper(appearance, { required: true, iterate: true }),

package/core/components/atoms/switchInput/Switch.tsx

@@ -1,24 +1,26 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { OmitNativeProps, BaseProps } from '@/utils/types';
+import { isSpaceKey } from '@/accessibility/utils';
+import { ChangeEvent } from '@/common.type';
 
-export type Size = 'regular' | 'tiny' | 'large';
-export type Appearance = 'primary' | 'alert' | 'success' | 'warning';
+export type SwitchSize = 'regular' | 'tiny' | 'large';
+export type SwitchAppearance = 'primary' | 'alert' | 'success' | 'warning';
 
-type MouseEvent = React.ChangeEvent<HTMLInputElement>;
+type KeyboardEvent = React.KeyboardEvent<HTMLInputElement>;
 
 export interface SwitchProps extends BaseProps, OmitNativeProps<HTMLInputElement, 'onChange'> {
   /**
    * Size of `Switch`
    * @default "regular"
    */
-  size?: Size;
+  size?: SwitchSize;
   /**
    * Color of `Switch`
    *
    * **Soon to be deprecated**
    */
-  appearance?: Appearance;
+  appearance?: SwitchAppearance;
   /**
    * Default value of checked (Used in case of uncontrolled `Switch`)
    */
@@ -42,7 +44,7 @@ export interface SwitchProps extends BaseProps, OmitNativeProps<HTMLInputElement
   /**
    * Callback function called when `Switch` is toggled
    */
-  onChange?: (event: MouseEvent, selected: boolean) => void;
+  onChange?: (event: ChangeEvent | KeyboardEvent, selected: boolean) => void;
 }
 
 /**
@@ -87,9 +89,11 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, re
     ['Switch-wrapper--checkedDisabled']: checked && disabled,
   });
 
-  const onChangeHandler = (event: MouseEvent) => {
-    if (checkedProp === undefined) setChecked(!checked);
-    if (onChange) onChange(event, !checked);
+  const onChangeHandler = (event: ChangeEvent | KeyboardEvent) => {
+    if (event.type == 'change' || isSpaceKey(event as React.KeyboardEvent<HTMLElement>)) {
+      if (checkedProp === undefined) setChecked(!checked);
+      if (onChange) onChange(event, !checked);
+    }
   };
 
   return (
@@ -105,6 +109,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, re
         name={name}
         value={value}
         className="Switch-input"
+        onKeyUp={onChangeHandler}
       />
       <span className={SwitchWrapper} />
     </div>

package/core/components/atoms/switchInput/__stories__/DefaultSwitch.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Switch from '../index';
 
 // CSF format story
-export const defaultSwitch = () => <Switch defaultChecked={true} size="regular" />;
+export const defaultSwitch = () => <Switch aria-label="Default Checked Switch" defaultChecked={true} size="regular" />;
 
 export default {
   title: 'Components/Switch/Default Switch',
@@ -11,6 +11,9 @@ export default {
     docs: {
       docPage: {
         title: 'Switch',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Default Checked Switch'\` to describe the action of switch.
+         `,
       },
     },
   },

package/core/components/atoms/switchInput/__stories__/OffState.story.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Switch from '../index';
 
 // CSF format story
-export const offState = () => <Switch defaultChecked={false} size="regular" />;
+export const offState = () => <Switch aria-label="Off State Switch" defaultChecked={false} size="regular" />;
 
 export default {
   title: 'Components/Switch/Off State',
@@ -11,6 +11,9 @@ export default {
     docs: {
       docPage: {
         title: 'Switch',
+        a11yProps: ` 
+        **aria-label:** Add \`aria-label='Off State Switch'\` to describe the action of switch.
+         `,
       },
     },
   },

package/core/components/atoms/switchInput/__stories__/index.story.tsx

@@ -3,6 +3,7 @@ import { select, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { updateKnob } from '@/utils/storybookEventEmitter';
 import Switch from '../index';
+import { Label } from '@/index';
 
 // CSF format story
 export const all = () => {
@@ -18,13 +19,35 @@ export const all = () => {
   };
 
   return (
-    <div>
-      <Switch disabled={disabled} checked={checked} size={size} onChange={onChangeHandler} />
-    </div>
+    <form>
+      <Label htmlFor="vaccination-status">Have you been vaccinated ?</Label>
+      <div>
+        <Switch id="vaccination-status" disabled={disabled} checked={checked} size={size} onChange={onChangeHandler} />
+      </div>
+    </form>
   );
 };
 
 export default {
   title: 'Components/Switch/All',
   component: Switch,
+  parameters: {
+    docs: {
+      docPage: {
+        a11yProps: ` 
+        **htmlFor:** 
+        <br/> 
+        -Add \`htmlFor='vaccination-status'\` to label to programmatically associated it with switch 
+        which has \`id='vaccination-status'\`. 
+        <br/> 
+        -This means that,a screen reader will read out the label when the user is focused on the switch, 
+        making it easier for an assistive technology user to understand 
+        what data should be entered.
+        <br/> 
+        -When a user clicks or touches/taps a label, the browser passes the focus to its associated switch. That increased hit 
+        area for focusing the input provides an advantage to anyone trying to activate it.
+         `,
+      },
+    },
+  },
 };

package/core/components/atoms/switchInput/__stories__/variants/Size.story.tsx

@@ -12,7 +12,7 @@ export const size = () => {
         return (
           <div key={ind} className="mr-9">
             <div className="h-50">
-              <Switch defaultChecked={true} size={SwitchSize} />
+              <Switch aria-label={`Switch ${SwitchSize}`} defaultChecked={true} size={SwitchSize} />
             </div>
             <br />
             <Text weight="strong">{SwitchSize.charAt(0).toUpperCase() + SwitchSize.slice(1)}</Text>
@@ -30,6 +30,15 @@ export default {
     docs: {
       docPage: {
         title: 'Switch',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Switch tiny'\` on switch with *Tiny* text to describe the action of switch.
+        <br/>
+        - Add \`aria-label='Switch regular'\` on switch with *regular* text to describe the action of switch.
+        <br/>
+        - Add \`aria-label='Switch large'\` on switch with *Large* text to describe the action of switch.
+        `,
       },
     },
   },

package/core/components/atoms/switchInput/__stories__/variants/State.story.tsx

@@ -7,12 +7,12 @@ export const state = () => {
   return (
     <div className="d-flex">
       <div className="mr-9">
-        <Switch defaultChecked={true} disabled={false} />
+        <Switch aria-label="Switch enabled" defaultChecked={true} disabled={false} />
         <br />
         <Text weight="strong">Enabled</Text>
       </div>
       <div>
-        <Switch disabled={true} defaultChecked={true} />
+        <Switch aria-label="Switch disabled" disabled={true} defaultChecked={true} />
         <br />
         <Text weight="strong">Disabled</Text>
       </div>
@@ -27,6 +27,13 @@ export default {
     docs: {
       docPage: {
         title: 'Switch',
+        a11yProps: ` 
+        **aria-label:**
+        <br/> 
+        - Add \`aria-label='Switch enabled'\` on switch with *Enabled* text to describe the action of switch.
+        <br/>
+        - Add \`aria-label='Switch disabled'\` on switch with *Disabled* text to describe the action of switch.
+        `,
       },
     },
   },

package/core/components/atoms/text/Text.tsx

@@ -3,8 +3,8 @@ import GenericText from '../_text';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
 
-export type Size = 'small' | 'regular' | 'large';
-export type Appearance = 'default' | 'white' | 'destructive' | 'subtle' | 'disabled' | 'success' | 'link';
+export type TextSize = 'small' | 'regular' | 'large';
+export type TextAppearance = 'default' | 'white' | 'destructive' | 'subtle' | 'disabled' | 'success' | 'link';
 
 export interface TextProps extends BaseProps, BaseHtmlProps<HTMLSpanElement> {
   /**
@@ -22,11 +22,11 @@ export interface TextProps extends BaseProps, BaseHtmlProps<HTMLSpanElement> {
   /**
    * Color of `Text`
    */
-  appearance: Appearance;
+  appearance: TextAppearance;
   /**
    * Size of `Text`
    */
-  size: Size;
+  size: TextSize;
 }
 
 export const Text = (props: TextProps) => {

package/core/components/atoms/text/__stories__/variants/Appearance.story.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import Text, { Appearance } from '../../index';
+import Text, { TextAppearance } from '../../index';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled', 'success', 'link'];
+  const appearances: TextAppearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled', 'success', 'link'];
   return (
     <div className="d-flex">
       {appearances.map((appear, ind) => {

package/core/components/atoms/text/__tests__/Text.test.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import Text, { TextProps as Props, Appearance, Size } from '../Text';
+import Text, { TextProps as Props, TextAppearance, Size } from '../Text';
 import { render } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
-import { _isEqual } from '../../dropdown/utility';
 
 const sizes: Size[] = ['small', 'regular', 'large'];
-const appearances: Appearance[] = ['default', 'white', 'destructive', 'disabled', 'subtle', 'success', 'link'];
+const appearances: TextAppearance[] = ['default', 'white', 'destructive', 'disabled', 'subtle', 'success', 'link'];
 const weight = ['strong', 'medium'];
 const BooleanValue = [true, false];
 const StringValue = 'Sample String';

package/core/components/atoms/textarea/__stories__/TextareaWithCaption.story.tsx

@@ -6,15 +6,19 @@ export const textareaWithCaption = () => {
 
   return (
     <>
-      <Label withInput={true}>Confirmation Notes</Label>
+      <Label withInput={true} htmlFor="notes">
+        Confirmation Notes
+      </Label>
       <Textarea
-        name="Textarea"
+        name="notes"
         className="w-50"
         value={value}
         onChange={(e) => {
           setValue(e.target.value);
         }}
         placeholder="Enter your comments here"
+        aria-labelledby="Confirmation Notes"
+        id="notes"
       />
       <Caption withInput={true}>This note will be automatically pinned for export.</Caption>
     </>
@@ -26,13 +30,15 @@ const customCode = `() => {
 
   return (
     <>
-      <Label withInput={true}>Confirmation Notes</Label>
+      <Label withInput={true} htmlFor="notes">Confirmation Notes</Label>
       <Textarea
         name="Textarea"
         className="w-50"
         value={value}
         onChange={e => { setValue(e.target.value); }}
         placeholder="Enter your comments here"
+        aria-labelledby="Confirmation Notes"
+        id="notes"
       />
       <Caption withInput={true}>This note will be automatically pinned for export.</Caption>
     </>

package/core/components/atoms/textarea/__stories__/defaultTextarea.story.tsx

@@ -3,8 +3,16 @@ import { Textarea, Label } from '@/index';
 
 export const defaultTextarea = () => (
   <>
-    <Label withInput={true}>Comments</Label>
-    <Textarea name="Textarea" className="w-25" placeholder="Enter your comments here" />
+    <Label withInput={true} htmlFor="comments">
+      Comments
+    </Label>
+    <Textarea
+      name="comments"
+      id="comments"
+      aria-labelledby="Comments"
+      className="w-25"
+      placeholder="Enter your comments here"
+    />
   </>
 );
 

package/core/components/atoms/textarea/__stories__/index.story.tsx

@@ -29,6 +29,7 @@ export const all = () => {
         error={error}
         resize={resize}
         rows={rows}
+        aria-labelledby="Textarea"
       />
     </div>
   );

package/core/components/atoms/textarea/__stories__/variants/Disable.story.tsx

@@ -24,6 +24,7 @@ export const Disable = () => {
                 placeholder="Placeholder"
                 disabled={value}
                 rows={3}
+                aria-labelledby="Textarea"
               />
             </div>
             <Text weight="strong">{value ? 'Disabled' : 'Enabled'}</Text>

package/core/components/atoms/toast/ActionButton.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import Text from '@/components/atoms/text';
-import { Appearance } from './Toast';
+import { MessageAppearance } from '@/common.type';
 
 export interface Props {
-  appearance: Appearance;
+  appearance: MessageAppearance;
   label: string;
   onClick?: (e: React.MouseEvent) => void;
 }

package/core/components/atoms/toast/Toast.tsx

@@ -5,8 +5,7 @@ import Text from '@/components/atoms/text';
 import Icon from '@/components/atoms/icon';
 import ActionButton from './ActionButton';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-
-export type Appearance = 'default' | 'info' | 'success' | 'alert' | 'warning';
+import { MessageAppearance } from '@/common.type';
 
 export type Action = {
   /**
@@ -25,9 +24,13 @@ export interface ToastProps extends BaseProps {
    */
   title: string;
   /**
-   * Color of `Toast`
+   * Color of the `Toast`
+   *
+   * ** `'default'` has been deprecated, backward compatibility supported**
+   *
+   * @default "info"
    */
-  appearance: Appearance;
+  appearance: MessageAppearance;
   /**
    * Message to be rendered inside `Toast`
    */
@@ -50,7 +53,9 @@ export interface ToastProps extends BaseProps {
 }
 
 export const Toast = (props: ToastProps) => {
-  const { appearance, title, message, actions, onClose, className } = props;
+  const { title, message, actions, onClose, className } = props;
+  let { appearance } = props;
+  appearance = appearance === 'default' ? 'info' : appearance;
 
   const baseProps = extractBaseProps(props);
 
@@ -132,7 +137,7 @@ export const Toast = (props: ToastProps) => {
 
 Toast.displayName = 'Toast';
 Toast.defaultProps = {
-  appearance: 'default',
+  appearance: 'info',
 };
 
 export default Toast;

package/core/components/atoms/toast/__stories__/index.story.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { select, text } from '@storybook/addon-knobs';
+import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import Toast from '../Toast';
 
 // CSF format story
 export const all = () => {
-  const appearance = select('appearance', ['default', 'info', 'success', 'alert', 'warning'], undefined);
-
   const title = text('title', 'Sample toast');
 
   const message = text('message', '');
@@ -31,9 +29,7 @@ export const all = () => {
     });
   }
 
-  return (
-    <Toast appearance={appearance} title={title} message={message} onClose={action('on-close clicked')} {...props} />
-  );
+  return <Toast title={title} message={message} onClose={action('on-close clicked')} {...props} />;
 };
 
 export default {

package/core/components/atoms/toast/__stories__/variants/Appearance.story.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import Toast, { Appearance } from '../../Toast';
+import Toast from '../../Toast';
+import { MessageAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['default', 'info', 'success', 'alert', 'warning'];
+  const appearances: MessageAppearance[] = ['info', 'success', 'alert', 'warning'];
   return (
     <div className="d-flex">
       {appearances.map((appear, ind) => {

package/core/components/atoms/toast/__stories__/variants/ToastMessage.story.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Toast, { Appearance } from '../../Toast';
+import Toast from '../../Toast';
+import { MessageAppearance } from '@/common.type';
 
 // CSF format story
 export const toastWithDescription = () => {
-  const appearances: Appearance[] = ['default', 'info', 'success', 'alert', 'warning'];
+  const appearances: MessageAppearance[] = ['info', 'success', 'alert', 'warning'];
 
   const message = text('message', 'Outreach was sent');
   return (

package/core/components/atoms/toast/__stories__/variants/ToastWithAction.story.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
-import Toast, { Appearance } from '../../Toast';
+import Toast from '../../Toast';
+import { MessageAppearance } from '@/common.type';
 
 // CSF format story
 export const toastWithAction = () => {
-  const appearances: Appearance[] = ['default', 'info', 'success', 'alert', 'warning'];
+  const appearances: MessageAppearance[] = ['info', 'success', 'alert', 'warning'];
 
   const message = text('message', 'Outreach was sent');
 

package/core/components/atoms/toast/__tests__/Toast.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, arrayHelper, testMessageHelper } from '@/utils/testHelper';
 import Toast, { ToastProps as Props } from '../Toast';
 
-const appearance = ['default', 'info', 'success', 'alert', 'warning'];
+const appearance = ['info', 'success', 'alert', 'warning'];
 const StringValue = 'Sample string';
 const FunctionValue = jest.fn();
 const Actions = [