Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

terra-slide-panel

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

terra-slide-panel - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

CHANGELOG.md

		@@ -7,2 +7,10 @@ Changelog

		3.6.0 - (June 12, 2019)
		------------------
		### Removed
		* Removed node_modules from .npmignore

		### Changed
		* Update tests for terra-toolkit v5 and terra-dev-site v5 changes

		3.5.0 - (April 24, 2019)
		@@ -9,0 +17,0 @@ ------------------

149

lib/SlidePanel.js

		@@ -1,39 +0,36 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
		var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
		var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

		var _react = require('react');
		var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

		var _react2 = _interopRequireDefault(_react);
		var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

		var _propTypes = require('prop-types');
		var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

		var _propTypes2 = _interopRequireDefault(_propTypes);
		var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

		var _bind = require('classnames/bind');
		var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

		var _bind2 = _interopRequireDefault(_bind);
		var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

		var _SlidePanelModule = require('./SlidePanel.module.scss');
		var _react = _interopRequireDefault(require("react"));

		var _SlidePanelModule2 = _interopRequireDefault(_SlidePanelModule);
		var _propTypes = _interopRequireDefault(require("prop-types"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		var _bind = _interopRequireDefault(require("classnames/bind"));

		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
		var _SlidePanelModule = _interopRequireDefault(require("./SlidePanel.module.scss"));

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		var cx = _bind.default.bind(_SlidePanelModule.default);

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var cx = _bind2.default.bind(_SlidePanelModule2.default);

		var propTypes = {
		@@ -43,3 +40,3 @@ /**
		*/
		mainContent: _propTypes2.default.node,
		mainContent: _propTypes.default.node,

		@@ -49,3 +46,3 @@ /**
		*/
		panelContent: _propTypes2.default.node,
		panelContent: _propTypes.default.node,

		@@ -55,3 +52,3 @@ /**
		*/
		panelBehavior: _propTypes2.default.oneOf(['overlay', 'squish']),
		panelBehavior: _propTypes.default.oneOf(['overlay', 'squish']),

		@@ -61,3 +58,3 @@ /**
		*/
		panelPosition: _propTypes2.default.oneOf(['start', 'end']),
		panelPosition: _propTypes.default.oneOf(['start', 'end']),

		@@ -67,3 +64,3 @@ /**
		*/
		panelSize: _propTypes2.default.oneOf(['small', 'large']),
		panelSize: _propTypes.default.oneOf(['small', 'large']),

		@@ -73,3 +70,3 @@ /**
		*/
		isFullscreen: _propTypes2.default.bool,
		isFullscreen: _propTypes.default.bool,

		@@ -79,3 +76,3 @@ /**
		*/
		isOpen: _propTypes2.default.bool,
		isOpen: _propTypes.default.bool,

		@@ -85,5 +82,4 @@ /**
		*/
		fill: _propTypes2.default.bool
		fill: _propTypes.default.bool
		};

		var defaultProps = {
		@@ -95,17 +91,19 @@ panelBehavior: 'overlay',

		var SlidePanel = function (_React$Component) {
		_inherits(SlidePanel, _React$Component);
		var SlidePanel =
		/#__PURE__/
		function (_React$Component) {
		(0, _inherits2.default)(SlidePanel, _React$Component);

		function SlidePanel(props) {
		_classCallCheck(this, SlidePanel);
		var _this;

		var _this = _possibleConstructorReturn(this, (SlidePanel.__proto__ \|\| Object.getPrototypeOf(SlidePanel)).call(this, props));

		_this.setPanelNode = _this.setPanelNode.bind(_this);
		_this.mainNode = _react2.default.createRef();
		(0, _classCallCheck2.default)(this, SlidePanel);
		_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(SlidePanel).call(this, props));
		_this.setPanelNode = _this.setPanelNode.bind((0, _assertThisInitialized2.default)(_this));
		_this.mainNode = _react.default.createRef();
		return _this;
		}

		_createClass(SlidePanel, [{
		key: 'componentDidUpdate',
		(0, _createClass2.default)(SlidePanel, [{
		key: "componentDidUpdate",
		value: function componentDidUpdate(prevProps) {
		@@ -119,3 +117,3 @@ if (this.props.isOpen && this.props.isOpen !== prevProps.isOpen) {
		}, {
		key: 'setPanelNode',
		key: "setPanelNode",
		value: function setPanelNode(node) {
		@@ -125,45 +123,44 @@ this.panelNode = node;
		}, {
		key: 'render',
		key: "render",
		value: function render() {
		var _props = this.props,
		mainContent = _props.mainContent,
		panelContent = _props.panelContent,
		panelBehavior = _props.panelBehavior,
		panelPosition = _props.panelPosition,
		panelSize = _props.panelSize,
		isFullscreen = _props.isFullscreen,
		isOpen = _props.isOpen,
		fill = _props.fill,
		customProps = _objectWithoutProperties(_props, ['mainContent', 'panelContent', 'panelBehavior', 'panelPosition', 'panelSize', 'isFullscreen', 'isOpen', 'fill']);

		var slidePanelClassNames = cx(['slide-panel', { 'is-open': isOpen }, { 'is-fullscreen': isFullscreen }, { fill: fill }, customProps.className]);

		return _react2.default.createElement(
		'div',
		_extends({}, customProps, {
		className: slidePanelClassNames,
		'data-slide-panel-panel-behavior': panelBehavior,
		'data-slide-panel-panel-position': panelPosition,
		'data-slide-panel-panel-size': panelSize
		}),
		_react2.default.createElement(
		'div',
		{ className: cx('main'), tabIndex: '-1', ref: this.mainNode },
		mainContent
		),
		_react2.default.createElement(
		'div',
		{ className: cx(['panel']), tabIndex: '-1', 'aria-hidden': !isOpen ? 'true' : 'false', ref: this.setPanelNode },
		panelContent
		)
		);
		var _this$props = this.props,
		mainContent = _this$props.mainContent,
		panelContent = _this$props.panelContent,
		panelBehavior = _this$props.panelBehavior,
		panelPosition = _this$props.panelPosition,
		panelSize = _this$props.panelSize,
		isFullscreen = _this$props.isFullscreen,
		isOpen = _this$props.isOpen,
		fill = _this$props.fill,
		customProps = (0, _objectWithoutProperties2.default)(_this$props, ["mainContent", "panelContent", "panelBehavior", "panelPosition", "panelSize", "isFullscreen", "isOpen", "fill"]);
		var slidePanelClassNames = cx(['slide-panel', {
		'is-open': isOpen
		}, {
		'is-fullscreen': isFullscreen
		}, {
		fill: fill
		}, customProps.className]);
		return _react.default.createElement("div", (0, _extends2.default)({}, customProps, {
		className: slidePanelClassNames,
		"data-slide-panel-panel-behavior": panelBehavior,
		"data-slide-panel-panel-position": panelPosition,
		"data-slide-panel-panel-size": panelSize
		}), _react.default.createElement("div", {
		className: cx('main'),
		tabIndex: "-1",
		ref: this.mainNode
		}, mainContent), _react.default.createElement("div", {
		className: cx(['panel']),
		tabIndex: "-1",
		"aria-hidden": !isOpen ? 'true' : 'false',
		ref: this.setPanelNode
		}, panelContent));
		}
		}]);

		return SlidePanel;
		}(_react2.default.Component);
		}(_react.default.Component);

		SlidePanel.propTypes = propTypes;
		SlidePanel.defaultProps = defaultProps;

		exports.default = SlidePanel;
		var _default = SlidePanel;
		exports.default = _default;

371

lib/terra-dev-site/doc/example/DefaultSlidePanel.js

		@@ -1,249 +0,99 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
		var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

		var _react = require('react');
		var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

		var _react2 = _interopRequireDefault(_react);
		var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

		var _propTypes = require('prop-types');
		var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

		var _propTypes2 = _interopRequireDefault(_propTypes);
		var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

		var _SlidePanel = require('terra-slide-panel/lib/SlidePanel');
		var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _react = _interopRequireDefault(require("react"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		var _propTypes = _interopRequireDefault(require("prop-types"));

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		var _SlidePanel = _interopRequireDefault(require("terra-slide-panel/lib/SlidePanel"));

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
		// eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved, import/extensions */


		var mainContentForSlidePanel = function mainContentForSlidePanel(togglePanelHandler) {
		return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(
		'header',
		{ style: { backgroundColor: 'lightgrey' } },
		_react2.default.createElement(
		'h3',
		{ style: { margin: '0px', padding: '5px', display: 'inline-block' } },
		'Main Content'
		),
		_react2.default.createElement(
		'button',
		{ id: 'mainToggleBtn', type: 'button', onClick: togglePanelHandler, style: { display: 'inline-block' } },
		'Main Toggle Panel'
		)
		),
		_react2.default.createElement(
		'div',
		{ style: { margin: '5px' } },
		_react2.default.createElement(
		'p',
		null,
		'This is the main content area of the slide panel. The overall height of the SlidePanel is determined by the intrinsic height of the content in this container.'
		),
		_react2.default.createElement(
		'p',
		null,
		'Focus is moved to the toggle button in the panel container when the panel is opened via the componentDidUpdate lifecycle hook in ',
		_react2.default.createElement(
		'a',
		{ href: 'https://github.com/cerner/terra-framework/blob/master/packages/terra-slide-panel/src/terra-dev-site/doc/example/DefaultSlidePanel.jsx' },
		'the example code'
		),
		'.'
		),
		_react2.default.createElement(
		'ul',
		null,
		_react2.default.createElement(
		'li',
		null,
		'Item 1'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 2'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 3'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 4'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 5'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 6'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 7'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 8'
		)
		)
		)
		);
		return _react.default.createElement("div", null, _react.default.createElement("header", {
		style: {
		backgroundColor: 'lightgrey'
		}
		}, _react.default.createElement("h3", {
		style: {
		margin: '0px',
		padding: '5px',
		display: 'inline-block'
		}
		}, "Main Content"), _react.default.createElement("button", {
		id: "mainToggleBtn",
		type: "button",
		onClick: togglePanelHandler,
		style: {
		display: 'inline-block'
		}
		}, "Main Toggle Panel")), _react.default.createElement("div", {
		style: {
		margin: '5px'
		}
		}, _react.default.createElement("p", null, "This is the main content area of the slide panel. The overall height of the SlidePanel is determined by the intrinsic height of the content in this container."), _react.default.createElement("p", null, 'Focus is moved to the toggle button in the panel container when the panel is opened via the componentDidUpdate lifecycle hook in ', _react.default.createElement("a", {
		href: "https://github.com/cerner/terra-framework/blob/master/packages/terra-slide-panel/src/terra-dev-site/doc/example/DefaultSlidePanel.jsx"
		}, "the example code"), '.'), _react.default.createElement("ul", null, _react.default.createElement("li", null, "Item 1"), _react.default.createElement("li", null, "Item 2"), _react.default.createElement("li", null, "Item 3"), _react.default.createElement("li", null, "Item 4"), _react.default.createElement("li", null, "Item 5"), _react.default.createElement("li", null, "Item 6"), _react.default.createElement("li", null, "Item 7"), _react.default.createElement("li", null, "Item 8"))));
		};

		var panelContentForSlidePanel = function panelContentForSlidePanel(togglePanelHandler, toggleFullscreenHandler) {
		return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(
		'header',
		{ style: { backgroundColor: 'lightgrey' } },
		_react2.default.createElement(
		'h3',
		{ style: { margin: '0px', padding: '5px', display: 'inline-block' } },
		'Panel Content'
		),
		_react2.default.createElement(
		'button',
		{ id: 'panelToggleBtn', type: 'button', onClick: togglePanelHandler, style: { display: 'inline-block' } },
		'Panel Toggle Panel'
		),
		_react2.default.createElement(
		'button',
		{ type: 'button', onClick: toggleFullscreenHandler, style: { display: 'inline-block' } },
		'Toggle Fullscreen'
		)
		),
		_react2.default.createElement(
		'div',
		{ style: { margin: '5px' } },
		_react2.default.createElement(
		'p',
		null,
		'This is the panel content area of the slide panel.'
		),
		_react2.default.createElement(
		'p',
		null,
		'Focus is moved to the toggle button in the main container when the panel is closed via the componentDidUpdate lifecycle hook in ',
		_react2.default.createElement(
		'a',
		{ href: 'https://github.com/cerner/terra-framework/blob/master/packages/terra-slide-panel/src/terra-dev-site/doc/example/DefaultSlidePanel.jsx' },
		'the example code'
		),
		'.'
		),
		_react2.default.createElement(
		'ul',
		null,
		_react2.default.createElement(
		'li',
		null,
		'Item 1'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 2'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 3'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 4'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 5'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 6'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 7'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 8'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 9'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 10'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 11'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 12'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 13'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 14'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 15'
		)
		)
		)
		);
		return _react.default.createElement("div", null, _react.default.createElement("header", {
		style: {
		backgroundColor: 'lightgrey'
		}
		}, _react.default.createElement("h3", {
		style: {
		margin: '0px',
		padding: '5px',
		display: 'inline-block'
		}
		}, "Panel Content"), _react.default.createElement("button", {
		id: "panelToggleBtn",
		type: "button",
		onClick: togglePanelHandler,
		style: {
		display: 'inline-block'
		}
		}, "Panel Toggle Panel"), _react.default.createElement("button", {
		type: "button",
		onClick: toggleFullscreenHandler,
		style: {
		display: 'inline-block'
		}
		}, "Toggle Fullscreen")), _react.default.createElement("div", {
		style: {
		margin: '5px'
		}
		}, _react.default.createElement("p", null, "This is the panel content area of the slide panel."), _react.default.createElement("p", null, 'Focus is moved to the toggle button in the main container when the panel is closed via the componentDidUpdate lifecycle hook in ', _react.default.createElement("a", {
		href: "https://github.com/cerner/terra-framework/blob/master/packages/terra-slide-panel/src/terra-dev-site/doc/example/DefaultSlidePanel.jsx"
		}, "the example code"), '.'), _react.default.createElement("ul", null, _react.default.createElement("li", null, "Item 1"), _react.default.createElement("li", null, "Item 2"), _react.default.createElement("li", null, "Item 3"), _react.default.createElement("li", null, "Item 4"), _react.default.createElement("li", null, "Item 5"), _react.default.createElement("li", null, "Item 6"), _react.default.createElement("li", null, "Item 7"), _react.default.createElement("li", null, "Item 8"), _react.default.createElement("li", null, "Item 9"), _react.default.createElement("li", null, "Item 10"), _react.default.createElement("li", null, "Item 11"), _react.default.createElement("li", null, "Item 12"), _react.default.createElement("li", null, "Item 13"), _react.default.createElement("li", null, "Item 14"), _react.default.createElement("li", null, "Item 15"))));
		};

		var DefaultSlidePanel = function (_React$Component) {
		_inherits(DefaultSlidePanel, _React$Component);
		var DefaultSlidePanel =
		/#__PURE__/
		function (_React$Component) {
		(0, _inherits2.default)(DefaultSlidePanel, _React$Component);

		function DefaultSlidePanel(props) {
		_classCallCheck(this, DefaultSlidePanel);
		var _this;

		var _this = _possibleConstructorReturn(this, (DefaultSlidePanel.__proto__ \|\| Object.getPrototypeOf(DefaultSlidePanel)).call(this, props));

		(0, _classCallCheck2.default)(this, DefaultSlidePanel);
		_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(DefaultSlidePanel).call(this, props));
		_this.state = {
		@@ -253,10 +103,9 @@ panelIsOpen: props.isOpen \|\| false,
		};

		_this.handlePanelToggle = _this.handlePanelToggle.bind(_this);
		_this.handleFullscreenToggle = _this.handleFullscreenToggle.bind(_this);
		_this.handlePanelToggle = _this.handlePanelToggle.bind((0, _assertThisInitialized2.default)(_this));
		_this.handleFullscreenToggle = _this.handleFullscreenToggle.bind((0, _assertThisInitialized2.default)(_this));
		return _this;
		}

		_createClass(DefaultSlidePanel, [{
		key: 'componentDidUpdate',
		(0, _createClass2.default)(DefaultSlidePanel, [{
		key: "componentDidUpdate",
		value: function componentDidUpdate(prevProps, prevState) {
		@@ -272,3 +121,3 @@ if (prevState && !prevState.panelIsOpen) {
		}, {
		key: 'handlePanelToggle',
		key: "handlePanelToggle",
		value: function handlePanelToggle() {
		@@ -283,50 +132,44 @@ this.setState(function (prevState) {
		}, {
		key: 'handleFullscreenToggle',
		key: "handleFullscreenToggle",
		value: function handleFullscreenToggle() {
		var newState = this.state;

		newState.panelIsFullscreen = !this.state.panelIsFullscreen;

		this.setState(newState);
		}
		}, {
		key: 'render',
		key: "render",
		value: function render() {
		var containerAttributes = {
		style: { border: '1px lightgrey solid' }
		style: {
		border: '1px lightgrey solid'
		}
		};

		return _react2.default.createElement(
		'div',
		{ style: { padding: '5px' } },
		_react2.default.createElement(
		'div',
		containerAttributes,
		_react2.default.createElement(_SlidePanel2.default, {
		mainContent: mainContentForSlidePanel(this.handlePanelToggle),
		panelContent: panelContentForSlidePanel(this.handlePanelToggle, this.handleFullscreenToggle),
		panelSize: this.props.panelSize,
		panelBehavior: this.props.panelBehavior,
		panelPosition: this.props.panelPosition,
		isOpen: this.state.panelIsOpen,
		isFullscreen: this.state.panelIsFullscreen,
		fill: this.props.fill
		})
		)
		);
		return _react.default.createElement("div", {
		style: {
		padding: '5px'
		}
		}, _react.default.createElement("div", containerAttributes, _react.default.createElement(_SlidePanel.default, {
		mainContent: mainContentForSlidePanel(this.handlePanelToggle),
		panelContent: panelContentForSlidePanel(this.handlePanelToggle, this.handleFullscreenToggle),
		panelSize: this.props.panelSize,
		panelBehavior: this.props.panelBehavior,
		panelPosition: this.props.panelPosition,
		isOpen: this.state.panelIsOpen,
		isFullscreen: this.state.panelIsFullscreen,
		fill: this.props.fill
		})));
		}
		}]);

		return DefaultSlidePanel;
		}(_react2.default.Component);
		}(_react.default.Component);

		DefaultSlidePanel.propTypes = {
		panelBehavior: _propTypes2.default.oneOf(['overlay', 'squish']),
		panelPosition: _propTypes2.default.oneOf(['start', 'end']),
		panelSize: _propTypes2.default.oneOf(['small', 'large']),
		isFullscreen: _propTypes2.default.bool,
		isOpen: _propTypes2.default.bool,
		fill: _propTypes2.default.bool
		panelBehavior: _propTypes.default.oneOf(['overlay', 'squish']),
		panelPosition: _propTypes.default.oneOf(['start', 'end']),
		panelSize: _propTypes.default.oneOf(['small', 'large']),
		isFullscreen: _propTypes.default.bool,
		isOpen: _propTypes.default.bool,
		fill: _propTypes.default.bool
		};

		exports.default = DefaultSlidePanel;
		var _default = DefaultSlidePanel;
		exports.default = _default;

lib/terra-dev-site/doc/slide-panel/ChangeLog.3.doc.js

		@@ -1,29 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _terraDocTemplate = _interopRequireDefault(require("terra-doc-template"));

		var _terraDocTemplate = require('terra-doc-template');
		var _CHANGELOG = _interopRequireDefault(require("../../../../CHANGELOG.md"));

		var _terraDocTemplate2 = _interopRequireDefault(_terraDocTemplate);

		var _CHANGELOG = require('../../../../CHANGELOG.md');

		var _CHANGELOG2 = _interopRequireDefault(_CHANGELOG);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var DocPage = function DocPage() {
		return _react2.default.createElement(_terraDocTemplate2.default, {
		packageName: 'terra-slide-panel',
		srcPath: 'https://github.com/cerner/terra-framework/tree/master/packages/terra-slide-panel',
		readme: _CHANGELOG2.default
		return _react.default.createElement(_terraDocTemplate.default, {
		packageName: "terra-slide-panel",
		srcPath: "https://github.com/cerner/terra-framework/tree/master/packages/terra-slide-panel",
		readme: _CHANGELOG.default
		});
		};

		exports.default = DocPage;
		var _default = DocPage;
		exports.default = _default;

162

lib/terra-dev-site/doc/slide-panel/SlidePanel.1.doc.js

		@@ -1,158 +0,113 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _terraDocTemplate = _interopRequireDefault(require("terra-doc-template"));

		var _terraDocTemplate = require('terra-doc-template');
		var _package = require("../../../../package.json");

		var _terraDocTemplate2 = _interopRequireDefault(_terraDocTemplate);
		var _README = _interopRequireDefault(require("../../../../docs/README.md"));

		var _package = require('../../../../package.json');
		var _SlidePanel = _interopRequireDefault(require("!raw-loader!../../../../src/SlidePanel"));

		var _README = require('../../../../docs/README.md');
		var _DefaultSlidePanel = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/doc/example/DefaultSlidePanel.jsx"));

		var _README2 = _interopRequireDefault(_README);
		var _SlidePanelOverlayTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelOverlay.test.jsx"));

		var _SlidePanel = require('!raw-loader!../../../../src/SlidePanel');
		var _SlidePanelSquishTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelSquish.test.jsx"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelStartTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelStart.test.jsx"));

		var _DefaultSlidePanel = require('!raw-loader!../../../../src/terra-dev-site/doc/example/DefaultSlidePanel.jsx');
		var _SlidePanelEndTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelEnd.test.jsx"));

		var _DefaultSlidePanel2 = _interopRequireDefault(_DefaultSlidePanel);
		var _SlidePanelSmallTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelSmall.test.jsx"));

		var _SlidePanelOverlayTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelOverlay.test.jsx');
		var _SlidePanelLargeTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelLarge.test.jsx"));

		var _SlidePanelOverlayTest2 = _interopRequireDefault(_SlidePanelOverlayTest);
		var _SlidePanelFullscreenTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelFullscreen.test.jsx"));

		var _SlidePanelSquishTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelSquish.test.jsx');
		var _SlidePanelFillTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelFill.test.jsx"));

		var _SlidePanelSquishTest2 = _interopRequireDefault(_SlidePanelSquishTest);
		var _SlidePanelNoFillTest = _interopRequireDefault(require("!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelNoFill.test.jsx"));

		var _SlidePanelStartTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelStart.test.jsx');
		var _DefaultSlidePanel2 = _interopRequireDefault(require("../example/DefaultSlidePanel"));

		var _SlidePanelStartTest2 = _interopRequireDefault(_SlidePanelStartTest);
		var _SlidePanelOverlay = _interopRequireDefault(require("../../test/slide-panel/SlidePanelOverlay.test"));

		var _SlidePanelEndTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelEnd.test.jsx');
		var _SlidePanelSquish = _interopRequireDefault(require("../../test/slide-panel/SlidePanelSquish.test"));

		var _SlidePanelEndTest2 = _interopRequireDefault(_SlidePanelEndTest);
		var _SlidePanelStart = _interopRequireDefault(require("../../test/slide-panel/SlidePanelStart.test"));

		var _SlidePanelSmallTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelSmall.test.jsx');
		var _SlidePanelEnd = _interopRequireDefault(require("../../test/slide-panel/SlidePanelEnd.test"));

		var _SlidePanelSmallTest2 = _interopRequireDefault(_SlidePanelSmallTest);
		var _SlidePanelSmall = _interopRequireDefault(require("../../test/slide-panel/SlidePanelSmall.test"));

		var _SlidePanelLargeTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelLarge.test.jsx');
		var _SlidePanelLarge = _interopRequireDefault(require("../../test/slide-panel/SlidePanelLarge.test"));

		var _SlidePanelLargeTest2 = _interopRequireDefault(_SlidePanelLargeTest);
		var _SlidePanelFullscreen = _interopRequireDefault(require("../../test/slide-panel/SlidePanelFullscreen.test"));

		var _SlidePanelFullscreenTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelFullscreen.test.jsx');
		var _SlidePanelFill = _interopRequireDefault(require("../../test/slide-panel/SlidePanelFill.test"));

		var _SlidePanelFullscreenTest2 = _interopRequireDefault(_SlidePanelFullscreenTest);
		var _SlidePanelNoFill = _interopRequireDefault(require("../../test/slide-panel/SlidePanelNoFill.test"));

		var _SlidePanelFillTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelFill.test.jsx');
		/* eslint-disable import/no-webpack-loader-syntax, import/first, import/extensions, import/no-unresolved, import/no-duplicates */
		// Component Source
		// Example Files

		var _SlidePanelFillTest2 = _interopRequireDefault(_SlidePanelFillTest);

		var _SlidePanelNoFillTest = require('!raw-loader!../../../../src/terra-dev-site/test/slide-panel/SlidePanelNoFill.test.jsx');

		var _SlidePanelNoFillTest2 = _interopRequireDefault(_SlidePanelNoFillTest);

		var _DefaultSlidePanel3 = require('../example/DefaultSlidePanel');

		var _DefaultSlidePanel4 = _interopRequireDefault(_DefaultSlidePanel3);

		var _SlidePanelOverlay = require('../../test/slide-panel/SlidePanelOverlay.test');

		var _SlidePanelOverlay2 = _interopRequireDefault(_SlidePanelOverlay);

		var _SlidePanelSquish = require('../../test/slide-panel/SlidePanelSquish.test');

		var _SlidePanelSquish2 = _interopRequireDefault(_SlidePanelSquish);

		var _SlidePanelStart = require('../../test/slide-panel/SlidePanelStart.test');

		var _SlidePanelStart2 = _interopRequireDefault(_SlidePanelStart);

		var _SlidePanelEnd = require('../../test/slide-panel/SlidePanelEnd.test');

		var _SlidePanelEnd2 = _interopRequireDefault(_SlidePanelEnd);

		var _SlidePanelSmall = require('../../test/slide-panel/SlidePanelSmall.test');

		var _SlidePanelSmall2 = _interopRequireDefault(_SlidePanelSmall);

		var _SlidePanelLarge = require('../../test/slide-panel/SlidePanelLarge.test');

		var _SlidePanelLarge2 = _interopRequireDefault(_SlidePanelLarge);

		var _SlidePanelFullscreen = require('../../test/slide-panel/SlidePanelFullscreen.test');

		var _SlidePanelFullscreen2 = _interopRequireDefault(_SlidePanelFullscreen);

		var _SlidePanelFill = require('../../test/slide-panel/SlidePanelFill.test');

		var _SlidePanelFill2 = _interopRequireDefault(_SlidePanelFill);

		var _SlidePanelNoFill = require('../../test/slide-panel/SlidePanelNoFill.test');

		var _SlidePanelNoFill2 = _interopRequireDefault(_SlidePanelNoFill);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/* eslint-enabled import/no-webpack-loader-syntax, import/first, import/extensions, import/no-unresolved, import/no-duplicates */

		// Example Files
		var DocPage = function DocPage() {
		return _react2.default.createElement(_terraDocTemplate2.default, {
		return _react.default.createElement(_terraDocTemplate.default, {
		packageName: _package.name,
		readme: _README2.default,
		srcPath: 'https://github.com/cerner/terra-framework/tree/master/packages/' + _package.name,
		readme: _README.default,
		srcPath: "https://github.com/cerner/terra-framework/tree/master/packages/".concat(_package.name),
		examples: [{
		title: 'SlidePanel - Controlled Demo',
		example: _react2.default.createElement(_DefaultSlidePanel4.default, null),
		source: _DefaultSlidePanel2.default
		example: _react.default.createElement(_DefaultSlidePanel2.default, null),
		source: _DefaultSlidePanel.default
		}, {
		title: 'SlidePanel - Behavior - Overlay',
		example: _react2.default.createElement(_SlidePanelOverlay2.default, null),
		source: _SlidePanelOverlayTest2.default
		example: _react.default.createElement(_SlidePanelOverlay.default, null),
		source: _SlidePanelOverlayTest.default
		}, {
		title: 'SlidePanel - Behavior - Squish',
		example: _react2.default.createElement(_SlidePanelSquish2.default, null),
		source: _SlidePanelSquishTest2.default
		example: _react.default.createElement(_SlidePanelSquish.default, null),
		source: _SlidePanelSquishTest.default
		}, {
		title: 'SlidePanel - Position - Start',
		example: _react2.default.createElement(_SlidePanelStart2.default, null),
		source: _SlidePanelStartTest2.default
		example: _react.default.createElement(_SlidePanelStart.default, null),
		source: _SlidePanelStartTest.default
		}, {
		title: 'SlidePanel - Position - End',
		example: _react2.default.createElement(_SlidePanelEnd2.default, null),
		source: _SlidePanelEndTest2.default
		example: _react.default.createElement(_SlidePanelEnd.default, null),
		source: _SlidePanelEndTest.default
		}, {
		title: 'SlidePanel - Size - Small',
		example: _react2.default.createElement(_SlidePanelSmall2.default, null),
		source: _SlidePanelSmallTest2.default
		example: _react.default.createElement(_SlidePanelSmall.default, null),
		source: _SlidePanelSmallTest.default
		}, {
		title: 'SlidePanel - Size - Large',
		example: _react2.default.createElement(_SlidePanelLarge2.default, null),
		source: _SlidePanelLargeTest2.default
		example: _react.default.createElement(_SlidePanelLarge.default, null),
		source: _SlidePanelLargeTest.default
		}, {
		title: 'SlidePanel - Fullscreen',
		example: _react2.default.createElement(_SlidePanelFullscreen2.default, null),
		source: _SlidePanelFullscreenTest2.default
		example: _react.default.createElement(_SlidePanelFullscreen.default, null),
		source: _SlidePanelFullscreenTest.default
		}, {
		title: 'SlidePanel - Fill',
		example: _react2.default.createElement(_SlidePanelFill2.default, null),
		source: _SlidePanelFillTest2.default
		example: _react.default.createElement(_SlidePanelFill.default, null),
		source: _SlidePanelFillTest.default
		}, {
		title: 'SlidePanel - Fill Off',
		example: _react2.default.createElement(_SlidePanelNoFill2.default, null),
		source: _SlidePanelNoFillTest2.default
		example: _react.default.createElement(_SlidePanelNoFill.default, null),
		source: _SlidePanelNoFillTest.default
		}],
		propsTables: [{
		componentSrc: _SlidePanel2.default
		componentSrc: _SlidePanel.default
		}]
		@@ -162,4 +117,3 @@ });

		/* eslint-disable import/no-webpack-loader-syntax, import/first, import/extensions, import/no-unresolved, import/no-duplicates */
		// Component Source
		exports.default = DocPage;
		var _default = DocPage;
		exports.default = _default;

lib/terra-dev-site/doc/slide-panel/UpgradeGuide.2.doc.js

		@@ -1,32 +0,28 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _terraDocTemplate = _interopRequireDefault(require("terra-doc-template"));

		var _terraDocTemplate = require('terra-doc-template');
		var _UpgradeGuide = _interopRequireDefault(require("../../../../docs/UpgradeGuide.md"));

		var _terraDocTemplate2 = _interopRequireDefault(_terraDocTemplate);
		var _package = require("../../../../package.json");

		var _UpgradeGuide = require('../../../../docs/UpgradeGuide.md');

		var _UpgradeGuide2 = _interopRequireDefault(_UpgradeGuide);

		var _package = require('../../../../package.json');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/* eslint-disable import/no-webpack-loader-syntax, import/first, import/extensions */
		var DocPage = function DocPage() {
		return _react2.default.createElement(_terraDocTemplate2.default, {
		return _react.default.createElement(_terraDocTemplate.default, {
		packageName: _package.name,
		srcPath: 'https://github.com/cerner/terra-framework/tree/master/packages/' + _package.name,
		readme: _UpgradeGuide2.default
		srcPath: "https://github.com/cerner/terra-framework/tree/master/packages/".concat(_package.name),
		readme: _UpgradeGuide.default
		});
		};

		exports.default = DocPage;
		var _default = DocPage;
		exports.default = _default;

113

lib/terra-dev-site/test/common/SlidePanelMainContent.js

		@@ -1,114 +0,17 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelMainContent = function SlidePanelMainContent() {
		return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(
		'h3',
		null,
		'Main Content'
		),
		_react2.default.createElement(
		'p',
		null,
		'Lorem ipsum dolor sit amet, mea te odio ludus adipiscing. Cu oporteat temporibus nam, aperiam adipisci mel et, mei no oportere salutatus. Iudico lucilius ei pri. Eleifend philosophia et ius.'
		),
		_react2.default.createElement(
		'p',
		null,
		'Id elit congue copiosae eam, elitr laboramus mediocritatem nam in, decore propriae et usu. An vix insolens dignissim, novum gloriatur delicatissimi mei ne, ne ancillae tincidunt nec. Iusto expetenda scriptorem mei cu, ne per prima nihil utinam. Cibo ocurreret no nam, nec euismod vivendum te.'
		),
		_react2.default.createElement(
		'ul',
		null,
		_react2.default.createElement(
		'li',
		null,
		'Item 1'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 2'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 3'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 4'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 5'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 6'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 7'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 8'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 9'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 10'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 11'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 12'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 13'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 14'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 15'
		)
		)
		);
		return _react.default.createElement("div", null, _react.default.createElement("h3", null, "Main Content"), _react.default.createElement("p", null, "Lorem ipsum dolor sit amet, mea te odio ludus adipiscing. Cu oporteat temporibus nam, aperiam adipisci mel et, mei no oportere salutatus. Iudico lucilius ei pri. Eleifend philosophia et ius."), _react.default.createElement("p", null, "Id elit congue copiosae eam, elitr laboramus mediocritatem nam in, decore propriae et usu. An vix insolens dignissim, novum gloriatur delicatissimi mei ne, ne ancillae tincidunt nec. Iusto expetenda scriptorem mei cu, ne per prima nihil utinam. Cibo ocurreret no nam, nec euismod vivendum te."), _react.default.createElement("ul", null, _react.default.createElement("li", null, "Item 1"), _react.default.createElement("li", null, "Item 2"), _react.default.createElement("li", null, "Item 3"), _react.default.createElement("li", null, "Item 4"), _react.default.createElement("li", null, "Item 5"), _react.default.createElement("li", null, "Item 6"), _react.default.createElement("li", null, "Item 7"), _react.default.createElement("li", null, "Item 8"), _react.default.createElement("li", null, "Item 9"), _react.default.createElement("li", null, "Item 10"), _react.default.createElement("li", null, "Item 11"), _react.default.createElement("li", null, "Item 12"), _react.default.createElement("li", null, "Item 13"), _react.default.createElement("li", null, "Item 14"), _react.default.createElement("li", null, "Item 15")));
		};

		exports.default = SlidePanelMainContent;
		var _default = SlidePanelMainContent;
		exports.default = _default;

113

lib/terra-dev-site/test/common/SlidePanelPanelContent.js

		@@ -1,114 +0,17 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelPanelContent = function SlidePanelPanelContent() {
		return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(
		'h3',
		null,
		'Panel Content'
		),
		_react2.default.createElement(
		'p',
		null,
		'Lorem ipsum dolor sit amet, mea te odio ludus adipiscing. Cu oporteat temporibus nam, aperiam adipisci mel et, mei no oportere salutatus. Iudico lucilius ei pri. Eleifend philosophia et ius.'
		),
		_react2.default.createElement(
		'p',
		null,
		'Id elit congue copiosae eam, elitr laboramus mediocritatem nam in, decore propriae et usu. An vix insolens dignissim, novum gloriatur delicatissimi mei ne, ne ancillae tincidunt nec. Iusto expetenda scriptorem mei cu, ne per prima nihil utinam. Cibo ocurreret no nam, nec euismod vivendum te.'
		),
		_react2.default.createElement(
		'ul',
		null,
		_react2.default.createElement(
		'li',
		null,
		'Item 1'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 2'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 3'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 4'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 5'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 6'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 7'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 8'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 9'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 10'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 11'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 12'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 13'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 14'
		),
		_react2.default.createElement(
		'li',
		null,
		'Item 15'
		)
		)
		);
		return _react.default.createElement("div", null, _react.default.createElement("h3", null, "Panel Content"), _react.default.createElement("p", null, "Lorem ipsum dolor sit amet, mea te odio ludus adipiscing. Cu oporteat temporibus nam, aperiam adipisci mel et, mei no oportere salutatus. Iudico lucilius ei pri. Eleifend philosophia et ius."), _react.default.createElement("p", null, "Id elit congue copiosae eam, elitr laboramus mediocritatem nam in, decore propriae et usu. An vix insolens dignissim, novum gloriatur delicatissimi mei ne, ne ancillae tincidunt nec. Iusto expetenda scriptorem mei cu, ne per prima nihil utinam. Cibo ocurreret no nam, nec euismod vivendum te."), _react.default.createElement("ul", null, _react.default.createElement("li", null, "Item 1"), _react.default.createElement("li", null, "Item 2"), _react.default.createElement("li", null, "Item 3"), _react.default.createElement("li", null, "Item 4"), _react.default.createElement("li", null, "Item 5"), _react.default.createElement("li", null, "Item 6"), _react.default.createElement("li", null, "Item 7"), _react.default.createElement("li", null, "Item 8"), _react.default.createElement("li", null, "Item 9"), _react.default.createElement("li", null, "Item 10"), _react.default.createElement("li", null, "Item 11"), _react.default.createElement("li", null, "Item 12"), _react.default.createElement("li", null, "Item 13"), _react.default.createElement("li", null, "Item 14"), _react.default.createElement("li", null, "Item 15")));
		};

		exports.default = SlidePanelPanelContent;
		var _default = SlidePanelPanelContent;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelEnd.test.js

		@@ -1,32 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelEnd = function SlidePanelEnd() {
		return _react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'overlay',
		panelPosition: 'end',
		panelSize: 'small',
		return _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "overlay",
		panelPosition: "end",
		panelSize: "small",
		isOpen: true
		@@ -36,2 +29,3 @@ });

		exports.default = SlidePanelEnd;
		var _default = SlidePanelEnd;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelFill.test.js

		@@ -1,41 +0,36 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelFill = function SlidePanelFill() {
		return _react2.default.createElement(
		'div',
		{ style: { height: '200px', overflow: 'auto' } },
		_react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'squish',
		panelPosition: 'end',
		panelSize: 'small',
		isOpen: true,
		fill: true
		})
		);
		return _react.default.createElement("div", {
		style: {
		height: '200px',
		overflow: 'auto'
		}
		}, _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "squish",
		panelPosition: "end",
		panelSize: "small",
		isOpen: true,
		fill: true
		}));
		};

		exports.default = SlidePanelFill;
		var _default = SlidePanelFill;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelFullscreen.test.js

		@@ -1,32 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelFullscreen = function SlidePanelFullscreen() {
		return _react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'overlay',
		panelPosition: 'end',
		panelSize: 'small',
		return _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "overlay",
		panelPosition: "end",
		panelSize: "small",
		isOpen: true,
		@@ -37,2 +30,3 @@ isFullscreen: true

		exports.default = SlidePanelFullscreen;
		var _default = SlidePanelFullscreen;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelLarge.test.js

		@@ -1,32 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelLarge = function SlidePanelLarge() {
		return _react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'overlay',
		panelPosition: 'end',
		panelSize: 'large',
		return _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "overlay",
		panelPosition: "end",
		panelSize: "large",
		isOpen: true
		@@ -36,2 +29,3 @@ });

		exports.default = SlidePanelLarge;
		var _default = SlidePanelLarge;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelNoFill.test.js

		@@ -1,40 +0,35 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelNoFill = function SlidePanelNoFill() {
		return _react2.default.createElement(
		'div',
		{ style: { height: '200px', overflow: 'auto' } },
		_react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'squish',
		panelPosition: 'end',
		panelSize: 'small',
		isOpen: true
		})
		);
		return _react.default.createElement("div", {
		style: {
		height: '200px',
		overflow: 'auto'
		}
		}, _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "squish",
		panelPosition: "end",
		panelSize: "small",
		isOpen: true
		}));
		};

		exports.default = SlidePanelNoFill;
		var _default = SlidePanelNoFill;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelOverlay.test.js

		@@ -1,32 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelOverlay = function SlidePanelOverlay() {
		return _react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'overlay',
		panelPosition: 'end',
		panelSize: 'small',
		return _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "overlay",
		panelPosition: "end",
		panelSize: "small",
		isOpen: true
		@@ -36,2 +29,3 @@ });

		exports.default = SlidePanelOverlay;
		var _default = SlidePanelOverlay;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelSmall.test.js

		@@ -1,32 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelSmall = function SlidePanelSmall() {
		return _react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'overlay',
		panelPosition: 'end',
		panelSize: 'small',
		return _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "overlay",
		panelPosition: "end",
		panelSize: "small",
		isOpen: true
		@@ -36,2 +29,3 @@ });

		exports.default = SlidePanelSmall;
		var _default = SlidePanelSmall;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelSquish.test.js

		@@ -1,32 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelSquish = function SlidePanelSquish() {
		return _react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'squish',
		panelPosition: 'end',
		panelSize: 'small',
		return _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "squish",
		panelPosition: "end",
		panelSize: "small",
		isOpen: true
		@@ -36,2 +29,3 @@ });

		exports.default = SlidePanelSquish;
		var _default = SlidePanelSquish;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelSquishLarge.test.js

		@@ -1,32 +0,42 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelSquishLarge = function SlidePanelSquishLarge() {
		return _react2.default.createElement(
		'div',
		{ style: { height: '100vh' } },
		_react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement('div', { style: { height: '100%', width: '100%', backgroundColor: 'red' } }),
		panelContent: _react2.default.createElement('div', { style: { height: '100%', width: '100%', backgroundColor: 'blue' } }),
		panelBehavior: 'squish',
		panelSize: 'large',
		isOpen: true,
		fill: true
		})
		);
		return _react.default.createElement("div", {
		style: {
		height: '100vh'
		}
		}, _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement("div", {
		style: {
		height: '100%',
		width: '100%',
		backgroundColor: 'red'
		}
		}),
		panelContent: _react.default.createElement("div", {
		style: {
		height: '100%',
		width: '100%',
		backgroundColor: 'blue'
		}
		}),
		panelBehavior: "squish",
		panelSize: "large",
		isOpen: true,
		fill: true
		}));
		};

		exports.default = SlidePanelSquishLarge;
		var _default = SlidePanelSquishLarge;
		exports.default = _default;

lib/terra-dev-site/test/slide-panel/SlidePanelStart.test.js

		@@ -1,32 +0,25 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _react = require('react');
		var _react = _interopRequireDefault(require("react"));

		var _react2 = _interopRequireDefault(_react);
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		var _SlidePanel = require('../../../SlidePanel');
		var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _SlidePanelPanelContent = _interopRequireDefault(require("../common/SlidePanelPanelContent"));

		var _SlidePanelMainContent = require('../common/SlidePanelMainContent');

		var _SlidePanelMainContent2 = _interopRequireDefault(_SlidePanelMainContent);

		var _SlidePanelPanelContent = require('../common/SlidePanelPanelContent');

		var _SlidePanelPanelContent2 = _interopRequireDefault(_SlidePanelPanelContent);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var SlidePanelStart = function SlidePanelStart() {
		return _react2.default.createElement(_SlidePanel2.default, {
		mainContent: _react2.default.createElement(_SlidePanelMainContent2.default, null),
		panelContent: _react2.default.createElement(_SlidePanelPanelContent2.default, null),
		panelBehavior: 'overlay',
		panelPosition: 'start',
		panelSize: 'small',
		return _react.default.createElement(_SlidePanel.default, {
		mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
		panelContent: _react.default.createElement(_SlidePanelPanelContent.default, null),
		panelBehavior: "overlay",
		panelPosition: "start",
		panelSize: "small",
		isOpen: true
		@@ -36,2 +29,3 @@ });

		exports.default = SlidePanelStart;
		var _default = SlidePanelStart;
		exports.default = _default;

130

lib/terra-dev-site/test/slide-panel/SlidePanelToggle.test.js

		@@ -1,86 +0,104 @@
		'use strict';
		"use strict";

		var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.default = void 0;

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
		var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

		var _react = require('react');
		var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

		var _react2 = _interopRequireDefault(_react);
		var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

		var _SlidePanel = require('../../../SlidePanel');
		var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

		var _SlidePanel2 = _interopRequireDefault(_SlidePanel);
		var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
		var _react = _interopRequireDefault(require("react"));

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }
		var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
		var SlidePanelDemo =
		/#__PURE__/
		function (_React$Component) {
		(0, _inherits2.default)(SlidePanelDemo, _React$Component);

		var SlidePanelDemo = function (_React$Component) {
		_inherits(SlidePanelDemo, _React$Component);

		function SlidePanelDemo(props) {
		_classCallCheck(this, SlidePanelDemo);
		var _this;

		var _this = _possibleConstructorReturn(this, (SlidePanelDemo.__proto__ \|\| Object.getPrototypeOf(SlidePanelDemo)).call(this, props));

		_this.state = { panelIsOpen: false };
		_this.handlePanelToggle = _this.handlePanelToggle.bind(_this);
		(0, _classCallCheck2.default)(this, SlidePanelDemo);
		_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(SlidePanelDemo).call(this, props));
		_this.state = {
		panelIsOpen: false
		};
		_this.handlePanelToggle = _this.handlePanelToggle.bind((0, _assertThisInitialized2.default)(_this));
		return _this;
		}

		_createClass(SlidePanelDemo, [{
		key: 'handlePanelToggle',
		(0, _createClass2.default)(SlidePanelDemo, [{
		key: "handlePanelToggle",
		value: function handlePanelToggle() {
		this.setState(function (prevState) {
		return { panelIsOpen: !prevState.panelIsOpen };
		return {
		panelIsOpen: !prevState.panelIsOpen
		};
		});
		}
		}, {
		key: 'render',
		key: "render",
		value: function render() {
		return _react2.default.createElement(
		'div',
		{ style: {
		border: '1px lightgrey solid', height: '768px', width: '100%', position: 'relative'
		return _react.default.createElement("div", {
		style: {
		border: '1px lightgrey solid',
		height: '768px',
		width: '100%',
		position: 'relative'
		}
		}, _react.default.createElement(_SlidePanel.default, {
		id: "test-slide",
		mainContent: _react.default.createElement("div", {
		style: {
		height: '100%',
		width: '100%',
		backgroundColor: 'red'
		}
		},
		_react2.default.createElement(_SlidePanel2.default, {
		id: 'test-slide',
		mainContent: _react2.default.createElement(
		'div',
		{ style: { height: '100%', width: '100%', backgroundColor: 'red' } },
		_react2.default.createElement(
		'button',
		{ type: 'button', id: 'test-toggle', style: { backgroundColor: 'green' }, onClick: this.handlePanelToggle },
		'toggle'
		)
		),
		panelContent: _react2.default.createElement(
		'div',
		{ id: 'panel-content', style: { height: '100%', width: '100%', backgroundColor: 'blue' } },
		_react2.default.createElement(
		'button',
		{ id: 'focus-button', type: 'button', style: { backgroundColor: 'green' }, onClick: this.handlePanelToggle },
		'Close panel'
		)
		),
		panelSize: 'small',
		panelBehavior: 'overlay',
		isOpen: this.state.panelIsOpen,
		fill: true
		})
		);
		}, _react.default.createElement("button", {
		type: "button",
		id: "test-toggle",
		style: {
		backgroundColor: 'green'
		},
		onClick: this.handlePanelToggle
		}, "toggle")),
		panelContent: _react.default.createElement("div", {
		id: "panel-content",
		style: {
		height: '100%',
		width: '100%',
		backgroundColor: 'blue'
		}
		}, _react.default.createElement("button", {
		id: "focus-button",
		type: "button",
		style: {
		backgroundColor: 'green'
		},
		onClick: this.handlePanelToggle
		}, "Close panel")),
		panelSize: "small",
		panelBehavior: "overlay",
		isOpen: this.state.panelIsOpen,
		fill: true
		}));
		}
		}]);

		return SlidePanelDemo;
		}(_react2.default.Component);
		}(_react.default.Component);

		exports.default = SlidePanelDemo;
		var _default = SlidePanelDemo;
		exports.default = _default;

package.json

		{
		"name": "terra-slide-panel",
		"main": "lib/SlidePanel.js",
		"version": "3.5.0",
		"version": "3.6.0",
		"description": "The Terra SlidePanel component is a progressive disclosure mechanism that allows additional content to be shown and hidden in a variety of ways.",
		@@ -36,12 +36,12 @@ "repository": {
		"scripts": {
		"compile": "npm run compile:clean && npm run compile:build",
		"compile:clean": "rm -rf lib",
		"compile:build": "babel src --out-dir lib --copy-files",
		"compile": "babel --root-mode upward src --out-dir lib --copy-files",
		"lint": "npm run lint:js && npm run lint:scss",
		"lint:js": "eslint --ext .js,.jsx . --ignore-path ../../.eslintignore",
		"lint:scss": "stylelint src/*/.scss",
		"precompile": "rm -rf lib",
		"test": "npm run test:jest && npm run test:wdio",
		"test:jest": "jest --config ../../jestconfig.js",
		"test:wdio": "../../node_modules/.bin/wdio ../../node_modules/terra-dev-site/config/wdio/wdio.conf.js"
		}
		},
		"gitHead": "55d4739caab6f5a19edb8daaabd83dd2579851de"
		}

README.md

		@@ -5,3 +5,3 @@ # Terra Slide Panel
		[![NPM version](https://badgen.net/npm/v/terra-slide-panel)](https://www.npmjs.org/package/terra-slide-panel)
		[![Build Status](https://badgen.net/travis/cerner/terra-framework)](https://travis-ci.org/cerner/terra-framework)
		[![Build Status](https://badgen.net/travis/cerner/terra-framework)](https://travis-ci.com/cerner/terra-framework)

		@@ -8,0 +8,0 @@ The Terra SlidePanel component is a progressive disclosure mechanism that allows additional content to be shown and hidden in a variety of ways.

tests/wdio/slide-panel-spec.js

		@@ -8,4 +8,4 @@ const context = '[data-terra-dev-site-content] *:first-child';
		beforeEach(() => browser.url('/#/raw/tests/terra-slide-panel/slide-panel/slide-panel-end'));
		Terra.should.beAccessible({ context });
		Terra.should.matchScreenshot();
		Terra.it.isAccessible({ context });
		Terra.it.matchesScreenshot();
		});
		@@ -18,3 +18,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -27,3 +27,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -36,3 +36,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -45,3 +45,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -54,3 +54,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -63,3 +63,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -72,3 +72,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -81,3 +81,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -91,3 +91,3 @@

		Terra.should.matchScreenshot();
		Terra.it.matchesScreenshot();
		});
		@@ -102,7 +102,7 @@

		Terra.should.matchScreenshot({ selector: '#root' });
		Terra.it.matchesScreenshot({ selector: '#root' });
		});

		describe('Toggle the slide panel click', () => {
		beforeEach(() => {
		it('Opens panel and focuses on panel', () => {
		browser.url('/#/raw/tests/terra-slide-panel/slide-panel/slide-panel-toggle');
		@@ -112,28 +112,11 @@ browser.click('#test-toggle');
		browser.pause(150);
		});

		it('Opens panel and focuses on panel', () => {
		browser.hasFocus('#panel-content');
		});

		it('On Tab Press focuses on the button inside the panel', () => {
		// On Tab Press focuses on the button inside the panel
		browser.keys(['Tab']);
		browser.hasFocus('#focus-button');
		});

		Terra.should.matchScreenshot({ selector: '#root' });
		});

		describe('Slide panel theming', () => {
		beforeEach(() => browser.url('/#/raw/tests/terra-slide-panel/slide-panel/slide-panel-end'));

		Terra.should.themeEachCustomProperty({
		'--terra-slide-panel-panel-small-width': '420px',
		'--terra-slide-panel-panel-width-large-scalar': '0.8',
		'--terra-slide-panel-panel-overlay-position-start-box-shadow': '1px 0 5px 0 orange',
		'--terra-slide-panel-panel-overlay-position-end-box-shadow': '-1px 0 5px 0 orange',
		'--terra-slide-panel-panel-squish-border-left-color': 'blue',
		'--terra-slide-panel-panel-squish-border-right-color': 'blue',
		Terra.validates.screenshot({ selector: '#root' });
		});
		});
		});

terra-slide-panel - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics