From 5936e938c9de51dd81f09605d385ca85caffdc6f Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Thu, 10 Mar 2022 16:21:29 +0100 Subject: [PATCH] Ajoute le composant Message au design system fix #2028 --- site/source/design-system/index.ts | 1 + .../source/design-system/message/baseIcon.svg | 4 + .../design-system/message/errorIcon.svg | 5 + .../design-system/message/index.stories.tsx | 45 +++++++++ site/source/design-system/message/index.tsx | 91 +++++++++++++++++++ .../source/design-system/message/infoIcon.svg | 5 + .../design-system/message/successIcon.svg | 4 + 7 files changed, 155 insertions(+) create mode 100644 site/source/design-system/message/baseIcon.svg create mode 100644 site/source/design-system/message/errorIcon.svg create mode 100644 site/source/design-system/message/index.stories.tsx create mode 100644 site/source/design-system/message/index.tsx create mode 100644 site/source/design-system/message/infoIcon.svg create mode 100644 site/source/design-system/message/successIcon.svg diff --git a/site/source/design-system/index.ts b/site/source/design-system/index.ts index 9c5211a0c8..44b67609f2 100644 --- a/site/source/design-system/index.ts +++ b/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' diff --git a/site/source/design-system/message/baseIcon.svg b/site/source/design-system/message/baseIcon.svg new file mode 100644 index 0000000000..28a4d40ac3 --- /dev/null +++ b/site/source/design-system/message/baseIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/site/source/design-system/message/errorIcon.svg b/site/source/design-system/message/errorIcon.svg new file mode 100644 index 0000000000..1307cb2f79 --- /dev/null +++ b/site/source/design-system/message/errorIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/site/source/design-system/message/index.stories.tsx b/site/source/design-system/message/index.stories.tsx new file mode 100644 index 0000000000..c65da335c1 --- /dev/null +++ b/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 + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template: ComponentStory = (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 = (args) => ( + <> + + Votre message a bien été envoyé + + + Certaines informations sont incorrectes + + + Échec de l’envoi du message + + +) + +export const Alert = AlertTemplate.bind({}) +Alert.args = { + children: 'Votre message a bien été envoyé', + icon: true, + border: true, +} diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx new file mode 100644 index 0000000000..05f9c5e876 --- /dev/null +++ b/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 = {children} + } + return ( + + {icon && + (type === 'success' ? ( + + ) : type === 'error' ? ( + + ) : type === 'info' ? ( + + ) : ( + + ))} +
{children}
+ + ) +} + +const StyledMessage = styled.div< + Pick +>` + 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}); + `} +` diff --git a/site/source/design-system/message/infoIcon.svg b/site/source/design-system/message/infoIcon.svg new file mode 100644 index 0000000000..c97b6bc9c4 --- /dev/null +++ b/site/source/design-system/message/infoIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/site/source/design-system/message/successIcon.svg b/site/source/design-system/message/successIcon.svg new file mode 100644 index 0000000000..e02eae0e5c --- /dev/null +++ b/site/source/design-system/message/successIcon.svg @@ -0,0 +1,4 @@ + + + +