@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,37 @@
+.table-of-content {
+  width: var(--spacing-10);
+}
+
+.toc-link {
+  text-decoration: none;
+  font-size: var(--font-size);
+  color: var(--inverse);
+  padding: var(--spacing) 0;
+  display: inline-block;
+}
+
+.right-nav-container {
+  height: max-content;
+  border-left: var(--border);
+}
+
+.active-link {
+  font-weight: var(--font-weight-bold);
+}
+
+.table-of-content-list {
+  list-style: none;
+  padding-left: 16px;
+}
+
+.active-link::before {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 36px;
+  background: #000;
+  position: absolute;
+  left: 0;
+  background: var(--primary);
+  border-radius: 0 1px 1px 0;
+}

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

@@ -0,0 +1,126 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useNavItems } from '../../util/InPageNavItems';
+import { Subheading } from '@innovaccer/design-system';
+import { Link } from 'gatsby';
+import './TableOfContent.css';
+
+const TableOfContent = (props) => {
+  const { relativePagePath, location } = props;
+  const clickedRef = useRef(false);
+  const unsetClickedRef = useRef(null);
+
+  let navItems = useNavItems(relativePagePath);
+  const [active, setActive] = useState('');
+
+  useEffect(() => {
+    const navIds = getIds(navItems);
+    document.body.addEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
+    return () => {
+      document.body.removeEventListener('scroll', (e) => onScrollHandler(e, navIds), true);
+    }
+  }, []);
+
+  useEffect(() => {
+    let urlHash = '';
+    if (location && location.hash) {
+      urlHash = location.hash.slice(1);
+      setActive(urlHash);
+    } else if(navItems && navItems.length) {
+       setActive(navItems[0].url?.slice(1));
+    }
+  }, []);
+
+  const onScrollHandler = (e, idList) => {
+    // Don't set the active index based on scroll if a link was just clicked
+    if (clickedRef.current) {
+      return;
+    }
+    const headerHeight = document.getElementById('mainHeader').getBoundingClientRect().height;
+    const viewportHeight = document.body.offsetHeight - headerHeight;
+    let resultFound = false;
+
+    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;
+        };
+      };
+    });
+  };
+
+  const onClickHandler = (e, itemUrl) => {
+    setActive(itemUrl);
+
+    // Used to disable onScrollHandler if the page scrolls due to a click
+    clickedRef.current = true;
+    unsetClickedRef.current = setTimeout(() => {
+      clickedRef.current = false;
+    }, 1000);
+  };
+
+  function getIds(items) {
+    return items.reduce((acc, item) => {
+      if (item.url) {
+        // url has a # as first character, remove it to get the raw Id
+        acc.push(item.url.slice(1));
+      }
+      if (item.items) {
+        acc.push(...getIds(item.items));
+      }
+      return acc;
+    }, []);
+  }
+
+  function renderItems(items) {
+    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>
+    );
+  }
+
+  return (
+    <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>
+  );
+};
+
+export default TableOfContent;

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

@@ -0,0 +1,15 @@
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Nunito Sans", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.border-right {
+  border-right: var(--border);
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Add back the container background-color, border-radius, padding, margin
+ * and overflow that we removed from <pre>.
+ */
+.gatsby-highlight {
+  border-radius: var(--spacing);
+  border: var(--spacing-xs) solid var(--secondary-lightest);
+  position: relative;
+  background-color: var(--secondary-light);
+  margin: 0.5em 0;
+  padding: 1em;
+  overflow: auto;
+  display: flex;
+  align-items: flex-start;
+}
+
+/**
+ * Remove the default PrismJS theme background-color, border-radius, margin,
+ * padding and overflow.
+ * 1. Make the element just wide enough to fit its content.
+ * 2. Always fill the visible space in .gatsby-highlight.
+ * 3. Adjust the position of the line numbers
+ */
+.gatsby-highlight pre[class*='language-'] {
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  overflow: initial;
+  float: left; /* 1 */
+  min-width: 100%; /* 2 */
+  display: flex;
+  justify-content: space-between;
+}
+
+code[class*="language-"] {
+  background: transparent !important;
+  white-space: pre-wrap !important;
+}

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

