@innovaccer/design-system 2.9.1 → 3.0.0-2

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

@@ -1,146 +0,0 @@
-/* PrismJS 1.16.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+graphql+jsx+regex */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-.npm__react-simple-code-editor__textarea {
-  font-family: "Roboto Mono" !important;
-}
-
-code[class*="language-"],
-pre[class*="language-"] {
-  background: none;
-  font-family: "Roboto Mono";
-  font-size: 1em;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-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 {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: 0.7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #9a6e3a;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function,
-.token.class-name {
-  color: #dd4a68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}

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

@@ -1,53 +0,0 @@
-export const theme = {
-  base: 'light',
-
-  colorPrimary: '#0000001a',
-  colorSecondary: 'deepskyblue',
-
-  // UI
-  appBg: 'white',
-  appContentBg: 'white',
-  appBorderColor: '#0000001a',
-  appBorderRadius: 4,
-
-  // Typography
-  typography: {
-    fonts: {
-      mono: 'Roboto mono',
-    },
-  },
-  background: {
-    content: 'white',
-  },
-  animation: 'ease-out',
-  input: '',
-  color: {
-    defaultText: '#151414',
-    secondary: 'black',
-    negative: 'black',
-  },
-  fonts: {
-    base: '',
-  },
-  fontBase: '"Nunito Sans", "Open Sans", sans-serif',
-  fontCode: 'Roboto mono',
-
-  // Text colors
-  textColor: 'black',
-  textInverseColor: 'rgba(255,255,255,0.9)',
-
-  // Toolbar default and active colors
-  barTextColor: 'silver',
-  barSelectedColor: 'black',
-  barBg: 'white',
-
-  // Form colors
-  inputBg: 'white',
-  inputBorder: 'silver',
-  inputTextColor: 'black',
-  inputBorderRadius: 4,
-  brand: 'Test',
-  code: '123',
-  easing: '',
-  layoutMargin: '',
-};

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

@@ -1,44 +0,0 @@
-export interface JsDocParam {
-  name: string;
-  description?: string;
-}
-
-export interface JsDocReturns {
-  description?: string;
-}
-
-export interface JsDocTags {
-  params?: JsDocParam[];
-  returns?: JsDocReturns;
-}
-
-export interface PropSummaryValue {
-  summary: string;
-  detail?: string;
-  required?: boolean;
-}
-
-export type PropType = PropSummaryValue;
-export type PropDefaultValue = PropSummaryValue;
-
-export interface TableAnnotation {
-  type: PropType;
-  jsDocTags?: JsDocTags;
-  defaultValue?: PropDefaultValue;
-  category?: string;
-}
-
-export interface ArgType {
-  name?: string;
-  description?: string;
-  defaultValue?: any;
-  [key: string]: any;
-}
-
-export interface ArgTypes {
-  [key: string]: ArgType;
-}
-
-export interface Args {
-  [key: string]: any;
-}

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

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

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

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

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

@@ -1,18 +0,0 @@
-import React from 'react';
-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} />
-      }
-      {children}
-    </div>
-  );
-};
-
-export default IconWrapper;

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

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

package/docs/src/components/Rules/Rules.css

@@ -1,17 +0,0 @@
-.Rules-Container {
-  background-color: var(--secondary-lightest);
-  border-radius: var(--spacing-m);
-  pointer-events: none;
-  margin-top: var(--spacing-2);
-  margin-bottom: var(--spacing-4);
-}
-
-.Rules-Dont {
-  border-top: var(--spacing-s) solid var(--alert);
-  border-top-right-radius: var(--spacing-m);
-}
-
-.Rules-Do {
-  border-top: var(--spacing-s) solid var(--success);
-  border-top-left-radius: var(--spacing-m);
-}

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

@@ -1,39 +0,0 @@
-import React from 'react';
-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>
-  );
-};
-
-export default Rules;

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

@@ -1,37 +0,0 @@
-.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

@@ -1,126 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,38 +0,0 @@
-/**
- * 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

@@ -1,101 +0,0 @@
-.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;
-}
-
-.inner-left-container {
-  max-width: 888px;
-}

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

@@ -1,23 +0,0 @@
-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, tabs, logos, showMobile=false } = frontmatter;
-  return (
-    <Layout
-      pageTitle={title}
-      titleType={titleType}
-      pageDescription={description}
-      pageKeywords={keywords}
-      relativePagePath={relativePagePath}
-      tabs={tabs}
-      logos={logos}
-      showMobile={showMobile}
-      {...rest}
-    >
-      {children}
-    </Layout>
-  );
-};