@innovaccer/design-system 2.7.0 → 2.9.0-0

package/docs/src/pages/index.js

@@ -0,0 +1,241 @@
+import React from 'react';
+import { navigate } from 'gatsby';
+import Meta from '../components/Meta';
+import Homepage from '../components/templates/Homepage';
+import Footer from '../components/Footer/Footer';
+import { MediumBlogs, useHomeMenu, MdsChangelog, useHomeResources } from '../util';
+import { StaticImage } from "gatsby-plugin-image";
+import './home/homepage.css';
+import {
+  Row,
+  Column,
+  Heading,
+  Button,
+  Card,
+  Badge,
+  Text,
+  Icon,
+  Link,
+  Subheading
+} from '@innovaccer/design-system';
+
+const Home = () => {
+
+  const mediumBlogList = MediumBlogs().slice(0, 3);
+  const menuSection = useHomeMenu();
+  const resourceSection = useHomeResources();
+  const changelog = MdsChangelog();
+
+  const releaseDate = new Date(changelog.releaseDate).toString().slice(3, 15);
+
+  const getChangelogContent = () => (
+    changelog.updatesList.slice(0, 2).map((updates) => {
+      return (
+        updates.map((item, key) => {
+          return (
+            key < 3 &&
+            (
+              key === 0 ?
+                <div className="mt-4">
+                  <Text weight='strong' className="home-text-color">{item}</Text>
+                </div>
+                :
+                <div className="list">
+                  <li className="m-0">
+                    <Text appearance='subtle' size='small' weight='medium'>
+                      {item.substring(0, item.lastIndexOf('('))}
+                    </Text>
+                  </li>
+                </div>
+            )
+          )
+        })
+      )
+    })
+  )
+
+  return (
+    <Homepage relativePagePath={'/404'} is404={true}>
+      <Meta titleType='page' pageTitle='Masala Design System' />
+      <Row className="h-100">
+        <Column className="page-animation">
+
+          <section className="px-12 pt-8">
+            <Row className="align-items-center">
+              <Column>
+                <Text weight='medium'>Welcome to</Text>
+                <Heading size='xl' className='mt-2 home-text-color'>
+                  Masala Design System
+                </Heading>
+                <Heading size='m' className='mt-4 font-weight--normal home-text-color'>
+                  Designers, developers, product managers, and UXer's use
+                  Innovaccer's Masala Design System to build products effortlessly,
+                  fearlessly, and conveniently.
+                </Heading>
+                <br />
+                <Button
+                  appearance='primary'
+                  onClick={() => navigate('/introduction/get-started/developers/')}
+                >
+                  Get started
+                </Button>
+                <br />
+              </Column>
+              <Column>
+                <StaticImage
+                  src="./home/HomeBanner.png"
+                  alt="test"
+                />
+              </Column>
+            </Row>
+          </section>
+
+          <section className="px-12 py-11 home-menu">
+            <Row>
+              {
+                menuSection.map((menuItem, key) => {
+                  return (
+                    <Column size={3} key={key}>
+                      <Link href={menuItem.link}>
+                        <Card
+                          className='mr-7 p-6 h-100 overflow-visible'
+                          shadow='none'
+                        >
+                          <div className='d-flex'>
+                            <div className='mr-6'>
+                              <span
+                                className='border-radius--rounded p-4 d-inline-flex'
+                                style={{ backgroundColor: `var(--${menuItem.appearance}-lightest)` }}
+                              >
+                                <Icon
+                                  name={menuItem.icon}
+                                  appearance={menuItem.appearance}
+                                  size={24}
+                                />
+                              </span>
+                            </div>
+
+                            <div>
+                              <Heading size='s' className='mb-4 home-text-color'>
+                                {menuItem.name}
+                              </Heading>
+                              <Text appearance='subtle' className='font-weight--normal'>
+                                {menuItem.content}
+                              </Text>
+                            </div>
+                          </div>
+                        </Card>
+                      </Link>
+                    </Column>
+                  )
+                })
+              }
+            </Row>
+          </section>
+
+          <section className="px-12 py-11">
+            <Row>
+              <Column size={6}>
+                <Card
+                  className='p-6 mr-6 h-100 overflow-visible'
+                  shadow='none'
+                >
+                  <div className='d-flex'>
+                    <Heading size='m' className='mb-3 home-text-color'>
+                      Masala Design System v{(changelog.version).trim()}
+                    </Heading>
+                    <div>
+                      <Badge appearance="success" className='ml-4 mt-3'> NEW </Badge>
+                    </div>
+                  </div>
+                  <div className='mb-6'>
+                    <Subheading appearance="subtle">{releaseDate}</Subheading>
+                    <div>
+                      {getChangelogContent()}
+                    </div>
+                  </div>
+
+                  <Link href={'/introduction/what\'s-new/'}> View all updates</Link>
+                </Card>
+              </Column>
+              <Column size={6}>
+                <Card
+                  className='p-6 mr-6 h-100 overflow-visible'
+                  shadow='none'
+                >
+                  <Heading size='m' className="home-text-color mb-5">Blogs by Innovaccer Design</Heading>
+                  {
+                    mediumBlogList.map((blog, key) => {
+                      return (
+                        <div className={`d-flex ${key === 2 ? 'mb-0' : 'mb-5'}`} key={key}>
+                          <div style={{ width: '40px' }}>
+                            <img
+                              src={`https://miro.medium.com/fit/c/28/28/${blog.author.imageId}`}
+                              alt="author_img"
+                              className="border-radius--rounded mr-4"
+                            />
+                          </div>
+                          <div>
+                            <Link href={`https://medium.com/innovaccer-design/${blog.uniqueSlug}`} target="_blank" >
+                              {blog.title}
+                            </Link>
+                            <br />
+                            <Text appearance='subtle' size='small' weight='medium'>
+                              {'by ' + blog.author.name}
+                            </Text>
+                          </div>
+                        </div>
+                      )
+                    })
+                  }
+                  <div
+                    className="position-absolute sticky-bottom"
+                  >
+                    <Link
+                      href='https://medium.com/innovaccer-tech'
+                      target="_blank"
+                    >
+                      More blogs
+                    </Link>
+                  </div>
+                </Card>
+              </Column>
+            </Row>
+          </section>
+
+          <section className="px-12 py-11 bg-secondary-lightest">
+            <Heading size='xl' className="home-text-color">Resources</Heading>
+            <Row className="mt-7">
+              {resourceSection.map((resource, key) => (
+                <Column key={key}>
+                  <Link href={resource.link} target="_blank">
+                    <Card
+                      className='mr-6 p-6 h-100 overflow-visible'
+                      shadow='none'
+                    >
+                      <Row>
+                        <Column size={2} className='mr-6'>
+                          <img src={resource.imgSrc} width="100%" height="100%" alt={resource.name} />
+                        </Column>
+                        <Column>
+                          <Heading size='m' className="mb-2 home-text-color">{resource.name}</Heading>
+                          <Text appearance='subtle' className='font-weight--normal'>
+                            {resource.description}
+                          </Text>
+                        </Column>
+                      </Row>
+                    </Card>
+                  </Link>
+                </Column>
+              ))}
+            </Row>
+          </section>
+
+          <Footer relativePagePath={'/home'} />
+        </Column>
+      </Row>
+    </Homepage>
+  );
+};
+
+export default Home;

