[DST-461]: refactor <Message> component

.changeset/shaggy-zebras-kick.md

@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+"@marigold/components": major
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+---
+
+[DST-461]: refactor `<Message>` component

docs/content/components/content/message/message-error.demo.tsx

@@ -1,7 +1,10 @@
 import { Message, Text } from '@marigold/components';
 
 export default () => (
-  <Message variant="error" messageTitle="Wrong here.">
-    <Text>Hello, I am a simple error message.</Text>
+  <Message variant="error">
+    <Message.Title>Wrong here.</Message.Title>
+    <Message.Content>
+      <Text>Hello, I am a simple error message.</Text>
+    </Message.Content>
   </Message>
 );

docs/content/components/content/message/message-info.demo.tsx

@@ -1,7 +1,10 @@
 import { Message, Text } from '@marigold/components';
 
 export default () => (
-  <Message messageTitle="There is an update available.">
-    <Text>Hello, I am a simple info message.</Text>
+  <Message>
+    <Message.Title>There is an update available.</Message.Title>
+    <Message.Content>
+      <Text>Hello, I am a simple info message.</Text>
+    </Message.Content>
   </Message>
 );

docs/content/components/content/message/message-warn.demo.tsx

@@ -1,7 +1,10 @@
 import { Message, Text } from '@marigold/components';
 
 export default () => (
-  <Message variant="warning" messageTitle="Danger Zone!">
-    <Text>Hello, I am a simple warning message.</Text>
+  <Message variant="warning">
+    <Message.Title>Danger Zone!</Message.Title>
+    <Message.Content>
+      <Text>Hello, I am a simple warning message.</Text>
+    </Message.Content>
   </Message>
 );

docs/content/components/content/message/message.mdx

@@ -1,12 +1,15 @@
 ---
 title: Message
 caption: Display a short message with important informations.
+badge: updated
 ---
 
 The `<Message>` 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.
 
 This component should not be added on a dynymic way.
 
+To properly structure the `<SectionMessage>`, use `<SectionMessage.Title>` to add the title. For displaying text or similar content, use `<SectionMessage.Content>`
+
 There are currently three different variants of the `<Message>` component. The `info` variant is set as default. Inside the `<Message>` it lends itself to using the [`<Text>`](/componentss/text/) component.
 
 ## Import
@@ -23,16 +26,7 @@ import { Message } from '@marigold/components';
 
 ## Props
 
-<PropsTable
-  props={[
-    {
-      property: 'messageTitle (required)',
-      type: 'string',
-      default: 'none',
-      description: 'Set a message title. This is required.',
-    },
-  ]}
-/>
+<PropsTable />
 
 ## Examples
 

docs/content/components/form/datepicker/datepicker.mdx

@@ -167,9 +167,12 @@ The `value` and `onChange` props can be used to control the `DatePicker`.
 
 When using a datepicker, relying on the standard JavaScript `Date` object for its value can result in timezone inconsistencies and incorrect date display. That's why the datepicker uses a specific `DateValue` type from [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/) instead. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.
 
-<Message type="info" messageTitle="@internationalized/date">
-  `@internationalized/date` is a peer dependency. If it's not already in your
-  project, you'll need to install it.
+<Message type="info">
+  <Message.Title>@internationalized/date</Message.Title>
+  <Message.Content>
+    `@internationalized/date` is a peer dependency. If it's not already in your
+    project, you'll need to install it.
+  </Message.Content>
 </Message>
 
 The simplest way to parse a Date for the datepicker is by using `parseAbsoluteToLocal`. This function converts an absolute date and time into the current user's local time zone.

docs/content/components/form/fieldgroup/field-group.mdx

@@ -5,8 +5,11 @@ caption: A component for organizing and structuring form data on the layout leve
 
 The `<FieldGroup>` designed primarily for handling of complex forms and semantic representation of fields structure and the layout in `theme-core` .
 
-<Message messageTitle="For your information!" variant="info">
+<Message type="info">
+  <Message.Title>For your information!</Message.Title>
+  <Message.Content>
 The `<FieldGroup>` is a component to layout the label and the fieldbase itself. On that you can use `labelWidth` which is a string type to set the width of the label. Because the label is set to the left side in the `core-theme`, it has only an impact on that.
+  </Message.Content>
 </Message>
 
 ### Import

docs/content/components/form/form/form.mdx

@@ -99,6 +99,9 @@ As you can see in the previous server errors example, when a user submits a form
 
 <p />
 
-<Message messageTitle="Want more?!">
-  You can find more examples and usages of the `<Form>` component on the [Validation](/concepts/validation) page and in the [Forms](/recipes/form-recipes) recipes.
+<Message type="info">
+  <Message.Title>Want more?!</Message.Title>
+  <Message.Content>
+ You can find more examples and usages of the `<Form>` component on the [Validation](/concepts/validation) page and in the [Forms](/recipes/form-recipes) recipes.
+  </Message.Content>
 </Message>

docs/content/components/hooks-and-utils/extendTheme/extendTheme.mdx

