Add Link Feature to Message Component

This commit introduces a new feature to the Message component that allows a link to be included in the message. The link can be customized through properties. Key changes include:

New MessageLinkType introduced in message.ts to represent the link in the message component. This type is used to add a link property to the IMessageStandAlone interface.
MessageLinkType is exported in index.ts and types/index.ts for use in other modules.
A linkContainer property is added to the MessagePropsThemeType in messageTheme.ts to allow for styling of the link container.
A new styled component LinkContainerStyled is created in message.styled.ts to style the container that holds the link in the message.
The Link component and the new LinkContainerStyled styled component are imported in messageStandAlone.tsx. These are used to add a link to the MessageStandAloneComponent if the link property is provided in the props.
A link property is added to the MOCK object used in tests in message.test.tsx to reflect the changes in the component's props.
A link property is added to the argtypes function and the Message story in argtypes.ts and message.stories.tsx to allow for testing of the new feature in Storybook.
These changes enhance the functionality of the Message component by allowing links to be included in messages.

Author: Hector Arce De Las Heras

src/components/message/__tests__/message.test.tsx

@@ -24,6 +24,7 @@ const MOCK = {
   variant: 'ERROR',
   open: true,
   closeIcon: { onClick: jest.fn() },
+  link: { content: 'Link', variant: 'SECONDARY', url: '#' },
 };
 
 const mockPropsWithTagAndExtraAction = {

src/components/message/index.ts

@@ -2,6 +2,12 @@ export type {
   IMessageStandAlone,
   IMessageControlled,
   IMessageUnControlled,
+  MessageActionButtonType,
+  MessageExtraActionButtonType,
+  MessageContentType,
+  MessageTitleType,
+  MessageTagType,
+  MessageLinkType,
   MessagePropsThemeType,
   MessageStylesType,
 } from './types';

src/components/message/message.styled.ts

@@ -70,3 +70,9 @@ export const CloseButtonSectionStyled = styled.div<{
 }>`
   ${({ styles }) => getStyles(styles.closeIconContainer)};
 `;
+
+export const LinkContainerStyled = styled.div<{
+  styles: MessagePropsThemeType;
+}>`
+  ${({ styles }) => getStyles(styles.linkContainer)};
+`;

src/components/message/messageStandAlone.tsx

@@ -4,15 +4,17 @@ import { Button } from '@/components/button';
 import { ElementOrIcon } from '@/components/elementOrIcon';
 import { ElementOrIllustration } from '@/components/elementOrIllustration';
 import { Tag } from '@/components/tag';
-import { Text, TextComponentType } from '@/components/text';
+import { Text, TextComponentType, TextDecorationType } from '@/components/text';
 import { AriaLiveOptionType } from '@/types';
 
+import { Link } from '../link';
 // styles
 import {
   ActioButtonWrapperStyled,
   ButtonSectionStyled,
   CloseButtonSectionStyled,
   ExtraActioButtonWrapperStyled,
+  LinkContainerStyled,
   MessageContentStyled,
   MessageHeaderStyled,
   MessageHeaderTitleStyled,
@@ -136,6 +138,17 @@ const MessageStandAloneComponent = (
           </CloseButtonSectionStyled>
         )}
       </ButtonSectionStyled>
+      {props.link?.content && (
+        <LinkContainerStyled styles={props.styles}>
+          <Link
+            dataTestId={`${props.dataTestId}Link`}
+            decoration={TextDecorationType.UNDERLINE}
+            {...props.link}
+          >
+            {props.link.content}
+          </Link>
+        </LinkContainerStyled>
+      )}
     </MessageStyled>
   ) : null;
 };

src/components/message/stories/argtypes.ts

@@ -91,6 +91,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    link: {
+      description: 'Object with link properties',
+      type: { name: 'object', required: false },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'MessageLinkType',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     infoIcon: {
       description: 'Object with properties of the icon to show into title message',
       type: { name: 'object' },

src/components/message/stories/message.stories.tsx

@@ -43,6 +43,7 @@ export const Message: Story = {
       ),
     },
     title: { content: 'Title' },
+    link: { content: 'Link', variant: 'SECONDARY', url: '#' },
     themeArgs: themesObject[themeSelected][STYLES_NAME.MESSAGE],
   },
 };

src/components/message/types/index.ts

@@ -1,2 +1,12 @@
-export type { IMessageStandAlone, IMessageControlled, IMessageUnControlled } from './message';
+export type {
+  IMessageStandAlone,
+  IMessageControlled,
+  IMessageUnControlled,
+  MessageActionButtonType,
+  MessageExtraActionButtonType,
+  MessageContentType,
+  MessageTitleType,
+  MessageTagType,
+  MessageLinkType,
+} from './message';
 export type { MessagePropsThemeType, MessageStylesType } from './messageTheme';

src/components/message/types/message.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { IButton } from '@/components/button';
 import { IElementOrIcon } from '@/components/elementOrIcon';
 import { IElementOrillustration } from '@/components/elementOrIllustration';
+import { ILink } from '@/components/link';
 import { ITag } from '@/components/tag';
 import { IText } from '@/components/text';
 import { AriaLiveOptionType, CustomTokenTypes, ROLES } from '@/types';
@@ -30,6 +31,10 @@ export type MessageTagType = Omit<ITag, 'children'> & {
   content: string;
 };
 
+export type MessageLinkType = Omit<ILink, 'children'> & {
+  content?: string;
+};
+
 export interface IMessageStandAlone {
   illustration?: IElementOrillustration;
   infoIcon?: IElementOrIcon;
@@ -47,6 +52,7 @@ export interface IMessageStandAlone {
   role?: ROLES.STATUS | ROLES.ALERT;
   id?: string;
   ariaLive?: AriaLiveOptionType;
+  link?: MessageLinkType;
 }
 
 export interface IMessageControlled<V = undefined extends string ? unknown : string>

src/components/message/types/messageTheme.ts

@@ -20,6 +20,7 @@ export type MessagePropsThemeType = {
     size?: string;
   };
   illustration?: IllustrationTypes;
+  linkContainer?: CommonStyleType;
 };
 
 export type MessageStylesType<P extends string | number | symbol> = {