From bdd9a51b35a9bd588d890a3b2c4ee0ffc44695c8 Mon Sep 17 00:00:00 2001
From: John Benavides <john@mailtrack.io>
Date: Wed, 27 Dec 2017 20:56:37 +0100
Subject: [PATCH] Add Panel component

---
 README.md                                     |  1 +
 src/__test__/__snapshots__/index.test.js.snap |  1 +
 .../__test__/__snapshots__/panel.test.js.snap | 78 +++++++++++++++++++
 src/components/panel/__test__/panel.test.js   | 46 +++++++++++
 src/components/panel/components/block.js      | 39 ++++++++++
 src/components/panel/components/header.js     | 34 ++++++++
 src/components/panel/components/icon.js       | 34 ++++++++
 .../panel/components/tabs/components/tab.js   | 39 ++++++++++
 src/components/panel/components/tabs/index.js |  1 +
 src/components/panel/components/tabs/tabs.js  | 38 +++++++++
 src/components/panel/index.js                 |  3 +
 src/components/panel/panel.js                 | 43 ++++++++++
 src/components/panel/panel.sass               |  2 +
 src/components/panel/panel.story.js           | 68 ++++++++++++++++
 src/index.js                                  |  1 +
 15 files changed, 428 insertions(+)
 create mode 100644 src/components/panel/__test__/__snapshots__/panel.test.js.snap
 create mode 100644 src/components/panel/__test__/panel.test.js
 create mode 100644 src/components/panel/components/block.js
 create mode 100644 src/components/panel/components/header.js
 create mode 100644 src/components/panel/components/icon.js
 create mode 100644 src/components/panel/components/tabs/components/tab.js
 create mode 100644 src/components/panel/components/tabs/index.js
 create mode 100644 src/components/panel/components/tabs/tabs.js
 create mode 100644 src/components/panel/index.js
 create mode 100644 src/components/panel/panel.js
 create mode 100644 src/components/panel/panel.sass
 create mode 100644 src/components/panel/panel.story.js

