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

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

@@ -7,108 +7,59 @@ Object {
   "alignRight": Object {
     "textAlign": "right",
   },
+  "assistiveError": Object {
+    "color": "#8b1313",
+  },
   "assistiveText": Object {
-    "color": "#aaaaaa",
-    "fontSize": 12,
-    "fontWeight": 300,
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "bottom": Object {
-    "height": 20,
-    "marginTop": 4,
+  "assistiveTextWrap": Object {
+    "display": "flex",
   },
-  "clear": Object {
-    "background": "none",
-    "border": 0,
-    "cursor": "pointer",
-    "height": 24,
-    "margin": 0,
-    "outline": 0,
-    "padding": 3,
-    "position": "absolute",
-    "right": 12,
-    "top": "50%",
-    "transform": "translateY(-50%)",
-    "width": 24,
-    "zIndex": 1,
+  "bottom": Object {
+    "display": "flex",
+    "justifyContent": "space-between",
+    "marginTop": "8px",
   },
   "container": Object {
-    "marginBottom": 8,
     "position": "relative",
   },
   "counter": Object {
-    "color": "#aaaaaa",
+    "color": "#5A5D7B",
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
   "default": Object {},
   "disabled": Object {
     "& $input": Object {
-      "borderColor": "#dddddd",
-      "color": "#dddddd",
-      "paddingTop": 9,
-    },
-    "& $label": Object {
-      "color": "#dddddd",
-    },
-    "& $passIcon": Object {
-      "cursor": "auto",
+      "background": "#EDEDF1",
+      "color": "#878A9F",
     },
   },
   "error": Object {
     "& $input": Object {
-      "background": "rgba(219, 55, 55, 0.04)",
-      "borderColor": "#db3737",
-      "color": "#db3737",
-    },
-    "& $searchField": Object {
-      "borderWidth": 2,
-      "color": "#222222",
-      "paddingLeft": 7,
-    },
-    "& $searchFieldHasIcon": Object {
-      "paddingLeft": 41,
-    },
-  },
-  "errorAssistiveText": Object {
-    "color": "#db3737",
-  },
-  "errorIcon": Object {
-    "marginBottom": -2,
-  },
-  "filled": Object {
-    "& $input": Object {
-      "borderColor": "#222222",
-      "borderWidth": 2,
-      "paddingLeft": 7,
-    },
-    "& $searchFieldHasIcon": Object {
-      "paddingLeft": 41,
+      "boxShadow": "inset 0 0 0 1px #e82020",
     },
   },
   "focus": Object {
     "& $input": Object {
-      "borderColor": "#083cae",
-    },
-    "& $searchField": Object {
-      "borderWidth": 2,
-      "paddingLeft": 7,
-    },
-    "& $searchFieldHasIcon": Object {
-      "paddingLeft": 41,
+      "boxShadow": "inset 0 0 0 2px #0059CD, 0 0 0 8px rgba(0,110,255,0.3) !important",
     },
   },
   "hasClear": Object {
-    "paddingRight": 42,
+    "paddingRight": "48px",
   },
   "hasIcon": Object {
-    "paddingLeft": 42,
+    "paddingLeft": "48px",
   },
   "hasPass": Object {
-    "paddingRight": 42,
+    "paddingRight": "48px",
   },
   "hasRightIcon": Object {
-    "marginRight": 16,
+    "marginRight": "48px",
   },
   "icon": Object {
-    "left": 16,
+    "left": "16px",
     "position": "absolute",
     "top": "50%",
     "transform": "translateY(-50%)",
@@ -123,7 +74,10 @@ Object {
       "margin": 0,
     },
     "&::placeholder": Object {
-      "color": "#aaaaaa",
+      "color": "#5A5D7B",
+    },
+    "&:hover": Object {
+      "boxShadow": "inset 0 0 0 1px #6C6F89",
     },
     "&[type=number]": Object {
       "-moz-appearance": "textfield",
@@ -131,25 +85,22 @@ Object {
     "-webkit-appearance": "none",
     "alignItems": "center",
     "appearance": "none",
-    "background": "#ffffff",
-    "border": "1px solid #dddddd",
-    "borderRadius": 4,
-    "boxShadow": "none",
+    "background": "#fff",
+    "border": "none",
+    "borderRadius": "4px",
+    "boxShadow": "inset 0 0 0 1px #D3D4DC",
     "boxSizing": "border-box",
-    "caretColor": "#083cae",
-    "color": "#222222",
+    "caretColor": "#083CAE",
+    "color": "#080D39",
     "display": "flex",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": 16,
-    "fontWeight": 300,
-    "height": 40,
-    "lineHeight": 1.5,
+    "font": "400 16px/1.5 'OccText', sans-serif",
+    "height": 48,
     "outline": "none",
     "padding": Array [
-      8,
-      16,
+      "4px",
+      "16px",
     ],
-    "transition": "0.3s all",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
     "width": "100%",
   },
   "inputDisabled": Object {
@@ -161,88 +112,50 @@ Object {
     "position": "relative",
   },
   "label": Object {
-    "& a": Object {
-      "color": "#1476fb",
-      "outline": "none",
-      "textDecoration": "none",
-    },
-    "color": "#222222",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": 14,
-    "fontWeight": 300,
-    "lineHeight": 1.5,
-    "transition": "0.3s all",
-  },
-  "left": Object {
-    "float": "left",
+    "color": "#080D39",
+    "font": "400 14px/1.5 'OccText', sans-serif",
   },
-  "passIcon": Object {
-    "background": "none",
-    "border": 0,
-    "cursor": "pointer",
-    "height": 24,
-    "margin": 0,
-    "outline": 0,
-    "padding": 3,
+  "rightButton": Object {
     "position": "absolute",
-    "right": 12,
-    "top": 8,
-    "width": 24,
+    "right": "4px",
+    "top": "50%",
+    "transform": "translateY(-50%)",
     "zIndex": 1,
   },
-  "right": Object {
-    "float": "right",
-  },
-  "searchField": Object {
-    "background": Array [
-      "#ffffff",
-      "!important",
-    ],
-    "borderColor": "#777777",
-    "borderRadius": 24,
-    "height": 48,
-  },
-  "searchFieldHasIcon": Object {},
   "select": Object {
     "& optgroup": Object {
-      "color": "#777777",
-      "fontSize": 14,
-      "fontWeight": "normal",
-      "lineHeight": 1.5,
+      "color": "#5A5D7B",
+      "font": "400 14px/1.5 'OccText', sans-serif",
     },
     "& option": Object {
       "&:disabled": Object {
-        "color": "#aaaaaa",
+        "color": "#878A9F",
       },
-      "color": "#222222",
-      "fontSize": 16,
-      "lineHeight": 1.5,
+      "color": "#080D39",
+      "font": "400 16px/1.5 'OccText', sans-serif",
     },
     "&::-ms-expand": Object {
       "display": "none",
     },
     "&:invalid, & option[value=\\"\\"]": Object {
-      "color": "#aaaaaa",
+      "color": "#878A9F",
     },
-    "paddingRight": 32,
+    "paddingRight": "48px",
   },
   "selectIcon": Object {
-    "background": "none",
-    "border": 0,
-    "height": 24,
-    "margin": 0,
-    "outline": 0,
-    "padding": "3px 0",
     "pointerEvents": "none",
     "position": "absolute",
-    "right": 12,
-    "top": 8,
-    "width": 18,
-    "zIndex": 1,
+    "right": "16px",
+    "top": "50%",
+    "transform": "translateY(-50%)",
   },
   "textarea": Object {
     "alignItems": "flex-start",
     "height": 120,
+    "paddingg": Array [
+      "12px",
+      "16px",
+    ],
     "resize": "none",
   },
   "top": Object {
@@ -250,7 +163,8 @@ Object {
       "clear": "both",
       "content": "\\"\\"",
     },
-    "height": 24,
+    "display": "flex",
+    "marginBottom": "8px",
   },
 }
 `;

package/build/TextField/styles.js

@@ -3,27 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 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 placeholder = _fonts2["default"]['text-field-placeholder'];
+var label = _fonts2["default"]['text-field-label'];
+var assistiveText = _fonts2["default"]['text-field-assistive-text'];
+var TRANSITION = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var border = {
+  DEFAULT: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border["default"]),
+  HOVER: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.hover),
+  FOCUS: "inset 0 0 0 2px ".concat(_colors["default"]['text-field'].border.focus),
+  ERROR: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.error)
+};
 
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
 var _default = {
   container: {
-    position: 'relative',
-    marginBottom: _spacing["default"].tiny
+    position: 'relative'
   },
   top: {
-    height: _spacing["default"].base,
+    display: 'flex',
+    marginBottom: _spacing["default"]['size-2'],
     '&:after': {
       content: '""',
       clear: 'both'
@@ -32,75 +50,27 @@ var _default = {
   "default": {},
   disabled: {
     '& $input': {
-      borderColor: _colors["default"].inkLightest,
-      color: _colors["default"].inkLightest,
-      paddingTop: 9
-    },
-    '& $label': {
-      color: _colors["default"].inkLightest
-    },
-    '& $passIcon': {
-      cursor: 'auto'
+      background: _colors["default"]['text-field'].bg.disabled,
+      color: _colors["default"].text.corp.disabled
     }
   },
   focus: {
     '& $input': {
-      borderColor: _colors["default"].prim
-    },
-    '& $searchField': {
-      borderWidth: 2,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
+      boxShadow: "".concat(border.FOCUS, ", ").concat(_shadows["default"]['focus-bright-blue'], " !important")
     }
   },
   error: {
     '& $input': {
-      borderColor: _colors["default"].error,
-      color: _colors["default"].errorText,
-      background: (0, _hexRgba["default"])(_colors["default"].errorText, 4)
-    },
-    '& $searchField': {
-      borderWidth: 2,
-      color: _colors["default"].ink,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
-    }
-  },
-  filled: {
-    '& $input': {
-      borderColor: _colors["default"].grey900,
-      borderWidth: 2,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
+      boxShadow: border.ERROR
     }
   },
   label: {
-    fontWeight: 300,
-    fontFamily: _fonts["default"].body,
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: _colors["default"].ink,
-    transition: '0.3s all',
-    '& a': {
-      color: _colors["default"].blue,
-      textDecoration: 'none',
-      outline: 'none'
-    }
-  },
-  left: {
-    "float": 'left'
-  },
-  right: {
-    "float": 'right'
+    font: objectToFontValue(label),
+    color: _colors["default"].text.corp.primary
   },
   counter: {
-    color: _colors["default"].inkLighter
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
   inputWrap: {
     boxSizing: 'border-box',
@@ -111,24 +81,21 @@ var _default = {
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    height: 40,
-    color: _colors["default"].ink,
-    fontFamily: _fonts["default"].body,
-    fontWeight: 300,
-    fontSize: 16,
-    lineHeight: 1.5,
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    borderRadius: 4,
-    padding: [_spacing["default"].tiny, _spacing["default"].small],
-    boxShadow: 'none',
+    height: 48,
+    color: _colors["default"].text.corp.primary,
+    font: objectToFontValue(placeholder),
+    background: _colors["default"]['text-field'].bg["default"],
+    border: 'none',
+    borderRadius: _borderRadius["default"]['br-xs'],
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-4']],
+    boxShadow: border.DEFAULT,
     outline: 'none',
-    transition: '0.3s all',
+    transition: TRANSITION,
     appearance: 'none',
     '-webkit-appearance': 'none',
-    caretColor: _colors["default"].prim,
+    caretColor: _colors["default"].border.brand["default"],
     '&::placeholder': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.secondary
     },
     '&::-webkit-outer-spin-button': {
       '-webkit-appearance': 'none',
@@ -140,6 +107,9 @@ var _default = {
     },
     '&[type=number]': {
       '-moz-appearance': 'textfield'
+    },
+    '&:hover': {
+      boxShadow: border.HOVER
     }
   },
   inputDisabled: {
@@ -147,118 +117,80 @@ var _default = {
     whiteSpace: 'nowrap'
   },
   hasRightIcon: {
-    marginRight: _spacing["default"].small
+    marginRight: _spacing["default"]['size-8']
   },
   select: {
     '&::-ms-expand': {
       display: 'none'
     },
-    paddingRight: 32,
+    paddingRight: _spacing["default"]['size-8'],
     '& optgroup': {
-      fontSize: 14,
-      fontWeight: 'normal',
-      lineHeight: 1.5,
-      color: _colors["default"].inkLight
+      font: objectToFontValue(label),
+      color: _colors["default"].text.corp.secondary
     },
     '& option': {
-      fontSize: 16,
-      lineHeight: 1.5,
-      color: _colors["default"].ink,
+      font: objectToFontValue(placeholder),
+      color: _colors["default"].text.corp.primary,
       '&:disabled': {
-        color: _colors["default"].inkLighter
+        color: _colors["default"].text.corp.disabled
       }
     },
     '&:invalid, & option[value=""]': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.disabled
     }
   },
   textarea: {
     resize: 'none',
+    paddingg: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     height: 120,
     alignItems: 'flex-start'
   },
   hasIcon: {
-    paddingLeft: 42
+    paddingLeft: _spacing["default"]['size-8']
   },
   hasPass: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
   icon: {
     position: 'absolute',
-    left: _spacing["default"].small,
+    left: _spacing["default"]['size-4'],
     top: '50%',
     transform: 'translateY(-50%)'
   },
-  passIcon: {
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 3,
-    margin: 0,
+  rightButton: {
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
-    cursor: 'pointer'
+    right: _spacing["default"]['size-1'],
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 1
   },
   selectIcon: {
-    width: 18,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: '3px 0',
-    margin: 0,
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
+    right: _spacing["default"]['size-4'],
+    top: '50%',
+    transform: 'translateY(-50%)',
     pointerEvents: 'none'
   },
   hasClear: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
-  clear: _defineProperty({
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 0,
-    margin: 0,
-    position: 'absolute',
-    right: 12,
-    top: '50%',
-    transform: 'translateY(-50%)',
-    zIndex: 1,
-    outline: 0,
-    cursor: 'pointer'
-  }, "padding", 3),
   alignRight: {
     textAlign: 'right'
   },
-  assistiveText: {
-    color: _colors["default"].inkLighter,
-    fontSize: 12,
-    fontWeight: 300
+  assistiveTextWrap: {
+    display: 'flex'
   },
-  errorAssistiveText: {
-    color: _colors["default"].errorText
+  assistiveText: {
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
-  errorIcon: {
-    marginBottom: -2
+  assistiveError: {
+    color: _colors["default"].text.error
   },
   bottom: {
-    height: 20,
-    marginTop: 4
-  },
-  searchField: {
-    height: _spacing["default"].large,
-    borderRadius: _spacing["default"].base,
-    borderColor: _colors["default"].grey600,
-    background: [_colors["default"].bgWhite, '!important']
-  },
-  searchFieldHasIcon: {}
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginTop: _spacing["default"]['size-2']
+  }
 };
 exports["default"] = _default;