@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/atoms/input/__stories__/RequiredVsOptional.story.tsx

@@ -6,17 +6,19 @@ export const requiredVsOptionalMarking = () => {
     <div>
       <div className="d-flex">
         <div>
-          <Label withInput={true} required={true}>
+          <Label htmlFor="email" withInput={true} required={true}>
             Email
           </Label>
-          <Input name="input" placeholder="e.g lawsonjoy@gmail.com" />
+          <Input id="email" required placeholder="e.g lawsonjoy@gmail.com" />
           <div className="d-flex align-items-center justify-content-center mt-5">
             <Text weight="medium">Required Field</Text>
           </div>
         </div>
         <div className="ml-9">
-          <Label withInput={true}>Email</Label>
-          <Input name="input" placeholder="e.g lawsonjoy@gmail.com" />
+          <Label htmlFor="email2" withInput={true}>
+            Email
+          </Label>
+          <Input id="email2" placeholder="e.g lawsonjoy@gmail.com" />
           <div className="d-flex align-items-center justify-content-center mt-5">
             <Text weight="medium">Optional Field</Text>
           </div>
@@ -24,17 +26,19 @@ export const requiredVsOptionalMarking = () => {
       </div>
       <div className="d-flex mt-9">
         <div>
-          <Label withInput={true}>Email</Label>
-          <Input name="input" placeholder="e.g lawsonjoy@gmail.com" />
+          <Label htmlFor="email3" withInput={true}>
+            Email
+          </Label>
+          <Input id="email3" placeholder="e.g lawsonjoy@gmail.com" />
           <div className="d-flex align-items-center justify-content-center mt-5">
             <Text weight="medium">Required Field</Text>
           </div>
         </div>
         <div className="ml-9">
-          <Label withInput={true} optional={true}>
+          <Label htmlFor="email4" withInput={true} optional={true}>
             Email
           </Label>
-          <Input name="input" placeholder="e.g lawsonjoy@gmail.com" />
+          <Input id="email4" placeholder="e.g lawsonjoy@gmail.com" />
           <div className="d-flex align-items-center justify-content-center mt-5">
             <Text weight="medium">Optional Field</Text>
           </div>

package/core/components/atoms/input/__stories__/variants/controlledInput.story.tsx

@@ -44,6 +44,51 @@ export const controlledInput = () => {
     </div>
   );
 };
+
+const customCode = `() => {
+  const [visibility, setVisibility] = React.useState(false);
+  const [value, setValue] = React.useState('Value');
+  const handleParentChange = (event) => {
+    const updatedValue = event.target.value;
+      setValue(updatedValue);
+  };
+  const [value1, setValue1] = React.useState('Value');
+  const onChangeHandler = (event) => {
+    const updatedValue = event.target.value;
+      setValue1(updatedValue);
+  };
+  const onClearHandler = () => {
+    const updatedValue = '';
+      setValue1(updatedValue);
+  };
+  return (
+    <div className="d-flex">
+      <Input
+        name="input"
+        value={value}
+        type={visibility ? 'text' : 'password'}
+        placeholder="Placeholder"
+        actionIcon={
+          <Icon
+            onClick={() => setVisibility((x) => !x)}
+            name={visibility ? 'visibility_on' : 'visibility_off'}
+            aria-label={visibility ? 'Show Password' : 'Hide Password'}
+            className="cursor-pointer"
+          />
+        }
+        onChange={handleParentChange}
+      />
+      <Input
+        name="input"
+        value={value1}
+        type="text"
+        placeholder="PlaceHolder"
+        onChange={onChangeHandler}
+        onClear={onClearHandler}
+      />
+    </div>
+  );
+};`;
 export default {
   title: 'Components/Input/Variants/Controlled Input',
   component: Input,
@@ -51,6 +96,7 @@ export default {
     docs: {
       docPage: {
         title: 'Input',
+        customCode,
         props: {
           exclude: ['autocomplete'],
         },

package/core/components/atoms/input/__stories__/variants/types/BasicInput.story.tsx

@@ -7,7 +7,7 @@ export const basic = () => {
   return (
     <div className="Row">
       <div className="mr-9 mb-8 w-25">
-        <Input name="input" value="Value" onChange={action('on-change')} onClear={action('on-clear')} />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} />
         <br />
         <Text weight="strong">Default</Text>
       </div>
@@ -24,7 +24,7 @@ export const basic = () => {
         <Text weight="strong">Placeholder</Text>
       </div>
       <div className="mr-9 mb-8 w-25">
-        <Input name="input" value="Value" onChange={action('on-change')} onClear={action('on-clear')} error={true} />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} error={true} />
         <br />
         <Text weight="strong">Error</Text>
       </div>

package/core/components/atoms/input/__stories__/variants/types/IconLeft.story.tsx

@@ -8,14 +8,13 @@ export const iconLeft = () => {
   return (
     <div className="Row">
       <div className="mr-9 mb-8 w-25">
-        <Input name="input" value="Value" onChange={action('on-change')} onClear={action('on-clear')} icon={icon} />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} icon={icon} />
         <br />
         <Text weight="strong">Default</Text>
       </div>
       <div className="mr-9 mb-8 w-25">
         <Input
           name="input"
-          value=""
           placeholder="Placeholder"
           onChange={action('on-change')}
           onClear={action('on-clear')}
@@ -26,14 +25,7 @@ export const iconLeft = () => {
         <Text weight="strong">Placeholder</Text>
       </div>
       <div className="mr-9 mb-8 w-25">
-        <Input
-          name="input"
-          value="Value"
-          onChange={action('on-change')}
-          onClear={action('on-clear')}
-          error={true}
-          icon={icon}
-        />
+        <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} error={true} icon={icon} />
         <br />
         <Text weight="strong">Error</Text>
       </div>

package/core/components/atoms/input/__stories__/variants/types/WithLabel.story.tsx

@@ -11,13 +11,7 @@ export const withLabel = () => {
           <Label withInput={true} required={true}>
             Full Name
           </Label>
-          <Input
-            name="input"
-            value="Value"
-            onChange={action('on-change')}
-            onClear={action('on-clear')}
-            required={true}
-          />
+          <Input name="input" onChange={action('on-change')} onClear={action('on-clear')} required={true} />
         </div>
         <br />
         <Text weight="strong">No Caption</Text>
@@ -28,7 +22,6 @@ export const withLabel = () => {
         </Label>
         <Input
           name="input"
-          value="Value"
           type="password"
           onChange={action('on-change')}
           onClear={action('on-clear')}
@@ -44,7 +37,6 @@ export const withLabel = () => {
         </Label>
         <Input
           name="input"
-          value="Value"
           type="password"
           onChange={action('on-change')}
           onClear={action('on-clear')}

package/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -31,6 +32,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <div
@@ -64,6 +66,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -87,6 +90,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <div
@@ -120,6 +124,7 @@ exports[`Input component
     <div
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -142,6 +147,7 @@ exports[`Input component
     <div
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
     >
       <div
         class="Input-inlineLabel"
@@ -173,6 +179,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -195,6 +202,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
     >
       <div
         class="Input-inlineLabel"
@@ -226,6 +234,7 @@ exports[`Input component
     <div
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -248,6 +257,7 @@ exports[`Input component
     <div
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
     >
       <div
         class="Input-inlineLabel"
@@ -279,6 +289,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
     >
       <input
         class="Input-input Input-input--regular"
@@ -300,6 +311,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -322,6 +334,7 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -344,6 +357,7 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -368,6 +382,7 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <div
@@ -402,6 +417,7 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -426,6 +442,7 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <div
@@ -460,6 +477,7 @@ exports[`Input component
     <div
       class="Input Input--regular Input--error"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <input
@@ -482,6 +500,7 @@ exports[`Input component
     <div
       class="Input Input--regular Input--error"
       data-test="DesignSystem-InputWrapper"
+      role="presentation"
       style="min-width: 256px;"
     >
       <div

package/core/components/atoms/label/Label.tsx

@@ -50,7 +50,7 @@ export const Label = (props: LabelProps) => {
     'Label--disabled': disabled,
   });
 
-  const renderInfo = (isRequired: boolean = false, isOptional?: boolean) => {
+  const renderInfo = (isRequired = false, isOptional?: boolean) => {
     if (isRequired) {
       return <span className="Label-requiredIndicator" data-test="DesignSystem-Label--RequiredIndicator" />;
     }

package/core/components/atoms/legend/Legend.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Text, { Appearance as LabelAppearance } from '@/components/atoms/text';
+import Text, { TextAppearance } from '@/components/atoms/text';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
@@ -15,7 +15,7 @@ export interface LegendProps extends BaseProps {
   /**
    * Color of label
    */
-  labelAppearance?: LabelAppearance;
+  labelAppearance?: TextAppearance;
   /**
    * Size of Icon
    */
@@ -66,6 +66,8 @@ export const Legend = (props: LegendProps) => {
     width: `${iconSize}px`,
   };
 
+  // TODO(a11y): fix accessibility
+  /* eslint-disable */
   return (
     <div
       {...baseProps}
@@ -74,6 +76,7 @@ export const Legend = (props: LegendProps) => {
       onMouseEnter={(e) => onMouseEnter && onMouseEnter(e)}
       onMouseLeave={(e) => onMouseLeave && onMouseLeave(e)}
     >
+      {/* eslint-enable */}
       <span className="Legend-icon" style={styles} />
       <Text appearance={labelAppearance} weight={labelWeight}>
         {children}

package/core/components/atoms/legend/__stories__/variants/labelAppearance.story.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Appearance } from '@/components/atoms/text';
+import { TextAppearance as LabelApperance } from '@/components/atoms/text';
 import Legend from '../../Legend';
 
 // CSF format story
 export const labelAppearance = () => {
-  const appearances: Appearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
+  const appearances: LabelApperance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
   return (
     <div>
       {appearances.map((appearance, i) => {

package/core/components/atoms/link/Link.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
 
 type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
-type Appearance = 'default' | 'subtle';
-type Size = 'regular' | 'tiny';
+type LinkAppearance = 'default' | 'subtle';
+type LinkSize = 'regular' | 'tiny';
 
 export interface LinkProps extends BaseProps, OmitNativeProps<HTMLLinkElement, 'onClick'> {
   /**
@@ -15,11 +15,11 @@ export interface LinkProps extends BaseProps, OmitNativeProps<HTMLLinkElement, '
   /**
    * Color of `Link`
    */
-  appearance: Appearance;
+  appearance: LinkAppearance;
   /**
    * Size of `Link`
    */
-  size: Size;
+  size: LinkSize;
   /**
    * Disables the `Link`, making it unable to be clicked
    */

package/core/components/atoms/message/Message.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Heading, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { MessageAppearance } from '@/common.type';
 
-export type Appearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
 const IconMapping = {
   success: 'check_circle',
   info: 'info',
@@ -15,7 +15,7 @@ export interface MessageProps extends BaseProps {
   /**
    * Color of `Message`
    */
-  appearance: Appearance;
+  appearance: MessageAppearance;
   /**
    * Title of the `Message`
    */
@@ -38,7 +38,9 @@ export interface MessageProps extends BaseProps {
 }
 
 export const Message = (props: MessageProps) => {
-  const { appearance, actions, title, className } = props;
+  const { actions, title, className } = props;
+  let { appearance } = props;
+  appearance = appearance === 'default' ? 'info' : appearance;
 
   const baseProps = extractBaseProps(props);
 
@@ -88,14 +90,12 @@ export const Message = (props: MessageProps) => {
 
   return (
     <div data-test="DesignSystem-Message" {...baseProps} className={MessageClass}>
-      {appearance !== 'default' && (
-        <Icon
-          data-test="DesignSystem-Message--Icon"
-          name={IconMapping[appearance]}
-          appearance={appearance}
-          className={IconClass}
-        />
-      )}
+      <Icon
+        data-test="DesignSystem-Message--Icon"
+        name={IconMapping[appearance]}
+        appearance={appearance}
+        className={IconClass}
+      />
       <div>
         {title && (
           <Heading data-test="DesignSystem-Message--Title" size="s" className={TitleClass}>
@@ -115,7 +115,7 @@ export const Message = (props: MessageProps) => {
 
 Message.displayName = 'Message';
 Message.defaultProps = {
-  appearance: 'default',
+  appearance: 'info',
   description: '',
 };
 

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

@@ -4,7 +4,7 @@ import { Message, Text } from '@/index';
 
 // CSF format story
 export const all = () => {
-  const appearance = select('appearance', ['default', 'alert', 'info', 'success', 'warning'], undefined);
+  const appearance = select('appearance', ['alert', 'info', 'success', 'warning'], undefined);
 
   const title = text('title', 'Design System');
 

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

@@ -4,7 +4,7 @@ import { MessageProps } from '@/index.type';
 
 // CSF format story
 export const appearanceWithoutTitle = () => {
-  const appearances: MessageProps['appearance'][] = ['default', 'alert', 'info', 'success', 'warning'];
+  const appearances: MessageProps['appearance'][] = ['alert', 'info', 'success', 'warning'];
   const innerStyle = {
     display: 'flex',
     'align-items': 'center',

package/core/components/atoms/message/__stories__/variants/AppearanceTitle.story.tsx

@@ -5,7 +5,7 @@ import { MessageProps } from '@/index.type';
 
 // CSF format story
 export const appearanceWithTitle = () => {
-  const appearances: MessageProps['appearance'][] = ['default', 'alert', 'info', 'success', 'warning'];
+  const appearances: MessageProps['appearance'][] = ['alert', 'info', 'success', 'warning'];
   const innerStyle = {
     display: 'flex',
     'align-items': 'center',

package/core/components/atoms/message/__tests__/Message.test.tsx

@@ -4,7 +4,7 @@ import { Message, Text } from '@/index';
 import { MessageProps as Props } from '@/index.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const appearances: Props['appearance'][] = ['default', 'alert', 'info', 'warning', 'success'];
+const appearances: Props['appearance'][] = ['alert', 'info', 'warning', 'success'];
 const title = 'Title goes here';
 const description = 'Description goes here';
 const actions = (
@@ -73,11 +73,6 @@ describe('Message component with prop:appearance', () => {
       expect(getByTestId('DesignSystem-Message')).toHaveClass(`Message--${appearance}`);
     });
   });
-
-  it('should not render icon if appearance is default', () => {
-    const { queryByTestId } = render(<Message appearance="default" description={description} />);
-    expect(queryByTestId('DesignSystem-Message--Icon')).not.toBeInTheDocument();
-  });
 });
 
 describe('Message component with prop: actions', () => {

package/core/components/atoms/message/__tests__/__snapshots__/Message.test.tsx.snap

@@ -52,51 +52,6 @@ exports[`Message component
 </body>
 `;
 
-exports[`Message component 
-  appearance: "default", title: "Title goes here", description: "Description goes here", actions: "[ReactNode]"
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Message Message--default"
-      data-test="DesignSystem-Message"
-    >
-      <div>
-        <h5
-          class="Heading Heading--s Heading--default Message-heading Message-heading--default"
-          data-test="DesignSystem-Message--Title"
-        >
-          Title goes here
-        </h5>
-        <span
-          class="Text Text--default Text--regular Message-text Message-text--default"
-          data-test="DesignSystem-Message--Description"
-        >
-          Description goes here
-        </span>
-        <div
-          class="Message-actions"
-          data-test="DesignSystem-Message--actions"
-        >
-          <span
-            class="Text Text--link Text--regular mr-5 cursor-pointer"
-            data-test="DesignSystem-Text"
-          >
-            Action 1
-          </span>
-          <span
-            class="Text Text--link Text--regular cursor-pointer"
-            data-test="DesignSystem-Text"
-          >
-            Action 2
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
 exports[`Message component 
   appearance: "info", title: "Title goes here", description: "Description goes here", actions: "[ReactNode]"
  1`] = `

package/core/components/atoms/metaList/__tests__/MetaList.test.tsx

@@ -3,8 +3,8 @@ import { render } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { MetaList } from '@/index';
 import { MetaListProps as Props } from '@/index.type';
-import { Appearance as IconAppearance } from '../../icon';
-import { Appearance as TextAppearance } from '../../text';
+import { IconAppearance } from '../../icon';
+import { TextAppearance } from '../../text';
 
 const appearance: IconAppearance[] = [
   'primary',

package/core/components/atoms/metricInput/MetricInput.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
+import { AutoComplete } from '@/common.type';
 
-export type AutoComplete = 'on' | 'off';
-export type Size = 'regular' | 'large';
+export type MetricInputSize = 'regular' | 'large';
 
 export interface MetricInputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
   /**
@@ -27,7 +27,7 @@ export interface MetricInputProps extends BaseProps, BaseHtmlProps<HTMLInputElem
    * Size of the `MetricInput`
    * @default "regular"
    */
-  size?: Size;
+  size?: MetricInputSize;
   /**
    * Material icon name
    */
@@ -92,10 +92,10 @@ const sizeMapping = {
   large: 20,
 };
 
-const capMin = (min: number = -Infinity, value: number) =>
+const capMin = (min = -Infinity, value: number) =>
   isNaN(min) || (!min && min !== 0) || isNaN(value) || (!value && value !== 0) ? value : Math.max(min, value);
 
-const capMax = (max: number = +Infinity, value: number) =>
+const capMax = (max = +Infinity, value: number) =>
   isNaN(max) || (!max && max !== 0) || isNaN(value) || (!value && value !== 0) ? value : Math.min(max, value);
 
 /**
@@ -229,7 +229,14 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
   const iconSize = size === 'regular' ? 12 : 16;
 
   return (
-    <div data-test="DesignSystem-MetricInputWrapper" className={classes} onClick={() => ref.current?.focus()}>
+    <div
+      data-test="DesignSystem-MetricInputWrapper"
+      className={classes}
+      onClick={() => ref.current?.focus()}
+      onFocus={() => ref.current?.focus()}
+      onKeyDown={() => {}}
+      role="presentation"
+    >
       {icon && (
         <Icon
           data-test="DesignSystem-MetricInput--icon"
@@ -278,8 +285,10 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
           {suffix}
         </Text>
       )}
-      <div className="MetricInput-arrowIcons" tabIndex={0}>
+
+      <div className="MetricInput-arrowIcons">
         <Icon
+          tabIndex={-1}
           className={getArrowClass('up')}
           size={iconSize}
           name="keyboard_arrow_up"
@@ -287,6 +296,7 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
           data-test="DesignSystem-MetricInput--upIcon"
         />
         <Icon
+          tabIndex={-1}
           className={getArrowClass('down')}
           size={iconSize}
           name="keyboard_arrow_down"