Merge pull request #3293 from evhan55/fixes/alerts-react-styling

Fix alerts component/containers and CSS styling

src/components/alerts/alert.css

@@ -11,14 +11,14 @@
     align-items: left;
     border: 1px solid #FF8C1A;
     border-radius: 8px;
-    padding: 12px;
-    box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
+    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 {
@@ -29,6 +29,8 @@
     width: 100%;
 }
 
-.alert-remove-button {
-    color: #FF8C1A;
+.alert-close-button {
+    margin-top: 7px;
+    margin-right: 4px;
+    outline-style:none;
 }

src/components/alerts/alert.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 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';
 
@@ -23,12 +23,12 @@ const AlertComponent = ({
             ) : null}
             {message}
         </div>
-        <Button
-            className={styles.alertRemoveButton}
+        <CloseButton
+            className={styles.alertCloseButton}
+            color={CloseButton.COLOR_ORANGE}
+            size={CloseButton.SIZE_LARGE}
             onClick={onCloseAlert}
-        >
-            {'x'}
-        </Button>
+        />
     </Box>
 );
 

src/components/alerts/alerts.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '../box/box.jsx';
+import Alert from '../../containers/alert.jsx';
+
+const AlertsComponent = ({
+    alertsList,
+    className,
+    onCloseAlert
+}) => (
+    <Box
+        bounds="parent"
+        className={className}
+    >
+        {alertsList.map((a, index) => (
+            <Alert
+                iconURL={a.iconURL}
+                index={index}
+                key={index}
+                message={a.message}
+                onCloseAlert={onCloseAlert}
+            />
+        ))}
+    </Box>
+);
+
+AlertsComponent.propTypes = {
+    alertsList: PropTypes.arrayOf(PropTypes.object),
+    className: PropTypes.string,
+    onCloseAlert: PropTypes.func
+};
+
+export default AlertsComponent;

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%;
 }

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}
             /> :
             <img
-                className={styles.closeIcon}
-                src={closeIcon}
+                className={classNames(
+                    styles.closeIcon,
+                    {
+                        [styles.orange]: props.color === CloseButton.COLOR_ORANGE
+                    }
+                )}
+                src={props.color === CloseButton.COLOR_ORANGE ?
+                    closeIconOrange :
+                    closeIcon
+                }
             />
         }
     </div>
@@ -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])
 };

src/components/close-button/icon--close-orange.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M15.464935,15.467297 C14.7644059,16.1777705 13.6185877,16.1777705 12.9081142,15.467297 L9.99881899,12.5580018 L7.08841885,15.467297 C6.38236506,16.1733508 5.23765187,16.1733508 4.53159807,15.467297 C4.17912364,15.1148226 4.00012409,14.6485398 4.00012409,14.1888866 C4.00012409,13.7281285 4.17912364,13.2629506 4.53159807,12.9104762 L7.44089328,10.001181 L4.52717833,7.08636112 C4.17359897,6.73278176 3.99459941,6.26760391 4.00012409,5.80242606 C4.00012409,5.34166795 4.17359897,4.88201477 4.52717833,4.52954034 C5.23212719,3.82348655 6.37684038,3.82348655 7.08399911,4.52954034 L9.99881899,7.44325529 L12.9125339,4.52954034 C13.6185877,3.82348655 14.7644059,3.82348655 15.4704597,4.52954034 C16.1765134,5.2344892 16.1765134,6.38030733 15.4704597,7.08636112 L12.5545348,10.001181 L15.4704597,12.914896 C16.1765134,13.6209497 16.1765134,14.7557185 15.464935,15.467297" id="path-1"></path>
+    </defs>
+    <g id="Icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extensions/Connection/Close">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="close" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+            <g id="Color/Tangerine/1_Tangerine" mask="url(#mask-2)" fill="#FF8C1A" fill-rule="evenodd">
+                <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

src/containers/alert.jsx

@@ -15,10 +15,15 @@ class Alert extends React.Component {
         this.props.onCloseAlert(this.props.index);
     }
     render () {
+        const {
+            index, // eslint-disable-line no-unused-vars
+            iconURL,
+            message
+        } = this.props;
         return (
             <AlertComponent
-                iconURL={this.props.iconURL}
-                message={this.props.message}
+                iconURL={iconURL}
+                message={message}
                 onCloseAlert={this.handleOnCloseAlert}
             />
         );

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
 }) => (
-    <Box
-        bounds="parent"
-        className={classNames(className)}
-    >
-        {alertsList.map((a, index) => (
-            <Alert
-                iconURL={a.iconURL}
-                index={index}
-                key={index}
-                message={a.message}
-                onCloseAlert={onCloseAlert}
-            />
-        ))}
-    </Box>
+    <AlertsComponent
+        alertsList={alertsList}
+        className={className}
+        onCloseAlert={onCloseAlert}
+    />
 );
 
 Alerts.propTypes = {

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) {

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"
   >
     <img
-      className={undefined}
+      className=""
       src="test-file-stub"
     />
   </div>
@@ -102,7 +102,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     tabIndex="0"
   >
     <img
-      className={undefined}
+      className=""
       src="test-file-stub"
     />
   </div>