@@ -5,9 +5,12 @@ caption: Function used to customize theme components styles.
 
 With `extendTheme` you can add more variants and sizes to these components. It takes in the current theme you pass and returns an updated theme with added styles and configurations.
 
-<Message messageTitle="Adding new variant" variant="warning">
-  You can **only** add a new variant to the theme, and you **should not**
-  override variant in the current theme.
+<Message variant="warning">
+  <Message.Title>Adding new variant</Message.Title>
+  <Message.Content>
+    You can **only** add a new variant to the theme, and you **should not**
+    override variant in the current theme.
+  </Message.Content>
 </Message>
 
 ## Import

docs/content/develop/component-guidelines.mdx

@@ -63,24 +63,30 @@ components
 Example of how we write tests:
 
 ```tsx
-test('accepts a variant with parts and an icon', () => {
+test('accepts a variant with parts and an icon and support grid areas', () => {
   render(
-    <Message data-testid="messages" messageTitle="info" variant="warning">
-      Danger
+    <Message data-testid="messages" variant="warning">
+      <Message.Title>info</Message.Title>
+      <Message.Content>Danger</Message.Content>
     </Message>
   );
-
   const container = screen.getByTestId('messages');
   const title = screen.getByText('info');
   const content = screen.getByText('Danger');
+  // eslint-disable-next-line testing-library/no-node-access
+  const icon = container.firstChild;
 
   expect(container.className).toMatchInlineSnapshot(
-    `"grid auto-rows-min grid-cols-[min-content_auto] gap-1 text-orange-700"`
+    `"grid auto-rows-min text-orange-700"`
+  );
+  expect(content.className).toMatchInlineSnapshot(
+    `"[grid-area:content] items-end"`
   );
-  expect(content.className).toMatchInlineSnapshot(`"col-start-2 items-end"`);
   expect(title.className).toMatchInlineSnapshot(
-    `"col-start-2 row-start-1 self-center font-bold"`
+    `"[grid-area:title] font-bold"`
   );
+
+  expect(icon).toBeInTheDocument();
 });
 ```
 
@@ -108,19 +114,6 @@ const meta = {
       options: ['info', 'warning', 'error'],
       description: 'The variants of the message',
     },
-    messageTitle: {
-      control: {
-        type: 'text',
-      },
-      description: 'Content',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Danger Zone!' },
-      },
-    },
-  },
-  args: {
-    messageTitle: 'Danger Zone!',
   },
 } satisfies Meta<typeof Message>;
 
@@ -130,7 +123,10 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   render: args => (
     <Message {...args}>
-      <Text>Hello, I am a simple message.</Text>
+      <Message.Title>Hint</Message.Title>
+      <Message.Content>
+        <Text>Hello, I am a simple message.</Text>
+      </Message.Content>
     </Message>
   ),
 };
