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
feature/default_network_editable
Dan J Miller 5 years ago committed by GitHub
parent 92e6338b78
commit 5c4831bdee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 13
      .storybook/webpack.config.js
  2. 3
      app/images/icons/blue-circle-info.svg
  3. 3
      app/images/icons/green-circle-check.svg
  4. 3
      app/images/icons/red-triangle-exclaim.svg
  5. 3
      app/images/icons/yellow-bell.svg
  6. 4
      ui/app/components/app/index.scss
  7. 29
      ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js
  8. 18
      ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js
  9. 1
      ui/app/components/ui/alert-circle-icon/index.js
  10. 13
      ui/app/components/ui/alert-circle-icon/index.scss
  11. 52
      ui/app/components/ui/circle-icon/circle-icon.component.js
  12. 17
      ui/app/components/ui/circle-icon/circle-icon.stories.js
  13. 1
      ui/app/components/ui/circle-icon/index.js
  14. 23
      ui/app/components/ui/circle-icon/index.scss
  15. 12
      ui/app/css/itcss/settings/variables.scss

@ -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: {

@ -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>

After

Width:  |  Height:  |  Size: 787 B

@ -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>

After

Width:  |  Height:  |  Size: 842 B

@ -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>

After

Width:  |  Height:  |  Size: 282 B

@ -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>

After

Width:  |  Height:  |  Size: 724 B

@ -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';

@ -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] } />
)
}
}

@ -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"
/>
)

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

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

@ -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>
)
}
}

@ -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}
/>
)

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

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

@ -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
*/

Loading…
Cancel
Save