@innovaccer/design-system 2.13.2 → 2.13.4-1

package/docs/src/pages/foundations/response-time.mdx

@@ -11,53 +11,29 @@ showMobile: true
 
 #### Free navigation
 
-**1.0 second** is the limit for having the user feel that the system is **reacting instantaneously**, meaning that no special feedback is necessary except to display the result.
+**0.1 second** is the limit for having the user feel that the system is **reacting instantaneously**, meaning that no special feedback is necessary except to display the result.
 
 For example, this is the limit from the time the user selects a row in a table until that row should highlight or otherwise give feedback that it's selected.
 
-<Card shadow='none'>
-  <Table
-    showMenu={false}
-    separator={true}
-    data={[
-      {
-        good: '[0, 100ms]',
-        needs_improvement: '(100ms, 300ms]',
-        poor: 'over 300ms',
-      },
-    ]}
-    schema={[
-      {
-        name: 'good',
-        displayName: 'Good',
-        width: '33%',
-        sorting: false,
-        separator: true,
-      },
-      {
-        name: 'needs_improvement',
-        displayName: 'Needs Improvement',
-        width: '33%',
-        sorting: false,
-        cellType: 'WITH_META_LIST',
-        separator: true,
-      },
-      {
-        name: 'poor',
-        displayName: 'Poor',
-        width: '33%',
-        sorting: false,
-        separator: true,
-      },
-    ]}
-    withHeader={false}
-  />
-</Card>
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:33%; text-align: left;">Good</th>
+      <th style="width:33%; text-align: left;">Needs improvement</th>
+      <th style="width:33%; text-align: left;">Poor</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>[0, 100ms]</td>
+      <td>(100ms, 300ms]</td>
+      <td>over 300ms</td>
+    </tr>
+  </tbody>
+</table>
 
 <br />
 <br />
 
-#### Data manipulation
+#### Direct manipulation
 
 **1.0 second** is about the limit for the **user's flow of thought
 to stay** uninterrupted, even though the user will notice the delay.
@@ -67,43 +43,22 @@ feeling of operating directly on the data.
 
 For example, if sorting a table according to the selected column can't be done in 0.1 seconds, it certainly has to be done in 1 second, or users will feel that the UI is sluggish and will lose the sense of "flow" in performing their task. For delays of more than 1 second, indicate to the user that the computer is working on the problem, for example by changing the shape of the cursor.
 
-<Card shadow='none'>
-  <Table
-    showMenu={false}
-    separator={true}
-    data={[
-      {
-        good: '[0, 100ms]',
-        needs_improvement: '(100ms, 300ms]',
-        poor: 'over 300ms',
-      },
-    ]}
-    schema={[
-      {
-        name: 'good',
-        displayName: 'Good',
-        width: '33%',
-        sorting: false,
-        separator: true,
-      },
-      {
-        name: 'needs_improvement',
-        displayName: 'Needs Improvement',
-        width: '33%',
-        sorting: false,
-        separator: true,
-      },
-      {
-        name: 'poor',
-        displayName: 'Poor',
-        width: '33%',
-        sorting: false,
-        separator: true,
-      },
-    ]}
-    withHeader={false}
-  />
-</Card>
+
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:33%; text-align: left;">Good</th>
+      <th style="width:33%; text-align: left;">Needs improvement</th>
+      <th style="width:33%; text-align: left;">Poor</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>[0, 1000ms]</td>
+      <td>(1000ms, 3000ms]</td>
+      <td>over 3000ms</td>
+    </tr>
+  </tbody>
+</table>
+
 
 <br />
 <br />

package/docs/src/pages/index.js

@@ -4,29 +4,17 @@ 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 { StaticImage } from 'gatsby-plugin-image';
 import './home/homepage.css';
