@innovaccer/design-system 2.8.0-0 → 2.9.0

package/.github/workflows/docs_pull_request.yml

@@ -0,0 +1,20 @@
+name: Pull request
+
+on: pull_request
+
+jobs:
+  lint_test_build:
+    name: lint, test and build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: yarn install
+        run: cd docs && yarn install
+
+      - name: build
+        run: cd docs && yarn build

package/CHANGELOG.md

@@ -1,4 +1,44 @@
 
+## 2.9.0-0  (2022-02-01)
+### Highlights
+* feat: adds docs site (44ab33d3)
+* feat(verticalNav): add custom item renderer option (810a099f)
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+* feat: adds docs site (44ab33d3)
+* feat(verticalNav): add custom item renderer option (810a099f)
+
+
+### Fixes
+* fix(verticalnav): fix verticalnav active hover state shadow (1b341516)
+* fix(button): fix button hover background color (1e696743)
+* fix(button): fix button hover and focus style (795ae48b)
+* fix(dropdown): fix dropdown items closing animation (dc8c6102)
+* fix(tabs): fix tabs conflict in selected focused state style (fa4ff904)
+* fix(toast): add message to  discription story (1cac895d)
+* fix(button): props table not showing (70ac3e39)
+* fix(leftNav): fix left navbar highlighting on tab changes (d836a42e)
+* fix(table): add border in table for mdx and fix overflow behaviour (233293ed)
+* fix(table): make scrollbar width consistent (af5da8f6)
+* fix(table): fix table data issue when rows are more than 27 (b33aafc1)
+
+### Improvements
+NA
+
+### Documentation
+* Adds documentations for components.
+
+-------------------
+
 ## 2.8.0-0  (2022-01-12)
 ### Highlights
 

package/README.md

@@ -126,6 +126,12 @@ For css variables to work on IE we use a polyfill at runtime to achieve dynamic
 </script>
 ```
 
+## :card_file_box: Repos
+Here are the supporting repositories.
+- **[MDS Rich Text Editor](https://github.com/innovaccer/mds-rich-text-editor)** - Feature-rich WYSIWYG (What You See Is What You Get) HTML editor and WYSIWYG Markdown editor. It is used to create blogs, notes sections, comment sections etc. It has a variety of tools to edit and format rich content.
+- **[MDS Docs](https://github.com/innovaccer/mds-docs)** - Documentation site for Masala design system.
+- **[MDS Helpers](https://github.com/innovaccer/mds-helpers)** - Alert Service.
+
 ## :books: Documentation
 
 - [🌶 Masala Design System](http://design.innovaccer.com)

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/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/popperWrapper/PopperWrapper.tsx

@@ -111,7 +111,6 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
   _timer?: number;
   _throttleWait?: boolean;
   offsetMapping: Record<Offset, string>;
-  positionOffset: Record<PositionType, string>;
 
   static defaultProps = {
     on: 'click',
@@ -134,24 +133,6 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       large: '8px',
     };
 
-    this.positionOffset = {
-      'auto-start': 'top left',
-      auto: 'top',
-      'auto-end': 'top right',
-      'top-start': 'bottom left',
-      top: 'bottom',
-      'top-end': 'bottom right',
-      'right-start': 'top right',
-      right: 'top right',
-      'right-end': 'top right',
-      'bottom-end': 'top right',
-      bottom: 'top',
-      'bottom-start': 'top left',
-      'left-end': 'top left',
-      left: 'top left',
-      'left-start': 'top left',
-    };
-
     this.triggerRef = React.createRef();
     this.popupRef = React.createRef();
 
@@ -184,12 +165,6 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
           zIndex: zIndex === undefined ? zIndex : zIndex + 1,
           isOpen: true,
         });
-      } else {
-        setTimeout(() => {
-          this.setState({
-            isOpen: false,
-          });
-        }, 120);
       }
     }
   }
@@ -344,31 +319,35 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     let classes = '';
 
     if (!animationClass) {
+      const maxHeight = this.popupRef.current?.offsetHeight;
+      // we need to check for transformStyles so that we open the popover at correct position (left/right)
       const transformStyles = this.popupRef.current?.style.getPropertyValue('transform');
-      if (transformStyles && !animationKeyframe) {
+      if (transformStyles && maxHeight && placement && !animationKeyframe) {
         const uniqueKey = Math.random().toString(36).substring(2, 6);
+        const isTop = placement.includes('top');
 
         const popperAnimation = `
         @keyframes popper-open-${uniqueKey} {
           from { 
-            transform: ${transformStyles} scaleY(0.5);
-            opacity: 0.5;
+            max-height: 0;
+            ${isTop ? `margin-top: ${maxHeight}px` : ''};
           }
           to {
-            transform: ${transformStyles} scaleY(1);
-            opacity: 1
+            max-height: ${maxHeight}px;
+            ${isTop ? `margin-top: 0px` : ''};
           }
         }
         @keyframes popper-close-${uniqueKey} {
           from {
-            transform: ${transformStyles} scaleY(1);
-            opacity: 1
+            max-height: ${maxHeight}px;
+            ${isTop ? `margin-top: 0px` : ''};
           }
           to {
-            transform: ${transformStyles} scaleY(0);
-            opacity: 0.5
+            max-height: 0;
+            ${isTop ? `margin-top: ${maxHeight}px` : ''};
           }
-        }`;
+        }
+        `;
 
         this.setState({
           animationKeyframe: popperAnimation,
@@ -376,16 +355,17 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
         });
       }
 
