Merge pull request #1997 from innovaccer/develop

Develop

core/components/atoms/icon/Icon.tsx

@@ -78,6 +78,46 @@ export interface IconProps extends BaseProps {
   tabIndex?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>['tabIndex'];
 }
 
+const iconTypeMapper: Record<string, string> = {
+  timelapse: 'outlined',
+  content_copy: 'outlined',
+  speed: 'outlined',
+  add_circle_outline: 'outlined',
+  turned_in_not: 'outlined',
+  important_devices: 'outlined',
+  thumb_down_off_alt: 'outlined',
+  alarm_on: 'outlined',
+  calendar_view_month: 'outlined',
+  aspect_ratio: 'outlined',
+  change_history: 'outlined',
+  arrow_circle_down: 'outlined',
+  card_membership: 'outlined',
+  query_builder: 'outlined',
+  copyright: 'outlined',
+  arrow_circle_up: 'outlined',
+  alarm: 'outlined',
+  work_outline: 'outlined',
+  bookmark_border: 'outlined',
+  delete_outline: 'outlined',
+  credit_card: 'outlined',
+  highlight_of: 'outlined',
+  check_circle_outline: 'outlined',
+  help_outline: 'outlined',
+  schedule: 'outlined',
+  radio_button_unchecked: 'outlined',
+  radio_button_checked: 'outlined',
+  delete: 'outlined',
+};
+
+/**
+ *
+ * <pre class="DocPage-codeBlock mx-6 mb-7">
+ *  Following Icons are mapped to **outlined** type by default:
+ *  <br />
+ *  timelapse,  content_copy,  speed,  add_circle_outline,  turned_in_not,  important_devices,  thumb_down_off_alt,  alarm_on,  calendar_view_month,  aspect_ratio,  change_history,  arrow_circle_down,  card_membership,  query_builder,  copyright,  arrow_circle_up,  alarm,  work_outline,  bookmark_border,  delete_outline,  credit_card,  highlight_of,  check_circle_outline, help_outline,  schedule,  radio_button_unchecked,  radio_button_checked,  delete
+ * </pre>
+ */
+
 export const Icon = (props: IconProps) => {
   const { appearance, className, name, size, children } = props;
   const accessibilityProps = useAccessibilityProps(props);
@@ -92,7 +132,7 @@ export const Icon = (props: IconProps) => {
     'two-tone': 'rounded',
   };
 
-  const type = (props.type && mapper[props.type]) || props.type;
+  const type = (props.type && mapper[props.type]) || props.type || (name && iconTypeMapper[name]) || 'rounded';
 
   const getIconAppearance = (iconColor: string) => {
     const x = iconColor.indexOf('_');
@@ -133,7 +173,6 @@ export const Icon = (props: IconProps) => {
 Icon.displayName = 'Icon';
 Icon.defaultProps = {
   size: 16,
-  type: 'rounded',
 };
 
 export default Icon;

core/components/molecules/stepper/__tests__/__snapshots__/Stepper.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`Stepper component
       tabindex="0"
     >
       <i
-        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
         data-test="DesignSystem-Step--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -54,7 +54,7 @@ exports[`Stepper component
       tabindex="-1"
     >
       <i
-        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
         data-test="DesignSystem-Step--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -74,7 +74,7 @@ exports[`Stepper component
       tabindex="-1"
     >
       <i
-        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
         data-test="DesignSystem-Step--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"

core/components/organisms/horizontalNav/__stories__/leftAlign.story.jsx

@@ -44,9 +44,7 @@ export const leftAligned = () => {
     setActive(menu);
   };
 
-  const subHeading = (
-    <HorizontalNav align="left" menus={data} active={active} onClick={onClickHandler} className="ml-5 mt-4" />
-  );
+  const subHeading = <HorizontalNav menus={data} active={active} onClick={onClickHandler} className="ml-5 mt-4" />;
 
   const header = (
     <div>
@@ -142,7 +140,6 @@ const customCode = `() => {
 
   const subHeading = (
     <HorizontalNav
-      align="left"
       menus={data}
       active={active}
       onClick={onClickHandler}

core/components/organisms/pageHeader/PageHeader.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Heading, Row, Column } from '@/index';
+import { Row, Column, Divider } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { BackButton, Title, CenterNav, Nav, Action, Status } from './utils';
 
 export type navigationPositionType = 'center' | 'bottom';
 
@@ -42,6 +43,12 @@ export interface PageHeaderProps extends BaseProps {
    * Meta data composed of `Text`
    */
   meta?: React.ReactNode;
+  /**
+   * `Button` component
+   *  <br/>
+   *  To be used on left side of title as a back button
+   */
+  button?: React.ReactNode;
   /**
    * Page header layout type
    */
@@ -66,13 +73,13 @@ export const PageHeader = (props: PageHeaderProps) => {
     meta,
     navigationPosition,
     className,
+    button,
   } = props;
   const baseProps = extractBaseProps(props);
 
   const wrapperClasses = classNames(
     {
       'PageHeader-wrapper': true,
-      ['PageHeader-wrapper--separator']: separator,
       ['PageHeader-wrapper--withTabs']: tabs,
     },
     className
@@ -82,52 +89,52 @@ export const PageHeader = (props: PageHeaderProps) => {
     PageHeader: true,
   });
 
-  const renderNav = () => {
-    if (!navigation && !stepper) {
-      return null;
-    }
-    return <div className="PageHeader-navigationWrapper">{navigation || stepper}</div>;
+  const colSize = (navigation || stepper) && navigationPosition === 'center' ? '4' : actions ? '8' : '12';
+
+  const centerNavProps = {
+    colSize,
+    breadcrumbs,
+    navigationPosition,
+    navigation,
+    stepper,
   };
 
-  const colSize = (navigation || stepper) && navigationPosition === 'center' ? '4' : actions ? '8' : '12';
+  const statusProps = {
+    status,
+    meta,
+    navigationPosition,
+    navigation,
+    tabs,
+  };
 
   return (
-    <div {...baseProps} className={wrapperClasses}>
-      {breadcrumbs}
-      <div className={classes}>
-        <Row>
-          <Column size={colSize} sizeXL={colSize} sizeM={colSize}>
-            <div className="PageHeader-titleWrapper">
-              <Heading className="PageHeader-title">{title}</Heading>
-              {badge}
-            </div>
-          </Column>
-          {(!breadcrumbs || navigationPosition === 'center') && colSize === '4' && (
-            <Column size="4" sizeXL="4" sizeM="4">
-              {renderNav()}
-            </Column>
-          )}
-          {actions ? (
-            <Column size="4" sizeXL="4" sizeM="4">
-              <div className="PageHeader-actionsWrapper">{actions}</div>
-            </Column>
-          ) : (
-            (navigation || stepper) && (
-              <Column size="4" sizeXL="4" sizeM="4">
-                <div className="PageHeader-actionsWrapper"></div>
+    <div data-test="DesignSystem-PageHeader">
+      <div {...baseProps} className={wrapperClasses}>
+        {breadcrumbs && (
+          <div className="pl-6" data-test="DesignSystem-PageHeader--Breadcrumbs">
+            {breadcrumbs}
+          </div>
+        )}
+        <div className="d-flex pl-6">
+          <BackButton button={button} />
+          <div className={classes}>
+            <Row>
+              <Column size={colSize} sizeXL={colSize} sizeM={colSize}>
+                <Title badge={badge} title={title} />
               </Column>
-            )
-          )}
-        </Row>
-      </div>
-      {(status || meta) && (
-        <div className="PageHeader-statusWrapper">
-          {status}
-          {meta}
+              <CenterNav {...centerNavProps} />
+              <Action actions={actions} navigation={navigation} stepper={stepper} />
+            </Row>
+            <Status {...statusProps} />
+          </div>
+        </div>
+
+        <div className="pl-3">
+          {navigationPosition === 'bottom' && <Nav navigation={navigation} stepper={stepper} />}
+          {tabs && <div data-test="DesignSystem-PageHeader--Tabs">{tabs}</div>}
         </div>
-      )}
-      {breadcrumbs && navigationPosition === 'bottom' && renderNav()}
-      {tabs && <div>{tabs}</div>}
+      </div>
+      {separator && <Divider appearance="header" />}
     </div>
   );
 };

core/components/organisms/pageHeader/__stories__/Responsiveness.story.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Breadcrumbs, Text, StatusHint, Navigation, AvatarGroup, PageHeader, Dropdown } from '@/index';
+import { Breadcrumbs, Text, StatusHint, HorizontalNav, AvatarGroup, PageHeader, Dropdown } from '@/index';
 import { action } from '@/utils/action';
 
 export const Responsiveness = () => {
@@ -52,7 +52,7 @@ export const Responsiveness = () => {
     <div className="d-flex justify-content-end align-items-center">
       <Text className="mr-4">Updated 1 day ago</Text>
       <AvatarGroup className="mr-5" list={list} />
-      <div className="mr-4">
+      <div>
         <Dropdown menu={true} optionType="WITH_ICON" icon="more_horiz" options={options} align="left" />
       </div>
     </div>
@@ -72,14 +72,14 @@ export const Responsiveness = () => {
 
   const status = <StatusHint appearance="info">Ongoing</StatusHint>;
 
-  const navigation = <Navigation menus={navigationData} onClick={onClickHandler} active={active} />;
+  const navigation = <HorizontalNav menus={navigationData} onClick={onClickHandler} active={active} />;
 
   return (
-    <div className="w-100 py-6 bg-secondary-lightest">
+    <div className="w-100 bg-secondary-lightest">
       <PageHeader
         navigationPosition="bottom"
         title="Pac Follow-Up Protocol"
-        separator={true}
+        separator={false}
         navigation={navigation}
         actions={actions}
         breadcrumbs={breadcrumbs}
@@ -139,7 +139,7 @@ const customCode = `() => {
     <div className="d-flex justify-content-end align-items-center">
     <Text className="mr-4">Updated 1 day ago</Text>
     <AvatarGroup className="mr-5" list={list}/>
-    <div className="mr-4">
+    <div>
       <Dropdown
         menu={true}
         optionType="WITH_ICON"
@@ -166,19 +166,19 @@ const customCode = `() => {
   );
 
   const navigation = (
-    <Navigation
+    <HorizontalNav 
       menus={navigationData}
       onClick={onClickHandler}
       active={active}
     />
   );
 
   return (
-    <div className="py-6 bg-secondary-lightest">
+    <div className="bg-secondary-lightest">
       <PageHeader
         navigationPosition="bottom"
         title="Pac Follow-Up Protocol"
-        separator={true}
+        separator={false}
         navigation={navigation}
         actions={actions}
         breadcrumbs={breadcrumbs}

core/components/organisms/pageHeader/__stories__/withFilter.story.jsx → core/components/organisms/pageHeader/__stories__/level0/withFilter.story.jsx

@@ -33,7 +33,7 @@ export const level0WithFilter = () => {
   return (
     <Row>
       <Column size={11}>
-        <div className="py-6 bg-secondary-lightest">
+        <div className="bg-secondary-lightest">
           <PageHeader title="Users" separator={true} tabs={tab} actions={actions} />
         </div>
       </Column>
@@ -77,7 +77,7 @@ const customCode = `() => {
   return (
     <Row>
       <Column size={11}>
-        <div className="py-6 bg-secondary-lightest">
+        <div className="bg-secondary-lightest">
           <PageHeader
             title="Users"
             separator={true}
@@ -91,7 +91,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Layout/PageHeader/Level 0 With Filter',
+  title: 'Layout/PageHeader/Level 0/Level 0 With Filter',
   component: PageHeader,
   parameters: {
     docs: {

core/components/organisms/pageHeader/__stories__/withNavigation.story.jsx → core/components/organisms/pageHeader/__stories__/level0/withNavigation.story.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Navigation, Button, PageHeader, Row, Column } from '@/index';
+import { HorizontalNav, Button, PageHeader, Row, Column } from '@/index';
 
 export const level0WithNavigation = () => {
   const navigationData = [
@@ -21,7 +21,7 @@ export const level0WithNavigation = () => {
     setActive(menu);
   };
 
-  const navigation = <Navigation menus={navigationData} onClick={onClickHandler} active={active} />;
+  const navigation = <HorizontalNav menus={navigationData} onClick={onClickHandler} active={active} />;
   const actions = (
     <div className="d-flex justify-content-end align-items-center">
       <Button className="mr-4">Reorganize</Button>
@@ -32,8 +32,8 @@ export const level0WithNavigation = () => {
   return (
     <Row>
       <Column size={11}>
-        <div className="py-6 bg-secondary-lightest">
-          <PageHeader title="Dashboard" separator={true} navigation={navigation} actions={actions} />
+        <div className="bg-secondary-lightest">
+          <PageHeader title="Dashboard" separator={false} navigation={navigation} actions={actions} />
         </div>
       </Column>
     </Row>
@@ -60,7 +60,7 @@ const customCode = `() => {
     setActive(menu);
   };
 
-  const navigation = <Navigation menus={navigationData} onClick={onClickHandler} active={active}/>;
+  const navigation = <HorizontalNav menus={navigationData} onClick={onClickHandler} active={active}/>;
   const actions = (
     <div className="d-flex justify-content-end align-items-center">
       <Button className="mr-4">Reorganize</Button>
@@ -71,10 +71,10 @@ const customCode = `() => {
   return (
     <Row>
       <Column size={11}>
-        <div className="py-6 bg-secondary-lightest">
+        <div className="bg-secondary-lightest">
           <PageHeader
             title="Dashboard"
-            separator={true}
+            separator={false}
             navigation={navigation}
             actions={actions}
           />
@@ -85,7 +85,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Layout/PageHeader/Level 0 With Navigation',
+  title: 'Layout/PageHeader/Level 0/Level 0 With Navigation',
   component: PageHeader,
   parameters: {
     docs: {