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-iconsfeature/default_network_editable
Dan J Miller
5 years ago
committed by
GitHub
parent
92e6338b78
commit
5c4831bdee
|
After Width: | Height: | Size: 787 B |
|
After Width: | Height: | Size: 842 B |
|
After Width: | Height: | Size: 282 B |
|
After Width: | Height: | Size: 724 B |
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue