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

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

@@ -4,44 +4,111 @@ exports[`Tip matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Tip styles matches the snapshot 1`] = `
 Object {
+  "bannerContent": Object {
+    "margin": "auto",
+    "maxWidth": "1200px",
+  },
+  "closeIcon": Object {
+    "marginLeft": "16px",
+  },
   "container": Object {
     "alignItems": "center",
-    "borderRadius": 6,
-    "padding": 16,
+    "borderRadius": "4px",
+    "minHeight": "56px",
+    "outlineOffset": "-1px",
+    "padding": Array [
+      "8px",
+      "16px",
+    ],
   },
   "cta": Object {
     "cursor": "pointer",
+    "font": "400 14px/1.5 'OccText', sans-serif",
     "textDecoration": "underline",
+    "textWrap": "nowrap",
+  },
+  "ctaLarge": Object {
+    "alignSelf": "center",
+    "marginLeft": "16px",
+  },
+  "ctaSmall": Object {
+    "alignSelf": "start",
+    "margin": Array [
+      "8px",
+      0,
+      0,
+    ],
   },
   "error": Object {
-    "backgroundColor": "#fcebeb",
+    "backgroundColor": "#fce8e8",
+    "outline": "1px solid #FBDFDF",
   },
   "icon": Object {
-    "marginRight": 8,
+    "flexShrink": 0,
+    "marginRight": "8px",
   },
   "info": Object {
-    "backgroundColor": "#efebf7",
+    "backgroundColor": "#e3efff",
+    "outline": "1px solid #b9d7ff",
+  },
+  "largePadding": Object {
+    "padding": "12px",
   },
   "noBorderRadius": Object {
     "borderRadius": 0,
   },
+  "normalText": Object {
+    "display": "inline-block",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "margin": 0,
+  },
   "promote": Object {
-    "backgroundColor": "#222222",
+    "backgroundColor": "#000",
+    "outline": "1px solid rgba(255,255,255,0.2)",
   },
-  "spacedClose": Object {
-    "marginRight": 48,
+  "small": Object {
+    "maxWidth": 360,
+    "padding": "12px",
+  },
+  "smallPadding": Object {
+    "padding": "8px",
   },
   "success": Object {
-    "backgroundColor": "#e6f5eb",
+    "backgroundColor": "#ebfbf1",
+    "outline": "1px solid #d7f6e3",
   },
   "text": Object {
     "maxWidth": "100%",
   },
-  "textWithIcon": Object {
-    "maxWidth": "calc(100% - 32px)",
+  "textContainer": Object {
+    "padding": Array [
+      "12px",
+      0,
+    ],
+  },
+  "textError": Object {
+    "color": "#8b1313",
+    "textDecorationColor": "#8b1313",
+  },
+  "textInfo": Object {
+    "color": "#083CAE",
+    "textDecorationColor": "#083CAE",
+  },
+  "textPromote": Object {
+    "color": "#fff",
+    "textDecorationColor": "#fff",
+  },
+  "textSuccess": Object {
+    "color": "#16542e",
+    "textDecorationColor": "#16542e",
+  },
+  "textWarning": Object {
+    "color": "#664a0e",
+    "textDecorationColor": "#664a0e",
   },
   "warning": Object {
-    "backgroundColor": "#fffaed",
+    "backgroundColor": "#fff8e9",
+    "outline": "1px solid #fff1d3",
   },
 }
 `;

package/build/Tip/styles.js

@@ -5,61 +5,114 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var infoLight = _colors["default"].infoLight,
-    warningLight = _colors["default"].warningLight,
-    successLight = _colors["default"].successLight,
-    errorLight = _colors["default"].errorLight,
-    grey900 = _colors["default"].grey900;
-var radius = _spacing["default"].radius,
-    large = _spacing["default"].large,
-    medium = _spacing["default"].medium,
-    small = _spacing["default"].small,
-    tiny = _spacing["default"].tiny;
 var _default = {
   container: {
-    padding: small,
-    borderRadius: radius,
-    alignItems: 'center'
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    minHeight: '56px',
+    alignItems: 'center',
+    outlineOffset: '-1px'
   },
   noBorderRadius: {
     borderRadius: 0
   },
   info: {
-    backgroundColor: infoLight
+    backgroundColor: _colors["default"].alert.info.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.info.border)
   },
   warning: {
-    backgroundColor: warningLight
+    backgroundColor: _colors["default"].alert.warning.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.warning.border)
   },
   success: {
-    backgroundColor: successLight
+    backgroundColor: _colors["default"].alert.success.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.success.border)
   },
   error: {
-    backgroundColor: errorLight
+    backgroundColor: _colors["default"].alert.error.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.error.border)
   },
   promote: {
-    backgroundColor: grey900
+    backgroundColor: _colors["default"].alert.neutral.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.neutral.border)
+  },
+  textInfo: {
+    color: _colors["default"].text.indigo.primary,
+    textDecorationColor: _colors["default"].text.indigo.primary
+  },
+  textWarning: {
+    color: _colors["default"].text.warning,
+    textDecorationColor: _colors["default"].text.warning
+  },
+  textSuccess: {
+    color: _colors["default"].text.success,
+    textDecorationColor: _colors["default"].text.success
+  },
+  textError: {
+    color: _colors["default"].text.error,
+    textDecorationColor: _colors["default"].text.error
+  },
+  textPromote: {
+    color: _colors["default"].text.white.primary,
+    textDecorationColor: _colors["default"].text.white.primary
   },
   icon: {
-    marginRight: tiny
+    marginRight: _spacing["default"]['size-2'],
+    flexShrink: 0
   },
   text: {
     maxWidth: '100%'
   },
