@innovaccer/design-system 2.7.0 → 2.9.0-0

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

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

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

@@ -0,0 +1,75 @@
+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);
+    setActiveIndex(tabIndex);
+  };
+
+  return (
+    <>
+      <Heading>{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

@@ -0,0 +1,114 @@
+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);
+    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

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

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

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

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

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

@@ -0,0 +1,32 @@
+.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);
+}

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

@@ -0,0 +1,60 @@
+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();
+  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 ${relativePagePath.includes(
+                label.toLowerCase()
+              )
+                ? 'HeaderLink--active'
+                : ''
+                } ${relativePagePath.includes(
+                  label.toLowerCase()
+                )
+                  ? 'HeaderLink--active'
+                  : 'HeaderLink--default'
+                }`}
+            >
+              {label}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

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

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

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

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

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