@innovaccer/design-system 2.9.0 → 2.10.0

package/docs/.env.development

@@ -0,0 +1,2 @@
+
+STORYBOOK_HOST="http://localhost:5000/iframe.html?id=components-avatar-all--all&args=&viewMode=story"

package/docs/gatsby-config.js

@@ -1,3 +1,7 @@
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
 const path = require('path');
 
 const remarkSlug = require(`remark-slug`);
@@ -134,7 +138,7 @@ const remarkSlug = require(`remark-slug`);
       {
         resolve: `gatsby-source-filesystem`,
         options: {
-          name: `images`,
+          name: `StaticImages`,
           path: `./static/images`,
         },
       },

package/docs/package.json

@@ -7,7 +7,9 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "./tools/develop.sh",
     "build": "./tools/build.sh",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "extract:dev": "export NODE_ENV=development && node ./tools/extract.js",
+    "extract": "export NODE_ENV=production && node ./tools/extract.js"
   },
   "dependencies": {
     "gatsby": "^3.6.1",
@@ -24,7 +26,7 @@
     "@fontsource/nunito": "^4.5.0",
     "@fontsource/nunito-sans": "^4.5.0",
     "@fontsource/roboto-mono": "^4.5.0",
-    "@innovaccer/design-system": "2.7.0",
+    "@innovaccer/design-system": "2.9.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@storybook/theming": "^6.3.6",

package/docs/src/components/Container/Container.js

@@ -92,13 +92,13 @@ const Container = ({
           Download all
         </Button>
       )}
+      <Paragraph className='mb-6'>{isSiblingTab ? frontmatter?.description : pageDescription}</Paragraph>
       {tabsList && tabsList.length && (
         <>
-          <Paragraph>{isSiblingTab ? frontmatter?.description : pageDescription}</Paragraph>
           <Tabs
             activeIndex={activeIndex}
             onTabChange={onTabChangeHandler}
-            className='mb-6 mt-4'
+            className='mb-6 '
           >
             {tabsList.map((tab) => (
               <Tab label={tab}></Tab>

package/docs/src/components/Layout.js

@@ -4,9 +4,9 @@ import '@fontsource/nunito-sans';
 import {
   Row,
   Column,
-  Heading,
   Button,
   Toast,
+  Tooltip
 } from '@innovaccer/design-system';
 import LeftNav from './LeftNav';
 import TableOfContent from './TableOfContent/TableOfContent';
@@ -30,38 +30,11 @@ import { useGetStorybookData } from '../util/StorybookData';
 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";
+
 
-const copyToClipboard = (str) => {
-  let codeBlock = '';
-  if (Object.keys(str).length > 0) {
-    const element = str.props.children;
-    if (Array.isArray(element) && element.length) {
-      element.map((elt) => {
-        if (typeof elt === 'object') {
-          codeBlock = codeBlock + elt.props.children;
-        } else {
-          codeBlock = codeBlock + elt;
-        }
-      });
-    } else {
-      codeBlock = str.props.children;
-    }
-  }
-  navigator.clipboard.writeText(codeBlock);
-};
 
-const Code = ({ children, ...rest }) => {
-  return (
-    <>
-      <div {...rest}>{children}</div>
-      <Button
-        icon='copy'
-        className='ml-auto p-0'
-        onClick={() => copyToClipboard(children)}
-      />
-    </>
-  );
-};
 
 const List = ({ children, ...rest }) => {
   return (
@@ -70,7 +43,6 @@ const List = ({ children, ...rest }) => {
     </div>
   )
 }
-
 const leftMenuList = [
   {
     title: 'Gatsby Theme MDS'
@@ -92,9 +64,63 @@ const Layout = ({
 }) => {
   const is404 = children && children.key === null;
   const [isToastActive, setIsToastActive] = useState(false);
+  const [codeCopyText , setCodeCopyText] = useState('')
   const [toastTitle, setToastTitle] = useState('');
+  const [isTooltipActiveCode , setTooltipActiveCode] = useState(false)
+  const [tooltipName, setTooltipName] = useState(copyMessage);
   const frontmatter = useFrontmatter(relativePagePath);
+  const refCode = React.createRef();
+  
+  const copyToClipboard = (str) => {
+  if(typeof(str)==="string"){
+    navigator.clipboard.writeText(str);
+  }
+  else{
+    let codeBlock = '';
+    if (Object.keys(str).length > 0) {
+      const element = str.props.children;
+      if (Array.isArray(element) && element.length) {
+        element.map((elt) => {
+          if (typeof elt === 'object') {
+            codeBlock = codeBlock + elt.props.children;
+          } else {
+            codeBlock = codeBlock + elt;
+          }
+        });
+      } else {
+        codeBlock = str.props.children;
+      }
+    }
+    navigator.clipboard.writeText(codeBlock);
+    setCodeCopyText(str)
+  }
+};
 
+  const Code = ({ children, ...rest }) => {
+  return (
+    <>
+      <div {...rest}>{children}</div>
+      <div 
+        onMouseLeave={()=>{setTooltipName(copyMessage);setTooltipActiveCode(false)}}
+        className='ml-auto'
+      >
+      <Tooltip 
+        open={children === codeCopyText? isTooltipActiveCode:false} 
+        tooltip={tooltipName} 
+        position="bottom"
+        appendToBody={true}
+        boundaryElement={refCode}
+      >
+        <Button
+        icon='copy'
+        className='p-0'
+        onClick={() => {copyToClipboard(children);toggleTooltip(copyMessageSuccess,"code")}}
+        />
+      </Tooltip>
+      </div>
+    </>
+  );
+};
   function getJsxCode(name) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const componentData = useGetStorybookData(name);
@@ -150,7 +176,12 @@ const Layout = ({
     setToastTitle(name);
     setTimeout(() => setIsToastActive(false), 1500);
   }
-
+  const toggleTooltip = (name , type) => {
+    if(type ==="code"){
+      setTooltipActiveCode(true)
+    }
+    setTooltipName(name);
+  }
   const Logos = ({ children, logoData, ...rest }) => {
     return (
       <ProductLogos
@@ -174,7 +205,6 @@ const Layout = ({
       />
     );
   };
-
   const DSComponents = {
     ...MDSComponents,
     pre: Code,
@@ -186,17 +216,16 @@ const Layout = ({
     DONTs,
     InlineMessage,
     IconWrapper,
-    h1: (props) => <Heading size='xxl' {...props} />,
-    h2: (props) => <Heading size='xl' {...props} />,
-    h3: (props) => <Heading size='l' {...props} />,
-    h4: (props) => <Heading size='m' {...props} />,
-    h5: (props) => <Heading size='s' {...props} />,
+    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;
@@ -216,7 +245,7 @@ const Layout = ({
         leftMenuList={leftMenuList}
         relativePagePath={relativePagePath}
       />
-      <Row style={{ height: 'calc(100vh - 48px)' }}>
+      <Row style={{ height: 'calc(100vh - 48px)' }} ref={refCode}>
         <LeftNav
           is404Page={is404}
           relativePagePath={relativePagePath}
@@ -224,7 +253,7 @@ const Layout = ({
           showMobile={showMobile}
           frontmatter={frontmatter}
         />
-        <Column className={`${showAnimation() ? "page-animation" : ''} page-scroll h-100`}>
+        <Column className={`${showAnimation() ? "page-animation" : ''} page-scroll h-100`} id="main-container">
           <Row className='justify-content-center'>
             <Column className="px-12 py-8 min-vh-100 inner-left-container" size={9}>
               {!relativePagePath.includes('components') && (
@@ -258,7 +287,8 @@ const Layout = ({
 
             <Column
               size={3}
-              className="pb-6 in-page-nav position-sticky"
+              className="pb-6 in-page-nav position-sticky scroll-y"
+              style={{ height: 'calc(100vh - 48px)' }}
             >
               <TableOfContent
                 is404Page={is404}

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

@@ -12,22 +12,28 @@ const isBrowser = typeof window !== 'undefined';
 
 const LeftNav = (props) => {
   const { relativePagePath, showMobile, frontmatter } = props;
-  const navItems = useNavItems(relativePagePath);
+  const navItemsList = useNavItems(relativePagePath);
+  const navItems = navItemsList.filter((item) => {
+    if(relativePagePath.includes(MOBILE)){
+      return !item.hideInMobile;
+    }
+    return !item.hideInWeb;
+  });
+
   const showMenuButtons = showMobile || frontmatter?.showMobile;
   const [active, setActive] = React.useState();
 
   function getActiveNavItem() {
-    if (isBrowser && window.location.pathname && frontmatter.tabs) {
-
-      const url = window.location.pathname.split('/');
+    const pathName = window.location.pathname;
+    if (isBrowser && pathName && frontmatter.tabs) {
+      const url = pathName.split('/');
+      const componentName = pathName.includes('mobile') ? url[2] + '/' + url[3] : url[1] + '/' + url[2];
       const activeMenu = navItems.filter(({ link }) => {
-        return link && link.includes(url[1] + '/' + url[2]);
+        return link && link.includes(componentName);
       });
       return activeMenu[0]?.link;
-
-    } else {
-      return window.location.pathname;
     }
+    return pathName;
   }
 
   useEffect(() => {

package/docs/src/components/MDXHeading.js

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { Heading, Icon, Tooltip } from "@innovaccer/design-system";
+import { copyMessage, copyMessageSuccess } from "../util/constants.js";
+
+const MDXHeading = ({ size, headingInfo }) => {
+  const refHeading = React.createRef();
+  const [isHovered, setIsHovered] = useState(false);
+  const [tooltipName, setTooltipName] = useState(copyMessage);
+  const [isTooltipActiveHeading, setTooltipActiveHeading] = useState(false);
+  const hoverHandler = (type) => {
+    if (type === "Enter") {
+      setIsHovered(true);
+    } else {
+      setIsHovered(false);
+      setTooltipName(copyMessage);
+      setTooltipActiveHeading(false);
+    }
+  };
+  const copyToClipboard = (str) => {
+    navigator.clipboard.writeText(str);
+  };
+  const hoverCopyHandler = (id) => {
+    const currURL = window.location.href;
+    if (currURL.includes(id)) {
+      copyToClipboard(currURL);
+    } else if (currURL.includes("#")) {
+      copyToClipboard(currURL.slice(0, currURL.indexOf("#") + 1) + id);
+    } else {
+      copyToClipboard(currURL + "#" + id);
+    }
+    setTooltipActiveHeading(true);
+    setTooltipName(copyMessageSuccess);
+  };
+  return (
+    <div
+      onMouseEnter={() => hoverHandler("Enter", headingInfo)}
+      onMouseLeave={() => hoverHandler("Leave", headingInfo)}
+      className={`d-inline-flex w-100 ${
+        size === "s" ? "align-items-center" : "align-items-baseline"
+      }`}
+      ref={refHeading}
+    >
+      <Heading
+        className={`mr-4 ${size === "s" ? "mt-3 mb-4" : ""}`}
+        size={size}
+        {...headingInfo}
+      />
+      <div className="cursor-pointer d-inline-block">
+        {isHovered && (
+          <Tooltip
+            open={isTooltipActiveHeading}
+            tooltip={tooltipName}
+            position="bottom"
+            appendToBody={false}
+            boundaryElement={refHeading}
+          >
+            <Icon
+              onClick={() => {
+                hoverCopyHandler(headingInfo.id);
+              }}
+              appearance="subtle"
+              type="filled"
+              size={16}
+              name="link"
+            />
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+};
+export default MDXHeading;

package/docs/src/components/PropsTable/ArgJsDoc.tsx

@@ -57,7 +57,7 @@ export const Table = styled.table(({ theme }) => ({
     '& code': {
       margin: 0,
       display: 'inline-block',
-      fontSize: theme.typography.size.s1,
+      fontSize: theme?.typography?.size.s1,
     },
   },
 }));

package/docs/src/components/PropsTable/index.js

@@ -15,7 +15,7 @@ import {
   CardBody,
   Button,
   Icon,
-  Toast
+  Tooltip
 } from '@innovaccer/design-system';
 import {
   LiveProvider,
@@ -25,6 +25,7 @@ import {
   withLive
 } from 'react-live';
 import './prism.css';
+import { copyMessage, copyMessageSuccess } from '../../util/constants';
 
 const beautifyHTMLOptions = {
   indent_size: 2,
@@ -60,8 +61,10 @@ const StoryComp = ({
   const [htmlCode, setHtmlCode] = useState('');
   const [isExpanded, setIsExpanded] = useState(false);
   const [activeButton, setActiveButton] = useState('React');
-  const [showToast, setShowToast] = useState(false);
   const [jsxCode, setJsxCode] = React.useState(getRawPreviewCode(componentData));
+  const [isTooltipActive, setTooltipActive] = useState(false);
+  const [tooltipName, setTooltipName] = useState(copyMessage);
+  const ref = React.createRef();
 
   const TabsWrap = withLive(({ live }) => {
     const { element: Element } = live;
@@ -97,8 +100,8 @@ const StoryComp = ({
     } else {
       navigator.clipboard.writeText(htmlCode);
     }
-    setShowToast(true);
-    setTimeout(() => setShowToast(false), 1000);
+    setTooltipName(copyMessageSuccess);
+    setTooltipActive(true)
   }
 
   const CopyCode = (props) => {
@@ -115,13 +118,27 @@ const StoryComp = ({
             }}
           />
         }
-        <Icon
-          name='content_copy'
-          size={20}
-          appearance='white'
-          onClick={onClick}
-          className='align-self-center cursor-pointer'
-        />
+        <div 
+          className='align-self-end'
+          onMouseLeave={()=>{setTooltipActive(false);setTooltipName(copyMessage)}}
+           ref={ref}
+        >
+          <Tooltip 
+            open={isTooltipActive} 
+            tooltip={tooltipName} 
+            position="bottom"
+            appendToBody={false}
+            boundaryElement={ref} 
+          >
+            <Icon
+            name='content_copy'
+            size={20}
+            appearance='white'
+            onClick={onClick}
+            className='align-self-center cursor-pointer'
+          />
+          </Tooltip>
+        </div>
       </div>
     );
   };
@@ -137,7 +154,7 @@ const StoryComp = ({
   const showLiveEditorContent = () => {
     if (activeButton === 'React') {
       return (
-        <div className="px-4">
+        <div className="px-4" id="react-tab">
           <LiveEditor theme={vsDark} />
         </div>
       );
@@ -231,15 +248,6 @@ const StoryComp = ({
             </Card>
           )}
         </LiveProvider>
-        {
-          showToast &&
-          <Toast
-            appearance="success"
-            title="Copied to clipboard"
-            className="position-fixed ml-5 toast"
-            onClose={() => setShowToast(false)}
-          />
-        }
       </div>
     </>
   );

package/docs/src/components/PropsTable/prism.css

@@ -32,6 +32,11 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
+
+#react-tab pre {
+  font-family: "Roboto Mono" !important;
+}
+
 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,

package/docs/src/components/TableOfContent/TableOfContent.js

@@ -14,9 +14,10 @@ const TableOfContent = (props) => {
 
   useEffect(() => {
     const navIds = getIds(navItems);
-    document.body.addEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
+    let element = document.getElementById("main-container");
+    element.addEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
     return () => {
-      document.body.removeEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
+      element.removeEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
     }
   }, []);
 
@@ -30,11 +31,22 @@ const TableOfContent = (props) => {
     }
   }, []);
 
+  const isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
+    let flag = (rect.top-60)>= 0 && rect.bottom+25 <= (window.innerHeight || document.documentElement.clientHeight);
+    if (flag) return "inViewPort";
+    else if(rect.bottom+25 > (window.innerHeight || document.documentElement.clientHeight)) return "belowViewPort";
+    else return "aboveViewPort";
+  }
+
   const onScrollHandler = (e, idList) => {
     // Don't set the active index based on scroll if a link was just clicked
     if (clickedRef.current) {
       return;
     }
+    if(e.target.classList.contains("in-page-nav")){
+      return;
+   }
     const headerHeight = document.getElementById('mainHeader').getBoundingClientRect().height;
     const viewportHeight = document.body.offsetHeight - headerHeight;
     let resultFound = false;
@@ -46,6 +58,10 @@ const TableOfContent = (props) => {
         if (top > 0 && viewportHeight > top - height) {
           setActive(item);
           resultFound = true;
+          let activeElement = document.getElementsByClassName('active-link')[0];
+          let flag = isInViewport(activeElement);
+          if(flag === "belowViewPort") activeElement.scrollIntoView(false);
+          else if(flag === "aboveViewPort") activeElement.scrollIntoView(true);
         };
       };
     });

package/docs/src/components/css/style.css

@@ -21,7 +21,7 @@
 }
 
 .page-scroll {
-  overflow-y: scroll;
+  overflow-y: auto;
   scroll-behavior: smooth;
 }
 
@@ -99,3 +99,14 @@ table td {
 .inner-left-container {
   max-width: 888px;
 }
+
+.scroll-y {
+  overflow-y: auto;
+}
+.bitmap-container {
+  text-align: center !important;
+}
+.bitmap-container img{
+  height: auto;
+  width: 50%;
+}