From 5c4831bdeee59bcebc850d1771567b1d85b661bb Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 11 Mar 2020 12:30:39 -0230 Subject: [PATCH] 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 | 13 ++++- app/images/icons/blue-circle-info.svg | 3 ++ app/images/icons/green-circle-check.svg | 3 ++ app/images/icons/red-triangle-exclaim.svg | 3 ++ app/images/icons/yellow-bell.svg | 3 ++ ui/app/components/app/index.scss | 4 ++ .../alert-circle-icon.component.js | 29 +++++++++++ .../alert-circle-icon.stories.js | 18 +++++++ .../components/ui/alert-circle-icon/index.js | 1 + .../ui/alert-circle-icon/index.scss | 13 +++++ .../ui/circle-icon/circle-icon.component.js | 52 +++++++++++++++++++ .../ui/circle-icon/circle-icon.stories.js | 17 ++++++ ui/app/components/ui/circle-icon/index.js | 1 + ui/app/components/ui/circle-icon/index.scss | 23 ++++++++ ui/app/css/itcss/settings/variables.scss | 12 +++++ 15 files changed, 194 insertions(+), 1 deletion(-) create mode 100644 app/images/icons/blue-circle-info.svg create mode 100644 app/images/icons/green-circle-check.svg create mode 100644 app/images/icons/red-triangle-exclaim.svg create mode 100644 app/images/icons/yellow-bell.svg create mode 100644 ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js create mode 100644 ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js create mode 100644 ui/app/components/ui/alert-circle-icon/index.js create mode 100644 ui/app/components/ui/alert-circle-icon/index.scss create mode 100644 ui/app/components/ui/circle-icon/circle-icon.component.js create mode 100644 ui/app/components/ui/circle-icon/circle-icon.stories.js create mode 100644 ui/app/components/ui/circle-icon/index.js create mode 100644 ui/app/components/ui/circle-icon/index.scss diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index efb85d232..7d71274db 100644 --- a/.storybook/webpack.config.js +++ b/.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: { diff --git a/app/images/icons/blue-circle-info.svg b/app/images/icons/blue-circle-info.svg new file mode 100644 index 000000000..ebed859d5 --- /dev/null +++ b/app/images/icons/blue-circle-info.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/green-circle-check.svg b/app/images/icons/green-circle-check.svg new file mode 100644 index 000000000..305b326f7 --- /dev/null +++ b/app/images/icons/green-circle-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/red-triangle-exclaim.svg b/app/images/icons/red-triangle-exclaim.svg new file mode 100644 index 000000000..064908c78 --- /dev/null +++ b/app/images/icons/red-triangle-exclaim.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/yellow-bell.svg b/app/images/icons/yellow-bell.svg new file mode 100644 index 000000000..f40e00194 --- /dev/null +++ b/app/images/icons/yellow-bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index cc3cedfde..82ed1314b 100644 --- a/ui/app/components/app/index.scss +++ b/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'; diff --git a/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js b/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js new file mode 100644 index 000000000..78074fa4d --- /dev/null +++ b/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 ( + + ) + } +} diff --git a/ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js b/ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js new file mode 100644 index 000000000..9f873bf2b --- /dev/null +++ b/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 = () => ( + +) + +export const warningCircleIcon = () => ( + +) diff --git a/ui/app/components/ui/alert-circle-icon/index.js b/ui/app/components/ui/alert-circle-icon/index.js new file mode 100644 index 000000000..3cf319925 --- /dev/null +++ b/ui/app/components/ui/alert-circle-icon/index.js @@ -0,0 +1 @@ +export { default } from './alert-circle-icon.component' diff --git a/ui/app/components/ui/alert-circle-icon/index.scss b/ui/app/components/ui/alert-circle-icon/index.scss new file mode 100644 index 000000000..b5f5d6cc6 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/ui/app/components/ui/circle-icon/circle-icon.component.js b/ui/app/components/ui/circle-icon/circle-icon.component.js new file mode 100644 index 000000000..047245535 --- /dev/null +++ b/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 ( +
+
+ +
+ ) + } +} diff --git a/ui/app/components/ui/circle-icon/circle-icon.stories.js b/ui/app/components/ui/circle-icon/circle-icon.stories.js new file mode 100644 index 000000000..3d57b5f71 --- /dev/null +++ b/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 = () => ( + +) diff --git a/ui/app/components/ui/circle-icon/index.js b/ui/app/components/ui/circle-icon/index.js new file mode 100644 index 000000000..d5cfd62c1 --- /dev/null +++ b/ui/app/components/ui/circle-icon/index.js @@ -0,0 +1 @@ +export { default } from './circle-icon.component' diff --git a/ui/app/components/ui/circle-icon/index.scss b/ui/app/components/ui/circle-icon/index.scss new file mode 100644 index 000000000..82310ed15 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 8e2f03a0a..7302a648d 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/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 */