remove tile and add grid components

src/__test__/__snapshots__/index.test.js.snap

@@ -13,6 +13,7 @@ exports[`ReactBulmaComponents component Should Exports all components 1`] = `
   "Dropdown": [Function],
   "Element": [Function],
   "Footer": [Function],
+  "Grid": [Function],
   "Heading": [Function],
   "Hero": [Function],
   "Icon": [Function],
@@ -32,7 +33,6 @@ exports[`ReactBulmaComponents component Should Exports all components 1`] = `
   "Table": [Function],
   "Tabs": [Function],
   "Tag": [Function],
-  "Tile": [Function],
   "useElementClassNames": [Function],
 }
 `;

src/all-components.d.ts

@@ -26,7 +26,7 @@ export * from './components/section';
 export * from './components/tabs';
 export * from './components/table';
 export * from './components/tag';
-export * from './components/tile';
+export * from './components/grid';
 export * from './components/modal';
 export * from './components/loader';
 export * from './components/navbar';

src/components/grid/__test__/__snapshots__/grid.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid component Should concat classname in props with Bulma classname 1`] = `
+<DocumentFragment>
+  <div
+    class="grid other-class this-is-a-test"
+  >
+    <p>
+      Default
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Grid component Should exist 1`] = `[Function]`;
+
+exports[`Grid component Should have grid classname 1`] = `
+<DocumentFragment>
+  <div
+    class="grid"
+  >
+    <img
+      alt="placeholder"
+      src="http://bulma.io/images/placeholders/128x128.png"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Grid component Should render as Section 1`] = `
+<DocumentFragment>
+  <section
+    class="grid"
+  >
+    <p>
+      Default
+    </p>
+  </section>
+</DocumentFragment>
+`;
+
+exports[`Grid component Should use inline styles 1`] = `
+<DocumentFragment>
+  <div
+    class="grid"
+    style="height: 250px;"
+  >
+    <p>
+      Default
+    </p>
+  </div>
+</DocumentFragment>
+`;

