From 387e5f7f316321bf67266fc7074ac89fdf805f5e Mon Sep 17 00:00:00 2001 From: theojungle Date: Tue, 28 May 2019 11:55:12 +0200 Subject: [PATCH 1/2] feat: add Growl component --- package.json | 3 +- src/components/Growl/index.js | 33 +++++++++ src/components/Growl/index.mdx | 121 +++++++++++++++++++++++++++++++++ src/components/Growl/styles.js | 48 +++++++++++++ src/components/Growl/title.js | 13 ++++ src/theme/core.js | 7 +- src/theme/growls.js | 21 ++++++ 7 files changed, 243 insertions(+), 3 deletions(-) create mode 100644 src/components/Growl/index.js create mode 100644 src/components/Growl/index.mdx create mode 100644 src/components/Growl/styles.js create mode 100644 src/components/Growl/title.js create mode 100644 src/theme/growls.js diff --git a/package.json b/package.json index d4debb1b7b..1484bb4ecd 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "test:watch": "jest --watch", "docz:dev": "docz dev", "docz:build": "docz build", - "docz:clean": "rm -rf .docz" + "docz:clean": "rm -rf .docz", + "clean": "yarn docz:clean && yarn start" }, "files": [ "dist/esm/*", diff --git a/src/components/Growl/index.js b/src/components/Growl/index.js new file mode 100644 index 0000000000..21883a1a4b --- /dev/null +++ b/src/components/Growl/index.js @@ -0,0 +1,33 @@ +import { func, node } from 'prop-types' +import React from 'react' + +import { Icon } from '../Icon' + +import * as S from './styles' + +export const GrowlAction = S.Action +export const GrowlClose = S.CloseContent +export { GrowlTitle } from './title' + +export const Growl = ({ children, onClose, close }) => ( + + {onClose && ( + + {close || ( + + + + )} + + )} + {children} + +) + +Growl.propTypes = { + children: node.isRequired, + /** node element replace right position */ + close: node, + /** action called onclick on right position */ + onClose: func +} diff --git a/src/components/Growl/index.mdx b/src/components/Growl/index.mdx new file mode 100644 index 0000000000..4776a5d296 --- /dev/null +++ b/src/components/Growl/index.mdx @@ -0,0 +1,121 @@ +--- +name: Growl +route: /components/growl +menu: Components +--- + +import { PropsTable } from 'docz' +import { StyledPlayground as Playground } from '../../../docz.styled' + +import { Box } from '../Box' +import { Button } from '../Button' +import { Growl, GrowlAction, GrowlClose, GrowlTitle } from './' +import { Icon } from '../Icon' + +# Growl + +Customize with ``, `` or ``. + +## Example + + + console.log('close')}> + + Lorem ipsum dolor sit amet + + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos + + + + + + +## Variants + +Variant properties `info` (default), `error` or `warning` with automatic color. + + + + console.log('close')}> + + Error growl + + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos + + + + + + + console.log('close')}> + + Warning growl + + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos + + + + + + + console.log('close')}> + + Info growl (default) + + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos + + + + + + + +## Customs + +Change close component, don't add icon on title, remove action button... + + + + + Without icon on title, action button and close button + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos + + + + console.log('close')} + close={ + + + + } + > + Custom close button with GrowlClose component + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos + + + + console.log('close')} close={}> + Custom close button + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos + + + + +## Properties + +### Growl + + + +### GrowlTitle + + diff --git a/src/components/Growl/styles.js b/src/components/Growl/styles.js new file mode 100644 index 0000000000..ff14444045 --- /dev/null +++ b/src/components/Growl/styles.js @@ -0,0 +1,48 @@ +import styled, { css } from 'styled-components' + +import { getVariantStateColor } from '../../utils/variants' +import { get, getCss } from '../../theme/helpers' + +export const Growl = styled.div` + position: relative; + width: 70%; + max-width: 25rem; + padding: ${get('space.lg')}; + ${getCss('growls.default')}; +` + +export const Title = styled.div( + ({ variant }) => css` + display: flex; + align-items: center; + color: ${getVariantStateColor(variant)}; + padding-bottom: ${get('space.md')}; + ${getCss('growls.title')}; + + & > *:first-child { + margin-right: ${get('space.sm')}; + } + ` +) + +export const Close = styled.div` + position: absolute; + right: ${get('space.lg')}; + top: ${get('space.lg')}; + cursor: pointer; +` + +export const CloseContent = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: ${get('space.xl')}; + height: ${get('space.xl')}; + ${getCss('growls.close')}; + border: none; + transition: background ${get('transitions.medium')}; +` + +export const Action = styled.div` + padding-top: ${get('space.md')}; +` diff --git a/src/components/Growl/title.js b/src/components/Growl/title.js new file mode 100644 index 0000000000..a23f4cd5d5 --- /dev/null +++ b/src/components/Growl/title.js @@ -0,0 +1,13 @@ +import { node, oneOf } from 'prop-types' +import React from 'react' + +import { Title } from './styles' + +export const GrowlTitle = ({ children, variant = 'info' }) => ( + {children} +) + +GrowlTitle.propTypes = { + children: node.isRequired, + variant: oneOf(['warning', 'info', 'error']) +} diff --git a/src/theme/core.js b/src/theme/core.js index ade5c1e22f..f3894ecc00 100644 --- a/src/theme/core.js +++ b/src/theme/core.js @@ -2,11 +2,12 @@ import merge from 'lodash.merge' import { colors } from './colors' import { fonts } from './fonts' -import { getFontSizes } from './typography' -import { getTags } from './tags' import { getButtons } from './buttons' import { getFields } from './fields' +import { getFontSizes } from './typography' +import { getGrowls } from './growls' import { getTabs } from './tabs' +import { getTags } from './tags' import { getTooltips } from './tooltips' import { radii } from './radii' import { transitionCurves, transitions } from './transitions' @@ -64,6 +65,7 @@ export const getBaseTheme = (options = {}) => { } theme.icons = { + xs: 10, sm: 16, md: 24, lg: 32, @@ -85,6 +87,7 @@ export const getBaseTheme = (options = {}) => { // These attributes depend on colors and fontSizes and must come last theme.buttons = getButtons(theme) theme.fields = getFields(theme) + theme.growls = getGrowls(theme) theme.tabs = getTabs(theme) theme.tags = getTags(theme) theme.tooltips = getTooltips(theme) diff --git a/src/theme/growls.js b/src/theme/growls.js new file mode 100644 index 0000000000..c13320eaf6 --- /dev/null +++ b/src/theme/growls.js @@ -0,0 +1,21 @@ +export const getGrowls = ({ fontSizes, fontWeights, colors, radii }) => ({ + default: { + 'font-size': fontSizes.body3, + 'background-color': colors.light[200], + 'border-color': colors.nude[200], + 'border-width': '1px', + 'border-style': 'solid', + 'border-radius': radii.md + }, + title: { + 'font-size': fontSizes.body2, + 'font-weight': fontWeights.bold + }, + close: { + 'background-color': colors.nude[200], + 'border-radius': '50%', + '&:hover, &:focus': { + 'background-color': colors.nude[400] + } + } +}) From ec62fc7375c6e8dded0c223c658895c48c1cf4b3 Mon Sep 17 00:00:00 2001 From: theojungle Date: Wed, 29 May 2019 15:35:50 +0200 Subject: [PATCH 2/2] fix: fix padding on button --- src/components/Growl/styles.js | 5 +++-- src/components/Icon/doc.mdx | 3 ++- src/theme/core.js | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Growl/styles.js b/src/components/Growl/styles.js index ff14444045..57174a5bde 100644 --- a/src/components/Growl/styles.js +++ b/src/components/Growl/styles.js @@ -36,10 +36,11 @@ export const CloseContent = styled.button` display: flex; align-items: center; justify-content: center; - width: ${get('space.xl')}; - height: ${get('space.xl')}; + width: 1.87rem; + height: 1.87rem; ${getCss('growls.close')}; border: none; + padding: 0; transition: background ${get('transitions.medium')}; ` diff --git a/src/components/Icon/doc.mdx b/src/components/Icon/doc.mdx index d3f102cc37..e5fd253b7d 100644 --- a/src/components/Icon/doc.mdx +++ b/src/components/Icon/doc.mdx @@ -13,9 +13,10 @@ import { Icon } from './index' ## Size -Use size property with `sm` `md` `lg` or `xl`. +Use size property with `xs`, `sm`, `md`, `lg` or `xl`. + diff --git a/src/theme/core.js b/src/theme/core.js index f3894ecc00..97f84bb16f 100644 --- a/src/theme/core.js +++ b/src/theme/core.js @@ -65,7 +65,7 @@ export const getBaseTheme = (options = {}) => { } theme.icons = { - xs: 10, + xs: 12, sm: 16, md: 24, lg: 32,