From 533475e6136cd1b4e3f669adcc3c84635ecd4b12 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Thu, 3 Jan 2019 18:01:01 -0500 Subject: [PATCH] Adding Message --- src/components/Message/index.js | 55 +++++++++++++++++++ src/components/Message/style.module.css | 72 +++++++++++++++++++++++++ src/pages/index.js | 8 +++ 3 files changed, 135 insertions(+) create mode 100644 src/components/Message/index.js create mode 100644 src/components/Message/style.module.css diff --git a/src/components/Message/index.js b/src/components/Message/index.js new file mode 100644 index 0000000..69b5cb4 --- /dev/null +++ b/src/components/Message/index.js @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import style from './style.module.css'; + +import InfoIcon from 'react-feather/dist/icons/info'; +import ErrorIcon from 'react-feather/dist/icons/alert-octagon'; +import WarningIcon from 'react-feather/dist/icons/alert-triangle'; + +const iconTypes = { + info: InfoIcon, + error: ErrorIcon, + warning: WarningIcon +}; + +const renderIcon = (type, icon) => { + const Icon = icon || iconTypes[type]; + + if (!Icon) { + return; + } + + return ; +}; + +const Message = ({ type, icon, heading, children }) => ( +
+
+ { renderIcon(type, icon) } +

{ heading }

+
+
+ { children } +
+
+); + +Message.propTypes = { + type: PropTypes.oneOf([ + 'info', + 'error', + 'warning' + ]), + icon: PropTypes.oneOfType([ + PropTypes.element, + PropTypes.func + ]), + heading: PropTypes.string.isRequired, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]).isRequired +}; + +export default Message; diff --git a/src/components/Message/style.module.css b/src/components/Message/style.module.css new file mode 100644 index 0000000..4dd4b16 --- /dev/null +++ b/src/components/Message/style.module.css @@ -0,0 +1,72 @@ +@import url('../../globals.module.css'); + +.message { + background: var(--color-tan); + color: var(--color-black); + margin: var(--spacing-margin) 0; + box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7)); +} + +.header { + & h2 { + display: inline-block; + padding: var(--spacing-margin); + line-height: 2.8rem; + margin: 0; + } + + & svg { + padding: var(--spacing-margin); + height: 2.8rem; + width: 2.8rem; + vertical-align: bottom; + } +} + +.content { + padding: var(--spacing-margin); + + & p { + margin-top: 0; + margin-bottom: var(--spacing-margin); + } + + & p:last-child { + margin-bottom: 0; + } +} + +.error { + & .header { + background: var(--color-red); + color: var(--color-white); + + & svg { + background: var(--color-white); + color: var(--color-red); + } + } +} + +.warning { + & .header { + background: var(--color-orange); + + & svg { + background: var(--color-black); + color: var(--color-orange); + } + } +} + +.info { + & .header { + background: var(--color-blue); + color: var(--color-white); + + & svg { + background: var(--color-white); + color: var(--color-blue); + } + } +} diff --git a/src/pages/index.js b/src/pages/index.js index 8dc0a21..5e8b2cc 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,8 +1,16 @@ import React from 'react'; +import { Link } from 'gatsby'; import Layout from 'components/Layout'; +import Message from 'components/Message'; const IndexPage = () => +
Hello world
;