@innovaccer/design-system 2.5.0 → 2.7.0-0

package/core/components/atoms/icon/__tests__/__snapshots__/Icon.test.tsx.snap

@@ -7,7 +7,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent1"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -22,7 +24,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent1Dark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -37,7 +41,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent1Lighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -52,7 +58,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent2"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -67,7 +75,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent2Dark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -82,7 +92,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent2Lighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -97,7 +109,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent3"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -112,7 +126,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent3Dark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -127,7 +143,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent3Lighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -142,7 +160,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent4"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -157,7 +177,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent4Dark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -172,7 +194,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--accent4Lighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -187,7 +211,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--alert"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -202,7 +228,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--alertDark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -217,7 +245,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--alertLighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -232,7 +262,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--destructive"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -247,7 +279,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--disabled"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -262,7 +296,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--info"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -277,7 +313,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--inverse"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -292,7 +330,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--primary"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -307,7 +347,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--primaryDark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -322,7 +364,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--primaryLighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -337,7 +381,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--subtle"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -352,7 +398,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--success"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -367,7 +415,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--successDark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -382,7 +432,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--successLighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -397,7 +449,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--warning"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -412,7 +466,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--warningDark"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -427,7 +483,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--warningLighter"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -442,7 +500,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon Icon--white"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -457,7 +517,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons Icon"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_filled
     </i>
@@ -472,7 +534,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-outlined Icon"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_outlined
     </i>
@@ -487,7 +551,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-outlined Icon"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_outlined
     </i>
@@ -502,7 +568,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -517,7 +585,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-round Icon"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_round
     </i>
@@ -532,7 +602,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-sharp Icon"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_sharp
     </i>
