Ajoute le composant Message au design system

fix #2028
betagouv · Mar 14, 2022 · 59d9304 · 59d9304
1 parent d023840
commit 59d9304
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 0 deletions.
diff --git 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
diff --git a/site/source/design-system/message/errorIcon.svg b/site/source/design-system/message/errorIcon.svg
diff --git a/site/source/design-system/message/index.stories.tsx 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<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,
+}
diff --git a/site/source/design-system/message/index.tsx 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 = <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});
+ `}
+`
diff --git a/site/source/design-system/message/infoIcon.svg b/site/source/design-system/message/infoIcon.svg
diff --git a/site/source/design-system/message/successIcon.svg b/site/source/design-system/message/successIcon.svg