@desynova-digital/components 8.19.63 → 9.0.0

package/atoms/cardStack/cardStack.js

@@ -1,14 +1,14 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 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 _templateObject = _taggedTemplateLiteral(['\nposition:relative;\npadding: 20px;\n//min-height:250px;\n > div{\n    position:relative;\n    min-height:100%;\n    display: flex;\n    &>div{\n        //width:100%;\n        transition: all 0.5s ease;\n        position: relative;\n    }\n\n\n\n    &.current{\n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                display:none;\n            }\n        }\n    }\n    &.next{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                //color:#00cec6;\n                font-size: 16px;\n                display: flex;\n                align-items: flex-end;\n                cursor: ', '\n            }\n        }\n    }\n    &.previous{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                top:0px;\n                width:100%;\n                //color:#00cec6;\n                font-size: 16px;\n                display: flex;\n                align-items: flex-start;\n                cursor: pointer;\n            }\n        }\n    }\n }\nh1{\n    font-size:20px;\n}\n\n\n'], ['\nposition:relative;\npadding: 20px;\n//min-height:250px;\n > div{\n    position:relative;\n    min-height:100%;\n    display: flex;\n    &>div{\n        //width:100%;\n        transition: all 0.5s ease;\n        position: relative;\n    }\n\n\n\n    &.current{\n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                display:none;\n            }\n        }\n    }\n    &.next{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                //color:#00cec6;\n                font-size: 16px;\n                display: flex;\n                align-items: flex-end;\n                cursor: ', '\n            }\n        }\n    }\n    &.previous{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                top:0px;\n                width:100%;\n                //color:#00cec6;\n                font-size: 16px;\n                display: flex;\n                align-items: flex-start;\n                cursor: pointer;\n            }\n        }\n    }\n }\nh1{\n    font-size:20px;\n}\n\n\n']),
+var _templateObject = _taggedTemplateLiteral(['\nposition:relative;\npadding: 20px;\n//min-height:250px;\n > div{\n    position:relative;\n    min-height:100%;\n    display: flex;\n    &>div{\n        //width:100%;\n        transition: all 0.5s ease;\n        position: relative;\n    }\n\n\n\n    &.current{\n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                display:none;\n            }\n        }\n    }\n    &.next{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                //color:', '\n                font-size: 16px;\n                display: flex;\n                align-items: flex-end;\n                cursor: ', '\n            }\n        }\n    }\n    &.previous{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                top:0px;\n                width:100%;\n                //color: ', ';\n                font-size: 16px;\n                display: flex;\n                align-items: flex-start;\n                cursor: pointer;\n            }\n        }\n    }\n }\nh1{\n    font-size:20px;\n}\n\n\n'], ['\nposition:relative;\npadding: 20px;\n//min-height:250px;\n > div{\n    position:relative;\n    min-height:100%;\n    display: flex;\n    &>div{\n        //width:100%;\n        transition: all 0.5s ease;\n        position: relative;\n    }\n\n\n\n    &.current{\n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                display:none;\n            }\n        }\n    }\n    &.next{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                bottom:0px;\n                width:100%;\n                //color:', '\n                font-size: 16px;\n                display: flex;\n                align-items: flex-end;\n                cursor: ', '\n            }\n        }\n    }\n    &.previous{ \n        &>div{\n            .card-title{\n                position:relative;//absolute;\n                top:0px;\n                width:100%;\n                //color: ', ';\n                font-size: 16px;\n                display: flex;\n                align-items: flex-start;\n                cursor: pointer;\n            }\n        }\n    }\n }\nh1{\n    font-size:20px;\n}\n\n\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n\n    margin:0px auto;\n    \n    top: -', 'px;\n\n    width: 100%;\n\n    &>div{\n        background: #303f51; //', ';//#fff;\n        //border:1px solid #fff;\n        border-bottom: 0px;\n        box-shadow: 0px 0px 18px 7px rgba(0,0,0,0.3); //0 0 6px 2px #dddddd;//2px 2px 2px 2px #8a8787;\n        margin:0px auto;\n        transition: all 0.5s;\n        ', '\n    }\n\n\n\n    @keyframes up {\n        0%{\n          transform: translate(0, 0);\n          opacity:1;\n        }\n        \n        70% {\n          transform: translate(0, -40px);\n          opacity:1;\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n    @keyframes down {\n        0%{\n          transform: translate(0, 0);\n          //opacity:0;\n        }\n        \n        70% {\n          transform: translate(0, 40px);\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n\n    \n\n\n'], ['\n\n    margin:0px auto;\n    \n    top: -', 'px;\n\n    width: 100%;\n\n    &>div{\n        background: #303f51; //', ';//#fff;\n        //border:1px solid #fff;\n        border-bottom: 0px;\n        box-shadow: 0px 0px 18px 7px rgba(0,0,0,0.3); //0 0 6px 2px #dddddd;//2px 2px 2px 2px #8a8787;\n        margin:0px auto;\n        transition: all 0.5s;\n        ', '\n    }\n\n\n\n    @keyframes up {\n        0%{\n          transform: translate(0, 0);\n          opacity:1;\n        }\n        \n        70% {\n          transform: translate(0, -40px);\n          opacity:1;\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n    @keyframes down {\n        0%{\n          transform: translate(0, 0);\n          //opacity:0;\n        }\n        \n        70% {\n          transform: translate(0, 40px);\n        }\n\n        99% {\n\n        }\n        100% {\n            transform: translate(0, 0);\n            opacity:1;\n          }\n        \n      }\n\n    \n\n\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n    height:', 'px;\n'], ['\n    height:', 'px;\n']);
+    _templateObject3 = _taggedTemplateLiteral(['\n  height: ', 'px;\n'], ['\n  height: ', 'px;\n']);
 
 var _react = require('react');
 
