Notifications Icon Circles (#7830)

* Adds notification icon circles and associated storybook stories

* Fix image paths in circle-icon.stories and message-circle-icon.component

* Code improvements for icon circles PR: remove additional z-index, make iconSource required

* Use component story format in circle-icon.stories and message-circle-icon.stories

* Remove success and info circle icons, as not presently needed

* Rename message-circle-icon to alert-circle-icon

* Small code fix ups for alert-circle-icons

.storybook/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
         loaders: [{
           loader: 'file-loader',
           options: {
@@ -27,6 +27,17 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+            },
+          }
+        ],
+      },
     ],
   },
   resolve: {

app/images/icons/blue-circle-info.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z" fill="#037DD6"/>
+</svg>

app/images/icons/green-circle-check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4 8C14.4 9.69739 13.7257 11.3253 12.5255 12.5255C11.3253 13.7257 9.69739 14.4 8 14.4C6.30261 14.4 4.67475 13.7257 3.47452 12.5255C2.27428 11.3253 1.6 9.69739 1.6 8C1.6 6.30261 2.27428 4.67475 3.47452 3.47452C4.67475 2.27428 6.30261 1.6 8 1.6C8.608 1.6 9.2 1.688 9.76 1.848L11.016 0.592C10.088 0.208 9.072 0 8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8H14.4ZM4.728 6.464L3.6 7.6L7.2 11.2L15.2 3.2L14.072 2.064L7.2 8.936L4.728 6.464Z" fill="#28A745"/>
+</svg>

app/images/icons/red-triangle-exclaim.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0L0 16H16L8 0ZM8 3.36842L13.4764 14.3158H2.52364L8 3.36842ZM7.27273 6.73684V10.1053H8.72727V6.73684H7.27273ZM7.27273 11.7895V13.4737H8.72727V11.7895" fill="#D73A49"/>
+</svg>

app/images/icons/yellow-bell.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7059 12H3.29412V6.8C3.29412 4.8 4.94118 3.2 7 3.2C9.05882 3.2 10.7059 4.8 10.7059 6.8V12ZM12.3529 11.2V6.8C12.3529 4.344 10.5906 2.288 8.23529 1.744V1.2C8.23529 0.88174 8.10515 0.576516 7.87349 0.351472C7.64182 0.126428 7.32762 0 7 0C6.67238 0 6.35818 0.126428 6.12651 0.351472C5.89485 0.576516 5.76471 0.88174 5.76471 1.2V1.744C3.40118 2.288 1.64706 4.344 1.64706 6.8V11.2L0 12.8V13.6H14V12.8L12.3529 11.2ZM7 16C7.43683 16 7.85576 15.8314 8.16465 15.5314C8.47353 15.2313 8.64706 14.8243 8.64706 14.4H5.35294C5.35294 14.8243 5.52647 15.2313 5.83535 15.5314C6.14424 15.8314 6.56317 16 7 16Z" fill="#FFD33D"/>
+</svg>

ui/app/components/app/index.scss

@@ -83,3 +83,7 @@
 @import 'connected-sites-list/index';
 
 @import '../ui/icon-with-fallback/index';
+
+@import '../ui/circle-icon/index';
+
+@import '../ui/alert-circle-icon/index';

ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CircleIcon from '../circle-icon'
+
+import danger from '../../../../../app/images/icons/red-triangle-exclaim.svg'
+import warning from '../../../../../app/images/icons/yellow-bell.svg'
+
+const typeConfig = {
+  danger: {
+    circleClass: 'alert-circle-icon--danger',
+    iconSource: danger,
+  },
+  warning: {
+    circleClass: 'alert-circle-icon--warning',
+    iconSource: warning,
+  },
+}
+
+export default class AlertCircleIcon extends Component {
+  static propTypes = {
+    type: PropTypes.oneOf(Object.keys(typeConfig)).isRequired,
+  }
+
+  render () {
+    return (
+      <CircleIcon { ...typeConfig[this.props.type] } />
+    )
+  }
+}

ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import AlertCircleIcon from './alert-circle-icon.component'
+
+export default {
+  title: 'AlertCircleIcon',
+}
+
+export const dangerCircleIcon = () => (
+  <AlertCircleIcon
+    type="danger"
+  />
+)
+
+export const warningCircleIcon = () => (
+  <AlertCircleIcon
+    type="warning"
+  />
+)

ui/app/components/ui/alert-circle-icon/index.js

@@ -0,0 +1 @@
+export { default } from './alert-circle-icon.component'

ui/app/components/ui/alert-circle-icon/index.scss

@@ -0,0 +1,13 @@
+.alert-circle-icon {
+  &--danger {
+    border-color: $danger-red;
+    color: $danger-red;
+    background: $danger-light-red;
+  }
+
+  &--warning {
+    border-color: $warning-yellow;
+    color: $warning-yellow;
+    background: $warning-light-yellow;
+  }
+}

ui/app/components/ui/circle-icon/circle-icon.component.js

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class CircleIcon extends PureComponent {
+  static propTypes = {
+    size: PropTypes.string,
+    circleClass: PropTypes.string,
+    iconSource: PropTypes.string.isRequired,
+    iconSize: PropTypes.string,
+  }
+
+  static defaultProps = {
+    size: '56px',
+    iconSize: '18px',
+    circleClass: '',
+  }
+
+  render () {
+    const {
+      size,
+      circleClass,
+      iconSize,
+      iconSource,
+    } = this.props
+
+    return (
+      <div
+        className="circle-icon__container"
+        style={{
+          height: size,
+          width: size,
+        }}
+      >
+        <div
+          className={`circle-icon__border circle-icon__circle ${circleClass}`}
+          style={{
+            height: size,
+            width: size,
+          }}
+        />
+        <img
+          src={iconSource}
+          className="circle-icon__icon"
+          style={{
+            height: iconSize,
+            width: iconSize,
+          }}
+        />
+      </div>
+    )
+  }
+}

ui/app/components/ui/circle-icon/circle-icon.stories.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import CircleIcon from './circle-icon.component'
+import img from '../../../../../app/images/eth_logo.svg'
+
+export default {
+  title: 'CircleIcon',
+}
+
+export const basicCircleIcon = () => (
+  <CircleIcon
+    border="1px solid"
+    borderColor="black"
+    background="white"
+    iconSize="42px"
+    iconSource={img}
+  />
+)

ui/app/components/ui/circle-icon/index.js

@@ -0,0 +1 @@
+export { default } from './circle-icon.component'

ui/app/components/ui/circle-icon/index.scss

@@ -0,0 +1,23 @@
+.circle-icon {
+  &__container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__border {
+    border-radius: 50%;
+    position: absolute;
+  }
+
+  &__circle {
+    border: 1px solid;
+    border-color: $black;
+    background: $white;
+  }
+
+  &__icon {
+    position: relative;
+  }
+}

ui/app/css/itcss/settings/variables.scss

@@ -61,6 +61,18 @@ $blizzard-blue: #bfdef3;
 $mischka: #dddee9;
 $web-orange: #f2a202;
 
+/*
+  notification and error message colors
+  */
+$success-green: #28A745;
+$success-light-green: #E8F9F1;
+$danger-red: #D73A49;
+$danger-light-red: #F8EAE8;
+$info-blue: #037DD6;
+$info-light-blue: #E8F4FD;
+$warning-yellow: #FFD33D;
+$warning-light-yellow: #FEFAE8;
+
 /*
   Z-Indicies
  */