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 (
- {t('icons.magnifyingGlass')} - {title && ( - - {title} - + {icon || ( + {t('icons.magnifyingGlass')} )} - {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 = () => ( + +)