Add success

Author: mydea

docs/contributing/pages/components.mdx

@@ -16,6 +16,10 @@ This is an info alert. Use these for information that's critical to know; it's i
 This is a warning alert. Use these for items that MUST be well understood before proceeding. These highlight information that could cause users to make catastrophic errors that break their applications in ways that are very difficult to fix or create liabilities for them, such as information needed to avoid leaking PII. These should be used very rarely.
 </Alert>
 
+<Alert level="success" title="Tip">
+This is a success alert. Use these when.... TODO?
+</Alert>
+
 <Alert>
 This is an alert without title.
 </Alert>
@@ -44,6 +48,12 @@ This is a warning alert.
 </Alert>
 ```
 
+```markdown {tabTitle:Success}
+<Alert level="success" title="Tip">
+This is a success alert.
+</Alert>
+```
+
 ```markdown {tabTitle:No Title}
 <Alert>
 This is an alert without title.
@@ -53,7 +63,7 @@ This is an alert without title.
 Attributes:
 
 - `title` (string) - optional
-- `level` (string: `'info' | 'warning') - optional, defaults to `'info'`
+- `level` (string: `'info' | 'warning' | 'success') - optional, defaults to `'info'`
 
 Use this for these types of content:
 

src/components/alert/index.tsx

@@ -1,18 +1,28 @@
 import {ReactNode} from 'react';
-import {ExclamationTriangleIcon, InfoCircledIcon} from '@radix-ui/react-icons';
+import {
+  CheckCircledIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+} from '@radix-ui/react-icons';
 
 // explicitly not usig CSS modules here
 // because there's some prerendered content that depends on these exact class names
 import './styles.scss';
 
 type AlertProps = {
   children?: ReactNode;
-  level?: 'info' | 'warning';
+  level?: 'info' | 'warning' | 'success';
   title?: string;
 };
 
+const ICON_MAP = {
+  info: InfoCircledIcon,
+  warning: ExclamationTriangleIcon,
+  success: CheckCircledIcon,
+} as const;
+
 export function Alert({title, children, level = 'info'}: AlertProps) {
-  const Icon = level === 'warning' ? ExclamationTriangleIcon : InfoCircledIcon;
+  const Icon = ICON_MAP[level];
 
   return (
     <div className={`alert ${'alert-' + level}`} role="alert">

src/components/alert/styles.scss

@@ -44,6 +44,11 @@
   background: color-mix(in srgb, var(--desatPurple15), transparent 10%);
 }
 
+.alert-success {
+  background: var(--successGreen);
+  background: color-mix(in srgb, var(--successGreen), transparent 85%);
+}
+
 .alert-warning {
   background: var(--desatFlame8);
   background: color-mix(in srgb, var(--desatFlame8), transparent 10%);