feat(SLB-438): prestyling on messages

AmazeeLabs · Jun 27, 2024 · 5ee2466 · 5ee2466
1 parent a9be1dd
commit 5ee2466
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 14 deletions.
diff --git a/packages/ui/src/components/Atoms/List.css b/packages/ui/src/components/Atoms/List.css
@@ -1,5 +1,5 @@
 ul li {
-  @apply !text-base !font-medium !text-gray-900;
+  @apply text-base !font-medium !text-gray-900;
 }
 
 ul {
@@ -20,6 +20,11 @@ ul li::marker {
   @apply !text-gray-500;
 }
 
+/* Remove hardcoded colors on lists within messages so they can be set to their message type inherited color scheme */
+ul li.messages::marker {
+  @apply !text-inherit;
+}
+
 .list-style--arrows li::before {
   position: absolute;
   left: -1.25rem;

diff --git a/packages/ui/src/components/Molecules/Messages.stories.tsx b/packages/ui/src/components/Molecules/Messages.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Messages as Component } from './Messages';
+
+export default {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export const Info: StoryObj<typeof Component> = {
+  parameters: {
+    location: new URL('local:/gatsby-turbo'),
+  },
+  args: {
+    messages: [
+      '<p>This is an Info message, <a href=#>linked item</a></p><ul><li>Fribourgeoise</li><li>Moitié-Moitié</li></ul>',
+      '<p>This is a Warning message, <a href=#>linked item</a></p>',
+      '<p>This is a Danger message, <a href=#>linked item</a></p>',
+      '<p>This is a Success message, <a href=#>linked item</a></p>',
+    ],
+    messageComponents: [
+      'This page is not available in the requested language.',
+    ],
+  },
+};
diff --git a/packages/ui/src/components/Molecules/Messages.tsx b/packages/ui/src/components/Molecules/Messages.tsx
@@ -1,27 +1,115 @@
 import { Html, Markup } from '@custom/schema';
-import React, { ReactNode } from 'react';
+import clsx from 'clsx';
+import React, {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
 
-// TODO: Style, add stories.
+import { unorderedItems } from '../Organisms/PageContent/BlockMarkup';
 
 export function Messages(props: {
   messages: Array<string>;
   messageComponents?: Array<ReactNode>;
 }) {
+  const [displayMessages, setDisplayMessages] = useState<string[]>([]);
+
+  useEffect(() => {
+    setDisplayMessages(props.messages);
+  }, [props.messages]);
+
   return (
-    <div>
-      {buildMessages(props.messages)}
-      {props.messageComponents}
+    <div className="container-page">
+      <div className="container-content">
+        {buildMessages(displayMessages, setDisplayMessages)}
+        {props.messageComponents}
+      </div>
     </div>
   );
 }
 
-export const buildMessages = (messages: Array<string>) => (
-  <>
-    {messages.map((message, index) => (
-      <Html key={index} markup={message as Markup} />
-    ))}
-  </>
-);
+export const buildMessages = (
+  messages: Array<string>,
+  setDisplayMessages: React.Dispatch<React.SetStateAction<string[]>>,
+) => {
+  return messages.map((message, index) => (
+    <div
+      key={index}
+      className="flex items-center p-4 my-4 text-blue-800 border-t-4 border-blue-300 bg-blue-50"
+      role="alert"
+      aria-live="polite"
+    >
+      <svg
+        className="mr-3 shrink-0 w-4 h-4"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+      </svg>
+      <span className="sr-only">Info</span>
+      <div className="text-sm font-medium prose-a:font-semibold prose-a:underline">
+        <Html
+          key={index}
+          markup={message as Markup}
+          plugins={[unorderedItems]}
+          components={{
+            li: ({
+              unordered,
+              children,
+              className,
+              ...props
+            }: PropsWithChildren<{
+              unordered?: boolean;
+              className?: string;
+            }>) => {
+              return (
+                <li
+                  {...props}
+                  className={clsx(className, {
+                    '!text-blue-800 ml-5 mt-1 mb-1 list-disc messages text-sm font-medium':
+                      unordered,
+                  })}
+                >
+                  {children}
+                </li>
+              );
+            },
+          }}
+        />
+      </div>
+      <button
+        type="button"
+        className="ms-auto -m-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex items-center justify-center h-8 w-8"
+        data-dismiss-target={`#alert-${index + 1}`}
+        onClick={() => {
+          const newMessages = messages.filter((_, i) => i !== index);
+          setDisplayMessages(newMessages);
+        }}
+        aria-label={`Close message ${index + 1}`}
+      >
+        <span className="sr-only">Close</span>
+        <svg
+          className="w-3 h-3"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 14"
+        >
+          <path
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+          />
+        </svg>
+      </button>
+    </div>
+  ));
+};
 
 export const storeMessages = (messages: Array<string>): void => {
   localStorage.setItem('messages', JSON.stringify(messages));

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -7,7 +7,7 @@ import { Plugin } from 'unified';
 
 import { FadeUp } from '../../Molecules/FadeUp';
 
-const unorderedItems: Plugin<[], Element> = () => (tree) => {
+export const unorderedItems: Plugin<[], Element> = () => (tree) => {
   selectAll('ul > li', tree).forEach((node) => {
     node.properties!.unordered = true;
   });