@innovaccer/design-system 2.13.2 → 2.13.4-1

package/docs/src/data/components/mobile.js

@@ -1,11 +1,10 @@
-
 import React from 'react';
-import { StaticImage } from "gatsby-plugin-image";
+import { StaticImage } from 'gatsby-plugin-image';
 import { Link } from 'gatsby';
 
 const imgStyle = {
-  height: 'auto'
-}
+  height: 'auto',
+};
 
 export const data = [
   {
@@ -13,236 +12,197 @@ export const data = [
     design: 'Available',
     name: 'Action Sheet',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/ActionSheet.png"
-        alt="Action Sheet"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/ActionSheet.png" alt="Action Sheet" imgStyle={imgStyle} />,
+  },
+  {
+    link: 'badge/usage',
+    design: 'Available',
+    name: 'Badge',
+    code: 'Available',
+    image: () => <StaticImage src="./images/mobile/Badge.png" alt="Badge" imgStyle={imgStyle} />,
   },
   {
     link: 'bottomNavigation/usage',
     design: 'Available',
     name: 'Bottom navigation',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/BottomNavigation.png"
-        alt="Bottom navigation"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/BottomNavigation.png" alt="Bottom navigation" imgStyle={imgStyle} />,
   },
   {
     link: 'bottomSheet/usage',
     design: 'Available',
     name: 'Bottom sheet',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/BottomSheet.png"
-        alt="Bottom sheet"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/BottomSheet.png" alt="Bottom sheet" imgStyle={imgStyle} />,
   },
   {
     link: 'button/usage',
     design: 'Available',
     name: 'Buttons',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Buttons.png"
-        alt="Buttons"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Buttons.png" alt="Buttons" imgStyle={imgStyle} />,
   },
   {
     link: 'card/usage',
     design: 'Available',
     name: 'Cards',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Card.png"
-        alt="Cards"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Card.png" alt="Cards" imgStyle={imgStyle} />,
   },
   {
     link: 'checkbox/usage',
     design: 'Available',
     name: 'Checkbox',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Checkbox.png"
-        alt="Checkbox"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Checkbox.png" alt="Checkbox" imgStyle={imgStyle} />,
   },
   {
     link: 'chips/usage',
     design: 'Available',
     name: 'Chips',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Chips.png"
-        alt="Chips"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Chips.png" alt="Chips" imgStyle={imgStyle} />,
   },
   {
     link: 'dialogs/usage',
     design: 'Available',
     name: 'Dialogs',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Dialog.png"
-        alt="Dialogs"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Dialog.png" alt="Dialogs" imgStyle={imgStyle} />,
+  },
+  {
+    link: 'dropdown/usage',
+    design: 'Available',
+    name: 'Dropdowns',
+    code: 'Available',
+    image: () => <StaticImage src="./images/mobile/Dropdown.png" alt="Dropdowns" imgStyle={imgStyle} />,
   },
   {
     link: 'inputs/usage',
     design: 'Available',
     name: 'Inputs',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Input.png"
-        alt="Inputs"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Input.png" alt="Inputs" imgStyle={imgStyle} />,
   },
   {
     link: 'list/usage',
     design: 'Available',
     name: 'List',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/List.png"
-        alt="List"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/List.png" alt="List" imgStyle={imgStyle} />,
+  },
+  {
+    link: 'metaList/usage',
+    design: 'Available',
+    name: 'Meta list',
+    code: 'Available',
+    image: () => <StaticImage src="./images/mobile/MetaList.png" alt="<Meta list>" imgStyle={imgStyle} />,
+  },
+  {
+    link: 'message/usage',
+    design: 'Available',
+    name: 'Messages',
+    code: 'Available',
+    image: () => <StaticImage src="./images/mobile/Message.png" alt="Messages" imgStyle={imgStyle} />,
   },
   {
     link: 'pageHeaders/usage',
     design: 'Available',
     name: 'Page headers',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/PageHeader.png"
-        alt="Page headers"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/PageHeader.png" alt="Page headers" imgStyle={imgStyle} />,
   },
   {
     link: 'radio/usage',
     design: 'Available',
     name: 'Radio',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Radio.png"
-        alt="Radio"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Radio.png" alt="Radio" imgStyle={imgStyle} />,
+  },
+  {
+    link: 'slider/usage',
+    design: 'Available',
+    name: 'Slider',
+    code: 'Available',
+    image: () => <StaticImage src="./images/mobile/Slider.png" alt="Slider" imgStyle={imgStyle} />,
+  },
+  {
+    link: 'statusHint/usage',
+    design: 'Available',
+    name: 'Status hint',
+    code: 'Available',
+    image: () => <StaticImage src="./images/mobile/StatusHint.png" alt="Status hint" imgStyle={imgStyle} />,
+  },
+  {
+    link: 'stepper/usage',
+    design: 'Available',
+    name: 'Stepper',
+    code: 'Available',
+    image: () => <StaticImage src="./images/mobile/Stepper.png" alt="Stepper" imgStyle={imgStyle} />,
   },
   {
     link: 'switch/usage',
     design: 'Available',
     name: 'Switch',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Switch.png"
-        alt="Switch"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Switch.png" alt="Switch" imgStyle={imgStyle} />,
   },
   {
     link: 'tabs/usage',
     design: 'Available',
     name: 'Tabs',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Tabs.png"
-        alt="Tabs"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Tabs.png" alt="Tabs" imgStyle={imgStyle} />,
   },
   {
     link: 'toast/usage',
     design: 'Available',
     name: 'Toast',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/mobile/Toast.png"
-        alt="Toast"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/mobile/Toast.png" alt="Toast" imgStyle={imgStyle} />,
   },
 ];
 
-
 export const schema = [
   {
-    name: "name",
-    displayName: "Component Name",
-    width: "40%",
+    name: 'name',
+    displayName: 'Component Name',
+    width: '40%',
     sorting: false,
     cellRenderer: ({ data }) => {
-      return <Link 
-      className='Text--link card-link'
-      to={`/mobile/components/${data.link}`}
-      >
-        {data.name}
-      </Link>;
+      return (
+        <Link className="Text--link card-link" to={`/mobile/components/${data.link}`}>
+          {data.name}
+        </Link>
+      );
     },
   },
   {
-    name: "design",
-    displayName: "Design",
-    width: "30%",
-    cellType: "STATUS_HINT",
+    name: 'design',
+    displayName: 'Design',
+    width: '30%',
+    cellType: 'STATUS_HINT',
     sorting: false,
     translate: (a) => {
       const design = a.design;
       return {
         title: design,
-        statusAppearance:
-          design === "Available"
-            ? "success"
-            : design === "Unavailable"
-              ? "alert"
-              : "info",
+        statusAppearance: design === 'Available' ? 'success' : design === 'Unavailable' ? 'alert' : 'info',
       };
     },
   },
   {
-    name: "code",
-    displayName: "Code",
-    width: "30%",
-    cellType: "STATUS_HINT",
+    name: 'code',
+    displayName: 'Code',
+    width: '30%',
+    cellType: 'STATUS_HINT',
     sorting: false,
     translate: (a) => {
       const code = a.code;
       return {
         title: code,
-        statusAppearance:
-          code === "Available"
-            ? "success"
-            : code === "Unavailable"
-              ? "alert"
-              : "info",
+        statusAppearance: code === 'Available' ? 'success' : code === 'Unavailable' ? 'alert' : 'info',
       };
     },
   },
 ];
-

package/docs/src/data/components/overview.css

@@ -20,11 +20,13 @@
   height: var(--spacing-6);
 }
 
