From 47b944d5b3f5339f7e095b47465cb8860d9bdff6 Mon Sep 17 00:00:00 2001 From: Hauwa Date: Wed, 14 Aug 2019 13:12:05 -0500 Subject: [PATCH 1/6] Feat: Flash Message Styles --- docs-src/src/ExampleScope.js | 2 + docs-src/src/examples/Flash.js.example | 42 ++++++++ docs-src/src/layouts/Navigation.js | 3 + docs-src/src/pages/components/Flash.js | 41 ++++++++ scss/components/_Flash.scss | 37 +++++++ scss/components/_components.scss | 1 + scss/mixins/_animations.scss | 85 ++++++++++++---- settings-templates/_color-palette.scss | 26 ++--- settings-templates/harmonium-settings.scss | 110 +++++++++++++++++---- src/Flash.js | 42 ++++++++ 10 files changed, 340 insertions(+), 49 deletions(-) create mode 100644 docs-src/src/examples/Flash.js.example create mode 100644 docs-src/src/pages/components/Flash.js create mode 100644 scss/components/_Flash.scss create mode 100644 src/Flash.js 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..54ef58e7 --- /dev/null +++ b/docs-src/src/examples/Flash.js.example @@ -0,0 +1,42 @@ + + +

Utility Flashes

+ + + + + Info 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 9972b1c2..dd7f2bf7 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..8b3f0807 --- /dev/null +++ b/docs-src/src/pages/components/Flash.js @@ -0,0 +1,41 @@ +import React, {Component} from 'react' +import ExampleSection from '../../ExampleSection' +import scope from '../../ExampleScope' +import Headers from '../../Headers' +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. +

