@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61

package/build/Pager/Pager.test.js

@@ -22,93 +22,138 @@ var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Pager", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      classes: classes
+      classes: classes,
+      currentPage: 1
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('renders the prev and next buttons', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      classes: classes
+      classes: classes,
+      currentPage: 1
     }));
-    expect(wrapper.find('.listItemPrevious').length).toBe(1);
-    expect(wrapper.find('.listItemPrevious').text()).toEqual('<Jss(Icon) />Previous');
-    expect(wrapper.find('.listItemNext').length).toBe(1);
-    expect(wrapper.find('.listItemNext').text()).toEqual('Next<Jss(Icon) />');
+    expect(wrapper.find('.prev').length).toBe(1);
+    expect(wrapper.find('.prev').text()).toEqual('<Jss(Button) />');
+    expect(wrapper.find('.next').length).toBe(1);
+    expect(wrapper.find('.next').text()).toEqual('<Jss(Button) />');
   });
   it('changes to previous page', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      initialPage: 3,
-      classes: classes
+    var onPageChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 3,
+      pageCount: 4,
+      classes: classes,
+      onPageChange: onPageChange
     }));
-    expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.listItemPrevious').simulate('click', {
+    expect(onPageChange.mock.calls.length).toBe(0);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(false);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(true);
+    wrapper.find('.prev button').simulate('click', {
       target: {}
     });
-    expect(wrapper.state('selected')).toEqual(2);
+    expect(onPageChange.mock.calls.length).toBe(1);
+    expect(onPageChange.mock.calls[0][0]).toBe(2);
+    wrapper.setProps({
+      currentPage: 2
+    });
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(true);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(false);
   });
   it('changes to next page', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      initialPage: 3,
-      classes: classes
+    var onPageChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 2,
+      pageCount: 4,
+      classes: classes,
+      onPageChange: onPageChange
     }));
-    expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.listItemNext').simulate('click', {
+    expect(onPageChange.mock.calls.length).toBe(0);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(true);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(false);
+    wrapper.find('.next button').simulate('click', {
       target: {}
     });
-    expect(wrapper.state('selected')).toEqual(4);
+    expect(onPageChange.mock.calls.length).toBe(1);
+    expect(onPageChange.mock.calls[0][0]).toBe(3);
+    wrapper.setProps({
+      currentPage: 3
+    });
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(false);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(true);
   });
   it('renders the pagination', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 1,
       pageCount: 3,
-      pageRangeDisplayed: 1,
-      marginPagesDisplayed: 1,
+      centerPages: 1,
+      marginPages: 1,
       classes: classes
     }));
-    expect(wrapper.find('li').length).toBe(5);
+    expect(wrapper.find('Page').length).toBe(3);
+    wrapper.setProps({
+      pageCount: 10
+    });
+    expect(wrapper.find('Page').length).toBe(4);
+    wrapper.setProps({
+      currentPage: 3
+    });
+    expect(wrapper.find('Page').length).toBe(5);
   });
   it('changes to a specific page', function () {
+    var onPageChange = jest.fn();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 1,
       pageCount: 5,
-      pageRangeDisplayed: 1,
-      marginPagesDisplayed: 1,
-      classes: classes
+      centerPages: 1,
+      marginPages: 1,
+      classes: classes,
+      onPageChange: onPageChange
     }));
-    expect(wrapper.state('selected')).toEqual(1);
-    wrapper.find('li').at(3).simulate('click', {
+    expect(onPageChange.mock.calls.length).toBe(0);
+    expect(wrapper.find('Page').at(0).prop('selected')).toBe(true);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(false);
+    wrapper.find('Page').at(1).simulate('click', {
       target: {}
     });
-    expect(wrapper.state('selected')).toEqual(5);
+    expect(onPageChange.mock.calls.length).toBe(1);
+    expect(onPageChange.mock.calls[0][0]).toBe(2);
+    wrapper.setProps({
+      currentPage: 2
+    });
+    expect(wrapper.find('Page').at(0).prop('selected')).toBe(false);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(true);
   });
   it('disables the previous page button', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      initialPage: 1,
+      currentPage: 1,
       classes: classes
     }));
