test(SDK-551): add PolicyListPresentation Storybook stories

e2e/main.tsx

@@ -114,33 +114,42 @@ const FLOW_OPTIONS: { value: FlowType; label: string }[] = [
 ]
 
 function FlowSelector({ currentFlow }: { currentFlow: FlowType }) {
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const params = new URLSearchParams(window.location.search)
-    params.set('flow', e.target.value)
-    window.location.search = params.toString()
-  }
-
   return (
-    <div
-      aria-hidden="true"
-      style={{ padding: '8px 0', borderBottom: '1px solid #e5e7eb', marginBottom: 16 }}
+    <nav
+      aria-label="Flow selector"
+      style={{
+        padding: '8px 0',
+        borderBottom: '1px solid #e5e7eb',
+        marginBottom: 16,
+        display: 'flex',
+        gap: 8,
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        fontSize: 13,
+      }}
     >
-      <label htmlFor="flow-selector" style={{ marginRight: 8, fontSize: 14 }}>
-        Flow:
-      </label>
-      <select
-        id="flow-selector"
-        value={currentFlow}
-        onChange={handleChange}
-        style={{ fontSize: 14 }}
-      >
-        {FLOW_OPTIONS.map(opt => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-    </div>
+      <span style={{ fontWeight: 600 }}>Flow:</span>
+      {FLOW_OPTIONS.map((opt, i) => {
+        const params = new URLSearchParams(window.location.search)
+        params.set('flow', opt.value)
+        const isActive = opt.value === currentFlow
+        return (
+          <span key={opt.value}>
+            {i > 0 && <span style={{ color: '#d1d5db' }}>|</span>}
+            <a
+              href={`?${params.toString()}`}
+              style={{
+                fontWeight: isActive ? 600 : 400,
+                color: isActive ? '#111827' : '#6b7280',
+                textDecoration: isActive ? 'none' : 'underline',
+              }}
+            >
+              {opt.label}
+            </a>
+          </span>
+        )
+      })}
+    </nav>
   )
 }
 

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.module.scss

@@ -0,0 +1,6 @@
+.actionsCell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: toRem(12);
+}

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"
+  />
+)

src/components/UNSTABLE_TimeOff/PolicyList/PolicyListPresentation.tsx

