betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Ajoute la prop mini au composant message

pull/2431/head
Johan Girod 2022-12-13 15:53:03 +01:00
parent 12d158fa4e
commit c5a2a38730
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
site/source/design-system/message/index.stories.tsx
View File

@ -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<typeof Message> = (args) => (
@ -40,7 +42,19 @@ const AlertTemplate: ComponentStory<typeof Message> = (args) => (
export const Alert = AlertTemplate.bind({})
Alert.args = {
children: 'Votre message a bien été envoyé',
icon: true,
border: true,
}
export const MessageWithCustomIcon = () => (
<Message type="info" icon="🚧" border={false} mini>
<Body>
<StyledStrong>Cet outil est en version bêta</StyledStrong> : nous
travaillons à <Strong>valider les informations et les calculs</Strong>,
mais des <Strong>erreurs peuvent être présentes.</Strong>
</Body>
</Message>
)
const StyledStrong = styled(Strong)`
color: ${({ theme }) => theme.colors.extended.info[600]};
`

21
site/source/design-system/message/index.tsx
View File

@ -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 && (
<StyledIconWrapper type={type}>
{type === 'success' ? (
{typeof icon === 'string' ? (
<Emoji emoji={icon} aria-hidden />
) : type === 'success' ? (
<SuccessIcon />
) : type === 'error' ? (
<ErrorIcon />
@ -78,7 +84,7 @@ const StyledIconWrapper = styled.div<{
}
`
type StyledMessageProps = Pick<MessageProps, 'border' | 'light'> & {
type StyledMessageProps = Pick<MessageProps, 'border' | 'light' | 'mini'> & {
messageType: NonNullable<MessageProps['type']>
}
@ -86,16 +92,16 @@ const StyledMessage = styled.div<StyledMessageProps>`
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<StyledMessageProps>`
color: ${(colorSpace as Palette)[700] ?? colorSpace[600]};
background-color: inherit;
}
> * {
margin: -${mini ? theme.spacings.xs : 0} 0;
}
`
}}
`