add close button and start revising the page

docs/content/components/content/section-message/section-message.mdx

@@ -1,35 +1,32 @@
 ---
 title: SectionMessage
-caption: Display a short message with important informations.
+caption: Display important informations in a section of a screen.
+badge: updated
 ---
 
-The `<SectionMessage>` component is used to capture the users atention to provide information. It is meant to show only very relevant information. The title should contain the most relevant information about the message.
+The `<SectionMessage>` component is a block-level element designed to alert users about specific content in a designated section of the screen. It is positioned close to the relevant content to clearly indicate its connection. Section messages provide contextual feedback within a section of the page and are persistent, non-modal elements.
 
-This component should not be added on a dynymic way.
+There are currently four different variants of the `<SectionMessage>` component provided. The `info` variant is set as default.
 
-There are currently three different variants of the `<SectionMessage>` component. The `info` variant is set as default. Inside the `<SectionMessage>` it lends itself to using the [`<Text>`](/components/text/) component.
+## Anatomy
+
+<Image
+  src="/sectionmessage/sectionmessage-anatomy.jpg"
+  alt="Anatomy of a SectionMessage"
+  width={800}
+  height={550}
+  className="mx-auto block"
+/>
 
 ## Appearance
 
 <AppearanceDemo component={title} />
 
 <AppearanceTable component={title} />
 
-## Props
-
-### SectionMessage
-
-<PropsTable component={title} />
-
-#### SectionMessage.Title
-
-<PropsTable component="SectionMessageTitle" />
-
-#### SectionMessage.Content
-
-<PropsTable component="SectionMessageContent" />
+## Usage
 
-## Examples
+Section messages should be used when you need to display important feedback related to a specific section of the page. Unlike modals, section messages stay on the page without interrupting the user's workflow.
 
 ### Info Section Message
 
@@ -46,3 +43,17 @@ Here you can see the warning `<SectionMessage>`. The color is in a yellow tone a
 The error `<SectionMessage>` is colored in a red tone and contains the [`<Exclamation>`](/foundations/icons/#info) icon.
 
 <ComponentDemo file="./section-message-error.demo.tsx" />
+
+## Props
+
+### SectionMessage
+
+<PropsTable component={title} />
+
+#### SectionMessage.Title
+
+<PropsTable component="SectionMessageTitle" />
+
+#### SectionMessage.Content
+
+<PropsTable component="SectionMessageContent" />

docs/content/components/content/section-message/sectionmessage-appearance.demo.tsx

@@ -1,14 +1,11 @@
-import { SectionMessage, Text } from '@marigold/components';
-import type { SectionMessageProps } from '@marigold/components';
+import { SectionMessage, SectionMessageProps } from '@marigold/components';
 
 export default (props: SectionMessageProps) => (
   <SectionMessage {...props}>
     <SectionMessage.Title>This page is read-only!</SectionMessage.Title>
     <SectionMessage.Content>
-      <Text>
-        You don't have permission to edit this page. If you think you should
-        have editing rights, contact your group administrator.
-      </Text>
+      You don't have permission to edit this page. If you think you should have
+      editing rights, contact your group administrator.
     </SectionMessage.Content>
   </SectionMessage>
 );

packages/components/src/SectionMessage/SectionMessage.stories.tsx

@@ -21,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   render: args => (
-    <SectionMessage {...args}>
+    <SectionMessage closeMessage {...args}>
       <SectionMessage.Title>Danger Zone!</SectionMessage.Title>
       <SectionMessage.Content>
         <Text>Hello, I am a simple message.</Text>

packages/components/src/SectionMessage/SectionMessage.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
 import { cn, useClassNames } from '@marigold/system';
 import { SectionMessageContext } from './Context';
 import { SectionMessageContent } from './SectionMessageContent';
@@ -70,6 +70,7 @@ export interface SectionMessageProps {
    * The children of the component.
    */
   children?: ReactNode;
+  closeMessage?: boolean;
 }
 
 // Component
@@ -78,6 +79,7 @@ export const SectionMessage = ({
   variant = 'info',
   size,
   children,
+  closeMessage,
   ...props
 }: SectionMessageProps) => {
   const classNames = useClassNames({
@@ -87,6 +89,14 @@ export const SectionMessage = ({
   });
   const Icon = icons[variant];
 
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
   return (
     <SectionMessageContext.Provider value={{ classNames }}>
       <div
@@ -100,8 +110,22 @@ export const SectionMessage = ({
             classNames.icon
           )}
         >
-          <Icon />
+          {Icon && <Icon />}
         </div>
+        {closeMessage && (
+          <button
+            className="h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0 [grid-area:close]"
+            onClick={handleClose}
+          >
+            <svg viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              />
+            </svg>
+          </button>
+        )}
         {children}
       </div>
     </SectionMessageContext.Provider>

themes/theme-b2b/src/components/SectionMessage.styles.ts

@@ -3,7 +3,7 @@ import { ThemeComponent, cva } from '@marigold/system';
 export const SectionMessage: ThemeComponent<'SectionMessage'> = {
   container: cva(
     [
-      'grid-cols-[min-content,auto] gap-1 [grid-template-areas:"icon_title""content_content"]',
+      'grid-cols-[min-content,auto,min-content] gap-1 [grid-template-areas:"icon_title_close""content_content_content"]',
       'bg-bg-surface border-y-2 border-l-[16px] border-r-2 border-solid text-sm',
       'items-center px-4 pb-4 pt-2',
     ],
@@ -16,6 +16,9 @@ export const SectionMessage: ThemeComponent<'SectionMessage'> = {
           error: 'border-border-error',
         },
       },
+      defaultVariants: {
+        variant: 'info',
+      },
     }
   ),
   title: cva('font-bold'),
@@ -29,5 +32,8 @@ export const SectionMessage: ThemeComponent<'SectionMessage'> = {
         error: 'text-text-error',
       },
     },
+    defaultVariants: {
+      variant: 'info',
+    },
   }),
 };

themes/theme-core/src/components/SectionMessage.styles.ts

@@ -2,7 +2,7 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const SectionMessage: ThemeComponent<'SectionMessage'> = {
   container: cva(
-    'bg-bg-base border border-solid px-4 py-2 text-[13px] [grid-template-areas:"title""content"]',
+    'bg-bg-base border border-solid px-4 py-2 text-[13px] grid-cols-[auto,min-content] [grid-template-areas:"title_close""content_content"]',
     {
       variants: {
         variant: {
@@ -12,6 +12,9 @@ export const SectionMessage: ThemeComponent<'SectionMessage'> = {
           success: 'border-border-success',
         },
       },
+      defaultVariants: {
+        variant: 'info',
+      },
     }
   ),
   title: cva('font-bold', {
@@ -23,6 +26,9 @@ export const SectionMessage: ThemeComponent<'SectionMessage'> = {
         success: 'text-text-success',
       },
     },
+    defaultVariants: {
+      variant: 'info',
+    },
   }),
   icon: cva('hidden'),
   content: cva('leading-4', {
@@ -34,5 +40,8 @@ export const SectionMessage: ThemeComponent<'SectionMessage'> = {
         success: 'text-text-success',
       },
     },
+    defaultVariants: {
+      variant: 'info',
+    },
   }),
 };