@innovaccer/design-system 2.9.1 → 3.0.0-2

package/docs/gatsby-config.js

@@ -1,171 +0,0 @@
-const path = require('path');
-
-const remarkSlug = require(`remark-slug`);
-
-
-  const repositoryDefault = {
-    baseUrl: '',
-    subDirectory: '',
-    branch: 'main',
-  };
-
-  const {
-    isSearchEnabled = true,
-    withWebp = false,
-    mdxExtensions = ['.mdx', '.md'],
-    imageQuality = 75,
-    repository,
-    pngCompressionSpeed = 4, // default for gatsby-plugin-sharp
-    gatsbyRemarkPlugins = [],
-    remarkPlugins = [],
-    gatsbyPluginSharpOptions = {},
-    isServiceWorkerEnabled = false,
-  } = {};
-
-  const defaultRemarkPlugins = [
-    { resolve: `gatsby-remark-unwrap-images` },
-    { resolve: `gatsby-remark-smartypants` },
-    {
-      resolve: `gatsby-remark-images`,
-      options: {
-        maxWidth: 1152,
-        linkImagesToOriginal: false,
-        quality: imageQuality,
-        withWebp,
-        pngCompressionSpeed,
-        ...gatsbyPluginSharpOptions,
-      },
-    },
-    { resolve: `gatsby-remark-responsive-iframe` },
-    { resolve: `gatsby-remark-copy-linked-files` },
-    {
-      resolve: `gatsby-remark-prismjs`,
-      options: {
-        // Class prefix for <pre> tags containing syntax highlighting;
-        // defaults to 'language-' (e.g. <pre class="language-js">).
-        // If your site loads Prism into the browser at runtime,
-        // (e.g. for use with libraries like react-live),
-        // you may use this to prevent Prism from re-processing syntax.
-        // This is an uncommon use-case though;
-        // If you're unsure, it's best to use the default value.
-        classPrefix: "language-",
-        // This is used to allow setting a language for inline code
-        // (i.e. single backticks) by creating a separator.
-        // This separator is a string and will do no white-space
-        // stripping.
-        // A suggested value for English speakers is the non-ascii
-        // character '›'.
-        inlineCodeMarker: null,
-        // This lets you set up language aliases.  For example,
-        // setting this to '{ sh: "bash" }' will let you use
-        // the language "sh" which will highlight using the
-        // bash highlighter.
-        aliases: {},
-        // This toggles the display of line numbers globally alongside the code.
-        // To use it, add the following line in gatsby-browser.js
-        // right after importing the prism color scheme:
-        //  require("prismjs/plugins/line-numbers/prism-line-numbers.css")
-        // Defaults to false.
-        // If you wish to only show line numbers on certain code blocks,
-        // leave false and use the {numberLines: true} syntax below
-        showLineNumbers: false,
-        // If setting this to true, the parser won't handle and highlight inline
-        // code used in markdown i.e. single backtick code like `this`.
-        noInlineHighlight: false,
-        // This adds a new language definition to Prism or extend an already
-        // existing language definition. More details on this option can be
-        // found under the header "Add new language definition or extend an
-        // existing language" below.
-        languageExtensions: [
-          {
-            language: "superscript",
-            extend: "javascript",
-            definition: {
-              superscript_types: /(SuperType)/,
-            },
-            insertBefore: {
-              function: {
-                superscript_keywords: /(superif|superelse)/,
-              },
-            },
-          },
-        ],
-        // Customize the prompt used in shell output
-        // Values below are default
-        prompt: {
-          user: "root",
-          host: "localhost",
-          global: false,
-        },
-        // By default the HTML entities <>&'" are escaped.
-        // Add additional HTML escapes by providing a mapping
-        // of HTML entities and their escape value IE: { '}': '&#123;' }
-        escapeEntities: {},
-      },
-    },
-  ];
-
-  module.exports = {
-    siteMetadata: {
-      isSearchEnabled,
-      isServiceWorkerEnabled,
-      title: 'Gatsby Theme MDS',
-      description:
-        'Documentation site for using Innovaccer Masala Design System.',
-      keywords: 'gatsby,theme,MDS,masala,design,system, masala design system,style,guide,component,library,design system,styleguide',
-      lang: 'en',
-      repository: { ...repositoryDefault, ...repository },
-    },
-    plugins: [
-      {
-        resolve: `gatsby-source-filesystem`,
-        name: `Nav`,
-        options: {
-          path: path.resolve(`./src/data`),
-        },
-      },
-      {
-        resolve: `gatsby-source-filesystem`,
-        name: 'pages',
-        options: {
-          path: path.resolve(`./src/pages`),
-        },
-      },
-      {
-        resolve: `gatsby-source-filesystem`,
-        options: {
-          name: `images`,
-          path: `./static/images`,
-        },
-      },
-      `gatsby-plugin-image`,
-      `gatsby-plugin-sharp`,
-      `gatsby-transformer-sharp`,
-      `gatsby-transformer-yaml`,
-      {
-        resolve: `gatsby-plugin-mdx`,
-        options: {
-          extensions: mdxExtensions,
-          remarkPlugins: [remarkSlug],
-          gatsbyRemarkPlugins: [
-            ...defaultRemarkPlugins,
-            ...gatsbyRemarkPlugins,
-            `gatsby-remark-images`
-          ],
-          plugins: [ `gatsby-remark-images` ],
-          defaultLayouts: {
-            default: require.resolve('./src/components/templates/Default.js'),
-            home: require.resolve('./src/components/templates/Homepage.js'),
-          },
-        },
-      },
-    {
-      resolve: `gatsby-source-medium`,
-      options: {
-        username: `innovaccer-tech`,
-      },
-    },
-    `gatsby-transformer-json-key-value-to-array`
-    ]
-  }
-

