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