@innovaccer/design-system 2.13.3 → 2.13.4-2

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

@@ -7,13 +7,13 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
  */
 
 .npm__react-simple-code-editor__textarea {
-  font-family: "Roboto Mono" !important;
+  font-family: 'Roboto Mono' !important;
 }
 
-code[class*="language-"],
-pre[class*="language-"] {
+code[class*='language-'],
+pre[class*='language-'] {
   background: none;
-  font-family: "Roboto Mono";
+  font-family: 'Roboto Mono';
   font-size: 1em;
   text-align: left;
   white-space: pre;
@@ -32,48 +32,47 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-
 #react-tab pre {
-  font-family: "Roboto Mono" !important;
+  font-family: 'Roboto Mono' !important;
 }
 
-pre[class*="language-"]::-moz-selection,
-pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection {
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
   text-shadow: none;
   background: #b3d4fc;
 }
 
-pre[class*="language-"]::selection,
-pre[class*="language-"] ::selection,
-code[class*="language-"]::selection,
-code[class*="language-"] ::selection {
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
   text-shadow: none;
   background: #b3d4fc;
 }
 
 @media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
+  code[class*='language-'],
+  pre[class*='language-'] {
     text-shadow: none;
   }
 }
 
 /* Code blocks */
-pre[class*="language-"] {
+pre[class*='language-'] {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
   background: #f5f2f0;
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
+:not(pre) > code[class*='language-'] {
   padding: 0.1em;
   border-radius: 0.3em;
   white-space: normal;

package/docs/src/components/Rules/DONTs.js

@@ -2,12 +2,7 @@ import React from 'react';
 import './Rules.css';
 
 const DONTs = ({ children }) => {
-
-  return (
-    <div className="px-6 Rules-Dont" >
-      {children}
-    </div>
-  );
+  return <div className="px-6 Rules-Dont">{children}</div>;
 };
 
 export default DONTs;

package/docs/src/components/Rules/DOs.js

@@ -2,12 +2,7 @@ import React from 'react';
 import './Rules.css';
 
 const DOs = ({ children }) => {
-
-  return (
-    <div className="px-6 Rules-Do">
-      {children}
-    </div>
-  );
+  return <div className="px-6 Rules-Do">{children}</div>;
 };
 
 export default DOs;

package/docs/src/components/Rules/IconWrapper.js

@@ -3,13 +3,12 @@ import { Icon } from '@innovaccer/design-system';
 
 const IconWrapper = ({ children, iconType = 'success' }) => {
   return (
-    <div class='d-flex'>
-      {
-        iconType === 'error' ?
-          <Icon className='mr-4 mt-2' appearance="alert" name="cancel" size={14} />
-          :
-          <Icon className='mr-4 mt-2' appearance="success" name="check_circle" size={14} />
-      }
+    <div className="d-flex">
+      {iconType === 'error' ? (
+        <Icon className="mr-4 mt-2" appearance="alert" name="cancel" size={14} />
+      ) : (
+        <Icon className="mr-4 mt-2" appearance="success" name="check_circle" size={14} />
+      )}
       {children}
     </div>
   );

package/docs/src/components/Rules/InlineMessage.js

@@ -1,11 +1,7 @@
 import React from 'react';
 
 const InlineMessage = ({ children }) => {
-  return (
-    <div className='py-6'>
-      {children}
-    </div>
-  );
+  return <div className="py-6">{children}</div>;
 };
 
 export default InlineMessage;

package/docs/src/components/Rules/Rules.js

@@ -3,35 +3,25 @@ import { Row, Column } from '@innovaccer/design-system';
 import './Rules.css';
 
 const Rules = ({ children, isPortraitMode = false }) => {
-
   return (
-    <div className='Rules-Container'>
-      {
-        isPortraitMode ?
-          <>
-            <Row>
-              <Column>
-                {children.length > 0 && <div>{children[0]}</div>}
-              </Column>
-            </Row>
-            <Row>
-              <Column>
-                {children.length > 1 && <div>{children[1]}</div>}
-              </Column>
-            </Row>
-          </>
-          :
-          <>
-            <Row>
-              <Column>
-                {children.length > 0 && <div>{children[0]}</div>}
-              </Column>
-              <Column>
-                {children.length > 1 && <div>{children[1]}</div>}
-              </Column>
-            </Row>
-          </>
-      }
+    <div className="Rules-Container">
+      {isPortraitMode ? (
+        <>
+          <Row>
+            <Column>{children.length > 0 && <div>{children[0]}</div>}</Column>
+          </Row>
+          <Row>
+            <Column>{children.length > 1 && <div>{children[1]}</div>}</Column>
+          </Row>
+        </>
+      ) : (
+        <>
+          <Row>
+            <Column>{children.length > 0 && <div>{children[0]}</div>}</Column>
+            <Column>{children.length > 1 && <div>{children[1]}</div>}</Column>
+          </Row>
+        </>
+      )}
     </div>
   );
 };

package/docs/src/components/TableOfContent/TableOfContent.css

@@ -4,12 +4,19 @@
 
 .toc-link {
   text-decoration: none;
-  font-size: var(--font-size);
   color: var(--inverse);
   padding: var(--spacing) 0;
   display: inline-block;
 }
 
+.toc-font--regular {
+  font-size: var(--font-size);
+}
+
+.toc-font--small {
+  font-size: var(--font-size-s);
+}
+
 .right-nav-container {
   height: max-content;
   border-left: var(--border);

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

@@ -8,17 +8,18 @@ const TableOfContent = (props) => {
   const { relativePagePath, location } = props;
   const clickedRef = useRef(false);
   const unsetClickedRef = useRef(null);
+  const depth = 0;
 
   let navItems = useNavItems(relativePagePath);
   const [active, setActive] = useState('');
 
   useEffect(() => {
     const navIds = getIds(navItems);
-    let element = document.getElementById("main-container");
+    let element = document.getElementById('main-container');
     element.addEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
     return () => {
       element.removeEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
-    }
+    };
   }, []);
 
   useEffect(() => {
@@ -26,45 +27,57 @@ const TableOfContent = (props) => {
     if (location && location.hash) {
       urlHash = location.hash.slice(1);
       setActive(urlHash);
-    } else if(navItems && navItems.length) {
-       setActive(navItems[0].url?.slice(1));
+    } else if (navItems && navItems.length) {
+      setActive(navItems[0].url?.slice(1));
     }
   }, []);
 
   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";
-  }
+    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")){
+    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;
+    const fetchUrl = (activeUrl) => {
+      let path = activeUrl.split('#');
+      return path[path.length - 1];
+    };
+
+    idList &&
+      idList.forEach((item) => {
+        let element = document.getElementById(item);
+        if (element && !resultFound) {
+          const { top, height } = element.getBoundingClientRect();
+          if (top > 0 && viewportHeight > top - height) {
+            setActive(item);
+            resultFound = true;
+            let activeElement = document.getElementsByClassName('active-link')[0];
+            let activeUrl = activeElement.getElementsByClassName('toc-link')[0].href;
+            let subHeading = document.getElementsByClassName('subheading')[0];
 
-    idList && idList.forEach((item) => {
-      let element = document.getElementById(item);
-      if (element && !resultFound) {
-        const { top, height } = element.getBoundingClientRect();
-        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(true);
-          else if(flag === "aboveViewPort") activeElement.scrollIntoView(true);
-        };
-      };
-    });
+            const activeContent = fetchUrl(activeUrl);
+            let flag = isInViewport(activeElement);
+            if (flag === 'belowViewPort') activeElement.scrollIntoView(true);
+            else if (flag === 'aboveViewPort') {
+              if (activeContent == idList[0]) subHeading.scrollIntoView(true);
+              else activeElement.scrollIntoView(true);
+            }
+          }
+        }
+      });
   };
 
   const onClickHandler = (e, itemUrl) => {
@@ -90,47 +103,43 @@ const TableOfContent = (props) => {
     }, []);
   }
 
-  function renderItems(items) {
+  function renderItems(items,depth) {
     return (
-      <ul className='table-of-content-list pr-8'>
-        {items && items.map((item, key) => {
-          return (
-            <li key={key}>
-              <div
-                className={`${active == item.url?.slice(1) ? 'active-link' : ''
-                  }`}
-              >
-                <Link
-                  to={item.url}
-                  onClick={(e) => onClickHandler(e, item.url.slice(1))}
-                  className='toc-link'
-                  style={{
-                    display: `${item.title ? 'inline-block' : 'none'
-                      }`,
-                  }}
-                >
-                  {item.title}
-                </Link>
-              </div>
-              {item.items && renderItems(item.items)}
-            </li>
-          );
-        })}
+      <ul className="table-of-content-list pr-8">
+        {items &&
+          items.map((item, key) => {
+            return (
+              <li key={key}>
+                <div className={`${active == item.url?.slice(1) ? 'active-link' : ''}`}>
+                  <Link
+                    to={item.url}
+                    onClick={(e) => onClickHandler(e, item.url.slice(1))}
+                    className={`toc-link ${depth == 0 ? 'toc-font--regular' : 'toc-font--small'}`}
+                    style={{
+                      display: `${item.title ? 'inline-block' : 'none'}`,
+                    }}
+                  >
+                    {item.title}
+                  </Link>
+                </div>
+                {item.items && renderItems(item.items,1)}
+              </li>
+            );
+          })}
       </ul>
     );
   }
 
   return (
-    <div className='d-flex flex-column right-nav-container overflow-hidden'>
+    <div className="d-flex flex-column right-nav-container overflow-hidden">
       {navItems && navItems.length ? (
         <>
-          <Subheading
-            appearance='subtle'
-            className='pl-6 mt-10'
-          >
-            CONTENTS
-          </Subheading>
-          {renderItems(navItems)}
+          <div className="subheading">
+            <Subheading appearance="subtle" className="pl-6 mt-10">
+              CONTENTS
+            </Subheading>
+          </div>
+          {renderItems(navItems,depth)}
         </>
       ) : (
         ''

package/docs/src/components/css/global.css

@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  font-family: "Nunito Sans", sans-serif;
+  font-family: 'Nunito Sans', sans-serif;
 }
 
 * {

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

@@ -32,7 +32,7 @@
   justify-content: space-between;
 }
 
-code[class*="language-"] {
+code[class*='language-'] {
   background: transparent !important;
   white-space: pre-wrap !important;
 }

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

@@ -35,7 +35,7 @@ ol {
 
 .list > li {
   list-style: none;
-  margin-bottom: var(--spacing-2);
+  margin-bottom: var(--spacing);
   margin-left: var(--spacing-s);
 }
 
@@ -43,10 +43,14 @@ ol {
   content: '\2022';
   width: 2px;
   display: inline-block;
-  color: var(--inverse-lightest);
+  color: var(--inverse-light);
   margin-right: var(--spacing-l);
 }
 
+.ordered-list > li {
+  margin-bottom: var(--spacing);
+}
+
 .toast {
   left: 0;
   bottom: 0;
@@ -75,7 +79,7 @@ ol {
   font-size: var(--spacing-l);
 }
 
-.overflow-x-scroll::-webkit-scrollbar, 
+.overflow-x-scroll::-webkit-scrollbar,
 .scroll-y::-webkit-scrollbar {
   display: none;
 }
@@ -89,7 +93,7 @@ table {
   border-collapse: collapse;
   border-radius: 4px;
   border-style: hidden; /* hide standard table (collapsed) border */
-  box-shadow: 0 0 0 1px var(--secondary-light); /* this draws the table border  */ 
+  box-shadow: 0 0 0 1px var(--secondary-light); /* this draws the table border  */
 }
 
 table th,
@@ -117,7 +121,7 @@ table td {
 .bitmap-container {
   text-align: center !important;
 }
-.bitmap-container img{
+.bitmap-container img {
   height: auto;
   width: 50%;
 }
@@ -139,3 +143,7 @@ blockquote p {
   width: 80px;
   text-align: center;
 }
+
+.text-align--center {
+  text-align: center;
+}

package/docs/src/components/templates/Default.js

@@ -4,7 +4,7 @@ import LastModifiedDate from '../LastModifiedDate';
 
 export default ({ pageContext, children, ...rest }) => {
   const { frontmatter = {}, titleType, relativePagePath } = pageContext;
-  const { title, description, keywords, tabs, logos, showMobile=false } = frontmatter;
+  const { title, description, keywords, tabs, logos, showMobile = false } = frontmatter;
   return (
     <Layout
       pageTitle={title}

package/docs/src/components/templates/Homepage.js

@@ -1,13 +1,11 @@
-import React from "react";
+import React from 'react';
 import Header from '../Header';
 
-export default ({relativePagePath, children }) => {
+export default ({ relativePagePath, children }) => {
   return (
     <div>
-      <Header
-        relativePagePath={relativePagePath}
-      />
+      <Header relativePagePath={relativePagePath} />
       {children}
     </div>
   );
-} 
+};

package/docs/src/data/components/Overview.js

@@ -6,26 +6,23 @@ import { debounce } from '../../util/Helpers';
 import noResultImage from './images/noresult.png';
 
 const StatusTag = ({ category }) => {
-
   const categoryName = category?.toUpperCase();
 
   const appearance = {
-    "CODE UNAVAILABLE": "accent1",
-    "BETA": "accent2"
-  }
+    'CODE UNAVAILABLE': 'accent1',
+    BETA: 'accent2',
+  };
 
-  return <Badge appearance={appearance[categoryName]}>{category}</Badge>
-}
+  return <Badge appearance={appearance[categoryName]}>{category}</Badge>;
+};
 
 function Overview({ data, mode, path = 'components' }) {
-
   const [previewList, setPreviewList] = useState(data);
-  const [searchKey, setSearchKey] = useState('')
+  const [searchKey, setSearchKey] = useState('');
 
   const onSearchHandler = debounce((target) => {
-    setSearchKey(target.value)
-    const searchList = data
-      .filter((item) => item.name.toLowerCase().match(target.value.toLowerCase()));
+    setSearchKey(target.value);
+    const searchList = data.filter((item) => item.name.toLowerCase().match(target.value.toLowerCase()));
     setPreviewList(searchList);
   });
 
@@ -39,56 +36,52 @@ function Overview({ data, mode, path = 'components' }) {
         onChange={({ target }) => onSearchHandler(target)}
       />
 
-      <div className='d-flex flex-wrap'>
-        {
-          previewList.length > 0 ?
-            previewList.map(({ image = () => (<img alt='' />), name, status, link = '' }) => {
-              return (
-                <div
-                  key={name}
-                  className='overview-container-card pb-6 mr-6'
+      <div className="d-flex flex-wrap">
+        {previewList.length > 0 ? (
+          previewList.map(({ image = () => <img alt="" />, name, status, link = '' }) => {
+            return (
+              <div key={name} className="overview-container-card pb-6 mr-6">
+                <Link
+                  className="card-link"
+                  disabled={!link.length}
+                  to={mode === 'mobile' ? `/mobile/${path}/${link}` : `/${path}/${link}`}
                 >
+                  <Card shadow="none" className="w-100 overflow-hidden overview-card pb-5 h-100">
+                    <CardBody className="px-0">
+                      <div className="py-5 card-opacity d-flex flex-column">
+                        <div className="d-flex justify-content-end mr-5">
+                          {status && <StatusTag category={status} />}
+                        </div>
 
-                  <Link
-                    className='card-link'
-                    disabled={!link.length}
-                    to={mode === "mobile" ? `/mobile/${path}/${(link)}` : `/${path}/${(link)}`}
-                  >
-                    <Card
-                      shadow='none'
-                      className='w-100 overflow-hidden overview-card pb-5 h-100'
-                    >
-                      <CardBody className='px-0'>
-                        <div className='py-5 card-opacity d-flex flex-column'>
-                          <div className='d-flex justify-content-end mr-5'>
-                            {status && <StatusTag category={status} />}
-                          </div>
-
-                          <div className='d-flex justify-content-center align-items-center' style={{ overflow: 'hidden', height: '168px' }}>
-                            {React.createElement(image)}
-                          </div>
+                        <div
+                          className="d-flex justify-content-center align-items-center"
+                          style={{ overflow: 'hidden', height: '168px' }}
+                        >
+                          {React.createElement(image)}
                         </div>
-                        <Heading size="s" className='ml-6 position-absolute card-heading'>
-                          {name}
-                        </Heading>
-                      </CardBody>
-                    </Card>
-                  </Link>
-                </div>
-              )
-            }) :
-            <div className="d-flex justify-content-center" style={{ transform: "translate(50%,64px)" }}>
-              <EmptyState
-                size="small"
-                description="Sorry! We could not find any match. Please try again"
-                imageSrc={noResultImage}
-                title={`No results found for '${searchKey}'`}
-              />
-            </div>
-        }
+                      </div>
+                      <Heading size="s" className="ml-6 position-absolute card-heading">
+                        {name}
+                      </Heading>
+                    </CardBody>
+                  </Card>
+                </Link>
+              </div>
+            );
+          })
+        ) : (
+          <div className="d-flex justify-content-center" style={{ transform: 'translate(50%,64px)' }}>
+            <EmptyState
+              size="small"
+              description="Sorry! We could not find any match. Please try again"
+              imageSrc={noResultImage}
+              title={`No results found for '${searchKey}'`}
+            />
+          </div>
+        )}
       </div>
     </div>
-  )
+  );
 }
 
 export default Overview;