Merge branch 'Milestone-Hooks!' into Issue-750-ComboBoxWithHooks!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nessie-ui",
-  "version": "10.0.0-alpha.0",
+  "version": "10.0.0-alpha.1",
   "description": "dunnhumby media UI component library",
   "author": "Sociomantic Labs GmbH",
   "main": "dist",

src/Checkbox/index.jsx

@@ -55,8 +55,15 @@ export default class Checkbox extends React.Component
          *  Label content (string)
          */
         label      : PropTypes.string,
-        onClick      : PropTypes.func,
-        onChange      : PropTypes.func,
+        /**
+         *  change callback prop
+         */
+        onChange   : PropTypes.func,
+        /**
+         *  click callback prop
+         */
+        onClick    : PropTypes.func,
+
     };
 
     static defaultProps =
@@ -69,6 +76,8 @@ export default class Checkbox extends React.Component
         isChecked  : undefined,
         isDisabled : false,
         label      : undefined,
+        onChange   : undefined,
+        onClick    : undefined,
     };
 
     static displayName = 'Checkbox';

src/Grid/README.md

@@ -108,17 +108,17 @@ The props accept one of four values: `"S"`, `"M"` (default), `"L"` and `"none"`
 
 #### Horizontal alignment
 
-The Grid’s `justify` prop accepts one of four values: `"stretch"`,
-`"start"` (default), `"end"` and `"center"`.
+The Grid’s `justify` prop accepts one of four values: `"stretch"` (default),
+`"start"`, `"end"` and `"center"`.
 
 Aligns grid items along the inline (row) axis. This value applies to all grid
 items inside the container.
 
 
 #### Vertical alignment
 
-The Grid’s `align` prop accepts one of four values: `"stretch"`, `"start"`
-(default), `"center"` and `"end"`.
+The Grid’s `align` prop accepts one of four values: `"stretch"` (default),
+`"start"`, `"center"` and `"end"`.
 
 Aligns grid items along the block (column) axis. This value applies to all grid
 items inside the container.

src/Grid/grid.css

@@ -18,14 +18,7 @@
 
 .default
 {
-    display:        grid;
-    max-width:      100%;
-
-    > *
-    {
-        overflow:   hidden;
-        min-width:  0;
-    }
+    display:    grid;
 }
 
 

src/Grid/index.jsx

@@ -93,7 +93,7 @@ export default class Grid extends React.Component
 
     static defaultProps =
     {
-        align         : 'start',
+        align         : 'stretch',
         autoCols      : undefined,
         autoFlow      : 'row',
         autoRows      : undefined,
@@ -104,7 +104,7 @@ export default class Grid extends React.Component
         cssMap        : undefined,
         customColumns : undefined,
         customRows    : undefined,
-        justify       : 'start',
+        justify       : 'stretch',
         rowGap        : 'M',
         rows          : undefined,
     };
@@ -129,8 +129,8 @@ export default class Grid extends React.Component
                 { ...attachEvents( this.props ) }
                 className = { cssMap.main }
                 style     = { {
-                    gridAutoColumns     : autoCols || '1fr',
-                    gridAutoRows        : autoRows || '1fr',
+                    gridAutoColumns     : autoCols,
+                    gridAutoRows        : autoRows,
                     gridTemplateColumns : customColumns ||
                         `repeat( ${columns}, 1fr )`,
                     gridTemplateRows : customRows || `repeat( ${rows}, 1fr )`,

src/Theming/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018 dunnhumby Germany GmbH.
+ * Copyright (c) 2018-2019 dunnhumby Germany GmbH.
  * All rights reserved.
  *
  * This source code is licensed under the MIT license found in the LICENSE file
@@ -12,4 +12,4 @@ import ThemeContext from './ThemeContext';
 const { Consumer : ThemeConsumer, Provider : ThemeProvider } = ThemeContext;
 export { ThemeConsumer, ThemeProvider };
 
-export createCssMap from './createCssMap';
+export useTheme from '../utils/customHooks';

src/utils/customHooks.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2019 dunnhumby Germany GmbH.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ *
+ */
+
+import { useContext }     from 'react';
+
+import ThemeContext       from '../Theming/ThemeContext';
+
+/**
+ * Builds class names from theme
+ *
+ * @param {String} displayName component's displayName
+ * @param {Object} props component's props
+ *
+ * @return {Object} cssMap containing component's styles
+ */
+function useTheme( displayName, props )
+{
+    const { [ displayName ] : theme } = useContext( ThemeContext );
+
+    return props.cssMap ||
+        ( typeof theme === 'function' ? theme( props ) : theme );
+}
+
+export default useTheme;

src/utils/index.js

@@ -114,11 +114,12 @@ function createEventHandler( func, customizer )
         }
         else if ( type === 'change' )
         {
-            if ( typeof target.checked === 'boolean' )
+            const inputType = target.getAttribute( 'type' );
+            if ( inputType === 'checkbox' || inputType === 'radio' )
             {
                 eventPayload.isChecked = target.checked;
             }
-            else if ( target.value )
+            else
             {
                 eventPayload.value = target.value;
             }