@innovaccer/design-system 2.13.2 → 2.13.4-1

package/docs/.eslintrc.json

@@ -1 +1,32 @@
-{}
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [ "jsx-a11y", "prettier"],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended",
+      "plugin:jsx-a11y/recommended"
+    ],
+    "settings": { "react": { "version": "detect" } },
+    "globals": { "_": "readonly", "__": "readonly" },
+    "rules": {
+      "react/prop-types": "off",
+      "react/no-unescaped-entities": "off",
+      "no-undef": "off",
+      "jsx-a11y/alt-text": "off",
+      "no-inner-declarations": "off",
+      "react/no-children-prop": "off",
+      "jsx-a11y/iframe-has-title": "off", 
+      "react/jsx-key": "off",
+      "react/display-name": "off",
+      "jsx-a11y/click-events-have-key-events": "off",
+      "jsx-a11y/no-noninteractive-element-interactions": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/ban-ts-comment": "off",      
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/no-unused-vars": "off"
+    }
+  }
+  

package/docs/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "printWidth": 120,
+    "tabWidth": 2
+}

package/docs/README.md

@@ -29,3 +29,17 @@ Start development server
 ```bash
 npm run dev
 ```
+
+### Run Cypress Test
+
+Run cypress in CLI
+
+```bash
+npm run cypress
+```
+
+Launch cypress app
+
+```bash
+npm run cypress:open
+```

package/docs/cypress/e2e/main.cy.js

@@ -0,0 +1,35 @@
+const hostURL = process.env.HOST_URL || "http://localhost:8000"
+
+describe('Tests for search bar functionality', () => {
+    it('visit docs main page', () => {
+        cy.visit(hostURL)
+    })
+
+    it('focus on search bar',() => {
+        cy.get('input[name="input"]').type(`{enter}`)
+        cy.get('.Popover.Search-result').contains('Tip: Press ’cmd + k’ to quickly start searching.')
+    })
+
+    it('invalid search',() => {
+        let falseQuery = 'abc'
+        cy.get('input[name="input"]').type(`${falseQuery}{enter}`)
+        cy.get('.Popover.Search-result').contains(`No results found for '${falseQuery}'`)
+    })    
+
+    it('valid search',() => {
+        let searchQuery = 'button'
+        cy.get('input[name="input"]').clear().type(`${searchQuery}{enter}`)
+    })
+})
+
+describe('Tests for nav bar and footer', () => {
+    it('visit docs main page', () => {
+        cy.visit(hostURL)
+    })
+
+    it('check if page exist for all links',() => {
+        cy.get('a').each(page => {
+            cy.request(page.prop('href'))
+        })
+    })
+})

package/docs/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/docs/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/docs/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/docs/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

package/docs/package.json

@@ -11,7 +11,13 @@
     "deploy": "gatsby-plugin-s3 deploy --yes && aws cloudfront create-invalidation --distribution-id E2FYU8KR1XGDBZ --paths \"/*\"",
     "clean": "gatsby clean",
     "extract:dev": "export STORYBOOK_HOST='http://localhost:5000/iframe.html?id=components-avatargroup-all--all&args=&viewMode=story' && node ./tools/extract.js",
-    "extract": "node ./tools/extract.js"
+    "extract": "node ./tools/extract.js",
+    "cypress:open": "cypress open",
+    "cypress": "cypress run",
+    "lint:check": "eslint ./src --ext .tsx,.ts,.js",
+    "lint": "npm run lint:check -- --fix",
+    "prettier:check": "prettier --config ./.prettierrc --check",
+    "prettier": "prettier --config ./.prettierrc --write 'src/**/*.css'"
   },
   "dependencies": {
     "@fontsource/nunito": "^4.5.0",
@@ -56,5 +62,13 @@
   },
   "keywords": [],
   "author": "",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "cypress": "^10.3.1",
+    "prettier": "^2.3.2",
+    "eslint": "^7.31.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^4.0.0"
+  
+  }
 }

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

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  Card,
-  CardBody,
-  Tooltip,
-  Paragraph,
-  Column,
-} from '@innovaccer/design-system';
+import { Card, CardBody, Tooltip, Paragraph, Column } from '@innovaccer/design-system';
 import './Colors.css';
 
 const Colors = (props) => {
@@ -14,59 +8,37 @@ const Colors = (props) => {
   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'>
+      <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'
+              className="my-6 container w-auto"
             ></div>
-            <Tooltip
-              tooltip='Copy to clipboard'
-              appendToBody={false}
-              boundaryElement={ref}
-            >
+            <Tooltip tooltip="Copy to clipboard" appendToBody={false} boundaryElement={ref}>
               <Paragraph
                 onClick={() => {
-                  navigator.clipboard.writeText(
-                    elt.hexCode
-                  );
+                  navigator.clipboard.writeText(elt.hexCode);
                   toggleToast(`Copied "${elt.hexCode}"`);
                 }}
-                className='cursor-pointer'
+                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'
-                >
+            <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>
+                <Paragraph className={`${isHover === elt.name ? 'underline' : ''}`}>{elt.hexCode}</Paragraph>
               </div>
               <div>
-                <Paragraph
-                  appearance='subtle'
-                  className='my-2'
-                >
+                <Paragraph appearance="subtle" className="my-2">
                   RGB
                 </Paragraph>
                 <Paragraph>{elt.colorCode}</Paragraph>

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

@@ -1,20 +1,8 @@
 import React from 'react';
-import {
-  Heading,
-  Tabs,
-  Tab,
-  Paragraph
-} from '@innovaccer/design-system';
+import { Heading, Tabs, Tab, Paragraph } from '@innovaccer/design-system';
 import { navigate } from 'gatsby';
 
-const ComponentsContainer = ({
-  children,
-  pageTitle,
-  relativePagePath,
-  tabs,
-  pageDescription,
-  frontmatter
-}) => {
+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, '');
@@ -30,37 +18,29 @@ const ComponentsContainer = ({
   };
 
   const activeTab =
-    tabsList && tabsList.length
-      ? tabsList.findIndex(
-        (tab, index) =>
-          getTabSlug(index) === pageName.toLowerCase()
-      )
-      : '';
+    tabsList && tabsList.length ? tabsList.findIndex((tab, index) => getTabSlug(index) === pageName.toLowerCase()) : '';
 
-  const [activeIndex, setActiveIndex] = React.useState(
-    activeTab || 0
-  );
+  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 }, });
+    navigate(path, { state: { animation: false } });
     setActiveIndex(tabIndex);
   };
 
   return (
     <>
-      <Heading size='xl' className='my-5'>{isSiblingTab ? frontmatter?.title : pageTitle}</Heading>
+      <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}
-          >
+        <div className="mb-7 mt-4">
+          <Tabs activeIndex={activeIndex} onTabChange={onTabChangeHandler}>
             {tabsList.map((tab, index) => (
               <Tab label={tab} key={index}></Tab>
             ))}

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

