@innovaccer/design-system 2.7.0 → 2.9.0-0

package/docs/src/components/Layout.js

@@ -0,0 +1,291 @@
+/* eslint-disable import/no-unresolved */
+import React, { useState } from 'react';
+import '@fontsource/nunito-sans';
+import {
+  Row,
+  Column,
+  Heading,
+  Button,
+  Toast,
+} from '@innovaccer/design-system';
+import LeftNav from './LeftNav';
+import TableOfContent from './TableOfContent/TableOfContent';
+import Header from './Header';
+import Container from './Container';
+import ComponentsContainer from './Container/ComponentsContainer';
+import { MDXProvider } from "@mdx-js/react";
+import * as MDSComponents from '@innovaccer/design-system';
+import Meta from './Meta';
+import './css/style.css';
+import PropsTable from './PropsTable/index';
+import Rules from './Rules/Rules';
+import DOs from './Rules/DOs';
+import DONTs from './Rules/DONTs';
+import InlineMessage from './Rules/InlineMessage';
+import IconWrapper from './Rules/IconWrapper';
+import Footer from './Footer/Footer';
+import ProductLogos from './Logos/Logos';
+import ProductColors from './Colors/Colors';
+import { useGetStorybookData } from '../util/StorybookData';
+import { ArgsTable } from './PropsTable/Table';
+import Markdown from 'markdown-to-jsx';
+import { useFrontmatter } from '../util/Frontmatter';
+
+const copyToClipboard = (str) => {
+  let codeBlock = '';
+  if (Object.keys(str).length > 0) {
+    const element = str.props.children;
+    if (Array.isArray(element) && element.length) {
+      element.map((elt) => {
+        if (typeof elt === 'object') {
+          codeBlock = codeBlock + elt.props.children;
+        } else {
+          codeBlock = codeBlock + elt;
+        }
+      });
+    } else {
+      codeBlock = str.props.children;
+    }
+  }
+  navigator.clipboard.writeText(codeBlock);
+};
+
+const Code = ({ children, ...rest }) => {
+  return (
+    <>
+      <div {...rest}>{children}</div>
+      <Button
+        icon='copy'
+        className='ml-auto p-0'
+        onClick={() => copyToClipboard(children)}
+      />
+    </>
+  );
+};
+
+const List = ({ children, ...rest }) => {
+  return (
+    <div className='list'>
+      {children}
+    </div>
+  )
+}
+
+const leftMenuList = [
+  {
+    title: 'Gatsby Theme MDS'
+  }
+];
+
+const Layout = ({
+  children,
+  titleType,
+  pageTitle,
+  pageDescription,
+  pageKeywords,
+  relativePagePath,
+  component,
+  tabs,
+  logos,
+  showMobile,
+  ...rest
+}) => {
+  const is404 = children && children.key === null;
+  const [isToastActive, setIsToastActive] = useState(false);
+  const [toastTitle, setToastTitle] = useState('');
+  const frontmatter = useFrontmatter(relativePagePath);
+
+  function getJsxCode(name) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const componentData = useGetStorybookData(name);
+
+    const jsxCode = componentData && componentData.parameters
+      ? componentData.parameters.docs.docPage?.customCode ||
+      componentData.parameters.storySource.source
+      : '';
+    return jsxCode;
+  }
+
+  function getPropTableData(name) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const componentData = useGetStorybookData(name);
+
+    const jsxCode = componentData
+      ? componentData.parameters.argTypes
+      : '';
+    return jsxCode;
+  }
+
+  const Preview = ({ name }) => {
+    return (
+      <div>
+        <PropsTable
+          componentData={getJsxCode(name)}
+        />
+      </div>
+    );
+  };
+
+  const A11yBlock = ({ name }) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const componentData = useGetStorybookData(name);
+    const a11yProps = componentData && componentData.parameters.docs.docPage?.a11yProps;
+    return (
+      <div className="mb-8">
+        {a11yProps && <Markdown className="A11y-markdown">{a11yProps}</Markdown>}
+      </div>
+    );
+  }
+
+  const PreviewWithPropTable = ({ name }) => {
+    return (
+      <div className="overflow-x-scroll">
+        <ArgsTable rows={getPropTableData(name)} />
+      </div>
+    );
+  };
+
+  const toggleToast = (name) => {
+    setIsToastActive(true);
+    setToastTitle(name);
+    setTimeout(() => setIsToastActive(false), 1500);
+  }
+
+  const Logos = ({ children, logoData, ...rest }) => {
+    return (
+      <ProductLogos
+        logoData={logoData}
+        toggleToast={toggleToast}
+      />
+    );
+  };
+
+  const Rectangle = ({ name, ...rest }) => {
+    return (
+      <div className='rectangle'>{name}</div>
+    );
+  };
+
+  const Colors = ({ children, colorData, ...rest }) => {
+    return (
+      <ProductColors
+        colorData={colorData}
+        toggleToast={toggleToast}
+      />
+    );
+  };
+
+  const DSComponents = {
+    ...MDSComponents,
+    pre: Code,
+    Preview: Preview,
+    PreviewWithPropTable: PreviewWithPropTable,
+    A11yBlock: A11yBlock,
+    Rules,
+    DOs,
+    DONTs,
+    InlineMessage,
+    IconWrapper,
+    h1: (props) => <Heading size='xxl' {...props} />,
+    h2: (props) => <Heading size='xl' {...props} />,
+    h3: (props) => <Heading size='l' {...props} />,
+    h4: (props) => <Heading size='m' {...props} />,
+    h5: (props) => <Heading size='s' {...props} />,
+    ul: List,
+    Logos: (props) => <Logos {...props} />,
+    Rectangle: (props) => <Rectangle {...props} />,
+    Colors: (props) => <Colors {...props} />,
+  };
+
+  const showAnimation = () => {
+    //show animation for only first tab or pages without tabs
+
+    const { tabs } = frontmatter;
+    const name = relativePagePath.slice(relativePagePath.lastIndexOf('/') + 1, relativePagePath.lastIndexOf('.mdx'));
+    if (tabs?.length && name !== tabs[0].toLowerCase().split(' ').join('-')) {
+      return false;
+    }
+    return true;
+  }
+
+  return (
+    <>
+      <Meta
+        titleType={titleType}
+        pageTitle={pageTitle}
+        pageDescription={pageDescription}
+        pageKeywords={pageKeywords}
+      />
+      <Header
+        leftMenuList={leftMenuList}
+        relativePagePath={relativePagePath}
+      />
+      <Row style={{ height: 'calc(100vh - 48px)' }}>
+        <LeftNav
+          is404Page={is404}
+          relativePagePath={relativePagePath}
+          pageTitle={pageTitle}
+          showMobile={showMobile}
+          frontmatter={frontmatter}
+        />
+        <Column className={`${showAnimation() ? "page-animation" : ''} page-scroll h-100`}>
+          <Row>
+            <Column className="px-12 py-8 min-vh-100" size={9}>
+              {!relativePagePath.includes('components') && (
+                <Container
+                  pageTitle={pageTitle}
+                  relativePagePath={relativePagePath}
+                  tabs={tabs}
+                  pageDescription={pageDescription}
+                  logos={logos}
+                  frontmatter={frontmatter}
+                >
+                  <MDXProvider components={DSComponents}>
+                    {children}
+                  </MDXProvider>
+                </Container>
+              )}
+              {relativePagePath.includes('components') && (
+                <ComponentsContainer
+                  pageTitle={pageTitle}
+                  relativePagePath={relativePagePath}
+                  component={component}
+                  tabs={tabs}
+                  pageDescription={pageDescription}
+                  frontmatter={frontmatter}
+                >
+                  <MDXProvider components={DSComponents}>
+                    {children}
+                  </MDXProvider>
+                </ComponentsContainer>
+              )}
+            </Column>
+
+            <Column
+              size={3}
+              className="pb-6 in-page-nav position-sticky"
+            >
+              <TableOfContent
+                is404Page={is404}
+                relativePagePath={relativePagePath}
+                pageTitle={pageTitle}
+                location={rest.location}
+              />
+            </Column>
+          </Row>
+          {isToastActive && (
+            <Toast
+              appearance='success'
+              title={toastTitle}
+              className='position-fixed ml-5 toast'
+              onClose={() => setIsToastActive(false)}
+            />
+          )}
+          <Footer relativePagePath={relativePagePath} />
+        </Column>
+      </Row>
+    </>
+  );
+};
+
+export default Layout;

