From 5ee246639617c1bd9559ea773823e955d9c79714 Mon Sep 17 00:00:00 2001 From: Luqmaan Essop Date: Thu, 27 Jun 2024 14:42:44 +0000 Subject: [PATCH] feat(SLB-438): prestyling on messages --- packages/ui/src/components/Atoms/List.css | 7 +- .../components/Molecules/Messages.stories.tsx | 27 +++++ .../ui/src/components/Molecules/Messages.tsx | 112 ++++++++++++++++-- .../Organisms/PageContent/BlockMarkup.tsx | 2 +- 4 files changed, 134 insertions(+), 14 deletions(-) create mode 100644 packages/ui/src/components/Molecules/Messages.stories.tsx diff --git a/packages/ui/src/components/Atoms/List.css b/packages/ui/src/components/Atoms/List.css index f185321e6..9b20bc358 100644 --- 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 new file mode 100644 index 000000000..a342e9db5 --- /dev/null +++ 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; + +export const Info: StoryObj = { + parameters: { + location: new URL('local:/gatsby-turbo'), + }, + args: { + messages: [ + '

This is an Info message, linked item

  • Fribourgeoise
  • Moitié-Moitié
', + '

This is a Warning message, linked item

', + '

This is a Danger message, linked item

', + '

This is a Success message, linked item

', + ], + 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 index c733a5b42..93fce8e63 100644 --- 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; messageComponents?: Array; }) { + const [displayMessages, setDisplayMessages] = useState([]); + + useEffect(() => { + setDisplayMessages(props.messages); + }, [props.messages]); + return ( -
- {buildMessages(props.messages)} - {props.messageComponents} +
+
+ {buildMessages(displayMessages, setDisplayMessages)} + {props.messageComponents} +
); } -export const buildMessages = (messages: Array) => ( - <> - {messages.map((message, index) => ( - - ))} - -); +export const buildMessages = ( + messages: Array, + setDisplayMessages: React.Dispatch>, +) => { + return messages.map((message, index) => ( +
+ + Info +
+ ) => { + return ( +
  • + {children} +
    • + ); + }, + }} + /> +
    + +
    + )); +}; export const storeMessages = (messages: Array): 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 index d59b68162..40c2c21b5 100644 --- 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; });