Merge pull request #2099 from innovaccer/develop

Develop
innovaccer · Mar 13, 2024 · 4fb8587 · 4fb8587
2 parents c6bc0bb + 1b35649
commit 4fb8587
Show file tree

Hide file tree

Showing 111 changed files with 16,222 additions and 1,461 deletions.
diff --git a/core/common.type.tsx b/core/common.type.tsx
@@ -96,3 +96,28 @@ export type AvatarSize = 'regular' | 'tiny';
 export type AvatarShape = 'round' | 'square';
 
 export type IconType = 'rounded' | 'outlined';
+
+export type PositionType =
+  | 'auto-start'
+  | 'auto'
+  | 'auto-end'
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'left-end'
+  | 'left'
+  | 'left-start';
+
+export type OptionType = {
+  label: string;
+  value: any;
+  isSelectedOption?: boolean;
+};
+
+export type TListboxSize = 'standard' | 'compressed' | 'tight';
diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
@@ -41,14 +41,29 @@ export interface AvatarProps extends BaseProps {
    * Determines the shape of `Avatar`
    */
   shape: AvatarShape;
+  /**
+   * Describe aria-role for the `Avatar`
+   */
+  role?: string;
 }
 
 const initialsLength = 2;
 const DefaultAppearance = 'secondary';
 const colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
 
 export const Avatar = (props: AvatarProps) => {
-  const { withTooltip, tooltipPosition, size, children, firstName, lastName, className, appearance, shape } = props;
+  const {
+    withTooltip,
+    tooltipPosition,
+    size,
+    children,
+    firstName,
+    lastName,
+    className,
+    appearance,
+    shape,
+    role = 'presentation',
+  } = props;
 
   const baseProps = extractBaseProps(props);
 
@@ -97,7 +112,7 @@ export const Avatar = (props: AvatarProps) => {
   const renderAvatar = () => {
     if (children && typeof children !== 'string') {
       return (
-        <span data-test="DesignSystem-AvatarWrapper" className={AvatarWrapperClassNames}>
+        <span data-test="DesignSystem-AvatarWrapper" className={AvatarWrapperClassNames} role={role}>
           <AvatarProvider value={sharedProp}>
             <span data-test="DesignSystem-Avatar" {...baseProps} className={AvatarClassNames}>
               {children}
@@ -108,7 +123,7 @@ export const Avatar = (props: AvatarProps) => {
     }
 
     return (
-      <span data-test="DesignSystem-AvatarWrapper" className={AvatarWrapperClassNames}>
+      <span data-test="DesignSystem-AvatarWrapper" className={AvatarWrapperClassNames} role={role}>
         <span data-test="DesignSystem-Avatar" {...baseProps} className={AvatarClassNames}>
           {initials && (
             <Text weight="medium" appearance={'white'} className={TextClassNames}>

diff --git a/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/core/components/atoms/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -14,6 +14,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--accent1"
@@ -38,6 +39,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--accent1"
@@ -121,6 +123,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--accent2"
@@ -145,6 +148,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--accent2"
@@ -228,6 +232,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--accent3"
@@ -252,6 +257,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--accent3"
@@ -335,6 +341,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--accent4"
@@ -359,6 +366,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--accent4"
@@ -442,6 +450,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--alert"
@@ -466,6 +475,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--alert"
@@ -549,6 +559,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--primary"
@@ -573,6 +584,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--primary"
@@ -656,6 +668,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--success"
@@ -680,6 +693,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--success"
@@ -763,6 +777,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--warning"
@@ -787,6 +802,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--warning"
@@ -870,6 +886,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--accent1"
@@ -894,6 +911,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--accent1"
@@ -977,6 +995,7 @@ Object {
         <span
           class="Avatar--wrapper Avatar--regular"
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--square Avatar--accent1"
@@ -1001,6 +1020,7 @@ Object {
       <span
         class="Avatar--wrapper Avatar--regular"
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--square Avatar--accent1"
@@ -1084,6 +1104,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--regular Avatar--accent1"
@@ -1108,6 +1129,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--regular Avatar--accent1"
@@ -1191,6 +1213,7 @@ Object {
         <span
           class=""
           data-test="DesignSystem-AvatarWrapper"
+          role="presentation"
         >
           <span
             class="Avatar Avatar--tiny Avatar--accent1"
@@ -1215,6 +1238,7 @@ Object {
       <span
         class=""
         data-test="DesignSystem-AvatarWrapper"
+        role="presentation"
       >
         <span
           class="Avatar Avatar--tiny Avatar--accent1"

diff --git a/core/components/atoms/avatar/avatarIcon/AvatarIcon.tsx b/core/components/atoms/avatar/avatarIcon/AvatarIcon.tsx
@@ -13,19 +13,6 @@ export interface AvatarIconProps extends BaseProps {
    * Type of material `Icon`
    */
   type?: 'outlined' | 'rounded';
-  /**
-   * Handler to be called when icon is clicked
-   */
-  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-  /**
-   * Handler to be called when key is pressed on icon
-   */
-  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
-  /**
-   * The tabindex global attribute indicates that its element can be focused, and
-   * where it participates in sequential keyboard navigation.
-   */
-  tabIndex?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>['tabIndex'];
 }
 
 const appearanceMapper: Record<string, string> = {