-  textWithIcon: {
-    maxWidth: "calc(100% - ".concat(medium, "px)")
+  closeIcon: {
+    marginLeft: _spacing["default"]['size-4']
   },
-  spacedClose: {
-    marginRight: large
+  smallPadding: {
+    padding: _spacing["default"]['size-2']
+  },
+  largePadding: {
+    padding: _spacing["default"]['size-3']
   },
   cta: {
     textDecoration: 'underline',
-    cursor: 'pointer'
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    cursor: 'pointer',
+    textWrap: 'nowrap'
+  },
+  ctaLarge: {
+    marginLeft: _spacing["default"]['size-4'],
+    alignSelf: 'center'
+  },
+  ctaSmall: {
+    margin: [_spacing["default"]['size-2'], 0, 0],
+    alignSelf: 'start'
+  },
+  normalText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    display: 'inline-block',
+    margin: 0
+  },
+  textContainer: {
+    padding: [_spacing["default"]['size-3'], 0]
+  },
+  small: {
+    maxWidth: 360,
+    padding: _spacing["default"]['size-3']
+  },
+  bannerContent: {
+    maxWidth: '1200px',
+    margin: 'auto'
   }
 };
 exports["default"] = _default;

package/build/tokens/colors.json

@@ -257,7 +257,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5"
+        "hover": "#083CAE"
       }
     },
     "bg": {
@@ -279,7 +279,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "#8DA5DA"
       },
       "border": {
@@ -310,7 +310,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "hsl(221 91.2% 35.7% / 0.1)"
       },
       "border": {
@@ -342,8 +342,8 @@
       "border": "#d7f6e3"
     },
     "info": {
-      "bg": "#f7faff",
-      "border": "#e3efff"
+      "bg": "#e3efff",
+      "border": "#b9d7ff"
     },
     "neutral": {
       "bg": "#000",
@@ -354,7 +354,7 @@
     "track": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "#8DA5DA"
       }
     },
@@ -379,7 +379,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "#8DA5DA"
       },
       "border": {
@@ -401,8 +401,8 @@
       "border": "#fff1d3"
     },
     "info": {
-      "bg": "#f7faff",
-      "border": "#e3efff"
+      "bg": "#e3efff",
+      "border": "#b9d7ff"
     },
     "featured": {
       "border": "rgba(255,255,255,0.2)",
@@ -439,6 +439,30 @@
       }
     }
   },
+  "nav": {
+    "bg": {
+      "inverse": "#083CAE",
+      "default": "#fff"
+    }
+  },
+  "pill": {
+    "selected": {
+      "bg": {
+        "default": "#0059CD",
+        "hover": "#083CAE",
+        "active": "#06308A",
+        "disabled": "#8DA5DA"
+      }
+    },
+    "unselected": {
+      "bg": {
+        "default": "hsl(221 91.2% 35.7% / 0.05)",
+        "hover": "hsl(221 91.2% 35.7% / 0.1)",
+        "active": "hsl(221 91.2% 35.7% / 0.2)",
+        "disabled": "hsl(221 91.2% 35.7% / 0.1)"
+      }
+    }
+  },
   "bg": {
     "action": {
       "primary": {
@@ -469,11 +493,13 @@
       },
       "brand": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
+        "active": "#06308A",
         "disabled": "#8DA5DA",
         "subtle": {
           "default": "#E9EEF8",
-          "hover": "#CAD5EE"
+          "hover": "#CAD5EE",
+          "active": "#ABBDE4"
         }
       },
       "ghost": {
@@ -490,7 +516,7 @@
     "warning": "#fff8e9",
     "error": "#fce8e8",
     "success": "#ebfbf1",
-    "info": "#f7faff",
+    "info": "#e3efff",
     "overlay": "rgba(0,0,0,0.8)",
     "neutral": "#000"
   },
@@ -515,7 +541,8 @@
   },
   "border": {
     "inverse": {
-      "default": "#fff",
+      "bold": "#fff",
+      "default": "rgba(255,255,255,0.5)",
       "subtle": "rgba(255,255,255,0.2)"
     },
     "default": {
@@ -540,7 +567,7 @@
       "subtle": "#d7f6e3"
     },
     "info": {
-      "subtle": "#e3efff"
+      "subtle": "#b9d7ff"
     }
   },
   "text": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "2.0.0",
+  "version": "3.0.0-beta.10",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",