feat: new grid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightelligence/react",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "license": "MIT",
   "repository": {
     "type": "git",

src/index.js

@@ -36,8 +36,10 @@ export * from './controls/SelectField';
 export * from './controls/TextField';
 
 export * from './layout/Container';
+export * from './layout/V2Container';
 export * from './layout/Frame';
 export * from './layout/Grid';
+export * from './layout/V2Grid';
 
 export * from './constants';
 

src/layout/V2Container/V2Container.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import classnames from 'classnames';
+import { bool, string } from 'prop-types';
+import * as olt from '@lightelligence/styles';
+
+export const V2Container = ({ className, noPadding, fluid, ...props }) => (
+  <div
+    {...props}
+    className={classnames(
+      olt.V2Container,
+      noPadding && olt.V2ContainerNoPadding,
+      fluid && olt.V2ContainerFluid,
+      className,
+    )}
+  />
+);
+
+V2Container.propTypes = {
+  /**
+   * Forward an additional className to the underlying component.
+   */
+  className: string,
+  /**
+   * removes the default padding of a *Container*.
+   */
+  noPadding: bool,
+  /**
+   * With fluid the container will always occupy 100% of the screen width.
+   */
+  fluid: bool,
+};
+V2Container.defaultProps = {
+  className: null,
+  noPadding: false,
+  fluid: false,
+};

src/layout/V2Container/V2Container.md

@@ -0,0 +1,43 @@
+*Container* wraps content in a block and adds default padding around it, as 
+well as additional responsive-friendly margin on screens wider than 576px.
+
+In general the container occupies the full screen size minus some margin. Only on very large screens the max-width is limited to a maximum of `1248px`. You
+can check the behaviour by reducing the screen size and look at the example
+below:
+
+```js
+import { V2Container, Card } from '@lightelligence/react';
+<V2Container>
+  <Card title="A title of a card">
+    Card description
+  </Card>
+</V2Container>
+```
+
+## Flexible width
+
+By default the *Container* has `max-width` css property which is being set,
+this can be overridden by adding `fluid` property to the container. By default this only effects the rendering of the xl breakpoint.
+
+```js
+import { V2Container, Card } from '@lightelligence/react';
+<V2Container fluid>
+  <Card title="A title of a card">
+    Card description
+  </Card>
+</V2Container>
+```
+
+## No padding
+
+The default padding of the *Container* can be removed by adding the `noPadding` property. This will only remove the left and the right padding,
+making it useful in situations where additional spacing is not needed.
+
+```js
+import { V2Container, Card } from '@lightelligence/react';
+<V2Container noPadding>
+  <Card title="A title of a card">
+    Card description
+  </Card>
+</V2Container>
+```

src/layout/V2Container/V2Container.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from 'react-testing-library';
+
+import { oltStyles } from '../..';
+
+import { V2Container } from './V2Container';
+
+const renderComponent = (props) => {
+  return render(<V2Container {...props} />);
+};
+
+describe('V2Container', () => {
+  test('forwards className', () => {
+    const { getByText } = renderComponent({
+      className: 'myClass',
+      children: 'Component',
+    });
+
+    const component = getByText('Component');
+    expect(component.classList.contains('myClass')).toBeTruthy();
+  });
+
+  test('correctly sets the css-modifier for noPadding', () => {
+    const { getByText } = renderComponent({
+      children: 'Component',
+      noPadding: true,
+    });
+    const component = getByText('Component');
+    expect(
+      component.classList.contains(oltStyles.V2ContainerNoPadding),
+    ).toBeTruthy();
+  });
+
+  test('correctly sets the css-modifier for fluid', () => {
+    const { getByText } = renderComponent({
+      children: 'Component',
+      fluid: true,
+    });
+    const component = getByText('Component');
+    expect(
+      component.classList.contains(oltStyles.V2ContainerFluid),
+    ).toBeTruthy();
+  });
+
+  test('has the corresponding Component class from styles', () => {
+    const { getByText } = renderComponent({
+      children: 'Component',
+    });
+    const component = getByText('Component');
+    expect(component.classList.contains(oltStyles.V2Container)).toBeTruthy();
+  });
+});

src/layout/V2Container/index.js

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

src/layout/V2Grid/V2Grid.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { string, node } from 'prop-types';
+import classnames from 'classnames';
+import * as olt from '@lightelligence/styles';
+
+export const V2Grid = ({ children, className, ...props }) => (
+  <div className={classnames(olt.V2Grid, className)} {...props}>
+    {children}
+  </div>
+);
+
+V2Grid.propTypes = {
+  /**
+   * Forward an additional className to the underlying component.
+   */
+  className: string,
+  /**
+   * An arbitrary number of `V2GridItem` elements.
+   */
+  children: node,
+};
+
+V2Grid.defaultProps = {
+  className: null,
+  children: null,
+};

src/layout/V2Grid/V2Grid.md

@@ -0,0 +1,164 @@
+*Grid* is our main layout component, which can be used to create responsive
+grid layouts of your application.
+
+*Grid* implements typical 12-columns based grid by using
+[Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+
+*Grid* has nested children of type *GridItem* inside.
+
+
+
+```js
+import { V2Grid, V2GridItem, Card } from '@lightelligence/react';
+<div>
+  <V2Grid>
+    <V2GridItem xs={12} sm={6} lg={4}>
+      <Card color="primary">
+        Responsive
+      </Card>
+    </V2GridItem>
+    <V2GridItem xs={12} sm={6} lg={4}>
+      <Card>
+        Responsive
+      </Card>
+    </V2GridItem>
+    <V2GridItem xs={12} sm={6} lg={4}>
+      <Card>
+        Offset
+      </Card>
+    </V2GridItem>
+    <V2GridItem xs="auto">
+      <Card color="primary">
+        Auto Width
+      </Card>
+    </V2GridItem>
+    <V2GridItem xs="auto">
+      <Card>
+        Auto width
+      </Card>
+    </V2GridItem>
+    <V2GridItem xs="auto">
+      <Card>
+        Auto width
+      </Card>
+    </V2GridItem>
+  </V2Grid>
+</div>
+```
+
+## Breakpoints
+
+The Grid can be customized on a per breakpoint basis. The following breakpoints are available:
+
+|            | Extra small |  Small | Medium |  Large | Extra large |
+|-----------:|:-----------:|:------:|:------:|:------:|:-----------:|
+| Breakpoint |    <576px   | ≥576px | ≥768px | ≥992px |   ≥1200px   |
+|        Key |      xs     |   sm   |   md   |   lg   |      xl     |
+
+
+## Fixed size columns
+
+You can specify the column size of each item via `xs` property. The
+`GridItem` elements together must add up to *12* and can be different for each
+column. 
+
+```js
+import { V2Grid, V2GridItem, Card } from '@lightelligence/react';
+<V2Grid>
+  <V2GridItem xs={2}>
+    <Card><pre>item--1</pre></Card>
+  </V2GridItem>
+  <V2GridItem xs={3}>
+    <Card><pre>item--2</pre></Card>
+  </V2GridItem>
+  <V2GridItem xs={4}>
+    <Card><pre>item--3</pre></Card>
+  </V2GridItem>
+  <V2GridItem xs={3}>
+    <Card><pre>item--4</pre></Card>
+  </V2GridItem>
+</V2Grid>
+```
+
+by setting `xs` to `auto`, your columns get a flexible width, based
+on their content.
+
+```js
+import { V2Grid, V2GridItem, Card } from '@lightelligence/react';
+<V2Grid>
+  <V2GridItem xs="auto">
+    <Card><pre>item--1</pre></Card>
+  </V2GridItem>
+  <V2GridItem xs="auto">
+    <Card><pre>item--2</pre></Card>
+  </V2GridItem>
+  <V2GridItem xs="auto">
+    <Card><pre>item--3</pre></Card>
+  </V2GridItem>
+  <V2GridItem xs="auto">
+    <Card><pre>item--4</pre></Card>
+  </V2GridItem>
+</V2Grid>
+```
+
+The size of a column can be specified separately for each breakpoint by setting one or multiple of the following properties:
+
+- `xs`
+- `sm`
+- `md`
+- `lg`
+- `xl`
+
+```js
+import { V2Grid, V2GridItem, Card } from '@lightelligence/react';
+<V2Grid>
+  <V2GridItem sm={12} md={6} lg={3}>
+    <Card><pre>item--1</pre></Card>
+  </V2GridItem>
+  <V2GridItem sm={12} md={6} lg={3}>
+    <Card><pre>item--2</pre></Card>
+  </V2GridItem>
+  <V2GridItem sm={12} md={6} lg={3}>
+    <Card><pre>item--2</pre></Card>
+  </V2GridItem>
+  <V2GridItem sm={12} md={6} lg={3}>
+    <Card><pre>item--2</pre></Card>
+  </V2GridItem>
+</V2Grid>
+```
+## Offsets
+
+You can use the `offset...` properties to specify if a column should take
+pre-defined space before being rendered.
+
+```js
+import { V2Grid, V2GridItem, Card } from '@lightelligence/react';
+<V2Grid>
+  <V2GridItem offsetXs={4} xs={4}>
+    <Card><pre>item--1</pre></Card>
+  </V2GridItem>
+  <V2GridItem offsetXs={4} xs={4}>
+    <Card><pre>item--2</pre></Card>
+  </V2GridItem>
+</V2Grid>
+```
+
+The offset of a column can be specified separately for each breakpoint by using the following properties:
+
+- `offsetXs`
+- `offsetSm`
+- `offsetMd`
+- `offsetLg`
+- `offsetXl`
+
+```js
+import { V2Grid, V2GridItem, Card } from '@lightelligence/react';
+<V2Grid>
+  <V2GridItem offsetSm={1} offsetMd={2} offsetLg={4} sm={10} md={8} lg={4}>
+    <Card><pre>item--1</pre></Card>
+  </V2GridItem>
+  <V2GridItem offsetSm={1} offsetMd={2} offsetLg={4} sm={10} md={8} lg={4}>
+    <Card><pre>item--2</pre></Card>
+  </V2GridItem>
+</V2Grid>
+```

src/layout/V2Grid/V2Grid.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from 'react-testing-library';
+
+import { oltStyles } from '../..';
+
+import { V2Grid } from './V2Grid';
+
+const renderComponent = (props) => {
+  return render(<V2Grid {...props} />);
+};
+
+describe('V2Grid', () => {
+  test('forwards className', () => {
+    const { getByText } = renderComponent({
+      className: 'myClass',
+      children: 'Component',
+    });
+
+    const component = getByText('Component');
+    expect(component.classList.contains('myClass')).toBeTruthy();
+  });
+
+  test('has the corresponding Component class from styles', () => {
+    const { getByText } = renderComponent({
+      children: 'Component',
+    });
+    const component = getByText('Component');
+    expect(component.classList.contains(oltStyles.V2Grid)).toBeTruthy();
+  });
+});