@innovaccer/design-system 2.8.1-0 → 2.9.1

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/dropdown/DropdownList.tsx

@@ -287,14 +287,13 @@ const DropdownList = (props: OptionsProps) => {
 
   const animateClass = classNames({
     ['fade-in']: dropdownOpen,
-    ['opacity-0']: true,
+    ['opacity-0']: dropdownOpen,
     ['Dropdown-items']: true,
-    ['fade-out']: !dropdownOpen,
   });
 
   const getAnimateOrderStyle = (order: number) => {
     const animateStyle: React.CSSProperties = {
-      animationDelay: (dropdownOpen ? order : order * -1) * 80 + 'ms',
+      animationDelay: dropdownOpen ? order * 20 + 'ms' : '',
     };
     return animateStyle;
   };

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,
+    },
+  },
+};

package/core/components/organisms/dateRangePicker/DateRangePicker.tsx

@@ -241,9 +241,10 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
           else onRangeChange(undefined, undefined, sValue, eValue);
         }
       }
+
       if (this.state.startDate && this.state.endDate) {
         this.setState({
-          open: !this.state.open,
+          open: false,
         });
       }
     }

package/core/components/organisms/grid/GridBody.tsx

@@ -86,8 +86,7 @@ export const GridBody = (props: GridBodyProps) => {
         className="Grid-body"
         minItemHeight={minRowHeight[size]}
         totalLength={dataLength}
-        length={20}
-        buffer={7}
+        length={dataLength}
         renderItem={renderRow}
       />
     </>

package/core/components/organisms/pageHeader/__stories__/variants/withTabs.story.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PageHeader from '../../PageHeader';
-import { Button, Text, Tab, TabsWrapper, Badge } from '@/index';
+import { Button, Text, Tab, TabsWrapper, Pills } from '@/index';
 import { action } from '@storybook/addon-actions';
 import { updateKnob } from '@/utils/storybookEventEmitter';
 import { number, text, boolean } from '@storybook/addon-knobs';
@@ -24,7 +24,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">2</Badge>
+                <Pills appearance="secondary">2</Pills>
               </div>
               <Text appearance={active !== 0 ? 'subtle' : undefined}>Tab 1</Text>
             </>
@@ -36,7 +36,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">12</Badge>
+                <Pills appearance="secondary">12</Pills>
               </div>
               <Text appearance={active !== 1 ? 'subtle' : undefined}>Tab 2</Text>
             </>
@@ -48,7 +48,7 @@ export const withTabs = () => {
           label={
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">5</Badge>
+                <Pills appearance="secondary">5</Pills>
               </div>
               <Text appearance={active !== 2 ? 'subtle' : undefined}>Tab 3</Text>
             </>
@@ -95,7 +95,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">2</Badge>
+                <Pills appearance="secondary">2</Pills>
               </div>
               <Text appearance={active !== 0 ? 'subtle' : undefined}>Tab 1</Text>
             </>
@@ -107,7 +107,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">12</Badge>
+                <Pills appearance="secondary">12</Pills>
               </div>
               <Text appearance={active !== 1 ? 'subtle' : undefined}>Tab 2</Text>
             </>
@@ -119,7 +119,7 @@ const customCode = `() => {
           label={(
             <>
               <div className="Tab-count">
-                <Badge appearance="secondary">5</Badge>
+                <Pills appearance="secondary">5</Pills>
               </div>
               <Text appearance={active !== 2 ? 'subtle' : undefined}>Tab 3</Text>
             </>

package/core/components/organisms/table/Table.tsx

@@ -184,7 +184,6 @@ interface SharedTableProps extends BaseProps {
    *    data: RowData;
    *    schema: GridProps['schema'];
    *    loading: boolean;
-   *    expanded: boolean;
    * }
    * </pre>
    */

package/core/components/organisms/verticalNav/MenuItem.tsx

@@ -13,10 +13,12 @@ export interface MenuItemProps extends BaseProps {
   isChildren?: boolean;
   isChildrenVisible?: boolean;
   onClick?: (menu: Menu) => void;
+  customItemRenderer?: (props: MenuItemProps) => JSX.Element;
 }
 
 export const MenuItem = (props: MenuItemProps) => {
-  const { menu, isActive, expanded, rounded, hasSubmenu, isChildren, isChildrenVisible, onClick } = props;
+  const { menu, isActive, expanded, rounded, hasSubmenu, isChildren, isChildrenVisible, onClick, customItemRenderer } =
+    props;
 
   const baseProps = extractBaseProps(props);
 
@@ -70,7 +72,9 @@ export const MenuItem = (props: MenuItemProps) => {
 
   if (!expanded && !menu.icon) return null;
 
-  return (
+  return customItemRenderer ? (
+    customItemRenderer(props)
+  ) : (
     // TODO(a11y)
     // eslint-disable-next-line
     <div className={ItemClass} {...baseProps} onClick={onClickHandler}>

package/core/components/organisms/verticalNav/VerticalNav.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Text } from '@/index';
-import { MenuItem } from './MenuItem';
+import { MenuItem, MenuItemProps } from './MenuItem';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { getMenu, isMenuActive, ActiveMenu, Menu } from '@/utils/navigationHelper';
 
@@ -54,6 +54,10 @@ export interface VerticalNavProps extends BaseProps {
    * Only one SubMenu visible at a time**(applicable only for type: `vertical`)**
    */
   autoCollapse: boolean;
+  /**
+   * Option to pass Custom Item Renderer
+   */
+  customItemRenderer?: (props: MenuItemProps) => JSX.Element;
 }
 
 /**
@@ -61,7 +65,7 @@ export interface VerticalNavProps extends BaseProps {
  */
 
 export const VerticalNav = (props: VerticalNavProps) => {
-  const { menus, active, onClick, expanded, rounded, autoCollapse, className } = props;
+  const { menus, active, onClick, expanded, rounded, autoCollapse, className, customItemRenderer } = props;
 
   const [menuState, setMenuState] = React.useState<Record<string, boolean>>({});
   const baseProps = extractBaseProps(props);
@@ -137,6 +141,7 @@ export const VerticalNav = (props: VerticalNavProps) => {
             rounded={rounded}
             isChildrenVisible={isChildrenVisible}
             onClick={onClickHandler}
+            customItemRenderer={customItemRenderer}
           />
           {menuState[menu.name] &&
             menu.subMenu &&
@@ -151,6 +156,7 @@ export const VerticalNav = (props: VerticalNavProps) => {
                   rounded={rounded}
                   onClick={onClickHandler}
                   isActive={isMenuActive(menus, subMenu, active)}
+                  customItemRenderer={customItemRenderer}
                 />
               );
             })}

package/core/components/organisms/verticalNav/__stories__/CustomItemsRenderer.story.tsx

@@ -0,0 +1,238 @@
+import * as React from 'react';
+import { VerticalNav, Icon, Tooltip, Text } from '@/index';
+import { MenuItemProps } from '../MenuItem';
+
+export const CustomItemsRenderer = () => {
+  const data = [
+    {
+      name: 'clinical_data',
+      label: 'Clinical Data',
+      icon: 'assignment_ind',
+    },
+    {
+      name: 'care_management',
+      label: 'Care Management',
+      icon: 'forum',
+      subMenu: [
+        {
+          name: 'care_management.timeline',
+          label: 'Timeline',
+          icon: 'people',
+        },
+        {
+          name: 'care_management.care_protocol',
+          label: 'Care Protocol',
+          icon: 'fact_check',
+        },
+        {
+          name: 'care_management.assessments',
+          label: 'Assessments',
+          icon: 'assessment',
+        },
+        {
+          name: 'care_management.tasks',
+          label: 'Tasks',
+          icon: 'alarm',
+        },
+      ],
+    },
+    {
+      name: 'episodes',
+      label: 'Episodes',
+      icon: 'airline_seat_flat_angled',
+    },
+    {
+      name: 'risk',
+      label: 'Risk',
+      icon: 'favorite',
+    },
+    {
+      name: 'preventive_health',
+      label: 'Preventive Health',
+      icon: 'beenhere',
+    },
+    {
+      name: 'profile',
+      label: 'Profile',
+      icon: 'receipt',
+    },
+    {
+      name: 'claims',
+      label: 'Claims',
+      icon: 'account_circle',
+    },
+    {
+      name: 'manual_entry',
+      label: 'Manual Entry',
+      icon: 'edit',
+    },
+    {
+      name: 'patient_notes',
+      label: 'Patient Notes',
+      icon: 'note_add',
+    },
+    {
+      name: 'documents',
+      label: 'Documents',
+      icon: 'assignment',
+    },
+  ];
+
+  const [active, setActive] = React.useState({
+    name: 'care_management.timeline',
+  });
+
+  const customItemRenderer = (props: MenuItemProps) => {
+    const { menu, expanded, isChildren } = props;
+    return (
+      <div className={`p-5 d-flex align-items-center cursor-pointer ${isChildren ? 'ml-7' : ''}`}>
+        {menu.icon && (
+          <Icon data-test="DesignSystem-VerticalNav--Icon" className={expanded ? 'mr-4' : ''} name={menu.icon} />
+        )}
+        <Tooltip tooltip={menu.label}>
+          <Text weight="medium">{menu.label}</Text>
+        </Tooltip>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ height: '90vh', background: 'var(--secondary-lightest)' }}>
+      <VerticalNav
+        menus={data}
+        expanded={true}
+        active={active}
+        onClick={setActive}
+        customItemRenderer={customItemRenderer}
+      />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const data = [
+    {
+      name: 'clinical_data',
+      label: 'Clinical Data',
+      icon: 'assignment_ind'
+    },
+    {
+      name: 'care_management',
+      label: 'Care Management',
+      icon: 'forum',
+      subMenu: [
+        {
+          name: 'care_management.timeline',
+          label: 'Timeline',
+          icon: 'people'
+        },
+        {
+          name: 'care_management.care_protocol',
+          label: 'Care Protocol',
+          icon: 'fact_check'
+        },
+        {
+          name: 'care_management.assessments',
+          label: 'Assessments',
+          icon: 'assessment'
+        },
+        {
+          name: 'care_management.tasks',
+          label: 'Tasks',
+          icon: 'alarm'
+        },
+      ]
+    },
+    {
+      name: 'episodes',
+      label: 'Episodes',
+      icon: 'airline_seat_flat_angled'
+    },
+    {
+      name: 'risk',
+      label: 'Risk',
+      icon: 'favorite'
+    },
+    {
+      name: 'preventive_health',
+      label: 'Preventive Health',
+      icon: 'beenhere'
+    },
+    {
+      name: 'profile',
+      label: 'Profile',
+      icon: 'receipt'
+    },
+    {
+      name: 'claims',
+      label: 'Claims',
+      icon: 'account_circle'
+    },
+    {
+      name: 'manual_entry',
+      label: 'Manual Entry',
+      icon: 'edit'
+    },
+    {
+      name: 'patient_notes',
+      label: 'Patient Notes',
+      icon: 'note_add'
+    },
+    {
+      name: 'documents',
+      label: 'Documents',
+      icon: 'assignment'
+    },
+  ];
+
+  const [active, setActive] = React.useState({
+    name: 'care_management.timeline'
+  });
+
+  const customItemRenderer = (props) => {
+    const {menu, onClick, expanded, isChildren} = props;
+    return ( 
+      <div 
+        onClick={() => onClick(menu)}
+        className={\`p-5 d-flex align-items-center cursor-pointer \${isChildren ? 'ml-7' : ''}\`}
+      >
+        {menu.icon && 
+            <Icon
+              data-test="DesignSystem-VerticalNav--Icon"
+              className={expanded ? 'mr-4' : ''}
+              name={menu.icon}
+            />
+        }
+        <Tooltip tooltip={menu.label}>
+          <Text weight="medium">
+            {menu.label}
+          </Text>
+        </Tooltip>
+      </div>
+    );
+  };
+  
+  return (
+    <div style={{ height: '90vh', background: 'var(--secondary-lightest)' }}>
+      <VerticalNav
+        menus={data}
+        expanded={true}
+        active={active}
+        onClick={setActive}
+        customItemRenderer={customItemRenderer}
+      />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/VerticalNav/Custom Items Renderer',
+  component: VerticalNav,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};