@innovaccer/design-system 2.9.1 → 3.0.0-2

package/docs/src/components/Header/Header.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Link } from 'gatsby';
-import { useHeaderItems } from '../../util/HeaderItems';
-import './Header.css';
-import { Link as MDSLink } from '@innovaccer/design-system';
-
-const Header = ({ relativePagePath }) => {
-  const items = useHeaderItems();
-  const checkActive = (label) => {
-    const pagePath = relativePagePath.split('/');
-    if(pagePath[1]===label.toLowerCase() || pagePath[2]===label.toLowerCase()) return true; 
-    return false; 
-  }
-  return (
-    <div
-      id="mainHeader"
-      className='header bg-light d-flex w-100 position-sticky px-5'
-    >
-      <Link to='/' className='HeaderLink ml-0'>
-        <img src="/images/headerLogo.png" width="290px" height="28px" />
-      </Link>
-      <div >
-        {items.map(({ link, label }, index) => {
-          const isExternal =
-            link.startsWith('http://') ||
-            link.startsWith('https://');
-
-          if (isExternal) {
-            return (
-              <MDSLink
-                key={index}
-                href={link}
-                className="HeaderLink HeaderLink--default"
-                target="_blank"
-              >
-                {label}
-              </MDSLink>
-            )
-          }
-          return (
-            <Link
-              key={index}
-              to={link}
-              className={`HeaderLink  ${checkActive(label)
-                  ? 'HeaderLink--active'
-                  : 'HeaderLink--default'
-                }`}
-            >
-              {label}
-            </Link>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default Header;

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

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

package/docs/src/components/LastModifiedDate/LastModifiedDate.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Row, Column, Text } from '@innovaccer/design-system';
-
-const LastModifiedDate = ({ date }) => {
-  const options = {
-    day: '2-digit',
-    year: 'numeric',
-    month: 'long',
-  };
-
-  const lastModified = new Date(date);
-
-  return date ? (
-    <Row>
-      <Column>
-        <Text>
-          Page last updated: {lastModified.toLocaleDateString('en-GB', options)}
-          {/* // https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/dates-and-times.html */}
-        </Text>
-      </Column>
-    </Row>
-  ) : null;
-};
-export default LastModifiedDate;

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

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

package/docs/src/components/Layout.js

@@ -1,286 +0,0 @@
-/* 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,
-  tabs,
-  logos,
-  showMobile,
-  location,
-  ...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 = () => {
-    if (location.state?.animation === false) return false;
-    return true;
-  }
-
-  return (
-    <>
-      <Meta
-        titleType={titleType}
-        docTitle={pageTitle}
-        docDescription={pageDescription}
-        pageKeywords={pageKeywords}
-        frontmatter={frontmatter}
-        relativePagePath={relativePagePath}
-      />
-      <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 className='justify-content-center'>
-            <Column className="px-12 py-8 min-vh-100 inner-left-container" 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}
-                  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

@@ -1,101 +0,0 @@
-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 page-scroll'>
-      {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

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

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

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

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

@@ -1,104 +0,0 @@
-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 = ({ docTitle, docDescription, pageKeywords, titleType, frontmatter, relativePagePath }) => {
-  const { title, description, keywords, lang } = useMetadata();
-  const isSiblingTab = relativePagePath?.split('.')[0] === '/' + docTitle?.replace(/\s/g, '');
-  const pageTitle = isSiblingTab ? frontmatter?.title : docTitle;
-  const pageDescription = isSiblingTab ? frontmatter?.description : docDescription;
-
-  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;