package/docs/gatsby-node.js

@@ -1,75 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const mkdirp = require('mkdirp');
-
-exports.onPreBootstrap = ({ store, reporter }) => {
-  const { program } = store.getState();
-
-  const dirs = [
-    path.join(program.directory, 'src/images'),
-    path.join(program.directory, 'src/data'),
-  ];
-
-  dirs.forEach((dir) => {
-    if (!fs.existsSync(dir)) {
-      reporter.log(`creating the ${dir} directory`);
-      mkdirp.sync(dir);
-    }
-  });
-};
-
-// We need to provide the actual file that created a specific page to append links for EditLink.
-// We can't do page queries from MDX templates, so we'll add the page's relative path to context after it's created.
-// The context object **is** supplied to MDX templates through the pageContext prop.
-exports.onCreatePage = (
-  { page, actions, getNodesByType, ...rest },
-  pluginOptions
-) => {
-  // Don't override if it's already been provided
-  if (!page.context.MdxNode) {
-    // Find the MdxNode that created our page
-    const MdxNode = getNodesByType('Mdx').find(
-      ({ fileAbsolutePath }) => fileAbsolutePath === page.component
-    );
-    let frontmatter = {
-      ...page.context.frontmatter,
-    };
-
-    const { titleType = 'page' } = pluginOptions;
-    const { createPage, deletePage } = actions;
-    const [relativePagePath] = page.componentPath
-      .split('src/pages')
-      .splice('-1');
-
-    // Inject titles and descriptions for pages that don't include them
-    if (!frontmatter.title) {
-      const title = page.path
-        .split('/')
-        .filter((part) => part)
-        // .map((part) => startCase(part))
-        .join(' / ');
-
-      frontmatter = {
-        description: title,
-        ...frontmatter,
-        title,
-      };
-    }
-
-    if (MdxNode) {
-      Object.assign(MdxNode, { frontmatter });
-    }
-
-    deletePage(page);
-    createPage({
-      ...page,
-      context: {
-        ...page.context,
-        relativePagePath,
-        titleType,
-        frontmatter,
-        MdxNode,
-      },
-    });
-  }
-};

package/docs/index.js

@@ -1 +0,0 @@
-// noop