@@ -198,8 +194,11 @@ type RemovedProps = 'className';
 export interface ComponentProps extends Omit<RAC.ComponentProp, RemovedProps> {}
 ```
 
-<Message messageTitle="Escape hatch">
+<Message variant="info">
+  <Message.Title>Escape hatch</Message.Title>
+  <Message.Content>
 Use a regular `<div>` (or any other HTML element) and add available classes from our theme.
+  </Message.Content>
 </Message>
 
 ### A UI Component must be themable

docs/content/introduction/design-token-guidelines.mdx

@@ -6,11 +6,14 @@ order: 4
 
 On this page, you'll discover detailed specifications for design tokens — the foundational elements that unify the visual language of your brand or products. Explore how design tokens are constructed and find information on where each token is applied within the design ecosystem.
 
-<Message messageTitle="View the tokens" variant="info">
+<Message variant="info">
+  <Message.Title>View the tokens</Message.Title>
+  <Message.Content>
   For those interested in understanding our token structure, the most effective way is to explore the JSON structure directly. Note that tokens directly derived from Tailwind CSS are omitted for brevity.
 
 [View tokens as JSON](https://jsonhero.io/j/1IFlkqLbLbSM)
 
+  </Message.Content>
 </Message>
 
 ## Naming Convention
@@ -35,9 +38,12 @@ The name of a design token describes how it should be used, with each part indic
 
 Color tokens leverage the primitive tokens that form the color palettes of our design system. They provide a systematic approach to managing and applying colors consistently across various elements, while ensuring a cohesive and harmonious visual identity.
 
-<Message messageTitle="Icon Color" variant="info">
-  Text color tokens can also be employed to colorize icons since they all have
-  the `currentColor` CSS rule applied.
+<Message variant="info">
+  <Message.Title>Icon Color</Message.Title>
+  <Message.Content>
+    Text color tokens can also be employed to colorize icons since they all have
+    the `currentColor` CSS rule applied.
+  </Message.Content>
 </Message>
 
 ### Text
@@ -174,10 +180,13 @@ There are no semantic values assigned to these tokens, as their usage does not n
 
 Height tokens follow a 4-pixel grid convention, implying that their values are adjusted in increments of 4 pixels. Each token represents a multiplier of that grid. For example, a value of 2 would equate to 8 pixels.
 
-<Message messageTitle="Not mandatory" variant="info">
-  The relevance of height is limited to specific components. In numerous cases,
-  a component's size must align with its contents. Therefore, the use of tokens
-  is not obligatory in every instance.
+<Message variant="info">
+  <Message.Title>Not mandatory</Message.Title>
+  <Message.Content>
+    The relevance of height is limited to specific components. In numerous
+    cases, a component's size must align with its contents. Therefore, the use
+    of tokens is not obligatory in every instance.
+  </Message.Content>
 </Message>
 
 #### Intents

docs/content/introduction/design-tokens.mdx

@@ -7,9 +7,12 @@ badge: updated
 
 Design tokens are the foundational elements of our design system, defining key aspects of our product's visual language. They enable consistency and flexibility, allowing us to maintain a unified look and feel across all user interfaces.
 
-<Message messageTitle="Changing Theme" variant="info">
-  Since we have two themes, the values displayed show the available tokens in
-  the currently selected theme.
+<Message variant="info">
+  <Message.Title>Changing Theme</Message.Title>
+  <Message.Content>
+    Since we have two themes, the values displayed show the available tokens in
+    the currently selected theme.
+  </Message.Content>
 </Message>
 
 ## Colors

docs/content/introduction/getting-started.mdx

@@ -8,9 +8,12 @@ To integrate Marigold into your React app, follow the steps outlined below. Mari
 
 Please bear in mind that certain steps may vary depending on your specific setup. You can find examples for the most common setups down below.
 
-<Message messageTitle="Good to know!" variant="info">
-  Experience Marigold right away by trying it out in our [interactive
-  playground](https://play.marigold-ui.io/)!
+<Message variant="info">
+  <Message.Title> Good to know!</Message.Title>
+  <Message.Content>
+    Experience Marigold right away by trying it out in our [interactive
+    playground](https://play.marigold-ui.io/)!
+  </Message.Content>
 </Message>
 
 ## Installation
@@ -166,10 +169,13 @@ module.exports = {
 
 This will set up TailwindCSS as a PostCSS plugin and works with common tools, like `vite` or `next.js`.
 
-<Message messageTitle="TypeScript Configuration" variant="info">
-  If you are using TypeScript, make sure to set the [module
-  resolution](https://www.typescriptlang.org/tsconfig#moduleResolution) to
-  `'nodenext'` since the theme packages are using ESM.
+<Message variant="info">
+  <Message.Title>TypeScript Configuration</Message.Title>
+  <Message.Content>
+    If you are using TypeScript, make sure to set the [module
+    resolution](https://www.typescriptlang.org/tsconfig#moduleResolution) to
+    `'nodenext'` since the theme packages are using ESM.
+  </Message.Content>
 </Message>
 
 After configuring Tailwind CSS and adding the preset, wrap your app with the MarigoldProvider. Unlike before, you no longer have to import the CSS file of the selected theme separately.

docs/content/patterns/building-forms/building-forms.mdx

@@ -94,10 +94,13 @@ In HTML, forms are build using the `<form>` element, which wraps a set of input
 
 The simplest way to get data from a form is using the browser's [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) API during the `onSubmit` event. This can be passed directly to `fetch`, or converted into a regular JavaScript object using `Object.fromEntries`.
 
-<Message messageTitle="Names are important!" variant="info">
-  Make sure to include the name attribute in each field, as it uniquely
-  identifies each form element, facilitating server-side processing and ensuring
-  a key-value pair for data submission.
+<Message variant="info">
+  <Message.Title>Names are important!</Message.Title>
+  <Message.Content>
+    Make sure to include the name attribute in each field, as it uniquely
+    identifies each form element, facilitating server-side processing and
+    ensuring a key-value pair for data submission.
+  </Message.Content>
 </Message>
 
 Below is a basic example of extracting data from an [uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) form. Submitting a promo code won't trigger a regular form submission; instead, it will display the provided data.

docs/content/recipes/form-recipes.mdx

@@ -7,8 +7,11 @@ We used for these examples form components like `<FieldGroup>`, [`<TextField>`](
 
 `<FieldGroup>` is wrapped around the other components as you can see in the examples below. With its prop `labelWidth` we set the width of the label to a certain amount, so it has a clean look.
 
-<Message messageTitle="Note" variant="info">
-  Please note that the form components need to have a label prop.
+<Message variant="info">
+  <Message.Title>Note</Message.Title>
+  <Message.Content>
+    Please note that the form components need to have a label prop.
+  </Message.Content>
 </Message>
 
 ## Organization Search Form

packages/components/src/Message/Context.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export const SectionMessageContext = createContext<{
+  classNames: {
+    container: string;
+    icon: string;
+    title: string;
+    content: string;
+  };
+}>({} as any);
+
+export const useSectionMessageContext = () => useContext(SectionMessageContext);