Merge pull request #2296 from innovaccer/develop

Develop

.gitignore

@@ -104,3 +104,4 @@ docs/node_modules
 docs/static/sb/
 docs/cypress/videos
 docs/cypress/screenshots
+.env

core/ai-components/AIResponse/__stories__/custom.story.jsx

@@ -25,7 +25,7 @@ export const CustomContent = () => {
 };
 
 export default {
-  title: 'Components/AI/AI Response (Beta)/Custom Content',
+  title: 'Components/AI/AI Response/Custom Content',
   component: AIResponse,
   subcomponents: {
     'AIResponse.Button': AIResponse.Button,

core/ai-components/AIResponse/__stories__/generatingContent.story.jsx

@@ -322,7 +322,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/AI/AI Response (Beta)/Generating Content',
+  title: 'Components/AI/AI Response/Generating Content',
   component: AIResponse,
   subcomponents: {
     'AIResponse.Button': AIResponse.Button,

core/ai-components/AIResponse/__stories__/givingFeedback.story.jsx

@@ -438,7 +438,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/AI/AI Response (Beta)/Giving Feedback',
+  title: 'Components/AI/AI Response/Giving Feedback',
   component: AIResponse,
   subcomponents: {
     'AIResponse.Button': AIResponse.Button,

core/ai-components/AIResponse/__stories__/index.story.jsx

@@ -165,7 +165,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/AI/AI Response (Beta)/All',
+  title: 'Components/AI/AI Response/All',
   component: AIResponse,
   subcomponents: {
     'AIResponse.Button': AIResponse.Button,

core/ai-components/AIResponse/__stories__/loading.story.jsx

@@ -11,7 +11,7 @@ export const GeneratingResponse = () => {
 };
 
 export default {
-  title: 'Components/AI/AI Response (Beta)/Generating Response',
+  title: 'Components/AI/AI Response/Generating Response',
   component: AIResponse,
   subcomponents: {
     'AIResponse.Button': AIResponse.Button,

core/components/atoms/link/Link.tsx

@@ -54,6 +54,13 @@ export interface LinkProps extends BaseProps, OmitNativeProps<HTMLLinkElement, '
   children: React.ReactNode;
 }
 
+/**
+ *
+ * The choice to use the appearance `subtle` property for the **Link** component, while using the `subtle` boolean prop for the **LinkButton** component, is based on the different roles of typography and action components.
+ * - The **Link** component is primarily a typography element. Typography components use the "appearance" property to define their visual style, ensuring consistency and predictability when styling text-based elements.
+ * - In contrast, the **LinkButton** component is an action component. Action components use "boolean props" to indicate variations in their behavior and appearance. Therefore, the **LinkButton** uses the `subtle` boolean prop to signify a specific visual style that aligns with other button components.
+ */
+
 export const Link = (props: LinkProps) => {
   const { children, className, appearance, size, disabled, ...rest } = props;
 

core/components/atoms/popperWrapper/PopperWrapper.tsx

@@ -91,6 +91,10 @@ export interface PopperWrapperProps {
    * Refer to [this](https://popper.js.org/docs/v1/#modifierscomputestyle)
    */
   computeStyles?: object;
+  /**
+   * Defines whether to show popover or not
+   */
+  disabled?: boolean;
 }
 
 interface PopperWrapperState {
@@ -115,14 +119,15 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     hoverable: true,
     appendToBody: true,
     style: {},
+    disabled: false,
   };
 
   constructor(props: PopperWrapperProps) {
     super(props);
 
     this.state = {
       animationKeyframe: '',
-      isOpen: this.props.open || false,
+      isOpen: (this.props.open && !this.props.disabled) || false,
       uniqueKey: '',
     };
 
@@ -162,7 +167,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       this.setState({
         animationKeyframe: '',
       });
-      if (this.props.open) {
+      if (this.props.open && !this.props.disabled) {
         const triggerElement = this.triggerRef.current;
         const zIndex = this.getZIndexForLayer(triggerElement);
 
@@ -293,9 +298,9 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   };
 
   getTriggerElement(ref: React.Ref<any>) {
-    const { trigger, on, triggerClass } = this.props;
+    const { trigger, on, triggerClass, disabled } = this.props;
     const options =
-      on === 'hover'
+      on === 'hover' && !disabled
         ? {
             ref,
             onMouseEnter: this.handleMouseEnter,
@@ -307,7 +312,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
             ref,
             onClick: (ev: React.MouseEvent<HTMLDivElement>) => {
               ev.stopPropagation();
-              this.togglePopper('onClick');
+              !disabled && this.togglePopper('onClick');
             },
           };
 

core/components/molecules/inputMask/InputMask.tsx

@@ -173,7 +173,11 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
   );
 
   const setCursorPosition = React.useCallback(
-    (val: number) => setSelectionPos({ start: val, end: val }),
+    (val: number) => {
+      if (document && document.activeElement === ref.current) {
+        setSelectionPos({ start: val, end: val });
+      }
+    },
     [setSelectionPos]
   );
 

core/components/molecules/keyValuePair/KeyElement.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { IconProps } from '@/index.type';
+import { Icon, Text } from '@/index';
+import classNames from 'classnames';
+import { BaseProps, extractBaseProps } from '@/utils/types';
+
+type IconPosition = 'left' | 'right';
+
+export interface KeyElementProps extends BaseProps {
+  /**
+   * React Element to be added inside `KeyElement`
+   */
+  children?: React.ReactNode;
+  /**
+   * Specify label to be displayed in `KeyElement`
+   */
+  label?: React.ReactText;
+  /**
+   * Specify Icon name to displayed in `KeyElement`
+   */
+  icon?: string;
+  /**
+   * List of icon options
+   *
+   * <pre className="DocPage-codeBlock">
+   *  IconProps: {
+   *    name?: string;
+   *    size: number;
+   *    type?: 'rounded' | 'outlined';
+   *    appearance?: IconAppearance;
+   *    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+   *    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+   *    children?: React.ReactNode;
+   *    tabIndex?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>['tabIndex'];
+   *  }
+   * </pre>
+   */
+  iconOptions?: IconProps;
+  /**
+   * Align icon left or right
+   */
+  iconAlign?: IconPosition;
+}
+
+export const KeyElement = (props: KeyElementProps) => {
+  const { children, icon, iconOptions, iconAlign, label, className } = props;
+
+  const baseProps = extractBaseProps(props);
+
+  const iconClassNames = classNames('py-2', {
+    'mr-3': iconAlign === 'left',
+    'ml-3': iconAlign === 'right',
+  });
+
+  const keyClassNames = classNames('d-flex', 'align-items-center', className);
+
+  if (children) {
+    return (
+      <dt data-test="DesignSystem-KeyValuePair-KeyElement" {...baseProps}>
+        {children}
+      </dt>
+    );
+  }
+
+  return (
+    <dt data-test="DesignSystem-KeyValuePair-KeyElement" {...baseProps} className={keyClassNames}>
+      {icon && iconAlign === 'left' && (
+        <Icon
+          appearance="subtle"
+          name={icon}
+          className={iconClassNames}
+          data-test="DesignSystem-KeyValuePair-Icon--Left"
+          {...iconOptions}
+        />
+      )}
+      {label && (
+        <Text weight="medium" appearance="subtle">
+          {label}
+        </Text>
+      )}
+      {icon && iconAlign === 'right' && (
+        <Icon
+          appearance="subtle"
+          name={icon}
+          className={iconClassNames}
+          data-test="DesignSystem-KeyValuePair-Icon--Right"
+          {...iconOptions}
+        />
+      )}
+    </dt>
+  );
+};
+
+KeyElement.defaultProps = {
+  iconAlign: 'left',
+};
+
+export default KeyElement;

core/components/molecules/keyValuePair/KeyValuePair.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import KeyElement from './KeyElement';
+import ValueElement from './ValueElement';
+import { BaseProps } from '@/utils/types';
+import classNames from 'classnames';
+
+export interface KeyValuePairProps extends BaseProps {
+  /**
+   * React Element to be added inside `KeyValuePair`
+   */
+  children: React.ReactNode;
+}
+
+export const KeyValuePair = (props: KeyValuePairProps) => {
+  const { children, className } = props;
+
+  const pairClassNames = classNames('m-0', className);
+
+  return (
+    <dl data-test="DesignSystem-KeyValuePair" {...props} className={pairClassNames}>
+      {children}
+    </dl>
+  );
+};
+
+KeyValuePair.Key = KeyElement;
+KeyValuePair.Value = ValueElement;
+
+export default KeyValuePair;

core/components/molecules/keyValuePair/ValueElement.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import classNames from 'classnames';
+import { BaseProps, extractBaseProps } from '@/utils/types';
+
+export interface ValueElementProps extends BaseProps {
+  /**
+   * React Element to be added inside `ValueElement`
+   */
+  children?: React.ReactNode;
+  /**
+   * Specify value to be displayed in `ValueElement`
+   */
+  value?: React.ReactText;
+}
+
+export const ValueElement = (props: ValueElementProps) => {
+  const { children, value, className } = props;
+
+  const baseProps = extractBaseProps(props);
+
+  const valueClassNames = classNames('m-0', className);
+
+  if (children) {
+    return (
+      <dd data-test="DesignSystem-KeyValuePair-ValueElement" {...baseProps} className={valueClassNames}>
+        {children}
+      </dd>
+    );
+  }
+
+  return (
+    <dd data-test="DesignSystem-KeyValuePair-ValueElement" {...baseProps} className={valueClassNames}>
+      {value && <Text>{value}</Text>}
+    </dd>
+  );
+};
+
+export default ValueElement;