package/docs/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "docs",
-  "version": "1.0.0",
-  "description": "<p align=\"center\">   <a href=\"#\">     <img alt=\"\" src=\"https://innovaccer.com/static/image/site-logo/innovaccer-logo-black.svg\" width=\"20%\" />   </a> </p> <h1 align=\"center\">   Masala Design System </h1> <h3 align=\"center\">   Gatsby site for Masala Design system documentation. </h3>",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "./tools/develop.sh",
-    "build": "./tools/build.sh",
-    "clean": "gatsby clean"
-  },
-  "dependencies": {
-    "gatsby": "^3.6.1",
-    "fs-extra": "10.0.0",
-    "puppeteer-core": "10.2.0",
-    "gatsby-remark-heading-slug": "^0.2.0",
-    "gatsby-remark-prismjs": "^5.9.0",
-    "gatsby-source-medium": "^3.14.0",
-    "gatsby-transformer-json-key-value-to-array": "0.0.1",
-    "lodash.throttle": "^4.1.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.8.6",
-    "react-helmet": "^6.1.0",
-    "@fontsource/nunito": "^4.5.0",
-    "@fontsource/nunito-sans": "^4.5.0",
-    "@fontsource/roboto-mono": "^4.5.0",
-    "@innovaccer/design-system": "2.7.0",
-    "@mdx-js/mdx": "^1.5.5",
-    "@mdx-js/react": "^1.5.5",
-    "@storybook/theming": "^6.3.6",
-    "@types/lz-string": "^1.3.34",
-    "gatsby-plugin-image": "^1.12.0",
-    "gatsby-plugin-mdx": "^2.12.0",
-    "gatsby-plugin-sharp": "^3.12.0",
-    "gatsby-remark-copy-linked-files": "^2.2.1",
-    "gatsby-remark-images": "^3.3.33",
-    "gatsby-remark-responsive-iframe": "^2.3.1",
-    "gatsby-remark-smartypants": "^2.2.1",
-    "gatsby-remark-unwrap-images": "^1.0.1",
-    "gatsby-source-filesystem": "^3.12.0",
-    "gatsby-transformer-sharp": "^3.12.0",
-    "gatsby-transformer-yaml": "^2.3.1",
-    "lz-string": "^1.4.4",
-    "markdown-to-jsx": "^7.1.3",
-    "polished": "^4.1.3",
-    "react-live": "^2.3.0",
-    "react-popper": "1.3.7",
-    "react-syntax-highlighter": "^15.4.4",
-    "remark-slug": "^6.1.0"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT"
-}

package/docs/src/components/Colors/Colors.css

@@ -1,19 +0,0 @@
-.container {
-  border-radius: var(--spacing-m);
-}
-
-.copy-clipboard {
-  color: var(--white);
-  background: var(--inverse-light);
-  padding: var(--spacing-m);
-  border-radius: var(--spacing-m);
-}
-
-.overflow-visible {
-  overflow: visible;
-  word-break: break-word;
-}
-
-.underline {
-  text-decoration: underline;
-}

package/docs/src/components/Colors/Colors.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardBody,
-  Tooltip,
-  Paragraph,
-  Column,
-} from '@innovaccer/design-system';
-import './Colors.css';
-
-const Colors = (props) => {
-  const { colorData, toggleToast } = props;
-  const [isHover, setIsHover] = React.useState();
-  const ref = React.createRef();
-  return colorData.map((elt) => {
-    return (
-      <Column size='4'>
-        <Card
-          className='mr-7 mt-7 overflow-visible'
-          shadow='none'
-          ref={ref}
-        >
-          <div className='px-6'>
-            <div
-              style={{
-                backgroundColor: elt.backgroundColor,
-              }}
-              className='my-6 container w-auto'
-            ></div>
-            <Tooltip
-              tooltip='Copy to clipboard'
-              appendToBody={false}
-              boundaryElement={ref}
-            >
-              <Paragraph
-                onClick={() => {
-                  navigator.clipboard.writeText(
-                    elt.hexCode
-                  );
-                  toggleToast(`Copied "${elt.hexCode}"`);
-                }}
-                className='cursor-pointer'
-                onMouseEnter={() => setIsHover(elt.name)}
-                onMouseLeave={() => setIsHover()}
-              >
-                {elt.name}
-              </Paragraph>
-            </Tooltip>
-            <div className='d-flex mb-7 mt-5'>
-              <div className='mr-auto'>
-                <Paragraph
-                  appearance='subtle'
-                  className='my-2'
-                >
-                  Hex
-                </Paragraph>
-                <Paragraph
-                  className={`${
-                    isHover === elt.name ? 'underline' : ''
-                  }`}
-                >
-                  {elt.hexCode}
-                </Paragraph>
-              </div>
-              <div>
-                <Paragraph
-                  appearance='subtle'
-                  className='my-2'
-                >
-                  RGB
-                </Paragraph>
-                <Paragraph>{elt.colorCode}</Paragraph>
-              </div>
-            </div>
-          </div>
-        </Card>
-      </Column>
-    );
-  });
-};
-
-export default Colors;

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