-.card-link, .card-link:hover {
+.card-link,
+.card-link:hover {
   text-decoration: none !important;
 }
 
-.card-link[disabled], .card-link[disabled] * {
+.card-link[disabled],
+.card-link[disabled] * {
   pointer-events: none;
 }
 

package/docs/src/data/components/patterns.js

@@ -1,11 +1,10 @@
-
 import React from 'react';
-import { StaticImage } from "gatsby-plugin-image";
+import { StaticImage } from 'gatsby-plugin-image';
 import { Link } from 'gatsby';
 
 const imgStyle = {
-  height: 'auto'
-}
+  height: 'auto',
+};
 
 export const data = [
   {
@@ -13,104 +12,71 @@ export const data = [
     design: 'Available',
     name: 'File uploader',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/patterns/fileUploader.png"
-        alt="File uploader"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/patterns/fileUploader.png" alt="File uploader" imgStyle={imgStyle} />,
   },
   {
     link: 'forms/usage',
     design: 'Available',
     name: 'Forms',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/patterns/Forms.png"
-        alt="Forms"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/patterns/Forms.png" alt="Forms" imgStyle={imgStyle} />,
   },
   {
     link: 'layouts/usage',
     design: 'Available',
     name: 'Layouts',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/patterns/Layout.png"
-        alt="Layout"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/patterns/Layout.png" alt="Layout" imgStyle={imgStyle} />,
   },
   {
     link: 'uiStates/usage',
     design: 'Available',
     name: 'UI states',
     code: 'Available',
-    image: () => (
-      <StaticImage
-        src="./images/patterns/UIStates.png"
-        alt="UI states"
-        imgStyle={imgStyle}
-      />)
+    image: () => <StaticImage src="./images/patterns/UIStates.png" alt="UI states" imgStyle={imgStyle} />,
   },
 ];
 
-
 export const schema = [
   {
-    name: "name",
-    displayName: "Component Name",
-    width: "40%",
+    name: 'name',
+    displayName: 'Component Name',
+    width: '40%',
     sorting: false,
     cellRenderer: ({ data }) => {
-      return <Link 
-      className='Text--link card-link'
-      to={`/patterns/${data.link}`}
-      >
-        {data.name}
-      </Link>;
+      return (
+        <Link className="Text--link card-link" to={`/patterns/${data.link}`}>
+          {data.name}
+        </Link>
+      );
     },
   },
   {
-    name: "design",
-    displayName: "Design",
-    width: "30%",
-    cellType: "STATUS_HINT",
+    name: 'design',
+    displayName: 'Design',
+    width: '30%',
+    cellType: 'STATUS_HINT',
     sorting: false,
     translate: (a) => {
       const design = a.design;
       return {
         title: design,
-        statusAppearance:
-          design === "Available"
-            ? "success"
-            : design === "Unavailable"
-              ? "alert"
-              : "info",
+        statusAppearance: design === 'Available' ? 'success' : design === 'Unavailable' ? 'alert' : 'info',
       };
     },
   },
   {
-    name: "code",
-    displayName: "Code",
-    width: "30%",
-    cellType: "STATUS_HINT",
+    name: 'code',
+    displayName: 'Code',
+    width: '30%',
+    cellType: 'STATUS_HINT',
     sorting: false,
     translate: (a) => {
       const code = a.code;
       return {
         title: code,
-        statusAppearance:
-          code === "Available"
-            ? "success"
-            : code === "Unavailable"
-              ? "alert"
-              : "info",
+        statusAppearance: code === 'Available' ? 'success' : code === 'Unavailable' ? 'alert' : 'info',
       };
     },
   },
 ];
-

package/docs/src/data/header-items.yaml

@@ -15,3 +15,4 @@
 
 - label: Storybook
   link: https://innovaccer.github.io/design-system
+  img: Storybook

package/docs/src/data/nav/components.yaml

@@ -13,7 +13,6 @@ menus:
 
   - label: Badges
     link: /components/badges/usage/
-    hideInMobile: true
 
   - label: Bottom navigation
     link: /components/bottomNavigation/usage
@@ -57,7 +56,7 @@ menus:
 
   - label: Dropdowns
     link: /components/dropdowns/usage/
-    hideInMobile: true
+    
 
   - label: Help text
     link: /components/helpText/usage/
@@ -84,11 +83,9 @@ menus:
 
   - label: Messages
     link: /components/message/usage/
-    hideInMobile: true
 
   - label: Meta list
     link: /components/metaList/usage/
-    hideInMobile: true
 
   - label: Modals
     link: /components/modals/usage/
@@ -134,15 +131,12 @@ menus:
 
   - label: Slider
     link: /components/slider/usage/
-    hideInMobile: true
 
   - label: Status hint
     link: /components/statusHint/usage/
-    hideInMobile: true
 
   - label: Steppers
     link: /components/steppers/usage/
-    hideInMobile: true
 
   - label: Switch
     link: /components/switch/usage/

package/docs/src/pages/404.js

@@ -1,44 +1,34 @@
 import React, { useEffect } from 'react';
 import Homepage from '../components/templates/Homepage';
-import {
-  Button,
-  EmptyState
-} from '@innovaccer/design-system';
+import { Button, EmptyState } from '@innovaccer/design-system';
 import { navigate } from 'gatsby';
-import notFoundImage from './home/404.png'
+import notFoundImage from './home/404.png';
 import { useNavItems } from '../util/NavItems';
 
 const PageNotFound = () => {
   const pathName = typeof window !== 'undefined' && window.location.pathname;
-  const navItemsList = pathName ? useNavItems(pathName): [];
+  const navItemsList = pathName ? useNavItems(pathName) : [];
 
   useEffect(() => {
     let redirectPath;
     if (pathName.includes('/mobile')) {
-      redirectPath = navItemsList.find((nav) => !nav.hideInMobile)
+      redirectPath = navItemsList.find((nav) => !nav.hideInMobile);
     } else {
-      redirectPath = navItemsList.find((nav) => !nav.hideInWeb)
+      redirectPath = navItemsList.find((nav) => !nav.hideInWeb);
     }
     navigate(redirectPath?.link);
   }, []);
 
   return (
     <Homepage relativePagePath={'/404'} is404={true}>
-      <div
-        className="d-flex justify-content-center"
-        style={{ transform: "translate(0,50%)" }}
-      >
+      <div className="d-flex justify-content-center" style={{ transform: 'translate(0,50%)' }}>
         <EmptyState
           description="Sorry, the page you are lookikng for does not exist. Let's get you back"
           imageSrc={notFoundImage}
           size="small"
           title="Oh no! There's no masala"
         >
-          <Button
-            icon='arrow_backward'
-            iconAlign='left'
-            onClick={() => navigate('/')}
-          >
+          <Button icon="arrow_backward" iconAlign="left" onClick={() => navigate('/')}>
             Go Back
           </Button>
         </EmptyState>

package/docs/src/pages/components/avatar/usage.mdx

@@ -75,6 +75,7 @@ The background colors to be used in the avatars should be generated dynamically
 For example, an avatar generated for a user - Franklin Clinton, can look like following and it will look the same wherever it is used.
 
 ![Color Assignment](./images/avatar-1.png)
+<Caption>Color Assignment</Caption>
 <br/>
 
 #### Displaying Name

package/docs/src/pages/components/button/usage.mdx

@@ -56,7 +56,7 @@ Buttons come in **4 appearances** basis on their intent - basic, primary, alert
 
 ### Sizes
 
-Buttons come in **3 sizes** - regular, tiny and large.
+Buttons come in **3 sizes** - regular, small and large.
 <Preview name='components-button-variants-size--size' />
 <br/>
 
@@ -90,7 +90,7 @@ Buttons come in **6 states** - default, hover, active, focus, disabled and loadi
       <td>Size</td>
       <td>
           <ul>
-              <li>Tiny</li>
+              <li>Small</li>
               <li>Regular</li>
               <li>Large</li>
           </ul>

package/docs/src/pages/components/calendar/usage.mdx

@@ -12,7 +12,7 @@ A calendar is always visible upfront on screen when used i.e. a date can be sele
 <Preview name="components-calendar-all--all" />
 
 ### Sizes
-Calendar comes in **2 sizes** - regular and tiny.
+Calendar comes in **2 sizes** - regular and small.
 <Preview name="components-calendar-variants-size--size" />
 
 ### States
@@ -45,11 +45,11 @@ A time entity in calendar (date, month, year) can come in different states -
       <td>Size</td>
       <td>
           <ul>
-              <li>Large</li>
+              <li>Regular</li>
               <li>Small</li>
           </ul>
       </td>
-      <td>Large</td>
+      <td>Regular</td>
     </tr>
   </tbody>
 </table>