feat: add classes to withStyles (#186)

examples/docz/docs/index.mdx

@@ -1,10 +1,40 @@
 ---
-name: Home
+name: Examples
 route: /
 ---
 
-# Home
+import ColorBox from '../src/components/create-media-queries';
+// import { ColorBox } from '@doc-kits/react';
 
-Select a component from the sidebar menu to view example integrations of [Doc Kits: React](https://github.com/doc-kits/react) into Docz.
+<!--
+  You may change the statement above to import a different ColorBox
+  component example from the 'src/components' directory.
 
-**Note:** View the `ColorBox` example code to see how you might override and extend a component's styles via the `withStyles` HOC.
+  i.e.  import ColorBox from 'src/components/styles-prop';
+ -->
+
+# Examples
+
+The [ColorBox](https://github.com/doc-kits/react/tree/master/src/ColorBox) component is used as an example,
+however, the process shown here is the same for any [Doc Kits: React](https://github.com/doc-kits/react) component.
+There are several variations of integration shown to highlight the different approaches.
+
+The examples show the following scenarios:
+
+- Direct integration
+- `withStyles` HOC
+- `withStyles` HOC Shorthand
+- `withStyles` HOC with Props
+- `styles` prop
+- Using Facepaint to create your own media queries
+
+You will find code for the variations in the `src/components/` folder.
+
+## ColorBox
+
+<div style={{ display: 'flex', justifyContent: 'space-between' }}>
+  <ColorBox name="Red Barn" hex="#F00000" />
+  <ColorBox name="Cream Popsicle" hex="#F09320" />
+  <ColorBox name="Sky Blue" hex="#00AAE5" />
+  <ColorBox name="Lavender" hex="#977BB6" />
+</div>

examples/docz/package.json

@@ -8,7 +8,7 @@
     "dev": "docz dev"
   },
   "devDependencies": {
-    "@doc-kits/react": "^1.5.3",
+    "@doc-kits/react": "^1.7.0",
     "docz": "^0.13.7",
     "docz-plugin-css": "^0.11.0",
     "docz-theme-default": "^0.13.7",

examples/docz/src/components/create-media-queries/index.js

@@ -0,0 +1,9 @@
+import { withStyles, facepaint, ColorBox } from '@doc-kits/react';
+
+const mq = facepaint([`@media(min-width: 400px)`, `@media(min-width: 600px)`]);
+
+export default withStyles({
+  wrapper: mq({
+    backgroundColor: ['black', 'red'],
+  }),
+})(ColorBox);

examples/docz/src/components/styles-prop/index.js

@@ -0,0 +1,14 @@
+import { withStyles, ColorBox } from '@doc-kits/react';
+
+export default withStyles({
+  // Overriding 'wrapper' and 'name' styles
+  wrapper: {
+    color: 'black',
+  },
+  name: {
+    fontWeight: '400',
+    // Extending 'name' styles with 'text-transform'
+    // 'textTransform' is not in default styles
+    textTransform: 'lowercase',
+  },
+})(ColorBox);

examples/docz/src/components/withstyles-hoc-props/index.js

@@ -0,0 +1,14 @@
+import { withStyles, ColorBox } from '@doc-kits/react';
+
+export default withStyles({
+  // Overriding 'wrapper' and 'name' styles
+  wrapper: {
+    color: 'black',
+  },
+  name: {
+    fontWeight: '400',
+    // Extending 'name' styles with 'text-transform'
+    // 'textTransform' is not in default styles
+    textTransform: 'lowercase',
+  },
+})(ColorBox);

examples/docz/src/components/withstyles-hoc-shorthand/index.js

@@ -0,0 +1,14 @@
+import { withStyles, ColorBox } from '@doc-kits/react';
+
+export default withStyles({
+  // Overriding 'wrapper' and 'name' styles
+  wrapper: {
+    color: 'black',
+  },
+  name: {
+    fontWeight: '400',
+    // Extending 'name' styles with 'text-transform'
+    // 'textTransform' is not in default styles
+    textTransform: 'lowercase',
+  },
+})(ColorBox);

examples/docz/src/components/withstyles-hoc/index.js

@@ -0,0 +1,14 @@
+import { withStyles, ColorBox } from '@doc-kits/react';
+
+export default withStyles({
+  // Overriding 'wrapper' and 'name' styles
+  wrapper: {
+    color: 'black',
+  },
+  name: {
+    fontWeight: '400',
+    // Extending 'name' styles with 'text-transform'
+    // 'textTransform' is not in default styles
+    textTransform: 'lowercase',
+  },
+})(ColorBox);

src/OptionList/__tests__/__snapshots__/OptionsList.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`<OptionList /> should render with all available passed in props 1`] = `
     className="css-n34rpg"
   >
     <div
-      className="css-1sb2enk"
+      className="css-1h6g3aq"
     >
       Arguments
     </div>

src/toolkit/__tests__/withStyles.test.tsx

@@ -43,6 +43,7 @@ describe('withStyles', () => {
 
   it('should forward ref from original component onto WrappedComponent', () => {
     class NewComponent extends Component {
+      public static readonly styles = {};
       public render() {
         return <div>Test</div>;
       }

src/toolkit/withStyles.tsx

@@ -6,16 +6,22 @@ import { breakpoints } from '../toolkit/theme';
 
 interface Props {
   styles: object;
+  classes: object;
 }
 
 const withStyles = (styles: any) => (WrappedComponent: any): any => {
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
   const WithStyles = React.forwardRef((props: Props, ref) => {
-    const derivedStyles = typeof styles === 'function' ? styles(props) : styles;
-    const classes = merge(WrappedComponent.styles, derivedStyles, props.styles);
     const mq = facepaint(breakpoints);
+    const derivedStyles = typeof styles === 'function' ? styles(props) : styles;
+    const classes = merge.all([
+      WrappedComponent.styles,
+      derivedStyles,
+      { ...props.classes },
+      { ...props.styles },
+    ]);
 
     return <WrappedComponent {...props} ref={ref} classes={classes} mq={mq} />;
   });