package/docs/src/pages/introduction/get-started/designers.mdx

@@ -0,0 +1,89 @@
+---
+title: For Designers
+description: Welcome to Masala Design System! If you're just starting out designing with Masala Design System, here's a checklist of everything you need to get up and running.
+date: 15 June 2021
+---
+
+Masala Design System helps in designing consistent products swiftly.
+
+#### Pre-requisites
+
+<ol className='pl-6'>
+  <li>
+    Install Sketch. Please ensure that you are running the
+    latest version of Sketch in order to use the components
+    from the Design System.
+  </li>
+  <br />
+  <li>
+    Install Abstract app. We use Abstract for version
+    control and collaboration across designers, so make sure
+    it is installed in your system before you start
+    designing. Abstract plugin for Sketch is automatically
+    installed when you install the Abstract macOS app.
+  </li>
+  <br />
+  <li>
+    Install Craft Manager. We use Marvel for prototyping and
+    collaboration. Craft plugin for Sketch allows easy
+    uploading and updating screens on InVision.
+  </li>
+  <br />
+  <li>
+    Install the required fonts. Please download and install
+    the following fonts in your system-
+    <ol className='pl-6' type='a'>
+      <li>
+        <Text appearance='link'>Nunito Sans (for Web)</Text>
+      </li>
+      <li>
+        <Text appearance='link'>SF Pro (for iOS)</Text>
+      </li>
+      <li>
+        <Text appearance='link'>
+          MaterialIcons-Rounded(for Icons)
+        </Text>
+      </li>
+      <li>
+        <Text appearance='link'>
+          MaterialIcons-Outline (for Icons)
+        </Text>
+      </li>
+    </ol>
+  </li>
+</ol>
+
+#### Plugins
+
+We use a couple of Sketch plugins to speed up the workflow. It is recommended that you download and use them -
+
+<ol className='pl-6'>
+  <li>
+    <Text appearance='link'>Sketch Runner</Text> - Perform
+    Sketch actions quicker with your keyboard. Launch,
+    search, execute; and install other plugins.
+  </li>
+  <br />
+  <li>
+    <Text appearance='link'>Automate Runner</Text> - Rename
+    bulk layers/artboards and 100s of other use cases. Make
+    your workflow more efficient.
+  </li>
+  <br />
+  <li>
+    <Text appearance='link'>Find and replace</Text> - Find
+    and replace texts within your selection, you page, or
+    the entire sketch document.
+  </li>
+  <br />
+  <li>
+    <Text appearance='link'>Symbol instance locator</Text> -
+    Find the instances of the symbols in your entire Sketch
+    document.
+  </li>
+  <br />
+  <li>
+    <Text appearance='link'>Symbol swapper</Text> - Replace
+    symbols or replace your entire Sketch library.
+  </li>
+</ol>

