test(SDK-551): add PolicyListPresentation Storybook stories

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);

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 (
     <div className={styles.emptyData} data-testid="emptydata">
       <Flex flexDirection="column" alignItems="center">
-        <img src={magnifyingGlass} alt={t('icons.magnifyingGlass')} className={styles.image} />
-        {title && (
-          <Text weight="bold" className={styles.title}>
-            {title}
-          </Text>
+        {icon || (
+          <img src={magnifyingGlass} alt={t('icons.magnifyingGlass')} className={styles.image} />
         )}
-        {description && <Text>{description}</Text>}
+        <div className={styles.textContent}>
+          {title && (
+            <Text weight="bold" className={styles.title}>
+              {title}
+            </Text>
+          )}
+          {description && <Text>{description}</Text>}
+        </div>
         {children && children}
       </Flex>
     </div>

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 = () => (
+  <PolicyListPresentation
+    policies={incompletePolicies}
+    onCreatePolicy={onCreatePolicy}
+    onEditPolicy={onEditPolicy}
+    onFinishSetup={onFinishSetup}
+    onDeletePolicy={onDeletePolicy}
+  />
+)
+
+export const EmptyState = () => (
+  <PolicyListPresentation
+    policies={[]}
+    onCreatePolicy={onCreatePolicy}
+    onEditPolicy={onEditPolicy}
+    onFinishSetup={onFinishSetup}
+    onDeletePolicy={onDeletePolicy}
+  />
+)
+
+export const WithDeleteSuccessAlert = () => (
+  <PolicyListPresentation
+    policies={completePolicies}
+    onCreatePolicy={onCreatePolicy}
+    onEditPolicy={onEditPolicy}
+    onFinishSetup={onFinishSetup}
+    onDeletePolicy={onDeletePolicy}
+    deleteSuccessAlert='Policy "Bereavement Policy" deleted successfully'
+    onDismissDeleteAlert={onDismissDeleteAlert}
+  />
+)
+
+export const DeletingPolicy = () => (
+  <PolicyListPresentation
+    policies={incompletePolicies}
+    onCreatePolicy={onCreatePolicy}
+    onEditPolicy={onEditPolicy}
+    onFinishSetup={onFinishSetup}
+    onDeletePolicy={onDeletePolicy}
+    isDeletingPolicyId="policy-2"
+  />
+)