Updated alert component

esimionato · Apr 25, 2021 · 2610fb5 · 2610fb5
1 parent 87c568f
commit 2610fb5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/components/Alert.js b/components/Alert.js
@@ -1,28 +1,41 @@
-import { XCircleIcon } from "@heroicons/react/solid";
+import { XCircleIcon, ExclamationIcon } from "@heroicons/react/solid";
+import { Show } from "./Show";
+
+export const Alert = ({ style, title, messages }) => {
+  const styles = { danger: "red", alert: "yellow" };
 
-export const Alert = ({ title, messages }) => {
   return (
-    <div className="rounded-md bg-red-50 p-4">
+    <div className={`rounded-md bg-${styles[style]}-50 p-4`}>
       <div className="flex">
         <div className="flex-shrink-0">
-          <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+          <Show when={style === "danger"}>
+            <XCircleIcon className={`h-5 w-5 text-${styles[style]}-400`} aria-hidden="true" />
+          </Show>
+
+          <Show when={style === "alert"}>
+            <ExclamationIcon className={`h-5 w-5 text-${styles[style]}-400`} aria-hidden="true" />
+          </Show>
         </div>
         <div className="ml-3">
-          <h3 className="text-sm font-medium text-red-800">{title}</h3>
-          <div className="mt-2 text-sm text-red-700">
-            <ul className="list-disc pl-5 space-y-1">
-              {messages.map((message, key) => (
-                <li key={key}>{message}</li>
-              ))}
-            </ul>
-          </div>
+          <h3 className={`text-sm font-medium text-${styles[style]}-800`}>{title}</h3>
+
+          <Show when={messages.length > 0}>
+            <div className={`mt-2 text-sm text-${styles[style]}-700`}>
+              <ul className="list-disc pl-5 space-y-1">
+                {messages.map((message, key) => (
+                  <li key={key}>{message}</li>
+                ))}
+              </ul>
+            </div>
+          </Show>
         </div>
       </div>
     </div>
   );
 };
 
 Alert.defaultProps = {
+  style: "danger",
   title: "Please insert a title",
   messages: [],
 };
diff --git a/components/__tests__/Alert.test.js b/components/__tests__/Alert.test.js
@@ -10,9 +10,9 @@ describe("Alert", () => {
     expect(screen.getByText("title")).toBeInTheDocument();
   });
 
-  it("should render an unordered list", () => {
+  it("should not have an unordered list", () => {
     const { container } = render(<Alert />);
-    expect(container.querySelector("ul")).toBeInTheDocument();
+    expect(container.querySelector("ul")).toBeNull();
   });
 
   it("should have zero messages", () => {

diff --git a/pages/s/[seed]/index.js b/pages/s/[seed]/index.js
@@ -11,6 +11,7 @@ import { CountryViews } from "../../../components/charts/CountryViews";
 import { PageHeading } from "../../../components/PageHeading";
 import { RealtimeVisitors } from "../../../components/RealtimeVisitors";
 import { RangeSelector } from "../../../components/RangeSelector";
+import { Alert } from "../../../components/Alert";
 
 export async function getServerSideProps(context) {
   const { seed } = context.query;
@@ -35,6 +36,11 @@ const Website = ({ seed }) => {
         EXPERIMENTAL_IS_DARK={true}
       />
 
+      <Alert
+        style="alert"
+        title="Please note that as this is a demo, the data is refreshed frequently."
+      />
+
       <Performance url={`/api/metrics/${seed}/performance`} timeRange={timeRange} />
       <Chart url={`/api/metrics/${seed}/views/series`} timeRange={timeRange} type="lineChart" />