@@ -1,75 +0,0 @@
-import React from 'react';
-import {
-  Heading,
-  Tabs,
-  Tab,
-  Paragraph
-} from '@innovaccer/design-system';
-import { navigate } from 'gatsby';
-
-const ComponentsContainer = ({
-  children,
-  pageTitle,
-  relativePagePath,
-  tabs,
-  pageDescription,
-  frontmatter
-}) => {
-  const page = relativePagePath.split('/');
-  const pageName = page[page.length - 1].split('.')[0];
-  const isSiblingTab = relativePagePath.split('.')[0] === '/' + pageTitle.replace(/\s/g, '');
-  const tabsList = isSiblingTab ? frontmatter?.tabs : tabs;
-
-  const getTabSlug = (tabIndex) => {
-    const tabName = tabsList[tabIndex];
-    let tabSlug = '';
-    if (tabName.length) {
-      tabSlug = tabName.toLowerCase().replace(/\s/g, '-');
-    }
-    return tabSlug;
-  };
-
-  const activeTab =
-    tabsList && tabsList.length
-      ? tabsList.findIndex(
-        (tab, index) =>
-          getTabSlug(index) === pageName.toLowerCase()
-      )
-      : '';
-
-  const [activeIndex, setActiveIndex] = React.useState(
-    activeTab || 0
-  );
-
-  const onTabChangeHandler = (tabIndex) => {
-    const nextTabSlug = getTabSlug(tabIndex);
-    const pagePath = relativePagePath.split('/');
-    const pages = pagePath.slice(0, pagePath.length - 1);
-    const path = `${pages.join('/')}/${nextTabSlug}/`;
-    navigate(path, { state: { animation: false }, });
-    setActiveIndex(tabIndex);
-  };
-
-  return (
-    <>
-      <Heading size='xl' className='my-5'>{isSiblingTab ? frontmatter?.title : pageTitle}</Heading>
-      <Paragraph>{isSiblingTab ? frontmatter?.description : pageDescription}</Paragraph>
-
-      {tabsList && tabsList.length && (
-        <div className='mb-7 mt-4'>
-          <Tabs
-            activeIndex={activeIndex}
-            onTabChange={onTabChangeHandler}
-          >
-            {tabsList.map((tab, index) => (
-              <Tab label={tab} key={index}></Tab>
-            ))}
-          </Tabs>
-        </div>
-      )}
-      {children}
-    </>
-  );
-};
-
-export default ComponentsContainer;

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

