Merge pull request #14 from machielsdev/feature/grid

Feature/grid

Author: EranNL

.gitignore

@@ -7,7 +7,6 @@
 
 # testing
 /coverage
-/www/src
 
 # production
 /build

__tests__/Container.test.tsx

@@ -0,0 +1,25 @@
+import { render } from 'enzyme';
+import React from 'react';
+import Container from '@/components/Container/Container';
+
+describe('Container test', () => {
+    it('should render container', () => {
+        const container = render(
+            <div>
+                <Container/>
+            </div>
+        );
+
+        expect(container.find('.container').length).toBe(1);
+    });
+
+    it('should render fluid container', () => {
+        const container = render(
+            <div>
+                <Container fluid/>
+            </div>
+        );
+
+        expect(container.find('.container-fluid').length).toBe(1);
+    });
+});

__tests__/Grid.test.tsx

@@ -0,0 +1,89 @@
+import { render } from 'enzyme';
+import React from 'react';
+import { Col, Grid, Row } from '@/components';
+
+describe('Grid test', () => {
+    it('should render grid', () => {
+        const container = render(
+            <div>
+                <Grid />
+            </div>
+        );
+
+        expect(container.find('.grid').length).toBe(1);
+    });
+
+    it('should render grid rows', () => {
+        const container = render(
+            <div>
+                <Grid rows={5} />
+            </div>
+        );
+
+        expect(container.find('.grid.grid-rows-5').length).toBe(1);
+    });
+
+    it('should render grid columns', () => {
+        const container = render(
+            <div>
+                <Grid columns={5} />
+            </div>
+        );
+
+        expect(container.find('.grid.grid-columns-5').length).toBe(1);
+    });
+
+    it('should render grid gap', () => {
+        const container = render(
+            <div>
+                <Grid gap={5} />
+            </div>
+        );
+
+        expect(container.find('.grid.grid-gap-5').length).toBe(1);
+    });
+
+    it('should render rows', () => {
+        const container = render(
+            <div>
+                <Row />
+            </div>
+        );
+
+        expect(container.find('.row').length).toBe(1);
+    });
+
+    it('should render row within cols', () => {
+        const container = render(
+            <div>
+                <Row>
+                    <Col>Test</Col>
+                    <Col>Test</Col>
+                    <Col>Test</Col>
+                </Row>
+            </div>
+        );
+
+        expect(container.find('.row .col').length).toBe(3);
+    });
+
+    it('should render cols with breakpoints set', () => {
+        const container = render(
+            <div>
+                <Row>
+                    <Col width={5}>Test</Col>
+                    <Col sm={5}>Test</Col>
+                    <Col md={5}>Test</Col>
+                    <Col lg={5}>Test</Col>
+                    <Col xl={5}>Test</Col>
+                </Row>
+            </div>
+        );
+
+        expect(container.find('.row .col.col-5').length).toBe(1);
+        expect(container.find('.row .col.sm\\:col-5').length).toBe(1);
+        expect(container.find('.row .col.md\\:col-5').length).toBe(1);
+        expect(container.find('.row .col.lg\\:col-5').length).toBe(1);
+        expect(container.find('.row .col.xl\\:col-5').length).toBe(1);
+    });
+});

src/components/Container/Container.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    fluid?: boolean;
+}
+
+const Container = React.forwardRef<HTMLDivElement, ContainerProps>((
+    {
+        children,
+        className,
+        fluid
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            fluid ? 'container-fluid' : 'container',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+Container.displayName = 'Container';
+Container.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    fluid: PropTypes.bool
+}
+
+export default Container;

src/components/Container/index.ts

@@ -0,0 +1 @@
+export { default as Container } from './Container';

src/components/Grid/Col.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+    lg?: number | string;
+    md?: number | string;
+    sm?: number | string;
+    width?: number | string;
+    xl?: number | string;
+}
+
+const Col = React.forwardRef<HTMLDivElement, ColProps>((
+    {
+        className,
+        children,
+        lg,
+        md,
+        sm,
+        width,
+        xl
+    },
+    ref
+) => (
+    <div
+        ref={ref}
+        className={clsx(
+            'col',
+            className,
+            lg && `lg:col-${lg}`,
+            md && `md:col-${md}`,
+            sm && `sm:col-${sm}`,
+            width && `col-${width}`,
+            xl && `xl:col-${xl}`
+        )}
+    >
+        {children}
+    </div>
+));
+
+Col.displayName = 'Col';
+Col.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    lg: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    xl: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+export default Col;

src/components/Grid/Grid.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: string | number;
+    gap?: string | number;
+    rows?: string | number;
+}
+
+const Grid = React.forwardRef<HTMLDivElement, GridProps>((
+    {
+        children,
+        className,
+        columns,
+        gap,
+        rows
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'grid',
+            rows && `grid-rows-${rows}`,
+            columns && `grid-columns-${columns}`,
+            gap && `grid-gap-${gap}`,
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+Grid.displayName = 'Grid';
+Grid.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+export default Grid;

src/components/Grid/Row.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+type RowProps = React.HTMLAttributes<HTMLDivElement>;
+
+const Row = React.forwardRef<HTMLDivElement, RowProps>((
+    {
+        children,
+        className,
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'row',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+Row.displayName = 'Row';
+Row.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node
+}
+
+export default Row;

src/components/Grid/index.ts

@@ -0,0 +1,3 @@
+export { default as Grid } from './Grid';
+export { default as Row } from './Row';
+export { default as Col } from './Col';

src/components/index.ts

@@ -1,4 +1,6 @@
 export * from './Card';
+export * from './Container';
+export * from './Grid';
 export * from './Page';
 export * from './Panel';
 export * from './utils';

src/style/base/_variables.scss

@@ -12,6 +12,14 @@ $base-font-size: 16px;
 $base-border-color: mixins.color('gray', 300);
 $base-border-radius: 4px;
 $base-gutter: 1rem;
+$base-gutter-steps: 0.25;
+
+$breakpoints: (
+    'sm': '640px',
+    'md': '768px',
+    'lg': '1024px',
+    'xl': '1280px'
+);
 
 :root {
     --base-font-size: #{$base-font-size};

src/style/index.scss

@@ -14,3 +14,9 @@
 @use "components/page";
 @use "components/panel";
 @use "components/card";
+
+/**
+ * 3. Layout
+ */
+@use "layout/grid";
+@use "layout/helpers";