@@ -0,0 +1,153 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { PolicyListPresentationProps, PolicyListItem } from './PolicyListTypes'
+import styles from './PolicyListPresentation.module.scss'
+import {
+  DataView,
+  Flex,
+  EmptyData,
+  ActionsLayout,
+  HamburgerMenu,
+  useDataView,
+} from '@/components/Common'
+import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
+import { useI18n } from '@/i18n'
+
+export function PolicyListPresentation({
+  policies,
+  onCreatePolicy,
+  onEditPolicy,
+  onFinishSetup,
+  onDeletePolicy,
+  deleteSuccessAlert,
+  onDismissDeleteAlert,
+  isDeletingPolicyId,
+}: PolicyListPresentationProps) {
+  const { Button, Heading, Text, Alert, Dialog } = useComponentContext()
+  useI18n('Company.TimeOff.TimeOffPolicies')
+  const { t } = useTranslation('Company.TimeOff.TimeOffPolicies')
+
+  const [deletePolicyDialogState, setDeletePolicyDialogState] = useState<{
+    isOpen: boolean
+    policy: PolicyListItem | null
+  }>({
+    isOpen: false,
+    policy: null,
+  })
+
+  const handleOpenDeleteDialog = (policy: PolicyListItem) => {
+    setDeletePolicyDialogState({ isOpen: true, policy })
+  }
+
+  const handleCloseDeleteDialog = () => {
+    setDeletePolicyDialogState({ isOpen: false, policy: null })
+  }
+
+  const handleConfirmDelete = () => {
+    if (deletePolicyDialogState.policy) {
+      onDeletePolicy(deletePolicyDialogState.policy)
+      handleCloseDeleteDialog()
+    }
+  }
+
+  const { ...dataViewProps } = useDataView({
+    data: policies,
+    columns: [
+      {
+        title: t('tableHeaders.name'),
+        render: (policy: PolicyListItem) => <Text weight="medium">{policy.name}</Text>,
+      },
+      {
+        title: t('tableHeaders.enrolled'),
+        render: (policy: PolicyListItem) => (
+          <Text variant="supporting">{policy.enrolledDisplay}</Text>
+        ),
+      },
+    ],
+    itemMenu: (policy: PolicyListItem) => {
+      const isDeleting = isDeletingPolicyId === policy.uuid
+
+      return (
+        <div className={styles.actionsCell}>
+          {!policy.isComplete && (
+            <Button
+              variant="secondary"
+              onClick={() => {
+                onFinishSetup(policy)
+              }}
+            >
+              {t('finishSetupCta')}
+            </Button>
+          )}
+          <HamburgerMenu
+            isLoading={isDeleting}
+            menuLabel={t('tableLabel')}
+            items={[
+              {
+                label: t('actions.editPolicy'),
+                onClick: () => {
+                  onEditPolicy(policy)
+                },
+              },
+              {
+                label: t('actions.deletePolicy'),
+                onClick: () => {
+                  handleOpenDeleteDialog(policy)
+                },
+              },
+            ]}
+          />
+        </div>
+      )
+    },
+    emptyState: () => (
+      <EmptyData title={t('emptyState.heading')} description={t('emptyState.body')}>
+        <ActionsLayout justifyContent="center">
+          <Button variant="secondary" onClick={onCreatePolicy}>
+            {t('createPolicyCta')}
+          </Button>
+        </ActionsLayout>
+      </EmptyData>
+    ),
+  })
+
+  return (
+    <Flex flexDirection="column" gap={16}>
+      {deleteSuccessAlert && (
+        <Alert status="success" label={deleteSuccessAlert} onDismiss={onDismissDeleteAlert} />
+      )}
+
+      <Flex
+        flexDirection={{ base: 'column', medium: 'row' }}
+        justifyContent="space-between"
+        alignItems="flex-start"
+        gap={{ base: 12, medium: 24 }}
+      >
+        <Heading as="h2">{t('pageTitle')}</Heading>
+        {policies.length > 0 && (
+          <Button variant="primary" onClick={onCreatePolicy}>
+            {t('createPolicyCta')}
+          </Button>
+        )}
+      </Flex>
+
+      <DataView label={t('tableLabel')} {...dataViewProps} />
+
+      <Dialog
+        isOpen={deletePolicyDialogState.isOpen}
+        onClose={handleCloseDeleteDialog}
+        onPrimaryActionClick={handleConfirmDelete}
+        isDestructive
+        title={t('deletePolicyDialog.title', {
+          name: deletePolicyDialogState.policy?.name ?? '',
+        })}
+        primaryActionLabel={t('deletePolicyDialog.confirmCta')}
+        closeActionLabel={t('deletePolicyDialog.cancelCta')}
+      >
+        {t('deletePolicyDialog.description', {
+          name: deletePolicyDialogState.policy?.name ?? '',
+        })}
+      </Dialog>
+    </Flex>
+  )
+}

src/components/UNSTABLE_TimeOff/PolicyList/PolicyListTypes.ts

@@ -0,0 +1,18 @@
+export interface PolicyListItem {
+  uuid: string
+  name: string
+  policyType: string
+  isComplete: boolean
+  enrolledDisplay: string
+}
+
+export interface PolicyListPresentationProps {
+  policies: PolicyListItem[]
+  onCreatePolicy: () => void
+  onEditPolicy: (policy: PolicyListItem) => void
+  onFinishSetup: (policy: PolicyListItem) => void
+  onDeletePolicy: (policy: PolicyListItem) => void
+  deleteSuccessAlert?: string | null
+  onDismissDeleteAlert?: () => void
+  isDeletingPolicyId?: string | null
+}