-    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.prev').prop('disabled')).toEqual(true);
     wrapper.setProps({
-      forcePage: 5
+      currentPage: 5
     });
-    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.prev').prop('disabled')).toEqual(false);
   });
   it('disables the next page button', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       pageCount: 5,
-      initialPage: 5,
+      currentPage: 5,
       classes: classes
     }));
-    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.next').prop('disabled')).toEqual(true);
     wrapper.setProps({
-      forcePage: 1
+      currentPage: 1
     });
-    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.next').prop('disabled')).toEqual(false);
   });
   it('calls the onPageChange function', function () {
     var onPageChange = jest.fn();
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 1,
       onPageChange: onPageChange,
       classes: classes
     }));
-    wrapper.find('.listItemNext').simulate('click', {
+    wrapper.find('.next').simulate('click', {
       target: {}
     });
     expect(onPageChange.mock.calls.length).toBe(1);

package/build/Pager/__snapshots__/Pager.test.js.snap

@@ -4,48 +4,15 @@ exports[`Pager matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Pager styles matches the snapshot 1`] = `
 Object {
-  "btn": Object {
-    "& span": Object {
-      "marginBottom": "-2px",
-    },
-    "&:hover": Object {
-      "background": "#ECECEE",
-      "borderColor": "#ECECEE",
-    },
-    "border": "1px solid #bfbfbf",
-    "borderRadius": "5px",
-    "cursor": "pointer",
-    "fontFamily": "'OccText', sans-serif",
-    "outline": "0",
-    "padding": "3px 13px",
-    "transition": "0.3s all",
-  },
-  "disabled": Object {
-    "opacity": "0.4",
-    "pointerEvents": "none",
-  },
-  "listItemNext": Object {
-    "marginLeft": "15px",
-  },
-  "listItemPrevious": Object {
-    "marginRight": "15px",
-  },
   "next": Object {
-    "alignItems": "center",
-    "display": "flex",
+    "marginLeft": "8px",
   },
   "pager": Object {
     "alignItems": "center",
-    "color": "#727272",
-    "display": "flex",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": "14px",
-    "listStyle": "none",
-    "paddingLeft": "0",
+    "display": "inline-flex",
   },
   "prev": Object {
-    "alignItems": "center",
-    "display": "flex",
+    "marginRight": "8px",
   },
 }
 `;

package/build/Pager/styles.js

@@ -5,55 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pager: {
-    listStyle: 'none',
-    paddingLeft: '0',
-    display: 'flex',
-    alignItems: 'center',
-    fontFamily: _fonts["default"].body,
-    color: _colors["default"].grey7,
-    fontSize: '14px'
-  },
-  btn: {
-    fontFamily: _fonts["default"].body,
-    border: "1px solid ".concat(_colors["default"].grey1),
-    borderRadius: '5px',
-    padding: '3px 13px',
-    transition: '0.3s all',
-    cursor: 'pointer',
-    outline: '0',
-    '& span': {
-      marginBottom: '-2px'
-    },
-    '&:hover': {
-      background: '#ECECEE',
-      borderColor: '#ECECEE'
-    }
-  },
-  prev: {
-    display: 'flex',
+    display: 'inline-flex',
     alignItems: 'center'
   },
-  listItemPrevious: {
-    marginRight: '15px'
+  prev: {
+    marginRight: _spacing["default"]['size-2']
   },
   next: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  listItemNext: {
-    marginLeft: '15px'
-  },
-  disabled: {
-    pointerEvents: 'none',
-    opacity: '0.4'
+    marginLeft: _spacing["default"]['size-2']
   }
 };
 exports["default"] = _default;

package/build/Pill/Choice/Choice.js

@@ -83,15 +83,17 @@ var Choice = function Choice(props) {
   }), leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     iconName: leftIcon,
     colors: [conditionedStyles.iconColor],
-    width: 18,
-    height: 18
+    className: classes.leftIcon,
+    width: 16,
+    height: 16
   }), children && /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(classes.text, " ").concat(classes[conditionedStyles.text])
   }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     iconName: rightIcon,
     colors: [conditionedStyles.iconColor],
