From 53cdfae96725897a7168ade38644cd30514c43fe Mon Sep 17 00:00:00 2001 From: sarah semark Date: Sat, 12 Mar 2022 21:11:38 +0000 Subject: [PATCH 1/2] feat: Set up a basic unstyled Snackbar component. --- src/components/index.js | 1 + src/components/ui/Snackbar/README.md | 10 ++++ src/components/ui/Snackbar/index.js | 79 ++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 src/components/ui/Snackbar/README.md create mode 100644 src/components/ui/Snackbar/index.js diff --git a/src/components/index.js b/src/components/index.js index fe2ec84..9a911a5 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -14,6 +14,7 @@ export { default as PageTitle } from './ui/PageTitle'; export { default as Paragraph } from './ui/Paragraph'; export { default as Select } from './ui/Select'; export { default as SkipLink } from './ui/SkipLink'; +export { default as Snackbar } from './ui/Snackbar'; export { default as Tabs } from './ui/Tabs'; export { default as Tags } from './ui/Tags'; export { default as TextField } from './ui/TextField'; diff --git a/src/components/ui/Snackbar/README.md b/src/components/ui/Snackbar/README.md new file mode 100644 index 0000000..3573c78 --- /dev/null +++ b/src/components/ui/Snackbar/README.md @@ -0,0 +1,10 @@ +A snackbar is a non-disruptive message that appears to provide feedback to the user. + +```jsx +import { Button } from '@octopusthink/nautilus'; + +
+ This just in: Scotland is rainy + This just in: Scotland is rainy +
+``` diff --git a/src/components/ui/Snackbar/index.js b/src/components/ui/Snackbar/index.js new file mode 100644 index 0000000..0e4b7d4 --- /dev/null +++ b/src/components/ui/Snackbar/index.js @@ -0,0 +1,79 @@ +import { css } from '@emotion/react'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { toUnits } from '../../../styles'; +import { useTheme } from '../../../themes'; +import Button from '../Button'; +import Paragraph from '../Paragraph'; + +const Snackbar = (props) => { + const theme = useTheme(); + const { action, actionLabel, children, inverse, onDismiss, unstyled, ...otherProps } = props; + + return ( +
+ + {children} + + + {action && ( + + )} +
+ ); +}; + +Snackbar.defaultProps = { + action: undefined, + actionLabel: undefined, + children: undefined, + inverse: false, + onDismiss: undefined, + unstyled: false, +}; + +Snackbar.propTypes = { + /** Callback action to run when the action button is clicked. */ + action: PropTypes.func, + /** Label for the (optional) action button. */ + actionLabel: PropTypes.string, + /** @ignore */ + children: PropTypes.node, + /** Inverse container and text colour. Used for dark backgrounds. */ + inverse: PropTypes.bool, + /** Callback action to run when the Snackbar is dismissed */ + onDismiss: PropTypes.func, + /* @ignore Don't output any CSS styles. */ + unstyled: PropTypes.bool, +}; + +export default Snackbar; From 05df5e03e41cfa61e791232c00f1c9871f8a1b6f Mon Sep 17 00:00:00 2001 From: sarah semark Date: Mon, 21 Mar 2022 16:08:36 +0000 Subject: [PATCH 2/2] feat: Implement theme colours for Snackbar. --- src/components/ui/Snackbar/README.md | 15 ++++- src/components/ui/Snackbar/index.js | 87 ++++++++++++++++++++++++---- src/themes/nautilus/index.js | 23 +++++--- 3 files changed, 104 insertions(+), 21 deletions(-) diff --git a/src/components/ui/Snackbar/README.md b/src/components/ui/Snackbar/README.md index 3573c78..36baf2d 100644 --- a/src/components/ui/Snackbar/README.md +++ b/src/components/ui/Snackbar/README.md @@ -2,9 +2,18 @@ A snackbar is a non-disruptive message that appears to provide feedback to the u ```jsx import { Button } from '@octopusthink/nautilus'; -
- This just in: Scotland is rainy - This just in: Scotland is rainy +
+ This just in: Scotland is rainy +
+
+ This just in: Scotland is rainy +
+
+ This just in: Scotland is rainy and sometimes it has some real long text strings too +
+
+ This just in: Scotland is rainy and sometimes it has some real long text strings too +
``` diff --git a/src/components/ui/Snackbar/index.js b/src/components/ui/Snackbar/index.js index 0e4b7d4..4aaae08 100644 --- a/src/components/ui/Snackbar/index.js +++ b/src/components/ui/Snackbar/index.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import PropTypes from 'prop-types'; import React from 'react'; -import { toUnits } from '../../../styles'; +import { bodyStyles, toUnits } from '../../../styles'; import { useTheme } from '../../../themes'; import Button from '../Button'; import Paragraph from '../Paragraph'; @@ -17,37 +17,102 @@ const Snackbar = (props) => { ? undefined : css` margin: 0; - background-color: ${theme.colors.neutral.grey800}; - color: ${theme.colors.text.inverseLight}; - padding: ${toUnits(theme.spacing.padding.small)}; + background-color: ${theme.components.Snackbar.backgroundColor}; + color: ${theme.components.Snackbar.textColor}; + padding: ${toUnits(theme.spacing.padding.medium)} + ${toUnits(theme.spacing.padding.large)}; //border-radius: ${toUnits(theme.radii.small)}; //box-shadow: ${theme.shadows.small}; - border-radius: ${toUnits(theme.spacing.padding.xSmall)}; + border-radius: ${toUnits(theme.spacing.padding.small)}; //box-shadow: 0 0 0 0.4rem ${theme.colors.text.dark}; display: flex; align-items: center; justify-content: space-between; - margin-bottom: ${toUnits(theme.spacing.padding.small)}; + //position: absolute; + //flex-wrap: wrap; + max-width: 100%; + position: absolute; + top: ${toUnits(theme.spacing.margin.medium)}; + left: ${toUnits(theme.spacing.margin.medium)}; + margin-bottom: 40px; ${inverse && css` - background-color: ${theme.colors.text.inverse}; - color: ${theme.colors.text.inverseDark}; + background-color: ${theme.components.Snackbar.backgroundColorInverse}; + color: ${theme.components.Snackbar.textColorInverse}; `} ` } {...otherProps} > - + {children} {action && ( - )} -