terra-slide-panel - npm Package Compare versions

Comparing version 3.6.0 to 3.7.0

CHANGELOG.md

@@ -7,2 +7,10 @@ Changelog
 
+3.7.0 - (June 19, 2019)
+------------------
+### Removed
+* Removed '-ms-overflow-style' style
+
+### Fixed
+* Corrected to allow Slide Panel's DOM order to flex based on the 'panelPosition' prop.
+
 3.6.0 - (June 12, 2019)
@@ -14,3 +22,7 @@ ------------------
 ### Changed
+* Removed all inline styles and implemented the same styles using external css.
+
+### Changed
 * Update tests for terra-toolkit v5 and terra-dev-site v5 changes
+* Update wdio specs to use Terra.describeViewports
 
@@ -17,0 +29,0 @@ 3.5.0 - (April 24, 2019)

lib/SlidePanel.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.SlidePanelPositions = exports.default = void 0;
 
@@ -37,2 +37,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var SlidePanelPositions = {
+  START: 'start',
+  END: 'end'
+};
+exports.SlidePanelPositions = SlidePanelPositions;
 var propTypes = {
@@ -81,3 +86,3 @@ /**
   panelBehavior: 'overlay',
-  panelPosition: 'end',
+  panelPosition: SlidePanelPositions.END,
   panelSize: 'small'
@@ -135,2 +140,17 @@ };
       }, customProps.className]);
+
+      var panelDiv = _react.default.createElement("div", {
+        className: cx(['panel']),
+        tabIndex: "-1",
+        "aria-hidden": !isOpen ? 'true' : 'false',
+        ref: this.setPanelNode
+      }, panelContent);
+
+      var mainDiv = _react.default.createElement("div", {
+        className: cx('main'),
+        tabIndex: "-1",
+        ref: this.mainNode
+      }, mainContent);
+
+      var content = panelPosition === SlidePanelPositions.START ? _react.default.createElement(_react.default.Fragment, null, panelDiv, mainDiv) : _react.default.createElement(_react.default.Fragment, null, mainDiv, panelDiv);
       return _react.default.createElement("div", (0, _extends2.default)({}, customProps, {
@@ -141,12 +161,3 @@ className: slidePanelClassNames,
         "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));
+      }), content);
     }
@@ -153,0 +164,0 @@ }]);

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

@@ -28,25 +28,19 @@ "use strict";
 
+var _bind = _interopRequireDefault(require("classnames/bind"));
+
+var _DefaultSlidePanel = _interopRequireDefault(require("./DefaultSlidePanel.scss"));
+
 // eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+var cx = _bind.default.bind(_DefaultSlidePanel.default);
+
 var mainContentForSlidePanel = function mainContentForSlidePanel(togglePanelHandler) {
   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", {
+    className: cx('header-content')
+  }, _react.default.createElement("h3", null, "Main Content"), _react.default.createElement("button", {
     id: "mainToggleBtn",
     type: "button",
     onClick: togglePanelHandler,
-    style: {
-      display: 'inline-block'
-    }
+    className: cx('custom-button')
   }, "Main Toggle Panel")), _react.default.createElement("div", {
-    style: {
-      margin: '5px'
-    }
+    className: cx('content-wrapper')
   }, _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", {
@@ -59,11 +53,5 @@ href: "https://github.com/cerner/terra-framework/blob/master/packages/terra-slide-panel/src/terra-dev-site/doc/example/DefaultSlidePanel.jsx"
   return _react.default.createElement("div", null, _react.default.createElement("header", {
-    style: {
-      backgroundColor: 'lightgrey'
-    }
+    className: cx('header-content')
   }, _react.default.createElement("h3", {
-    style: {
-      margin: '0px',
-      padding: '5px',
-      display: 'inline-block'
-    }
+    className: cx('heading')
   }, "Panel Content"), _react.default.createElement("button", {
@@ -73,15 +61,9 @@ id: "panelToggleBtn",
     onClick: togglePanelHandler,
-    style: {
-      display: 'inline-block'
-    }
+    className: cx('extension-button')
   }, "Panel Toggle Panel"), _react.default.createElement("button", {
     type: "button",
     onClick: toggleFullscreenHandler,
-    style: {
-      display: 'inline-block'
-    }
+    className: cx('extension-button')
   }, "Toggle Fullscreen")), _react.default.createElement("div", {
-    style: {
-      margin: '5px'
-    }
+    className: cx('content-wrapper')
   }, _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", {
@@ -142,12 +124,7 @@ href: "https://github.com/cerner/terra-framework/blob/master/packages/terra-slide-panel/src/terra-dev-site/doc/example/DefaultSlidePanel.jsx"
     value: function render() {
-      var containerAttributes = {
-        style: {
-          border: '1px lightgrey solid'
-        }
-      };
       return _react.default.createElement("div", {
-        style: {
-          padding: '5px'
-        }
-      }, _react.default.createElement("div", containerAttributes, _react.default.createElement(_SlidePanel.default, {
+        className: cx('container')
+      }, _react.default.createElement("div", {
+        className: cx('container-attributes')
+      }, _react.default.createElement(_SlidePanel.default, {
         mainContent: mainContentForSlidePanel(this.handlePanelToggle),
@@ -154,0 +131,0 @@ panelContent: panelContentForSlidePanel(this.handlePanelToggle, this.handleFullscreenToggle),

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,3 +14,3 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
 
@@ -24,3 +26,3 @@ var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
     panelBehavior: "overlay",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "small",
@@ -27,0 +29,0 @@ isOpen: true

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,4 +14,6 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _bind = _interopRequireDefault(require("classnames/bind"));
 
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
+
 var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
@@ -19,8 +23,9 @@
 
+var _SlidePanelDocCommonTest = _interopRequireDefault(require("./SlidePanelDocCommon.test.scss"));
+
+var cx = _bind.default.bind(_SlidePanelDocCommonTest.default);
+
 var SlidePanelFill = function SlidePanelFill() {
   return _react.default.createElement("div", {
-    style: {
-      height: '200px',
-      overflow: 'auto'
-    }
+    className: cx('content-wrapper')
   }, _react.default.createElement(_SlidePanel.default, {
@@ -30,3 +35,3 @@ mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
     panelBehavior: "squish",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "small",
@@ -33,0 +38,0 @@ isOpen: true,

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,3 +14,3 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
 
@@ -24,3 +26,3 @@ var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
     panelBehavior: "overlay",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "small",
@@ -27,0 +29,0 @@ isOpen: true,

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,3 +14,3 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
 
@@ -24,3 +26,3 @@ var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
     panelBehavior: "overlay",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "large",
@@ -27,0 +29,0 @@ isOpen: true

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,4 +14,6 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _bind = _interopRequireDefault(require("classnames/bind"));
 
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
+
 var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
@@ -19,8 +23,9 @@
 
+var _SlidePanelDocCommonTest = _interopRequireDefault(require("./SlidePanelDocCommon.test.scss"));
+
+var cx = _bind.default.bind(_SlidePanelDocCommonTest.default);
+
 var SlidePanelNoFill = function SlidePanelNoFill() {
   return _react.default.createElement("div", {
-    style: {
-      height: '200px',
-      overflow: 'auto'
-    }
+    className: cx('content-wrapper')
   }, _react.default.createElement(_SlidePanel.default, {
@@ -30,3 +35,3 @@ mainContent: _react.default.createElement(_SlidePanelMainContent.default, null),
     panelBehavior: "squish",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "small",
@@ -33,0 +38,0 @@ isOpen: true

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,3 +14,3 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
 
@@ -24,3 +26,3 @@ var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
     panelBehavior: "overlay",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "small",
@@ -27,0 +29,0 @@ isOpen: true

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,3 +14,3 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
 
@@ -24,3 +26,3 @@ var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
     panelBehavior: "overlay",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "small",
@@ -27,0 +29,0 @@ isOpen: true

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,3 +14,3 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
 
@@ -24,3 +26,3 @@ var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
     panelBehavior: "squish",
-    panelPosition: "end",
+    panelPosition: _SlidePanel.SlidePanelPositions.END,
     panelSize: "small",
@@ -27,0 +29,0 @@ isOpen: true

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

@@ -12,23 +12,19 @@ "use strict";
 
+var _bind = _interopRequireDefault(require("classnames/bind"));
+
 var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
 
+var _SlidePanelDocCommonTest = _interopRequireDefault(require("./SlidePanelDocCommon.test.scss"));
+
+var cx = _bind.default.bind(_SlidePanelDocCommonTest.default);
+
 var SlidePanelSquishLarge = function SlidePanelSquishLarge() {
   return _react.default.createElement("div", {
-    style: {
-      height: '100vh'
-    }
+    className: cx('content-wrapper-large')
   }, _react.default.createElement(_SlidePanel.default, {
     mainContent: _react.default.createElement("div", {
-      style: {
-        height: '100%',
-        width: '100%',
-        backgroundColor: 'red'
-      }
+      className: cx('main-content')
     }),
     panelContent: _react.default.createElement("div", {
-      style: {
-        height: '100%',
-        width: '100%',
-        backgroundColor: 'blue'
-      }
+      className: cx('panel-content')
     }),
@@ -35,0 +31,0 @@ panelBehavior: "squish",

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

 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,3 +14,3 @@
 
-var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
+var _SlidePanel = _interopRequireWildcard(require("../../../SlidePanel"));
 
@@ -24,3 +26,3 @@ var _SlidePanelMainContent = _interopRequireDefault(require("../common/SlidePanelMainContent"));
     panelBehavior: "overlay",
-    panelPosition: "start",
+    panelPosition: _SlidePanel.SlidePanelPositions.START,
     panelSize: "small",
@@ -27,0 +29,0 @@ isOpen: true

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

@@ -24,4 +24,10 @@ "use strict";
 
+var _bind = _interopRequireDefault(require("classnames/bind"));
+
 var _SlidePanel = _interopRequireDefault(require("../../../SlidePanel"));
 
+var _SlidePanelDocCommonTest = _interopRequireDefault(require("./SlidePanelDocCommon.test.scss"));
+
+var cx = _bind.default.bind(_SlidePanelDocCommonTest.default);
+
 var SlidePanelDemo =
@@ -57,22 +63,11 @@ /*#__PURE__*/
       return _react.default.createElement("div", {
-        style: {
-          border: '1px lightgrey solid',
-          height: '768px',
-          width: '100%',
-          position: 'relative'
-        }
+        className: cx('content-wrapper-toggle')
       }, _react.default.createElement(_SlidePanel.default, {
         id: "test-slide",
         mainContent: _react.default.createElement("div", {
-          style: {
-            height: '100%',
-            width: '100%',
-            backgroundColor: 'red'
-          }
+          className: cx('main-content')
         }, _react.default.createElement("button", {
           type: "button",
           id: "test-toggle",
-          style: {
-            backgroundColor: 'green'
-          },
+          className: cx('button'),
           onClick: this.handlePanelToggle
@@ -82,13 +77,7 @@ }, "toggle")),
           id: "panel-content",
-          style: {
-            height: '100%',
-            width: '100%',
-            backgroundColor: 'blue'
-          }
+          className: cx('panel-content')
         }, _react.default.createElement("button", {
           id: "focus-button",
           type: "button",
-          style: {
-            backgroundColor: 'green'
-          },
+          className: cx('button'),
           onClick: this.handlePanelToggle
@@ -95,0 +84,0 @@ }, "Close panel")),

package.json

 {
   "name": "terra-slide-panel",
   "main": "lib/SlidePanel.js",
-  "version": "3.6.0",
+  "version": "3.7.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.",
@@ -44,4 +44,3 @@ "repository": {
     "test:wdio": "../../node_modules/.bin/wdio ../../node_modules/terra-dev-site/config/wdio/wdio.conf.js"
-  },
-  "gitHead": "55d4739caab6f5a19edb8daaabd83dd2579851de"
+  }
 }

src/SlidePanel.jsx

@@ -8,2 +8,7 @@ import React from 'react';
 
+const SlidePanelPositions = {
+  START: 'start',
+  END: 'end',
+};
+
 const propTypes = {
@@ -53,3 +58,3 @@ /**
   panelBehavior: 'overlay',
-  panelPosition: 'end',
+  panelPosition: SlidePanelPositions.END,
   panelSize: 'small',
@@ -97,2 +102,26 @@ };
 
+    const panelDiv = (
+      <div className={cx(['panel'])} tabIndex="-1" aria-hidden={!isOpen ? 'true' : 'false'} ref={this.setPanelNode}>
+        {panelContent}
+      </div>
+    );
+
+    const mainDiv = (
+      <div className={cx('main')} tabIndex="-1" ref={this.mainNode}>
+        {mainContent}
+      </div>
+    );
+
+    const content = (panelPosition === SlidePanelPositions.START) ? (
+      <React.Fragment>
+        {panelDiv}
+        {mainDiv}
+      </React.Fragment>
+    ) : (
+      <React.Fragment>
+        {mainDiv}
+        {panelDiv}
+      </React.Fragment>
+    );
+
     return (
@@ -106,8 +135,3 @@ <div
       >
-        <div className={cx('main')} tabIndex="-1" ref={this.mainNode}>
-          {mainContent}
-        </div>
-        <div className={cx(['panel'])} tabIndex="-1" aria-hidden={!isOpen ? 'true' : 'false'} ref={this.setPanelNode}>
-          {panelContent}
-        </div>
+        {content}
       </div>
@@ -123,1 +147,2 @@ );
 export default SlidePanel;
+export { SlidePanelPositions };

src/terra-dev-site/doc/example/DefaultSlidePanel.jsx

@@ -5,10 +5,14 @@ import React from 'react';
 import SlidePanel from 'terra-slide-panel/lib/SlidePanel';
+import classNames from 'classnames/bind';
+import styles from './DefaultSlidePanel.scss';
 
+const cx = classNames.bind(styles);
+
 const mainContentForSlidePanel = togglePanelHandler => (
   <div>
-    <header style={{ backgroundColor: 'lightgrey' }}>
-      <h3 style={{ margin: '0px', padding: '5px', display: 'inline-block' }}>Main Content</h3>
-      <button id="mainToggleBtn" type="button" onClick={togglePanelHandler} style={{ display: 'inline-block' }}>Main Toggle Panel</button>
+    <header className={cx('header-content')}>
+      <h3>Main Content</h3>
+      <button id="mainToggleBtn" type="button" onClick={togglePanelHandler} className={cx('custom-button')}>Main Toggle Panel</button>
     </header>
-    <div style={{ margin: '5px' }}>
+    <div className={cx('content-wrapper')}>
       <p>
@@ -40,8 +44,8 @@ This is the main content area of the slide panel.
   <div>
-    <header style={{ backgroundColor: 'lightgrey' }}>
-      <h3 style={{ margin: '0px', padding: '5px', display: 'inline-block' }}>Panel Content</h3>
-      <button id="panelToggleBtn" type="button" onClick={togglePanelHandler} style={{ display: 'inline-block' }}>Panel Toggle Panel</button>
-      <button type="button" onClick={toggleFullscreenHandler} style={{ display: 'inline-block' }}>Toggle Fullscreen</button>
+    <header className={cx('header-content')}>
+      <h3 className={cx('heading')}>Panel Content</h3>
+      <button id="panelToggleBtn" type="button" onClick={togglePanelHandler} className={cx('extension-button')}>Panel Toggle Panel</button>
+      <button type="button" onClick={toggleFullscreenHandler} className={cx('extension-button')}>Toggle Fullscreen</button>
     </header>
-    <div style={{ margin: '5px' }}>
+    <div className={cx('content-wrapper')}>
       <p>This is the panel content area of the slide panel.</p>
@@ -113,9 +117,5 @@ <p>
   render() {
-    const containerAttributes = {
-      style: { border: '1px lightgrey solid' },
-    };
-
     return (
-      <div style={{ padding: '5px' }}>
-        <div {...containerAttributes}>
+      <div className={cx('container')}>
+        <div className={cx('container-attributes')}>
           <SlidePanel
@@ -122,0 +122,0 @@ mainContent={mainContentForSlidePanel(this.handlePanelToggle)}

src/terra-dev-site/test/slide-panel/SlidePanelEnd.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
@@ -11,3 +11,3 @@ import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
     panelBehavior="overlay"
-    panelPosition="end"
+    panelPosition={SlidePanelPositions.END}
     panelSize="small"
@@ -14,0 +14,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelFill.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import classNames from 'classnames/bind';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
 import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
+import styles from './SlidePanelDocCommon.test.scss';
 
+const cx = classNames.bind(styles);
+
 const SlidePanelFill = () => (
-  <div style={{ height: '200px', overflow: 'auto' }}>
+  <div className={cx('content-wrapper')}>
     <SlidePanel
@@ -12,3 +16,3 @@ mainContent={<SlidePanelMainContent />}
       panelBehavior="squish"
-      panelPosition="end"
+      panelPosition={SlidePanelPositions.END}
       panelSize="small"
@@ -15,0 +19,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelFullscreen.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
@@ -11,3 +11,3 @@ import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
     panelBehavior="overlay"
-    panelPosition="end"
+    panelPosition={SlidePanelPositions.END}
     panelSize="small"
@@ -14,0 +14,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelLarge.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
@@ -11,3 +11,3 @@ import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
     panelBehavior="overlay"
-    panelPosition="end"
+    panelPosition={SlidePanelPositions.END}
     panelSize="large"
@@ -14,0 +14,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelNoFill.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import classNames from 'classnames/bind';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
 import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
+import styles from './SlidePanelDocCommon.test.scss';
 
+const cx = classNames.bind(styles);
+
 const SlidePanelNoFill = () => (
-  <div style={{ height: '200px', overflow: 'auto' }}>
+  <div className={cx('content-wrapper')}>
     <SlidePanel
@@ -12,3 +16,3 @@ mainContent={<SlidePanelMainContent />}
       panelBehavior="squish"
-      panelPosition="end"
+      panelPosition={SlidePanelPositions.END}
       panelSize="small"
@@ -15,0 +19,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelOverlay.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
@@ -11,3 +11,3 @@ import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
     panelBehavior="overlay"
-    panelPosition="end"
+    panelPosition={SlidePanelPositions.END}
     panelSize="small"
@@ -14,0 +14,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelSmall.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
@@ -11,3 +11,3 @@ import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
     panelBehavior="overlay"
-    panelPosition="end"
+    panelPosition={SlidePanelPositions.END}
     panelSize="small"
@@ -14,0 +14,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelSquish.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
@@ -11,3 +11,3 @@ import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
     panelBehavior="squish"
-    panelPosition="end"
+    panelPosition={SlidePanelPositions.END}
     panelSize="small"
@@ -14,0 +14,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelSquishLarge.test.jsx

 import React from 'react';
+import classNames from 'classnames/bind';
 import SlidePanel from '../../../SlidePanel';
+import styles from './SlidePanelDocCommon.test.scss';
 
+const cx = classNames.bind(styles);
+
 const SlidePanelSquishLarge = () => (
-  <div style={{ height: '100vh' }}>
+  <div className={cx('content-wrapper-large')}>
     <SlidePanel
-      mainContent={<div style={{ height: '100%', width: '100%', backgroundColor: 'red' }} />}
-      panelContent={<div style={{ height: '100%', width: '100%', backgroundColor: 'blue' }} />}
+      mainContent={<div className={cx('main-content')} />}
+      panelContent={<div className={cx('panel-content')} />}
       panelBehavior="squish"
@@ -10,0 +14,0 @@ panelSize="large"

src/terra-dev-site/test/slide-panel/SlidePanelStart.test.jsx

 import React from 'react';
-import SlidePanel from '../../../SlidePanel';
+import SlidePanel, { SlidePanelPositions } from '../../../SlidePanel';
 import SlidePanelMainContent from '../common/SlidePanelMainContent';
@@ -11,3 +11,3 @@ import SlidePanelPanelContent from '../common/SlidePanelPanelContent';
     panelBehavior="overlay"
-    panelPosition="start"
+    panelPosition={SlidePanelPositions.START}
     panelSize="small"
@@ -14,0 +14,0 @@ isOpen

src/terra-dev-site/test/slide-panel/SlidePanelToggle.test.jsx

 import React from 'react';
+import classNames from 'classnames/bind';
 import SlidePanel from '../../../SlidePanel';
+import styles from './SlidePanelDocCommon.test.scss';
 
+const cx = classNames.bind(styles);
+
 class SlidePanelDemo extends React.Component {
@@ -18,12 +22,9 @@ constructor(props) {
     return (
-      <div style={{
-        border: '1px lightgrey solid', height: '768px', width: '100%', position: 'relative',
-      }}
-      >
+      <div className={cx('content-wrapper-toggle')}>
         <SlidePanel
           id="test-slide"
-          mainContent={<div style={{ height: '100%', width: '100%', backgroundColor: 'red' }}><button type="button" id="test-toggle" style={{ backgroundColor: 'green' }} onClick={this.handlePanelToggle}>toggle</button></div>}
+          mainContent={<div className={cx('main-content')}><button type="button" id="test-toggle" className={cx('button')} onClick={this.handlePanelToggle}>toggle</button></div>}
           panelContent={(
-            <div id="panel-content" style={{ height: '100%', width: '100%', backgroundColor: 'blue' }}>
-              <button id="focus-button" type="button" style={{ backgroundColor: 'green' }} onClick={this.handlePanelToggle}>Close panel</button>
+            <div id="panel-content" className={cx('panel-content')}>
+              <button id="focus-button" type="button" className={cx('button')} onClick={this.handlePanelToggle}>Close panel</button>
             </div>
@@ -30,0 +31,0 @@ )}

tests/wdio/slide-panel-spec.js

 const context = '[data-terra-dev-site-content] *:first-child';
 
-describe('Slide panel', () => {
-  before(() => browser.setViewportSize(Terra.viewports('large')[0]));
-
+Terra.describeViewports('Slide panel', ['large'], () => {
   describe('Slide panel end', () => {
@@ -7,0 +5,0 @@ beforeEach(() => browser.url('/#/raw/tests/terra-slide-panel/slide-panel/slide-panel-end'));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

101198

increased by4.81%

Number of package files

52

increased by8.33%

Worsened metrics

Lines of code

1520

decreased by-0.07%

No dependency changes