Ajoute le composant Message au design system

fix #2028

site/source/design-system/index.ts

@@ -5,3 +5,4 @@ export * as layout from './layout'
 export { default as Popover } from './Popover'
 export { default as PopoverWithTrigger } from './PopoverWithTrigger'
 export * as typography from './typography'
+export * from './message'

site/source/design-system/message/baseIcon.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C1.55228 0 2 0.447715 2 1V6.65C2 7.20228 2.44772 7.65 3 7.65H15C15.5523 7.65 16 8.09771 16 8.65C16 9.20228 15.5523 9.65 15 9.65H3C1.34314 9.65 0 8.30685 0 6.65V1C0 0.447715 0.447715 0 1 0Z" fill="#2E5FB6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5407 4.69739C11.9564 4.33371 12.5881 4.37582 12.9518 4.79146L15.7518 7.99146C16.0817 8.36849 16.0817 8.93144 15.7518 9.30847L12.9518 12.5085C12.5881 12.9241 11.9564 12.9662 11.5407 12.6025C11.1251 12.2389 11.083 11.6071 11.4467 11.1915L13.6705 8.64997L11.4467 6.10847C11.083 5.69283 11.1251 5.06107 11.5407 4.69739Z" fill="#2E5FB6"/>
+</svg>

site/source/design-system/message/errorIcon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C10.3704 0 10.7105 0.204749 10.8838 0.532112L19.8838 17.5321C20.0479 17.8421 20.0376 18.2153 19.8567 18.5158C19.6758 18.8163 19.3507 19 19 19H1C0.649283 19 0.324198 18.8163 0.143295 18.5158C-0.0376073 18.2153 -0.0478841 17.8421 0.116212 17.5321L9.11621 0.532112C9.28952 0.204749 9.62959 0 10 0ZM2.66091 17H17.3391L10 3.13727L2.66091 17Z" fill="#96050F"/>
+<path d="M11 14.5C11 15.0579 10.5579 15.5 10 15.5C9.44214 15.5 9 15.0579 9 14.5C9 13.9421 9.44214 13.5 10 13.5C10.5579 13.5 11 13.9421 11 14.5Z" fill="#96050F"/>
+<path d="M8.99999 7.5C8.99999 6.94214 9.44212 6.5 9.99998 6.5C10.5578 6.5 11 6.94214 11 7.5V11C11 11.5579 10.5576 12 9.99969 12C9.44183 12 8.99999 11.5579 8.99999 11V7.5Z" fill="#96050F"/>
+</svg>

site/source/design-system/message/index.stories.tsx

@@ -0,0 +1,45 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { Message } from '@/design-system'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+	component: Message,
+	// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+	argTypes: {
+		children: { type: 'string' },
+	},
+} as ComponentMeta<typeof Message>
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Message> = (args) => <Message {...args} />
+
+export const AccompanyingMessage = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+AccompanyingMessage.args = {
+	children:
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+	type: 'primary',
+	icon: true,
+	border: true,
+}
+
+const AlertTemplate: ComponentStory<typeof Message> = (args) => (
+	<>
+		<Message {...args} type="success">
+			Votre message a bien été envoyé
+		</Message>
+		<Message {...args} type="info">
+			Certaines informations sont incorrectes
+		</Message>
+		<Message {...args} type="error">
+			Échec de l’envoi du message
+		</Message>
+	</>
+)
+
+export const Alert = AlertTemplate.bind({})
+Alert.args = {
+	children: 'Votre message a bien été envoyé',
+	icon: true,
+	border: true,
+}

