Add styling to the alert component (#15470)

* Add styling to the alert component

* Render URLs in markdown to open in a new window

Author: bzwrk

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/examples/nextjs/package-lock.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/package.json

@@ -1,10 +1,65 @@
 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 components={{
+      a: ({ ...props }) => {
+        return <a {...props} target="_blank" rel="noopener noreferrer" />;
+      },
+    }}>
+      {prop.content}
+    </Markdown>
+  </div>)
 }

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

@@ -41,5 +41,11 @@ export function Description<T extends ConfigurableProps, U extends ConfigurableP
   if (!prop.description) {
     return null;
   }
-  return <div className={getClassNames("description", props)} style={getStyles("description", baseStyles, props)}><Markdown>{markdown}</Markdown></div>;
+  return <div className={getClassNames("description", props)} style={getStyles("description", baseStyles, props)}> <Markdown components={{
+    a: ({ ...props }) => {
+      return <a {...props} target="_blank" rel="noopener noreferrer" />;
+    },
+  }}>
+    {markdown}
+  </Markdown></div>;
 }