@innovaccer/design-system 2.13.3 → 2.13.4-2

package/docs/src/pages/patterns/uiStates/usage.mdx

@@ -109,6 +109,7 @@ A typical process starts with loading the app first. If we go step by step -
 
 ### Empty and Error States
 <br/>
+<br/>
 
 <table style="width: 100%">
     <thead>
@@ -171,6 +172,52 @@ A typical process starts with loading the app first. If we go step by step -
 
 <br/>
 
+<table style="width: 100%">
+    <thead>
+        <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>
+    </thead>
+    <tbody>
+        <tr style="vertical-align: top">
+            <td>Illustration</td>
+            <td>
+                Image
+                <br/>
+                <br/>
+                <b>Image size</b>
+                <br/>
+                Height - 128px
+                <br/>
+                Width - Dynamic as per the height, maintaining the aspect ratio
+            </td>
+            <td>
+                -
+            </td>
+        </tr>
+        <tr style="vertical-align: top">
+            <td>Title</td>
+            <td>&#60;title&#62;</td>
+            <td>We didn't find a match</td>
+        </tr>
+        <tr style="vertical-align: top">
+            <td>Description</td>
+            <td>&#60;description&#62;</td>
+            <td>Try adjusting your search to find what you are looking for.</td>
+        </tr>
+        <tr style="vertical-align: top">
+            <td>Button</td>
+            <td>Label</td>
+            <td>Try again</td>
+        </tr>
+    </tbody>
+</table>
+
+<br/>
+<br/>
+
 ##### No search results
 <div className="py-5" style={{ backgroundColor: 'var(--secondary-lightest)'}}>
     <EmptyState 
@@ -185,6 +232,51 @@ A typical process starts with loading the app first. If we go step by step -
     </EmptyState>
 </div>
 
+<br/>
+<table style="width: 100%">
+    <thead>
+        <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>
+    </thead>
+    <tbody>
+        <tr style="vertical-align: top">
+            <td>Illustration</td>
+            <td>
+                Image
+                <br/>
+                <br/>
+                <b>Image size</b>
+                <br/>
+                Height - 256px
+                <br/>
+                Width - Dynamic as per the height, maintaining the aspect ratio
+            </td>
+            <td>
+                -
+            </td>
+        </tr>
+        <tr style="vertical-align: top">
+            <td>Title</td>
+            <td>&#60;title&#62;</td>
+            <td>Manage your outreach camaigns</td>
+        </tr>
+        <tr style="vertical-align: top">
+            <td>Description</td>
+            <td>&#60;description&#62;</td>
+            <td>Campaigns let you reach out to patients with messages, emails and voice calls.</td>
+        </tr>
+        <tr style="vertical-align: top">
+            <td>Button</td>
+            <td>Label</td>
+            <td>New campaign</td>
+        </tr>
+    </tbody>
+</table>
+
+<br/>
 <br/>
 
 ##### Error (page not loaded)

package/docs/src/util/Frontmatter.js

@@ -19,17 +19,17 @@ export function useFrontmatter(relativePagePath) {
           }
         }
       }