site/source/design-system/message/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import baseIcon from './baseIcon.svg'
+import infoIcon from './infoIcon.svg'
+import errorIcon from './errorIcon.svg'
+import successIcon from './successIcon.svg'
+import { Body } from '../typography/paragraphs'
+
+type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
+type MessageProps = {
+	children: React.ReactNode
+	icon?: boolean
+	border?: boolean
+	type: MessageType
+	light?: boolean
+}
+export function Message({
+	type = 'primary',
+	icon = false,
+	border = true,
+	light = false,
+	children,
+}: MessageProps) {
+	if (typeof children !== 'object') {
+		children = <Body>{children}</Body>
+	}
+	return (
+		<StyledMessage type={type} border={border} light={light}>
+			{icon &&
+				(type === 'success' ? (
+					<StyledIcon
+						src={successIcon}
+						title="succès"
+						alt="icône signalant une alerte sur un succès"
+					/>
+				) : type === 'error' ? (
+					<StyledIcon
+						src={errorIcon}
+						title="error"
+						alt="icône signalant une alerte sur une erreur"
+					/>
+				) : type === 'info' ? (
+					<StyledIcon
+						src={infoIcon}
+						title="info"
+						alt="icône signalant une alerte sur une information"
+					/>
+				) : (
+					<StyledIcon
+						src={baseIcon}
+						title="paragraph"
+						alt="icône signalant un texte informatif"
+					/>
+				))}
+			<div>{children}</div>
+		</StyledMessage>
+	)
+}
+
+const StyledMessage = styled.div<
+	Pick<MessageProps, 'border' | 'type' | 'light'>
+>`
+	display: flex;
+	align-items: flex-start;
+	${({ theme, type, border, light }) => {
+		const colorSpace =
+			type === 'secondary' || type === 'primary'
+				? theme.colors.bases[type]
+				: theme.colors.extended[type]
+		return css`
+			padding: ${theme.spacings.xs} ${theme.spacings.lg};
+			background-color: ${light ? 'rgba(255,255,255,0.75)' : colorSpace[100]};
+			border: 2px solid ${colorSpace[border ? 500 : 100]};
+			border-radius: ${theme.box.borderRadius};
+			margin-bottom: ${theme.spacings.md};
+		`
+	}}
+`
+
+const StyledIcon = styled.img`
+	padding-right: ${({ theme }) => theme.spacings.md};
+	${({ theme, title }) =>
+		title !== 'paragraph'
+			? css`
+					margin-top: calc(${theme.spacings.md} + ${theme.spacings.xxs} / 2);
+					height: calc(${theme.spacings.md} + ${theme.spacings.xxs});
+			  `
+			: css`
+					margin-top: calc(${theme.spacings.lg});
+			  `}
+`

site/source/design-system/message/infoIcon.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM20 10C20 15.5229 15.5228 20 10 20C4.47715 20 -4.82823e-07 15.5228 0 10C4.82823e-07 4.47715 4.47715 -4.82823e-07 10 0C15.5229 4.82823e-07 20 4.47715 20 10Z" fill="#D3AA00"/>
+<path d="M9 6.00003C9 5.44774 9.44772 5.00003 10 5.00003C10.5523 5.00003 11 5.44774 11 6.00003C11 6.55231 10.5523 7.00003 10 7.00003C9.44772 7.00003 9 6.55231 9 6.00003Z" fill="#D3AA00"/>
+<path d="M11 14.6C11 15.1523 10.5523 15.6 10 15.6C9.44772 15.6 9 15.1523 9 14.6L9 9.4C9 8.84772 9.44772 8.4 10 8.4C10.5523 8.4 11 8.84772 11 9.4L11 14.6Z" fill="#D3AA00"/>
+</svg>

site/source/design-system/message/successIcon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#3CB053"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.261 6.14683C15.6494 6.53952 15.6459 7.17268 15.2532 7.56103L9.13554 13.611C8.74443 13.9978 8.11438 13.9961 7.72538 13.6072L4.643 10.5258C4.25242 10.1354 4.25232 9.50219 4.64278 9.11161C5.03324 8.72102 5.66641 8.72092 6.05699 9.11138L8.43618 11.4898L13.8468 6.13897C14.2395 5.75063 14.8727 5.75415 15.261 6.14683Z" fill="#3CB053"/>
+</svg>