feat: request portal — bespoke forms + approval mechanism

src/webparts/requestPortal/shared/ui/Alert/Alert.module.scss

@@ -0,0 +1,30 @@
+@import '../../../../../styles/design-tokens';
+
+.alert {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border: 1px solid;
+  border-radius: $r-md;
+  font-size: 12.5px;
+  margin-bottom: 18px;
+}
+
+.warn {
+  background: $gold-50;
+  color: $amber-700;
+  border-color: $gold-300;
+}
+
+.ok {
+  background: $green-50;
+  color: $green-600;
+  border-color: #bbf7d0;
+}
+
+.err {
+  background: $red-50;
+  color: $red-500;
+  border-color: #fecaca;
+}

src/webparts/requestPortal/shared/ui/Alert/Alert.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import styles from './Alert.module.scss';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../Icon/iconNames';
+
+type AlertVariant = 'warn' | 'ok' | 'err';
+
+interface IAlertProps {
+  variant: AlertVariant;
+  children: React.ReactNode;
+}
+
+const variantClass: Record<AlertVariant, string> = {
+  warn: styles.warn,
+  ok: styles.ok,
+  err: styles.err
+};
+
+const variantIcon: Record<AlertVariant, IconName> = {
+  warn: 'warning',
+  ok: 'check',
+  err: 'close'
+};
+
+export const Alert: React.FC<IAlertProps> = ({ variant, children }) => {
+  const classes = [styles.alert, variantClass[variant]].join(' ');
+
+  return (
+    <div className={classes} role="status">
+      <Icon name={variantIcon[variant]} size="sm" />
+      <span>{children}</span>
+    </div>
+  );
+};