diff --git a/docs-src/src/ExampleScope.js b/docs-src/src/ExampleScope.js index 349dce14..cadb53e9 100644 --- a/docs-src/src/ExampleScope.js +++ b/docs-src/src/ExampleScope.js @@ -22,6 +22,7 @@ import DatePicker from 'harmonium/lib/DatePicker' import Drawer from 'harmonium/lib/Drawer' import Emptyable from 'harmonium/lib/Emptyable' import ExpandingCol from 'harmonium/lib/ExpandingCol' +import Flash from 'harmonium/lib/Flash' import FileInput from 'harmonium/lib/FileInput' import FlexVideo from 'harmonium/lib/FlexVideo' import Form from 'harmonium/lib/Form' @@ -93,6 +94,7 @@ export default { Emptyable, ExpandingCol, FileInput, + Flash, FlexVideo, Form, forms, diff --git a/docs-src/src/examples/Flash.js.example b/docs-src/src/examples/Flash.js.example new file mode 100644 index 00000000..33e3495c --- /dev/null +++ b/docs-src/src/examples/Flash.js.example @@ -0,0 +1,42 @@ + + +

Utility Flashes

+ + + + + Default Flash + + + + + Success Flash + + + + + Warning Flash + + + + + Alert Flash + + + + + Persistent Flash + + + + + Flash that fades out after [X]s + + + + + Dismissible Flash + + + + diff --git a/docs-src/src/layouts/Navigation.js b/docs-src/src/layouts/Navigation.js index f2c65313..5855ab17 100644 --- a/docs-src/src/layouts/Navigation.js +++ b/docs-src/src/layouts/Navigation.js @@ -156,6 +156,9 @@ export default function Navigation() { Callout + + Flash + Modal diff --git a/docs-src/src/pages/components/Flash.js b/docs-src/src/pages/components/Flash.js new file mode 100644 index 00000000..4defc24c --- /dev/null +++ b/docs-src/src/pages/components/Flash.js @@ -0,0 +1,48 @@ +import React, {Component} from 'react' +import ExampleSection from '../../ExampleSection' +import scope from '../../ExampleScope' +import FlashVars from './FlashTables/FlashVars' +import FlashProps from './FlashTables/FlashProps' +import Headers from '../../Headers' +import Table from 'harmonium/lib/Table' +import Layout from '../../layouts/index.js' + +const examples = { + Flash: require('raw-loader!../../examples/Flash.js.example'), +} + +export default class FlashExamplePage extends Component { + render() { + return ( + +
+ +

+ A Flash is a small message designed to highlight a message to the + user. Harmonium has a variety of semantic Flash components. The + type of Flash you use should be determined by the nature of the + message. Use primary for informational messages, success for + success messages, etc. +

+ + +

Variables:

+ +

Properties:

+ +
+ + ) + } +} diff --git a/docs-src/src/pages/components/FlashTables/FlashProps.js b/docs-src/src/pages/components/FlashTables/FlashProps.js new file mode 100644 index 00000000..5b3074c8 --- /dev/null +++ b/docs-src/src/pages/components/FlashTables/FlashProps.js @@ -0,0 +1,180 @@ +import React, {Component} from 'react' +import Table from 'harmonium/lib/Table' +import Layout from '../../../layouts/index.js' + +export default function FlashProps() { + return ( + + + + Name + Type + Default + Description + + + + Flash Props + + + + + Name: Default + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for info flash. Adds the class rev-Flash + + + + + + + Name: success + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for success flash. Adds the class{' '} + rev-Flash--success + + + + + + + Name: warning + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for warning flash. Adds the class{' '} + rev-Flash--warning + + + + + + + Name: alert + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for alert flash. Adds the class{' '} + rev-Flash--alert + + + + + + + Name:{' '} + persistent + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for persistent flash. Adds the class{' '} + rev-Flash--persistent + + + + + + + Name: fade + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for fade flash. Adds the class{' '} + rev-Flash--fade And fades out after 5secs + + + + + + + Name:{' '} + dismissible + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for the dismissible flash. Adds the class{' '} + rev-Flash--dismissible And is hidden when clicked + + + + + + + Name:{' '} + closeIcon + + + Type: node + + + Default: undefined + + + Description:{' '} + Optional custom close icon for the dismissible flash. + + + +
+ ) +} diff --git a/docs-src/src/pages/components/FlashTables/FlashVars.js b/docs-src/src/pages/components/FlashTables/FlashVars.js new file mode 100644 index 00000000..39c7c39c --- /dev/null +++ b/docs-src/src/pages/components/FlashTables/FlashVars.js @@ -0,0 +1,96 @@ +import React, {Component} from 'react' +import Table from 'harmonium/lib/Table' +import Layout from '../../../layouts/index.js' + +export default function FlashVars() { + return ( + + + + Variable Name + Default Value + Description + + + + Flash Vars + + + + + Var:{' '} + $flash-background + + + Default Value:{' '} + $primary + + + Description: Default + background color for Flash. + + + + + + Var:{' '} + $flash-border-size + + + Default Value:{' '} + 1px + + + Description: Default border + size for Flash + + + + + + Var:{' '} + $flash-border-color + + + Default Value:{' '} + $divider-color-dark + + + Description: Default border + color for Flash. + + + + + + Var:{' '} + $flash-color + + + Default Value:{' '} + $white + + + Description: Default font + color for Flash. + + + + + + Var:{' '} + $flash-padding + + + Default Value:{' '} + $global-vertical-space, $global-horizontal-space + + + Description: Default + padding for Flash. + + + +
+ ) +} diff --git a/scss/components/_Flash.scss b/scss/components/_Flash.scss new file mode 100644 index 00000000..52247f35 --- /dev/null +++ b/scss/components/_Flash.scss @@ -0,0 +1,40 @@ +// default component vars listed at the top of the component stylesheet +// those vars are transferred to rev-settings AND are commented out +// this way updates can be made to a component by uncommenting settings vars +$flash-background: $primary !default; +$flash-border-size: 1px !default; +$flash-border-color: $divider-color-dark !default; +$flash-color: $white !default; +$flash-padding: $global-padding-tiny 0; +$flash-dismissible-padding-right: global-padding-tiny; +$flash-margin: $global-margin; +$flash-close-right: $global-padding-tiny; +$flash-close-top: $global-padding-tiny; + +.rev-Flash { + @include color-management; + @include typography-contained; + background: $flash-background; + border: $flash-border-size solid $flash-border-color; + color: $flash-color; + margin-bottom: $flash-margin; + padding: $flash-padding; + position: relative; + + &.rev-Flash--fade { + @include fade-out--hide(); + } + &.rev-Flash--dismissible { + cursor: pointer; + padding-right: $flash-dismissible-padding-right; + } +} + +.rev-FlashClose { + background: none; + border: none; + color: $flash-color; + position: absolute; + right: $flash-close-right; + top: $flash-close-top; +} diff --git a/scss/components/_components.scss b/scss/components/_components.scss index 957c9bc3..27a211de 100755 --- a/scss/components/_components.scss +++ b/scss/components/_components.scss @@ -24,6 +24,7 @@ @import 'Card'; @import 'CardLayout'; @import 'DataGrid'; +@import 'Flash'; @import 'Modal'; // requires Card @import 'Sticky'; @import 'Table'; diff --git a/scss/mixins/_animations.scss b/scss/mixins/_animations.scss index 586d5dfe..d289847c 100755 --- a/scss/mixins/_animations.scss +++ b/scss/mixins/_animations.scss @@ -1,26 +1,75 @@ -@-webkit-keyframes fade-in { - 0% {opacity: 0; } - 100% { opacity: 1; } +@keyframes fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } } -@-moz-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } -@-o-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } + +@keyframes hide { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-100%); + position: absolute; + transition: transform 2s; + } } -@keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } + +@mixin fade-out( + $animation-delay: 0, + $animation-duration: 0.5s, + $animation-fill-mode: both +) { + animation-name: fade-out; + animation-delay: $animation-delay; + animation-duration: $animation-duration; + animation-fill-mode: $animation-fill-mode; } + +.FadeOut { + @include fade-out; +} + +@mixin fade-in( + $animation-delay: 0, + $animation-duration: 0.5s, + $animation-fill-mode: both +) { + animation-name: fade-in; + animation-delay: $animation-delay; + animation-duration: $animation-duration; + animation-fill-mode: $animation-fill-mode; +} + .FadeIn { - -moz-animation: fade-in 0.5s; - -o-animation: fade-in 0.5s; - -webkit-animation: fade-in 0.5s; - animation: fade-in 0.5s; + @include fade-in; } -@mixin fade-in{ - @extend .FadeIn; +@mixin fade-out--hide( + $animation-delay: ( + 5s, + 5s, + ), + $animation-duration: ( + 0.3s, + 0.4s, + ), + $animation-fill-mode: both +) { + animation-name: fade-out, hide; + animation-duration: $animation-duration; + animation-delay: $animation-delay; + animation-fill-mode: $animation-fill-mode; + transition: position 2s ease-out; } diff --git a/settings-templates/_harmonium-settings.scss b/settings-templates/_harmonium-settings.scss index eee16995..b2dbede0 100644 --- a/settings-templates/_harmonium-settings.scss +++ b/settings-templates/_harmonium-settings.scss @@ -14,18 +14,18 @@ $breakpoints: ( small: (min-width: $small), small-only: ((min-width: $small) and (max-width: $medium - 1)), medium: (min-width: $medium), - medium-down: ((max-width: $medium - 1)), + medium-down: ((max-width: $medium - 1 )), medium-only: ((min-width: $medium) and (max-width: $large - 1)), large: (min-width: $large), large-down: ((max-width: $large - 1)), large-only: ((min-width: $large) and (max-width: $xlarge - 1)), xlarge: (min-width: $xlarge), - xlarge-down: ((max-width: $xlarge - 1)), + xlarge-down: ((max-width: $xlarge)), xlarge-only: ((min-width: $xlarge) and (max-width: $xxlarge - 1)), xxlarge: (min-width: $xxlarge), global-width: (min-width: $global-width), nav: (min-width: $nav), // Desktop nav - nav-only: ((min-width: $small) and (max-width: $nav - 1)), // Mobile nav + nav-only: ((min-width: $small) and (max-width: $nav - 1)) // Mobile nav ); // IMPORT FONTS HERE @@ -79,7 +79,7 @@ $global-horizontal-space: $global-vertical-space; // 24px $base-size: 0.8rem; // Global Padding - made up of vertical spacing multiples -$global-padding-tiny: $global-vertical-space / 4; // 6px +$global-padding-tiny: $global-vertical-space / 4; // 6px $global-padding-small: $global-vertical-space / 2; // 12px $global-padding: $global-vertical-space; // 24px $global-padding-large: $global-vertical-space * 2; // 48px @@ -211,7 +211,6 @@ $stateful-item-color-selected: $anchor-color-active; $stateful-item-bkgd-disabled: $stateful-item-bkgd; // will have disabled-opacity $stateful-item-color-disabled: $stateful-item-color; // will have disabled-opacity - //## LAYOUT ELEMENTS ----------------------------- //# TopBar @@ -311,6 +310,13 @@ $card-radius: $global-radius; $card-header-background: $white; $card-footer-background: $white; +//# Flashes +$flash-background: $primary; +$flash-border-size: 1px; +$flash-border-color: $divider-color-dark; +$flash-color: $white; +$flash-padding: $global-vertical-space $global-horizontal-space; + //# Modals $modal-bkgd: $black-40; $modal-content-bkgd: $white; diff --git a/settings-templates/settings-templates.zip b/settings-templates/settings-templates.zip index 2a6fb436..eb451928 100644 Binary files a/settings-templates/settings-templates.zip and b/settings-templates/settings-templates.zip differ diff --git a/src/Flash.js b/src/Flash.js new file mode 100644 index 00000000..b4453ebc --- /dev/null +++ b/src/Flash.js @@ -0,0 +1,81 @@ +import React from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +const BOOL_PROPS_TO_CLASS_NAMES = { + success: ['rev-Flash--success'], + warning: ['rev-Flash--warning'], + alert: ['rev-Flash--alert'], + persistent: ['rev-Flash--persistent'], + fade: ['rev-Flash--fade'], + dismissible: ['rev-Flash--dismissible'], +} +const BOOL_PROPS = [ + ...Object.keys(BOOL_PROPS_TO_CLASS_NAMES), + 'dismissible', + 'closeIcon', +] + +export default class Flash extends React.Component { + static propTypes = { + className: PropTypes.string, + children: PropTypes.node, + dismissible: PropTypes.bool, + closeIcon: PropTypes.node, + } + + state = { + isOpen: true, + } + + handleCloseFlash = () => { + if (this.props.dismissible) { + this.setState({isOpen: false}) + } + } + + render() { + const {className, children, dismissible, ...props} = this.props + + const boolClassNames = [] + + BOOL_PROPS.forEach((name) => { + if (props[name]) { + boolClassNames.push(BOOL_PROPS_TO_CLASS_NAMES[name]) + } + delete props[name] + }) + + const divClassName = classNames(className, 'rev-Flash', boolClassNames) + + if (this.state.isOpen) { + return ( +
+ {children} + {dismissible && } +
+ ) + } + + return null + } +} + +function CloseButton({icon}) { + return ( + + ) +} + +CloseButton.propTypes = { + icon: PropTypes.node, +}