@occmundial/occ-atomic 2.0.0-beta.9 → 3.0.0-beta.1

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

@@ -5,59 +5,91 @@ exports[`Droplist matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Droplist styles matches the snapshot 1`] = `
 Object {
   "block": Object {
-    "background": "#ffffff",
-    "border": "1px solid #dddddd",
-    "borderRadius": 4,
+    "background": "#fff",
+    "border": "1px solid #D3D4DC",
+    "borderRadius": "4px",
+    "boxShadow": "0 9px 12px -5px rgba(8,13,56,0.12), 0 10px 32px 0 rgba(9,61,173,0.12)",
     "overflow": "hidden",
+    "padding": "8px",
   },
-  "extraText": Object {
-    "marginLeft": 8,
+  "corpDisabled": Object {
+    "color": "#878A9F",
   },
-  "extraTextColor": Object {
-    "color": "#0946CB",
+  "disabled": Object {
+    "pointerEvents": "none",
+  },
+  "extraText": Object {
+    "color": "#083CAE",
+    "display": "inline-block",
+    "font": "400 10px/1.5 'OccText', sans-serif",
+    "marginLeft": "4px",
   },
   "group": Object {
+    "display": "inline-block",
     "padding": Array [
-      16,
-      16,
-      4,
+      "8px",
+      "16px",
+      0,
     ],
   },
-  "icon": Object {
-    "marginRight": 8,
-    "position": "absolute",
-    "top": 12,
+  "groupText": Object {
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "iconText": Object {
-    "display": "inline-block",
-    "marginLeft": 24,
+  "highlighted": Object {
+    "background": "hsl(221 91.2% 35.7% / 0.05)",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
+  "icon": Object {
+    "marginRight": "8px",
   },
   "item": Object {
+    "&:active, &:focus": Object {
+      "& > $rightText": Object {
+        "color": "#080D39",
+      },
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
+    },
     "&:hover": Object {
-      "background": "#fafafa",
+      "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
+    "alignItems": "center",
+    "borderRadius": "4px",
     "display": "flex",
     "justifyContent": "space-between",
     "padding": Array [
-      8,
-      16,
+      "12px",
+      "16px",
     ],
     "position": "relative",
     "transition": "0.1s all",
   },
+  "itemContainer": Object {
+    "alignItems": "center",
+    "display": "flex",
+  },
   "itemPointer": Object {
     "cursor": "pointer",
   },
+  "mainText": Object {
+    "color": "#080D39",
+    "display": "inline-block",
+    "font": "400 16px/1.5 'OccText', sans-serif",
+  },
   "onFocus": Object {
     "&:hover": Object {
-      "background": "#e4edff",
+      "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "background": "#e4edff",
+    "background": "hsl(221 91.2% 35.7% / 0.1)",
   },
   "right": Object {
-    "float": "right",
-    "marginLeft": 16,
-    "transition": "0.1s all",
+    "marginLeft": "16px",
+  },
+  "rightText": Object {
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+  },
+  "text": Object {
+    "margin": 0,
   },
 }
 `;

package/build/Droplist/styles.js

@@ -5,70 +5,100 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var gutter = _spacing["default"].gutter,
-    tiny = _spacing["default"].tiny,
-    small = _spacing["default"].small,
-    base = _spacing["default"].base,
-    xTiny = _spacing["default"].xTiny;
-var primLighter = _colors["default"].primLighter,
-    grey50 = _colors["default"].grey50,
-    grey200 = _colors["default"].grey200,
-    bgWhite = _colors["default"].bgWhite,
-    textLink = _colors["default"].textLink;
 var _default = {
   block: {
-    background: bgWhite,
-    border: "1px solid ".concat(grey200),
-    borderRadius: xTiny,
-    overflow: 'hidden'
+    background: _colors["default"]['text-field'].bg["default"],
+    border: "1px solid ".concat(_colors["default"]['text-field'].border["default"]),
+    borderRadius: _borderRadius["default"]['br-xs'],
+    overflow: 'hidden',
+    padding: _spacing["default"]['size-2'],
+    boxShadow: _shadows["default"]['elevation-elevation-4']
+  },
+  text: {
+    margin: 0
   },
   group: {
-    padding: [small, small, xTiny]
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4'], 0],
+    display: 'inline-block'
+  },
+  groupText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label'])
   },
   item: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: [tiny, small],
+    alignItems: 'center',
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     transition: '0.1s all',
+    borderRadius: _borderRadius["default"]['br-xs'],
     position: 'relative',
     '&:hover': {
-      background: grey50
+      background: _colors["default"].dropdown.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].dropdown.bg.active,
+      '& > $rightText': {
+        color: _colors["default"].text.corp.primary
+      }
     }
   },
   itemPointer: {
     cursor: 'pointer'
   },
+  disabled: {
+    pointerEvents: 'none'
+  },
   right: {
-    "float": 'right',
-    transition: '0.1s all',
-    marginLeft: small
+    marginLeft: _spacing["default"]['size-4']
+  },
+  rightText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label']),
+    color: _colors["default"].text.corp.secondary
   },
   onFocus: {
-    background: primLighter,
+    background: _colors["default"].dropdown.bg.active,
     '&:hover': {
-      background: primLighter
+      background: _colors["default"].dropdown.bg.active
     }
   },
   icon: {
-    marginRight: tiny,
-    position: 'absolute',
-    top: gutter
+    marginRight: _spacing["default"]['size-2']
   },
-  iconText: {
+  mainText: {
     display: 'inline-block',
-    marginLeft: base
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder']),
+    color: _colors["default"].text.corp.primary
+  },
+  corpDisabled: {
+    color: _colors["default"].text.corp.disabled
   },
   extraText: {
-    marginLeft: tiny
+    marginLeft: _spacing["default"]['size-1'],
+    display: 'inline-block',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['heading-tag']),
+    color: _colors["default"].text.indigo.primary
+  },
+  highlighted: {
+    background: _colors["default"].bg.action.secondary["default"],
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-placeholder'])
   },
-  extraTextColor: {
-    color: textLink
+  itemContainer: {
+    display: 'flex',
+    alignItems: 'center'
   }
 };
 exports["default"] = _default;

package/build/Fab/Fab.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ *
+ * A floating action button appears in front of all screen content as a circular shape with an icon in its center.
+ */
+var Fab = function Fab(props) {
+  var size = props.size,
+      classes = props.classes,
+      className = props.className,
+      testId = props.testId,
+      icon = props.icon,
+      onClick = props.onClick,
+      href = props.href,
+      target = props.target,
+      rel = props.rel,
+      disabled = props.disabled,
+      id = props.id;
+  var classNames = classes.fab;
+  if (className) classNames += " ".concat(className);
+  if (disabled) classNames += " ".concat(classes.disabled);
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    size: size,
+    icon: icon,
+    onClick: onClick,
+    href: href,
+    target: target,
+    rel: rel,
+    disabled: disabled,
+    round: true,
+    testId: testId,
+    className: classNames,
+    id: id,
+    theme: "tertiary"
+  });
+};
+
+Fab.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+
+  /** Use the name of any of the icons available in the library. */
+  icon: _propTypes["default"].string.isRequired,
+
+  /** The fab has three different sizes: sm, md, lg. */
+  size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
+
+  /** It disables the button. */
+  disabled: _propTypes["default"].bool,
+
+  /** The function to call when the button is clicked. */
+  onClick: _propTypes["default"].func,
+
+  /** Optionally, you can set the href property and use it like a link. */
+  href: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the target. */
+  target: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the rel attribute. */
+  rel: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
+};
+var _default = Fab;
+exports["default"] = _default;

package/build/Fab/Fab.test.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
+
+var _Fab = _interopRequireDefault(require("./Fab"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var reduceClasses = function reduceClasses(prev, curr) {
+  return Object.assign({}, prev, _defineProperty({}, curr, curr));
+};
+
+var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
+describe('FAB', function () {
+  it('matches the snapshot', function () {
+    var wrapper = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      icon: "testing",
+      theme: "primary",
+      classes: classes
+    })).toJSON();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('returns a Button with an icon', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      classes: classes,
+      icon: "testing"
+    }));
+    expect(wrapper.find('button').length).toBe(1);
+    expect(wrapper.find('button span Jss(Icon)').length).toBe(1);
+    expect(wrapper.find('a').length).toBe(0);
+  });
+  it('returns an anchor', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      classes: classes,
+      href: "http://occ.com.mx",
+      icon: "testing"
+    }));
+    expect(wrapper.find('button').length).toBe(0);
+    expect(wrapper.find('a').length).toBe(1);
+  });
+  it('has the right size', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+      classes: classes,
+      icon: "testing",
+      size: "md"
+    }));
+    expect(wrapper.find('button').prop('className').indexOf('md')).not.toBe(-1);
+    expect(wrapper.find('button').prop('className').indexOf('lg')).toBe(-1);
+    wrapper.setProps({
+      size: 'lg'
+    });
+    expect(wrapper.find('button').prop('className').indexOf('md')).toBe(-1);
+    expect(wrapper.find('button').prop('className').indexOf('lg')).not.toBe(-1);
+  });
+});

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FAB matches the snapshot 1`] = `
+<button
+  className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+  disabled={false}
+>
+  <span
+    className="Button-cont-0-1-29 Button-cont-0-1-2"
+  >
+    <span
+      className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"
+    />
+    
+  </span>
+</button>
+`;

package/build/Fab/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _Fab = _interopRequireDefault(require("./Fab"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_Fab["default"]);
+
+exports["default"] = _default;

package/build/Fab/styles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  fab: {
+    background: "".concat(_colors["default"].bg.surface["default"], " !important"),
+    outline: "1px solid ".concat(_colors["default"].border["default"]["default"]),
+    outlineOffset: '-1px',
+    boxShadow: _shadows["default"]["elevation-elevation-4"],
+    transition: '0.3s all, 0s outline, 0s outline-offset',
+    '&:hover': {
+      outlineColor: _colors["default"].border["default"].bold,
+      background: "".concat(_colors["default"].bg["default"], " !important")
+    },
+    '&:active, &:focus': {
+      outline: "2px solid ".concat(_colors["default"].border["default"].bold),
+      outlineOffset: '-2px',
+      background: "".concat(_colors["default"].bg["default"], " !important")
+    },
+    '&$disabled': {
+      color: _colors["default"].text.indigo.secondary,
+      cursor: 'not-allowed',
+      outlineColor: _colors["default"].border["default"].subtle
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-corp'],
+      outlineColor: _colors["default"].border["default"]["default"]
+    }
+  },
+  disabled: {
+    cursor: 'default',
+    pointerEvents: 'none'
+  }
+};
+exports["default"] = _default;

package/build/Pager/Pager.js

@@ -218,20 +218,28 @@ var Pager = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("ul", {
         className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
       }, /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.prev).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
+        className: "".concat(classes.btn, " ").concat(classes.listItemPrevious).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handlePrevPage
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.prev
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "arrowDown",
+        iconName: "chevron-left",
+        width: 14,
+        height: 14,
         colors: ['#adb4bb']
-      }), " ", previousLabel), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.next).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
+      }), previousLabel)), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
+        className: "".concat(classes.btn, " ").concat(classes.listItemNext).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
         tabIndex: "0",
         onClick: this.handleNextPage
-      }, nextLabel, " ", /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "arrowDown",
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.next
+      }, nextLabel, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "chevron-right",
+        width: 14,
+        height: 14,
         colors: ['#adb4bb']
-      })));
+      }))));
     }
   }]);
 

package/build/Pager/Pager.test.js

@@ -30,10 +30,10 @@ describe("Pager", function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       classes: classes
     }));
-    expect(wrapper.find('.prev').length).toBe(1);
-    expect(wrapper.find('.prev').text()).toEqual('<Jss(Icon) /> Previous');
-    expect(wrapper.find('.next').length).toBe(1);
-    expect(wrapper.find('.next').text()).toEqual('Next <Jss(Icon) />');
+    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) />');
   });
   it('changes to previous page', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
@@ -41,7 +41,7 @@ describe("Pager", function () {
       classes: classes
     }));
     expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.prev').simulate('click', {
+    wrapper.find('.listItemPrevious').simulate('click', {
       target: {}
     });
     expect(wrapper.state('selected')).toEqual(2);
@@ -52,7 +52,7 @@ describe("Pager", function () {
       classes: classes
     }));
     expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.next').simulate('click', {
+    wrapper.find('.listItemNext').simulate('click', {
       target: {}
     });
     expect(wrapper.state('selected')).toEqual(4);
@@ -84,11 +84,11 @@ describe("Pager", function () {
       initialPage: 1,
       classes: classes
     }));
-    expect(wrapper.find('.prev').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(true);
     wrapper.setProps({
       forcePage: 5
     });
-    expect(wrapper.find('.prev').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(false);
   });
   it('disables the next page button', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
@@ -96,11 +96,11 @@ describe("Pager", function () {
       initialPage: 5,
       classes: classes
     }));
-    expect(wrapper.find('.next').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(true);
     wrapper.setProps({
       forcePage: 1
     });
-    expect(wrapper.find('.next').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(false);
   });
   it('calls the onPageChange function', function () {
     var onPageChange = jest.fn();
@@ -108,7 +108,7 @@ describe("Pager", function () {
       onPageChange: onPageChange,
       classes: classes
     }));
-    wrapper.find('.next').simulate('click', {
+    wrapper.find('.listItemNext').simulate('click', {
       target: {}
     });
     expect(onPageChange.mock.calls.length).toBe(1);

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

@@ -15,7 +15,6 @@ Object {
     "border": "1px solid #bfbfbf",
     "borderRadius": "5px",
     "cursor": "pointer",
-    "display": "inline-block",
     "fontFamily": "'OccText', sans-serif",
     "outline": "0",
     "padding": "3px 13px",
@@ -25,24 +24,28 @@ Object {
     "opacity": "0.4",
     "pointerEvents": "none",
   },
-  "next": Object {
-    "& span": Object {
-      "transform": "rotate(-90deg)",
-    },
+  "listItemNext": Object {
     "marginLeft": "15px",
   },
+  "listItemPrevious": Object {
+    "marginRight": "15px",
+  },
+  "next": Object {
+    "alignItems": "center",
+    "display": "flex",
+  },
   "pager": Object {
+    "alignItems": "center",
     "color": "#727272",
+    "display": "flex",
     "fontFamily": "'OccText', sans-serif",
     "fontSize": "14px",
     "listStyle": "none",
     "paddingLeft": "0",
   },
   "prev": Object {
-    "& span": Object {
-      "transform": "rotate(90deg)",
-    },
-    "marginRight": "15px",
+    "alignItems": "center",
+    "display": "flex",
   },
 }
 `;

package/build/Pager/styles.js

@@ -15,12 +15,13 @@ var _default = {
   pager: {
     listStyle: 'none',
     paddingLeft: '0',
+    display: 'flex',
+    alignItems: 'center',
     fontFamily: _fonts["default"].body,
     color: _colors["default"].grey7,
     fontSize: '14px'
   },
   btn: {
-    display: 'inline-block',
     fontFamily: _fonts["default"].body,
     border: "1px solid ".concat(_colors["default"].grey1),
     borderRadius: '5px',
@@ -37,16 +38,18 @@ var _default = {
     }
   },
   prev: {
-    marginRight: '15px',
-    '& span': {
-      transform: 'rotate(90deg)'
-    }
+    display: 'flex',
+    alignItems: 'center'
+  },
+  listItemPrevious: {
+    marginRight: '15px'
   },
   next: {
-    marginLeft: '15px',
-    '& span': {
-      transform: 'rotate(-90deg)'
-    }
+    display: 'flex',
+    alignItems: 'center'
+  },
+  listItemNext: {
+    marginLeft: '15px'
   },
   disabled: {
     pointerEvents: 'none',