@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/components/Layout.js

@@ -1,216 +1,28 @@
-/* eslint-disable import/no-unresolved */
 import React, { useState } from 'react';
-import {
-  Row,
-  Column,
-  Button,
-  Toast,
-  Tooltip
-} from '@innovaccer/design-system';
-import LeftNav from './LeftNav';
-import TableOfContent from './TableOfContent/TableOfContent';
+import './css/style.css';
+import Meta from './Meta';
 import Header from './Header';
+import LeftNav from './LeftNav';
 import Container from './Container';
-import ComponentsContainer from './Container/ComponentsContainer';
-import { MDXProvider } from "@mdx-js/react";
-import * as MDSComponents from '@innovaccer/design-system';
-import Meta from './Meta';
-import './css/style.css';
-import PropsTable from './PropsTable/index';
-import Rules from './Rules/Rules';
-import DOs from './Rules/DOs';
-import DONTs from './Rules/DONTs';
-import InlineMessage from './Rules/InlineMessage';
-import IconWrapper from './Rules/IconWrapper';
 import Footer from './Footer/Footer';
 import ProductLogos from './Logos/Logos';
+import { MDXProvider } from '@mdx-js/react';
 import ProductColors from './Colors/Colors';
-// import { useGetStorybookData } from '../util/StorybookData';
-import { ArgsTable } from './PropsTable/Table';
-import Markdown from 'markdown-to-jsx';
+import { MDXComponents } from './MDXComponents';
 import { useFrontmatter } from '../util/Frontmatter';
-import MDXHeading from './MDXHeading.js';
-import { copyMessage, copyMessageSuccess } from "../util/constants.js";
-import axios from 'axios';
-
-const useGetStorybookData = async (name) => {
-  let componentName = name;
-  let componentPath = `/sb/${componentName}.json`;
-
-  // To handle Rich Text Editor Stories
-  if (name.startsWith('library')) {
-    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;
-    })
-
-  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 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;
-
-    })
-}
-
-const Preview = ({ name }) => {
-  return (
-    <div>
-      <PropsTable
-        dataProvider={() => getJsxCode(name)}
-      />
-    </div>
-  );
-};
-
-const A11yBlock = ({ name }) => {
-  const [data, setData] = React.useState([]);
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-
-  React.useEffect(() => {
-    useGetStorybookData(name)
-      .then((componentData) => {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        const a11yProps = componentData && componentData.parameters.docs.docPage?.a11yProps;
-
-        setData(a11yProps);
-        setLoading(false);
-      })
-      .catch((err) => {
-        setError(err);
-        setLoading(false);
-      });
-  }, []);
-
-  if (loading) {
-    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 (
-    <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>
-      <iframe
-        id="myFrame"
-        width="100%"
-        height="800px"
-        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`}
-      />
-    </>
-  );
-}
-
-const PreviewWithPropTable = ({ name, embed }) => {
-
-  const [data, setData] = React.useState({});
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-
-  React.useEffect(() => {
-    if (!embed) {
-      getPropTableData(name)
-        .then((data) => {
-          setData(data);
-          setLoading(false);
-        })
-        .catch((err) => {
-          setError(`Could not get details for id: ${name}`);
-          setLoading(false);
-        });
-    }
-  }, []);
-
-  if (loading && !embed) {
-    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 (
-    <div className="overflow-x-scroll">
-      {embed ?
-        <FrameWrapper componentName={name} />
-        :
-        <ArgsTable rows={data} />
-      }
-    </div>
-  );
-};
+import TableOfContent from './TableOfContent/TableOfContent';
+import ComponentsContainer from './Container/ComponentsContainer';
+import { copyMessage, copyMessageSuccess } from '../util/constants.js';
+import { Row, Column, Button, Toast, Tooltip } from '@innovaccer/design-system';
 
-const List = ({ children, ...rest }) => {
-  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 +32,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 +49,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 +82,8 @@ const MarkdownContainer = (props) => {
         />
       </Column>
     </Row>
-  )
-}
+  );
+};
 
 const Layout = ({
   children,
@@ -315,19 +100,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 +128,7 @@ const Layout = ({
         }
       }
       navigator.clipboard.writeText(codeBlock);
-      setCodeCopyText(str)
+      setCodeCopyText(str);
     }
   };
 
@@ -353,8 +137,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 +151,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,65 +168,34 @@ 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}
-      />
-    );
   };
 
-  const Rectangle = ({ name, ...rest }) => {
-    return (
-      <div className='rectangle'>{name}</div>
-    );
+  const Logos = ({ children, logoData, ...rest }) => {
+    return <ProductLogos logoData={logoData} toggleToast={toggleToast} />;
   };
 
   const Colors = ({ children, colorData, ...rest }) => {
-    return (
-      <ProductColors
-        colorData={colorData}
-        toggleToast={toggleToast}
-      />
-    );
+    return <ProductColors colorData={colorData} />;
   };
 
   const DSComponents = {
-    ...MDSComponents,
+    ...MDXComponents,
     pre: Code,
-    Preview: Preview,
-    PreviewWithPropTable: PreviewWithPropTable,
-    A11yBlock: A11yBlock,
-    Rules,
-    DOs,
-    DONTs,
-    InlineMessage,
-    IconWrapper,
-    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,
     Logos: (props) => <Logos {...props} />,
-    Rectangle: (props) => <Rectangle {...props} />,
     Colors: (props) => <Colors {...props} />,
   };
 
   const showAnimation = () => {
     if (location.state?.animation === false) return false;
     return true;
-  }
+  };
 
   return (
     <>
@@ -448,10 +207,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 +216,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 +230,7 @@ const Layout = ({
               pageDescription={pageDescription}
               logos={logos}
             />
-            :
+          ) : (
             <OverviewContainer
               tabs={tabs}
               children={children}
@@ -484,12 +240,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>