@innovaccer/design-system 2.13.3 → 2.13.4-0

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

@@ -225,9 +225,6 @@ 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;
@@ -285,27 +282,11 @@ 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,
-      },
-      animateClass
-    );
+    return classNames({
+      ['Dropdown-section']: true,
+      ['Dropdown-section--withClear']: showClearButton,
+    });
   };
 
   const dropdownClass = classNames(
@@ -320,14 +301,11 @@ const DropdownList = (props: OptionsProps) => {
     ['Dropdown-wrapper--wrap']: !truncateOption,
   });
 
-  const SelectAllClass = classNames(
-    {
-      ['Option-checkbox']: true,
-      ['Option-checkbox--active']: cursor === 0,
-      ['OptionWrapper']: true,
-    },
-    animateClass
-  );
+  const SelectAllClass = classNames({
+    ['Option-checkbox']: true,
+    ['Option-checkbox--active']: cursor === 0,
+    ['OptionWrapper']: true,
+  });
 
   const onToggleDropdown = (open: boolean, type?: string) => {
     toggleDropdown(open, type);
@@ -369,7 +347,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderFooter = () => {
     const { footerLabel = 'Search for more options' } = props;
     return (
-      <div className={`Dropdown-footer ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-footer">
         <Text size="small" appearance={'subtle'}>
           {footerLabel}
         </Text>
@@ -382,7 +360,7 @@ const DropdownList = (props: OptionsProps) => {
     const isClearDisabled = selected.every((option) => option.disabled);
 
     return (
-      <div className={getDropdownSectionClass(selectedGroup)} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className={getDropdownSectionClass(selectedGroup)}>
         <Text size="small" appearance={'subtle'}>
           {group}
         </Text>
@@ -404,7 +382,7 @@ const DropdownList = (props: OptionsProps) => {
   const renderApplyButton = () => {
     const disable = _isEqual(previousSelected, tempSelected);
     return (
-      <div className={`Dropdown-buttonWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-buttonWrapper">
         <Button
           ref={dropdownCancelButtonRef}
           className="mr-4"
@@ -432,7 +410,7 @@ const DropdownList = (props: OptionsProps) => {
 
   const renderSearch = () => {
     return (
-      <div className={`Dropdown-inputWrapper ${animateClass}`} style={getAnimateOrderStyle(++animateOrder)}>
+      <div className="Dropdown-inputWrapper">
         <Input
           name="Dropdown-search"
           icon={'search'}
@@ -469,11 +447,7 @@ const DropdownList = (props: OptionsProps) => {
     const label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
 
     return (
-      <div
-        style={getAnimateOrderStyle(++animateOrder)}
-        className={SelectAllClass}
-        onMouseEnter={() => updateActiveOption(0, true)}
-      >
+      <div className={SelectAllClass} onMouseEnter={() => updateActiveOption(0, true)}>
         <Checkbox
           label={label}
           onChange={onSelectAll}
@@ -497,22 +471,20 @@ const DropdownList = (props: OptionsProps) => {
     const active = selectAllPresent ? index + 1 === cursor : index === cursor;
     const optionIsSelected = tempSelected.findIndex((option) => option.value === item.value) !== -1;
     return (
-      <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>
+      <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}
+      />
     );
   };
 

package/core/components/atoms/icon/__stories__/variants/Image.story.jsx

@@ -6,9 +6,9 @@ export const image = () => {
     <Icon size={50}>
       <img
         alt="Innovaccer logo"
-        src="https://innovaccer.com/static/image/site-logo/innovaccer-logo-black.svg"
-        width="150"
-        height="150"
+        src="https://design.innovaccer.com/images/withoutType.png"
+        width="50"
+        height="50"
       />
     </Icon>
   );

package/core/components/css-utilities/Miscellaneous/Miscellaneous.story.tsx

@@ -24,6 +24,10 @@ export const miscellaneous = () => {
       className: 'cursor-pointer',
       properties: 'cursor: pointer;',
     },
+    {
+      className: 'text-decoration--none',
+      properties: 'text-decoration: none;',
+    },
   ];
   return (
     <div className="mt-8 mb-8">

package/core/components/molecules/dropzone/FileSelectorUtils.tsx

@@ -12,6 +12,9 @@ export const COMMON_MIME_TYPES = new Map([
   ['zip', 'application/zip'],
   ['doc', 'application/msword'],
   ['docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+  ['csv', 'text/csv'],
+  ['xlss', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+  ['xls', 'application/vnd.ms-excel'],
 ]);
 
 const FILES_TO_IGNORE = ['.DS_Store', 'Thumbs.db'];

package/core/components/molecules/sidesheet/__stories__/variants/twoSteps.story.jsx

@@ -3,7 +3,7 @@ import { action } from '@/utils/action';
 import { Heading, Text, Sidesheet, ModalDescription, Button } from '@/index';
 
 export const twoSteps = () => {
-  const [page, setPage] = React.useState(2);
+  const [page, setPage] = React.useState(1);
   const [animate, setAnimate] = React.useState(true);
   const [open, setOpen] = React.useState(false);
   const seperator = false;
@@ -77,7 +77,9 @@ export const twoSteps = () => {
 
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options}>
         <div className={animate ? 'fade-in' : ''} onAnimationEnd={() => setAnimate(false)}>
           <Heading size="s">{`Page ${page}`}</Heading>
@@ -92,11 +94,11 @@ export const twoSteps = () => {
 
 const customCode = `() => {
   const [open, setOpen] = React.useState(false);
-  const [page, setPage] = React.useState(2);
+  const [page, setPage] = React.useState(1);
   const [animate, setAnimate] = React.useState(true);
 
   const onClose = () => {
-    setOpen(!open);
+    setOpen(false);
   };
 
   React.useEffect(() => {

package/core/components/organisms/dateRangePicker/__stories__/variants/withSingleInput.story.jsx

@@ -28,6 +28,8 @@ export const withSingleInput = () => {
 
   const monthNav = -1;
 
+  const open = false;
+
   const attr = {};
   if (disabledBefore) attr.disabledBefore = disabledBefore;
   if (disabledAfter) attr.disabledAfter = disabledAfter;
@@ -55,6 +57,7 @@ export const withSingleInput = () => {
           label: 'Date',
         }}
         {...attr}
+        open={open}
       />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/withStepperL1.story.jsx

@@ -71,7 +71,7 @@ export const level1WithStepper = () => {
     />
   );
   const badge = <Badge appearance="secondary">Message</Badge>;
-  const meta = <MetaList list={[{ label: 'Draft' }]} seperator={true} />;
+  const meta = <MetaList list={[{ label: 'Draft' }]} seperator={false} />;
 
   return (
     <div className="w-100 p-6 bg-secondary-lightest">
@@ -163,7 +163,7 @@ const customCode = `() => {
   const meta = (
     <MetaList
       list={[{ label: 'Draft' }]}
-      seperator={true}
+      seperator={false}
     />
   );
 

package/core/index.tsx

@@ -65,6 +65,7 @@ export { Placeholder } from './components/molecules/placeholder';
 export { EditableInput } from './components/molecules/editableInput';
 export { EditableChipInput } from './components/molecules/editableChipInput';
 export { PlaceholderParagraph } from './components/atoms/placeholderParagraph';
+export { PlaceholderImage } from './components/atoms/placeholderImage';
 export { ProgressRing } from './components/atoms/progressRing';
 export { Stepper } from './components/molecules/stepper';
 export { DateRangePicker } from './components/organisms/dateRangePicker';

package/css/dist/index.css

@@ -2085,7 +2085,7 @@ body {
 }
 
 .Dropdown-inputWrapper {
-  border-bottom: var(--border);
+  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
 }
 
 .Dropdown-input {
@@ -2095,6 +2095,7 @@ body {
 .Dropdown-input,
 .Dropdown-input:focus-within {
   border: unset !important;
+  box-shadow: none !important;
 }
 
 .Dropdown-section {
@@ -2135,13 +2136,6 @@ body {
   box-sizing: border-box;
 }
 
-.Dropdown-items {
-  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
 .Option {
   display: flex;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
@@ -3858,6 +3852,7 @@ body {
 .MetricInput:focus-within {
   background: var(--white);
   border-color: var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .MetricInput:focus-within .MetricInput-icon {