From 0444d93e6f40093d0627677d7603e3e9de39aa90 Mon Sep 17 00:00:00 2001 From: Raphael Oliveira Date: Tue, 26 Mar 2019 15:06:49 -0300 Subject: [PATCH] feat(BTS-167): update layout of component and story --- components/SnackBar/SnackBar.jsx | 52 +- .../__snapshots__/SnackBar.unit.test.jsx.snap | 465 ++++++++++++++---- stories/SnackBar/SnackBar.story.jsx | 38 +- stories/SnackBar/examples/SnackBarExample.jsx | 35 +- 4 files changed, 454 insertions(+), 136 deletions(-) diff --git a/components/SnackBar/SnackBar.jsx b/components/SnackBar/SnackBar.jsx index fbc0dee36..692ca3915 100644 --- a/components/SnackBar/SnackBar.jsx +++ b/components/SnackBar/SnackBar.jsx @@ -1,18 +1,53 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; +import Colors from '../Colors'; import Button from '../Button'; -const SnackBarDialog = styled.section` - position: relative; +const SnackBarDialog = styled.div` + align-items: center; + background-color: ${Colors.COBALT['500']}; + border-radius: 4px; + bottom: 30px; + color: ${Colors.WHITE}; + display: flex; + justify-content: space-between; + left: calc(50% / 2); + min-height: 48px; + padding: 13px 16px; + position: fixed; +`; + +const TextContainer = styled.strong` + font-weight: normal; + max-width: 344px; + padding-right: 8px; `; const CloseIcon = styled(Button.Icon).attrs({ icon: 'close', })` - position: absolute; - top: 16px; - right: 16px; + color: ${Colors.WHITE}; + + :hover, + :focus { + background-color: transparent; + box-shadow: none; + color: ${Colors.WHITE}; + } +`; + +const ActionLink = styled.a` + color: ${Colors.WHITE}; + font-weight: bold; + padding: 13px 8px; + text-decoration: underline; + text-transform: uppercase; + white-space: nowrap; + + :hover { + text-decoration: none; + } `; class SnackBar extends React.Component { @@ -22,7 +57,8 @@ class SnackBar extends React.Component { const { text, onClose, closeButtonAriaLabel, ...rest } = this.props; return ( - {text} + {text} + action {onClose && ( )} @@ -34,17 +70,17 @@ class SnackBar extends React.Component { CloseIcon.displayName = 'CloseIcon'; SnackBar.propTypes = { + closeButtonAriaLabel: PropTypes.string, onClose: PropTypes.func, secondsToClose: PropTypes.number, text: PropTypes.string, - closeButtonAriaLabel: PropTypes.string, }; SnackBar.defaultProps = { + closeButtonAriaLabel: 'close SnackBar', onClose: () => {}, secondsToClose: 6, text: 'Text of SnackBar component', - closeButtonAriaLabel: 'close SnackBar', }; export default SnackBar; diff --git a/components/SnackBar/__snapshots__/SnackBar.unit.test.jsx.snap b/components/SnackBar/__snapshots__/SnackBar.unit.test.jsx.snap index 6045752d3..8c16cf097 100644 --- a/components/SnackBar/__snapshots__/SnackBar.unit.test.jsx.snap +++ b/components/SnackBar/__snapshots__/SnackBar.unit.test.jsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SnackBar component should match snapshots 1`] = ` -.c4 { +.c6 { margin-right: 5px; pointer-events: none; } -.c2 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -39,29 +39,29 @@ exports[`SnackBar component should match snapshots 1`] = ` border-radius: 4px; } -.c2 *:nth-child(2) { +.c4 *:nth-child(2) { margin-left: 5px; } -.c2 .c3 { +.c4 .c5 { font-size: 24px; } -.c2:hover { +.c4:hover { box-shadow: 0 2px 4px 0 #cccccc; background-color: #002f7b; border-color: #002f7b; color: #FFFFFF; } -.c2:focus { +.c4:focus { box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); background-color: #1355d0; border-color: #1355d0; color: #FFFFFF; } -.c2:active { +.c4:active { box-shadow: 0 2px 4px 0 #4c4c4c; background-color: #002f7b; border-color: #002f7b; @@ -69,10 +69,35 @@ exports[`SnackBar component should match snapshots 1`] = ` } .c0 { - position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #002f7b; + border-radius: 4px; + bottom: 30px; + color: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + left: calc(50%/2); + min-height: 48px; + padding: 13px 16px; + position: fixed; } .c1 { + font-weight: normal; + max-width: 344px; + padding-right: 8px; +} + +.c3 { border-radius: 50%; border: none; color: #999999; @@ -80,32 +105,62 @@ exports[`SnackBar component should match snapshots 1`] = ` background-color: transparent; box-shadow: none; outline: none; - position: absolute; - top: 16px; - right: 16px; + color: #FFFFFF; } -.c1:hover, -.c1:focus { +.c3:hover, +.c3:focus { box-shadow: none; background-color: rgba(204,204,204,0.4); color: #4c4c4c; } -.c1:active { +.c3:active { box-shadow: none; background-color: rgba(128,128,128,0.5); color: #4c4c4c; } -
- Text of SnackBar component + + Text of SnackBar component + + + action + -
+ `; exports[`SnackBar component should match snapshots 2`] = ` -.c4 { +.c6 { margin-right: 5px; pointer-events: none; } -.c2 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -166,29 +221,29 @@ exports[`SnackBar component should match snapshots 2`] = ` border-radius: 4px; } -.c2 *:nth-child(2) { +.c4 *:nth-child(2) { margin-left: 5px; } -.c2 .c3 { +.c4 .c5 { font-size: 24px; } -.c2:hover { +.c4:hover { box-shadow: 0 2px 4px 0 #cccccc; background-color: #002f7b; border-color: #002f7b; color: #FFFFFF; } -.c2:focus { +.c4:focus { box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); background-color: #1355d0; border-color: #1355d0; color: #FFFFFF; } -.c2:active { +.c4:active { box-shadow: 0 2px 4px 0 #4c4c4c; background-color: #002f7b; border-color: #002f7b; @@ -196,10 +251,35 @@ exports[`SnackBar component should match snapshots 2`] = ` } .c0 { - position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #002f7b; + border-radius: 4px; + bottom: 30px; + color: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + left: calc(50%/2); + min-height: 48px; + padding: 13px 16px; + position: fixed; } .c1 { + font-weight: normal; + max-width: 344px; + padding-right: 8px; +} + +.c3 { border-radius: 50%; border: none; color: #999999; @@ -207,32 +287,62 @@ exports[`SnackBar component should match snapshots 2`] = ` background-color: transparent; box-shadow: none; outline: none; - position: absolute; - top: 16px; - right: 16px; + color: #FFFFFF; } -.c1:hover, -.c1:focus { +.c3:hover, +.c3:focus { box-shadow: none; background-color: rgba(204,204,204,0.4); color: #4c4c4c; } -.c1:active { +.c3:active { box-shadow: none; background-color: rgba(128,128,128,0.5); color: #4c4c4c; } -
- SnackBar message content + + SnackBar message content + + + action + -
+ `; exports[`SnackBar component should match snapshots 3`] = ` -.c4 { +.c6 { margin-right: 5px; pointer-events: none; } -.c2 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -293,29 +403,29 @@ exports[`SnackBar component should match snapshots 3`] = ` border-radius: 4px; } -.c2 *:nth-child(2) { +.c4 *:nth-child(2) { margin-left: 5px; } -.c2 .c3 { +.c4 .c5 { font-size: 24px; } -.c2:hover { +.c4:hover { box-shadow: 0 2px 4px 0 #cccccc; background-color: #002f7b; border-color: #002f7b; color: #FFFFFF; } -.c2:focus { +.c4:focus { box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); background-color: #1355d0; border-color: #1355d0; color: #FFFFFF; } -.c2:active { +.c4:active { box-shadow: 0 2px 4px 0 #4c4c4c; background-color: #002f7b; border-color: #002f7b; @@ -323,10 +433,35 @@ exports[`SnackBar component should match snapshots 3`] = ` } .c0 { - position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #002f7b; + border-radius: 4px; + bottom: 30px; + color: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + left: calc(50%/2); + min-height: 48px; + padding: 13px 16px; + position: fixed; } .c1 { + font-weight: normal; + max-width: 344px; + padding-right: 8px; +} + +.c3 { border-radius: 50%; border: none; color: #999999; @@ -334,32 +469,62 @@ exports[`SnackBar component should match snapshots 3`] = ` background-color: transparent; box-shadow: none; outline: none; - position: absolute; - top: 16px; - right: 16px; + color: #FFFFFF; } -.c1:hover, -.c1:focus { +.c3:hover, +.c3:focus { box-shadow: none; background-color: rgba(204,204,204,0.4); color: #4c4c4c; } -.c1:active { +.c3:active { box-shadow: none; background-color: rgba(128,128,128,0.5); color: #4c4c4c; } -
- Text of SnackBar component + + Text of SnackBar component + + + action + -
+ `; exports[`SnackBar component should match snapshots 4`] = ` -.c4 { +.c6 { margin-right: 5px; pointer-events: none; } -.c2 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -420,29 +585,29 @@ exports[`SnackBar component should match snapshots 4`] = ` border-radius: 4px; } -.c2 *:nth-child(2) { +.c4 *:nth-child(2) { margin-left: 5px; } -.c2 .c3 { +.c4 .c5 { font-size: 24px; } -.c2:hover { +.c4:hover { box-shadow: 0 2px 4px 0 #cccccc; background-color: #002f7b; border-color: #002f7b; color: #FFFFFF; } -.c2:focus { +.c4:focus { box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); background-color: #1355d0; border-color: #1355d0; color: #FFFFFF; } -.c2:active { +.c4:active { box-shadow: 0 2px 4px 0 #4c4c4c; background-color: #002f7b; border-color: #002f7b; @@ -450,10 +615,35 @@ exports[`SnackBar component should match snapshots 4`] = ` } .c0 { - position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #002f7b; + border-radius: 4px; + bottom: 30px; + color: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + left: calc(50%/2); + min-height: 48px; + padding: 13px 16px; + position: fixed; } .c1 { + font-weight: normal; + max-width: 344px; + padding-right: 8px; +} + +.c3 { border-radius: 50%; border: none; color: #999999; @@ -461,32 +651,62 @@ exports[`SnackBar component should match snapshots 4`] = ` background-color: transparent; box-shadow: none; outline: none; - position: absolute; - top: 16px; - right: 16px; + color: #FFFFFF; } -.c1:hover, -.c1:focus { +.c3:hover, +.c3:focus { box-shadow: none; background-color: rgba(204,204,204,0.4); color: #4c4c4c; } -.c1:active { +.c3:active { box-shadow: none; background-color: rgba(128,128,128,0.5); color: #4c4c4c; } -
- Text of SnackBar component + + Text of SnackBar component + + + action + -
+ `; exports[`SnackBar component should match snapshots 5`] = ` -.c4 { +.c6 { margin-right: 5px; pointer-events: none; } -.c2 { +.c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -547,29 +767,29 @@ exports[`SnackBar component should match snapshots 5`] = ` border-radius: 4px; } -.c2 *:nth-child(2) { +.c4 *:nth-child(2) { margin-left: 5px; } -.c2 .c3 { +.c4 .c5 { font-size: 24px; } -.c2:hover { +.c4:hover { box-shadow: 0 2px 4px 0 #cccccc; background-color: #002f7b; border-color: #002f7b; color: #FFFFFF; } -.c2:focus { +.c4:focus { box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); background-color: #1355d0; border-color: #1355d0; color: #FFFFFF; } -.c2:active { +.c4:active { box-shadow: 0 2px 4px 0 #4c4c4c; background-color: #002f7b; border-color: #002f7b; @@ -577,10 +797,35 @@ exports[`SnackBar component should match snapshots 5`] = ` } .c0 { - position: relative; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #002f7b; + border-radius: 4px; + bottom: 30px; + color: #FFFFFF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + left: calc(50%/2); + min-height: 48px; + padding: 13px 16px; + position: fixed; } .c1 { + font-weight: normal; + max-width: 344px; + padding-right: 8px; +} + +.c3 { border-radius: 50%; border: none; color: #999999; @@ -588,32 +833,62 @@ exports[`SnackBar component should match snapshots 5`] = ` background-color: transparent; box-shadow: none; outline: none; - position: absolute; - top: 16px; - right: 16px; + color: #FFFFFF; } -.c1:hover, -.c1:focus { +.c3:hover, +.c3:focus { box-shadow: none; background-color: rgba(204,204,204,0.4); color: #4c4c4c; } -.c1:active { +.c3:active { box-shadow: none; background-color: rgba(128,128,128,0.5); color: #4c4c4c; } -
- Text of SnackBar component + + Text of SnackBar component + + + action + -
+ `; diff --git a/stories/SnackBar/SnackBar.story.jsx b/stories/SnackBar/SnackBar.story.jsx index 68c511b2c..aecd80d66 100644 --- a/stories/SnackBar/SnackBar.story.jsx +++ b/stories/SnackBar/SnackBar.story.jsx @@ -8,7 +8,6 @@ import { StoryContainer, Title, SimpleHighlight, - Table, } from '@catho/quantum-storybook-ui'; import { Row, Col } from '../../components'; @@ -18,42 +17,17 @@ import SnackBarExample from './examples/SnackBarExample'; storiesOf('SnackBar', module).add('SnackBar', () => ( <> - Modals inform users about a task and can contain critical information, - require decisions, or involve multiple tasks. + SnackBars are used to give a actions support that have just been maded: + delete or archive content by accident (undo), resend messages that not + been sended for any reason or try to reconnect to internet (retry). Importing SnackBar {`import { SnackBar } from '@catho/quantum';`} - - Compound Components -

We provide a few components to build your Modal.

- - - - - - - - - - - - - - - -
ComponentDescription
- {''} - - Modal wrapper, it's the root element of Modal - component. Hold all Modal elements. -
- - - + @@ -68,7 +42,7 @@ storiesOf('SnackBar', module).add('SnackBar', () => ( SnackBar

- Here you can check a simple implamentation using Modal component. + Here you can check a simple implamentation using SnackBar component.

@@ -76,7 +50,7 @@ storiesOf('SnackBar', module).add('SnackBar', () => ( {SnackBarExample.code} - + diff --git a/stories/SnackBar/examples/SnackBarExample.jsx b/stories/SnackBar/examples/SnackBarExample.jsx index c174a29b8..d512766ba 100644 --- a/stories/SnackBar/examples/SnackBarExample.jsx +++ b/stories/SnackBar/examples/SnackBarExample.jsx @@ -2,6 +2,38 @@ import React from 'react'; import Button from '../../../components/Button'; import SnackBar from '../../../components/SnackBar'; +class SnackBarExample extends React.Component { + constructor() { + super(); + + this.state = { + showSnackBar: false, + }; + } + + openSnackBar = () => this.setState({ showSnackBar: true }); + + closeSnackBar = () => this.setState({ showSnackBar: false }); + + render() { + const { showSnackBar } = this.state; + + return ( + <> + + {showSnackBar && ( + + )} + + ); + } +} + +SnackBarExample.code = ` +import React from 'react'; +import Button from '../../../components/Button'; +import SnackBar from '../../../components/SnackBar'; + class SnackBarExample extends React.Component { constructor() { super(); @@ -23,7 +55,7 @@ class SnackBarExample extends React.Component { {showSnackBar && ( )} @@ -31,5 +63,6 @@ class SnackBarExample extends React.Component { ); } } +`; export default SnackBarExample;