Add styling to the alert component

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,14 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.27] - 2025-01-30
+
+- Add styling to alerts
+
+# [1.0.0-preview.26] - 2025-01-29
+
+- No change
+
 # [1.0.0-preview.25] - 2025-01-28
 
 - Show prop labels instead of values after selecting dynamic props

packages/connect-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.26",
+  "version": "1.0.0-preview.27",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

packages/connect-react/src/components/Alert.tsx

@@ -1,10 +1,57 @@
 import type { ConfigurablePropAlert } from "@pipedream/sdk";
+import Markdown from "react-markdown";
 
 type AlertProps = {
   prop: ConfigurablePropAlert;
 };
 
 export function Alert({ prop }: AlertProps) {
-  // XXX useCustomize, getClassNames
-  return <p className={`pd-alert-${prop.alertType}`}>{prop.content}</p>;
+  const baseStyles = {
+    background: "#e2e3e5",
+    borderRadius: "10px",
+    paddingTop: "2px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    paddingBottom: "2px",
+  }
+
+  const warningStyles = {
+    ...baseStyles,
+    background: "#fff3cd",
+  };
+
+  const infoStyles = {
+    ...baseStyles,
+    background: "#d1ecf1",
+  }
+
+  const errorStyles = {
+    ...baseStyles,
+    background: "#f8d7da",
+  }
+
+  const neutralStyles = {
+    ...baseStyles,
+    background: "#fffff2",
+  }
+
+  let alertStyles = {}
+  switch (prop.alertType) {
+  case "info":
+    alertStyles = infoStyles
+    break
+  case "neutral":
+    alertStyles = neutralStyles
+    break
+  case "warning":
+    alertStyles = warningStyles
+    break
+  case "error":
+    alertStyles = errorStyles
+    break
+  default:
+    alertStyles = baseStyles
+  }
+
+  return <div className={`pd-alert-${prop.alertType}`} style={alertStyles}><Markdown>{prop.content}</Markdown></div>
 }