@@ -1,114 +0,0 @@
-import React from 'react';
-import {
-  Paragraph,
-  Heading,
-  Tabs,
-  Tab,
-  Button,
-} from '@innovaccer/design-system';
-import { navigate } from 'gatsby';
-import { useLogoItems } from '../../util/Logos';
-
-const Container = ({
-  children,
-  pageTitle,
-  tabs,
-  relativePagePath,
-  pageDescription,
-  logos,
-  frontmatter
-}) => {
-  const nodes = useLogoItems();
-  const page = relativePagePath.split('/');
-  const pageName = page[page.length - 1].split('.')[0];
-
-  const isSiblingTab = relativePagePath.split('.')[0] === '/' + pageTitle.replace(/\s/g, '');
-  const tabsList = isSiblingTab ? frontmatter?.tabs : tabs;
-  const logoList = isSiblingTab ? frontmatter?.logos : logos;
-
-  const getTabSlug = (tabIndex) => {
-    const tabName = tabsList[tabIndex];
-    let tabSlug = '';
-    if (tabName.length) {
-      tabSlug = tabName.toLowerCase().replace(/\s/g, '-');
-    }
-    return tabSlug;
-  };
-
-  const activeTab =
-    tabsList && tabsList.length
-      ? tabsList.findIndex(
-        (tab, index) =>
-          getTabSlug(index) === pageName.toLowerCase()
-      )
-      : '';
-
-  const [activeIndex, setActiveIndex] = React.useState(
-    activeTab || 0
-  );
-
-  const onTabChangeHandler = (tabIndex) => {
-    const nextTabSlug = getTabSlug(tabIndex);
-    const pagePath = relativePagePath.split('/');
-    const pages = pagePath.slice(0, pagePath.length - 1);
-    const path = `${pages.join('/')}/${nextTabSlug}/`;
-    navigate(path, { state: { animation: false }, });
-    setActiveIndex(tabIndex);
-  };
-
-  const downloadAllLogos = () => {
-    const images = logoList.map((logo) => {
-      const filteredGatsbyImage = nodes.filter((img) =>
-        img.fluid.src.includes(logo)
-      );
-      if (filteredGatsbyImage.length) {
-        return {
-          name: logo,
-          src: filteredGatsbyImage[0].fluid.src,
-        };
-      }
-    });
-    images.map((image) => {
-      let element = document.createElement('a');
-      element.href = image.src;
-      element.setAttribute('download', image.name);
-      document.body.appendChild(element);
-      element.click();
-      document.body.removeChild(element);
-    });
-  };
-
-  return (
-    <>
-      <Heading size='xl' className='my-5'>
-        {isSiblingTab ? frontmatter?.title : pageTitle}
-      </Heading>
-      {logoList && logoList.length && (
-        <Button
-          className='download-logos'
-          icon='download'
-          onClick={downloadAllLogos}
-        >
-          Download all
-        </Button>
-      )}
-      {tabsList && tabsList.length && (
-        <>
-          <Paragraph>{isSiblingTab ? frontmatter?.description : pageDescription}</Paragraph>
-          <Tabs
-            activeIndex={activeIndex}
-            onTabChange={onTabChangeHandler}
-            className='mb-6 mt-4'
-          >
-            {tabsList.map((tab) => (
-              <Tab label={tab}></Tab>
-            ))}
-          </Tabs>
-        </>
-      )}
-      {children}
-    </>
-  );
-};
-
-export default Container;

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

@@ -1,3 +0,0 @@
-import Container from './Container';
-
-export default Container;

package/docs/src/components/Footer/Footer.css

@@ -1,7 +0,0 @@
-.link {
-  font-weight: var(--font-weight-normal);
-}
-
-.link:hover {
-  border-bottom: none !important;
-}

package/docs/src/components/Footer/Footer.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Link, Text } from '@innovaccer/design-system';
-import { useFooterItems } from '../../util/FooterItems';
-import './Footer.css';
-
-const Footer = ({ relativePagePath }) => {
-  const items = useFooterItems();
-  return (
-    <div
-      className={`d-flex w-100 px-12 py-7 bg-secondary-lightest position-sticky align-items-center ${relativePagePath === '/home' ? 'justify-content-center' : ''}`}>
-      <div>
-        {items.map(({ link, label }, index) => {
-          let isExternal;
-          if (link) {
-            isExternal =
-              link.startsWith('http://') ||
-              link.startsWith('https://');
-          }
-          return (
-            <Link
-              key={index}
-              href={link}
-              className={`link ${index > 0 ? 'mr-7' : 'mr-8'} `}
-              target={isExternal && '_blank'}
-              disabled={index === 0}
-            >
-              <Text
-                appearance={index === 0 ? 'subtle' : 'default'}
-              >
-                {label}
-              </Text>
-            </Link>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default Footer;

package/docs/src/components/Header/Header.css

@@ -1,32 +0,0 @@
-.header {
-  z-index: 1000;
-  top: 0;
-  align-items: center;
-  border-bottom: var(--border);
-  padding-top: var(--spacing-s);
-  padding-bottom: 1px;
-}
-
-.HeaderLink:hover {
-  border-bottom: none !important;
-}
-
-.HeaderLink:focus {
-  box-shadow: none !important;
-}
-
-.HeaderLink {
-  text-decoration: none;
-  font-weight: var(--font-weight-normal);
-  padding: var(--spacing) 0;
-  margin-left: var(--spacing-3);
-  line-height: 0;
-}
-
-.HeaderLink--active {
-  color: var(--text-link);
-}
-
-.HeaderLink--default {
-  color: var(--inverse);
-}