feat: rename localStyles to styles (#110)

- The local overriding strategy for styling can be renamed as `styles` is not a reserved word

docs/override-extend-styles.md

@@ -3,7 +3,7 @@
 There are 2 options to inject styles into Doc UI components:
 
 1. Locally via the `withStyles` HOC
-2. Per instance via the `localStyles` prop
+2. Per instance via the `styles` prop
 
 All of the Doc UI default styles can be found [here](https://github.com/shockits/doc-ui/blob/master/src/toolkit/theme.ts).
 
@@ -36,11 +36,11 @@ The idea with this strategy would be to create a local component within your app
 
 You would then use this new component throughout your application, which now has your owns styles, instead of using the Doc UI component directly.
 
-## localStyles
+## styles
 
-A `localStyles` prop has been made available for those times when you just need to inject your own styles into a single instance of a Doc UI component.
+A `styles` prop has been made available for those times when you just need to inject your own styles into a single instance of a Doc UI component.
 
-The style values from the `localStyles` prop will be merged with the default component styles.
+The style values from the `styles` prop will be merged with the default component styles.
 
 This strategy of overriding takes the highest priority.
 
@@ -49,7 +49,7 @@ import { OptionList } from '@shockits/doc-ui';
 
 <OptionList
   tableTitle="Arguments"
-  localStyles={{
+  styles={{
     type: {
       color: '#ff00cc',
     },

docs/theme-options.md

@@ -32,7 +32,7 @@ const MyOptionList = withStyles({
 export default MyOptionList;
 ```
 
-## Using localStyles
+## Using styles
 
 ```js
 import { facepaint, OptionList } from '@shockits/doc-ui';
@@ -41,7 +41,7 @@ const mq = facepaint([`@media(min-width: 768px)`, `@media(min-width: 1440px)`]);
 
 <OptionList
   tableTitle="Arguments"
-  localStyles={{
+  styles={{
     colors: { link: 'blue' },
     mq,
     type: {

src/OptionList/OptionList.tsx

@@ -17,7 +17,7 @@ interface Props {
   tableTitle?: string;
   definitions: Definition[];
   readonly withStyles?: object;
-  localStyles?: object;
+  styles?: object;
 }
 
 interface RequiredProps {
@@ -117,18 +117,13 @@ const Code = styled('code')`
   ${p => p.theme.mq(p.theme.code)};
 `;
 
-const OptionList = ({
-  tableTitle,
-  definitions,
-  withStyles,
-  localStyles,
-}: Props) => {
+const OptionList = ({ tableTitle, definitions, withStyles, styles }: Props) => {
   const sortedDefinitions = definitions.sort(
     (a: any, b: any) => b.required - a.required
   );
 
   const componentTheme = () =>
-    constructTheme(defaultStyles, withStyles, localStyles);
+    constructTheme(defaultStyles, withStyles, styles);
 
   return (
     <ThemeProvider theme={componentTheme}>

src/OptionList/__tests__/OptionsList.test.tsx

@@ -34,7 +34,7 @@ describe('<OptionList />', () => {
       .create(
         <OptionList
           tableTitle="Arguments"
-          localStyles={{ title: { color: 'green' } }}
+          styles={{ title: { color: 'green' } }}
           definitions={[
             {
               key: 'align-content',

src/toolkit/__tests__/constructTheme.test.ts

@@ -13,7 +13,7 @@ describe('constructTheme', () => {
     expect(theme).toHaveProperty('mq');
   });
 
-  it('should ensure withStyles wins without localStyles', () => {
+  it('should ensure withStyles wins without styles', () => {
     const withStyles = {
       colors: { link: 'red' },
       mq: () => 'mq',
@@ -25,20 +25,20 @@ describe('constructTheme', () => {
     expect(theme).toEqual(withStyles);
   });
 
-  it('should ensure localStyles always wins', () => {
+  it('should ensure styles always wins', () => {
     const withStyles = {
       colors: { link: 'red' },
       mq: () => 'mq',
       title: { color: 'purple' },
     };
-    const localStyles = {
+    const styles = {
       colors: { link: 'green' },
       mq: () => 'bp',
       title: { color: 'blue' },
     };
 
-    theme = constructTheme(defaultTheme, withStyles, localStyles);
+    theme = constructTheme(defaultTheme, withStyles, styles);
 
-    expect(theme).toEqual(localStyles);
+    expect(theme).toEqual(styles);
   });
 });

src/toolkit/constructTheme.ts

@@ -4,13 +4,13 @@ import defaultTheme from '../toolkit/theme';
 const constructTheme = (
   defaultStyles: object,
   withStyles: object = {},
-  localStyles: object = {}
+  styles: object = {}
 ): object => {
   return merge.all([
     { ...defaultTheme },
     { ...defaultStyles },
     { ...withStyles },
-    { ...localStyles },
+    { ...styles },
   ]);
 };