Merge pull request #34 from WTTJ/growl

feat: add Growl component

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/*",

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 }) => (
+  <S.Growl>
+    {onClose && (
+      <S.Close onClick={onClose}>
+        {close || (
+          <S.CloseContent>
+            <Icon name="cross" size="xs" />
+          </S.CloseContent>
+        )}
+      </S.Close>
+    )}
+    {children}
+  </S.Growl>
+)
+
+Growl.propTypes = {
+  children: node.isRequired,
+  /** node element replace right position  */
+  close: node,
+  /** action called onclick on right position  */
+  onClose: func
+}

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 `<GrowlTitle>`, `<GrowlAction>` or `<GrowlClose>`.
+
+## Example
+
+<Playground>
+  <Growl onClose={() => console.log('close')}>
+    <GrowlTitle>
+      <Icon name="megaphone" size="sm" /> Lorem ipsum dolor sit amet
+    </GrowlTitle>
+    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
+    <GrowlAction>
+      <Button size="sm" variant="tertiary">
+        Action button
+      </Button>
+    </GrowlAction>
+  </Growl>
+</Playground>
+
+## Variants
+
+Variant properties `info` (default), `error` or `warning` with automatic color.
+
+<Playground>
+  <Box mb="10px">
+    <Growl onClose={() => console.log('close')}>
+      <GrowlTitle variant="error">
+        <Icon name="flag" size="sm" /> Error growl
+      </GrowlTitle>
+      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
+      <GrowlAction>
+        <Button size="sm" variant="secondary-danger">
+          Action button
+        </Button>
+      </GrowlAction>
+    </Growl>
+  </Box>
+  <Box mb="10px">
+    <Growl onClose={() => console.log('close')}>
+      <GrowlTitle variant="warning">
+        <Icon name="shield" size="sm" /> Warning growl
+      </GrowlTitle>
+      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
+      <GrowlAction>
+        <Button size="sm" variant="secondary-warning">
+          Action button
+        </Button>
+      </GrowlAction>
+    </Growl>
+  </Box>
+  <Box>
+    <Growl onClose={() => console.log('close')}>
+      <GrowlTitle>
+        <Icon name="megaphone" size="sm" /> Info growl (default)
+      </GrowlTitle>
+      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
+      <GrowlAction>
+        <Button size="sm" variant="secondary">
+          Action button
+        </Button>
+      </GrowlAction>
+    </Growl>
+  </Box>
+</Playground>
+
+## Customs
+
+Change close component, don't add icon on title, remove action button...
+
+<Playground>
+  <Box mb="10px">
+    <Growl>
+      <GrowlTitle>Without icon on title, action button and close button</GrowlTitle>
+      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
+    </Growl>
+  </Box>
+  <Box mb="10px">
+    <Growl
+      onClose={() => console.log('close')}
+      close={
+        <GrowlClose>
+          <Icon name="positive" size="sm" />
+        </GrowlClose>
+      }
+    >
+      <GrowlTitle>Custom close button with GrowlClose component</GrowlTitle>
+      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
+    </Growl>
+  </Box>
+  <Box>
+    <Growl onClose={() => console.log('close')} close={<Icon name="positive" size="md" />}>
+      <GrowlTitle>Custom close button</GrowlTitle>
+      Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
+    </Growl>
+  </Box>
+</Playground>
+
+## Properties
+
+### Growl
+
+<PropsTable of={Growl} />
+
+### GrowlTitle
+
+<PropsTable of={GrowlTitle} />

src/components/Growl/styles.js

@@ -0,0 +1,49 @@
+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: 1.87rem;
+  height: 1.87rem;
+  ${getCss('growls.close')};
+  border: none;
+  padding: 0;
+  transition: background ${get('transitions.medium')};
+`
+
+export const Action = styled.div`
+  padding-top: ${get('space.md')};
+`

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' }) => (
+  <Title variant={variant}>{children}</Title>
+)
+
+GrowlTitle.propTypes = {
+  children: node.isRequired,
+  variant: oneOf(['warning', 'info', 'error'])
+}

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`.
 
 <Playground>
+  <Icon name="twitter" size="xs" />
   <Icon name="twitter" size="sm" />
   <Icon name="twitter" size="md" />
   <Icon name="twitter" size="lg" />

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: 12,
     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)

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]
+    }
+  }
+})