Add Panel component

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/))

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],

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>
+`;

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();
+  });
+});

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,
+        })}
+      />
+    );
+  }
+}

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)}
+      />
+    );
+  }
+}

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)}
+      />
+    );
+  }
+}

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,
+        })}
+      />
+    );
+  }
+}

src/components/panel/components/tabs/index.js

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

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)}
+      />
+    );
+  }
+}

src/components/panel/index.js

@@ -0,0 +1,3 @@
+import './panel.sass';
+
+export { default } from './panel';

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)}
+      />
+    );
+  }
+}

src/components/panel/panel.sass

@@ -0,0 +1,2 @@
+@import '../utils.sass';
+@import '~bulma/sass/components/panel.sass';