+ + +
+ + ) + } +} diff --git a/scss/components/_Flash.scss b/scss/components/_Flash.scss new file mode 100644 index 00000000..bddf3641 --- /dev/null +++ b/scss/components/_Flash.scss @@ -0,0 +1,37 @@ +// 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-vertical-space $global-horizontal-space !default; + +.rev-Flash { + @include color-management; + @include typography-contained; + background: $flash-background; + border: $flash-border-size solid $flash-border-color; + color: $flash-color; + margin-bottom: $global-margin; + padding: $global-padding-tiny 0; + + &.rev-Flash--fade { + //@include fade-out(5s); + @include fade-out--hide(); + } + + .close_btn { + margin-left: $global-margin-large; + color: $white; + font-weight: bold; + float: right; + font-size: $global-font-size; + line-height: $global-lineheight; + cursor: pointer; + transition: 0.3s; + } + .close_btn:hover { + color: $darker-gray; + } +} 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/_color-palette.scss b/settings-templates/_color-palette.scss index 6e670c6e..b1b3814c 100644 --- a/settings-templates/_color-palette.scss +++ b/settings-templates/_color-palette.scss @@ -1,17 +1,17 @@ -$test: #F0F; +$test: #f0f; // BRAND COLORS -$brand: #295DE5; -$brand-secondary: #6422EB; -$brand-tertiary: #501BBC; +$brand: #ffffff; //#295DE5; +$brand-secondary: #6422eb; +$brand-tertiary: #501bbc; -$white: #FFF; -$lightest-gray: #F4F4F4; -$lighter-gray: #D5D5D5; -$light-gray: #ABABAB; +$white: #fff; +$lightest-gray: #f4f4f4; +$lighter-gray: #d5d5d5; +$light-gray: #ababab; $gray: #818181; $dark-gray: #565656; -$darker-gray: #2A2A2A; +$darker-gray: #2a2a2a; $black: #000; $white-0: rgba(255, 255, 255, 0); // for animation purposes @@ -41,10 +41,10 @@ $black-90: rgba(0, 0, 0, 0.9); // UTILITY COLORS $primary: $brand; -$success: #00A67F; -$alert: #D94011; -$warning: #D10034; -$error: #D10034; +$success: #00a67f; +$alert: #d94011; +$warning: #d10034; +$error: #d10034; $divider-color: $black-10; $divider-color-dark: $black-20; diff --git a/settings-templates/harmonium-settings.scss b/settings-templates/harmonium-settings.scss index eee16995..4ed296d2 100644 --- a/settings-templates/harmonium-settings.scss +++ b/settings-templates/harmonium-settings.scss @@ -11,21 +11,88 @@ $grid-row-width: $large; // Breakpoints $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-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-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 + 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-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-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, ); // IMPORT FONTS HERE @@ -33,7 +100,8 @@ $breakpoints: ( // Global Fonts $global-monospace-font: 'Montserrat', sans-serif; $global-serif-font: 'Georgia', serif; -$global-sans-serif-font: 'Roboto', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; +$global-sans-serif-font: 'Roboto', 'Helvetica Neue', Helvetica, Arial, + 'Lucida Grande', sans-serif; // we use the global-font-sizes for typographic utilities // AND to determine vertical spacing @@ -79,7 +147,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 +279,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 +378,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/src/Flash.js b/src/Flash.js new file mode 100644 index 00000000..abf77341 --- /dev/null +++ b/src/Flash.js @@ -0,0 +1,42 @@ +import React from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' + +const BOOL_PROPS_TO_CLASS_NAMES = { + info: ['rev-Flash--info'], + 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) + +export default class Flash extends React.Component { + static propTypes = { + className: PropTypes.string, + children: PropTypes.node, + } + + render() { + const {className, children, ...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) + + return ( +
+ {children} +
+ ) + } +} From 7fd1a495f42969a4c722bfacbee8555202edc738 Mon Sep 17 00:00:00 2001 From: Hauwa Date: Wed, 14 Aug 2019 13:21:01 -0500 Subject: [PATCH 2/6] Refactor: Travis Build Failure on Harmonium Settings File --- settings-templates/harmonium-settings.scss | 97 ++++------------------ 1 file changed, 15 insertions(+), 82 deletions(-) diff --git a/settings-templates/harmonium-settings.scss b/settings-templates/harmonium-settings.scss index 4ed296d2..055cd385 100644 --- a/settings-templates/harmonium-settings.scss +++ b/settings-templates/harmonium-settings.scss @@ -11,88 +11,21 @@ $grid-row-width: $large; // Breakpoints $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-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-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, + small: (min-width: $small), + small-only: ((min-width: $small) and (max-width: $medium - 1)), + medium: (min-width: $medium), + medium-down: ((max-width: $medium)), + medium-only: ((min-width: $medium) and (max-width: $large - 1)), + large: (min-width: $large), + large-down: ((max-width: $large)), + large-only: ((min-width: $large) and (max-width: $xlarge - 1)), + xlarge: (min-width: $xlarge), + 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 ); // IMPORT FONTS HERE From e867ba3f78538b90d55e87d0ba70f9f0c0db2cab Mon Sep 17 00:00:00 2001 From: Hauwa Date: Fri, 16 Aug 2019 10:22:38 -0500 Subject: [PATCH 3/6] Docs: Added props and vars for documentation --- docs-src/src/pages/components/Flash.js | 7 + .../components/FlashTables/FlashProps.js | 164 ++++++++++++++++++ .../pages/components/FlashTables/FlashVars.js | 96 ++++++++++ settings-templates/_color-palette.scss | 26 +-- 4 files changed, 280 insertions(+), 13 deletions(-) create mode 100644 docs-src/src/pages/components/FlashTables/FlashProps.js create mode 100644 docs-src/src/pages/components/FlashTables/FlashVars.js diff --git a/docs-src/src/pages/components/Flash.js b/docs-src/src/pages/components/Flash.js index 8b3f0807..4defc24c 100644 --- a/docs-src/src/pages/components/Flash.js +++ b/docs-src/src/pages/components/Flash.js @@ -1,7 +1,10 @@ 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 = { @@ -34,6 +37,10 @@ export default class FlashExamplePage extends Component { depth={1} scope={scope} /> +

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..4fbf883f --- /dev/null +++ b/docs-src/src/pages/components/FlashTables/FlashProps.js @@ -0,0 +1,164 @@ +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: info + + + Type: bool + + + Default: False + + + Description:{' '} + + {' '} + Prop added for info flash. Adds the class{' '} + rev-Flash--info + + + + + + + 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 dismissible flash. Adds the class{' '} + rev-Flash--dismissible + + + + +
+ ) +} 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..a73acee7 --- /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 + 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/settings-templates/_color-palette.scss b/settings-templates/_color-palette.scss index b1b3814c..38e52678 100644 --- a/settings-templates/_color-palette.scss +++ b/settings-templates/_color-palette.scss @@ -1,17 +1,17 @@ -$test: #f0f; +$test: #F0F; // BRAND COLORS -$brand: #ffffff; //#295DE5; -$brand-secondary: #6422eb; -$brand-tertiary: #501bbc; +$brand: #FFFFFF; //#295DE5; +$brand-secondary: #6422EB; +$brand-tertiary: #501BBC; -$white: #fff; -$lightest-gray: #f4f4f4; -$lighter-gray: #d5d5d5; -$light-gray: #ababab; +$white: #FFF; +$lightest-gray: #F4F4F4; +$lighter-gray: #D5D5D5; +$light-gray: #ABABAB; $gray: #818181; $dark-gray: #565656; -$darker-gray: #2a2a2a; +$darker-gray: #2A2A2A; $black: #000; $white-0: rgba(255, 255, 255, 0); // for animation purposes @@ -41,10 +41,10 @@ $black-90: rgba(0, 0, 0, 0.9); // UTILITY COLORS $primary: $brand; -$success: #00a67f; -$alert: #d94011; -$warning: #d10034; -$error: #d10034; +$success: #00A67f; +$alert: #D94011; +$warning: #D10034; +$error: #D10034; $divider-color: $black-10; $divider-color-dark: $black-20; From b800f46846c8c8d4f0ac3bd0d8bc0724a858d474 Mon Sep 17 00:00:00 2001 From: Hauwa Date: Mon, 19 Aug 2019 10:58:05 -0500 Subject: [PATCH 4/6] Fix: Feedback from Blaze --- docs-src/src/examples/Flash.js.example | 4 +-- .../components/FlashTables/FlashProps.js | 26 ++---------------- .../pages/components/FlashTables/FlashVars.js | 2 +- scss/components/_Flash.scss | 15 ---------- settings-templates/_color-palette.scss | 4 +-- settings-templates/harmonium-settings.scss | 7 ++--- settings-templates/settings-templates.zip | Bin 3859 -> 3891 bytes src/Flash.js | 1 - 8 files changed, 10 insertions(+), 49 deletions(-) diff --git a/docs-src/src/examples/Flash.js.example b/docs-src/src/examples/Flash.js.example index 54ef58e7..45347ab6 100644 --- a/docs-src/src/examples/Flash.js.example +++ b/docs-src/src/examples/Flash.js.example @@ -3,9 +3,9 @@

