react-design-system-docaposte

A library of React components design system Docaposte

Install

npm install --save react-design-system-docaposte

Usage

import React from 'react'

import MyComponent from 'react-design-system-docaposte'
import 'react-design-system-docaposte/dist/index.css'

export default function Example() {
    return <MyComponent/>
}

Example

Run start script in example/package.json

npm start

Components

Button

Props component extends ButtonHTMLAttributes interface.

Props	Type	Default	Required	Detail
theme	"primary" "secondary" "ghost"	"primary"	false	Define button style
size	"thin" "default"	"default"	false	Define button size
icon	ReactNode	undefined	false	Define icon inside button to right of the text
loading	boolean	undefined	false	Display loader inside button

ButtonLink

Props component extends AnchorHTMLAttributes and ButtonHTMLAttributes interface.

Props	Type	Default	Required	Detail
asLink	boolean	false	false	Define if render tag HTML is link a or button

Card

Props component extends HTMLAttributes interface.

Props	Type	Default	Required	Detail
alignItem	"left" "center" "right"	"center"	false/true	Align the card inside content in available space
padding	boolean	undefined	false	Define if card has padding

Input

This component extends InputHTMLAttributes interface.

Props	Type	Default	Required	Detail
id	string	undefined	false	Element id, is required if label is defined
label	string	undefined	false	Text label
error	string	undefined	false	Display error below input, only render if not undefined
fullWidth	string	undefined	false	Define if input take full with to available space
icon	ReactNode	undefined	false	Display icon inside input

Text

Props component extends PropsWithChildren interface.

Props	Type	Default	Required	Detail
color	string	undefined	false	Define text render color, component can be use with sub-component

Text component has multiple sub-component to render text.

<Text.H1>
<Text.H2>
<Text.H3>
<Text.H4>
<Text.H5>
<Text.Subtitle1>
<Text.Subtitle2>
<Text.Body1>
<Text.Body2>
<Text.Caption>
<Text.Error>

Loader

Render loader svg animate, props component extends SVGAttributes interface.

Props	Type	Default	Required	Detail
color	string	"currentColor"	false	Define color of loader, default color is black
size	string number	24	false	Define size icon loader, default is 24px

Modal

Display modal, this component return a ReactPortal.

Props	Type	Default	Required	Detail
children	ReactNode		true	Modal content
open	boolean	false	true	Define if modal is display or not
onClose	() => void	undefined	false	Callback function is trigger when modal is closed
fullHeight	boolean	undefined	false	Modal wrapper can take the full height of the screen
disabledCloseClickOutside	boolean	undefined	false	By default modal is closed when click outside modal wrapper. This event can be disabled

Alert

Render a alert.

Props	Type	Default	Required	Detail
children	ReactNode		true	Content
displayed	boolean	false	false	Define if alert is display or not
theme	"success" "warning" "error" "info"	undefined	false	Define alert style
alignItem	"left" "center" "right"	undefined	false	Align alert inside content in available space
closable	boolean	undefined	false	Define if alert can be closed
fullWidth	boolean	undefined	false	Define alert take full width available space
onClose	() => void	undefined	false	Callback function is trigger when close button is clicked

Browser Support

IE 11+ ✔	Chrome 4.0+ ✔	Firefox 16.0+ ✔	Opera 15.0+ ✔	Safari 4.0+ ✔

License

Copyright © 2020 Eukles Solution