@innovaccer/design-system 2.7.0 → 2.9.0-0

package/core/components/atoms/avatarGroup/__tests__/__snapshots__/AvatarGroup.test.tsx.snap

@@ -16,6 +16,7 @@ Object {
           data-test="DesignSystem-AvatarGroup--Avatar"
           style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
         >
+          <style />
           <div
             class="OutsideClick PopperWrapper-trigger flex-grow-0"
           >
@@ -37,6 +38,7 @@ Object {
           data-test="DesignSystem-AvatarGroup--Avatar"
           style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
         >
+          <style />
           <div
             class="OutsideClick PopperWrapper-trigger flex-grow-0"
           >
@@ -53,6 +55,7 @@ Object {
             </span>
           </div>
         </div>
+        <style />
         <div
           class="OutsideClick PopperWrapper-trigger"
         >
@@ -62,10 +65,9 @@ Object {
           >
             <span
               class="Avatar Avatar--regular Avatar--secondary Avatar--disabled"
-              data-test="DesignSystem-Avatar"
             >
               <span
-                class="Text Text--white Text--medium Text--regular Avatar-content--regular Avatar-content--secondary"
+                class="Text Text--white Text--regular Avatar-content--secondary"
                 data-test="DesignSystem-Text"
               >
                 +4
@@ -86,6 +88,7 @@ Object {
         data-test="DesignSystem-AvatarGroup--Avatar"
         style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
       >
+        <style />
         <div
           class="OutsideClick PopperWrapper-trigger flex-grow-0"
         >
@@ -107,6 +110,7 @@ Object {
         data-test="DesignSystem-AvatarGroup--Avatar"
         style="border-radius: 50%; box-shadow: 0 0 0 var(--spacing-xs) var(--white);"
       >
+        <style />
         <div
           class="OutsideClick PopperWrapper-trigger flex-grow-0"
         >
@@ -123,6 +127,7 @@ Object {
           </span>
         </div>
       </div>
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger"
       >
@@ -132,10 +137,9 @@ Object {
         >
           <span
             class="Avatar Avatar--regular Avatar--secondary Avatar--disabled"
-            data-test="DesignSystem-Avatar"
           >
             <span
-              class="Text Text--white Text--medium Text--regular Avatar-content--regular Avatar-content--secondary"
+              class="Text Text--white Text--regular Avatar-content--secondary"
               data-test="DesignSystem-Text"
             >
               +4

package/core/components/atoms/button/Button.tsx

@@ -97,6 +97,7 @@ const sizeMapping: Record<ButtonSize, number> = {
   large: 20,
 };
 
+// eslint-disable-next-line react/display-name
 const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     size = 'regular',
@@ -179,8 +180,6 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
   );
 });
 
-ButtonElement.displayName = 'ButtonElement';
-
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { icon, tooltip, children } = props;
 

package/core/components/atoms/checkbox/__stories__/Group.story.tsx

@@ -3,7 +3,7 @@ import { Checkbox, Label } from '@/index';
 
 export const CheckboxGroup = () => (
   <div>
-    <Label>Problems</Label>
+    <Label className="mb-3">Problems</Label>
     <Checkbox label="Cardiovascular" defaultChecked={true} />
     <Checkbox label="Obesity" defaultChecked={true} className="mt-5" />
     <Checkbox label="Patient has language barriers" className="mt-5" />

package/core/components/atoms/checkbox/__stories__/Nested.story.tsx

@@ -51,6 +51,7 @@ export const NestedCheckboxes = () => {
               value={label}
               onChange={(c) => handleChildChange(c, ind)}
               defaultChecked={ind < 2}
+              className="mt-4"
             />
           );
         })}
@@ -105,6 +106,7 @@ const customCode = `() => {
                 checked={checked[ind]}
                 value={label}
                 onChange={c => handleChildChange(c, ind)}
+                className="mt-4"
               />
             );
           })

package/core/components/atoms/chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Action"
+      class="Chip-wrapper Chip Chip--Action"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -24,7 +24,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Action"
+      class="Chip-wrapper Chip Chip--Action"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -42,7 +42,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip-Action--disabled"
+      class="Chip-wrapper Chip Chip-Action--disabled"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -60,7 +60,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Input"
+      class="Chip-wrapper Chip Chip--Input"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -78,7 +78,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Input"
+      class="Chip-wrapper Chip Chip--Input"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -96,7 +96,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip-Input--disabled"
+      class="Chip-wrapper Chip Chip-Input--disabled"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -114,7 +114,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection"
+      class="Chip-wrapper Chip Chip--Selection"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -132,7 +132,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection"
+      class="Chip-wrapper Chip Chip--Selection"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -150,7 +150,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip-Selection--disabled"
+      class="Chip-wrapper Chip Chip-Selection--disabled"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -168,7 +168,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection"
+      class="Chip-wrapper Chip Chip--Selection"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span
@@ -186,7 +186,7 @@ exports[`Chip component
 <body>
   <div>
     <div
-      class="Chip Chip--Selection Chip-Selection--selected"
+      class="Chip-wrapper Chip Chip--Selection Chip-Selection--selected"
       data-test="DesignSystem-Chip--GenericChip"
     >
       <span

package/core/components/atoms/chipGroup/__tests__/__snapshots__/chipGroup.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--action"
+          class="Chip-wrapper Chip Chip--action"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
@@ -36,7 +36,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--input"
+          class="Chip-wrapper Chip Chip--input"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
@@ -68,7 +68,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--selection Chip-selection--selected"
+          class="Chip-wrapper Chip Chip--selection Chip-selection--selected"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i
@@ -100,7 +100,7 @@ exports[`ChipGroup component
         class="ChipGroup-item"
       >
         <div
-          class="Chip Chip--selection"
+          class="Chip-wrapper Chip Chip--selection"
           data-test="DesignSystem-ChipGroup--Chip"
         >
           <i

package/core/components/atoms/dropdown/DropdownButton.tsx

@@ -93,7 +93,7 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
       {!menu && (
         <div className="DropdownButton-wrapper">
           {inlineLabel && (
-            <Text appearance="subtle" className="mr-4">
+            <Text appearance="subtle" className="mr-4 white-space-nowrap">
               {`${inlineLabel.trim().charAt(0).toUpperCase()}${inlineLabel.trim().slice(1)}`}
             </Text>
           )}

package/core/components/atoms/dropdown/DropdownList.tsx

@@ -225,6 +225,9 @@ const DropdownList = (props: OptionsProps) => {
   const [popoverStyle, setPopoverStyle] = React.useState<PopoverProps['customStyle']>();
   const [cursor, setCursor] = React.useState(firstEnabledOption);
 
+  // Re-initializes its value to 0 on every re-render
+  let animateOrder = 0;
+
   React.useEffect(() => {
     if (dropdownOpen) {
       const { width, minWidth, maxWidth } = props;
@@ -282,11 +285,27 @@ const DropdownList = (props: OptionsProps) => {
     return Dropdown;
   };
 
+  const animateClass = classNames({
+    ['fade-in']: dropdownOpen,
+    ['opacity-0']: dropdownOpen,
+    ['Dropdown-items']: true,
+  });
+
+  const getAnimateOrderStyle = (order: number) => {
+    const animateStyle: React.CSSProperties = {
+      animationDelay: dropdownOpen ? order * 20 + 'ms' : '',
+    };
+    return animateStyle;
+  };
+
   const getDropdownSectionClass = (showClearButton?: boolean) => {
-    return classNames({
-      ['Dropdown-section']: true,
-      ['Dropdown-section--withClear']: showClearButton,
-    });
+    return classNames(
+      {
+        ['Dropdown-section']: true,
+        ['Dropdown-section--withClear']: showClearButton,
+      },
+      animateClass
+    );
   };
 
   const dropdownClass = classNames(
@@ -301,11 +320,14 @@ const DropdownList = (props: OptionsProps) => {
     ['Dropdown-wrapper--wrap']: !truncateOption,
   });
 
-  const SelectAllClass = classNames({
-    ['Option-checkbox']: true,
-    ['Option-checkbox--active']: cursor === 0,
-    ['OptionWrapper']: true,
-  });
+  const SelectAllClass = classNames(
+    {
+      ['Option-checkbox']: true,
+      ['Option-checkbox--active']: cursor === 0,
+      ['OptionWrapper']: true,
+    },
+    animateClass
+  );
 
   const onToggleDropdown = (open: boolean, type?: string) => {
     toggleDropdown(open, type);
@@ -347,7 +369,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderFooter = () => {
     const { footerLabel = 'Search for more options' } = props;
     return (
-      <div className={'Dropdown-footer'}>
+      <div className={`Dropdown-footer ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
         <Text size="small" appearance={'subtle'}>
           {footerLabel}
         </Text>
@@ -360,7 +382,7 @@ const DropdownList = (props: OptionsProps) => {
     const isClearDisabled = selected.every((option) => option.disabled);
 
     return (
-      <div className={getDropdownSectionClass(selectedGroup)}>
+      <div className={getDropdownSectionClass(selectedGroup)} style={getAnimateOrderStyle(++animateOrder)}>
         <Text size="small" appearance={'subtle'}>
           {group}
         </Text>
@@ -382,7 +404,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderApplyButton = () => {
     const disable = _isEqual(previousSelected, tempSelected);
     return (
-      <div className={'Dropdown-buttonWrapper'}>
+      <div className={`Dropdown-buttonWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
         <Button
           ref={dropdownCancelButtonRef}
           className="mr-4"
@@ -410,7 +432,7 @@ const DropdownList = (props: OptionsProps) => {
 
   const renderSearch = () => {
     return (
-      <div className={'Dropdown-inputWrapper'}>
+      <div className={`Dropdown-inputWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
         <Input
           name="Dropdown-search"
           icon={'search'}
@@ -447,7 +469,11 @@ const DropdownList = (props: OptionsProps) => {
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
 
     return (
-      <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
+      <div
+        style={getAnimateOrderStyle(++animateOrder)}
+        className={SelectAllClass}
+        onMouseEnter={() => updateActiveOption(0, true)}
+      >
         <Checkbox
           label={label}
           onChange={onSelectAll}
@@ -470,22 +496,23 @@ const DropdownList = (props: OptionsProps) => {
 
     const active = selectAllPresent ? index + 1 === cursor : index === cursor;
     const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
-
     return (
-      <Option
-        optionData={item}
-        truncateOption={truncateOption}
-        selected={optionIsSelected}
-        index={index}
-        updateActiveOption={updateActiveOption}
-        optionRenderer={optionRenderer}
-        active={active}
-        checkboxes={withCheckbox}
-        menu={menu}
-        onClick={() => optionClickHandler(item)}
-        onChange={(e) => props.onSelect(item, e.target.checked)}
-        optionType={props.optionType}
-      />
+      <div style={getAnimateOrderStyle(++animateOrder)} className={animateClass}>
+        <Option
+          optionData={item}
+          truncateOption={truncateOption}
+          selected={optionIsSelected}
+          index={index}
+          updateActiveOption={updateActiveOption}
+          optionRenderer={optionRenderer}
+          active={active}
+          checkboxes={withCheckbox}
+          menu={menu}
+          onClick={() => optionClickHandler(item)}
+          onChange={(e) => props.onSelect(item, e.target.checked)}
+          optionType={props.optionType}
+        />
+      </div>
     );
   };
 

package/core/components/atoms/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -49,6 +50,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -90,6 +92,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -131,6 +134,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -172,6 +176,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -220,6 +225,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -234,7 +240,7 @@ exports[`Dropdown component
             class="DropdownButton-wrapper"
           >
             <span
-              class="Text Text--subtle Text--regular mr-4"
+              class="Text Text--subtle Text--regular mr-4 white-space-nowrap"
               data-test="DesignSystem-Text"
             >
               Label
@@ -267,6 +273,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -308,6 +315,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -357,6 +365,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -372,7 +381,7 @@ exports[`Dropdown component
             class="DropdownButton-wrapper"
           >
             <span
-              class="Text Text--subtle Text--regular mr-4"
+              class="Text Text--subtle Text--regular mr-4 white-space-nowrap"
               data-test="DesignSystem-Text"
             >
               Label
@@ -405,6 +414,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -447,6 +457,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -488,6 +499,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -529,6 +541,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -570,6 +583,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -611,6 +625,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -652,6 +667,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger"
       >
@@ -684,6 +700,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -725,6 +742,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -766,6 +784,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -807,6 +826,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -848,6 +868,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -889,6 +910,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -930,6 +952,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -971,6 +994,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -1012,6 +1036,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -1053,6 +1078,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >
@@ -1094,6 +1120,7 @@ exports[`Dropdown component
     <div
       class="Dropdown"
     >
+      <style />
       <div
         class="OutsideClick PopperWrapper-trigger w-100"
       >