-    width: 18,
-    height: 18
+    className: classes.rightIcon,
+    width: 16,
+    height: 16
   }));
 };
 

package/build/Pill/Choice/styles.js

@@ -44,12 +44,11 @@ var _default = {
     '&:hover': {
       background: _colors["default"].pill.unselected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.unselected.bg.active
     },
-    '&:not(:active):focus-visible': {
-      boxShadow: _shadows["default"]['focus-indigo'],
-      background: _colors["default"].pill.unselected.bg["default"]
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
     }
   },
   disabled: {
@@ -57,16 +56,16 @@ var _default = {
     pointerEvents: 'none'
   },
   selected: {
-    background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
+    background: _colors["default"].pill.selected.bg["default"],
     zIndex: 1,
     color: _colors["default"].text.white.primary,
     '&:hover': {
       background: _colors["default"].pill.selected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.selected.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     }
   },
@@ -80,9 +79,7 @@ var _default = {
     font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    padding: [0, _spacing["default"]['size-1']],
-    marginLeft: _spacing["default"]['size-1'],
-    marginRight: _spacing["default"]['size-1']
+    padding: [0, _spacing["default"]['size-1']]
   },
   textSelectedDisabled: {
     color: _colors["default"].text.white.secondary
@@ -95,6 +92,12 @@ var _default = {
   },
   textEnabled: {
     color: _colors["default"].text.indigo.primary
+  },
+  leftIcon: {
+    marginRight: _spacing["default"]['size-1']
+  },
+  rightIcon: {
+    marginLeft: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

package/build/Pill/Group/styles.js

@@ -43,15 +43,15 @@ var _default = {
     whiteSpace: 'nowrap',
     transition: '0.3s all',
     cursor: 'pointer',
-    '&:not(:active):focus-visible': {
-      boxShadow: _shadows["default"]['focus-indigo'],
-      background: 'none'
-    },
     '&:hover': {
       background: _colors["default"].pill.unselected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: 'none'
     }
   },
   selected: {

package/build/Pill/Stack/Stack.js

@@ -52,8 +52,8 @@ var Stack = function Stack(_ref) {
     className: classes.close,
     iconName: "cross",
     colors: [disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.brand["default"]],
-    width: 18,
-    height: 18
+    width: 16,
+    height: 16
   })));
 };
 

package/build/Pill/Stack/styles.js

