@desynova-digital/components 8.19.63 → 9.0.1

package/molecules/pagination/pagination.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 
 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 _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n  ', '{\n    div span {\n      color:', ';\n    }\n  }\n'], ['\n  display: flex;\n  justify-content: center;\n  ', '{\n    div span {\n      color:', ';\n    }\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  padding: 4px 8px;\n  margin: 0 5px;\n  ', ';\n  ', ';\n  ', ';\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover{\n    color: #00cec6;\n    background: #121d29;\n    border-color: #121d29;\n  }\n\n  &:focus{\n    color: #FFF;\n    background: #00cec6;\n    border-color: #00cec6;\n  }\n\n  &:active{\n    color: #FFF;\n    background: #00cec6;\n    border-color: #00cec6;\n\n  }\n'], ['\n  padding: 4px 8px;\n  margin: 0 5px;\n  ', ';\n  ', ';\n  ', ';\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover{\n    color: #00cec6;\n    background: #121d29;\n    border-color: #121d29;\n  }\n\n  &:focus{\n    color: #FFF;\n    background: #00cec6;\n    border-color: #00cec6;\n  }\n\n  &:active{\n    color: #FFF;\n    background: #00cec6;\n    border-color: #00cec6;\n\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  cursor: pointer;\n  span {\n    margin: 0 5px;\n    font-family: \'SFUIText-Regular\';\n    font-size: 14px;\n  }\n  ', ' {\n    transform: translate(0, 10%);\n  }\n  &:hover{\n    div{\n      i{\n        path{\n          fill: #fff;\n          stroke: #fff;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  cursor: pointer;\n  span {\n    margin: 0 5px;\n    font-family: \'SFUIText-Regular\';\n    font-size: 14px;\n  }\n  ', ' {\n    transform: translate(0, 10%);\n  }\n  &:hover{\n    div{\n      i{\n        path{\n          fill: #fff;\n          stroke: #fff;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n  ', ' {\n    div span {\n      color: ', ';\n    }\n  }\n'], ['\n  display: flex;\n  justify-content: center;\n  ', ' {\n    div span {\n      color: ', ';\n    }\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  padding: 4px 8px;\n  margin: 0 5px;\n  ', ';\n  ', ';\n  ', ';\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ', ';\n    background: #121d29;\n    border-color: #121d29;\n  }\n\n  &:focus {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n\n  &:active {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n'], ['\n  padding: 4px 8px;\n  margin: 0 5px;\n  ', ';\n  ', ';\n  ', ';\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &:hover {\n    color: ', ';\n    background: #121d29;\n    border-color: #121d29;\n  }\n\n  &:focus {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n\n  &:active {\n    color: #fff;\n    background: ', ';\n    border-color: ', ';\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  cursor: pointer;\n  span {\n    margin: 0 5px;\n    font-family: \'SFUIText-Regular\';\n    font-size: 14px;\n  }\n  ', ' {\n    transform: translate(0, 10%);\n  }\n  &:hover {\n    div {\n      i {\n        path {\n          fill: #fff;\n          stroke: #fff;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n'], ['\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  cursor: pointer;\n  span {\n    margin: 0 5px;\n    font-family: \'SFUIText-Regular\';\n    font-size: 14px;\n  }\n  ', ' {\n    transform: translate(0, 10%);\n  }\n  &:hover {\n    div {\n      i {\n        path {\n          fill: #fff;\n          stroke: #fff;\n          transition: all 0.4s ease-in-out;\n        }\n      }\n    }\n  }\n']);
 
 var _react = require('react');
 
@@ -49,6 +49,16 @@ var StyledPaginationItem = (0, _styledComponents2.default)(_button2.default)(_te
   return props.appearance == 'cta' ? '' : 'border-color:' + _tokens.colors[props.theme].pagination.pageButton;
 }, function (props) {
   return props.appearance == 'cta' ? '' : 'color:' + _tokens.colors[props.theme].pagination.color;
+}, function (props) {
+  return _tokens.colors[props.theme].pagination.commonColor;
+}, function (props) {
+  return _tokens.colors[props.theme].pagination.commonColor;
+}, function (props) {
+  return _tokens.colors[props.theme].pagination.commonColor;
+}, function (props) {
+  return _tokens.colors[props.theme].pagination.commonColor;
+}, function (props) {
+  return _tokens.colors[props.theme].pagination.commonColor;
 });
 var StyledLink = _styledComponents2.default.div(_templateObject3, _icon2.default.Element);
 var PaginationItem = function PaginationItem(props) {
@@ -70,18 +80,20 @@ var renderPaginationLink = function renderPaginationLink(_ref) {
       theme = _ref.theme;
   return _react2.default.createElement(
     StyledLink,
-    {
-      onClick: function onClick() {
+    { onClick: function onClick() {
         return (0, _pagination.changePageIfAppropiate)(toPage, items, perPage, onPageChanged);
-      }
-    },
+      } },
     iconLocation === 'left' ? icon === 'first-page' ? _react2.default.createElement(
       _react2.default.Fragment,
       null,
       _react2.default.createElement(
         'div',
         { style: { marginTop: '-5px' } },
-        _react2.default.createElement(_icon2.default, { name: icon, color: _tokens.colors[theme].pagination.color, stroke: _tokens.colors[theme].pagination.color })
+        _react2.default.createElement(_icon2.default, {
+          name: icon,
+          color: _tokens.colors[theme].pagination.color,
+          stroke: _tokens.colors[theme].pagination.color
+        })
       ),
       _react2.default.createElement(
         'span',
@@ -103,7 +115,11 @@ var renderPaginationLink = function renderPaginationLink(_ref) {
       _react2.default.createElement(
         'div',
         { style: { marginTop: '-5px' } },
-        _react2.default.createElement(_icon2.default, { name: icon, color: _tokens.colors[theme].pagination.color, stroke: _tokens.colors[theme].pagination.color })
+        _react2.default.createElement(_icon2.default, {
+          name: icon,
+          color: _tokens.colors[theme].pagination.color,
+          stroke: _tokens.colors[theme].pagination.color
+        })
       ),
       _react2.default.createElement(
         'span',
@@ -159,8 +175,26 @@ var Pagination = function Pagination(_ref3) {
   return _react2.default.createElement(
     StyledPagination,
     { theme: theme },
-    renderPaginationLink({ toPage: 1, appearance: appearance, items: items, perPage: perPage, onPageChanged: onPageChanged, icon: "first-page", iconLocation: "left", theme: theme }),
-    renderPaginationLink({ toPage: page - 1, appearance: appearance, items: items, perPage: perPage, onPageChanged: onPageChanged, icon: "angle-left", iconLocation: "left", theme: theme }),
+    renderPaginationLink({
+      toPage: 1,
+      appearance: appearance,
+      items: items,
+      perPage: perPage,
+      onPageChanged: onPageChanged,
+      icon: 'first-page',
+      iconLocation: 'left',
+      theme: theme
+    }),
+    renderPaginationLink({
+      toPage: page - 1,
+      appearance: appearance,
+      items: items,
+      perPage: perPage,
+      onPageChanged: onPageChanged,
+      icon: 'angle-left',
+      iconLocation: 'left',
+      theme: theme
+    }),
     (0, _pagination.getPaginationSlice)(page, items, perPage, pagesPerSlice).map(function (page) {
       return _react2.default.createElement(
         PaginationItem,
@@ -176,13 +210,31 @@ var Pagination = function Pagination(_ref3) {
         page.label
       );
     }),
-    renderPaginationLink({ toPage: page + 1, appearance: appearance, items: items, perPage: perPage, onPageChanged: onPageChanged, icon: "angle-right", iconLocation: "right", theme: theme }),
-    renderPaginationLink({ toPage: (0, _pagination.pagesFromItems)(items, perPage), appearance: appearance, items: items, perPage: perPage, onPageChanged: onPageChanged, icon: "last-page", iconLocation: "right", theme: theme })
+    renderPaginationLink({
+      toPage: page + 1,
+      appearance: appearance,
+      items: items,
+      perPage: perPage,
+      onPageChanged: onPageChanged,
+      icon: 'angle-right',
+      iconLocation: 'right',
+      theme: theme
+    }),
+    renderPaginationLink({
+      toPage: (0, _pagination.pagesFromItems)(items, perPage),
+      appearance: appearance,
+      items: items,
+      perPage: perPage,
+      onPageChanged: onPageChanged,
+      icon: 'last-page',
+      iconLocation: 'right',
+      theme: theme
+    })
   );
 };
 
 Pagination.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark']),
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
   page: _propTypes2.default.number.isRequired,
   perPage: _propTypes2.default.number.isRequired,
   items: _propTypes2.default.number.isRequired,

package/molecules/pagination/pagination.story.js

@@ -26,8 +26,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   return _react2.default.createElement(
     _storyHelpers.Example,
     { background: 'dark' },
-    _react2.default.createElement(_components.Pagination, { theme: 'dark', items: 20372, perPage: 10, page: 3, onPageChanged: function onPageChanged(page) {
+    _react2.default.createElement(_components.Pagination, {
+      theme: 'dark',
+      items: 20372,
+      perPage: 10,
+      page: 3,
+      onPageChanged: function onPageChanged(page) {
         return alert(page);
-      } })
+      }
+    })
+  );
+});
+
+(0, _react3.storiesOf)('Pagination').add('nexc', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { background: 'dark' },
+    _react2.default.createElement(_components.Pagination, {
+      theme: 'nexc',
+      items: 20372,
+      perPage: 10,
+      page: 3,
+      onPageChanged: function onPageChanged(page) {
+        return alert(page);
+      }
+    })
   );
 });