@@ -1,23 +1,9 @@
 import React from 'react';
-import {
-  Paragraph,
-  Heading,
-  Tabs,
-  Tab,
-  Button,
-} from '@innovaccer/design-system';
+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 Container = ({ children, pageTitle, tabs, relativePagePath, pageDescription, logos, frontmatter }) => {
   const nodes = useLogoItems();
   const page = relativePagePath.split('/');
   const pageName = page[page.length - 1].split('.')[0];
@@ -36,31 +22,22 @@ const Container = ({
   };
 
   const activeTab =
-    tabsList && tabsList.length
-      ? tabsList.findIndex(
-        (tab, index) =>
-          getTabSlug(index) === pageName.toLowerCase()
-      )
-      : '';
+    tabsList && tabsList.length ? tabsList.findIndex((tab, index) => getTabSlug(index) === pageName.toLowerCase()) : '';
 
-  const [activeIndex, setActiveIndex] = React.useState(
-    activeTab || 0
-  );
+  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 }, });
+    navigate(path, { state: { animation: false } });
     setActiveIndex(tabIndex);
   };
 
   const downloadAllLogos = () => {
     const images = logoList.map((logo) => {
-      const filteredGatsbyImage = nodes.filter((img) =>
-        img.fluid.src.includes(logo)
-      );
+      const filteredGatsbyImage = nodes.filter((img) => img.fluid.src.includes(logo));
       if (filteredGatsbyImage.length) {
         return {
           name: logo,
@@ -80,26 +57,18 @@ const Container = ({
 
   return (
     <>
-      <Heading size='xl' className='my-5'>
+      <Heading size="xl" className="my-5">
         {isSiblingTab ? frontmatter?.title : pageTitle}
       </Heading>
       {logoList && logoList.length && (
-        <Button
-          className='download-logos'
-          icon='download'
-          onClick={downloadAllLogos}
-        >
+        <Button className="download-logos" icon="download" onClick={downloadAllLogos}>
           Download all
         </Button>
       )}
-      <Paragraph className='mb-6'>{isSiblingTab ? frontmatter?.description : pageDescription}</Paragraph>
+      <Paragraph className="mb-6">{isSiblingTab ? frontmatter?.description : pageDescription}</Paragraph>
       {tabsList && tabsList.length && (
         <>
-          <Tabs
-            activeIndex={activeIndex}
-            onTabChange={onTabChangeHandler}
-            className='mb-6 '
-          >
+          <Tabs activeIndex={activeIndex} onTabChange={onTabChangeHandler} className="mb-6 ">
             {tabsList.map((tab, index) => (
               <Tab label={tab} key={index}></Tab>
             ))}

package/docs/src/components/ErrorBoundary.js

@@ -20,11 +20,17 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI
-      return <Message className="my-7" appearance="alert" title="Something is broken." description="Hold tight, we are working to get it up for you to interact with." />
-
+      return (
+        <Message
+          className="my-7"
+          appearance="alert"
+          title="Something is broken."
+          description="Hold tight, we are working to get it up for you to interact with."
+        />
+      );
     }
 
-    return this.props.children; 
+    return this.props.children;
   }
 }
 

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

@@ -7,16 +7,21 @@ 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' : ''}`}>
+      className={`d-flex w-100 px-11 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://');
+            isExternal = link.startsWith('http://') || link.startsWith('https://');
           }
-          return (
+          return !link ? (
+            <Text appearance={'subtle'} className={'mr-8'}>
+              {label}
+            </Text>
+          ) : (
             <Link
               key={index}
               href={link}
@@ -24,11 +29,7 @@ const Footer = ({ relativePagePath }) => {
               target={isExternal && '_blank'}
               disabled={index === 0}
             >
-              <Text
-                appearance={index === 0 ? 'subtle' : 'default'}
-              >
-                {label}
-              </Text>
+              <Text appearance={index === 0 ? 'subtle' : 'default'}>{label}</Text>
             </Link>
           );
         })}