feat(ui): add PreviewAlert to ui

packages/ui/src/components/PreviewAlert/index.module.scss

@@ -0,0 +1,8 @@
+.utrecht-preview-mode {
+  --utrecht-space-around: 0;
+  --utrecht-alert-padding-block-start: var(--utrecht-preview-mode-padding-block-start, 10px);
+  --utrecht-alert-padding-block-end: var(--utrecht-preview-mode-padding-block-end, 10px);
+
+  inline-size: 100%;
+  text-align: center;
+}

packages/ui/src/components/PreviewAlert/index.tsx

@@ -0,0 +1,23 @@
+import { Alert, Link, Paragraph } from '@utrecht/component-library-react';
+import classnames from 'classnames/bind';
+import styles from './index.module.scss';
+
+const css = classnames.bind(styles);
+
+type LinkTypes = {
+  href: string;
+  text: string;
+};
+
+export interface PreviewAlertProps {
+  link: LinkTypes;
+  message: string;
+}
+
+export const PreviewAlert = ({ link, message }: PreviewAlertProps) => (
+  <Alert type="warning" className={css('utrecht-preview-mode')}>
+    <Paragraph>
+      {message} <Link href={link.href}>{link.text}</Link>
+    </Paragraph>
+  </Alert>
+);

packages/ui/src/components/index.tsx

@@ -6,4 +6,6 @@ export * from './LogoButton';
 export * from './Markdown';
 export * from './MultiColumnsLogoButton';
 export * from './Navigation';
+export { PreviewAlert } from './PreviewAlert';
+export type { PreviewAlertProps } from './PreviewAlert';
 export * from './PriceWidget';