Merge pull request #5 from sutija/grid-helper-color

sutija · web-flow · commit cdc749ff7ac4 · 2020-12-18T19:21:42.000+01:00
Add option for changing grid helper column color.
diff --git a/README.md b/README.md
@@ -9,11 +9,13 @@ This library package includes:
 
 #### Configuration:
 If we aren't using default settings we can define breakpoints however we like.
-We need to define `breakpoints`, `prefixes`, `gridHelperMargins`.
+We need to define `breakpoints`, `prefixes`, `gridHelperMargins`. `gridHelperColumnColor`
+
+- `breakpoints` is used for declaring names, number of columns, gutterSize and minimum/maximum width of breakpoint
+- `prefixes` are used for naming CSS classes that are going to be generated
+- `gridHelperColumnColor` will set the column color of GridHelper. By default, it's set to `rgba(0, 0, 0, .1)`
+- `gridHelperMargins` should be only set if you are using some container in your project, for example:
 
-- Breakpoints settings are used for declaring names, number of columns, gutterSize and minimum/maximum width of breakpoint.
-- Prefixes are used for naming CSS classes that are going to be generated.
-- GridHelperMargins should be only set if you are using some container in your project, for example:
 ```html
 <main style={{margin: '0 5%'}}>
     <header><h1>Hello</h1></header>
@@ -52,7 +54,8 @@ const GRID_SETTINGS: GridSettings = {
   prefixes: {
     grid: 'g',
     gridColumn: 'gc',
-  }
+  },
+  gridHelperColumnColor: 'rgba(0, 0, 0, .05)'
 }
 ```
 
diff --git a/dist/Grid/Grid.interfaces.d.ts b/dist/Grid/Grid.interfaces.d.ts
@@ -15,6 +15,7 @@ export interface GridSettings {
     gridHelperMargins?: {
         [indexed: string]: string;
     };
+    gridHelperColumnColor?: string;
 }
 export interface GridSystemProps {
     settings?: GridSettings;
diff --git a/dist/index.css b/dist/index.css
@@ -21,10 +21,6 @@
   height: 100%;
 }
 
-._GridHelper-module__column__uRue4::after {
-  background-color: rgba(0, 0, 0, .1);
-  content: '';
-  display: block;
+._GridHelper-module__columnFill__F-_9Y {
   height: 100%;
-  width: 100%;
 }
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.modern.js b/dist/index.modern.js
diff --git a/dist/index.modern.js.map b/dist/index.modern.js.map
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -9,11 +9,12 @@ import {GRID_SETTINGS, GridSystem} from 'light-react-grid';
 ReactDOM.render(
     <GridSystem useGridHelper={true} settings={{
         ...GRID_SETTINGS,
+        gridHelperColumnColor: 'rgba(0, 0, 0, .05)',
         gridHelperMargins: {
             sm: '5%',
             md: '5%',
             lg: '5%'
-        }
+        },
     }}>
         <App/>
     </GridSystem>, document.getElementById('root'));
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "light-react-grid",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Small and very simple React grid system based on simple-scss-layout-grid package",
   "author": "Marko Šutija <markosutija@gmail.com>",
   "license": "MIT",
diff --git a/src/Grid/Grid.interfaces.ts b/src/Grid/Grid.interfaces.ts
@@ -8,14 +8,15 @@ export interface Breakpoint {
 export interface GridSettings {
     breakpoints: {
         [index: string]: Breakpoint;
-    },
+    };
     prefixes: {
         grid: string;
         gridColumn: string;
-    },
+    };
     gridHelperMargins?: {
         [indexed: string]: string;
-    }
+    };
+    gridHelperColumnColor?: string;
 }
 
 export interface GridSystemProps {
diff --git a/src/GridHelper/GridHelper.module.css b/src/GridHelper/GridHelper.module.css
@@ -21,10 +21,6 @@
   height: 100%;
 }
 
-.column::after {
-  background-color: rgba(0, 0, 0, .1);
-  content: '';
-  display: block;
+.columnFill {
   height: 100%;
-  width: 100%;
 }
diff --git a/src/GridHelper/index.tsx b/src/GridHelper/index.tsx
@@ -1,5 +1,5 @@
-import React, {FunctionComponent, useContext, useEffect, useState} from 'react'
-import {Column, useBreakpoint, Grid, GridSystemContext} from '..';
+import React, {CSSProperties, FunctionComponent, useContext, useEffect, useState} from 'react'
+import {Column, Grid, GridSystemContext, useBreakpoint} from '..';
 
 import styles from './GridHelper.module.css';
 
@@ -17,10 +17,18 @@ export const GridHelper: FunctionComponent<GridHelperProps> =
      }): JSX.Element => {
 
         const savedVisibility = (localStorage.getItem('grid-helper') === 'true');
-        const {breakpoints} = useContext(GridSystemContext)
+        const {breakpoints, gridHelperColumnColor} = useContext(GridSystemContext)
         const currentBreakpoint = useBreakpoint()
         const [visible, setVisible] = useState<boolean>(savedVisibility ? savedVisibility : false);
 
+        const columnStyle: CSSProperties = {
+            backgroundColor: 'rgba(0, 0, 0, .1)'
+        };
+
+        if (gridHelperColumnColor) {
+            columnStyle.backgroundColor = gridHelperColumnColor;
+        }
+
         useEffect(() => {
             const toggleGrid = ({key, ctrlKey}: KeyboardEvent): void => {
                 if (ctrlKey && key === 'g') {
@@ -48,7 +56,9 @@ export const GridHelper: FunctionComponent<GridHelperProps> =
                             {
                                 [...Array(breakpoints[breakpoint].columns)].fill('c').map((column, index) =>
                                     <Column key={`${breakpoint}-${column}-${index}`} className={styles.column}
-                                            size={{[breakpoint]: 1}}/>)
+                                            size={{[breakpoint]: 1}}>
+                                        <div style={columnStyle} className={styles.columnFill}/>
+                                    </Column>)
                             }
                         </Grid>
                     </div>

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ export interface GridSettings {`
`15`	`15`	`gridHelperMargins?: {`
`16`	`16`	`[indexed: string]: string;`
`17`	`17`	`};`
	`18`	`+ gridHelperColumnColor?: string;`
`18`	`19`	`}`
`19`	`20`	`export interface GridSystemProps {`
`20`	`21`	`settings?: GridSettings;`
Original file line number	Diff line number	Diff line change
`@@ -21,10 +21,6 @@`
`21`	`21`	`height: 100%;`
`22`	`22`	`}`
`23`	`23`
`24`		`-._GridHelper-module__column__uRue4::after {`
`25`		`- background-color: rgba(0, 0, 0, .1);`
`26`		`- content: '';`
`27`		`- display: block;`
	`24`	`+._GridHelper-module__columnFill__F-_9Y {`
`28`	`25`	`height: 100%;`
`29`		`- width: 100%;`
`30`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "light-react-grid",`
`3`		`- "version": "1.0.1",`
	`3`	`+ "version": "1.0.2",`
`4`	`4`	`"description": "Small and very simple React grid system based on simple-scss-layout-grid package",`
`5`	`5`	`"author": "Marko Šutija <markosutija@gmail.com>",`
`6`	`6`	`"license": "MIT",`