@@ -18,7 +18,11 @@ var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _tokens = require('../../../tokens');
+var _tokens = require('@desynova-digital/tokens');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,180 +36,203 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 //import './switch.css'
 var CardStack = function (_React$Component) {
-    _inherits(CardStack, _React$Component);
-
-    function CardStack(props) {
-        _classCallCheck(this, CardStack);
-
-        var _this = _possibleConstructorReturn(this, (CardStack.__proto__ || Object.getPrototypeOf(CardStack)).call(this, props));
-
-        _this.changeCardTo = function (newIdx) {
-            _this.setState({
-                current: newIdx,
-                last: _this.state.current ? _this.state.current : 0
-
-            });
-        };
-
-        _this.state = {
-            current: props.current ? props.current : 0,
-            last: props.current ? props.current : 0,
-            total: props.total
-        };
-        _this.cardClick = _this.cardClick.bind(_this);
-        return _this;
-    }
-
-    _createClass(CardStack, [{
-        key: 'cardClick',
-        value: function cardClick(e, idx) {
-            var _this2 = this;
-
-            if (this.state.current !== idx) {
-                if (!this.props.isStepform) {
-                    this.setState({
-                        current: idx,
-                        last: this.state.current
-                    }, function () {
-                        _this2.props.currentCardChange(idx, _this2.state.current);
-                    });
-                } else {
-                    this.props.currentCardChange(idx, this.state.current);
-                }
-            }
+  _inherits(CardStack, _React$Component);
+
+  function CardStack(props) {
+    _classCallCheck(this, CardStack);
+
+    var _this = _possibleConstructorReturn(this, (CardStack.__proto__ || Object.getPrototypeOf(CardStack)).call(this, props));
+
+    _this.changeCardTo = function (newIdx) {
+      _this.setState({
+        current: newIdx,
+        last: _this.state.current ? _this.state.current : 0
+      });
+    };
+
+    _this.state = {
+      current: props.current ? props.current : 0,
+      last: props.current ? props.current : 0,
+      total: props.total
+    };
+    _this.cardClick = _this.cardClick.bind(_this);
+    return _this;
+  }
+
+  _createClass(CardStack, [{
+    key: 'cardClick',
+    value: function cardClick(e, idx) {
+      var _this2 = this;
+
+      if (this.state.current !== idx) {
+        if (!this.props.isStepform) {
+          this.setState({
+            current: idx,
+            last: this.state.current
+          }, function () {
+            _this2.props.currentCardChange(idx, _this2.state.current);
+          });
+        } else {
+          this.props.currentCardChange(idx, this.state.current);
         }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this3 = this;
-
-            if (this.props.isStepform && this.props.current !== this.state.current) {
-                this.changeCardTo(this.props.current);
-            }
-
-            return _react2.default.createElement(
-                CardStack.CardStackBox,
-                { className: 'card-stack-box', theme: this.props.theme,
-                    isStepform: this.props.isStepform },
-                this.props.children.constructor === Array ? this.props.children.map(function (child, idx) {
-                    //console.log('child ::',child.key);
-                    return _react2.default.createElement(
-                        CardStack.Card,
-                        {
-                            key: child.key + 0 + 'card-stack',
-                            className: _this3.state.current < idx ? "next" : _this3.state.current === idx ? "current" : "previous",
-                            count: idx,
-                            isStepform: _this3.props.isStepform,
-                            current: _this3.state.current,
-                            total: _this3.props.children.length,
-                            last: _this3.state.last,
-                            onClick: function onClick(e) {
-                                return _this3.cardClick(e, idx);
-                            },
-                            titleHeight: _this3.props.titleHeight,
-                            theme: _this3.props.theme ? _this3.props.theme : 'dark' },
-                        _react2.default.createElement(
-                            'div',
-                            null,
-                            _react2.default.createElement(TitleComponent, { title: child.props.title,
-                                titleHeight: _this3.props.titleHeight
-                            }),
-                            _this3.state.current === idx ? child : null
-                        )
-                    );
-                }) : this.props.children.constructor === Object ? _react2.default.createElement(
-                    CardStack.Card,
-                    {
-                        key: "card",
-                        className: this.state.current < 0 ? "next" : this.state.current === 0 ? "current" : "previous",
-                        count: 0,
-                        current: this.state.current,
-                        isStepform: this.props.isStepform,
-                        total: 1,
-                        last: this.state.last,
-                        onClick: function onClick(e) {
-                            return _this3.cardClick(e, 0);
-                        },
-                        titleHeight: this.props.titleHeight,
-                        theme: this.props.theme ? this.props.theme : 'dark' },
-                    _react2.default.createElement(
-                        'div',
-                        null,
-                        _react2.default.createElement(TitleComponent, { title: this.props.children.props.title,
-                            titleHeight: this.props.titleHeight }),
-                        this.state.current === 0 ? this.props.children : null
-                    )
-                ) : null
-            );
-        }
-    }]);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this3 = this;
+
+      if (this.props.isStepform && this.props.current !== this.state.current) {
+        this.changeCardTo(this.props.current);
+      }
+
+      return _react2.default.createElement(
+        CardStack.CardStackBox,
+        {
+          className: 'card-stack-box',
+          theme: this.props.theme,
+          isStepform: this.props.isStepform
+        },
+        this.props.children.constructor === Array ? this.props.children.map(function (child, idx) {
+          //console.log('child ::',child.key);
+          return _react2.default.createElement(
+            CardStack.Card,
+            {
+              key: child.key + 0 + 'card-stack',
+              className: _this3.state.current < idx ? 'next' : _this3.state.current === idx ? 'current' : 'previous',
+              count: idx,
+              isStepform: _this3.props.isStepform,
+              current: _this3.state.current,
+              total: _this3.props.children.length,
+              last: _this3.state.last,
+              onClick: function onClick(e) {
+                return _this3.cardClick(e, idx);
+              },
+              titleHeight: _this3.props.titleHeight,
+              theme: _this3.props.theme ? _this3.props.theme : 'dark'
+            },
+            _react2.default.createElement(
+              'div',
+              null,
+              _react2.default.createElement(TitleComponent, { title: child.props.title, titleHeight: _this3.props.titleHeight }),
+              _this3.state.current === idx ? child : null
+            )
+          );
+        }) : this.props.children.constructor === Object ? _react2.default.createElement(
+          CardStack.Card,
+          {
+            key: 'card',
+            className: this.state.current < 0 ? 'next' : this.state.current === 0 ? 'current' : 'previous',
+            count: 0,
+            current: this.state.current,
+            isStepform: this.props.isStepform,
+            total: 1,
+            last: this.state.last,
+            onClick: function onClick(e) {
+              return _this3.cardClick(e, 0);
+            },
+            titleHeight: this.props.titleHeight,
+            theme: this.props.theme ? this.props.theme : 'dark'
+          },
+          _react2.default.createElement(
+            'div',
+            null,
+            _react2.default.createElement(TitleComponent, {
+              title: this.props.children.props.title,
+              titleHeight: this.props.titleHeight
+            }),
+            this.state.current === 0 ? this.props.children : null
+          )
+        ) : null
+      );
+    }
+  }]);
 
-    return CardStack;
+  return CardStack;
 }(_react2.default.Component);
 
 CardStack.CardStackBox = _styledComponents2.default.div(_templateObject, function (props) {
-    return props.isStepform ? 'not-allowed' : 'pointer';
+  return _tokens.colors[props.theme].card.themeColor;
+}, function (props) {
+  return props.isStepform ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return _tokens.colors[props.theme].card.themeColor;
 });
 CardStack.Card = _styledComponents2.default.div(_templateObject2, function (props) {
-    return props.count * (props.titleHeight + 40);
+  return props.count * (props.titleHeight + 40);
 }, function (props) {
-    return _tokens.colors[props.theme].card.background;
+  return _tokens.colors[props.theme].card.background;
 }, function (props) {
-    if (props.count < props.current) {
-        return 'width:calc(100% - ' + (props.current - props.count) * 60 + 'px); z-index:' + props.count + ';' + (props.isStepform ? 'color:#00cec6;' : '');
-    } else if (props.count > props.current) {
-        return 'width:calc(100% - ' + (props.count - props.current) * 60 + 'px);z-index:' + (props.total - (props.count - props.current)) + ';' + (props.isStepform ? 'color:#999999;' : '');
-    } else {
-        return 'animation: ' + (props.last > props.current ? 'up' : 'down') + ' 0.25s 1;transform: translate(0, 0); width:100%; z-index:' + props.total + ';background:#162433';
-    }
+  if (props.count < props.current) {
+    return 'width:calc(100% - ' + (props.current - props.count) * 60 + 'px); z-index:' + props.count + ';' + (props.isStepform ? 'color:' + _tokens.colors[props.theme].card.themeColor + ';' : '');
+  } else if (props.count > props.current) {
+    return 'width:calc(100% - ' + (props.count - props.current) * 60 + 'px);z-index:' + (props.total - (props.count - props.current)) + ';' + (props.isStepform ? 'color:#999999;' : '');
+  } else {
+    return 'animation: ' + (props.last > props.current ? 'up' : 'down') + ' 0.25s 1;transform: translate(0, 0); width:100%; z-index:' + props.total + ';background:#162433';
+  }
 });
 
+CardStack.propTypes = {
+  /** The visual style used to convey the label's purpose */
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+
+  titleHeight: _propTypes2.default.number,
+  current: _propTypes2.default.number
+};
+
+CardStack.Card.propTypes = {
+  /** The visual style used to convey the label's purpose */
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+  isStepform: _propTypes2.default.bool,
+  titleHeight: _propTypes2.default.number
+};
+
 CardStack.defaultProps = {
-    titleHeight: 60,
-    theme: 'dark',
-    current: 0
+  titleHeight: 60,
+  theme: 'dark',
+  current: 0
 };
 CardStack.Card.defaultProps = {
-    theme: 'dark',
-    isStepform: false,
-    activeForms: [],
-    titleHeight: 60
+  theme: 'dark',
+  isStepform: false,
+  activeForms: [],
+  titleHeight: 60
 };
 
 var TitleComponent = function (_React$Component2) {
-    _inherits(TitleComponent, _React$Component2);
-
-    function TitleComponent(props) {
-        _classCallCheck(this, TitleComponent);
+  _inherits(TitleComponent, _React$Component2);
+
+  function TitleComponent(props) {
+    _classCallCheck(this, TitleComponent);
+
+    return _possibleConstructorReturn(this, (TitleComponent.__proto__ || Object.getPrototypeOf(TitleComponent)).call(this, props));
+  }
+
+  _createClass(TitleComponent, [{
+    key: 'render',
+    value: function render() {
+      var title = '';
+      if (this.props.title) {
+        if (typeof this.props.title == 'string') {
+          title = _react2.default.createElement(
+            CardStack.TitleBox,
+            { titleHeight: this.props.titleHeight, className: 'card-title' },
+            this.props.title
+          );
+        } else {
+          title = this.props.title;
+        }
+      }
 
-        return _possibleConstructorReturn(this, (TitleComponent.__proto__ || Object.getPrototypeOf(TitleComponent)).call(this, props));
+      return title;
     }
+  }]);
 
-    _createClass(TitleComponent, [{
-        key: 'render',
-        value: function render() {
-            var title = '';
-            if (this.props.title) {
-                if (typeof this.props.title == "string") {
-                    title = _react2.default.createElement(
-                        CardStack.TitleBox,
-                        { titleHeight: this.props.titleHeight, className: 'card-title' },
-                        this.props.title
-                    );
-                } else {
-                    title = this.props.title;
-                }
-            }
-
-            return title;
-        }
-    }]);
-
-    return TitleComponent;
+  return TitleComponent;
 }(_react2.default.Component);
 
 CardStack.TitleBox = _styledComponents2.default.div(_templateObject3, function (props) {
-    return props.titleHeight + 100;
+  return props.titleHeight + 100;
 });
 
 exports.default = CardStack;

package/atoms/cardStack/cardStack.story.js

@@ -13,7 +13,7 @@ var _components = require('../../components');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 //console.log(RadioGroup);
-(0, _react3.storiesOf)('CardStack').add('default', function () {
+(0, _react3.storiesOf)('CardStack').add('dark theme', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
     null,
@@ -25,15 +25,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         null,
         _react2.default.createElement(
           'div',
-          { style: {
-              'background': '#fff',
-              'padding': '10px'
-            } },
+          {
+            style: {
+              background: '#fff',
+              padding: '10px'
+            }
+          },
           _react2.default.createElement(
             _components.CardStack,
-            { current: 2, theme: 'dark', isStepform: true, onChangeCheck: function onChangeCheck(value) {
+            {
+              current: 2,
+              theme: 'dark',
+              isStepform: true,
+              onChangeCheck: function onChangeCheck(value) {
                 console.log(value);
-              } },
+              }
+            },
             _react2.default.createElement(
               'div',
               { style: { height: '300px' }, title: 'SECTION 1' },
@@ -45,7 +52,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
             ),
             _react2.default.createElement(
               'div',
-              { style: { height: '450px' }, title: "SECTION 2" },
+              { style: { height: '450px' }, title: 'SECTION 2' },
               _react2.default.createElement(
                 'h1',
                 null,
@@ -54,7 +61,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
             ),
             _react2.default.createElement(
               'div',
-              { style: { height: '350px' }, title: "SECTION 3" },
+              { style: { height: '350px' }, title: 'SECTION 3' },
               _react2.default.createElement(
                 'h1',
                 null,
@@ -63,7 +70,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
             ),
             _react2.default.createElement(
               'div',
-              { style: { height: '500px' }, title: "SECTION 4" },
+              { style: { height: '500px' }, title: 'SECTION 4' },
               _react2.default.createElement(
                 'h1',
                 null,
@@ -74,19 +81,125 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         ),
         _react2.default.createElement(
           'div',
-          { style: {
-              'background': '#fff',
-              'padding': '10px',
-              'marginTop': '300px'
-            } },
+          {
+            style: {
+              background: '#fff',
+              padding: '10px',
+              marginTop: '300px'
+            }
+          },
           _react2.default.createElement(
             _components.CardStack,
-            { current: 1, theme: 'light', onChangeCheck: function onChangeCheck(value) {
+            {
+              current: 1,
+              theme: 'dark',
+              onChangeCheck: function onChangeCheck(value) {
                 console.log(value);
-              } },
+              }
+            },
             _react2.default.createElement(
               'div',
-              { title: _react2.default.createElement("div", { 'background': 'yellow' }, "Title Element") },
+              { title: _react2.default.createElement('div', { background: 'yellow' }, 'Title Element') },
+              _react2.default.createElement(
+                'h1',
+                null,
+                ' Child 1'
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+});
+
+(0, _react3.storiesOf)('CardStack').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    null,
+    _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'div',
+          {
+            style: {
+              background: '#fff',
+              padding: '10px'
+            }
+          },
+          _react2.default.createElement(
+            _components.CardStack,
+            {
+              current: 2,
+              theme: 'nexc',
+              isStepform: true,
+              onChangeCheck: function onChangeCheck(value) {
+                console.log(value);
+              }
+            },
+            _react2.default.createElement(
+              'div',
+              { style: { height: '300px' }, title: 'SECTION 1' },
+              _react2.default.createElement(
+                'h1',
+                null,
+                ' Child 1'
+              )
+            ),
+            _react2.default.createElement(
+              'div',
+              { style: { height: '450px' }, title: 'SECTION 2' },
+              _react2.default.createElement(
+                'h1',
+                null,
+                ' Child 2'
+              )
+            ),
+            _react2.default.createElement(
+              'div',
+              { style: { height: '350px' }, title: 'SECTION 3' },
+              _react2.default.createElement(
+                'h1',
+                null,
+                ' Child 3'
+              )
+            ),
+            _react2.default.createElement(
+              'div',
+              { style: { height: '500px' }, title: 'SECTION 4' },
+              _react2.default.createElement(
+                'h1',
+                null,
+                ' Child 4'
+              )
+            )
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          {
+            style: {
+              background: '#fff',
+              padding: '10px',
+              marginTop: '300px'
+            }
+          },
+          _react2.default.createElement(
+            _components.CardStack,
+            {
+              current: 1,
+              theme: 'nexc',
+              onChangeCheck: function onChangeCheck(value) {
+                console.log(value);
+              }
+            },
+            _react2.default.createElement(
+              'div',
+              { title: _react2.default.createElement('div', { background: 'yellow' }, 'Title Element') },
               _react2.default.createElement(
                 'h1',
                 null,