Feat/group

README.md

@@ -82,6 +82,7 @@ const MyComponent = mock();
      - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
      - [`<DropArea>`](./docs/en/DropArea.md)
+     - [`<Group>`](./docs/en/Group.md)
      - [`<OutsideClick>`](./docs/en/OutsideClick.md)
      - [`<Ripple>`](./docs/en/Ripple.md) and [`withRipple()`](./docs/en/Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<WidthQuery>`](./docs/en/WidthQuery.md), [`<View>`](./docs/en/View.md), [`<WindowWidthQuery>`](./docs/en/WindowWidthQuery.md), and [`<InlineWidthQuery>`](./docs/en/InlineWidthQuery.md)

docs/en/Group.md

@@ -0,0 +1,56 @@
+# `<Group>`
+
+Inserts separators between its children.
+
+
+## Usage
+
+Import:
+
+```jsx
+import {Group} from 'libreact/lib/Group';
+```
+
+Default separator is a space `" "`.
+
+```jsx
+<Group>
+  <span>Hello</span>
+  <span>world</span>
+</Group>
+```
+
+Result:
+
+```html
+<div>
+  <span>Hello</span> <span>world</span>
+</div>
+```
+
+Use custom separator.
+
+```jsx
+<Group separator={<hr />}>
+  <span>Hello</span>
+  <span>world</span>
+</Group>
+```
+
+Use `as` prop to specify wrapper element tag name.
+
+```jsx
+<Group as="span">
+  <span>Hello</span>
+  <span>world</span>
+</Group>
+```
+
+Pass through any props to the wrapper element.
+
+```jsx
+<Group className="foobar">
+  <span>Hello</span>
+  <span>world</span>
+</Group>
+```

docs/en/README.md

@@ -51,6 +51,7 @@
      - [`<FullScreen>`](./FullScreen.md)
      - [`<Slider>`](./Slider.md)
      - [`<DropArea>`](./DropArea.md)
+     - [`<Group>`](./Group.md)
      - [`<OutsideClick>`](./OutsideClick.md)
      - [`<Ripple>`](./Ripple.md) and [`withRipple()`](./Ripple.md#withripple) &mdash; [**example**](https://codesandbox.io/s/983q7jr80o)
      - [`<WidthQuery>`](./WidthQuery.md), [`<View>`](./View.md), [`<WindowWidthQuery>`](./WindowWidthQuery.md), and [`<InlineWidthQuery>`](./InlineWidthQuery.md)

docs/en/SUMMARY.md

@@ -64,6 +64,7 @@
   * [DropArea](DropArea.md)
   * [OutsideClick](OutsideClick.md)
   * [Ripple](Ripple.md)
+  * [Group](Group.md)
   * [WidthQuery](WidthQuery.md)
   * [View](View.md)
   * [WindowWidthQuery](WindowWidthQuery.md)

src/Group/__story__/story.tsx

@@ -0,0 +1,44 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {Group} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const Custom = () => <hr />;
+
+storiesOf('UI/Group', module)
+//   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Group.md')}))
+  .add('No group', () =>
+    <div>
+        <span>Hello</span>
+        <span>world</span>
+    </div>
+  )
+  .add('Using default separator', () =>
+    <Group>
+      <span>Hello</span>
+      <span>world</span>
+    </Group>
+  )
+  .add('Using <br> separator', () =>
+    <Group separator={<br />}>
+      <span>Hello</span>
+      <span>world</span>
+    </Group>
+  )
+  .add('Using <hr> separator', () =>
+    <Group separator={<hr />}>
+      <span>Hello</span>
+      <span>world</span>
+    </Group>
+  )
+  .add('Using custom separator', () =>
+    <Group separator={<Custom />}>
+      <span>Hello</span>
+      <span>world</span>
+    </Group>
+  )
+  .add('No children', () =>
+    <Group separator={<Custom />}></Group>
+  )

src/Group/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Group> can change element type 1`] = `
+<Component
+  as="span"
+  separator=" "
+>
+  <span />
+</Component>
+`;
+
+exports[`<Group> can set custom separator 1`] = `
+<Component
+  as="div"
+  separator={<br />}
+>
+  <div>
+    <span
+      key=".0"
+    >
+      Hello
+    </span>
+    <br />
+    <span
+      key=".1"
+    >
+      world
+    </span>
+  </div>
+</Component>
+`;
+
+exports[`<Group> default separator is space 1`] = `
+<Component
+  as="div"
+  separator=" "
+>
+  <div>
+    <span
+      key=".0"
+    >
+      Hello
+    </span>
+
+    <span
+      key=".1"
+    >
+      world
+    </span>
+  </div>
+</Component>
+`;
+
+exports[`<Group> passes through props 1`] = `
+<Component
+  as="div"
+  className="foo"
+  separator=" "
+>
+  <div
+    className="foo"
+  />
+</Component>
+`;
+
+exports[`<Group> works with no children 1`] = `
+<Component
+  as="div"
+  separator=" "
+>
+  <div />
+</Component>
+`;

src/Group/__tests__/index.test.tsx

@@ -0,0 +1,50 @@
+import {createElement as h} from 'react';
+import {mount} from 'enzyme';
+import toJson from 'enzyme-to-json';
+import {Group} from '..';
+
+describe('<Group>', () => {
+  it('exists', () => {
+    expect(typeof Group).toBe('function');
+  });
+
+  it('works with no children', () => {
+    const wrapper = mount(<Group></Group>);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('can change element type', () => {
+    const wrapper = mount(<Group as="span"></Group>);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('passes through props', () => {
+    const wrapper = mount(<Group className="foo"></Group>);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('default separator is space', () => {
+    const wrapper = mount(
+      <Group>
+        <span>Hello</span>
+        <span>world</span>
+      </Group>
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('can set custom separator', () => {
+    const wrapper = mount(
+      <Group separator={<br />}>
+        <span>Hello</span>
+        <span>world</span>
+      </Group>
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/Group/index.ts

@@ -0,0 +1,31 @@
+import {Children} from 'react';
+import {h} from '../util';
+
+export interface IGroupProps {
+    [key: string]: any;
+    as?: string;
+    children?: any;
+    separator?: React.ReactChild;
+}
+
+export const Group: React.SFC<IGroupProps> = ({as, children, separator, ...rest}) => {
+    children = Children.toArray(children);
+
+    const newChildren = [];
+
+    if (children.length) {
+        newChildren.push(children[0]);
+
+        for (let i = 1; i < children.length; i++) {
+            newChildren.push(separator);
+            newChildren.push(children[i]);
+        }
+    }
+
+    return h(as, rest, ...newChildren);
+};
+
+Group.defaultProps = {
+    as: 'div',
+    separator: ' ',
+};