From ba490fca87d78d56fb7488e41792e3d760f08ad1 Mon Sep 17 00:00:00 2001
From: Yuri Drabik <yurist38@mail.ru>
Date: Tue, 8 Aug 2017 16:46:09 +0200
Subject: [PATCH] Add header to SlidingPanel component (#137)

* Add header to SlidingPanel component

* fix unit tests and update cov script command

* adjust font for the close button icon
---
 components/index.scss                         |   1 +
 components/slidingPanel/slidingPanel.js       |  25 ++--
 components/slidingPanel/slidingPanel.md       |   7 +-
 components/slidingPanel/slidingPanel.scss     |   5 +-
 components/slidingPanel/slidingPanelHeader.js |  28 ++++
 .../slidingPanel/slidingPanelHeader.scss      |  38 ++++++
 package.json                                  |   2 +-
 .../__snapshots__/slidingPanel.spec.js.snap   | 124 +++++++++++++++---
 .../slidingPanelHeader.spec.js.snap           |  29 ++++
 tests/unit/slidingPanel/slidingPanel.spec.js  |  16 ++-
 .../slidingPanel/slidingPanelHeader.spec.js   |  34 +++++
 11 files changed, 277 insertions(+), 32 deletions(-)
 create mode 100644 components/slidingPanel/slidingPanelHeader.js
 create mode 100644 components/slidingPanel/slidingPanelHeader.scss
 create mode 100644 tests/unit/slidingPanel/__snapshots__/slidingPanelHeader.spec.js.snap
 create mode 100644 tests/unit/slidingPanel/slidingPanelHeader.spec.js

diff --git a/components/index.scss b/components/index.scss
index dd756ab1..e9e3a20e 100644
--- a/components/index.scss
+++ b/components/index.scss
@@ -17,6 +17,7 @@
 @import "./price/price.scss";
 @import "./radioButton/radioButton.scss";
 @import "./slidingPanel/slidingPanel.scss";
+@import "./slidingPanel/slidingPanelHeader.scss";
 @import "./spinner/spinner.scss";
 @import "./rating/rating.scss";
 @import "~react-select/scss/default.scss";
diff --git a/components/slidingPanel/slidingPanel.js b/components/slidingPanel/slidingPanel.js
index 9d83a03b..58b83951 100644
--- a/components/slidingPanel/slidingPanel.js
+++ b/components/slidingPanel/slidingPanel.js
@@ -1,4 +1,6 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SlidingPanelHeader from './slidingPanelHeader';
 import { getClassNamesWithMods, getDataAttributes } from '../_helpers';
 
 export default class SlidingPanel extends Component {
@@ -48,6 +50,11 @@ export default class SlidingPanel extends Component {
      * Defines if the panel is open.
      */
     active: PropTypes.bool,
+
+    /**
+     * Defines title for header. Optional. If it's defined header will be shown.
+     */
+    title: PropTypes.string,
   }
 
   static defaultProps = {
@@ -72,17 +79,13 @@ export default class SlidingPanel extends Component {
 
     this.panel.addEventListener('transitionend', this.handleTransitionEnd);
 
-    this.closeButton = this.panel.querySelector('[rel="close"]');
-    if (this.closeButton) {
-      this.closeButton.addEventListener('click', this.handleClose);
-    }
+    this.closeButtons = this.panel.querySelectorAll('[rel="close"]');
+    this.closeButtons.forEach(b => b.addEventListener('click', this.handleClose));
   }
 
   componentWillUnmount() {
     this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
-    if (this.closeButton) {
-      this.closeButton.removeEventListener('click', this.handleClose);
-    }
+    this.closeButtons.forEach(b => b.removeEventListener('click', this.handleClose));
   }
 
   /**
@@ -141,6 +144,7 @@ export default class SlidingPanel extends Component {
     const {
       dataAttrs,
       children,
+      title,
     } = this.props;
 
     const overlayMods = [];
@@ -167,7 +171,10 @@ export default class SlidingPanel extends Component {
           ref={(e) => { this.panel = e; }}
           {...getDataAttributes(dataAttrs)}
         >
-          {children}
+          {title && <SlidingPanelHeader title={title} />}
+          <div className="ui-sliding-panel__content">
+            {children}
+          </div>
         </div>
       </div>
     );
diff --git a/components/slidingPanel/slidingPanel.md b/components/slidingPanel/slidingPanel.md
index a7359dc9..45ef4cf4 100644
--- a/components/slidingPanel/slidingPanel.md
+++ b/components/slidingPanel/slidingPanel.md
@@ -4,11 +4,14 @@ Basic Sliding Panel:
       <button
         onClick={() => setState({ isSlidingPanelOpen: !state.isSlidingPanelOpen })}
       >Open panel</button>
-      <SlidingPanel active={state.isSlidingPanelOpen} onClose={() => setState({ isSlidingPanelOpen: false })}>
+      <SlidingPanel
+        active={state.isSlidingPanelOpen}
+        onClose={() => setState({ isSlidingPanelOpen: false })}
+        title="Panel Title"
+      >
         This is an example<br/>
         Of how simple it is to use<br/>
         Our sliding panel.<br/><br/>
         <button rel="close">Close</button>
       </SlidingPanel>
     </div>
-
diff --git a/components/slidingPanel/slidingPanel.scss b/components/slidingPanel/slidingPanel.scss
index 43d34611..01af6eb8 100644
--- a/components/slidingPanel/slidingPanel.scss
+++ b/components/slidingPanel/slidingPanel.scss
@@ -24,7 +24,6 @@
   margin: var(--tx-sliding-panel-panel-margin);
   max-width: var(--tx-sliding-panel-panel-max-width);
   min-width: var(--tx-sliding-panel-panel-min-width);
-  padding: var(--tx-sliding-panel-panel-padding);
   position: var(--tx-sliding-panel-panel-position);
   right: var(--tx-sliding-panel-panel-right);
   top: var(--tx-sliding-panel-panel-top);
@@ -36,3 +35,7 @@
     transform: var(--tx-sliding-panel-panel-open-transform);
   }
 }
+
+.ui-sliding-panel__content {
+  padding: var(--tx-sliding-panel-panel-padding);
+}
diff --git a/components/slidingPanel/slidingPanelHeader.js b/components/slidingPanel/slidingPanelHeader.js
new file mode 100644
index 00000000..854d8346
--- /dev/null
+++ b/components/slidingPanel/slidingPanelHeader.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SlidingPanelHeader = ({ title }) => {
+  if (!title) {
+    return <noscript />;
+  }
+
+  return (
+    <div className="ui-sliding-panel-header">
+      <h3 className="ui-sliding-panel-header__title">
+        {title}
+      </h3>
+      <button
+        className="ui-sliding-panel-header__close-button"
+        rel="close"
+      >
+        &#215;
+      </button>
+    </div>
+  );
+};
+
+SlidingPanelHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default SlidingPanelHeader;
diff --git a/components/slidingPanel/slidingPanelHeader.scss b/components/slidingPanel/slidingPanelHeader.scss
new file mode 100644
index 00000000..98063a36
--- /dev/null
+++ b/components/slidingPanel/slidingPanelHeader.scss
@@ -0,0 +1,38 @@
+.ui-sliding-panel-header {
+  background-color: var(--tx-generic-color-blank);
+  border-bottom: solid 2px var(--tx-generic-color-secondary-darker);
+  flex-shrink: 0;
+  height: 65px;
+  min-height: 65px;
+  text-align: center;
+}
+
+.ui-sliding-panel-header__title {
+  line-height: 65px;
+  margin: 0;
+  padding: 0 50px;
+}
+
+.ui-sliding-panel-header__close-button {
+  background: none;
+  border: none;
+  box-shadow: none;
+  color: var(--tx-generic-color-secondary-darker);
+  cursor: pointer;
+  font-family: Arial, sans-serif;
+  font-size: 40px;
+  font-weight: 400;
+  height: 25px;
+  line-height: 25px;
+  overflow: visible;
+  padding: 0;
+  position: absolute;
+  right: var(--tx-sliding-panel-panel-padding);
+  text-align: right;
+  top: 20px;
+  width: 20px;
+
+  &:hover {
+    color: var(--tx-generic-color-secondary-darkest);
+  }
+}
diff --git a/package.json b/package.json
index 76ab7ac2..79d184ad 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "styleguide-build": "styleguidist build",
     "test": "TZ=utc jest -c ./tests/jest.config.json",
     "update-snapshots": "TZ=utc jest -c ./tests/jest.config.json -u",
-    "cov": "jest -c ./tests/jest.config.json --coverage --no-cache",
+    "cov": "TZ=utc jest -c ./tests/jest.config.json --coverage --no-cache",
     "coverage:coveralls": "cat ./coverage/lcov.info | coveralls",
     "lint": "eslint --color '{components,tests,utils,scripts}/**/*.js'",
     "transpile": "npm run build"
diff --git a/tests/unit/slidingPanel/__snapshots__/slidingPanel.spec.js.snap b/tests/unit/slidingPanel/__snapshots__/slidingPanel.spec.js.snap
index 5f4b3489..f704c400 100644
--- a/tests/unit/slidingPanel/__snapshots__/slidingPanel.spec.js.snap
+++ b/tests/unit/slidingPanel/__snapshots__/slidingPanel.spec.js.snap
@@ -12,7 +12,11 @@ exports[`SlidingPanel #render() closes the panel when active prop changes to fal
     <div
       className="ui-sliding-panel ui-sliding-panel_active"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -30,7 +34,11 @@ exports[`SlidingPanel #render() closes the panel when active prop changes to fal
     <div
       className="ui-sliding-panel"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -48,11 +56,15 @@ exports[`SlidingPanel #render() enables [rel="close"] element provided on the ch
     <div
       className="ui-sliding-panel ui-sliding-panel_active"
     >
-      <button
-        rel="close"
+      <div
+        className="ui-sliding-panel__content"
       >
-        Test
-      </button>
+        <button
+          rel="close"
+        >
+          Test
+        </button>
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -70,11 +82,15 @@ exports[`SlidingPanel #render() enables [rel="close"] element provided on the ch
     <div
       className="ui-sliding-panel"
     >
-      <button
-        rel="close"
+      <div
+        className="ui-sliding-panel__content"
       >
-        Test
-      </button>
+        <button
+          rel="close"
+        >
+          Test
+        </button>
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -91,7 +107,11 @@ exports[`SlidingPanel #render() opens the panel when active prop changes to true
     <div
       className="ui-sliding-panel"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -109,7 +129,11 @@ exports[`SlidingPanel #render() opens the panel when active prop changes to true
     <div
       className="ui-sliding-panel ui-sliding-panel_active"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -127,7 +151,11 @@ exports[`SlidingPanel #render() render active by default and when clicking on th
     <div
       className="ui-sliding-panel ui-sliding-panel_active"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -145,7 +173,11 @@ exports[`SlidingPanel #render() render active by default and when clicking on th
     <div
       className="ui-sliding-panel"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -163,7 +195,11 @@ exports[`SlidingPanel #render() render active by default but with closeOnOverlay
     <div
       className="ui-sliding-panel ui-sliding-panel_active"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -181,7 +217,57 @@ exports[`SlidingPanel #render() render active by default but with closeOnOverlay
     <div
       className="ui-sliding-panel ui-sliding-panel_active"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
+    </div>
+  </div>
+</SlidingPanel>
+`;
+
+exports[`SlidingPanel #render() render header if title prop is passed 1`] = `
+<SlidingPanel
+  closeOnOverlayClick={true}
+  mods={
+    Array [
+      "test",
+    ]
+  }
+  title="Test Title"
+>
+  <div
+    className="ui-sliding-panel-overlay ui-sliding-panel-overlay_hidden"
+    onClick={[Function]}
+  >
+    <div
+      className="ui-sliding-panel ui-sliding-panel_test"
+    >
+      <SlidingPanelHeader
+        title="Test Title"
+      >
+        <div
+          className="ui-sliding-panel-header"
+        >
+          <h3
+            className="ui-sliding-panel-header__title"
+          >
+            Test Title
+          </h3>
+          <button
+            className="ui-sliding-panel-header__close-button"
+            rel="close"
+          >
+            ×
+          </button>
+        </div>
+      </SlidingPanelHeader>
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
@@ -203,7 +289,11 @@ exports[`SlidingPanel #render() render with default props and mods provided 1`]
     <div
       className="ui-sliding-panel ui-sliding-panel_test"
     >
-      Test
+      <div
+        className="ui-sliding-panel__content"
+      >
+        Test
+      </div>
     </div>
   </div>
 </SlidingPanel>
diff --git a/tests/unit/slidingPanel/__snapshots__/slidingPanelHeader.spec.js.snap b/tests/unit/slidingPanel/__snapshots__/slidingPanelHeader.spec.js.snap
new file mode 100644
index 00000000..4b77b0f1
--- /dev/null
+++ b/tests/unit/slidingPanel/__snapshots__/slidingPanelHeader.spec.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SlidingPanel #render() render noscript without title 1`] = `
+<SlidingPanelHeader>
+  <noscript />
+</SlidingPanelHeader>
+`;
+
+exports[`SlidingPanel #render() render with title 1`] = `
+<SlidingPanelHeader
+  title="Test Title"
+>
+  <div
+    className="ui-sliding-panel-header"
+  >
+    <h3
+      className="ui-sliding-panel-header__title"
+    >
+      Test Title
+    </h3>
+    <button
+      className="ui-sliding-panel-header__close-button"
+      rel="close"
+    >
+      ×
+    </button>
+  </div>
+</SlidingPanelHeader>
+`;
diff --git a/tests/unit/slidingPanel/slidingPanel.spec.js b/tests/unit/slidingPanel/slidingPanel.spec.js
index 3b005f21..e8c0a3f9 100644
--- a/tests/unit/slidingPanel/slidingPanel.spec.js
+++ b/tests/unit/slidingPanel/slidingPanel.spec.js
@@ -13,14 +13,26 @@ describe('SlidingPanel', () => {
 
       const overlayElement = renderTree.find('.ui-sliding-panel-overlay');
       const panelElement = overlayElement.find('.ui-sliding-panel');
+      const mainContent = panelElement.find('.ui-sliding-panel__content');
 
       jest.runAllTimers();
 
-
       expect(renderTree).toMatchSnapshot();
       expect(overlayElement.hasClass('ui-sliding-panel-overlay_hidden')).toEqual(true);
       expect(panelElement.hasClass('ui-sliding-panel_test')).toEqual(true);
-      expect(panelElement.text()).toEqual('Test');
+      expect(mainContent.text()).toEqual('Test');
+    });
+
+    it('render header if title prop is passed', () => {
+      const renderTree = mount(
+        <SlidingPanel mods={['test']} title="Test Title">Test</SlidingPanel>
+      );
+      const header = renderTree.find('.ui-sliding-panel-header');
+
+      jest.runAllTimers();
+
+      expect(renderTree).toMatchSnapshot();
+      expect(header).toHaveLength(1);
     });
 
     it('render active by default and when clicking on the overlay it closes it', () => {
diff --git a/tests/unit/slidingPanel/slidingPanelHeader.spec.js b/tests/unit/slidingPanel/slidingPanelHeader.spec.js
new file mode 100644
index 00000000..ece70608
--- /dev/null
+++ b/tests/unit/slidingPanel/slidingPanelHeader.spec.js
@@ -0,0 +1,34 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import SlidingPanelHeader from '../../../components/slidingPanel/slidingPanelHeader';
+
+jest.useFakeTimers();
+
+describe('SlidingPanel', () => {
+  describe('#render()', () => {
+    it('render noscript without title', () => {
+      const renderTree = mount(
+        <SlidingPanelHeader />
+      );
+
+      jest.runAllTimers();
+
+      expect(renderTree).toMatchSnapshot();
+      expect(renderTree.find('noscript')).toHaveLength(1);
+    });
+
+    it('render with title', () => {
+      const title = 'Test Title';
+      const renderTree = mount(
+        <SlidingPanelHeader title={title} />
+      );
+
+      const titleEl = renderTree.find('.ui-sliding-panel-header__title');
+
+      jest.runAllTimers();
+
+      expect(renderTree).toMatchSnapshot();
+      expect(titleEl.text()).toEqual(title);
+    });
+  });
+});