[ MERGE ] from dev

docs/src/components/MarkDowns/DemoSandboxed.js

@@ -1,9 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { create } from 'jss'
-import { withStyles, useTheme, jssPreset, StylesProvider } from '@krowdy-ui/core/styles'
 import Frame from 'react-frame-component'
-import { CssGlobal } from '@krowdy-ui/core'
+import { withStyles, useTheme, jssPreset, StylesProvider, CssGlobal } from '@krowdy-ui/core'
 
 const styles = theme => ({
   frame: {

docs/src/components/MarkDowns/getDemoConfig.js

@@ -8,11 +8,16 @@ function jsDemo(demoData) {
       'index.js': `
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ThemeProvider, createMuiTheme, krowdyTheme } from "@krowdy-ui/core";
 import Demo from './demo';
 
-ReactDOM.render(<Demo />, document.querySelector('#root'));
-    `
-    }
+ReactDOM.render(
+  <ThemeProvider theme={createMuiTheme(krowdyTheme)}>
+    <Demo />
+  </ThemeProvider>, 
+  document.querySelector('#root')
+);
+` }
   }
 }
 
@@ -24,10 +29,16 @@ function tsDemo(demoData) {
       'index.tsx': `
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ThemeProvider, createMuiTheme, krowdyTheme } from "@krowdy-ui/core";
 import Demo from './demo';
 
-ReactDOM.render(<Demo />, document.querySelector('#root'));
-    `,
+ReactDOM.render(
+  <ThemeProvider theme={createMuiTheme(krowdyTheme)}>
+    <Demo />
+  </ThemeProvider>, 
+  document.querySelector('#root')
+);
+`,
       'tsconfig.json': `{
   "compilerOptions": {
     "target": "es5",

docs/src/containers/components/notify/notify.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { makeStyles } from '@krowdy-ui/core/styles'
+import { notify } from '@krowdy-ui/core'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+    flexGrow       : 1
+  }
+}))
+
+export default function SimpleTabs() {
+  const classes = useStyles()
+
+  const _handleClickSuccess = () => {
+    notify.success('!Notify!', { time: 5000 })
+  }
+
+  const _handleClickWarning = () => {
+    notify.warning('!Notify!', { time: 5000 })
+  }
+
+  const _handleClickError = () => {
+    notify.error('!Notify!', { time: 5000 })
+  }
+
+  return (
+    <div className={classes.root}>
+      <button onClick={_handleClickSuccess}>Notify Success</button>
+      <br />
+      <button  onClick={_handleClickWarning}>Notify Warning</button>
+      <br />
+      <button onClick={_handleClickError}>Notify Error</button>
+    </div>
+  )
+}

docs/src/containers/components/notify/notify.md

@@ -0,0 +1,7 @@
+# Notify
+
+<p class="description">View Notify.</p>
+
+## Notify Example
+
+{{"demo": "containers/components/notify/notify.js", "bg": true}}

docs/src/containers/components/notify/notify.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { makeStyles } from '@krowdy-ui/core/styles'
+import { notify } from '@krowdy-ui/core'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+    flexGrow       : 1
+  }
+}))
+
+export default function SimpleTabs() {
+  const classes = useStyles()
+
+  const _handleClickSuccess = () => {
+    notify.success('!Notify!', { time: 5000 })
+  }
+
+  const _handleClickWarning = () => {
+    notify.warning('!Notify!', { time: 5000 })
+  }
+
+  const _handleClickError = () => {
+    notify.error('!Notify!', { time: 5000 })
+  }
+
+  return (
+    <div className={classes.root}>
+      <button onClick={_handleClickSuccess}>Notify Success</button>
+      <br />
+      <button  onClick={_handleClickWarning}>Notify Warning</button>
+      <br />
+      <button onClick={_handleClickError}>Notify Error</button>
+    </div>
+  )
+}

docs/src/containers/views/cardcandidate/CardCandidate.js

@@ -24,6 +24,7 @@ export default function () {
       <CardCandidate
         _id={1}
         checked={checked}
+        colorCheckbox='krowdy'
         firstName={firstName}
         lastName={lastName}
         onChangeCheckbox={_handleChange}

docs/src/containers/views/counter/Counter.js

@@ -1,17 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Counter } from '@krowdy-ui/views'
 import AddIcon from '@material-ui/icons/Add'
 import RemoveIcon from '@material-ui/icons/Remove'
 
 export default function () {
-  const initialCounterValue = 10
-  const disabled = false
-  const min = 5
-  const max = 15
-  const [ number, setNumber ] = React.useState(initialCounterValue)
+  const [ countersState, setCountersState ] = useState({
+    first : 5,
+    second: 30
+  })
 
-  const onChange = (event) => {
-    setNumber(event)
+  const changeCounterState = (values) => {
+    setCountersState(prev => ({
+      ...prev,
+      ...values
+    }))
+  }
+
+  const _handleChange = (event) => {
+    changeCounterState({
+      [event.target.name]: event.target.value
+    })
   }
 
   return (
@@ -26,12 +34,22 @@ export default function () {
     }}>
       <Counter
         addIcon={<AddIcon style={{ height: 18, width: 18 }} />}
-        disabled={disabled}
-        max={max}
-        min={min}
-        number={number}
-        onChange={onChange}
-        removeIcon={<RemoveIcon style={{ height: 18, width: 18 }} />} />
+        max={10}
+        min={5}
+        name='first'
+        number={countersState.first}
+        onChange={_handleChange}
+        removeIcon={<RemoveIcon style={{ height: 18, width: 18 }} />}
+        width={{ width: 40 }} />
+      <Counter
+        addIcon={<AddIcon style={{ height: 18, width: 18 }} />}
+        max={1000}
+        min={25}
+        name='second'
+        number={countersState.second}
+        onChange={_handleChange}
+        removeIcon={<RemoveIcon style={{ height: 18, width: 18 }} />}
+        width={{ width: 40 }} />
     </div>
 
   )

docs/src/containers/views/counter/counter.md

@@ -17,8 +17,8 @@
 | name                    |    string      |          | The name attribute specifies the name of an input element.   |
 | max                     |    number      |          | Maximum limit of the counter.                                |
 | min                     |    number      |          | Minimum counter limit.                                       |
+| name                    |   string       |          | The name attribute specifies the name of an input element.   |
 | number                  |   number       |          | is the number that increases and decreases.                  |      
-| onChange                |    function    |          | Callback fired when the state is changed.                    |
+| onChange                |    func    |          | Callback fired when the state is changed.<br/><br>  **Signature:** <br/>`function(event: { target: { name: string, value: number }}) => void`                |
 | removeIcon              |   icon         |          | ```<RemoveIcon/>``` Icon (-)                                 |
-
 

docs/src/containers/views/radioLabelGroup/RadioLabelGroup.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import { RadioLabelGroup } from '@krowdy-ui/views'
+
+const items = [
+  {
+    label: 'Female',
+    value: 'female'
+  },
+  {
+    label: 'Male',
+    value: 'male'
+  },
+  {
+    label: 'Other',
+    value: 'other'
+  }
+]
+
+export default function () {
+  const [ value, setValue ] = useState('male')
+
+  const _handleChange = event => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <div style={{
+      alignItems    : 'center',
+      display       : 'flex',
+      flexDirection : 'column',
+      height        : 400,
+      justifyContent: 'space-evenly',
+      margin        : 50,
+      width         : 'auto'
+    }}>
+      <RadioLabelGroup
+        isRow
+        items={items}
+        name='Gender'
+        onChange={_handleChange}
+        value={value} />
+    </div>
+  )
+}

docs/src/containers/views/radioLabelGroup/RadioLabelGroup.tsx

@@ -0,0 +1,10 @@
+import { RadioLabelGroup } from '@krowdy-ui/views'
+import React from 'react'
+
+export default function () {
+  return (
+    <div>
+      <RadioLabelGroup items={[]} />
+    </div>
+  )
+}

docs/src/containers/views/radioLabelGroup/radioLabelGroup.md

@@ -0,0 +1,21 @@
+# RadioLabelGroup
+
+<p class="description">Radio Group with labels</p>
+
+{{"demo": "containers/views/radioLabelGroup/RadioLabelGroup.js"}}
+
+<h1>
+Props:
+</h1>
+
+| Name                                |      Type            |  Default | Description   |
+|:------------------------------------|:---------------------|:---------|:-------------| 
+|   classes                           |   object             |      |               |
+|   isRow                             |    bool             |       |  Define if items are listed in horizontal mode             |
+|   name                             |    string             |       |  The name used to reference the value of the control.       |
+|   onChange                             |    func             |       |        |
+|   value                             |    any             |       |   Value of the selected radio button.      |
+|   items                             |    `{ label: string, value: any }[]`             |   []    | Items list        |
+|                        |                    |       |               |
+
+