@@ -547,7 +619,9 @@ exports[`Icon component
   <div>
     <i
       class="material-icons material-icons-two-tone Icon"
+      role="button"
       style="font-size: 50px; width: 50px;"
+      tabindex="0"
     >
       events_two-tone
     </i>

package/core/components/atoms/input/Input.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { Tooltip, Icon, Text } from '@/index';
 import { IconProps } from '@/index.type';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
+import { AutoComplete } from '@/common.type';
 
 export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url';
-export type AutoComplete = 'on' | 'off';
-export type Size = 'tiny' | 'regular' | 'large';
+export type InputSize = 'tiny' | 'regular' | 'large';
 
 export interface InputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
   /**
@@ -27,14 +27,15 @@ export interface InputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
    */
   defaultValue?: string;
   /**
-   * Text to display when input is empty
+   * Text to display when input is empty.
+   * Incase a label is missing, a placeholder should be provided to make it accessible for all user.
    */
   placeholder?: string;
   /**
    * Size of the `Input`
    * @default "regular"
    */
-  size?: Size;
+  size?: InputSize;
   /**
    * Material icon name
    */
@@ -105,7 +106,7 @@ export interface InputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
   /**
    * Callback function when user clicks the clear button
    */
-  onClear?: (e: React.MouseEvent<HTMLElement>) => void;
+  onClear?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
   /**
    * Callback function when `Input` text changes
    */
@@ -216,6 +217,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
       className={classes}
       style={{ minWidth }}
       onClick={() => ref.current?.focus()}
+      role="presentation"
     >
       {inlineLabel && (
         <div className="Input-inlineLabel">
@@ -257,8 +259,16 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
       ) : (
         onClear &&
         (value || defaultValue) && (
-          <div className={rightIconClass} onClick={(e) => onClear(e)} data-test="DesignSystem-Input--closeIcon">
-            <Icon name={'close'} size={sizeMapping[size]} />
+          <div className={rightIconClass}>
+            <Icon
+              data-test="DesignSystem-Input--closeIcon"
+              onClick={(e) => {
+                ref.current?.focus({ preventScroll: true });
+                onClear(e);
+              }}
+              name={'close'}
+              size={sizeMapping[size]}
+            />
           </div>
         )
       )}

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

@@ -12,7 +12,7 @@ export const basicInput = () => {
     setValue('');
   }, []);
 
-  return <Input name="input" className="w-25" value={value} onChange={onChange} onClear={onClear} />;
+  return <Input placeholder="Name" name="input" className="w-25" value={value} onChange={onChange} onClear={onClear} />;
 };
 
 const customCode = `() => {
@@ -28,6 +28,7 @@ const customCode = `() => {
 
   return (
     <Input
+      placeholder="Name"
       name="input"
       className="w-25"
       value={value}

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

@@ -2,34 +2,115 @@ import * as React from 'react';
 import { Input, Icon, Label, Caption } from '@/index';
 
 export const inputWithCaption = () => {
+  const [visibility, setVisibility] = React.useState(false);
+  const [visibility2, setVisibility2] = React.useState(false);
   return (
     <div className="d-flex">
       <div>
-        <Label withInput={true}>Password</Label>
+        <Label htmlFor="password-1" withInput={true}>
+          Password
+        </Label>
         <Input
-          name="input"
+          id="password-1"
+          placeholder="Password"
           value="Value"
-          type="password"
-          actionIcon={<Icon name="visibility_off" className="cursor-pointer" />}
+          type={visibility ? 'text' : 'password'}
+          actionIcon={
+            <Icon
+              onClick={() => setVisibility((x) => !x)}
+              name={visibility ? 'visibility_on' : 'visibility_off'}
+              className="cursor-pointer"
+            />
+          }
         />
         <Caption withInput={true}>Create a string, unique password</Caption>
       </div>
       <div className="ml-6">
-        <Label withInput={true}>Password</Label>
+        <Label htmlFor="password-2" withInput={true}>
+          Password
+        </Label>
         <Input
-          name="input"
+          id="password-2"
+          placeholder="Password"
           value="Value"
-          type="password"
-          actionIcon={<Icon name="visibility_off" className="cursor-pointer" />}
+          type={visibility2 ? 'text' : 'password'}
+          actionIcon={
+            <Icon
+              onClick={() => setVisibility2((x) => !x)}
+              name={visibility2 ? 'visibility_on' : 'visibility_off'}
+              className="cursor-pointer"
+            />
+          }
         />
         <Caption withInput={true} error={true}>
-          Create a password with atleat 8 characters
+          Create a password with at least 8 characters
         </Caption>
       </div>
     </div>
   );
 };
 
+const customCode = `() => {
+  const [visibility, setVisibility] = React.useState(false);
+  const [visibility2, setVisibility2] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('Value');
+  const [secondInputValue, setSecondInputValue] = React.useState('Value');
+  return (
+    <div className="d-flex">
+      <div>
+        <Label htmlFor="password-1" withInput={true}>
+          Password
+        </Label>
+        <Input
+          id="password-1"
+          placeholder="Password"
+          value={inputValue}
+          type={visibility ? 'text' : 'password'}
+          onChange={(ev) => {
+            ev.persist();
+            setInputValue(ev.target.value);
+          }}
+          actionIcon={
+            <Icon
+              aria-label={visibility ? 'Show Password' : 'Hide Password'}
+              onClick={() => setVisibility((x) => !x)}
+              name={visibility ? 'visibility_on' : 'visibility_off'}
+              className="cursor-pointer"
+            />
+          }
+        />
+        <Caption withInput={true}>Create a string, unique password</Caption>
+      </div>
+      <div className="ml-6">
+        <Label htmlFor="password-2" withInput={true}>
+          Password
+        </Label>
+        <Input
+          id="password-2"
+          placeholder="Password"
+          value={secondInputValue}
+          type={visibility2 ? 'text' : 'password'}
+          onChange={(ev) => {
+            ev.persist();
+            setSecondInputValue(ev.target.value);
+          }}
+          actionIcon={
+            <Icon
+              aria-label={visibility ? 'Show Password' : 'Hide Password'}
+              onClick={() => setVisibility2((x) => !x)}
+              name={visibility2 ? 'visibility_on' : 'visibility_off'}
+              className="cursor-pointer"
+            />
+          }
+        />
+        <Caption withInput={true} error={true}>
+          Create a password with at least 8 characters
+        </Caption>
+      </div>
+    </div>
+  );
+};`;
+
 export default {
   title: 'Components/Input/Input With Caption',
   component: Input,
@@ -37,6 +118,7 @@ export default {
     docs: {
       docPage: {
         title: 'Input',
+        customCode,
         props: {
           exclude: ['autocomplete'],
         },

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

@@ -10,8 +10,10 @@ export const inputWithLabel = () => {
 
   return (
     <>
-      <Label withInput={true}>Email</Label>
-      <Input name="input" className="w-25" value={value} onChange={onChange} />
+      <Label htmlFor="email" withInput={true}>
+        Email
+      </Label>
+      <Input id="email" placeholder="Email" className="w-25" value={value} onChange={onChange} />
     </>
   );
 };
@@ -25,12 +27,18 @@ const customCode = `() => {
 
   return (
     <>
-      <Label withInput={true}>Email</Label>
+      <Label 
+        withInput={true}
+        htmlFor="email"
+      >
+        Email
+      </Label>
       <Input
         name="input"
         className="w-25"
         value={value}
         onChange={onChange}
+        placeholder="Email"
       />
     </>
   );

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

@@ -5,17 +5,58 @@ export const labelPosition = () => {
   return (
     <div className="d-flex align-items-end">
       <div>
-        <Label withInput={true}>Full Name</Label>
-        <Input name="input" value="Joy Lawson" />
+        <Label htmlFor="fullName" withInput={true}>
+          Full Name
+        </Label>
+        <Input placeholder="Full name" id="fullName" value="Joy Lawson" />
       </div>
       <div className="d-flex align-items-center ml-9">
-        <Label className="mr-6">Full Name</Label>
-        <Input name="input" value="Joy Lawson" />
+        <Label htmlFor="fullName2" className="mr-6">
+          Full Name
+        </Label>
+        <Input placeholder="Full name" id="fullName2" value="Joy Lawson" />
       </div>
     </div>
   );
 };
 
+const customCode = `() => {
+  const [inputValue, setInputValue] = React.useState('Joy Lawson');
+  const [secondInputValue, setSecondInputValue] = React.useState('Joy Lawson');
+  return (
+    <div className="d-flex align-items-end">
+      <div>
+        <Label htmlFor="fullName" withInput={true}>
+          Full Name
+        </Label>
+        <Input
+          placeholder="Full name"
+          id="fullName"
+          value={inputValue}
+          onChange={(ev) => {
+            ev.persist();
+            setInputValue(ev.target.value);
+          }}
+        />
+      </div>
+      <div className="d-flex align-items-center ml-9">
+        <Label htmlFor="fullName2" className="mr-6">
+          Full Name
+        </Label>
+        <Input
+          placeholder="Full name"
+          id="fullName2"
+          value={secondInputValue}
+          onChange={(ev) => {
+            ev.persist();
+            setSecondInputValue(ev.target.value);
+          }}
+        />
+      </div>
+    </div>
+  );
+};`;
+
 export default {
   title: 'Components/Input/Label Position',
   component: Input,
@@ -23,6 +64,7 @@ export default {
     docs: {
       docPage: {
         title: 'Input',
+        customCode,
         props: {
           exclude: ['autocomplete'],
         },