package/docs/src/pages/introduction/get-started/developers.mdx

@@ -0,0 +1,128 @@
+---
+title: For Developers
+description: Welcome to Masala Design System! If you're just starting out developing with Masala Design System, here's a checklist of everything you need to get up and running.
+date: 15 June 2021
+---
+
+The Masala Design System provides front-end developers & engineers a collection of reusable React components, css with dynamic theming support and static markup to develop user interfaces using design system principles and guidelines. This enables developers to use consistent markup, styles, and behavior in prototype and production work.
+
+<Message
+  appearance='info'
+  description="If your app runs on Innovaccer UI engine, you don't need to follow any of the following steps. You can directly jump to 'Using components' section bellow."
+/>
+
+<br />
+<br />
+
+#### Getting started
+
+<br />
+
+##### Installing component library
+
+Run the following command using npm to add the component library to your project.
+
+```shell
+npm install @innovaccer/design-system
+```
+
+<br />
+<br />
+
+##### Adding style
+
+As this component library is part of a framework-agnostic design system used at Innovaccer the styling is done with CSS using CSS variables for theming and BEM methodology for reusable and modular styling. So it requires you to include CSS in your project by either importing or serving it as a static file. The complete stylesheet is published as part of the component library at path @innovaccer/design-system/css.
+
+Import style at your app's root.
+
+```shell
+import '@innovaccer/design-system/css';
+```
+
+<br />
+<br />
+
+##### Using font
+
+The css sets the font family as 'Nunito Sans' for the body. To add this font in your project you need to load this font. The recommended way to do it is by adding the following google font cdn link to your app's head.
+
+```
+<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
+```
+
+<br />
+<br />
+
+##### Updating font
+
+If you don't add the font described above font family will not be affected by css. However, if you want to update the font family update it via the following css variable.
+
+```shell
+--font-family
+```
+
+<br />
+<br />
+
+##### Updating font
+
+As BEM is used reset.css is not used and no style reset is done.
+
+<br />
+
+##### Polyfill for IE
+
+For css variables to work on IE we use a polyfill at runtime to achieve dynamic theming through variables. Please add the following polyfill in your page.
+
+```shell
+<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
+<script>
+  cssVars({
+    onlyLegacy: true
+  });
+</script>
+```
+
+<br />
+<br />
+
+#### Using components
+
+Available components along with live code editor and API documentation can be found here. Components can be imported as mentioned below.
+
+```javascript
+{
+...
+Avatar,
+Backdrop,
+Badge,
+BreadcrumbsWrapper,
+Breadcrumb,
+...
+} from '@innovaccer/design-system'
+```
+
+<br />
+<br />
+
+#### How to run locally?
+
+<br />
+
+```shell
+#clone repository
+git clone https://github.com/innovaccer/design-system.git
+
+#install dependencies
+npm install
+
+#start development server
+npm run dev
+```
+
+<br />
+<br />
+
+#### How to contribute?
+
+We are happy that you wish to contribute to this project. Please refer to the Contribution Guidelines for more information about setting up the project and contributing to it.