add empty state preview

aries-site/src/data/structures/templates/templates.js

@@ -2,6 +2,7 @@ import { Notification } from 'grommet';
 import {
   ContentLayoutPreview,
   CodeBlocksPreview,
+  EmptyStatePreview,
   FeedbackPreview,
   StatusIndicatorPreview,
   ToastPreview,
@@ -1016,15 +1017,8 @@ export const templates = [
     description: `An empty state refers to when the UI is 
     devoid of any data or information.`,
     preview: {
-      image: {
-        src: {
-          light: '/templateImages/template-preview-banner-notification.svg',
-          // eslint-disable-next-line max-len
-          dark: '/templateImages/template-preview-banner-notification-invert.svg',
-        },
-        alt: 'Banner notification under HPE Global Application header.',
-        fit: 'contain',
-      },
+      component: () => <EmptyStatePreview />,
+      background: 'background-back',
     },
     seoDescription: `An empty state refers to when the UI is devoid of any 
     data or information.`,

aries-site/src/examples/cardPreviews/emptystate.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, Button, Heading, Paragraph } from 'grommet';
+import { CircleInformation } from 'grommet-icons';
+
+export const EmptyStatePreview = () => (
+  <Box gap="small" align="center" flex={false}>
+    <CircleInformation />
+    <Box align="center" gap="xsmall">
+      <Heading margin="none" size='small' level={4}>
+        No items exist
+      </Heading>
+      <Paragraph margin="none" textAlign="center">
+        Error message will be displayed here.
+      </Paragraph>
+    </Box>
+    <Button label="Action item" primary />
+  </Box>
+);

aries-site/src/examples/cardPreviews/index.js

@@ -6,6 +6,7 @@ export * from './checkbox';
 export * from './checkboxgroup';
 export * from './code-blocks';
 export * from './content-layouts';
+export * from './emptystate';
 export * from './data-how-to';
 export * from './dateinput';
 export * from './feedback';