Utility Flashes

- + - Info Flash + Default Flash diff --git a/docs-src/src/pages/components/FlashTables/FlashProps.js b/docs-src/src/pages/components/FlashTables/FlashProps.js index 4fbf883f..507fe070 100644 --- a/docs-src/src/pages/components/FlashTables/FlashProps.js +++ b/docs-src/src/pages/components/FlashTables/FlashProps.js @@ -19,7 +19,7 @@ export default function FlashProps() { - Name: info + Name: Default Type: bool @@ -31,8 +31,7 @@ export default function FlashProps() { Description:{' '} {' '} - Prop added for info flash. Adds the class{' '} - rev-Flash--info + Prop added for info flash. Adds the class rev-Flash @@ -137,27 +136,6 @@ export default function FlashProps() { - - - - Name:{' '} - dismissible - - - Type: bool - - - Default: False - - - Description:{' '} - - {' '} - Prop added for dismissible flash. Adds the class{' '} - rev-Flash--dismissible - - - ) diff --git a/docs-src/src/pages/components/FlashTables/FlashVars.js b/docs-src/src/pages/components/FlashTables/FlashVars.js index a73acee7..39c7c39c 100644 --- a/docs-src/src/pages/components/FlashTables/FlashVars.js +++ b/docs-src/src/pages/components/FlashTables/FlashVars.js @@ -42,7 +42,7 @@ export default function FlashVars() { Description: Default border - for Flash. + size for Flash diff --git a/scss/components/_Flash.scss b/scss/components/_Flash.scss index bddf3641..b26a9056 100644 --- a/scss/components/_Flash.scss +++ b/scss/components/_Flash.scss @@ -17,21 +17,6 @@ $flash-padding: $global-vertical-space $global-horizontal-space !default; padding: $global-padding-tiny 0; &.rev-Flash--fade { - //@include fade-out(5s); @include fade-out--hide(); } - - .close_btn { - margin-left: $global-margin-large; - color: $white; - font-weight: bold; - float: right; - font-size: $global-font-size; - line-height: $global-lineheight; - cursor: pointer; - transition: 0.3s; - } - .close_btn:hover { - color: $darker-gray; - } } diff --git a/settings-templates/_color-palette.scss b/settings-templates/_color-palette.scss index 38e52678..6e670c6e 100644 --- a/settings-templates/_color-palette.scss +++ b/settings-templates/_color-palette.scss @@ -1,7 +1,7 @@ $test: #F0F; // BRAND COLORS -$brand: #FFFFFF; //#295DE5; +$brand: #295DE5; $brand-secondary: #6422EB; $brand-tertiary: #501BBC; @@ -41,7 +41,7 @@ $black-90: rgba(0, 0, 0, 0.9); // UTILITY COLORS $primary: $brand; -$success: #00A67f; +$success: #00A67F; $alert: #D94011; $warning: #D10034; $error: #D10034; diff --git a/settings-templates/harmonium-settings.scss b/settings-templates/harmonium-settings.scss index 055cd385..b2dbede0 100644 --- a/settings-templates/harmonium-settings.scss +++ b/settings-templates/harmonium-settings.scss @@ -14,10 +14,10 @@ $breakpoints: ( small: (min-width: $small), small-only: ((min-width: $small) and (max-width: $medium - 1)), medium: (min-width: $medium), - medium-down: ((max-width: $medium)), + 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)), + 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)), @@ -33,8 +33,7 @@ $breakpoints: ( // Global Fonts $global-monospace-font: 'Montserrat', sans-serif; $global-serif-font: 'Georgia', serif; -$global-sans-serif-font: 'Roboto', 'Helvetica Neue', Helvetica, Arial, - 'Lucida Grande', sans-serif; +$global-sans-serif-font: 'Roboto', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; // we use the global-font-sizes for typographic utilities // AND to determine vertical spacing diff --git a/settings-templates/settings-templates.zip b/settings-templates/settings-templates.zip index 9e811cb178b6d36ef0bcdda5906e99c35a01567c..eb45192809fc37ded5ebd29b722b1280a0c60522 100644 GIT binary patch delta 3284 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 Date: Mon, 9 Sep 2019 10:47:41 -0500 Subject: [PATCH 5/6] Feature: Add Dismissible state to Flash component (#428) * Add dismissable flash functionality * Fix spelling * Dismissible flash functionality --- docs-src/src/examples/Flash.js.example | 2 +- scss/components/_Flash.scss | 13 +++++++ src/Flash.js | 54 ++++++++++++++++++++++---- 3 files changed, 61 insertions(+), 8 deletions(-) diff --git a/docs-src/src/examples/Flash.js.example b/docs-src/src/examples/Flash.js.example index 45347ab6..33e3495c 100644 --- a/docs-src/src/examples/Flash.js.example +++ b/docs-src/src/examples/Flash.js.example @@ -35,7 +35,7 @@ - Dismissible Flash × + Dismissible Flash diff --git a/scss/components/_Flash.scss b/scss/components/_Flash.scss index b26a9056..6d3d4d95 100644 --- a/scss/components/_Flash.scss +++ b/scss/components/_Flash.scss @@ -15,8 +15,21 @@ $flash-padding: $global-vertical-space $global-horizontal-space !default; color: $flash-color; margin-bottom: $global-margin; padding: $global-padding-tiny 0; + position: relative; &.rev-Flash--fade { @include fade-out--hide(); } + &.rev-Flash--dismissible { + cursor: pointer; + } +} + +.rev-FlashClose { + background: none; + border: none; + color: $flash-color; + position: absolute; + right: $global-padding-tiny; + top: $global-padding-tiny; } diff --git a/src/Flash.js b/src/Flash.js index 4872e36d..5afdeda6 100644 --- a/src/Flash.js +++ b/src/Flash.js @@ -10,16 +10,32 @@ const BOOL_PROPS_TO_CLASS_NAMES = { fade: ['rev-Flash--fade'], dismissible: ['rev-Flash--dismissible'], } -const BOOL_PROPS = Object.keys(BOOL_PROPS_TO_CLASS_NAMES) +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: PropTypers.node, + } + + state = { + isOpen: true, + } + + handleCloseFlash = () => { + if (this.props.dismissible) { + this.setState({isOpen: false}) + } } render() { - const {className, children, ...props} = this.props + const {className, children, dismissible, ...props} = this.props const boolClassNames = [] @@ -32,10 +48,34 @@ export default class Flash extends React.Component { const divClassName = classNames(className, 'rev-Flash', boolClassNames) - return ( -
- {children} -
- ) + if (this.state.isOpen) { + return ( +
+ {children} + {dismissible && } +
+ ) + } + + return null } } + +function CloseButton({icon}) { + return ( + + ) +} + +CloseButton.propTypes = { + icon: PropTypes.node, +} From 460e0a05c734fb17003dbc2520359c6985101a27 Mon Sep 17 00:00:00 2001 From: Daniel Andrews Date: Wed, 2 Oct 2019 12:02:43 -0500 Subject: [PATCH 6/6] Address feedback --- .../components/FlashTables/FlashProps.js | 38 +++++++++++++++++++ scss/components/_Flash.scss | 15 +++++--- src/Flash.js | 2 +- 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/docs-src/src/pages/components/FlashTables/FlashProps.js b/docs-src/src/pages/components/FlashTables/FlashProps.js index 507fe070..5b3074c8 100644 --- a/docs-src/src/pages/components/FlashTables/FlashProps.js +++ b/docs-src/src/pages/components/FlashTables/FlashProps.js @@ -136,6 +136,44 @@ export default function FlashProps() { + + + + 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/scss/components/_Flash.scss b/scss/components/_Flash.scss index 6d3d4d95..52247f35 100644 --- a/scss/components/_Flash.scss +++ b/scss/components/_Flash.scss @@ -5,7 +5,11 @@ $flash-background: $primary !default; $flash-border-size: 1px !default; $flash-border-color: $divider-color-dark !default; $flash-color: $white !default; -$flash-padding: $global-vertical-space $global-horizontal-space !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; @@ -13,8 +17,8 @@ $flash-padding: $global-vertical-space $global-horizontal-space !default; background: $flash-background; border: $flash-border-size solid $flash-border-color; color: $flash-color; - margin-bottom: $global-margin; - padding: $global-padding-tiny 0; + margin-bottom: $flash-margin; + padding: $flash-padding; position: relative; &.rev-Flash--fade { @@ -22,6 +26,7 @@ $flash-padding: $global-vertical-space $global-horizontal-space !default; } &.rev-Flash--dismissible { cursor: pointer; + padding-right: $flash-dismissible-padding-right; } } @@ -30,6 +35,6 @@ $flash-padding: $global-vertical-space $global-horizontal-space !default; border: none; color: $flash-color; position: absolute; - right: $global-padding-tiny; - top: $global-padding-tiny; + right: $flash-close-right; + top: $flash-close-top; } diff --git a/src/Flash.js b/src/Flash.js index 5afdeda6..b4453ebc 100644 --- a/src/Flash.js +++ b/src/Flash.js @@ -21,7 +21,7 @@ export default class Flash extends React.Component { className: PropTypes.string, children: PropTypes.node, dismissible: PropTypes.bool, - closeIcon: PropTypers.node, + closeIcon: PropTypes.node, } state = {