feat: init empty-data component

src/components/empty-data/__tests__/__snapshots__/empty-data.test.tsx.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EmptyData > should render default component properly and match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-3 el-empty-data"
+  >
+    <div
+      class="mocked-styled-0 el-empty-data-description"
+    >
+      Description
+    </div>
+    <div
+      class="mocked-styled-1 el-empty-data-secondary-description"
+    >
+      Secondary Description
+    </div>
+    <button
+      class="mocked-styled-2 el-empty-data-action-button"
+    >
+      Action Button Text
+    </button>
+  </div>
+</DocumentFragment>
+`;

src/components/empty-data/__tests__/empty-data.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import { EmptyData } from '../empty-data'
+
+describe('EmptyData', () => {
+  it('should render default component properly and match snapshot', () => {
+    const { asFragment } = render(
+      <EmptyData>
+        <EmptyData.Description>Description</EmptyData.Description>
+        <EmptyData.SecondaryDescription>Secondary Description</EmptyData.SecondaryDescription>
+        <EmptyData.ActionButton onClick={console.log}>Action Button Text</EmptyData.ActionButton>
+      </EmptyData>,
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

src/components/empty-data/empty-data.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Canvas, Controls, Description } from '@storybook/blocks'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as EmptyDataStories from './empty-data.stories'
+
+<Meta of={EmptyDataStories} />
+
+
+# Empty Data
+
+<Description of={EmptyDataStories.Default} />
+
+<Controls />
+
+## Default
+
+<Canvas of={EmptyDataStories.Default} />
+
+<RenderHtmlMarkup of={EmptyDataStories.Default} />
+
+## Description Only
+
+<Canvas of={EmptyDataStories.DescriptionOnly} />
+
+<RenderHtmlMarkup of={EmptyDataStories.DescriptionOnly} />
+
+
+## Action Only
+
+<Canvas of={EmptyDataStories.ActionOnly} />
+
+<RenderHtmlMarkup of={EmptyDataStories.ActionOnly} />
+

src/components/empty-data/empty-data.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { EmptyData } from './empty-data'
+
+const meta: Meta<typeof EmptyData> = {
+  title: 'Components/Empty Data',
+}
+
+export default meta
+type Story = StoryObj<typeof EmptyData>
+
+/**
+ * The EmptyData component is designed to emphasize that current section of the page
+ * has empty data, but could possibly have different content when there is data available.
+ * The default variant renders a circle with children.
+ *
+ * There are three variants available for the EmptyData component:
+ * Default (full version), Description Only, and Action Only.
+ * See the examples below for more details of the usage.
+ */
+export const Default: Story = {
+  render() {
+    return (
+      <EmptyData>
+        <EmptyData.Description>No things found</EmptyData.Description>
+        <EmptyData.SecondaryDescription>Secondary text</EmptyData.SecondaryDescription>
+        <EmptyData.ActionButton onClick={console.log}>Add Thing</EmptyData.ActionButton>
+      </EmptyData>
+    )
+  },
+}
+
+export const DescriptionOnly: Story = {
+  render() {
+    return (
+      <EmptyData>
+        <EmptyData.Description>No things found</EmptyData.Description>
+        <EmptyData.SecondaryDescription>Secondary text</EmptyData.SecondaryDescription>
+      </EmptyData>
+    )
+  },
+}
+export const ActionOnly: Story = {
+  render() {
+    return (
+      <EmptyData>
+        <EmptyData.ActionButton onClick={console.log}>Action</EmptyData.ActionButton>
+      </EmptyData>
+    )
+  },
+}

src/components/empty-data/empty-data.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react'
+import { ElEmptyData, ElEmptyDataActionButton, ElEmptyDataDescription, ElEmptyDataSecondaryDescription } from './styles'
+import type React from 'react'
+
+type EmptyDataFC = React.FC<HTMLAttributes<HTMLDivElement>> & {
+  Description: typeof ElEmptyDataDescription
+  SecondaryDescription: typeof ElEmptyDataSecondaryDescription
+  ActionButton: typeof ElEmptyDataActionButton
+}
+
+const EmptyData: EmptyDataFC = ({ children, ...props }) => <ElEmptyData {...props}>{children}</ElEmptyData>
+
+EmptyData.Description = ElEmptyDataDescription
+EmptyData.SecondaryDescription = ElEmptyDataSecondaryDescription
+EmptyData.ActionButton = ElEmptyDataActionButton
+
+export { EmptyData }

src/components/empty-data/index.tsx

@@ -0,0 +1,2 @@
+export * from './empty-data.js'
+export * from './styles.js'

src/components/empty-data/styles.ts

@@ -0,0 +1,50 @@
+import { styled } from '@linaria/react'
+
+export const ElEmptyDataDescription = styled.div`
+  color: var(text-primary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+  letter-spacing: var(--letter-spacing-base);
+`
+
+export const ElEmptyDataSecondaryDescription = styled.div`
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm,);
+  font-weight: var(--font-weight-regular,);
+  line-height: var(--line-height-sm,);
+  letter-spacing: var(--letter-spacing-sm);
+`
+
+export const ElEmptyDataActionButton = styled.button`
+  color: var(--text-action);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-sm);
+  letter-spacing: var(--letter-spacing-sm);
+
+  border: none;
+  background: none;
+  cursor: pointer;
+`
+
+export const ElEmptyData = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  // TODO: ask design team to clarify
+  height: 186px;
+  padding: var(--spacing-6);
+  border-radius: var(--corner-lg);
+  background: var(--fill-default-lightest);
+
+  ${ElEmptyDataSecondaryDescription} + ${ElEmptyDataActionButton} {
+    margin-top: var(--spacing-1);
+  }
+
+  & * {
+    font-family: var(--font-family);
+  }
+`

src/index.ts

@@ -59,6 +59,7 @@ export * from './components/avatar'
 export * from './components/skeleton'
 export * from './components/table/table-container'
 export * from './components/table/table-toolbar'
+export * from './components/empty-data'
 
 export * from './hooks/use-portal'
 export * from './hooks/use-snack'