@@ -0,0 +1,97 @@
+.in-page-nav {
+  top: 0;
+  align-self: flex-start;
+}
+
+@keyframes fadeInAnimation {
+  0% {
+    opacity: 0.25;
+    margin-top: 2px;
+  }
+  100% {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+.page-animation {
+  animation: fadeInAnimation ease 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+.page-scroll {
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+.list {
+  margin-top: var(--spacing-m);
+}
+
+.list > li {
+  list-style: none;
+  margin-bottom: var(--spacing-2);
+  margin-left: var(--spacing-s);
+}
+
+.list li::before {
+  content: '\2022';
+  width: 2px;
+  display: inline-block;
+  color: var(--inverse-lightest);
+  margin-right: var(--spacing-l);
+}
+
+.toast {
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+.rectangle {
+  background-color: var(--secondary-lightest);
+  border: var(--border);
+  border-radius: var(--spacing-m);
+  font-weight: var(--font-weight-bold);
+  display: inline-block;
+  padding: 0 var(--spacing-m) 0 var(--spacing-m);
+  font-family: 'Roboto mono';
+}
+
+.A11y-markdown code {
+  background-color: var(--secondary-lightest);
+  border: 1px solid var(--secondary-light);
+  font-weight: var(--font-weight-bold);
+  color: var(--inverse);
+  line-height: 1;
+  padding: 3px 5px;
+  white-space: nowrap;
+  border-radius: var(--spacing-m);
+  font-size: var(--spacing-l);
+}
+
+.overflow-x-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table th,
+table td {
+  border: 1px solid var(--secondary-light);
+  padding: var(--spacing-l);
+}
+
+.docblock-argstable th,
+.docblock-argstable td {
+  border: none;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Layout from '../Layout';
+import LastModifiedDate from '../LastModifiedDate';
+
+export default ({ pageContext, children, ...rest }) => {
+  const { frontmatter = {}, titleType, relativePagePath } = pageContext;
+  const { title, description, keywords, date, component, tabs, logos, showMobile=false } = frontmatter;
+  return (
+    <Layout
+      pageTitle={title}
+      titleType={titleType}
+      pageDescription={description}
+      pageKeywords={keywords}
+      relativePagePath={relativePagePath}
+      component={component}
+      tabs={tabs}
+      logos={logos}
+      showMobile={showMobile}
+      {...rest}
+    >
+      {children}
+    </Layout>
+  );
+};

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

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

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

@@ -0,0 +1,285 @@
+
+import React from 'react';
+import { StaticImage } from "gatsby-plugin-image";
+import { Link } from 'gatsby';
+
+const imgStyle = {
+  height: 'auto'
+}
+
+export const data = [
+  {
+    link: 'avatar/usage',
+    design: 'Unavailable',
+    name: 'Avatars',
+    code: 'Unavailable',
+    image: () => (
+      <StaticImage
+        src="./images/Avatars.png"
+        alt="Avatars"
+        imgStyle={imgStyle}
+      />)
+  },
+  {
+    link: 'badges/usage',
+    name: 'Badges',
+    design: "Available",
+    code: "Unavailable"
+  },
+  {
+    link: 'breadcrumbs/usage',
+    name: 'Breadcrumb',
+    design: "Available",
+    code: "Available",
+  },
+  {
+    link: 'button/usage',
+    name: 'Buttons',
+    design: "Available",
+    code: "Available",
+  },
+  {
+    link: 'card/usage',
+    name: 'Card',
+    design: "Available",
+    code: "Available",
+  },
+  {
+    link: 'checkbox/usage',
+    name: 'Checkbox',
+    design: "Available",
+    code: "Available",
+  },
+  {
+    link: '',
+    name: 'Chips',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: 'datepicker/usage',
+    name: 'Date & Time Picker',
+    design: "Unavailable",
+    code: "Available",
+    image: () => (
+      <StaticImage
+        src="./images/Datepicker.png"
+        alt="Avatars"
+        imgStyle={imgStyle}
+      />)
+  },
+  {
+    link: '',
+    name: 'Dividers',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Dropdown',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Icons',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Inputs',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Inline editable fields',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Links',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: 'message/usage',
+    name: 'Message',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Modal',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+
+    link: '',
+    name: 'Navigation - Horizontal',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Navigation - Vertical',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Pagination',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Pills',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Popover',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Progress indicators',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Radio',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Scrollbar',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Sidesheet',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Slider',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Status hints',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Steppers',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Switch',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Table',
+    design: "Unavailable",
+    code: "Unavailable",
+    image: () => (
+      <StaticImage
+        src="./images/Table.png"
+        alt="Avatars"
+        imgStyle={imgStyle}
+      />)
+  },
+  {
+    link: '',
+    name: 'Tabs',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Toast',
+    design: "Unavailable",
+    code: "Unavailable",
+  },
+  {
+    link: '',
+    name: 'Tooltip',
+    design: "Unavailable",
+    code: "Unavailable",
+  }
+];
+
+
+export const schema = [
+  {
+    name: "name",
+    displayName: "Component Name",
+    width: "40%",
+    sorting: false,
+    cellRenderer: ({ data }) => {
+      return <Link 
+      className='Text--link card-link'
+      to={`/components/${data.link.toLowerCase()}`}
+      >
+        {data.name}
+      </Link>;
+    },
+  },
+  {
+    name: "design",
+    displayName: "Design",
+    width: "30%",
+    cellType: "STATUS_HINT",
+    sorting: false,
+    translate: (a) => {
+      const design = a.design;
+      return {
+        title: design,
+        statusAppearance:
+          design === "Available"
+            ? "success"
+            : design === "Unavailable"
+              ? "alert"
+              : "info",
+      };
+    },
+  },
+  {
+    name: "code",
+    displayName: "Code",
+    width: "30%",
+    cellType: "STATUS_HINT",
+    sorting: false,
+    translate: (a) => {
+      const code = a.code;
+      return {
+        title: code,
+        statusAppearance:
+          code === "Available"
+            ? "success"
+            : code === "Unavailable"
+              ? "alert"
+              : "info",
+      };
+    },
+  },
+];
+

package/docs/src/data/footer-items.yaml

@@ -0,0 +1,16 @@
+- label: © Innovaccer 2021
+
+- label: Terms of use
+  link: https://innovaccer.com/terms-of-use/
+
+- label: Privacy policy
+  link: https://innovaccer.com/privacy/
+
+- label: Careers
+  link: https://innovaccer.com/careers/
+
+- label: Github
+  link: https://github.com/innovaccer/design-system
+
+- label: How to contribute?
+  link: https://github.com/innovaccer/design-system/blob/master/CONTRIBUTING.md

package/docs/src/data/header-items.yaml

@@ -0,0 +1,20 @@
+- label: Introduction
+  link: /introduction/get-started/developers/
+
+- label: Foundations
+  link: /foundations/principles/
+
+- label: Content
+  link: /content/voice-and-tone-guidelines/tabs/voice-and-tone/
+
+- label: Components
+  link: /components/overview/tabs/all-components/
+
+- label: Patterns
+  link: /patterns/
+
+- label: Resources
+  link: /resources/
+
+- label: Storybook
+  link: https://innovaccer.github.io/design-system