feature: DatasetAlert component and first story

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>
+  )
+}

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>
+    )
+  }
+}