package/docs/src/components/LeftNav/LeftNav.js

@@ -0,0 +1,101 @@
+import React, { useEffect } from 'react';
+import { useNavItems } from '../../util/NavItems';
+import {
+  VerticalNav,
+  Subheading,
+  Button,
+} from '@innovaccer/design-system';
+import { navigate } from 'gatsby';
+import { MOBILE } from '../../util/constants';
+
+const isBrowser = typeof window !== 'undefined';
+
+const LeftNav = (props) => {
+  const { relativePagePath, showMobile, frontmatter } = props;
+  const navItems = useNavItems(relativePagePath);
+  const showMenuButtons = showMobile || frontmatter?.showMobile;
+  const [active, setActive] = React.useState();
+
+  function getActiveNavItem() {
+    if (isBrowser && window.location.pathname && frontmatter.tabs) {
+
+      const url = window.location.pathname.split('/');
+      const activeMenu = navItems.filter(({ link }) => {
+        return link && link.includes(url[1] + '/' + url[2]);
+      });
+      return activeMenu[0]?.link;
+
+    } else {
+      return window.location.pathname;
+    }
+  }
+
+  useEffect(() => {
+    const active = isBrowser ? getActiveNavItem() : '';
+    const obj = { link: active }
+    setActive(obj);
+  }, []);
+
+  const onClickHandler = (menu) => {
+    navigate(menu.link);
+    setActive(menu);
+  };
+
+  const handleNavigate = (name) => {
+    if (name === MOBILE) {
+      navigate(`/mobile${window.location.pathname}`);
+    } else {
+      if (window.location.pathname.includes('/mobile')) {
+        navigate(
+          window.location.pathname.replace('/mobile', '')
+        );
+      }
+    }
+  };
+
+  const getHeading = () => {
+    const componentName =
+      relativePagePath && relativePagePath.split('/')[1];
+    return componentName.toUpperCase();
+  };
+
+  return (
+    <div className='h-100 bg-secondary-lightest border-right'>
+      {showMenuButtons && (
+        <div className='d-flex pt-6 pl-6'>
+          <Button
+            appearance='basic'
+            size='regular'
+            className='mr-4'
+            onClick={() => handleNavigate()}
+            selected={!relativePagePath.includes(MOBILE)}
+            expanded={true}
+          >
+            Web
+          </Button>
+          <Button
+            appearance='basic'
+            onClick={() => handleNavigate(MOBILE)}
+            selected={relativePagePath.includes(MOBILE)}
+            className='mr-6'
+            expanded={true}
+          >
+            Mobile
+          </Button>
+        </div>
+      )}
+      <Subheading className='pl-6 pt-6 pb-3' appearance='subtle'>
+        {getHeading()}
+      </Subheading>
+      <VerticalNav
+        menus={navItems}
+        active={active}
+        onClick={onClickHandler}
+        expanded={true}
+        autoCollapse={false}
+      />
+    </div>
+  );
+};
+
+export default LeftNav;

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

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

