Merge pull request #2324 from anuradha9712/feat-empty-states-stories

feat(emptyState): add mds-images import statement in stories
innovaccer · Aug 28, 2024 · c21c7b5 · c21c7b5
2 parents a961f9c + 0c2a5af
commit c21c7b5
Show file tree

Hide file tree

Showing 29 changed files with 442 additions and 232 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -33,6 +33,7 @@ module.exports = {
   },
   webpackFinal: async (config, { configType }) => {
     config.resolve.alias['@'] = path.resolve(__dirname, '../core');
+    config.resolve.alias['@innovaccer/mds-images/ui-states'] = path.resolve(__dirname, '../mds-images/ui-states');
     // Return the altered config
     return config;
   },

diff --git a/core/components/molecules/emptyState/__stories__/index.story.jsx b/core/components/molecules/emptyState/__stories__/index.story.jsx
@@ -4,92 +4,7 @@ import { EmptyState, Button } from '@/index';
 export const all = () => {
   return (
     <EmptyState>
-      <EmptyState.Image>
-        <svg width="201" height="145" viewBox="0 0 201 145" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M101.899 133.44C131.599 133.44 155.799 109.34 155.799 79.7399C155.699 50.0399 131.599 25.9399 101.899 25.9399C72.099 25.9399 47.999 50.0399 47.999 79.6399C47.999 109.34 72.099 133.44 101.899 133.44Z"
-            fill="#F1F3F9"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-          />
-          <path
-            d="M158.999 86.5398C158.999 98.0398 149.699 107.34 138.099 107.34C137.899 107.34 136.199 107.34 123.699 107.34C114.999 107.34 101.099 107.34 78.8988 107.34H68.2988C54.3988 107.64 43.2988 96.5398 43.2988 83.1398C43.2988 69.6398 54.4988 58.4398 68.5988 59.1398C80.6988 21.3398 136.099 26.6398 140.799 65.7398C151.199 67.0398 158.999 75.8398 158.999 86.5398Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-          />
-          <path
-            d="M140.499 65.8402C139.699 65.7402 138.899 65.7402 138.099 65.7402C133.999 65.7402 130.099 66.9402 126.799 69.0402"
-            fill="white"
-          />
-          <path
-            d="M140.499 65.8402C139.699 65.7402 138.899 65.7402 138.099 65.7402C133.999 65.7402 130.099 66.9402 126.799 69.0402"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinecap="round"
-          />
-          <path
-            d="M68.5988 59.1396C67.3988 62.7396 66.7988 66.5396 66.7988 70.5396C66.7988 72.1396 66.8988 73.6396 67.0988 75.1396"
-            fill="white"
-          />
-          <path
-            d="M68.5988 59.1396C67.3988 62.7396 66.7988 66.5396 66.7988 70.5396C66.7988 72.1396 66.8988 73.6396 67.0988 75.1396"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M91.0096 82.6251C92.5842 82.6251 93.9166 81.2927 93.9166 79.7181C93.9166 78.1434 92.5842 76.811 91.0096 76.811C89.4349 76.811 88.1025 78.1434 88.1025 79.7181C88.1025 81.2927 89.4349 82.6251 91.0096 82.6251Z"
-            fill="#989FB0"
-          />
-          <path
-            d="M113.297 82.6251C114.871 82.6251 116.204 81.2927 116.204 79.7181C116.204 78.1434 114.871 76.811 113.297 76.811C111.722 76.811 110.39 78.1434 110.39 79.7181C110.39 81.4138 111.722 82.6251 113.297 82.6251Z"
-            fill="#989FB0"
-          />
-          <path d="M90.8957 70.1009L84.501 73.5537L85.3642 75.1524L91.759 71.6996L90.8957 70.1009Z" fill="#989FB0" />
-          <path d="M112.901 70.0545L112.038 71.6533L118.434 75.1054L119.297 73.5065L112.901 70.0545Z" fill="#989FB0" />
-          <path
-            d="M102.153 89.4086C104.026 89.4086 105.545 88.2698 105.545 86.8649C105.545 85.4601 104.026 84.3213 102.153 84.3213C100.28 84.3213 98.7617 85.4601 98.7617 86.8649C98.7617 88.2698 100.28 89.4086 102.153 89.4086Z"
-            fill="#989FB0"
-          />
-          <path
-            d="M30.873 40.3008C30.873 40.3008 16.8945 43.8499 21.1304 46.6892C25.3663 49.3865 35.3914 54.0713 44.8516 50.9481C54.3118 47.8249 44.8516 43.424 44.9928 43.424C45.134 43.424 30.873 40.3008 30.873 40.3008Z"
-            fill="#F1F3F9"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-          />
-          <path
-            d="M13.7881 39.1652C18.8712 40.7268 34.5441 38.1715 44.5691 31.6411C52.4762 41.4366 55.4413 43.992 58.2653 44.2759C53.8882 48.6768 39.3448 55.775 31.1554 46.5473C21.5539 52.6518 13.7881 39.1652 13.7881 39.1652Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M143.857 74.6615C149.223 74.9454 163.766 68.4151 171.673 59.6133C181.84 67.1374 185.228 68.8409 188.193 68.4151C184.946 73.8097 175.062 85.5927 161.084 86.4445C150.917 80.482 143.857 74.6615 143.857 74.6615Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M101.027 141.253C99.9654 135.985 90.0183 123.527 79.5243 118.062C84.2789 106.342 85.0846 102.636 83.9336 99.87C89.9671 101.671 103.841 108.309 108.148 121.634C104.905 132.965 101.027 141.253 101.027 141.253Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </EmptyState.Image>
+      <EmptyState.Image src="https://mds.innovaccer.com/static/media/no-files-empty-files.442ee36a.svg"></EmptyState.Image>
       <EmptyState.Title>Title goes here</EmptyState.Title>
       <EmptyState.Description>Description goes here</EmptyState.Description>
       <EmptyState.Actions>
@@ -101,94 +16,14 @@ export const all = () => {
 };
 
 const customCode = `() => {
+  // import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
+
   return (
     <EmptyState>
-      <EmptyState.Image>
-        <svg width="201" height="145" viewBox="0 0 201 145" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M101.899 133.44C131.599 133.44 155.799 109.34 155.799 79.7399C155.699 50.0399 131.599 25.9399 101.899 25.9399C72.099 25.9399 47.999 50.0399 47.999 79.6399C47.999 109.34 72.099 133.44 101.899 133.44Z"
-            fill="#F1F3F9"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-          />
-          <path
-            d="M158.999 86.5398C158.999 98.0398 149.699 107.34 138.099 107.34C137.899 107.34 136.199 107.34 123.699 107.34C114.999 107.34 101.099 107.34 78.8988 107.34H68.2988C54.3988 107.64 43.2988 96.5398 43.2988 83.1398C43.2988 69.6398 54.4988 58.4398 68.5988 59.1398C80.6988 21.3398 136.099 26.6398 140.799 65.7398C151.199 67.0398 158.999 75.8398 158.999 86.5398Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-          />
-          <path
-            d="M140.499 65.8402C139.699 65.7402 138.899 65.7402 138.099 65.7402C133.999 65.7402 130.099 66.9402 126.799 69.0402"
-            fill="white"
-          />
-          <path
-            d="M140.499 65.8402C139.699 65.7402 138.899 65.7402 138.099 65.7402C133.999 65.7402 130.099 66.9402 126.799 69.0402"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinecap="round"
-          />
-          <path
-            d="M68.5988 59.1396C67.3988 62.7396 66.7988 66.5396 66.7988 70.5396C66.7988 72.1396 66.8988 73.6396 67.0988 75.1396"
-            fill="white"
-          />
-          <path
-            d="M68.5988 59.1396C67.3988 62.7396 66.7988 66.5396 66.7988 70.5396C66.7988 72.1396 66.8988 73.6396 67.0988 75.1396"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M91.0096 82.6251C92.5842 82.6251 93.9166 81.2927 93.9166 79.7181C93.9166 78.1434 92.5842 76.811 91.0096 76.811C89.4349 76.811 88.1025 78.1434 88.1025 79.7181C88.1025 81.2927 89.4349 82.6251 91.0096 82.6251Z"
-            fill="#989FB0"
-          />
-          <path
-            d="M113.297 82.6251C114.871 82.6251 116.204 81.2927 116.204 79.7181C116.204 78.1434 114.871 76.811 113.297 76.811C111.722 76.811 110.39 78.1434 110.39 79.7181C110.39 81.4138 111.722 82.6251 113.297 82.6251Z"
-            fill="#989FB0"
-          />
-          <path d="M90.8957 70.1009L84.501 73.5537L85.3642 75.1524L91.759 71.6996L90.8957 70.1009Z" fill="#989FB0" />
-          <path d="M112.901 70.0545L112.038 71.6533L118.434 75.1054L119.297 73.5065L112.901 70.0545Z" fill="#989FB0" />
-          <path
-            d="M102.153 89.4086C104.026 89.4086 105.545 88.2698 105.545 86.8649C105.545 85.4601 104.026 84.3213 102.153 84.3213C100.28 84.3213 98.7617 85.4601 98.7617 86.8649C98.7617 88.2698 100.28 89.4086 102.153 89.4086Z"
-            fill="#989FB0"
-          />
-          <path
-            d="M30.873 40.3008C30.873 40.3008 16.8945 43.8499 21.1304 46.6892C25.3663 49.3865 35.3914 54.0713 44.8516 50.9481C54.3118 47.8249 44.8516 43.424 44.9928 43.424C45.134 43.424 30.873 40.3008 30.873 40.3008Z"
-            fill="#F1F3F9"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-          />
-          <path
-            d="M13.7881 39.1652C18.8712 40.7268 34.5441 38.1715 44.5691 31.6411C52.4762 41.4366 55.4413 43.992 58.2653 44.2759C53.8882 48.6768 39.3448 55.775 31.1554 46.5473C21.5539 52.6518 13.7881 39.1652 13.7881 39.1652Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M143.857 74.6615C149.223 74.9454 163.766 68.4151 171.673 59.6133C181.84 67.1374 185.228 68.8409 188.193 68.4151C184.946 73.8097 175.062 85.5927 161.084 86.4445C150.917 80.482 143.857 74.6615 143.857 74.6615Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M101.027 141.253C99.9654 135.985 90.0183 123.527 79.5243 118.062C84.2789 106.342 85.0846 102.636 83.9336 99.87C89.9671 101.671 103.841 108.309 108.148 121.634C104.905 132.965 101.027 141.253 101.027 141.253Z"
-            fill="white"
-            stroke="#D6DCE8"
-            strokeWidth="2"
-            strokeMiterlimit="10"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </EmptyState.Image>
+      <EmptyState.Image src="https://mds.innovaccer.com/static/media/no-files-empty-files.442ee36a.svg" />
+      {/* Replace image path used above with imported image file name
+      <EmptyState.Image src={noFilesEmptyFiles} /> */}
+
       <EmptyState.Title>Title goes here</EmptyState.Title>
       <EmptyState.Description>Description goes here</EmptyState.Description>
       <EmptyState.Actions>

diff --git a/core/components/molecules/emptyState/__stories__/sizes/Compressed.story.jsx b/core/components/molecules/emptyState/__stories__/sizes/Compressed.story.jsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { EmptyState, Button } from '@/index';
-import noContent from '../assets/no-files-empty-files.svg';
+import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
 
 export const compressed = () => {
   return (
     <EmptyState size="compressed">
-      <EmptyState.Image src={noContent}></EmptyState.Image>
+      <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image>
       <EmptyState.Title>Title goes here</EmptyState.Title>
       <EmptyState.Description>Description goes here</EmptyState.Description>
       <EmptyState.Actions>
@@ -16,12 +16,17 @@ export const compressed = () => {
   );
 };
 
-const ImagePath = JSON.stringify(noContent);
+const ImagePath = JSON.stringify(noFilesEmptyFiles);
 
 const customCode = `() => {
+  // import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
+
   return (
       <EmptyState size="compressed">
         <EmptyState.Image src={${ImagePath}}></EmptyState.Image>
+        {/* Replace image path used above with imported image file name
+        <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image> */}
+
         <EmptyState.Title>Title goes here</EmptyState.Title>
         <EmptyState.Description>
           Description goes here

diff --git a/core/components/molecules/emptyState/__stories__/sizes/Standard.story.jsx b/core/components/molecules/emptyState/__stories__/sizes/Standard.story.jsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { EmptyState, Button } from '@/index';
-import noContent from '../assets/no-files-empty-files.svg';
+import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
 
 export const standard = () => {
   return (
     <EmptyState>
-      <EmptyState.Image src={noContent}></EmptyState.Image>
+      <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image>
       <EmptyState.Title>Title goes here</EmptyState.Title>
       <EmptyState.Description>Description goes here</EmptyState.Description>
       <EmptyState.Actions>
@@ -16,12 +16,17 @@ export const standard = () => {
   );
 };
 
-const ImagePath = JSON.stringify(noContent);
+const ImagePath = JSON.stringify(noFilesEmptyFiles);
 
 const customCode = `() => {
+  // import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
+
   return (
       <EmptyState>
         <EmptyState.Image src={${ImagePath}}></EmptyState.Image>
+        {/* Replace image path used above with imported image file name
+        <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image> */}
+
         <EmptyState.Title>Title goes here</EmptyState.Title>
         <EmptyState.Description>
           Description goes here

diff --git a/core/components/molecules/emptyState/__stories__/sizes/Tight.story.jsx b/core/components/molecules/emptyState/__stories__/sizes/Tight.story.jsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { EmptyState, Button } from '@/index';
-import noContent from '../assets/no-files-empty-files.svg';
+import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
 
 export const tight = () => {
   return (
     <EmptyState size="tight">
-      <EmptyState.Image src={noContent}></EmptyState.Image>
+      <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image>
       <EmptyState.Title>Title goes here</EmptyState.Title>
       <EmptyState.Description>Description goes here</EmptyState.Description>
       <EmptyState.Actions>
@@ -20,12 +20,17 @@ export const tight = () => {
   );
 };
 
-const ImagePath = JSON.stringify(noContent);
+const ImagePath = JSON.stringify(noFilesEmptyFiles);
 
 const customCode = `() => {
+  // import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
+
   return (
       <EmptyState size="tight">
         <EmptyState.Image src={${ImagePath}}></EmptyState.Image>
+        {/* Replace image path used above with imported image file name
+        <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image> */}
+
         <EmptyState.Title>Title goes here</EmptyState.Title>
         <EmptyState.Description>
           Description goes here

diff --git a/core/components/molecules/emptyState/__stories__/variants/EmptyData.story.jsx b/core/components/molecules/emptyState/__stories__/variants/EmptyData.story.jsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { EmptyState, Button } from '@/index';
-import noContent from '../assets/no-files-empty-files.svg';
+import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
 
 export const emptyData = () => {
   return (
     <EmptyState>
-      <EmptyState.Image src={noContent}></EmptyState.Image>
+      <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image>
       <EmptyState.Title>There are no referrals yet</EmptyState.Title>
+
       <EmptyState.Description>When you create a new referral, you will see it here.</EmptyState.Description>
       <EmptyState.Actions>
         <Button className="mr-4">Secondary action</Button>
@@ -15,13 +16,17 @@ export const emptyData = () => {
     </EmptyState>
   );
 };
-
-const ImagePath = JSON.stringify(noContent);
+const ImagePath = JSON.stringify(noFilesEmptyFiles);
 
 const customCode = `() => {
+  // import noFilesEmptyFiles from '@innovaccer/mds-images/ui-states/no-files-empty-files.svg';
+
   return (
       <EmptyState>
         <EmptyState.Image src={${ImagePath}}></EmptyState.Image>
+        {/* Replace image path used above with imported image file name
+        <EmptyState.Image src={noFilesEmptyFiles}></EmptyState.Image> */}
+
         <EmptyState.Title>There are no referrals yet</EmptyState.Title>
         <EmptyState.Description>When you create a new referral, you will see it here.</EmptyState.Description>
         <EmptyState.Actions>

diff --git a/...ries__/variants/FaildToLoadData.story.jsx → ...ies__/variants/FailedToLoadData.story.jsx b/...ries__/variants/FaildToLoadData.story.jsx → ...ies__/variants/FailedToLoadData.story.jsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EmptyState, Button } from '@/index';
-import noContent from '../assets/404-nothing-here-3.svg';
+import noContent from '@innovaccer/mds-images/ui-states/404-nothing-here-3.svg';
 
-export const faildToLoadData = () => {
+export const failedToLoadData = () => {
   return (
     <EmptyState>
       <EmptyState.Image src={noContent}></EmptyState.Image>
@@ -20,9 +20,14 @@ export const faildToLoadData = () => {
 const ImagePath = JSON.stringify(noContent);
 
 const customCode = `() => {
+  // import noContent from '@innovaccer/mds-images/ui-states/404-nothing-here-3.svg';
+
   return (
       <EmptyState>
         <EmptyState.Image src={${ImagePath}}></EmptyState.Image>
+        {/* Replace image path used above with imported image file name
+        <EmptyState.Image src={noContent}></EmptyState.Image> */}
+
         <EmptyState.Title>Failed to load data</EmptyState.Title>
         <EmptyState.Description>
           We are unable to fetch the data. Try again. If the issue persists, contact Innovaccer support.
@@ -35,7 +40,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/EmptyState/Variants/Faild To Load Data',
+  title: 'Components/EmptyState/Variants/Failed To Load Data',
   component: EmptyState,
   subcomponents: {
     'EmptyState.Image': EmptyState.Image,