+      // defining popper-fade-in custom keyframe as it is specific to popover usecase.
       const popperAnimationStyles = {
-        transformOrigin: this.positionOffset[this.props.placement],
         animation: open
-          ? `popper-open-${uniqueKey} 120ms cubic-bezier(0, 0, 0.38, 0.9)`
-          : `popper-close-${uniqueKey} 120ms cubic-bezier(0.2, 0, 1, 0.9)`,
+          ? `popper-open-${uniqueKey} 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms`
+          : `popper-close-${uniqueKey} 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms`,
       };
 
       childrenStyles = {
         ...childrenStyles,
         ...popperAnimationStyles,
+        overflow: 'hidden',
       };
     } else {
       classes = classNames(
@@ -404,6 +384,13 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
       'data-hide': outOfBoundaries,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
+      onAnimationEnd: () => {
+        if (!open) {
+          this.setState({
+            isOpen: false,
+          });
+        }
+      },
     };
 
     const element = React.cloneElement(

package/core/components/atoms/toast/__stories__/WithDescription.story.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { Toast } from '@/index';
 
 // CSF format story
-export const toastWithDescription = () => <Toast appearance="success" title="Message sent successfully" />;
+export const toastWithDescription = () => (
+  <Toast appearance="success" title="Message sent successfully" message="Description goes here" />
+);
 
 export default {
   title: 'Components/Toast/Toast With Description',

package/core/components/css-utilities/designTokens/Data.tsx

@@ -161,3 +161,21 @@ export const gridBreakpointData = [
   { token: '--grid-l-breakpoint', value: '992px' },
   { token: '--grid-xl-breakpoint', value: '1200px' },
 ];
+
+export const transitionsCurveData = [
+  { token: '--standard-productive-curve', value: 'cubic-bezier(0.2, 0, 0.38, 0.9)' },
+  { token: '--standard-expressive-curve', value: 'cubic-bezier(0.4, 0.14, 0.3, 1)' },
+  { token: '--entrance-productive-curve', value: 'cubic-bezier(0, 0, 0.38, 0.9)' },
+  { token: '--entrance-expressive-curve', value: 'cubic-bezier(0, 0, 0.3, 1)' },
+  { token: '--exit-productive-curve', value: 'cubic-bezier(0.2, 0, 1, 0.9)' },
+  { token: '--exit-expressive-curve', value: 'cubic-bezier(0.4, 0.14, 1, 1)' },
+];
+
+export const transitionsDurationData = [
+  { token: '--duration--fast-01', value: '80ms' },
+  { token: '--duration--fast-02', value: '120ms' },
+  { token: '--duration--moderate-01', value: '160ms' },
+  { token: '--duration--moderate-02', value: '240ms' },
+  { token: '--duration--slow-01', value: '400ms' },
+  { token: '--duration--slow-02', value: '720ms' },
+];

package/core/components/css-utilities/designTokens/Transitions.story.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Card, Heading, Table } from '@/index';
+import { spaceSchema } from './Schema';
+import { transitionsCurveData, transitionsDurationData } from './Data';
+
+export const transitions = () => {
+  return (
+    <div>
+      <Heading size="xxl">Design Tokens</Heading>
+      <br />
+      <br />
+      <Heading size="m">Transitions</Heading>
+      <br />
+      <Heading size="m">Transition curve</Heading>
+      <Card className="h-100 overflow-hidden">
+        <Table data={transitionsCurveData} schema={spaceSchema} />
+      </Card>
+      <br />
+      <Heading size="m">Transition Duration</Heading>
+      <Card className="h-100 overflow-hidden">
+        <Table data={transitionsDurationData} schema={spaceSchema} />
+      </Card>
+      <br />
+    </div>
+  );
+};
+
+export default {
+  title: 'Others/Design Tokens/Transitions',
+  parameters: {
+    viewMode: 'story',
+    docs: {
+      page: null,
+      docPage: null,
+    },
+  },
+};