Refactor Message Component for Enhanced Flexibility and Readability

Hector Arce De Las Heras · Hector Arce De Las Heras · commit 18d78fc35645 · 2024-06-07T13:53:11.000+02:00
This commit involves significant changes to the Message component and related files, with a focus on enhancing flexibility and readability. Key changes include the refactoring of styled components, code simplification, and updates to the Storybook file and styles.

Key changes include:

message.styled.ts: Refactored MessageHeaderStyled and ButtonSectionStyled to include style props, allowing for more flexible styling.
messageStandAlone.tsx: Removed unnecessary div elements and restructured the MessageStandAloneComponent to simplify the code and improve readability.
message.stories.tsx: Updated the Storybook file to include new props such as infoIcon, closeIcon, actionButton, and tag.
styles.ts: Adjusted the commonProps object to modify the flex direction and gap of the container and headerContainer styles, and added a new buttonSectionContainer style.
messageTheme.ts: Added a buttonSectionContainer to the MessagePropsThemeType to allow for styling of the button section container.
message.ts: Changed the content prop type from string | ReactNode to React.ReactNode to allow for more flexibility in the type of content that can be passed.
These changes improve the flexibility and readability of the Message component, enhancing its usability and maintainability.
diff --git a/src/components/message/message.styled.ts b/src/components/message/message.styled.ts
@@ -11,11 +11,7 @@ export const MessageStyled = styled.div<{
   ${({ styles }) => getStyles(styles.container)};
 `;
 
-export const MessageHeaderStyled = styled.div`
-  width: 100%;
-`;
-
-export const MessageHeaderTitleStyled = styled.div<{
+export const MessageHeaderStyled = styled.div<{
   styles: MessagePropsThemeType;
   isLargeMessage?: boolean;
   withIcon?: boolean;
@@ -52,11 +48,10 @@ export const ExtraActioButtonWrapperStyled = styled.div<{
   ${({ styles }) => getStyles(styles.extraActionButtonContainer)};
 `;
 
-export const ButtonSectionStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  align-items: flex-end;
+export const ButtonSectionStyled = styled.div<{
+  styles: MessagePropsThemeType;
+}>`
+  ${({ styles }) => getStyles(styles.buttonSectionContainer)};
 `;
 
 export const ActioButtonWrapperStyled = styled.div<{
diff --git a/src/components/message/messageStandAlone.tsx b/src/components/message/messageStandAlone.tsx
@@ -17,7 +17,6 @@ import {
   LinkContainerStyled,
   MessageContentStyled,
   MessageHeaderStyled,
-  MessageHeaderTitleStyled,
   MessageStyled,
   MessageTextStyled,
 } from './message.styled';
@@ -60,11 +59,9 @@ const MessageStandAloneComponent = (
     );
 
   const buildTag = () => (
-    <div>
-      <Tag option={''} status={''} variant={''} {...props.tag}>
-        {props.tag?.content}
-      </Tag>
-    </div>
+    <Tag option={''} status={''} variant={''} {...props.tag}>
+      {props.tag?.content}
+    </Tag>
   );
 
   const buildExtraActionButton = () =>
@@ -89,31 +86,31 @@ const MessageStandAloneComponent = (
     );
   };
 
-  return props.open ? (
-    <MessageStyled
-      ref={ref}
-      aria-live={ariaLive}
-      data-testid={`${props.dataTestId}Message`}
-      id={props.id}
-      role={props.role}
-      styles={props.styles}
-    >
-      <MessageHeaderStyled>
-        <MessageHeaderTitleStyled
-          isLargeMessage={isLargeMessage}
+  return (
+    <>
+      {props.open && (
+        <MessageStyled
+          ref={ref}
+          aria-live={ariaLive}
+          data-testid={`${props.dataTestId}Message`}
+          id={props.id}
+          role={props.role}
           styles={props.styles}
-          withIcon={!!props.closeIcon}
         >
           {buildIconOrIllustration()}
-          <div>
+          <MessageHeaderStyled
+            isLargeMessage={isLargeMessage}
+            styles={props.styles}
+            withIcon={!!props.closeIcon}
+          >
             {props.title && (
               <MessageTextStyled
                 aria-errormessage={props.ariaMessageId}
                 extraPaddingGap={!!props.closeIcon}
                 styles={props.styles.closeIcon}
               >
                 <Text
-                  component={TextComponentType.H2}
+                  component={TextComponentType.PARAGRAPH}
                   customTypography={props.styles.title}
                   dataTestId={`${props.dataTestId}Title`}
                   {...props.title}
@@ -126,31 +123,31 @@ const MessageStandAloneComponent = (
             <MessageContentStyled isLargeMessage={isLargeMessage} styles={props.styles}>
               {buildContent()}
             </MessageContentStyled>
-          </div>
-        </MessageHeaderTitleStyled>
-      </MessageHeaderStyled>
-      <ButtonSectionStyled>
-        {buildExtraActionButton()}
-        {buildActionButton()}
-        {props.closeIcon?.onClick && (
-          <CloseButtonSectionStyled styles={props.styles}>
-            <ElementOrIcon customIconStyles={props.styles.closeIcon} {...props.closeIcon} />
-          </CloseButtonSectionStyled>
-        )}
-      </ButtonSectionStyled>
-      {props.link?.content && (
-        <LinkContainerStyled styles={props.styles}>
-          <Link
-            dataTestId={`${props.dataTestId}Link`}
-            decoration={TextDecorationType.UNDERLINE}
-            {...props.link}
-          >
-            {props.link.content}
-          </Link>
-        </LinkContainerStyled>
+            <ButtonSectionStyled styles={props.styles}>
+              {buildExtraActionButton()}
+              {buildActionButton()}
+              {props.closeIcon?.onClick && (
+                <CloseButtonSectionStyled styles={props.styles}>
+                  <ElementOrIcon customIconStyles={props.styles.closeIcon} {...props.closeIcon} />
+                </CloseButtonSectionStyled>
+              )}
+            </ButtonSectionStyled>
+            {props.link?.content && (
+              <LinkContainerStyled styles={props.styles}>
+                <Link
+                  dataTestId={`${props.dataTestId}Link`}
+                  decoration={TextDecorationType.UNDERLINE}
+                  {...props.link}
+                >
+                  {props.link.content}
+                </Link>
+              </LinkContainerStyled>
+            )}
+          </MessageHeaderStyled>
+        </MessageStyled>
       )}
-    </MessageStyled>
-  ) : null;
+    </>
+  );
 };
 
 export const MessageStandAlone = React.forwardRef(MessageStandAloneComponent);
diff --git a/src/components/message/stories/message.stories.tsx b/src/components/message/stories/message.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
+import { ICONS } from '@/assets';
 import { ReplaceContent } from '@/components/storybook/replaceContent/replaceContent';
 import { STYLES_NAME } from '@/constants';
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
@@ -43,7 +44,19 @@ export const Message: Story = {
       ),
     },
     title: { content: 'Title' },
-    link: { content: 'Link', variant: 'SECONDARY', url: '#' },
+    infoIcon: { icon: ICONS.ICON_GHOST, altText: 'info' },
+    closeIcon: { icon: ICONS.ICON_CLOSE, altText: 'close' },
+    actionButton: {
+      content: 'Action',
+      variant: Object.values(variantsObject[themeSelected].ButtonVariantType || {})[0] as string,
+      size: Object.values(variantsObject[themeSelected].ButtonSizeType || {})[2] as string,
+    },
+    tag: {
+      variant: Object.values(variantsObject[themeSelected].TagVariantType || {})[0] as string,
+      option: Object.values(variantsObject[themeSelected].TagOptionType || {})[0] as string,
+      status: Object.values(variantsObject[themeSelected].TagStatusType || {})[0] as string,
+      content: 'Tag content',
+    },
     themeArgs: themesObject[themeSelected][STYLES_NAME.MESSAGE],
   },
 };
diff --git a/src/components/message/types/message.ts b/src/components/message/types/message.ts
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import * as React from 'react';
 
 import { IButton } from '@/components/button';
 import { IElementOrIcon } from '@/components/elementOrIcon';
@@ -20,7 +20,7 @@ export type MessageExtraActionButtonType = Omit<IButton, 'children'> & {
 };
 
 export type MessageContentType = Omit<IText<string>, 'children'> & {
-  content: string | ReactNode;
+  content: React.ReactNode;
 };
 
 export type MessageTitleType = Omit<IText<string>, 'children'> & {
diff --git a/src/components/message/types/messageTheme.ts b/src/components/message/types/messageTheme.ts
@@ -11,6 +11,7 @@ export type MessagePropsThemeType = {
   infoIcon?: IconTypes;
   closeIcon?: IconTypes;
   closeIconContainer?: CommonStyleType;
+  buttonSectionContainer?: CommonStyleType;
   actionButtonContainer?: CommonStyleType;
   actionButton?: {
     size?: string;
diff --git a/src/designSystem/kubit/components/message/styles.ts b/src/designSystem/kubit/components/message/styles.ts
@@ -8,18 +8,19 @@ import { MessageVariantType } from './variants';
 const commonProps = {
   container: {
     display: 'flex',
-    flex_direction: 'column',
+    flex_direction: 'row',
     align_items: 'flex-start',
-    justify_content: 'space-between',
+    justify_content: 'flex-start',
     position: 'relative',
     border_style: 'solid',
     border_radius: RADIUS.radius_00,
     border_width: BORDERS.border_50,
     padding: SPACINGS.spacing_300,
+    gap: SPACINGS.spacing_150,
   },
   headerContainer: {
     display: 'flex',
-    flex_direction: 'row',
+    flex_direction: 'column',
     align_items: 'flex-start',
     gap: SPACINGS.spacing_300,
     margin_right: SPACINGS.spacing_450,
@@ -56,10 +57,16 @@ const commonProps = {
   },
   closeIconContainer: {
     gap: SPACINGS.spacing_150,
-    margin_left: SPACINGS.spacing_300,
+    right: SPACINGS.spacing_300,
     position: 'absolute',
     top: SPACINGS.spacing_300,
   },
+  buttonSectionContainer: {
+    display: 'flex',
+    flex_direction: 'column',
+    width: '100%',
+    align_items: 'flex-start',
+  },
 };
 
 export const MESSAGE_STYLES: MessageStylesType<MessageVariantType> = {
diff --git a/src/designSystem/kubitWireframe/commons/components/message/styles.ts b/src/designSystem/kubitWireframe/commons/components/message/styles.ts
@@ -10,9 +10,10 @@ const commonProps = COLORS => {
   return {
     container: {
       display: 'flex',
-      flex_direction: 'column',
+      flex_direction: 'row',
       align_items: 'flex-start',
-      justify_content: 'space-between',
+      justify_content: 'flex-start',
+      gap: SPACINGS.spacing_150,
       position: 'relative',
       padding: SPACINGS.spacing_300,
       border_width: BORDERS.border_50,
@@ -24,9 +25,10 @@ const commonProps = COLORS => {
     },
     headerContainer: {
       display: 'flex',
-      flex_direction: 'row',
+      flex_direction: 'column',
       align_items: 'flex-start',
       gap: SPACINGS.spacing_300,
+      margin_right: SPACINGS.spacing_450,
     },
     headerContainerLargeMessage: {
       [DeviceBreakpointsType.MOBILE]: {
@@ -58,10 +60,16 @@ const commonProps = COLORS => {
     },
     closeIconContainer: {
       gap: SPACINGS.spacing_150,
-      margin_left: SPACINGS.spacing_300,
+      right: SPACINGS.spacing_300,
       position: 'absolute',
       top: SPACINGS.spacing_300,
     },
+    buttonSectionContainer: {
+      display: 'flex',
+      flex_direction: 'column',
+      width: '100%',
+      align_items: 'flex-start',
+    },
   };
 };
 
