diff --git a/src/components/Common/EmptyData/EmptyData.module.scss b/src/components/Common/EmptyData/EmptyData.module.scss
index 69ec8a9ab..21cffc7be 100644
--- a/src/components/Common/EmptyData/EmptyData.module.scss
+++ b/src/components/Common/EmptyData/EmptyData.module.scss
@@ -6,6 +6,10 @@
width: 100%;
}
+.textContent {
+ text-align: center;
+}
+
.title {
font-size: var(--g-fontSizeHeading3);
font-weight: var(--g-fontWeightMedium);
diff --git a/src/components/Common/EmptyData/EmptyData.tsx b/src/components/Common/EmptyData/EmptyData.tsx
index 3157054a2..da5aea5c4 100644
--- a/src/components/Common/EmptyData/EmptyData.tsx
+++ b/src/components/Common/EmptyData/EmptyData.tsx
@@ -8,20 +8,25 @@ type EmptyDataProps = {
title?: string
description?: string
children?: React.ReactNode
+ icon?: React.ReactNode
}
-export function EmptyData({ title, description, children }: EmptyDataProps) {
+export function EmptyData({ title, description, children, icon }: EmptyDataProps) {
const { t } = useTranslation()
const { Text } = useComponentContext()
return (
-
- {title && (
-
- {title}
-
+ {icon || (
+
)}
- {description && {description}}
+
+ {title && (
+
+ {title}
+
+ )}
+ {description && {description}}
+
{children && children}
diff --git a/src/components/UNSTABLE_TimeOff/PolicyList/PolicyListPresentation.stories.tsx b/src/components/UNSTABLE_TimeOff/PolicyList/PolicyListPresentation.stories.tsx
new file mode 100644
index 000000000..225d925ad
--- /dev/null
+++ b/src/components/UNSTABLE_TimeOff/PolicyList/PolicyListPresentation.stories.tsx
@@ -0,0 +1,84 @@
+import { fn } from 'storybook/test'
+import { PolicyListPresentation } from './PolicyListPresentation'
+import type { PolicyListItem } from './PolicyListTypes'
+
+export default {
+ title: 'Domain/TimeOff/PolicyList',
+}
+
+const onCreatePolicy = fn().mockName('onCreatePolicy')
+const onEditPolicy = fn().mockName('onEditPolicy')
+const onFinishSetup = fn().mockName('onFinishSetup')
+const onDeletePolicy = fn().mockName('onDeletePolicy')
+const onDismissDeleteAlert = fn().mockName('onDismissDeleteAlert')
+
+const completePolicies: PolicyListItem[] = [
+ {
+ uuid: 'policy-1',
+ name: 'Paid Time Off Policy',
+ policyType: 'vacation',
+ isComplete: true,
+ enrolledDisplay: 'All employees',
+ },
+ {
+ uuid: 'policy-2',
+ name: 'Sick Policy',
+ policyType: 'sick',
+ isComplete: true,
+ enrolledDisplay: '16',
+ },
+]
+
+const incompletePolicies: PolicyListItem[] = [
+ ...completePolicies,
+ {
+ uuid: 'policy-3',
+ name: 'Company PTO policy',
+ policyType: 'vacation',
+ isComplete: false,
+ enrolledDisplay: '\u2013',
+ },
+]
+
+export const Default = () => (
+
+)
+
+export const EmptyState = () => (
+
+)
+
+export const WithDeleteSuccessAlert = () => (
+
+)
+
+export const DeletingPolicy = () => (
+
+)