diff --git a/site/source/design-system/message/index.stories.tsx b/site/source/design-system/message/index.stories.tsx index 4e1d83e8b..fdca14d8a 100644 --- a/site/source/design-system/message/index.stories.tsx +++ b/site/source/design-system/message/index.stories.tsx @@ -1,7 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react' +import styled from 'styled-components' import { Message } from '@/design-system' +import { Strong } from '../typography' +import { Body } from '../typography/paragraphs' + // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { component: Message, @@ -20,8 +24,6 @@ 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 = (args) => ( @@ -40,7 +42,19 @@ const AlertTemplate: ComponentStory = (args) => ( export const Alert = AlertTemplate.bind({}) Alert.args = { - children: 'Votre message a bien été envoyé', icon: true, - border: true, } + +export const MessageWithCustomIcon = () => ( + + + Cet outil est en version bêta : nous + travaillons à valider les informations et les calculs, + mais des erreurs peuvent être présentes. + + +) + +const StyledStrong = styled(Strong)` + color: ${({ theme }) => theme.colors.extended.info[600]}; +` diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx index d135789c8..0c051d3e9 100644 --- a/site/source/design-system/message/index.tsx +++ b/site/source/design-system/message/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import styled, { ThemeProvider, css } from 'styled-components' +import Emoji from '@/components/utils/Emoji' import { Palette, SmallPalette } from '@/types/styled' import { ErrorIcon, InfoIcon, ReturnIcon, SuccessIcon } from '../icons' @@ -9,9 +10,10 @@ import { Body } from '../typography/paragraphs' export type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success' type MessageProps = { children: React.ReactNode - icon?: boolean + icon?: boolean | string border?: boolean type?: MessageType + mini?: boolean light?: boolean className?: string role?: string @@ -20,6 +22,7 @@ type MessageProps = { export function Message({ type = 'primary', icon = false, + mini = false, border = true, light = false, children, @@ -36,12 +39,15 @@ export function Message({ className={className} messageType={type} border={border} + mini={mini} light={light} aria-atomic > {icon && ( - {type === 'success' ? ( + {typeof icon === 'string' ? ( + + ) : type === 'success' ? ( ) : type === 'error' ? ( @@ -78,7 +84,7 @@ const StyledIconWrapper = styled.div<{ } ` -type StyledMessageProps = Pick & { +type StyledMessageProps = Pick & { messageType: NonNullable } @@ -86,16 +92,16 @@ const StyledMessage = styled.div` display: flex; position: relative; align-items: baseline; - ${({ theme, messageType, border, light }) => { + ${({ theme, messageType, border, light, mini }) => { const colorSpace: Palette | SmallPalette = messageType === 'secondary' || messageType === 'primary' ? theme.colors.bases[messageType] : theme.colors.extended[messageType] return css` - padding: 0px ${theme.spacings.lg}; + padding: 0px ${mini ? theme.spacings.md : theme.spacings.lg}; background-color: ${light ? 'rgba(255,255,255,0.75)' : colorSpace[100]}; - border: 2px solid ${colorSpace[border ? 500 : 100]}; + border: ${mini ? '1px' : '2px'} solid ${colorSpace[border ? 500 : 100]}; border-radius: ${theme.box.borderRadius}; margin-bottom: ${theme.spacings.md}; @@ -106,6 +112,9 @@ const StyledMessage = styled.div` color: ${(colorSpace as Palette)[700] ?? colorSpace[600]}; background-color: inherit; } + > * { + margin: -${mini ? theme.spacings.xs : 0} 0; + } ` }} `