-    }   
+    }
   `);
 
   const componentName = relativePagePath.slice(1, relativePagePath.lastIndexOf('/'));
 
-  const data = edges.filter(item => {
+  const data = edges.filter((item) => {
     const { slug, frontmatter } = item.node;
     if (relativePagePath.includes('mobile')) {
-      return slug.includes(componentName) && slug.includes('mobile') && frontmatter.title != frontmatter.description
+      return slug.includes(componentName) && slug.includes('mobile') && frontmatter.title != frontmatter.description;
     }
-    return slug.includes(componentName) && !slug.includes('mobile') && frontmatter.title != frontmatter.description
+    return slug.includes(componentName) && !slug.includes('mobile') && frontmatter.title != frontmatter.description;
   });
   const frontmatter = data[0]?.node.frontmatter;
   return frontmatter;

package/docs/src/util/HeaderItems.js

@@ -9,7 +9,8 @@ export function useHeaderItems() {
         edges {
           node {
             label
-            link            
+            link
+            img
           }
         }
       }

package/docs/src/util/Helpers.js

@@ -1,7 +1,7 @@
 export function debounce(func, delay = 100) {
   let timerId;
   return function () {
-    clearTimeout(timerId)
-    timerId = setTimeout(() => func.apply(this, arguments), delay)
+    clearTimeout(timerId);
+    timerId = setTimeout(() => func.apply(this, arguments), delay);
   };
-};
+}

package/docs/src/util/HomeIcons.js

@@ -1,70 +1,108 @@
-import React from "react";
+import React from 'react';
 
-export const Components = () => <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <title>Group 15</title>
-  <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-    <g id="Landing-screen---Top-navigation" transform="translate(-744.000000, -640.000000)">
-      <g id="Group-15" transform="translate(744.000000, 640.000000)">
-        <g id="Group" fill="#F9E2E2">
-          <circle id="Background" cx="24" cy="24" r="24"></circle>
-        </g>
-        <g id="widgets_black_24dp" transform="translate(12.000000, 12.000000)">
-          <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
-          <path d="M13,14 L13,20 C13,20.55 13.45,21 14,21 L20,21 C20.55,21 21,20.55 21,20 L21,14 C21,13.45 20.55,13 20,13 L14,13 C13.45,13 13,13.45 13,14 Z M4,21 L10,21 C10.55,21 11,20.55 11,20 L11,14 C11,13.45 10.55,13 10,13 L4,13 C3.45,13 3,13.45 3,14 L3,20 C3,20.55 3.45,21 4,21 Z M3,4 L3,10 C3,10.55 3.45,11 4,11 L10,11 C10.55,11 11,10.55 11,10 L11,4 C11,3.45 10.55,3 10,3 L4,3 C3.45,3 3,3.45 3,4 Z M15.95,2.4 L11.7,6.64 C11.31,7.03 11.31,7.66 11.7,8.05 L15.95,12.3 C16.34,12.69 16.97,12.69 17.36,12.3 L21.61,8.05 C22,7.66 22,7.03 21.61,6.64 L17.37,2.4 C16.98,2.01 16.34,2.01 15.95,2.4 Z" id="Shape" fill="#D93737" fillRule="nonzero"></path>
+export const Components = () => (
+  <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Group 15</title>
+    <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Landing-screen---Top-navigation" transform="translate(-744.000000, -640.000000)">
+        <g id="Group-15" transform="translate(744.000000, 640.000000)">
+          <g id="Group" fill="#F9E2E2">
+            <circle id="Background" cx="24" cy="24" r="24"></circle>
+          </g>
+          <g id="widgets_black_24dp" transform="translate(12.000000, 12.000000)">
+            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+            <path
+              d="M13,14 L13,20 C13,20.55 13.45,21 14,21 L20,21 C20.55,21 21,20.55 21,20 L21,14 C21,13.45 20.55,13 20,13 L14,13 C13.45,13 13,13.45 13,14 Z M4,21 L10,21 C10.55,21 11,20.55 11,20 L11,14 C11,13.45 10.55,13 10,13 L4,13 C3.45,13 3,13.45 3,14 L3,20 C3,20.55 3.45,21 4,21 Z M3,4 L3,10 C3,10.55 3.45,11 4,11 L10,11 C10.55,11 11,10.55 11,10 L11,4 C11,3.45 10.55,3 10,3 L4,3 C3.45,3 3,3.45 3,4 Z M15.95,2.4 L11.7,6.64 C11.31,7.03 11.31,7.66 11.7,8.05 L15.95,12.3 C16.34,12.69 16.97,12.69 17.36,12.3 L21.61,8.05 C22,7.66 22,7.03 21.61,6.64 L17.37,2.4 C16.98,2.01 16.34,2.01 15.95,2.4 Z"
+              id="Shape"
+              fill="#D93737"
+              fillRule="nonzero"
+            ></path>
+          </g>
         </g>
       </g>
     </g>
-  </g>
-</svg>
+  </svg>
+);
 
-export const Foundations = () => <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <title>Group 13</title>
-  <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-    <g id="Landing-screen---Top-navigation" transform="translate(-150.000000, -640.000000)">
-      <g id="Group-13" transform="translate(150.000000, 640.000000)">
-        <circle id="Background" fill="#D7EFDF" cx="24" cy="24" r="24"></circle>
-        <g id="apartment_black_24dp" transform="translate(12.000000, 12.000000)">
-          <g id="Group">
-            <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
-            <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
+export const Foundations = () => (
+  <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Group 13</title>
+    <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Landing-screen---Top-navigation" transform="translate(-150.000000, -640.000000)">
+        <g id="Group-13" transform="translate(150.000000, 640.000000)">
+          <circle id="Background" fill="#D7EFDF" cx="24" cy="24" r="24"></circle>
+          <g id="apartment_black_24dp" transform="translate(12.000000, 12.000000)">
+            <g id="Group">
+              <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
+              <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
+            </g>
+            <path
+              d="M17,11 L17,5 C17,3.9 16.1,3 15,3 L9,3 C7.9,3 7,3.9 7,5 L7,7 L5,7 C3.9,7 3,7.9 3,9 L3,19 C3,20.1 3.9,21 5,21 L10,21 C10.55,21 11,20.55 11,20 L11,17 L13,17 L13,20 C13,20.55 13.45,21 14,21 L19,21 C20.1,21 21,20.1 21,19 L21,13 C21,11.9 20.1,11 19,11 L17,11 Z M7,19 L5,19 L5,17 L7,17 L7,19 Z M7,15 L5,15 L5,13 L7,13 L7,15 Z M7,11 L5,11 L5,9 L7,9 L7,11 Z M11,15 L9,15 L9,13 L11,13 L11,15 Z M11,11 L9,11 L9,9 L11,9 L11,11 Z M11,7 L9,7 L9,5 L11,5 L11,7 Z M15,15 L13,15 L13,13 L15,13 L15,15 Z M15,11 L13,11 L13,9 L15,9 L15,11 Z M15,7 L13,7 L13,5 L15,5 L15,7 Z M19,19 L17,19 L17,17 L19,17 L19,19 Z M19,15 L17,15 L17,13 L19,13 L19,15 Z"
+              id="Shape"
+              fill="#2EA843"
+              fillRule="nonzero"
+            ></path>
           </g>
-          <path d="M17,11 L17,5 C17,3.9 16.1,3 15,3 L9,3 C7.9,3 7,3.9 7,5 L7,7 L5,7 C3.9,7 3,7.9 3,9 L3,19 C3,20.1 3.9,21 5,21 L10,21 C10.55,21 11,20.55 11,20 L11,17 L13,17 L13,20 C13,20.55 13.45,21 14,21 L19,21 C20.1,21 21,20.1 21,19 L21,13 C21,11.9 20.1,11 19,11 L17,11 Z M7,19 L5,19 L5,17 L7,17 L7,19 Z M7,15 L5,15 L5,13 L7,13 L7,15 Z M7,11 L5,11 L5,9 L7,9 L7,11 Z M11,15 L9,15 L9,13 L11,13 L11,15 Z M11,11 L9,11 L9,9 L11,9 L11,11 Z M11,7 L9,7 L9,5 L11,5 L11,7 Z M15,15 L13,15 L13,13 L15,13 L15,15 Z M15,11 L13,11 L13,9 L15,9 L15,11 Z M15,7 L13,7 L13,5 L15,5 L15,7 Z M19,19 L17,19 L17,17 L19,17 L19,19 Z M19,15 L17,15 L17,13 L19,13 L19,15 Z" id="Shape" fill="#2EA843" fillRule="nonzero"></path>
         </g>
       </g>
     </g>
-  </g>
-</svg>
+  </svg>
+);
 
-export const Content = () => <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <title>Group 14</title>
-  <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-    <g id="Landing-screen---Top-navigation" transform="translate(-447.000000, -640.000000)">
-      <g id="Group-14" transform="translate(447.000000, 640.000000)">
-        <g id="Group" fill="#FDE6CE">
-          <circle id="Background" cx="24" cy="24" r="24"></circle>
-        </g>
-        <g id="notes_black_24dp" transform="translate(12.000000, 12.000000)">
-          <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
-          <path d="M20,11 L4,11 C3.45,11 3,11.45 3,12 C3,12.55 3.45,13 4,13 L20,13 C20.55,13 21,12.55 21,12 C21,11.45 20.55,11 20,11 Z M4,18 L14,18 C14.55,18 15,17.55 15,17 C15,16.45 14.55,16 14,16 L4,16 C3.45,16 3,16.45 3,17 C3,17.55 3.45,18 4,18 Z M20,6 L4,6 C3.45,6 3,6.45 3,7 L3,7.01 C3,7.56 3.45,8.01 4,8.01 L20,8.01 C20.55,8.01 21,7.56 21,7.01 L21,7 C21,6.45 20.55,6 20,6 Z" id="Shape" fill="#F07D00" fillRule="nonzero"></path>
+export const Content = () => (
+  <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Group 14</title>
+    <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Landing-screen---Top-navigation" transform="translate(-447.000000, -640.000000)">
+        <g id="Group-14" transform="translate(447.000000, 640.000000)">
+          <g id="Group" fill="#FDE6CE">
+            <circle id="Background" cx="24" cy="24" r="24"></circle>
+          </g>
+          <g id="notes_black_24dp" transform="translate(12.000000, 12.000000)">
+            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+            <path
+              d="M20,11 L4,11 C3.45,11 3,11.45 3,12 C3,12.55 3.45,13 4,13 L20,13 C20.55,13 21,12.55 21,12 C21,11.45 20.55,11 20,11 Z M4,18 L14,18 C14.55,18 15,17.55 15,17 C15,16.45 14.55,16 14,16 L4,16 C3.45,16 3,16.45 3,17 C3,17.55 3.45,18 4,18 Z M20,6 L4,6 C3.45,6 3,6.45 3,7 L3,7.01 C3,7.56 3.45,8.01 4,8.01 L20,8.01 C20.55,8.01 21,7.56 21,7.01 L21,7 C21,6.45 20.55,6 20,6 Z"
+              id="Shape"
+              fill="#F07D00"
+              fillRule="nonzero"
+            ></path>
+          </g>
         </g>
       </g>
     </g>
-  </g>
-</svg>
+  </svg>
+);
 
-export const Patterns = () => <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <title>Group 16</title>
-  <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-    <g id="Landing-screen---Top-navigation" transform="translate(-1041.000000, -640.000000)">
-      <g id="Group-16" transform="translate(1041.000000, 640.000000)">
-        <g id="Group" fill="#E0D8EE">
-          <circle id="Background" cx="24" cy="24" r="24"></circle>
-        </g>
-        <g id="pattern_black_24dp" transform="translate(12.000000, 12.000000)">
-          <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
-          <path d="M4,6 C4,4.9 4.9,4 6,4 C7.1,4 8,4.9 8,6 C8,7.1 7.1,8 6,8 C4.9,8 4,7.1 4,6 Z M6,14 C7.1,14 8,13.1 8,12 C8,10.9 7.1,10 6,10 C4.9,10 4,10.9 4,12 C4,13.1 4.9,14 6,14 Z M12,8 C13.1,8 14,7.1 14,6 C14,4.9 13.1,4 12,4 C10.9,4 10,4.9 10,6 C10,7.1 10.9,8 12,8 Z M18,10 C16.9,10 16,10.9 16,12 C16,13.1 16.9,14 18,14 C19.1,14 20,13.1 20,12 C20,10.9 19.1,10 18,10 Z M17.98,16 C17.24,16 16.61,16.4 16.26,17 L13.72,17 C13.38,16.4 12.74,16 12,16 C11.26,16 10.63,16.4 10.28,17 L8.41,17 L11.48,13.93 C11.65,13.97 11.82,14 12,14 C13.1,14 14,13.1 14,12 C14,11.82 13.97,11.65 13.93,11.49 L17.49,7.93 C17.65,7.97 17.82,8 18,8 C19.1,8 20,7.1 20,6 C20,4.9 19.1,4 18,4 C16.9,4 16,4.9 16,6 C16,6.18 16.03,6.35 16.07,6.51 L12.51,10.07 C12.35,10.03 12.18,10 12,10 C10.9,10 10,10.9 10,12 C10,12.18 10.03,12.35 10.07,12.51 L6.51,16.07 C6.35,16.03 6.18,16 6,16 C4.9,16 4,16.9 4,18 C4,19.1 4.9,20 6,20 C6.74,20 7.37,19.6 7.72,19 L10.29,19 C10.63,19.6 11.27,20 12.01,20 C12.75,20 13.38,19.6 13.73,19 L16.28,19 C16.62,19.6 17.26,20 18,20 C19.1,20 20,19.1 20,18 C19.98,16.9 19.08,16 17.98,16 Z" id="Shape" fill="#7A53B2" fillRule="nonzero"></path>
+export const Patterns = () => (
+  <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Group 16</title>
+    <g id="Web" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Landing-screen---Top-navigation" transform="translate(-1041.000000, -640.000000)">
+        <g id="Group-16" transform="translate(1041.000000, 640.000000)">
+          <g id="Group" fill="#E0D8EE">
+            <circle id="Background" cx="24" cy="24" r="24"></circle>
+          </g>
+          <g id="pattern_black_24dp" transform="translate(12.000000, 12.000000)">
+            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+            <path
+              d="M4,6 C4,4.9 4.9,4 6,4 C7.1,4 8,4.9 8,6 C8,7.1 7.1,8 6,8 C4.9,8 4,7.1 4,6 Z M6,14 C7.1,14 8,13.1 8,12 C8,10.9 7.1,10 6,10 C4.9,10 4,10.9 4,12 C4,13.1 4.9,14 6,14 Z M12,8 C13.1,8 14,7.1 14,6 C14,4.9 13.1,4 12,4 C10.9,4 10,4.9 10,6 C10,7.1 10.9,8 12,8 Z M18,10 C16.9,10 16,10.9 16,12 C16,13.1 16.9,14 18,14 C19.1,14 20,13.1 20,12 C20,10.9 19.1,10 18,10 Z M17.98,16 C17.24,16 16.61,16.4 16.26,17 L13.72,17 C13.38,16.4 12.74,16 12,16 C11.26,16 10.63,16.4 10.28,17 L8.41,17 L11.48,13.93 C11.65,13.97 11.82,14 12,14 C13.1,14 14,13.1 14,12 C14,11.82 13.97,11.65 13.93,11.49 L17.49,7.93 C17.65,7.97 17.82,8 18,8 C19.1,8 20,7.1 20,6 C20,4.9 19.1,4 18,4 C16.9,4 16,4.9 16,6 C16,6.18 16.03,6.35 16.07,6.51 L12.51,10.07 C12.35,10.03 12.18,10 12,10 C10.9,10 10,10.9 10,12 C10,12.18 10.03,12.35 10.07,12.51 L6.51,16.07 C6.35,16.03 6.18,16 6,16 C4.9,16 4,16.9 4,18 C4,19.1 4.9,20 6,20 C6.74,20 7.37,19.6 7.72,19 L10.29,19 C10.63,19.6 11.27,20 12.01,20 C12.75,20 13.38,19.6 13.73,19 L16.28,19 C16.62,19.6 17.26,20 18,20 C19.1,20 20,19.1 20,18 C19.98,16.9 19.08,16 17.98,16 Z"
+              id="Shape"
+              fill="#7A53B2"
+              fillRule="nonzero"
+            ></path>
+          </g>
         </g>
       </g>
     </g>
-  </g>
-</svg>
+  </svg>
+);
+
+export const Storybook = () => (
+  <svg width="20" height="15" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18 13v6c0 .5304-.2107 1.0391-.5858 1.4142S16.5304 21 16 21H5c-.53043 0-1.03914-.2107-1.41421-.5858C3.21071 20.0391 3 19.5304 3 19V8c0-.53043.21071-1.03914.58579-1.41421C3.96086 6.21071 4.46957 6 5 6h6M15 3h6v6M10 14L21 3"
+      stroke-width="2"
+      stroke="#2f2f2f"
+    ></path>
+  </svg>
+);

package/docs/src/util/InPageNavItems.js

@@ -22,12 +22,8 @@ export function useNavItems(relativePagePath) {
 
   const headings = edges
     .filter(({ node }) => {
-      const fileName =
-        node.fileAbsolutePath.split('pages')[1];
-      if (
-        fileName === relativePagePath &&
-        node.headings.length
-      ) {
+      const fileName = node.fileAbsolutePath.split('pages')[1];
+      if (fileName === relativePagePath && node.headings.length) {
         return node;
       }
     })

package/docs/src/util/Logos.js

@@ -5,7 +5,7 @@ export function useLogoItems() {
     allFile: { edges },
   } = useStaticQuery(graphql`
     query IMAGES {
-      allFile(filter: {sourceInstanceName: {eq: "StaticImages"}}) {
+      allFile(filter: { sourceInstanceName: { eq: "StaticImages" } }) {
         edges {
           node {
             childImageSharp {
@@ -19,6 +19,6 @@ export function useLogoItems() {
       }
     }
   `);
-  const data = edges.map((item) => item.node.childImageSharp)
+  const data = edges.map((item) => item.node.childImageSharp);
   return data;
 }

package/docs/src/util/MdsChangelog.js

@@ -5,7 +5,7 @@ export default function MdsChangelog() {
     allMdx: { edges },
   } = useStaticQuery(graphql`
     query MDS_CHANGELOG {
-      allMdx(filter: {frontmatter: {title: {eq: "Release notes"}}}) {
+      allMdx(filter: { frontmatter: { title: { eq: "Release notes" } } }) {
         edges {
           node {
             internal {
@@ -17,7 +17,7 @@ export default function MdsChangelog() {
           }
         }
       }
-    }  
+    }
   `);
 
   const items = edges.map(({ node }) => node);
@@ -25,18 +25,14 @@ export default function MdsChangelog() {
   const record = {
     version: '',
     releaseDate: '',
-    updatesList: []
-  }
+    updatesList: [],
+  };
 
   if (items.length > 0) {
-
     const metadata = items[0].headings[0].value;
 
     record.version = metadata.substring(0, metadata.indexOf('('));
-    record.releaseDate = metadata.substring(
-      metadata.indexOf("(") + 1,
-      metadata.lastIndexOf(")")
-    );
+    record.releaseDate = metadata.substring(metadata.indexOf('(') + 1, metadata.lastIndexOf(')'));
 
     const htmlContent = items[0].internal.content;
     const latestUpdate = htmlContent.split('\n----')[0];
@@ -49,7 +45,6 @@ export default function MdsChangelog() {
     updateList
       .filter((item) => item.includes(listSeparator))
       .map((item) => record.updatesList.push(item.split(listSeparator)));
-
   }
   return record;
 }

package/docs/src/util/MediumBlogs.js

@@ -4,23 +4,23 @@ export default function MediumBlogs() {
   const {
     allMediumPost: { edges },
   } = useStaticQuery(graphql`
-      query MEDIUM_BLOGS {
-        allMediumPost(sort: {fields: [createdAt], order: DESC}) {
-          edges {
-            node {
-              id
-              title
-              uniqueSlug
-              firstPublishedAt
-              author {
-                name
-                imageId
-              }
+    query MEDIUM_BLOGS {
+      allMediumPost(sort: { fields: [createdAt], order: DESC }) {
+        edges {
+          node {
+            id
+            title
+            uniqueSlug
+            firstPublishedAt
+            author {
+              name
+              imageId
             }
           }
         }
       }
-  `)
+    }
+  `);
 
   const items = edges.map(({ node }) => node);
   return items;

package/docs/src/util/NavItems.js

@@ -5,24 +5,24 @@ export function useNavItems(relativePagePath) {
   const {
     allNavYaml: { nodes },
   } = useStaticQuery(graphql`
-      query LEFT_NAV_QUERY {
-        allNavYaml {
-          nodes {
-            base
-            menus {
+    query LEFT_NAV_QUERY {
+      allNavYaml {
+        nodes {
+          base
+          menus {
+            label
+            link
+            hideInMobile
+            hideInWeb
+            subMenu {
               label
               link
-              hideInMobile
-              hideInWeb
-              subMenu {
-                label
-                link
-              }
             }
           }
         }
       }
-    `);
+    }
+  `);
 
   const getKey = (nodes, relativePath) => {
     const keys = nodes.map((elt) => {
@@ -47,7 +47,7 @@ export function useNavItems(relativePagePath) {
     });
 
     return value;
-  }
+  };
 
   const pagePath = relativePagePath.includes(MOBILE)
     ? relativePagePath.split('/')[2]?.replace('.mdx', '')
@@ -59,7 +59,6 @@ export function useNavItems(relativePagePath) {
     return node.base === navPage;
   });
 
-
   const navItems = navData[0].menus.map((node) => {
     const menu = {
       ...node,
@@ -72,9 +71,7 @@ export function useNavItems(relativePagePath) {
         return {
           ...item,
           name: `${menu.name}.${item.label}`,
-          link: relativePagePath.includes(MOBILE) && item.link
-            ? `/mobile${item.link}`
-            : item.link,
+          link: relativePagePath.includes(MOBILE) && item.link ? `/mobile${item.link}` : item.link,
         };
       });
     }

package/docs/src/util/Search.js

@@ -21,7 +21,7 @@ export function useSearchItems() {
 
   const searchList = edges.filter((item) => {
     const { title, description } = item.node.frontmatter;
-    return title && description && title != description
-  })
+    return title && description && title != description;
+  });
   return searchList;
 }

package/docs/src/util/StorybookData.js

@@ -13,12 +13,10 @@ export function useGetStorybookData(componentName) {
           }
         }
       }
-    }  
+    }
   `);
 
-  const list = edges.filter((item) =>
-    item.node.key.includes(componentName.toLowerCase())
-  )
+  const list = edges.filter((item) => item.node.key.includes(componentName.toLowerCase()));
   const result = JSON.parse(list[0].node.value);
   return result;
 }

package/docs/src/util/constants.js

@@ -1,9 +1,5 @@
 export const MOBILE = 'mobile';
-export const buttonVariants = [
-  'basic-button',
-  'alert-button',
-  'split-button',
-];
+export const buttonVariants = ['basic-button', 'alert-button', 'split-button'];
 export const avatarVariants = ['default-avatar', 'size'];
 export const copyMessage = 'Copy';
 export const copyMessageSuccess = 'Copied!';

package/docs/src/util/context/NavContext.js

@@ -19,10 +19,7 @@ const reducer = (state, action) => {
   }
 };
 export const NavContextProvider = ({ children }) => {
-  const [
-    { leftNavIsOpen, searchIsOpen, switcherIsOpen, leftNavScrollOffset },
-    dispatch,
-  ] = useReducer(reducer, {
+  const [{ leftNavIsOpen, searchIsOpen, switcherIsOpen, leftNavScrollOffset }, dispatch] = useReducer(reducer, {
     leftNavIsOpen: false,
     searchIsOpen: false,
     switcherIsOpen: false,

package/docs/src/util/hooks/useMetadata.js

@@ -8,7 +8,7 @@ const useMetadata = () => {
           title
           description
           keywords
-          isSearchEnabled          
+          isSearchEnabled
           lang
         }
       }

package/docs/tools/build.sh

@@ -1,5 +1,6 @@
 # !bin/sh
 
+./tools/changelog.sh &&
 
 ./tools/update-mds.sh &&
 

package/docs/tools/changelog.sh

@@ -1 +1 @@
-cat tools/changeloghead.md node_modules/@innovaccer/design-system/CHANGELOG.md > site/src/pages/introduction/what\'s-new.mdx
+cat tools/changeloghead.md ../CHANGELOG.md > src/pages/introduction/what\'s-new.mdx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovaccer/design-system",
-  "version": "2.13.3",
+  "version": "2.13.4-2",
   "description": "React components library project for Innovaccer Design System",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -19,7 +19,7 @@
     "deploy-storybook": "storybook-to-aws-s3",
     "setup-css-dev": "./scripts/setup-local-css.sh",
     "pre-commit": "lint-staged",
-    "lint:check": "eslint ./core --ext .tsx,.ts",
+    "lint:check": "eslint ./core --ext .tsx,.ts,.js,.jsx",
     "lint": "npm run lint:check -- --fix",
     "prettier:check": "prettier --config ./.prettierrc --check",
     "prettier": "prettier --config ./.prettierrc --write 'css/src/**/*.css'",
@@ -143,7 +143,7 @@
   ],
   "repository": "github:innovaccer/design-system",
   "lint-staged": {
-    "core/**/*.{tx,tsx}": [
+    "core/**/*.{tx,tsx,js,jsx}": [
       "npm run lint:check"
     ],
     "css/src/**/*.css": [

package/docs/src/pages/components/index.mdx

@@ -1,11 +0,0 @@
----
-title: Components
-description: Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
-tabs: ["All components", "Status"]
-showMobile: true
----
-
-import Overview from '../../data/components/Overview.js';
-import { data } from "../../data/components/index.js";
-
-<Overview data={data} />

package/docs/src/pages/content/button-guidelines/index.mdx

@@ -1,7 +0,0 @@
----
-title: Button guidelines
-description: Use this guide to make your labels predictable and consequential. Your users depend on them, give it some thought and time.
-tabs: ['Confusing buttons', 'Button glossary']
----
-
-Use this guide to make your labels predictable and consequential. Your users depend on them, give it some thought and time.