@occmundial/occ-atomic 3.0.0-beta.2 → 3.0.0-beta.20

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

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

package/build/Tip/styles.js

@@ -5,61 +5,115 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+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;
+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 _default = {
-  container: {
-    padding: small,
-    borderRadius: radius,
-    alignItems: 'center'
-  },
+  container: _defineProperty({
+    padding: _spacing["default"]['size-3'],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    minHeight: '56px',
+    alignItems: 'center',
+    outlineOffset: '-1px'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']]
+  }),
   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)
   },
-  icon: {
-    marginRight: tiny
+  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
   },
-  text: {
-    maxWidth: '100%'
+  textError: {
+    color: _colors["default"].text.error,
+    textDecorationColor: _colors["default"].text.error
   },
-  textWithIcon: {
-    maxWidth: "calc(100% - ".concat(medium, "px)")
+  textPromote: {
+    color: _colors["default"].text.white.primary,
+    textDecorationColor: _colors["default"].text.white.primary
   },
-  spacedClose: {
-    marginRight: large
+  icon: {
+    marginRight: _spacing["default"]['size-2'],
+    flexShrink: 0
+  },
+  closeIconMargin: {
+    marginLeft: _spacing["default"]['size-4']
+  },
+  closeIconSmallMargin: {
+    marginLeft: _spacing["default"]['size-3']
   },
   cta: {
     textDecoration: 'underline',
-    cursor: 'pointer'
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    cursor: 'pointer',
+    textWrap: 'nowrap',
+    margin: [_spacing["default"]['size-2'], 0, 0],
+    alignSelf: 'start'
+  },
+  ctaAlert: {
+    margin: [0, 0, 0, _spacing["default"]['size-4']],
+    alignSelf: 'center'
+  },
+  ctaBanner: {
+    margin: [0, 0, 0, _spacing["default"]['size-2']],
+    alignSelf: 'center'
+  },
+  normalText: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    display: 'inline-block',
+    margin: 0
+  },
+  textContainer: {
+    flex: 1
+  },
+  growText: {
+    flexGrow: 1
+  },
+  maxWidth: {
+    maxWidth: '1200px',
+    margin: [0, 'auto']
   }
 };
 exports["default"] = _default;

package/build/tokens/colors.json

@@ -343,7 +343,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "neutral": {
       "bg": "#000",
@@ -402,7 +402,7 @@
     },
     "info": {
       "bg": "#e3efff",
-      "border": "#e3efff"
+      "border": "#b9d7ff"
     },
     "featured": {
       "border": "rgba(255,255,255,0.2)",
@@ -567,7 +567,7 @@
       "subtle": "#d7f6e3"
     },
     "info": {
-      "subtle": "#e3efff"
+      "subtle": "#b9d7ff"
     }
   },
   "text": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.20",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",
@@ -120,5 +120,8 @@
     "roots": [
       "<rootDir>/lib/"
     ]
+  },
+  "volta": {
+    "node": "16.18.0"
   }
 }

package/build/Banner/styles.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-var _grid = _interopRequireDefault(require("../subatomic/grid"));
-
-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 _default = {
-  container: {
-    padding: _spacing["default"].small,
-    backgroundColor: _colors["default"].ink
-  },
-  textBanner: {
-    display: 'inline-block'
-  },
-  textFlex: _defineProperty({
-    textAlign: 'start'
-  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    textAlign: 'center'
-  }),
-  iconFlex: _defineProperty({
-    paddingLeft: _spacing["default"].small,
-    paddingTop: _spacing["default"].small
-  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    padding: 0
-  }),
-  icon: {
-    cursor: 'pointer'
-  }
-};
-exports["default"] = _default;