@@ -42,12 +42,11 @@ var _default = {
     '&:hover': {
       background: _colors["default"].pill.unselected.bg.hover
     },
-    '&:active, &:focus': {
+    '&:active': {
       background: _colors["default"].pill.unselected.bg.active
     },
-    '&:not(:active):focus-visible': {
-      boxShadow: _shadows["default"]['focus-indigo'],
-      background: _colors["default"].pill.unselected.bg["default"]
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
     }
   },
   disabled: {
@@ -61,8 +60,7 @@ var _default = {
     color: _colors["default"].text.indigo.primary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    padding: [0, _spacing["default"]['size-1']],
-    marginRight: _spacing["default"]['size-1']
+    padding: [0, _spacing["default"]['size-1']]
   },
   textDisabled: {
     color: _colors["default"].text.indigo.secondary
@@ -73,8 +71,7 @@ var _default = {
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: -_spacing["default"]['size-1'],
-    marginLeft: -_spacing["default"]['size-1']
+    marginLeft: _spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

package/build/Placeholder/Placeholder.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
+var _Text = require("../Text/Text");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -19,26 +19,43 @@ var Placeholder = function Placeholder(_ref) {
       textSize = _ref.textSize,
       round = _ref.round,
       top = _ref.top,
-      bottom = _ref.bottom;
-  return /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    alignItems: "center",
-    className: "".concat(textSize ? classes[textSize] : '').concat(top ? " ".concat(classes["top".concat(top)]) : '').concat(bottom ? " ".concat(classes["bottom".concat(bottom)]) : '')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.placeholder).concat(round ? " ".concat(classes.round) : '')
-  }));
+      bottom = _ref.bottom,
+      className = _ref.className,
+      style = _ref.style,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'light' : _ref$theme;
+  var textSizeClass = textSize ? classes[_Text.oldToNewClassMapper[textSize] || textSize] : '';
+  var marginTopClass = top ? " ".concat(classes["top".concat(top)]) : '';
+  var marginBottomClass = bottom ? " ".concat(classes["bottom".concat(bottom)]) : '';
+  var roundClass = round ? " ".concat(classes.round) : '';
+  var classNameClass = className ? className : '';
+  var containerBaseClasses = "".concat(classes.placeholder, " ").concat(classes[theme]);
+  var containerClasses = "".concat(roundClass, " ").concat(textSizeClass, " ").concat(marginTopClass, " ").concat(marginBottomClass, " ").concat(classNameClass).replace(/\s{2,}/, ' ');
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(containerBaseClasses, " ").concat(containerClasses),
+    style: style
+  });
 };
 
 Placeholder.propTypes = {
   classes: _propTypes["default"].object.isRequired,
 
+  /** Adds placeholder container classes.  */
+  className: _propTypes["default"].string,
+
+  /** Adds placeholder container syles.  */
+  style: _propTypes["default"].object,
+
+  /** Theme of the placeholder, whether light or dark.  */
+  theme: _propTypes["default"].oneOf(['light', 'dark']),
+
   /** Simulates a row of text. It has the same size and line-height as the Text component. */
-  textSize: _propTypes["default"].oneOf(['hero', 'headline', 'heading', 'subheading', 'large', 'standard', 'small', 'micro']),
+  textSize: _propTypes["default"].oneOf(['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'tag', 'bodyXLarge', 'bodyLargeStrong', 'bodyLarge', 'bodyRegularStrong', 'bodyRegular', 'bodySmallStrong', 'bodySmall', 'bodyXSmall', 'hero', 'headline', 'heading', 'subheading', 'large', 'standard', 'small', 'micro']),
 
-  /** Spacing in the top of the placeholder. */
+  /** Spacing in the top of the placeholder. (deprecated) */
   top: _propTypes["default"].oneOf(['xTiny', 'tiny', 'small', 'base', 'medium', 'large', 'xLarge']),
 
-  /** Spacing in the bottom of the placeholder. */
+  /** Spacing in the bottom of the placeholder. (deprecated) */
   bottom: _propTypes["default"].oneOf(['xTiny', 'tiny', 'small', 'base', 'medium', 'large', 'xLarge']),
 
   /** Width of the placeholder. You can use numbers or a string with a percentage. */

package/build/Placeholder/Placeholder.test.js

@@ -30,19 +30,19 @@ describe('Placeholder', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Placeholder["default"], {
       classes: classes
     }));
-    expect(wrapper.prop('className')).toBe('');
+    expect(wrapper.prop('className')).toBe('placeholder light  ');
     wrapper.setProps({
       textSize: 'headline'
     });
-    expect(wrapper.prop('className')).toBe('headline');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 ');
     wrapper.setProps({
       top: 'tiny'
     });
-    expect(wrapper.prop('className')).toBe('headline toptiny');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 toptiny  ');
     wrapper.setProps({
       bottom: 'small'
     });
-    expect(wrapper.prop('className')).toBe('headline toptiny bottomsmall');
+    expect(wrapper.prop('className')).toBe('placeholder light  h2 toptiny  bottomsmall ');
   });
 });
 describe("PlaceholderJSS", function () {