package/docs/src/components/Logos/Logos.css

@@ -0,0 +1,29 @@
+.paragraph {
+  color: var(--inverse-lighter);
+}
+
+.container {
+  border-radius: var(--spacing-m) var(--spacing-m) 0 0;
+  width: 196px;
+  height: 120px;
+  background: var(--secondary-lightest);
+}
+
+.image {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.imgName {
+  color: var(--inverse);
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+}
+
+.download-logos {
+  position: absolute !important;
+  right: 100px;
+  top: 60px;
+}

package/docs/src/components/Logos/Logos.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  Card,
+  Column,
+  Icon,
+  Toast,
+} from '@innovaccer/design-system';
+import './Logos.css';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+import { Link } from 'gatsby';
+import { useLogoItems } from '../../util/Logos';
+
+const ProductLogos = (props) => {
+  const nodes = useLogoItems();
+
+  const { logoData } = props;
+
+  return logoData.map((elt) => {
+    const filteredGatsbyImage = nodes.filter((img) => {
+      if (img.fluid.src.includes(elt.imgName)) {
+        return elt;
+      }
+    });
+
+    let image;
+    if (filteredGatsbyImage.length) {
+      image = getImage(
+        filteredGatsbyImage[0].gatsbyImageData
+      );
+    }
+
+    return (
+      <Column size='4'>
+        <Card className='mr-7 mt-7' shadow='none'>
+          <div className='px-6'>
+            <div className='mt-6 px-8 py-8 container w-auto'>
+              <GatsbyImage
+                image={image}
+                alt={elt.name}
+                className='image'
+              />
+            </div>
+            <div className='d-flex align-items-center'>
+              <p className='imgName mr-auto'>{elt.name} </p>
+              <Link
+                href={image.images.fallback.src}
+                download
+              >
+                <Icon
+                  size={16}
+                  name='download'
+                  className='mr-3 imgName'
+                  onClick={() => props.toggleToast(`Downloading ${elt.name}`)}
+                />
+              </Link>
+            </div>
+          </div>
+        </Card>
+      </Column>
+    );
+  });
+};
+
+export default ProductLogos;