src/components/grid/__test__/grid.test.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Grid } from '..';
+
+describe('Grid component', () => {
+  it('Should exist', () => {
+    expect(Grid).toMatchSnapshot();
+  });
+  it('Should have grid classname', () => {
+    const component = render(
+      <Grid>
+        <img
+          alt="placeholder"
+          src="http://bulma.io/images/placeholders/128x128.png"
+        />
+      </Grid>,
+    );
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+  it('Should concat classname in props with Bulma classname', () => {
+    const component = render(
+      <Grid className="other-class this-is-a-test">
+        <p>Default</p>
+      </Grid>,
+    );
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+  it('Should use inline styles', () => {
+    const component = render(
+      <Grid style={{ height: 250 }}>
+        <p>Default</p>
+      </Grid>,
+    );
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+  it('Should render as Section', () => {
+    const component = render(
+      <Grid renderAs="section">
+        <p>Default</p>
+      </Grid>,
+    );
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+  it('Should set the gap', () => {
+    render(<Grid gap={2}>Default</Grid>);
+    const grid = screen.getByText('Default');
+    expect(grid).toHaveClass('gap-2');
+  });
+  it('Should set the column and row gap', () => {
+    render(<Grid gap={[2, 3]}>Default</Grid>);
+    const grid = screen.getByText('Default');
+    expect(grid).toHaveClass('column-gap-2');
+    expect(grid).toHaveClass('row-gap-3');
+  });
+  it('Should be fixed grid of 4 columns', () => {
+    render(<Grid columns={4}>Default</Grid>);
+    const grid = screen.getByText('Default');
+    expect(grid).toHaveClass('fixed-grid');
+    expect(grid).toHaveClass('has-4-cols');
+  });
+  it('Should be an auto grid', () => {
+    render(<Grid columns="auto">Default</Grid>);
+    const grid = screen.getByText('Default');
+    expect(grid).toHaveClass('has-auto-count');
+  });
+  it('Should be responsive', () => {
+    render(
+      <Grid
+        breakpoints={{
+          tablet: 4,
+          desktop: 6,
+          mobile: 1,
+          fullhd: 5,
+          widescreen: 10,
+        }}
+      >
+        Default
+      </Grid>,
+    );
+    const grid = screen.getByText('Default');
+    expect(grid).toHaveClass('has-4-cols-tablet');
+    expect(grid).toHaveClass('has-6-cols-desktop');
+    expect(grid).toHaveClass('has-1-cols-mobile');
+    expect(grid).toHaveClass('has-5-cols-fullhd');
+    expect(grid).toHaveClass('has-10-cols-widescreen');
+  });
+  it('should render a Cell', () => {});
+});

src/components/grid/components/cell.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Element } from '../../element';
+
+/**
+ * @type {typeof import('..').Cell
+ */
+export const Cell = ({
+  children,
+  className,
+  column = {},
+  row = {},
+  ...props
+}) => {
+  return (
+    <Element
+      className={clsx('cell', className, {
+        [`is-col-start-${column.start}`]: Number.isInteger(column.start),
+        [`is-col-from-end-${column.end}`]: Number.isInteger(column.end),
+        [`is-col-span-${column.end}`]: Number.isInteger(column.end),
+        [`is-row-start-${row.start}`]: Number.isInteger(row.start),
+        [`is-row-from-end-${row.end}`]: Number.isInteger(row.end),
+        [`is-row-span-${row.end}`]: Number.isInteger(row.end),
+      })}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Element.setDisplayName(Cell, 'Grid.Cell');

src/components/grid/grid.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { Element } from '../element';
+
+/**
+ * @type {typeof import('.').Grid
+ */
+export const Grid = ({
+  children,
+  className,
+  minColWidth,
+  gap,
+  columns,
+  breakpoints = {},
+  ...props
+}) => {
+  const [colGap, rowGap] = Array.isArray(gap) ? gap : [];
+  const isFixed = Boolean(columns || Number.isInteger(columns));
+
+  return (
+    <Element
+      {...props}
+      className={clsx(
+        {
+          grid: !isFixed,
+          'fixed-grid': isFixed,
+        },
+        className,
+        {
+          [`is-col-min-${minColWidth}`]: minColWidth,
+          [`gap-${gap}`]: gap && Number.isInteger(gap),
+          [`column-gap-${colGap}`]: colGap,
+          [`row-gap-${rowGap}`]: rowGap,
+          [`has-${columns}-cols`]: Number.isInteger(columns),
+          [`has-auto-count`]: columns === 'auto',
+          ...Object.entries(breakpoints).reduce((acc, [breakpoint, val]) => {
+            return {
+              ...acc,
+              [`has-${val}-cols-${breakpoint}`]: Number.isInteger(val),
+            };
+          }, {}),
+        },
+      )}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Element.setDisplayName(Grid, 'Grid');

src/components/grid/grid.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Grid, Section, Box } from '../..';
+
+export default {
+  title: 'Elements/Grid',
+};
+
+export const Default = () => {
+  return (
+    <Section>
+      <Box>
+        <Grid>
+          <Grid.Cell>Cell</Grid.Cell>
+          <Grid.Cell>Cell</Grid.Cell>
+          <Grid.Cell>Cell</Grid.Cell>
+          <Grid.Cell>Cell</Grid.Cell>
+          <Grid.Cell>Cell</Grid.Cell>
+          <Grid.Cell>Cell</Grid.Cell>
+        </Grid>
+      </Box>
+    </Section>
+  );
+};

src/components/grid/index.d.ts

@@ -0,0 +1,38 @@
+import { BulmaComponent } from '../index';
+
+declare type CellProp = {
+  start?: number;
+  end?: number;
+  span?: number;
+};
+
+/**
+ * @parent Grid
+ * @name Grid.Cell
+ */
+export declare const Cell: BulmaComponent<{
+  column?: CellProp;
+  row?: CellProp;
+}>
+
+declare type GapType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+declare type ColumnsType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export declare const Grid: BulmaComponent<{
+  minColWidth?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  columns?: ColumnsType | 'auto';
+  breakpoints?: {
+    mobile?: ColumnsType;
+    tablet?: ColumnsType;
+    desktop?: ColumnsType;
+    widescreen?: ColumnsType;
+    fullhd?: ColumnsType;
+  };
+  /**
+   * Pass a number for setting the gap or and array with [Column, Row] gap values
+   */
+  gap?: GapType | [GapType, GapType];
+}, 'div', {
+  Cell: typeof Cell;
+}>;

src/components/grid/index.js

@@ -0,0 +1 @@
+export * from './grid';