From 3a77388ff1e46680c940e6cbd470190d4fd63bce Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond Date: Fri, 28 Sep 2018 11:20:30 -0400 Subject: [PATCH 1/9] Cleanup for react container/component pattern for alerts/alert containers and components. --- src/components/alerts/alerts.jsx | 35 ++++++++++++++++++++++++++++++++ src/containers/alert.jsx | 12 ++++++++--- src/containers/alerts.jsx | 23 ++++++--------------- src/reducers/alerts.js | 4 +++- 4 files changed, 53 insertions(+), 21 deletions(-) create mode 100644 src/components/alerts/alerts.jsx diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx new file mode 100644 index 000000000..c589ad993 --- /dev/null +++ b/src/components/alerts/alerts.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import Box from '../box/box.jsx'; +import Alert from '../../containers/alert.jsx'; + +const AlertsComponent = ({ + alertsList, + className, + onCloseAlert +}) => ( + + {alertsList.map((a, index) => ( + + ))} + +); + +AlertsComponent.propTypes = { + alertsList: PropTypes.arrayOf(PropTypes.object), + className: PropTypes.string, + onCloseAlert: PropTypes.func +}; + +export default AlertsComponent; diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx index 90f2505dc..1d0a86eaa 100644 --- a/src/containers/alert.jsx +++ b/src/containers/alert.jsx @@ -15,11 +15,17 @@ class Alert extends React.Component { this.props.onCloseAlert(this.props.index); } render () { + const { + index, // eslint-disable-line no-unused-vars + onCloseAlert, + iconURL, + message + } = this.props; return ( ); } diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx index c6d7e668d..21a17700a 100644 --- a/src/containers/alerts.jsx +++ b/src/containers/alerts.jsx @@ -1,4 +1,3 @@ -import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import {connect} from 'react-redux'; @@ -7,28 +6,18 @@ import { closeAlert } from '../reducers/alerts'; -import Box from '../components/box/box.jsx'; -import Alert from '../containers/alert.jsx'; +import AlertsComponent from '../components/alerts/alerts.jsx'; const Alerts = ({ alertsList, className, onCloseAlert }) => ( - - {alertsList.map((a, index) => ( - - ))} - + ); Alerts.propTypes = { diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js index e0fdd72a9..fefc97b37 100644 --- a/src/reducers/alerts.js +++ b/src/reducers/alerts.js @@ -59,7 +59,9 @@ const closeAlert = function (index) { /** * Function to show an alert with the given input data. * - * @param {object} data - data with the following props: {message, extensionId=null} + * @param {object} data - data for the alert + * @param {string} data.message - message for the alert + * @param {string} data.extensionId - extension ID for the alert * @return {object} - an object to be passed to the reducer. */ const showAlert = function (data) { From c960d16dcff9711362999307c9554dea8c30c8fd Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond Date: Mon, 1 Oct 2018 19:07:39 -0400 Subject: [PATCH 2/9] Fixing / experimenting with alert css. --- src/components/alerts/alert.css | 4 ++-- src/components/alerts/alert.jsx | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 250c79d2a..2858d0c99 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -12,7 +12,7 @@ border: 1px solid #FF8C1A; border-radius: 8px; padding: 12px; - box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25); + box-shadow: 0px 0px 0px 2px rgba(255, 140, 26, 0.25); margin-bottom: 7px; } @@ -29,6 +29,6 @@ width: 100%; } -.alert-remove-button { +.alert-close-button { color: #FF8C1A; } diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 63ac06f51..48459dc22 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -1,8 +1,9 @@ import React from 'react'; +import {FormattedMessage} from 'react-intl'; import PropTypes from 'prop-types'; import Box from '../box/box.jsx'; -import Button from '../button/button.jsx'; +import CloseButton from '../close-button/close-button.jsx'; import styles from './alert.css'; @@ -22,13 +23,16 @@ const AlertComponent = ({ /> ) : null} {message} + - + /> ); From 72a107715c5d464bf8b76f87694fcc8f7bd56997 Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond Date: Tue, 2 Oct 2018 19:38:44 -0400 Subject: [PATCH 3/9] Adding orange mode to CloseButton component, further alerts CSS changes. --- src/components/alerts/alert.css | 7 ++++--- src/components/alerts/alert.jsx | 7 ++++--- src/components/close-button/close-button.css | 15 ++++++++++++++ src/components/close-button/close-button.jsx | 18 ++++++++++++++--- .../close-button/icon--close-orange.svg | 20 +++++++++++++++++++ 5 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 src/components/close-button/icon--close-orange.svg diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 2858d0c99..5625a6b85 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -11,14 +11,14 @@ align-items: left; border: 1px solid #FF8C1A; border-radius: 8px; - padding: 12px; + padding: 8px; box-shadow: 0px 0px 0px 2px rgba(255, 140, 26, 0.25); margin-bottom: 7px; } .alert-icon { - vertical-align: middle; margin-right: 5px; + vertical-align: middle; } .alert-message { @@ -30,5 +30,6 @@ } .alert-close-button { - color: #FF8C1A; + margin-top: 7px; + margin-right: 4px; } diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 48459dc22..009bd9319 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -22,15 +22,16 @@ const AlertComponent = ({ src={iconURL} /> ) : null} - {message} diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css index 072d5abff..90bd473ce 100644 --- a/src/components/close-button/close-button.css +++ b/src/components/close-button/close-button.css @@ -20,6 +20,11 @@ box-shadow: 0 0 0 4px $ui-black-transparent; } +.close-button.large.orange:hover { + transform: scale(1.1, 1.1); + box-shadow: 0px 0px 0px 4px hsla(29, 100%, 54%, 0.2); +} + .small { width: 0.825rem; height: 0.825rem; @@ -33,6 +38,11 @@ box-shadow: 0 0 0 2px $ui-black-transparent; } +.large.orange { + background-color: hsla(29, 100%, 54%, 0.2); + box-shadow: 0px 0px 0px 2px hsla(29, 100%, 54%, 0.2); +} + .close-icon { position: relative; margin: 0.25rem; @@ -41,6 +51,11 @@ transform: rotate(45deg); } +.close-icon.orange { + transform: rotate(45deg); + transform: scale(1.4); +} + .small .close-icon { width: 50%; } diff --git a/src/components/close-button/close-button.jsx b/src/components/close-button/close-button.jsx index 98cf78d02..b41a3d97c 100644 --- a/src/components/close-button/close-button.jsx +++ b/src/components/close-button/close-button.jsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import styles from './close-button.css'; import closeIcon from './icon--close.svg'; +import closeIconOrange from './icon--close-orange.svg'; import backIcon from '../../lib/assets/icon--back.svg'; const CloseButton = props => ( @@ -14,7 +15,8 @@ const CloseButton = props => ( props.className, { [styles.small]: props.size === CloseButton.SIZE_SMALL, - [styles.large]: props.size === CloseButton.SIZE_LARGE + [styles.large]: props.size === CloseButton.SIZE_LARGE, + [styles.orange]: props.color === CloseButton.COLOR_ORANGE } )} role="button" @@ -27,8 +29,16 @@ const CloseButton = props => ( src={backIcon} /> : } @@ -36,10 +46,12 @@ const CloseButton = props => ( CloseButton.SIZE_SMALL = 'small'; CloseButton.SIZE_LARGE = 'large'; +CloseButton.COLOR_ORANGE = 'orange'; CloseButton.propTypes = { buttonType: PropTypes.oneOf(['back', 'close']), className: PropTypes.string, + color: PropTypes.string, onClick: PropTypes.func.isRequired, size: PropTypes.oneOf([CloseButton.SIZE_SMALL, CloseButton.SIZE_LARGE]) }; diff --git a/src/components/close-button/icon--close-orange.svg b/src/components/close-button/icon--close-orange.svg new file mode 100644 index 000000000..7bd663355 --- /dev/null +++ b/src/components/close-button/icon--close-orange.svg @@ -0,0 +1,20 @@ + + + + Icon + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file From 1077dd6ae67387da6caebaeedb6c9e105a6caaa5 Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond Date: Tue, 2 Oct 2018 19:43:22 -0400 Subject: [PATCH 4/9] Fixing handleOnCloseAlert handler binding. --- src/containers/alert.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx index 1d0a86eaa..526ec65d2 100644 --- a/src/containers/alert.jsx +++ b/src/containers/alert.jsx @@ -12,6 +12,8 @@ class Alert extends React.Component { ]); } handleOnCloseAlert () { + console.log('prop to close: '); + console.log(this.props.index); this.props.onCloseAlert(this.props.index); } render () { @@ -25,7 +27,7 @@ class Alert extends React.Component { ); } From f1d3748780c146f489e93d7a9d9bd156c5841989 Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond Date: Tue, 2 Oct 2018 19:51:14 -0400 Subject: [PATCH 5/9] Removing highlight when hovering over alert close button after one closes, other minor styling fixes. --- src/components/alerts/alert.css | 1 + src/components/alerts/alert.jsx | 2 +- src/containers/alert.jsx | 3 --- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 5625a6b85..c4f00a741 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -32,4 +32,5 @@ .alert-close-button { margin-top: 7px; margin-right: 4px; + outline-style:none; } diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 009bd9319..ea9f559cc 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -30,7 +30,7 @@ const AlertComponent = ({ diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx index 526ec65d2..cb38427ad 100644 --- a/src/containers/alert.jsx +++ b/src/containers/alert.jsx @@ -12,14 +12,11 @@ class Alert extends React.Component { ]); } handleOnCloseAlert () { - console.log('prop to close: '); - console.log(this.props.index); this.props.onCloseAlert(this.props.index); } render () { const { index, // eslint-disable-line no-unused-vars - onCloseAlert, iconURL, message } = this.props; From 0f626541a9ee0cabf40353c5083c476a0cc5cf7b Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond Date: Tue, 2 Oct 2018 20:07:17 -0400 Subject: [PATCH 6/9] Removing placeholder formatted message. --- src/components/alerts/alert.jsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index ea9f559cc..d0f65309e 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import {FormattedMessage} from 'react-intl'; import PropTypes from 'prop-types'; import Box from '../box/box.jsx'; @@ -22,11 +21,7 @@ const AlertComponent = ({ src={iconURL} /> ) : null} - + {message} Date: Tue, 2 Oct 2018 20:37:09 -0400 Subject: [PATCH 7/9] Fixing classname prop. --- src/components/alerts/alerts.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx index c589ad993..a775782ea 100644 --- a/src/components/alerts/alerts.jsx +++ b/src/components/alerts/alerts.jsx @@ -12,7 +12,7 @@ const AlertsComponent = ({ }) => ( {alertsList.map((a, index) => ( Date: Tue, 2 Oct 2018 20:44:26 -0400 Subject: [PATCH 8/9] Removing unused import. --- src/components/alerts/alerts.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx index a775782ea..1835a50a8 100644 --- a/src/components/alerts/alerts.jsx +++ b/src/components/alerts/alerts.jsx @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; import Box from '../box/box.jsx'; import Alert from '../../containers/alert.jsx'; From 1d604231918781bbd156393b0fb5db896919f38d Mon Sep 17 00:00:00 2001 From: Evelyn Eastmond Date: Wed, 3 Oct 2018 11:10:01 -0400 Subject: [PATCH 9/9] Updating a unit test. --- .../__snapshots__/sprite-selector-item.test.jsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap index 237e3dc29..65e9e42ae 100644 --- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap +++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap @@ -21,7 +21,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de tabIndex="0" > @@ -102,7 +102,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = ` tabIndex="0" >