package/docs/src/components/Meta.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useMetadata } from '../util/hooks';
+
+const favicon = '/icons/favicon_io/favicon-16x16.png';
+const faviconLarge = '/icons/favicon_io/favicon-32x32.png';
+const faviconApple = '/icons/favicon_io/apple-touch-icon.png';
+const  cardImage = '/icons/card-image.png';
+
+const Meta = ({ pageTitle, pageDescription, pageKeywords, titleType }) => {
+  const { title, description, keywords, lang } = useMetadata();
+
+  const getPageTitle = () => {
+    switch (titleType) {
+      case 'page':
+        // use site title for fallback
+        return pageTitle || title;
+      case 'site':
+        return title;
+      case 'append':
+        return `${title}${pageTitle ? ` – ${pageTitle}` : ''}`;
+      case 'prepend':
+        return `${pageTitle ? `${pageTitle} – ` : ''}${title}`;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Helmet
+      title={getPageTitle()}
+      meta={[
+        {
+          property: 'title',
+          content: pageTitle || title,
+        },
+        {
+          name: 'description',
+          content: pageDescription || description,
+        },
+        {
+          name: 'keywords',
+          content: pageKeywords || keywords,
+        },
+        {
+          property: `image`,
+          content: cardImage,
+        },
+        {
+          property: `type`,
+          content: 'website',
+        },
+
+        {
+          name: `og:title`,
+          content: pageTitle || title,
+        },
+        {
+          name: `og:description`,
+          content: pageDescription || description,
+        },
+        {
+          name: `og:image`,
+          content: cardImage,
+        },
+        {
+          name: `og:image:alt`,
+          content: 'Masala Design System logo',
+        },
+
+        {
+          name: `twitter:card`,
+          content: 'masala-design-system',
+        },
+        {
+          name: `twitter:title`,
+          content: pageTitle || title,
+        },
+        {
+          name: `twitter:description`,
+          content: pageDescription || description,
+        },
+        {
+          name: `twitter:image`,
+          content: cardImage,
+        },
+        {
+          name: `twitter:image:alt`,
+          content: 'Masala Design System logo',
+        },
+      ]}
+    >
+      <html lang={lang} />
+      <link rel='icon' href={favicon} />
+      <link rel='icon' href={faviconLarge} />
+      <link rel='icon' href={faviconApple} />
+    </Helmet>
+  );
+};
+
+export default Meta;

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

@@ -0,0 +1,102 @@
+import React, { FC } from 'react';
+import { styled } from '@storybook/theming';
+import { JsDocTags } from './types';
+import { codeCommon } from './Shared';
+
+interface ArgJsDocArgs {
+  tags: JsDocTags;
+}
+
+export const Table = styled.table(({ theme }) => ({
+  '&&': {
+    // Escape default table styles
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+    border: 'none',
+
+    tr: {
+      border: 'none !important',
+      background: 'none',
+    },
+
+    'td, th': {
+      padding: 0,
+      border: 'none',
+      width: 'auto!important',
+    },
+    // End escape
+
+    marginTop: 0,
+    marginBottom: 0,
+
+    'th:first-of-type, td:first-of-type': {
+      paddingLeft: 0,
+    },
+
+    'th:last-of-type, td:last-of-type': {
+      paddingRight: 0,
+    },
+
+    td: {
+      paddingTop: 0,
+      paddingBottom: 4,
+
+      '&:not(:first-of-type)': {
+        paddingLeft: 10,
+        paddingRight: 0,
+      },
+    },
+
+    tbody: {
+      boxShadow: 'none',
+      border: 'none',
+    },
+
+    code: codeCommon(),
+
+    '& code': {
+      margin: 0,
+      display: 'inline-block',
+      fontSize: theme.typography.size.s1,
+    },
+  },
+}));
+
+export const ArgJsDoc: FC<ArgJsDocArgs> = ({ tags }) => {
+  const params = (tags.params || []).filter(
+    (x) => x.description
+  );
+  const hasDisplayableParams = params.length !== 0;
+  const hasDisplayableReturns =
+    tags.returns != null &&
+    tags.returns.description != null;
+
+  if (!hasDisplayableParams && !hasDisplayableReturns) {
+    return null;
+  }
+
+  return (
+    <Table>
+      <tbody>
+        {hasDisplayableParams &&
+          params.map((x) => {
+            return (
+              <tr key={x.name}>
+                <td>
+                  <code>{x.name}</code>
+                </td>
+                <td>{x.description}</td>
+              </tr>
+            );
+          })}
+        {hasDisplayableReturns && (
+          <tr key="returns">
+            <td>
+              <code>Returns</code>
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </Table>
+  );
+};