diff --git a/README.md b/README.md
index 47c5ac0b..a336dbd3 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,7 @@ The Following componets were ported:
 - Navbar ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Navbar)) ([Docs](https://bulma.io/documentation/components/navbar/))
 - Notification ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Notification)) ([Docs](http://bulma.io/documentation/elements/notification/))
 - Pagination ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Pagination)) ([Docs](https://bulma.io/documentation/components/pagination/))
+- Panel ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Panel)) ([Docs](https://bulma.io/documentation/components/panel/))
 - Progress ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Progress)) ([Docs](http://bulma.io/documentation/elements/progress/))
 - Section ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Section)) ([Docs](http://bulma.io/documentation/layout/section/))
 - Tabs ([Storybook](https://couds.github.io/react-bulma-components/?selectedKind=Tabs)) ([Docs](https://bulma.io/documentation/components/tabs/))
diff --git a/src/__test__/__snapshots__/index.test.js.snap b/src/__test__/__snapshots__/index.test.js.snap
index a750324c..2f97e6f7 100644
--- a/src/__test__/__snapshots__/index.test.js.snap
+++ b/src/__test__/__snapshots__/index.test.js.snap
@@ -34,6 +34,7 @@ Object {
   "Navbar": [Function],
   "Notification": [Function],
   "Pagination": [Function],
+  "Panel": [Function],
   "Progress": [Function],
   "Section": [Function],
   "Table": [Function],
diff --git a/src/components/panel/__test__/__snapshots__/panel.test.js.snap b/src/components/panel/__test__/__snapshots__/panel.test.js.snap
new file mode 100644
index 00000000..62c7a205
--- /dev/null
+++ b/src/components/panel/__test__/__snapshots__/panel.test.js.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panel component Should Exist 1`] = `[Function]`;
+
+exports[`Panel component Should have box classname 1`] = `
+<nav
+  className="panel"
+>
+  <div
+    className="panel-heading"
+  >
+    repositories
+  </div>
+  <div
+    className="panel-block"
+  >
+    <div>
+      Control
+    </div>
+  </div>
+  <div
+    className="panel-tabs panel-tabs"
+  >
+    <a
+      className="is-active"
+    >
+      all
+    </a>
+    <a
+      className=""
+    >
+      public
+    </a>
+    <a
+      className=""
+    >
+      private
+    </a>
+    <a
+      className=""
+    >
+      sources
+    </a>
+    <a
+      className=""
+    >
+      forks
+    </a>
+  </div>
+  <a
+    className="panel-block is-active"
+  >
+    <span
+      className="panel-icon"
+    >
+      <i
+        className="fa fa-bars"
+      />
+    </span>
+    bulma
+  </a>
+  <label
+    className="panel-block panel-block"
+  >
+    <input
+      type="checkbox"
+    />
+    remember me
+  </label>
+  <div
+    className="panel-block"
+  >
+    <button>
+      reset all filters
+    </button>
+  </div>
+</nav>
+`;
diff --git a/src/components/panel/__test__/panel.test.js b/src/components/panel/__test__/panel.test.js
new file mode 100644
index 00000000..c90faad0
--- /dev/null
+++ b/src/components/panel/__test__/panel.test.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Panel from '..';
+
+describe('Panel component', () => {
+  it('Should Exist', () => {
+    expect(Panel).toMatchSnapshot();
+  });
+  it('Should have box classname', () => {
+    const component = renderer.create(
+      <Panel>
+        <Panel.Header>
+        repositories
+        </Panel.Header>
+        <Panel.Block>
+          <div>
+            Control
+          </div>
+        </Panel.Block>
+        <Panel.Tabs className="panel-tabs">
+          <Panel.Tabs.Tab active>all</Panel.Tabs.Tab>
+          <Panel.Tabs.Tab>public</Panel.Tabs.Tab>
+          <Panel.Tabs.Tab>private</Panel.Tabs.Tab>
+          <Panel.Tabs.Tab>sources</Panel.Tabs.Tab>
+          <Panel.Tabs.Tab>forks</Panel.Tabs.Tab>
+        </Panel.Tabs>
+        <Panel.Block renderAs="a" active>
+          <Panel.Icon>
+            <i className="fa fa-bars" />
+          </Panel.Icon >
+          bulma
+        </Panel.Block>
+        <Panel.Block renderAs="label" className="panel-block">
+          <input type="checkbox" />
+          remember me
+        </Panel.Block>
+        <Panel.Block>
+          <button>
+            reset all filters
+          </button>
+        </Panel.Block>
+      </Panel>,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/src/components/panel/components/block.js b/src/components/panel/components/block.js
new file mode 100644
index 00000000..7ef5dac6
--- /dev/null
+++ b/src/components/panel/components/block.js
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class PanelHeader extends PureComponent {
+  static displayName = 'Panel.Block'
+
+  static propTypes = {
+    className: PropTypes.string,
+    renderAs: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    active: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    className: '',
+    renderAs: 'div',
+    active: false,
+  }
+  render() {
+    const {
+      className,
+      renderAs,
+      active,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames('panel-block', className, {
+          'is-active': active,
+        })}
+      />
+    );
+  }
+}
diff --git a/src/components/panel/components/header.js b/src/components/panel/components/header.js
new file mode 100644
index 00000000..221639d0
--- /dev/null
+++ b/src/components/panel/components/header.js
@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class PanelHeader extends PureComponent {
+  static displayName = 'Panel.Header'
+
+  static propTypes = {
+    className: PropTypes.string,
+    renderAs: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+  }
+
+  static defaultProps = {
+    className: '',
+    renderAs: 'div',
+  }
+  render() {
+    const {
+      className,
+      renderAs,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames('panel-heading', className)}
+      />
+    );
+  }
+}
diff --git a/src/components/panel/components/icon.js b/src/components/panel/components/icon.js
new file mode 100644
index 00000000..59dfa35d
--- /dev/null
+++ b/src/components/panel/components/icon.js
@@ -0,0 +1,34 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class PanelIcon extends PureComponent {
+  static displayName = 'Panel.Icon'
+
+  static propTypes = {
+    className: PropTypes.string,
+    renderAs: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+  }
+
+  static defaultProps = {
+    className: '',
+    renderAs: 'span',
+  }
+  render() {
+    const {
+      className,
+      renderAs,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames('panel-icon', className)}
+      />
+    );
+  }
+}
diff --git a/src/components/panel/components/tabs/components/tab.js b/src/components/panel/components/tabs/components/tab.js
new file mode 100644
index 00000000..824dde19
--- /dev/null
+++ b/src/components/panel/components/tabs/components/tab.js
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+export default class PanelTabsTab extends PureComponent {
+  static displayName = 'Panel.Tabs.Tab'
+
+  static propTypes = {
+    className: PropTypes.string,
+    renderAs: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    active: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    className: '',
+    renderAs: 'a',
+    active: false,
+  }
+  render() {
+    const {
+      className,
+      renderAs,
+      active,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames(className, {
+          'is-active': active,
+        })}
+      />
+    );
+  }
+}
diff --git a/src/components/panel/components/tabs/index.js b/src/components/panel/components/tabs/index.js
new file mode 100644
index 00000000..203dd523
--- /dev/null
+++ b/src/components/panel/components/tabs/index.js
@@ -0,0 +1 @@
+export { default } from './tabs';
diff --git a/src/components/panel/components/tabs/tabs.js b/src/components/panel/components/tabs/tabs.js
new file mode 100644
index 00000000..fcc5f9e1
--- /dev/null
+++ b/src/components/panel/components/tabs/tabs.js
@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Tab from './components/tab';
+
+export default class PanelTabs extends PureComponent {
+  static displayName = 'Panel.Tabs'
+
+  static propTypes = {
+    className: PropTypes.string,
+    renderAs: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+  }
+
+  static defaultProps = {
+    className: '',
+    renderAs: 'div',
+  }
+
+  static Tab = Tab;
+
+  render() {
+    const {
+      className,
+      renderAs,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames('panel-tabs', className)}
+      />
+    );
+  }
+}
diff --git a/src/components/panel/index.js b/src/components/panel/index.js
new file mode 100644
index 00000000..5e772c3b
--- /dev/null
+++ b/src/components/panel/index.js
@@ -0,0 +1,3 @@
+import './panel.sass';
+
+export { default } from './panel';
diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js
new file mode 100644
index 00000000..ad998632
--- /dev/null
+++ b/src/components/panel/panel.js
@@ -0,0 +1,43 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import Block from './components/block';
+import Header from './components/header';
+import Icon from './components/icon';
+import Tabs from './components/tabs';
+
+export default class Panel extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    renderAs: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+  }
+
+  static defaultProps = {
+    className: '',
+    renderAs: 'nav',
+  }
+
+  static Header = Header
+  static Tabs = Tabs
+  static Block = Block
+  static Icon = Icon
+
+  render() {
+    const {
+      className,
+      renderAs,
+      ...props
+    } = this.props;
+    const Element = renderAs;
+    return (
+      <Element
+        {...props}
+        className={classnames('panel', className)}
+      />
+    );
+  }
+}
diff --git a/src/components/panel/panel.sass b/src/components/panel/panel.sass
new file mode 100644
index 00000000..fad56c3d
--- /dev/null
+++ b/src/components/panel/panel.sass
@@ -0,0 +1,2 @@
+@import '../utils.sass';
+@import '~bulma/sass/components/panel.sass';
\ No newline at end of file
diff --git a/src/components/panel/panel.story.js b/src/components/panel/panel.story.js
new file mode 100644
index 00000000..829d1264
--- /dev/null
+++ b/src/components/panel/panel.story.js
@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import Panel from '.';
+import { Control, Input, Checkbox } from '../form';
+import Icon from '../icon';
+import Button from '../button';
+
+storiesOf('Panel', module)
+  .addDecorator(story => (
+    <div style={{ margin: 10 }}>
+      {story()}
+    </div>
+  ))
+  .add('Default', withInfo()(() => (
+    <Panel>
+      <Panel.Header>
+        repositories
+      </Panel.Header>
+      <Panel.Block>
+        <Control>
+          <Input size="small" type="text" placeholder="search" />
+        </Control>
+      </Panel.Block>
+      <Panel.Tabs className="panel-tabs">
+        <Panel.Tabs.Tab active>all</Panel.Tabs.Tab>
+        <Panel.Tabs.Tab>public</Panel.Tabs.Tab>
+        <Panel.Tabs.Tab>private</Panel.Tabs.Tab>
+        <Panel.Tabs.Tab>sources</Panel.Tabs.Tab>
+        <Panel.Tabs.Tab>forks</Panel.Tabs.Tab>
+      </Panel.Tabs>
+      <Panel.Block renderAs="a" active>
+        <Panel.Icon renderAs={Icon} icon="angle-down" />
+        bulma
+      </Panel.Block>
+      <Panel.Block>
+        <Panel.Icon renderAs={Icon} icon="angle-down" />
+        react-bulma-components
+      </Panel.Block>
+      <Panel.Block>
+        <Panel.Icon renderAs={Icon} icon="angle-down" />
+        minireset.css
+      </Panel.Block>
+      <Panel.Block>
+        <Panel.Icon renderAs={Icon} icon="angle-down" />
+        jgthms.github.io
+      </Panel.Block>
+      <Panel.Block>
+        <Panel.Icon renderAs={Icon} icon="angle-down" />
+        couds.gidhub.io
+      </Panel.Block>
+      <Panel.Block>
+        <Panel.Icon renderAs={Icon} icon="angle-down" />
+        mojs
+      </Panel.Block>
+      <Panel.Block renderAs="label" className="panel-block">
+        <Checkbox />
+        remember me
+      </Panel.Block>
+      <Panel.Block>
+        <Button fullwidth color="link" outlined >
+          reset all filters
+        </Button>
+      </Panel.Block>
+    </Panel>
+  )));
diff --git a/src/index.js b/src/index.js
index 55324763..280a0b9d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,3 +29,4 @@ export { default as Tabs } from './components/tabs';
 export { default as Pagination } from './components/pagination';
 export { default as Menu } from './components/menu';
 export { default as Message } from './components/message';
+export { default as Panel } from './components/panel';