Refactor ModuleGrid Component

Author: OlehDutchenko

src/ModuleGrid/index.tsx

@@ -5,12 +5,30 @@
 import * as React from 'react';
 
 // -----------------------------------------------------------------------------
-// Types
+// ModuleGrid Component
 // -----------------------------------------------------------------------------
 
 export type ModuleGridCol = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export interface ModuleGridProps {
+export interface ModuleGridProps
+	extends React.HTMLAttributes<
+		| HTMLDivElement
+		| HTMLSpanElement
+		| HTMLUListElement
+		| HTMLOListElement
+		| HTMLLIElement
+	> {
+	component?:
+		| 'div'
+		| 'span'
+		| 'ul'
+		| 'ol'
+		| 'li'
+		| 'header'
+		| 'footer'
+		| 'aside'
+		| 'section'
+		| 'main';
 	cols?: ModuleGridCol;
 	xxsCols?: ModuleGridCol;
 	xsCols?: ModuleGridCol;
@@ -23,10 +41,6 @@ export interface ModuleGridProps {
 	hdCols?: ModuleGridCol;
 }
 
-// -----------------------------------------------------------------------------
-// ModuleGrid Component
-// -----------------------------------------------------------------------------
-
 const colClassName = (col?: ModuleGridCol, mq: string = ''): string | boolean => {
 	return typeof col === 'number' || col === 'auto'
 		? `_${mq}module-grid--${col}`
@@ -37,16 +51,41 @@ export const ModuleGrid: React.FC<ModuleGridProps> = ({
 	cols,
 	xxsCols,
 	xsCols,
-	children
+	smCols,
+	mdCols,
+	dfCols,
+	lgCols,
+	xlCols,
+	xxlCols,
+	hdCols,
+	className,
+	component = 'div',
+	children,
+	...htmlProps
 }) => {
-	const classes = [
-		'_module-grid',
-		colClassName(cols),
-		colClassName(xxsCols, 'xxs:'),
-		colClassName(xsCols, 'xs:')
-	];
-
-	return <div className={classes.filter(Boolean).join(' ')}>{children}</div>;
+	return React.createElement(
+		component,
+		{
+			...htmlProps,
+			classNames: [
+				'_module-grid',
+				colClassName(cols),
+				colClassName(xxsCols, 'xxs:'),
+				colClassName(xsCols, 'xs:'),
+				colClassName(smCols, 'sm:'),
+				colClassName(mdCols, 'md:'),
+				colClassName(dfCols, 'df:'),
+				colClassName(lgCols, 'lg:'),
+				colClassName(xlCols, 'xl:'),
+				colClassName(xxlCols, 'xxl:'),
+				colClassName(hdCols, 'hd:'),
+				className
+			]
+				.filter(Boolean)
+				.join(' ')
+		},
+		children
+	);
 };
 
 // -----------------------------------------------------------------------------
@@ -55,7 +94,24 @@ export const ModuleGrid: React.FC<ModuleGridProps> = ({
 
 export type ModuleCellSpan = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export type ModuleCellProps = {
+export interface ModuleCellProps
+	extends React.HTMLAttributes<
+		| HTMLDivElement
+		| HTMLSpanElement
+		| HTMLUListElement
+		| HTMLOListElement
+		| HTMLLIElement
+	> {
+	component?:
+		| 'div'
+		| 'span'
+		| 'ul'
+		| 'ol'
+		| 'li'
+		| 'header'
+		| 'footer'
+		| 'aside'
+		| 'section';
 	span?: ModuleCellSpan;
 	xxsSpan?: ModuleCellSpan;
 	xsSpan?: ModuleCellSpan;
@@ -66,15 +122,51 @@ export type ModuleCellProps = {
 	xlSpan?: ModuleCellSpan;
 	xxlSpan?: ModuleCellSpan;
 	hdSpan?: ModuleCellSpan;
-};
+}
 
 const spanClassName = (span?: ModuleCellSpan, mq: string = ''): string | boolean => {
 	return typeof span === 'number' || span === 'auto'
 		? `_${mq}module-cell--${span}`
 		: false;
 };
 
-export const ModuleCell: React.FC<ModuleCellProps> = ({ span, children }) => {
-	const classes = ['_module-cell', spanClassName(span)];
-	return <div className={classes.join(' ')}>{children}</div>;
+export const ModuleCell: React.FC<ModuleCellProps> = ({
+	span,
+	xxsSpan,
+	xsSpan,
+	smSpan,
+	mdSpan,
+	dfSpan,
+	lgSpan,
+	xlSpan,
+	xxlSpan,
+	hdSpan,
+	className,
+	component = 'div',
+	children,
+	...htmlProps
+}) => {
+	return React.createElement(
+		component,
+		{
+			...htmlProps,
+			classNames: [
+				'_module-cell',
+				spanClassName(span),
+				spanClassName(xxsSpan, 'xxs:'),
+				spanClassName(xsSpan, 'xs:'),
+				spanClassName(smSpan, 'sm:'),
+				spanClassName(mdSpan, 'md:'),
+				spanClassName(dfSpan, 'df:'),
+				spanClassName(lgSpan, 'lg:'),
+				spanClassName(xlSpan, 'xl:'),
+				spanClassName(xxlSpan, 'xxl:'),
+				spanClassName(hdSpan, 'hd:'),
+				className
+			]
+				.filter(Boolean)
+				.join(' ')
+		},
+		children
+	);
 };