Merged in chore/SW-3246-move-alert-to-design-system (pull request #2698)

chore(SW-3246): Moved Alert component into design system

* chore(SW-3246): Moved Alert component into design system

* chore(SW-3246): Optimsed code and imports

* chore(SW-3246): Moved type AlertTypeEnum and other to common package


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Alert/index.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { Button } from '../Button'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import Link from '../Link'
+import { Typography } from '../Typography'
+
+import AlertSidepeek from './Sidepeek'
+import { IconByAlertType } from './utils'
+import { alertVariants } from './variants'
+
+import styles from './alert.module.css'
+
+import type { AlertProps } from './alert'
+
+export function Alert({
+  className,
+  variant,
+  type,
+  heading,
+  text,
+  link,
+  close,
+  phoneContact,
+  sidepeekCtaText,
+  sidepeekContent,
+  ariaLive,
+  ariaRole,
+}: AlertProps) {
+  const classNames = alertVariants({
+    className,
+    variant,
+    type,
+  })
+
+  if (!text && !heading) {
+    return null
+  }
+  return (
+    <section className={classNames} role={ariaRole} aria-live={ariaLive}>
+      <div className={styles.content}>
+        <span className={styles.iconWrapper}>
+          <IconByAlertType
+            alertType={type}
+            className={styles.icon}
+            variant={variant}
+          />
+        </span>
+        <div className={styles.innerContent}>
+          <div className={styles.textWrapper}>
+            {heading ? (
+              <Typography variant="Body/Paragraph/mdBold">
+                <h2>{heading}</h2>
+              </Typography>
+            ) : null}
+            {text ? (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p>
+                  {text}
+                  {phoneContact?.phoneNumber ? (
+                    <>
+                      <span> {phoneContact.displayText} </span>
+                      <Link
+                        href={`tel:${phoneContact.phoneNumber.replace(/ /g, '')}`}
+                      >
+                        {phoneContact.phoneNumber}
+                      </Link>
+                      {phoneContact.footnote ? (
+                        <>
+                          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                          <span>. ({phoneContact.footnote})</span>
+                        </>
+                      ) : null}
+                    </>
+                  ) : null}
+                </p>
+              </Typography>
+            ) : null}
+          </div>
+
+          {link ? (
+            <Link
+              textDecoration="underline"
+              href={link.url}
+              keepSearchParams={link.keepSearchParams}
+            >
+              {link.title}
+            </Link>
+          ) : null}
+          {!link && sidepeekCtaText && sidepeekContent ? (
+            <AlertSidepeek
+              ctaText={sidepeekCtaText}
+              sidePeekContent={sidepeekContent}
+            />
+          ) : null}
+        </div>
+        {close ? (
+          <Button onPress={close} variant="Text" className={styles.closeButton}>
+            <MaterialIcon icon="close" color="CurrentColor" />
+          </Button>
+        ) : null}
+      </div>
+    </section>
+  )
+}