@innovaccer/design-system 2.6.0 → 2.7.0-0

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

@@ -2,11 +2,10 @@ 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';
-
-type MouseEvent = React.ChangeEvent<HTMLInputElement>;
+export type SwitchSize = 'regular' | 'tiny' | 'large';
+export type SwitchAppearance = 'primary' | 'alert' | 'success' | 'warning';
 
 type KeyboardEvent = React.KeyboardEvent<HTMLInputElement>;
 
@@ -15,13 +14,13 @@ export interface SwitchProps extends BaseProps, OmitNativeProps<HTMLInputElement
    * 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`)
    */
@@ -45,7 +44,7 @@ export interface SwitchProps extends BaseProps, OmitNativeProps<HTMLInputElement
   /**
    * Callback function called when `Switch` is toggled
    */
-  onChange?: (event: MouseEvent | KeyboardEvent, selected: boolean) => void;
+  onChange?: (event: ChangeEvent | KeyboardEvent, selected: boolean) => void;
 }
 
 /**
@@ -90,7 +89,7 @@ export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, re
     ['Switch-wrapper--checkedDisabled']: checked && disabled,
   });
 
-  const onChangeHandler = (event: MouseEvent | KeyboardEvent) => {
+  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);

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/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 = [

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

@@ -41,41 +41,6 @@ exports[`Toast component
 </body>
 `;
 
-exports[`Toast component 
-  title: "Sample Toast", appearance: "default", onClose: "[Function]"
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Toast Toast--default"
-    >
-      <div
-        class="Toast-body"
-      >
-        <div
-          class="Toast-title"
-        >
-          <h5
-            class="Heading Heading--s Heading--white Toast-heading Toast-heading--default"
-            data-test="DesignSystem-Heading"
-          >
-            Sample Toast
-          </h5>
-          <i
-            class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
-            role="button"
-            style="font-size: 16px; width: 16px;"
-            tabindex="0"
-          >
-            close_round
-          </i>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
 exports[`Toast component 
   title: "Sample Toast", appearance: "info", onClose: "[Function]"
  1`] = `
@@ -307,102 +272,6 @@ exports[`Toast component
 </body>
 `;
 
-exports[`Toast component 
-  title: "Sample Toast", message: "Sample string", appearance: "default", onClose: "[Function]"
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Toast Toast--withMessage Toast--default"
-    >
-      <div
-        class="Toast-body"
-      >
-        <div
-          class="Toast-title Toast-title--withMessage"
-        >
-          <h5
-            class="Heading Heading--s Heading--white Toast-heading Toast-heading--default"
-            data-test="DesignSystem-Heading"
-          >
-            Sample Toast
-          </h5>
-          <i
-            class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
-            role="button"
-            style="font-size: 16px; width: 16px;"
-            tabindex="0"
-          >
-            close_round
-          </i>
-        </div>
-        <span
-          class="Text Text--white Text--regular Toast-text Toast-text--default"
-          data-test="DesignSystem-Text"
-        >
-          Sample string
-        </span>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Toast component 
-  title: "Sample Toast", message: "Sample string", appearance: "default", onClose: "[Function]", actions: [{"label":"Action 1","onClick":"[Function]"}]
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Toast Toast--withMessage Toast--default"
-    >
-      <div
-        class="Toast-body"
-      >
-        <div
-          class="Toast-title Toast-title--withMessage"
-        >
-          <h5
-            class="Heading Heading--s Heading--white Toast-heading Toast-heading--default"
-            data-test="DesignSystem-Heading"
-          >
-            Sample Toast
-          </h5>
-          <i
-            class="material-icons material-icons-round Icon Icon--white Toast-icon Toast-icon--right Toast-icon--default"
-            role="button"
-            style="font-size: 16px; width: 16px;"
-            tabindex="0"
-          >
-            close_round
-          </i>
-        </div>
-        <span
-          class="Text Text--white Text--regular Toast-text Toast-text--default"
-          data-test="DesignSystem-Text"
-        >
-          Sample string
-        </span>
-        <div
-          class="Toast-actions"
-        >
-          <button
-            class="Button Button--tiny Toast-actionButton Toast-actionButton--default"
-          >
-            <span
-              class="Text Text--white Text--regular"
-              data-test="DesignSystem-Text"
-            >
-              Action 1
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
 exports[`Toast component 
   title: "Sample Toast", message: "Sample string", appearance: "info", onClose: "[Function]"
  1`] = `

package/core/components/css-utilities/Schema.tsx

@@ -1,5 +1,5 @@
 import { Schema } from '../organisms/grid';
-import React from 'react';
+import * as React from 'react';
 import { GridCell, Button } from '@/index';
 
 const copyCode = (val: string) => navigator.clipboard.writeText(val);

package/core/components/css-utilities/Spacing/Schema.tsx

@@ -1,6 +1,6 @@
 import { Schema } from '../../organisms/grid';
 import { GridCell, Button } from '@/index';
-import React from 'react';
+import * as React from 'react';
 
 const copyCode = (val: string) => navigator.clipboard.writeText(val);
 

package/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`ChipInput component
             1020
           </span>
           <i
-            class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
             data-test="DesignSystem-GenericChip--clearButton"
             role="button"
             style="font-size: 16px; width: 16px;"
@@ -43,7 +43,7 @@ exports[`ChipInput component
             80
           </span>
           <i
-            class="material-icons material-icons-round Icon Icon--subtle Chip-icon Chip-icon--right cursor-pointer"
+            class="material-icons material-icons-round Icon Chip-icon Chip-icon--right cursor-pointer"
             data-test="DesignSystem-GenericChip--clearButton"
             role="button"
             style="font-size: 16px; width: 16px;"

package/core/components/molecules/dropzone/Dropzone.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 import DropzoneBase, { DropzoneBaseProps } from './DropzoneBase';
@@ -7,7 +7,7 @@ import DropzoneError from './DropzoneError';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { fileErrorMessages } from './FileErrors';
 
-export type Type = 'standard' | 'compressed' | 'tight';
+export type DropZoneType = 'standard' | 'compressed' | 'tight';
 
 export interface DropzoneProps extends BaseProps, DropzoneBaseProps {
   /**
@@ -17,7 +17,7 @@ export interface DropzoneProps extends BaseProps, DropzoneBaseProps {
   /**
    * Size of `Dropzone`
    */
-  type: Type;
+  type: DropZoneType;
   /**
    * Description of maximum size in `FileUploader`
    */