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
Travix-International · Aug 8, 2017 · ba490fc · ba490fc
1 parent cc53a02
commit ba490fc
Show file tree

Hide file tree

Showing 11 changed files with 277 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>