@innovaccer/design-system 2.13.2 → 2.13.4-1

package/docs/src/components/Layout.js

@@ -1,18 +1,11 @@
-/* eslint-disable import/no-unresolved */
 import React, { useState } from 'react';
-import {
-  Row,
-  Column,
-  Button,
-  Toast,
-  Tooltip
-} from '@innovaccer/design-system';
+import { Row, Column, Button, Toast, Tooltip, Text } from '@innovaccer/design-system';
 import LeftNav from './LeftNav';
 import TableOfContent from './TableOfContent/TableOfContent';
 import Header from './Header';
 import Container from './Container';
 import ComponentsContainer from './Container/ComponentsContainer';
-import { MDXProvider } from "@mdx-js/react";
+import { MDXProvider } from '@mdx-js/react';
 import * as MDSComponents from '@innovaccer/design-system';
 import Meta from './Meta';
 import './css/style.css';
@@ -30,7 +23,7 @@ import { ArgsTable } from './PropsTable/Table';
 import Markdown from 'markdown-to-jsx';
 import { useFrontmatter } from '../util/Frontmatter';
 import MDXHeading from './MDXHeading.js';
-import { copyMessage, copyMessageSuccess } from "../util/constants.js";
+import { copyMessage, copyMessageSuccess } from '../util/constants.js';
 import axios from 'axios';
 
 const useGetStorybookData = async (name) => {
@@ -39,52 +32,40 @@ const useGetStorybookData = async (name) => {
 
   // To handle Rich Text Editor Stories
   if (name.startsWith('library')) {
-    componentPath = `/rte/${componentName}.json`
+    componentPath = `/rte/${componentName}.json`;
   }
 
-  const data = await axios.get(componentPath)
-    .then(({ data = {} }) => {
-      if (!Object.keys(data).length) {
-        return Promise.reject(`Could not get details for id: ${componentName}`);
-      }
-      return data;
-    })
+  const data = await axios.get(componentPath).then(({ data = {} }) => {
+    if (!Object.keys(data).length) {
+      return Promise.reject(`Could not get details for id: ${componentName}`);
+    }
+    return data;
+  });
 
   return data;
-}
+};
 
 function getJsxCode(name) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useGetStorybookData(name)
-    .then(componentData => {
-      const jsxCode = componentData && componentData.parameters
-        ? componentData.parameters.docs.docPage?.customCode ||
-        componentData.parameters.storySource?.source
+  return useGetStorybookData(name).then((componentData) => {
+    const jsxCode =
+      componentData && componentData.parameters
+        ? componentData.parameters.docs.docPage?.customCode || componentData.parameters.storySource?.source
         : '';
-      return jsxCode;
-
-    })
+    return jsxCode;
+  });
 }
 
 function getPropTableData(name) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useGetStorybookData(name)
-    .then(componentData => {
-
-      const jsxCode = componentData
-        ? componentData.parameters.argTypes
-        : '';
-      return jsxCode;
-
-    })
+  return useGetStorybookData(name).then((componentData) => {
+    const jsxCode = componentData ? componentData.parameters.argTypes : '';
+    return jsxCode;
+  });
 }
 
 const Preview = ({ name }) => {
   return (
     <div>
-      <PropsTable
-        dataProvider={() => getJsxCode(name)}
-      />
+      <PropsTable dataProvider={() => getJsxCode(name)} />
     </div>
   );
 };
