-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Alert): Add new Alert and AlertTitle components
- Loading branch information
Showing
9 changed files
with
765 additions
and
303 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| ```jsx | ||
| import Alert from 'cozy-ui/transpiled/react/Alert' | ||
| import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle' | ||
| import Button from 'cozy-ui/transpiled/react/Buttons' | ||
| import Icon from 'cozy-ui/transpiled/react/Icon' | ||
| import Variants from 'cozy-ui/docs/components/Variants' | ||
| import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop' | ||
| import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download' | ||
|
|
||
| const initialVariants = [{ | ||
| longText: false, | ||
| title: false, | ||
| block: false, | ||
| color: false, | ||
| largeIcon: false, | ||
| noIcon: false, | ||
| square: false, | ||
| actionOne: false, | ||
| actionTwo: false, | ||
| close: false | ||
| }] | ||
|
|
||
| ; | ||
|
|
||
| <Variants initialVariants={initialVariants} screenshotAllVariants> | ||
| {variant => ( | ||
| <Alert | ||
| color={variant.color ? "#EFA82D" : undefined} | ||
| block={variant.block} | ||
| square={variant.square} | ||
| icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined} | ||
| action={(variant.actionOne || variant.actionTwo) ? | ||
| <> | ||
| {variant.actionOne && | ||
| <Button variant="text" size="small" label="Download" startIcon={<Icon icon={DownloadIcon} />} /> | ||
| } | ||
| {variant.actionTwo && | ||
| <Button variant="text" size="small" label="No, thanks!" /> | ||
| } | ||
| </> | ||
| : undefined | ||
| } | ||
| onClose={variant.close ? () => {} : undefined} | ||
| > | ||
| {variant.title && <AlertTitle>This is the title</AlertTitle>} | ||
| {variant.longText | ||
| ? content.ada.short | ||
| : "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times." | ||
| } | ||
| </Alert> | ||
| )} | ||
| </Variants> | ||
| ``` | ||
|
|
||
| ### Colors | ||
|
|
||
| ```jsx | ||
| import Alert from 'cozy-ui/transpiled/react/Alert' | ||
| import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle' | ||
| import Button from 'cozy-ui/transpiled/react/Buttons' | ||
| import Typography from 'cozy-ui/transpiled/react/Typography' | ||
| import Variants from 'cozy-ui/docs/components/Variants' | ||
|
|
||
| const colors = ['primary', 'secondary','success', 'error', 'warning', 'info'] | ||
| const initialVariants = [{ title: true, block: false, close: false }] | ||
|
|
||
| const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? undefined : color | ||
|
|
||
| ; | ||
|
|
||
| <Variants initialVariants={initialVariants} screenshotAllVariants> | ||
| {variant => ( | ||
| <> | ||
| {colors.map(color => | ||
| <div className="u-mb-1" key={color}> | ||
| <Alert | ||
| severity={color} | ||
| block={variant.block} | ||
| action={variant.close ? undefined : ( | ||
| <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" /> | ||
| )} | ||
| onClose={variant.close ? () => {} : undefined} | ||
| > | ||
| {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>} | ||
| This is a {color} alert | ||
| </Alert> | ||
| </div> | ||
| )} | ||
|
|
||
| <hr /> | ||
| <Typography variant="h4" paragraph>Filled variant</Typography> | ||
|
|
||
| {colors.map(color => | ||
| <div className="u-mb-1" key={color}> | ||
| <Alert | ||
| variant="filled" | ||
| severity={color} | ||
| block={variant.block} | ||
| action={variant.close ? undefined : ( | ||
| <Button variant="primary" size="small" color={makeButtonColor(color)} label="ACTION" /> | ||
| )} | ||
| onClose={variant.close ? () => {} : undefined} | ||
| > | ||
| {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>} | ||
| This is a {color} alert | ||
| </Alert> | ||
| </div> | ||
| )} | ||
|
|
||
| <hr /> | ||
| <Typography variant="h4" paragraph>Outlined variant</Typography> | ||
|
|
||
| {colors.map(color => | ||
| <div className="u-mb-1" key={color}> | ||
| <Alert | ||
| variant="outlined" | ||
| severity={color} | ||
| block={variant.block} | ||
| action={variant.close ? undefined : ( | ||
| <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" /> | ||
| )} | ||
| onClose={variant.close ? () => {} : undefined} | ||
| > | ||
| {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>} | ||
| This is a {color} alert | ||
| </Alert> | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </Variants> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import React, { forwardRef } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import cx from 'classnames' | ||
| import MuiAlert from '@material-ui/lab/Alert' | ||
| import { makeStyles } from '@material-ui/core/styles' | ||
|
|
||
| import Icon from '../Icon' | ||
| import CheckCircleIcon from '../Icons/CheckCircle' | ||
| import WarningIcon from '../Icons/Warning' | ||
| import WarningCircleIcon from '../Icons/WarningCircle' | ||
| import InfoIcon from '../Icons/Info' | ||
|
|
||
| const DEFAULT_ICON_SIZE = 16 | ||
|
|
||
| const defaultIconMapping = { | ||
| success: <Icon icon={CheckCircleIcon} />, | ||
| warning: <Icon icon={WarningIcon} />, | ||
| error: <Icon icon={WarningCircleIcon} />, | ||
| info: <Icon icon={InfoIcon} /> | ||
| } | ||
|
|
||
| const makeIcon = (icon, severity) => { | ||
| // used to remove icon | ||
| if (icon === false) { | ||
| return false | ||
| } | ||
|
|
||
| return ( | ||
| icon || | ||
| (['primary', 'secondary'].includes(severity) && <Icon icon={InfoIcon} />) || | ||
| undefined | ||
| ) | ||
| } | ||
|
|
||
| const useStyles = makeStyles({ | ||
| message: { | ||
| maxWidth: ({ block, iconSize }) => | ||
| block && `calc(100% - ${iconSize + 16}px)` | ||
| } | ||
| }) | ||
|
|
||
| const Alert = forwardRef( | ||
| ( | ||
| { | ||
| className, | ||
| icon, | ||
| severity, | ||
| block, | ||
| color, | ||
| square, | ||
| action, | ||
| variant, | ||
| children, | ||
| ...props | ||
| }, | ||
| ref | ||
| ) => { | ||
| const madeSeverity = ['primary', 'secondary'].includes(severity) | ||
| ? 'success' | ||
| : severity | ||
| const madeIcon = makeIcon(icon, severity) | ||
| const iconSize = icon?.props?.size || DEFAULT_ICON_SIZE | ||
| const styles = useStyles({ iconSize, block }) | ||
|
|
||
| return ( | ||
| <MuiAlert | ||
| ref={ref} | ||
| style={{ backgroundColor: color, borderRadius: square && 0 }} | ||
| className={cx( | ||
| className, | ||
| `cozyAlert-${severity}-${variant}`, | ||
| { block }, | ||
| { action: Boolean(action) } | ||
| )} | ||
| classes={styles} | ||
| variant={variant} | ||
| severity={madeSeverity} | ||
| iconMapping={defaultIconMapping} | ||
| icon={madeIcon} | ||
| action={action} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </MuiAlert> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| Alert.propTypes = { | ||
| className: PropTypes.string, | ||
| icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]), | ||
| severity: PropTypes.oneOf([ | ||
| 'primary', | ||
| 'secondary', | ||
| 'success', | ||
| 'error', | ||
| 'warning', | ||
| 'info' | ||
| ]), | ||
| block: PropTypes.bool, | ||
| color: PropTypes.string, | ||
| square: PropTypes.bool, | ||
| variant: PropTypes.oneOf(['standard', 'outlined', 'filled']) | ||
| } | ||
|
|
||
| Alert.defaultProps = { | ||
| severity: 'primary', | ||
| block: false, | ||
| square: false, | ||
| variant: 'standard' | ||
| } | ||
|
|
||
| export default Alert |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Re-export of @material-ui. See [the official API](https://v4.mui.com/api/alert-title/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import MuiAlertTitle from '@material-ui/lab/AlertTitle' | ||
|
|
||
| export default MuiAlertTitle |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.