Merged in feature/SW-3595-sas-info-boxes (pull request #3177)

Feature/SW-3595 Add info boxes to SAS start page & Eurobonus alert to select-hotel page on SAS

* wip

* feat(SW-3595): Add info boxes to SAS start page

* Add InfoBox to design-system
* Add background gradient to SAS start page

* update variable naming and conditionalize the eurobonus message on select-hotel

* SAS startpage update default message

* make select-hotel a bit more generic with slot={} instead of alert={}


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,57 @@
+import { cva } from 'class-variance-authority'
+import { IconByIconName } from '../Icons/IconByIconName'
+import { IconName } from '../Icons/iconName'
+import { Typography } from '../Typography'
+import styles from './InfoBox.module.css'
+import type { VariantProps } from 'class-variance-authority'
+
+const infoBoxVariants = cva(styles.infoBox, {
+  variants: {
+    theme: {
+      'SAS-Blue': styles.sasBlue,
+      Default: styles.default,
+    },
+  },
+  defaultVariants: {
+    theme: 'Default',
+  },
+})
+
+const iconVariants = cva(styles.iconContainer, {
+  variants: {
+    theme: {
+      'SAS-Blue': styles.sasBlue,
+      Default: styles.default,
+    },
+  },
+  defaultVariants: {
+    theme: 'Default',
+  },
+})
+
+export type Props = {
+  heading: string
+  text: string
+  theme?: VariantProps<typeof infoBoxVariants>['theme']
+  icon?: IconName
+}
+
+export function InfoBox({ heading, text, theme, icon }: Props) {
+  return (
+    <article className={infoBoxVariants({ theme })}>
+      {icon && (
+        <div className={iconVariants({ theme })}>
+          <IconByIconName iconName={icon} color={'CurrentColor'} />
+        </div>
+      )}
+      <div className={styles.content}>
+        <Typography variant="Body/Paragraph/mdBold">
+          <h2>{heading}</h2>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{text}</p>
+        </Typography>
+      </div>
+    </article>
+  )
+}