@@ -97,7 +78,6 @@ const A11yBlock = ({ name }) => {
   React.useEffect(() => {
     useGetStorybookData(name)
       .then((componentData) => {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         const a11yProps = componentData && componentData.parameters.docs.docPage?.a11yProps;
 
         setData(a11yProps);
@@ -110,32 +90,30 @@ const A11yBlock = ({ name }) => {
   }, []);
 
   if (loading) {
-    return <div>
-      Loading ...
-    </div>
+    return <div>Loading ...</div>;
   }
 
   if (error) {
-    return <MDSComponents.Message className="my-7" appearance="alert" title={error} description="Hold tight, we are working to get it up for you to interact with." />
+    return (
+      <MDSComponents.Message
+        className="my-7"
+        appearance="alert"
+        title={error}
+        description="Hold tight, we are working to get it up for you to interact with."
+      />
+    );
   }
-  return (
-    <div className="mb-8">
-      {data && <Markdown className="A11y-markdown">{data}</Markdown>}
-    </div>
-  );
-}
+  return <div className="mb-8">{data && <Markdown className="A11y-markdown">{data}</Markdown>}</div>;
+};
 
 const FrameWrapper = ({ componentName }) => {
-
   const onLoad = () => {
     document.getElementById('iframe-loader').style.display = 'none';
   };
 
   return (
     <>
-      <div id="iframe-loader">
-        Loading ...
-      </div>
+      <div id="iframe-loader">Loading ...</div>
       <iframe
         id="myFrame"
         width="100%"
@@ -143,14 +121,13 @@ const FrameWrapper = ({ componentName }) => {
         scrolling="no"
         frameBorder="0"
         onLoad={onLoad}
-        src={`https://mds-dev.innovaccer.com/iframe.html?id=${componentName}&viewMode=docs&panel=true&nav=false&addons=1&stories=0&embed=prop-table`}
+        src={`https://mds.innovaccer.com/iframe.html?id=${componentName}&viewMode=docs&panel=true&nav=false&addons=1&stories=0&embed=prop-table`}
       />
     </>
   );
-}
+};
 
 const PreviewWithPropTable = ({ name, embed }) => {
-
   const [data, setData] = React.useState({});
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
@@ -170,47 +147,36 @@ const PreviewWithPropTable = ({ name, embed }) => {
   }, []);
 
   if (loading && !embed) {
-    return <div> Loading ... </div>
+    return <div> Loading ... </div>;
   }
 
   if (error) {
-    return <MDSComponents.Message className="my-7" appearance="alert" title={error} description="Hold tight, we are working to get it up for you to interact with." />
+    return (
+      <MDSComponents.Message
+        className="my-7"
+        appearance="alert"
+        title={error}
+        description="Hold tight, we are working to get it up for you to interact with."
+      />
+    );
   }
 
   return (
-    <div className="overflow-x-scroll">
-      {embed ?
-        <FrameWrapper componentName={name} />
-        :
-        <ArgsTable rows={data} />
-      }
-    </div>
+    <div className="overflow-x-scroll">{embed ? <FrameWrapper componentName={name} /> : <ArgsTable rows={data} />}</div>
   );
 };
 
 const List = ({ children, ...rest }) => {
-  return (
-    <div className='list'>
-      {children}
-    </div>
-  )
-}
+  return <div className="list">{children}</div>;
+};
 const leftMenuList = [
   {
-    title: 'Masala Design System'
-  }
+    title: 'Masala Design System',
+  },
 ];
 
 const ComponentsPage = (props) => {
-  const {
-    tabs,
-    children,
-    pageTitle,
-    frontmatter,
-    DSComponents,
-    relativePagePath,
-    pageDescription
-  } = props;
+  const { tabs, children, pageTitle, frontmatter, DSComponents, relativePagePath, pageDescription } = props;
 
   return (
     <ComponentsContainer
@@ -220,24 +186,13 @@ const ComponentsPage = (props) => {
       pageDescription={pageDescription}
       frontmatter={frontmatter}
     >
-      <MDXProvider components={DSComponents}>
-        {children}
-      </MDXProvider>
+      <MDXProvider components={DSComponents}>{children}</MDXProvider>
     </ComponentsContainer>
-  )
-}
+  );
+};
 
 const MDXPage = (props) => {
-  const {
-    tabs,
-    children,
-    pageTitle,
-    frontmatter,
-    DSComponents,
-    relativePagePath,
-    pageDescription,
-    logos
-  } = props;
+  const { tabs, children, pageTitle, frontmatter, DSComponents, relativePagePath, pageDescription, logos } = props;
 
   return (
     <Container
@@ -248,47 +203,31 @@ const MDXPage = (props) => {
       logos={logos}
       frontmatter={frontmatter}
     >
-      <MDXProvider components={DSComponents}>
-        {children}
-      </MDXProvider>
+      <MDXProvider components={DSComponents}>{children}</MDXProvider>
     </Container>
-  )
-}
+  );
+};
 
 const OverviewContainer = (props) => {
   return (
-    <Row className='justify-content-center'>
+    <Row className="justify-content-center">
       <Column className="px-11 py-8 min-vh-100 overview-container" size={12}>
         <ComponentsPage {...props} />
       </Column>
     </Row>
-  )
-}
+  );
+};
 
 const MarkdownContainer = (props) => {
-  const {
-    relativePagePath,
-    is404,
-    pageTitle,
-    location
-  } = props;
+  const { relativePagePath, is404, pageTitle, location } = props;
 
   return (
-    <Row className='justify-content-center'>
+    <Row className="justify-content-center">
       <Column className="px-11 py-8 min-vh-100 inner-left-container" size={9}>
-        {
-          !relativePagePath.includes('components') ?
-            <MDXPage {...props} />
-            :
-            <ComponentsPage {...props} />
-        }
+        {!relativePagePath.includes('components') ? <MDXPage {...props} /> : <ComponentsPage {...props} />}
       </Column>
 
-      <Column
-        size={3}
-        className="pb-6 in-page-nav position-sticky scroll-y"
-        style={{ height: 'calc(100vh - 48px)' }}
-      >
+      <Column size={3} className="pb-6 in-page-nav position-sticky scroll-y" style={{ height: 'calc(100vh - 48px)' }}>
         <TableOfContent
           is404Page={is404}
           relativePagePath={relativePagePath}
@@ -297,8 +236,16 @@ const MarkdownContainer = (props) => {
         />
       </Column>
     </Row>
-  )
-}
+  );
+};
+
+const Caption = ({ children }) => {
+  return (
+    <Text size="small" appearance="subtle" className="d-flex mt-4 justify-content-center text-align--center">
+      {children}
+    </Text>
+  );
+};
 
 const Layout = ({
   children,
@@ -315,19 +262,18 @@ const Layout = ({
 }) => {
   const is404 = children && children.key === null;
   const [isToastActive, setIsToastActive] = useState(false);
-  const [codeCopyText, setCodeCopyText] = useState('')
+  const [codeCopyText, setCodeCopyText] = useState('');
   const [toastTitle, setToastTitle] = useState('');
-  const [isTooltipActiveCode, setTooltipActiveCode] = useState(false)
+  const [isTooltipActiveCode, setTooltipActiveCode] = useState(false);
   const [tooltipName, setTooltipName] = useState(copyMessage);
   const frontmatter = useFrontmatter(relativePagePath);
   const refCode = React.createRef();
   const isOverviewPage = relativePagePath.includes('overview');
 
   const copyToClipboard = (str) => {
-    if (typeof (str) === "string") {
+    if (typeof str === 'string') {
       navigator.clipboard.writeText(str);
-    }
-    else {
+    } else {
       let codeBlock = '';
       if (Object.keys(str).length > 0) {
         const element = str.props.children;
@@ -344,7 +290,7 @@ const Layout = ({
         }
       }
       navigator.clipboard.writeText(codeBlock);
-      setCodeCopyText(str)
+      setCodeCopyText(str);
     }
   };
 
@@ -353,8 +299,11 @@ const Layout = ({
       <>
         <div {...rest}>{children}</div>
         <div
-          onMouseLeave={() => { setTooltipName(copyMessage); setTooltipActiveCode(false) }}
-          className='ml-auto'
+          onMouseLeave={() => {
+            setTooltipName(copyMessage);
+            setTooltipActiveCode(false);
+          }}
+          className="ml-auto"
         >
           <Tooltip
             open={children === codeCopyText ? isTooltipActiveCode : false}
@@ -364,9 +313,12 @@ const Layout = ({
             boundaryElement={refCode}
           >
             <Button
-              icon='copy'
-              className='p-0'
-              onClick={() => { copyToClipboard(children); toggleTooltip(copyMessageSuccess, "code") }}
+              icon="copy"
+              className="p-0"
+              onClick={() => {
+                copyToClipboard(children);
+                toggleTooltip(copyMessageSuccess, 'code');
+              }}
             />
           </Tooltip>
         </div>
@@ -378,37 +330,25 @@ const Layout = ({
     setIsToastActive(true);
     setToastTitle(name);
     setTimeout(() => setIsToastActive(false), 1500);
-  }
+  };
 
   const toggleTooltip = (name, type) => {
-    if (type === "code") {
-      setTooltipActiveCode(true)
+    if (type === 'code') {
+      setTooltipActiveCode(true);
     }
     setTooltipName(name);
-  }
+  };
 
   const Logos = ({ children, logoData, ...rest }) => {
-    return (
-      <ProductLogos
-        logoData={logoData}
-        toggleToast={toggleToast}
-      />
-    );
+    return <ProductLogos logoData={logoData} toggleToast={toggleToast} />;
   };
 
   const Rectangle = ({ name, ...rest }) => {
-    return (
-      <div className='rectangle'>{name}</div>
-    );
+    return <div className="rectangle">{name}</div>;
   };
 
   const Colors = ({ children, colorData, ...rest }) => {
-    return (
-      <ProductColors
-        colorData={colorData}
-        toggleToast={toggleToast}
-      />
-    );
+    return <ProductColors colorData={colorData} toggleToast={toggleToast} />;
   };
 
   const DSComponents = {
@@ -422,9 +362,10 @@ const Layout = ({
     DONTs,
     InlineMessage,
     IconWrapper,
-    h1: (props) => <MDXHeading size='xxl' headingInfo={props} />,
-    h2: (props) => <MDXHeading size='xl' headingInfo={props} />,
-    h3: (props) => <MDXHeading size='l' headingInfo={props} />,
+    Caption,
+    h1: (props) => <MDXHeading size="xxl" headingInfo={props} />,
+    h2: (props) => <MDXHeading size="xl" headingInfo={props} />,
+    h3: (props) => <MDXHeading size="l" headingInfo={props} />,
     h4: (props) => <MDXHeading size="m" headingInfo={props} />,
     h5: (props) => <MDXHeading size="s" headingInfo={props} />,
     ul: List,
@@ -436,7 +377,7 @@ const Layout = ({
   const showAnimation = () => {
     if (location.state?.animation === false) return false;
     return true;
-  }
+  };
 
   return (
     <>
@@ -448,10 +389,7 @@ const Layout = ({
         frontmatter={frontmatter}
         relativePagePath={relativePagePath}
       />
-      <Header
-        leftMenuList={leftMenuList}
-        relativePagePath={relativePagePath}
-      />
+      <Header leftMenuList={leftMenuList} relativePagePath={relativePagePath} />
       <Row style={{ height: 'calc(100vh - 48px)' }} ref={refCode}>
         <LeftNav
           is404Page={is404}
@@ -460,8 +398,8 @@ const Layout = ({
           showMobile={showMobile}
           frontmatter={frontmatter}
         />
-        <Column className={`${showAnimation() ? "page-animation" : ''} page-scroll h-100`} id="main-container">
-          {!isOverviewPage ?
+        <Column className={`${showAnimation() ? 'page-animation' : ''} page-scroll h-100`} id="main-container">
+          {!isOverviewPage ? (
             <MarkdownContainer
               relativePagePath={relativePagePath}
               is404={is404}
@@ -474,7 +412,7 @@ const Layout = ({
               pageDescription={pageDescription}
               logos={logos}
             />
-            :
+          ) : (
             <OverviewContainer
               tabs={tabs}
               children={children}
@@ -484,12 +422,12 @@ const Layout = ({
               relativePagePath={relativePagePath}
               pageDescription={pageDescription}
             />
-          }
+          )}
           {isToastActive && (
             <Toast
-              appearance='success'
+              appearance="success"
               title={toastTitle}
-              className='position-fixed ml-5 toast'
+              className="position-fixed ml-5 toast"
               onClose={() => setIsToastActive(false)}
             />
           )}

package/docs/src/components/LeftNav/LeftNav.js

@@ -1,10 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavItems } from '../../util/NavItems';
-import {
-  VerticalNav,
-  Subheading,
-  Button,
-} from '@innovaccer/design-system';
+import { VerticalNav, Subheading, Button } from '@innovaccer/design-system';
 import { navigate } from 'gatsby';
 import { MOBILE } from '../../util/constants';
 
@@ -42,7 +38,7 @@ const LeftNav = (props) => {
 
   useEffect(() => {
     const active = isBrowser ? getActiveNavItem() : '';
-    const obj = { link: active }
+    const obj = { link: active };
     setActive(obj);
 
     const ele = document.getElementById('navbar-container');
@@ -52,7 +48,6 @@ const LeftNav = (props) => {
 
     ele.addEventListener('scroll', setPosition(ele.scrollTop));
     return () => ele.removeEventListener('scroll', setPosition(ele.scrollTop));
-
   }, []);
 
   const onClickHandler = (menu) => {
@@ -65,9 +60,7 @@ const LeftNav = (props) => {
       navigate(`/mobile${window.location.pathname}`);
     } else {
       if (window.location.pathname.includes('/mobile')) {
-        navigate(
-          window.location.pathname.replace('/mobile', '')
-        );
+        navigate(window.location.pathname.replace('/mobile', ''));
       }
     }
   };
@@ -83,16 +76,13 @@ const LeftNav = (props) => {
   };
 
   return (
-    <div
-      id="navbar-container"
-      className='h-100 bg-secondary-lightest border-right page-scroll'
-    >
+    <div id="navbar-container" className="h-100 bg-secondary-lightest border-right page-scroll">
       {showMenuButtons && (
-        <div className='d-flex pt-6 pl-6'>
+        <div className="d-flex pt-6 pl-6">
           <Button
-            appearance='basic'
-            size='regular'
-            className='mr-4'
+            appearance="basic"
+            size="regular"
+            className="mr-4"
             onClick={() => handleNavigate()}
             selected={!relativePagePath.includes(MOBILE)}
             expanded={true}
@@ -100,26 +90,20 @@ const LeftNav = (props) => {
             Web
           </Button>
           <Button
-            appearance='basic'
+            appearance="basic"
             onClick={() => handleNavigate(MOBILE)}
             selected={relativePagePath.includes(MOBILE)}
-            className='mr-6'
+            className="mr-6"
             expanded={true}
           >
             Mobile
           </Button>
         </div>
       )}
-      <Subheading className='pl-6 pt-6 pb-3' appearance='subtle'>
+      <Subheading className="pl-6 pt-6 pb-3" appearance="subtle">
         {getHeading()}
       </Subheading>
-      <VerticalNav
-        menus={navItems}
-        active={active}
-        onClick={onClickHandler}
-        expanded={true}
-        autoCollapse={false}
-      />
+      <VerticalNav menus={navItems} active={active} onClick={onClickHandler} expanded={true} autoCollapse={false} />
     </div>
   );
 };

package/docs/src/components/Logos/Logos.js

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  Card,
-  Column,
-  Icon,
-  Toast,
-} from '@innovaccer/design-system';
+import { Card, Column, Icon, Toast } from '@innovaccer/design-system';
 import './Logos.css';
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import { Link } from 'gatsby';
@@ -24,32 +19,23 @@ const ProductLogos = (props) => {
 
     let image;
     if (filteredGatsbyImage.length) {
-      image = getImage(
-        filteredGatsbyImage[0].gatsbyImageData
-      );
+      image = getImage(filteredGatsbyImage[0].gatsbyImageData);
     }
 
     return (
-      <Column size='4'>
-        <Card className='mr-7 mt-7' shadow='none'>
-          <div className='px-6'>
-            <div className='mt-6 px-8 py-8 container w-auto'>
-              <GatsbyImage
-                image={image}
-                alt={elt.name}
-                className='image'
-              />
+      <Column size="4">
+        <Card className="mr-7 mt-7" shadow="none">
+          <div className="px-6">
+            <div className="mt-6 px-8 py-8 container w-auto">
+              <GatsbyImage image={image} alt={elt.name} className="image" />
             </div>
-            <div className='d-flex align-items-center'>
-              <p className='imgName mr-auto'>{elt.name} </p>
-              <Link
-                href={image.images.fallback.src}
-                download
-              >
+            <div className="d-flex align-items-center">
+              <p className="imgName mr-auto">{elt.name} </p>
+              <Link href={image.images.fallback.src} download>
                 <Icon
                   size={16}
-                  name='download'
-                  className='mr-3 imgName'
+                  name="download"
+                  className="mr-3 imgName"
                   onClick={() => props.toggleToast(`Downloading ${elt.name}`)}
                 />
               </Link>