Skip to content
This repository has been archived by the owner on Aug 30, 2019. It is now read-only.

Add header to SlidingPanel component #137

Merged
merged 3 commits into from
Aug 8, 2017
Merged

Add header to SlidingPanel component #137

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd3383b
Add header to SlidingPanel component
Aug 8, 2017
d2ae93e
fix unit tests and update cov script command
Aug 8, 2017
31a51f4
adjust font for the close button icon
Aug 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
25 changes: 16 additions & 9 deletions components/slidingPanel/slidingPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

import SlidingPanelHeader from './slidingPanelHeader';
import { getClassNamesWithMods, getDataAttributes } from '../_helpers';

export default class SlidingPanel extends Component {
Expand Down Expand Up @@ -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 = {
Expand All @@ -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));
}

/**
Expand Down Expand Up @@ -141,6 +144,7 @@ export default class SlidingPanel extends Component {
const {
dataAttrs,
children,
title,
} = this.props;

const overlayMods = [];
Expand All @@ -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>
);
Expand Down
7 changes: 5 additions & 2 deletions components/slidingPanel/slidingPanel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

5 changes: 4 additions & 1 deletion components/slidingPanel/slidingPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -36,3 +35,7 @@
transform: var(--tx-sliding-panel-panel-open-transform);
}
}

.ui-sliding-panel__content {
padding: var(--tx-sliding-panel-panel-padding);
}
28 changes: 28 additions & 0 deletions components/slidingPanel/slidingPanelHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';

const SlidingPanelHeader = ({ title }) => {
if (!title) {
return <noscript />;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

afaik could be null

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was null in my first implementation. But then I stuck with testing, it causes this error. Seems like unless we migrated to React 15 we still need to use noscript. By the way, I've searched other components and found many places where we also use noscript. Once we migrated I think could be nice to get rid of them.

Copy link
Contributor

@mAiNiNfEcTiOn mAiNiNfEcTiOn Aug 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@asci it is only available on React 15:

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forget every time:D When we'll migrate?

}

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;
36 changes: 36 additions & 0 deletions components/slidingPanel/slidingPanelHeader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.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-size: 40px;
height: 25px;
line-height: 25px;
overflow: visible;
padding: 0;
position: absolute;
right: var(--tx-sliding-panel-panel-padding);
text-align: right;
top: 16px;
width: 20px;

&:hover {
color: var(--tx-generic-color-secondary-darkest);
}
}
98 changes: 81 additions & 17 deletions tests/unit/slidingPanel/__snapshots__/slidingPanel.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -181,7 +217,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>
Expand All @@ -195,6 +235,7 @@ exports[`SlidingPanel #render() render with default props and mods provided 1`]
"test",
]
}
title="Test Title"
>
<div
className="ui-sliding-panel-overlay ui-sliding-panel-overlay_hidden"
Expand All @@ -203,7 +244,30 @@ exports[`SlidingPanel #render() render with default props and mods provided 1`]
<div
className="ui-sliding-panel ui-sliding-panel_test"
>
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>
Expand Down
29 changes: 29 additions & 0 deletions tests/unit/slidingPanel/__snapshots__/slidingPanelHeader.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SlidingPanel #render() do not render 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>
`;
Loading