Migrate Layout to themr

Author: javivelasco

components/layout/Layout.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import style from './style';
 
-const Layout = ({ className, children }) => (
-  <div data-react-toolbox='layout' className={classnames(style.root, className)}>
+const Layout = ({ className, children, theme }) => (
+  <div data-react-toolbox='layout' className={classnames(theme.layout, className)}>
     {children}
   </div>
 );
@@ -44,11 +44,14 @@ Layout.propTypes = {
       );
     }
   },
-  className: React.PropTypes.string
+  className: React.PropTypes.string,
+  theme: React.PropTypes.shape({
+    layout: React.PropTypes.string.isRequired
+  })
 };
 
 Layout.defaultProps = {
   className: ''
 };
 
-export default Layout;
+export default themr('ToolboxLayout')(Layout);

components/layout/NavDrawer.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import classnames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const NavDrawer = (props) => {
-  const rootClasses = classnames([style.navDrawer], {
-    [style['permanent-' + props.permanentAt]]: props.permanentAt,
-    [style.wide]: (props.width === 'wide'),
-    [style.active]: props.active,
-    [style.pinned]: props.pinned
-  }, props.className);
+const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, pinned, scrollY, theme, width }) => {
+  const rootClasses = classnames([theme.navDrawer], {
+    [theme['permanent-' + permanentAt]]: permanentAt,
+    [theme.wide]: (width === 'wide'),
+    [theme.active]: active,
+    [theme.pinned]: pinned
+  }, className);
 
-  const drawerClasses = classnames(style.drawerContent, {
-      [style.scrollY]: props.scrollY
+  const drawerClasses = classnames(theme.drawerContent, {
+      [theme.scrollY]: scrollY
   });
 
   return (
-    <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={props.onOverlayClick}>
-      <div data-react-toolbox='nav-drawer-scrim' className={style.scrim}>
+    <div data-react-toolbox='nav-drawer' className={rootClasses} onClick={onOverlayClick}>
+      <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim}>
         <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
-          {props.children}
+          {children}
         </aside>
       </div>
     </div>
@@ -33,6 +33,22 @@ NavDrawer.propTypes = {
   permanentAt: React.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
   pinned: React.PropTypes.bool,
   scrollY: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    active: React.PropTypes.string.isRequired,
+    drawerContent: React.PropTypes.string.isRequired,
+    lgPermanent: React.PropTypes.string.isRequired,
+    mdPermanent: React.PropTypes.string.isRequired,
+    navDrawer: React.PropTypes.string.isRequired,
+    normal: React.PropTypes.string.isRequired,
+    pinned: React.PropTypes.string.isRequired,
+    scrim: React.PropTypes.string.isRequired,
+    scrollY: React.PropTypes.string.isRequired,
+    smPermanent: React.PropTypes.string.isRequired,
+    wide: React.PropTypes.string.isRequired,
+    xlPermanent: React.PropTypes.string.isRequired,
+    xxlPermanent: React.PropTypes.string.isRequired,
+    xxxlPermanent: React.PropTypes.string.isRequired
+  }),
   width: React.PropTypes.oneOf(['normal', 'wide'])
 };
 
@@ -43,4 +59,4 @@ NavDrawer.defaultProps = {
   width: 'normal'
 };
 
-export default NavDrawer;
+export default themr('ToolboxLayout')(NavDrawer);

components/layout/Panel.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import classnames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const Panel = ({ children, className, scrollY }) => {
-  const _className = classnames(style.panel, {
-    [style.scrollY]: scrollY
+const Panel = ({ children, className, scrollY, theme }) => {
+  const _className = classnames(theme.panel, {
+    [theme.scrollY]: scrollY
   }, className);
 
   return (
@@ -17,12 +17,16 @@ const Panel = ({ children, className, scrollY }) => {
 Panel.propTypes = {
   children: React.PropTypes.any,
   className: React.PropTypes.string,
-  scrollY: React.PropTypes.bool
+  scrollY: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    panel: React.PropTypes.string.isRequired,
+    scrollY: React.PropTypes.string.isRequired
+  })
 };
 
 Panel.defaultProps = {
   className: '',
   scrollY: false
 };
 
-export default Panel;
+export default themr('ToolboxLayout')(Panel);

components/layout/Sidebar.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import classnames from 'classnames';
-import style from './style';
+import { themr } from 'react-css-themr';
 
-const Sidebar = (props) => {
-  const wrapperClasses = classnames(style.sidebar, style[`width-${props.width}`], {
-    [style.pinned]: props.pinned
-  }, props.className);
+const Sidebar = ({ children, className, pinned, scrollY, theme, width }) => {
+  const wrapperClasses = classnames(theme.sidebar, theme[`width-${width}`], {
+    [theme.pinned]: pinned
+  }, className);
 
-  const innerClasses = classnames(style.sidebarContent, {
-    [style.scrollY]: props.scrollY
+  const innerClasses = classnames(theme.sidebarContent, {
+    [theme.scrollY]: scrollY
   });
 
   return (
     <div data-react-toolbox='sidebar' className={wrapperClasses}>
       <aside data-react-toolbox='sidebar-content' className={innerClasses}>
-        {props.children}
+        {children}
       </aside>
     </div>
   );
@@ -25,6 +25,12 @@ Sidebar.propTypes = {
   className: React.PropTypes.string,
   pinned: React.PropTypes.bool,
   scrollY: React.PropTypes.bool,
+  theme: React.PropTypes.shape({
+    pinned: React.PropTypes.string.isRequired,
+    scrollY: React.PropTypes.string.isRequired,
+    sidebar: React.PropTypes.string.isRequired,
+    sidebarContent: React.PropTypes.string.isRequired
+  }),
   width: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 25, 33, 50, 66, 75, 100])
 };
 
@@ -35,4 +41,4 @@ Sidebar.defaultProps = {
   width: 5
 };
 
-export default Sidebar;
+export default themr('ToolboxLayout')(Sidebar);

components/layout/readme.md

@@ -111,6 +111,13 @@ with `flex` set to 1, and use whatever layout you like within it.
 | `children` | `Nodes` |  | A `Panel`, optionally preceded by a `NavDrawer` and/or followed by a `Sidebar` |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+The themed key the `Layout` in general is `ToolboxLayout`. For the `Layout` wrapper it should only provide one class interface:
+
+| Name     | Description|
+|:---------|:-----------|
+| `layout` | Class used in the container to position and align inner items.|
+
 ## NavDrawer
 
 The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides
@@ -138,6 +145,26 @@ and can also specify a breakpoint at which the drawer automatically becomes perm
 | `onOverlayClick` | `Function`     |            | Callback function to be invoked when the overlay is clicked.|
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Used when the drawer is active.|
+| `drawerContent` | Used for the content of the drawer.|
+| `lgPermanent` | Added to the root class for large drawer.|
+| `mdPermanent` | Added to the root class for medium drawer.|
+| `navDrawer` | Root class for the drawer.|
+| `normal` | Added to the root class if width is normal.|
+| `pinned` | Added to the root class if positioning is pinned.|
+| `scrim` | Used as a wrapper for the drawer content.|
+| `scrollY` | Added to the drawer content if its scrollable.|
+| `smPermanent` | Added to the root class for small drawer.|
+| `wide` | Added to the root class if width is wide.|
+| `xlPermanent` | Added to the root class for extra big drawer.|
+| `xxlPermanent` | Added to the root class for super big drawer.|
+| `xxxlPermanent` | Added to the root class for largest possible drawer.|
+
 ## Panel
 
 The `Panel` is the main content area within a `Layout`.  It is a full-height
@@ -150,6 +177,14 @@ and `Sidebar` are laid out.
 | `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
+
+| Name     | Description|
+|:---------|:-----------|
+| `panel` | Used as the root class of the panel component.|
+| `scrollY` | Used in case the panel is scrollable.|
+
 ## Sidebar
 
 The `Sidebar` is an extra drawer that docks to the right side of the `Layout`.
@@ -166,6 +201,16 @@ covers the entire screen (see [examples](https://www.google.com/design/spec/layo
 | `scrollY` | `bool` | `false` | If true, the sidebar will vertically scroll all content. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 
+### Theme
+You can use `ToolboxLayout` as themed key for this component. The class interface is as follows:
+
+| Name     | Description|
+|:---------|:-----------|
+| `pinned` | Added to the root class if sidebar is pinned.|
+| `scrollY` | Add to the content of sidebar if its scrollable.|
+| `sidebar` | Root class of the sidebar.|
+| `sidebarContent` | Used in for the content element of the sidebar.|
+
 ## Nesting Layouts
 
 The `Layout` is meant to be used near the top level of your application,

components/layout/style.scss components/layout/theme.scsscomponents/layout/style.scss renamed to components/layout/theme.scss

@@ -2,7 +2,7 @@
 @import "./config";
 @import "./mixins";
 
-.root {
+.layout {
   position: relative;
   display: flex;
   width: 100%;

spec/theme.js

@@ -10,6 +10,7 @@ import ToolboxDatePicker from '../components/date_picker/theme.scss';
 import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
+import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
@@ -26,6 +27,7 @@ export default defineTheme({
   ToolboxDialog,
   ToolboxDrawer,
   ToolboxInput,
+  ToolboxLayout,
   ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker