@occmundial/occ-atomic 3.0.0-beta.4 → 3.0.0-beta.40

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/Radio/Radio.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
@@ -52,6 +54,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
       selected: props.selected
     };
     _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -75,6 +78,20 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(option.value);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e, option) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        this.onChange(option);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -87,6 +104,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id = _this$props.id,
           textOverflow = _this$props.textOverflow,
           className = _this$props.className,
+          alignLeft = _this$props.alignLeft,
           style = _this$props.style;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id
@@ -94,7 +112,11 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
-          tabIndex: -1,
+          tabIndex: option.disabled ? -1 : 0,
+          onKeyDown: _this2.handleKeyDown,
+          onKeyUp: function onKeyUp(e) {
+            return _this2.handleKeyUp(e, option);
+          },
           "data-testid": option.testId
         }, option.testId && {
           'data-value': selected == option.value ? 1 : 0
@@ -105,16 +127,26 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           },
           style: style
         }), /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.radio,
-          id: option.trk
-        }), option.label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+          className: classes.radioWrap
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radio
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radioOuter
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radioInner
+        }))), !!(option.label || option.right || option.tag) && /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.labelWrap
+        }, option.label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
-          className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
+          className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           corpSecondary: true,
           className: classes.right
-        }, option.right));
+        }, option.right), option.tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          theme: "link",
+          className: classes.tag
+        }, option.tag)));
       }));
     }
   }]);
@@ -139,6 +171,7 @@ Radio.propTypes = {
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     label: _propTypes["default"].string,
     right: _propTypes["default"].string,
+    tag: _propTypes["default"].string,
     trk: _propTypes["default"].string,
 
     /** The testId property adds the data attribute data-testid to
@@ -146,6 +179,9 @@ Radio.propTypes = {
     testId: _propTypes["default"].string
   })),
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 

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

@@ -6,91 +6,82 @@ exports[`Radio styles matches the snapshot 1`] = `
 Object {
   "active": Object {
     "& $radio": Object {
-      "&:after": Object {
+      "& $radioInner": Object {
         "background": "#0059CD",
       },
-      "&:before": Object {
-        "borderColor": "#0059CD",
-        "borderWidth": 2,
+      "& $radioOuter": Object {
+        "boxShadow": "inset 0 0 0 2px #0059CD",
       },
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
   "cont": Object {
     "&$active": Object {
       "&:active": Object {
-        "& $radio:after": Object {
+        "& $radio $radioInner": Object {
           "background": "#083CAE",
         },
-        "& $radio:before": Object {
-          "borderColor": "#0047A5",
-          "borderWidth": "3px",
-          "boxShadow": "initial",
+        "& $radio $radioOuter": Object {
+          "boxShadow": "inset 0 0 0 3px #0047A5 !important",
         },
       },
-      "&:focus $radio:before": Object {
-        "borderColor": "#0059CD",
-        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
-      },
       "&:hover": Object {
-        "& $radio:after": Object {
+        "& $radio $radioInner": Object {
           "background": "#083CAE",
         },
-        "& $radio:before": Object {
-          "borderColor": "#0047A5",
-          "boxShadow": "initial",
+        "& $radio $radioOuter": Object {
+          "boxShadow": "inset 0 0 0 2px #0047A5",
         },
       },
     },
-    "&:not($active)": Object {
-      "&:active $radio:before": Object {
-        "borderColor": "#6C6F89",
-        "borderWidth": "2px",
-        "boxShadow": "initial",
-      },
-      "&:focus $radio:before": Object {
-        "borderColor": "#D3D4DC",
-        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
-      },
-      "&:hover $radio:before": Object {
-        "borderColor": "#6C6F89",
-        "boxShadow": "initial",
-      },
+    "&:active $radio $radioOuter": Object {
+      "boxShadow": "inset 0 0 0 2px #6C6F89",
+    },
+    "&:focus-visible $radio": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:hover $radio $radioOuter": Object {
+      "boxShadow": "inset 0 0 0 1px #6C6F89",
     },
-    "alignItems": "start",
+    "alignItems": "flex-start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": "8px",
-    "paddingTop": "8px",
   },
   "disabled": Object {
-    "& :not($radio)": Object {
-      "opacity": 0.4,
+    "& $radio $radioInner": Object {
+      "background": "#EDEDF1",
+    },
+    "& $radio $radioOuter": Object {
+      "background": "#EDEDF1",
     },
     "&$active": Object {
-      "& $radio:after": Object {
+      "& $radio $radioInner": Object {
         "background": "#8DA5DA",
       },
-      "& $radio:before": Object {
-        "borderColor": "#8DA5DA",
-      },
-    },
-    "&:not($active)": Object {
-      "& $radio:after": Object {
-        "background": "#EDEDF1",
-      },
-      "& $radio:before": Object {
-        "background": "#EDEDF1",
+      "& $radio $radioOuter": Object {
+        "boxShadow": "inset 0 0 0 2px #8DA5DA",
       },
     },
     "pointerEvents": "none",
   },
   "label": Object {
     "cursor": "pointer",
-    "flex": "1",
-    "float": "left",
-    "marginLeft": "8px",
+    "flex": 1,
+    "marginLeft": "12px",
+    "pointerEvents": "none",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flex": 1,
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -98,39 +89,49 @@ Object {
     "whiteSpace": "nowrap",
   },
   "radio": Object {
-    "&:after": Object {
-      "background": "#fff",
-      "borderRadius": "50%",
-      "boxSizing": "border-box",
-      "content": "\\"\\"",
-      "height": 10,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 10,
-    },
-    "&:before": Object {
-      "background": "#fff",
-      "border": "1px solid #D3D4DC",
-      "borderRadius": "50%",
-      "boxSizing": "border-box",
-      "content": "\\"\\"",
-      "height": 20,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "width": 20,
-    },
-    "height": "24px",
-    "position": "relative",
-    "width": "24px",
+    "alignItems": "center",
+    "borderRadius": "9999px",
+    "display": "grid",
+    "height": 20,
+    "justifyContent": "center",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
+  "radioInner": Object {
+    "background": "#fff",
+    "borderRadius": "9999px",
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "height": 10,
+    "margin": 5,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 10,
+  },
+  "radioOuter": Object {
+    "background": "#fff",
+    "borderRadius": "9999px",
+    "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "height": 20,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
+  "radioWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flexShrink": 0,
+    "height": 48,
+    "justifyContent": "center",
+    "width": 52,
   },
   "right": Object {
-    "float": "right",
     "marginLeft": "8px",
+    "pointerEvents": "none",
+  },
+  "tag": Object {
+    "marginLeft": "8px",
+    "pointerEvents": "none",
   },
 }
 `;