-import {
-  Row,
-  Column,
-  Heading,
-  Button,
-  Card,
-  Badge,
-  Text,
-  Link,
-  Subheading,
-  Icon
-} from '@innovaccer/design-system';
+import { Row, Column, Heading, Button, Card, Badge, Text, Link, Subheading, Icon } from '@innovaccer/design-system';
 import * as HomeIcons from '../util/HomeIcons';
 
 const MenuIcons = ({ name }) => {
   const SvgIcons = HomeIcons[name] || (() => <div></div>);
-  return <SvgIcons />
-}
+  return <SvgIcons />;
+};
 
 const Home = () => {
-
   const mediumBlogList = MediumBlogs().slice(0, 3);
   const menuSection = useHomeMenu();
   const resourceSection = useHomeResources();
@@ -34,64 +22,54 @@ const Home = () => {
 
   const releaseDate = new Date(changelog.releaseDate).toString().slice(3, 15);
 
-  const getChangelogContent = () => (
+  const getChangelogContent = () =>
     changelog.updatesList.slice(0, 2).map((updates) => {
-      return (
-        updates.map((item, key) => {
-          return (
-            key < 3 &&
-            (
-              key === 0 ?
-                <div className="mt-4" key={key}>
-                  <Text weight='strong' className="home-text-color">{item}</Text>
-                </div>
-                :
-                <div className="list" key={key}>
-                  <li className="m-0">
-                    <Text appearance='subtle' size='small' weight='medium'>
-                      {item.substring(0, item.lastIndexOf('('))}
-                    </Text>
-                  </li>
-                </div>
-            )
-          )
-        })
-      )
-    })
-  )
+      return updates.map((item, key) => {
+        return (
+          key < 3 &&
+          (key === 0 ? (
+            <div className="mt-4" key={key}>
+              <Text weight="strong" className="home-text-color">
+                {item}
+              </Text>
+            </div>
+          ) : (
+            <div className="list" key={key}>
+              <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' docTitle='Masala Design System' />
+      <Meta titleType="page" docTitle="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'>
+                <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 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/designers/')}
-                >
+                <Button appearance="primary" onClick={() => navigate('/introduction/get-started/designers/')}>
                   Get started
                 </Button>
                 <br />
               </Column>
               <Column>
-                <StaticImage
-                  src="./home/HomeBanner.png"
-                  alt="Masala Design System"
-                />
+                <StaticImage src="./home/HomeBanner.png" alt="Masala Design System" />
               </Column>
             </Row>
           </section>
@@ -102,9 +80,10 @@ const Home = () => {
                 menuSection.map((menuItem, key) => {
                   return (
                     <Column size={3} key={key}>
+                      <div className='mr-7 h-100 overflow-visble'>
                       <Link href={menuItem.link}>
                         <Card
-                          className='mr-7 p-6 h-100 overflow-visible'
+                          className='p-6 h-100'
                           shadow='none'
                         >
                           <div className='d-flex'>
@@ -114,17 +93,18 @@ const Home = () => {
                               </Icon>
                             </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>
+                            <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>
+                      </div> 
                     </Column>
                   )
                 })
@@ -135,65 +115,55 @@ const Home = () => {
           <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()}
+                <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>
+                      <Badge appearance="success" className="ml-4 mt-3">
+                        {' '}
+                        NEW{' '}
+                      </Badge>
                     </div>
                   </div>
-                  <div className='mb-6'>
+                  <div className="mb-6">
                     <Subheading appearance="subtle">{releaseDate}</Subheading>
-                    <div>
-                      {getChangelogContent()}
-                    </div>
+                    <div>{getChangelogContent()}</div>
                   </div>
 
-                  <Link href={'/introduction/what\'s-new/'}> View all updates</Link>
+                  <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>
+                <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
-                    className="position-absolute sticky-bottom"
-                  >
-                    <Link
-                      href='https://medium.com/innovaccer-tech'
-                      target="_blank"
-                    >
+                      </div>
+                    );
+                  })}
+                  <div className="position-absolute sticky-bottom">
+                    <Link href="https://medium.com/innovaccer-tech" target="_blank">
                       More blogs
                     </Link>
                   </div>
@@ -203,22 +173,23 @@ const Home = () => {
           </section>
 
           <section className="px-12 py-11 bg-secondary-lightest">
-            <Heading size='xl' className="home-text-color">Resources</Heading>
+            <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'
-                    >
+                    <Card className="mr-6 p-6 h-100 overflow-visible" shadow="none">
                       <Row>
-                        <Column size={2} className='mr-6'>
+                        <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'>
+                          <Heading size="m" className="mb-2 home-text-color">
+                            {resource.name}
+                          </Heading>
+                          <Text appearance="subtle" className="font-weight--normal">
                             {resource.description}
                           </Text>
                         </Column>

package/docs/src/pages/mobile/components/badges/usage.mdx

@@ -0,0 +1,100 @@
+---
+title: Badges
+description: Badges are used to tag entities with concise and relevant information.
+component: badge
+tabs: ["Usage"]
+showMobile: true
+---
+
+Badges contain short labels that help in 'tagging' entities. The container of a badge is rounded at the corners.
+<br/>
+
+### Types
+<br />
+
+#### Solid
+
+Solid badges are used to highlight important information on the page so that they can be recognized easily. They use solid color to easily pop out in a page.
+
+![Solid badge](./images/badge-1.png)
+
+#### Subtle
+
+Subtle badges are used when a lot of entities on a single page need tagging/labeling. In that case, using solid badges becomes a bit overwhelming e.g. tags in a list. This is why subtle badges use the lightest shade of the colors.
+
+![Subtle badge](./images/badge-2.png)
+<br/>
+
+### Appearances
+A badge comes in 9 appearances.
+
+![Appearances of badge](./images/badge-3.png)
+<br/>
+
+### Properties
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:33%; text-align: left;">Property</th>
+      <th style="width:33%; text-align: left;">Value(s)</th>
+      <th style="width:33%; text-align: left;">Default value</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Appearance</td>
+      <td>
+          <ul>
+              <li>Jal</li>
+              <li>Stone</li>
+              <li>Neem</li>
+              <li>Haldi</li>
+              <li>Mirch</li>
+              <li>Tawak</li>
+              <li>Nimbu</li>
+              <li>Neel</li>
+              <li>Jamun</li>
+          </ul>
+      </td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Subtle<br/><em>(optional)</em></td>
+      <td>
+          <ul>
+              <li>True</li>
+              <li>False</li>
+          </ul>
+      </td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Max width</td>
+      <td>160px</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Corner radius</td>
+      <td>3px</td>
+      <td>-</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Padding<br/><em>(top, right, bottom, left)</em></td>
+      <td>2px, 4px, 2px, 4px</td>
+      <td>-</td>
+    </tr>
+  </tbody>
+</table>
+<br/>
+
+### Usage
+<br/>
+
+#### Badges vs. Pills
+Badges are used for tagging entities while pills are very specifically used to display the count of entities.
+
+![When to use badges vs pills](./images/badge-4.png)
+<br/>
+
+#### Badge vs. Status hint
+A badge is used to tag the entities whereas a status hint is used to indicate the status of an entity. 
+
+![When to use badges vs status hint](./images/badge-5.png)