From 5c00ae0bd291a107c57ff17107764eebf4fcf8b5 Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Fri, 6 Oct 2023 14:06:27 -0400
Subject: [PATCH] feature: DatasetAlert component and first story

---
 .../dataset/dataset-alerts/DatasetAlerts.tsx  | 26 +++++++++++++++++
 .../dataset-alerts/DatasetAlert.stories.tsx   | 28 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/sections/dataset/dataset-alerts/DatasetAlerts.tsx
 create mode 100644 src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx

diff --git a/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx b/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx
new file mode 100644
index 000000000..b9ea3f84c
--- /dev/null
+++ b/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx
@@ -0,0 +1,26 @@
+import { Alert } from '@iqss/dataverse-design-system'
+import { DatasetAlert, DatasetAlertMessageKey } from '../../../dataset/domain/models/Dataset'
+import { useTranslation } from 'react-i18next'
+import styles from './DatasetAlerts.module.scss'
+import parse from 'html-react-parser'
+
+interface DatasetAlertsProps {
+  alerts: DatasetAlert[]
+}
+
+export function DatasetAlerts({ alerts }: DatasetAlertsProps) {
+  const { t } = useTranslation('dataset')
+
+  return (
+    <div className={styles.container}>
+      {alerts.map((alert: DatasetAlert, index) => {
+        const translatedHTML = t(`alerts.${alert.message}`)
+        return (
+          <Alert variant={alert.variant} customHeading={alert.customHeading} dismissible={false}>
+            {parse(translatedHTML)}
+          </Alert>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx b/src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx
new file mode 100644
index 000000000..a7a56e8a4
--- /dev/null
+++ b/src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DatasetMockData } from '../DatasetMockData'
+import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import { DatasetAlerts } from '../../../sections/dataset/dataset-alerts/DatasetAlerts'
+import { WithI18next } from '../../WithI18next'
+import { AlertVariant } from '@iqss/dataverse-design-system/dist/components/alert/AlertVariant'
+
+const meta: Meta<typeof DatasetAlerts> = {
+  title: 'Sections/Dataset Page/DatasetAlerts',
+  component: DatasetAlerts,
+  decorators: [WithI18next]
+}
+
+export default meta
+type Story = StoryObj<typeof DatasetAlerts>
+
+export const DraftVersion: Story = {
+  render: () => {
+    const dataset = DatasetMockData({
+      version: new DatasetVersion(1, DatasetPublishingStatus.DRAFT, 1, 0)
+    })
+    return (
+      <div>
+        <DatasetAlerts alerts={dataset.alerts} />
+      </div>
+    )
+  }
+}