@occmundial/occ-atomic 3.0.0-beta.21 → 3.0.0-beta.22

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.0.0-beta.22](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.21...v3.0.0-beta.22) (2024-06-26)
+
+
+### Features
+
+* Tag compnent and documentation updated ([718378f](https://github.com/occmundial/occ-atomic/commit/718378ffd916c98673a3b10f7b9ba827d806aa1c))
+
 # [3.0.0-beta.21](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.20...v3.0.0-beta.21) (2024-06-25)
 
 

package/build/Tag/Tag.js

@@ -36,9 +36,9 @@ var Tag = function Tag(_ref) {
     alignItems: "center",
     wrap: "noWrap"
   }, iconName && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(classes.icon, " ").concat(size ? classes["".concat(size, "Icon")] : classes.standardIcon, " ").concat(theme ? classes["".concat(theme, "Icon")] : classes.defaultIcon)
+    className: "".concat(classes.icon, " ").concat(size === 'big' ? classes.bigIcon : classes.standardIcon, " ").concat(theme ? classes["".concat(theme, "Icon")] : classes.defaultIcon)
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "".concat(classes.tagText, " ").concat(size ? classes["".concat(size, "TagText")] : classes.standardTagText)
+    className: classes.tagText
   }, children)));
 };
 

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

@@ -12,19 +12,15 @@ Object {
     "background": [Function],
   },
   "big": Object {
-    "borderRadius": 32,
-    "height": 40,
+    "minHeight": "32px",
     "padding": Array [
-      8,
-      16,
+      "8px",
+      "16px",
     ],
   },
   "bigIcon": Object {
-    "height": 18,
-    "width": 18,
-  },
-  "bigTagText": Object {
-    "fontSize": 16,
+    "height": "16px",
+    "width": "16px",
   },
   "default": Object {
     "background": "#f5f5f5",
@@ -34,23 +30,33 @@ Object {
     "background": [Function],
   },
   "error": Object {
-    "background": "#fcebeb",
-    "color": "#db3737",
+    "background": "#fce8e8",
+    "border": "1px solid #FBDFDF",
+    "color": "#8b1313",
   },
   "errorIcon": Object {
     "background": [Function],
   },
+  "featured": Object {
+    "background": "#0059CD",
+    "border": "1px solid rgba(255,255,255,0.2)",
+    "color": "#fff",
+  },
+  "featuredIcon": Object {
+    "background": [Function],
+  },
   "icon": Object {
     "backgroundRepeat": "no-repeat",
     "content": "\\"\\"",
     "display": "inline-block",
     "left": 0,
-    "marginRight": 4,
+    "marginRight": "4px",
     "paddingBottom": 0,
   },
   "info": Object {
-    "backgroundColor": "#efebf7",
-    "color": "#5736ab",
+    "background": "#e3efff",
+    "border": "1px solid #b9d7ff",
+    "color": "#083CAE",
   },
   "infoIcon": Object {
     "background": [Function],
@@ -63,46 +69,39 @@ Object {
     "background": [Function],
   },
   "medium": Object {
-    "height": 32,
     "padding": Array [
-      5,
-      12,
-      7,
-      12,
+      "8px",
+      "12px",
     ],
   },
-  "mediumIcon": Object {
-    "height": 18,
-    "width": 18,
+  "promo": Object {
+    "background": "#080D39",
+    "border": "1px solid rgba(255,255,255,0.2)",
+    "color": "#fff",
   },
-  "mediumTagText": Object {
-    "fontSize": 16,
+  "promoIcon": Object {
+    "background": [Function],
   },
   "standard": Object {
-    "height": 16,
     "padding": Array [
-      1,
-      8,
-      3,
-      8,
+      "2px",
+      "8px",
     ],
   },
   "standardIcon": Object {
-    "height": 12,
-    "width": 12,
-  },
-  "standardTagText": Object {
-    "fontSize": 10,
+    "height": "12px",
+    "width": "12px",
   },
   "success": Object {
-    "background": "#e6f5eb",
-    "color": "#009537",
+    "background": "#ebfbf1",
+    "border": "1px solid #d7f6e3",
+    "color": "#16542e",
   },
   "successIcon": Object {
     "background": [Function],
   },
   "tag": Object {
-    "borderRadius": 16,
+    "borderRadius": "9999px",
     "boxSizing": "border-box",
     "display": "inline-block",
     "lineHeight": "12px",
@@ -113,20 +112,19 @@ Object {
   "tagText": Object {
     "boxSizing": "border-box",
     "display": "inline-block",
-    "fontFamily": "'OccText', sans-serif",
+    "font": "400 10px/1.5 'OccText', sans-serif",
     "fontStretch": "normal",
     "fontStyle": "normal",
-    "fontWeight": "400",
     "letterSpacing": "normal",
-    "lineHeight": 1.5,
     "overflow": "hidden",
     "paddingRight": [Function],
     "position": "relative",
     "textAlign": "center",
   },
   "warning": Object {
-    "background": "#fffaed",
-    "color": "#e69000",
+    "background": "#fff8e9",
+    "border": "1px solid #fff1d3",
+    "color": "#664a0e",
   },
   "warningIcon": Object {
     "background": [Function],

package/build/Tag/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
@@ -11,67 +11,54 @@ var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
 var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _hexRgba = _interopRequireDefault(require("hex-rgba"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var infoLight = _colors["default"].infoLight,
-    infoText = _colors["default"].infoText,
-    successLight = _colors["default"].successLight,
-    successText = _colors["default"].successText,
-    warningLight = _colors["default"].warningLight,
-    warningText = _colors["default"].warningText,
-    errorLight = _colors["default"].errorLight,
-    errorText = _colors["default"].errorText,
-    grey900 = _colors["default"].grey900,
+var tag = _colors2["default"].tag,
+    text = _colors2["default"].text,
+    icon = _colors2["default"].icon;
+
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
+var grey900 = _colors["default"].grey900,
     grey100 = _colors["default"].grey100,
     textLink = _colors["default"].textLink,
     bgWhite = _colors["default"].bgWhite;
-var xTiny = _spacing["default"].xTiny,
-    tiny = _spacing["default"].tiny,
-    small = _spacing["default"].small,
-    gutter = _spacing["default"].gutter,
-    medium = _spacing["default"].medium;
-var smallIcon = _iconSizes["default"].small;
-var paddingStandardTag = [1, tiny, 3, tiny],
-    paddingMediumTag = [5, gutter, 7, gutter],
-    paddingBigTag = [tiny, small],
-    tagTextLineHeight = 1.5,
-    tagTextStandardSize = 10,
-    tagTextMediumSize = 16,
-    tagTextBigSize = 16,
-    bigTagHeight = 40;
 var _default = {
   tag: {
     boxSizing: 'border-box',
     lineHeight: '12px',
     textAlign: 'center',
-    borderRadius: small,
+    borderRadius: _borderRadius["default"]['br-full'],
     position: 'relative',
     overflow: 'hidden',
     display: 'inline-block'
   },
   standard: {
-    padding: paddingStandardTag,
-    height: small
+    padding: [_spacing["default"]['size-0'], _spacing["default"]['size-2']]
   },
   medium: {
-    padding: paddingMediumTag,
-    height: medium
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-3']]
   },
   big: {
-    padding: paddingBigTag,
-    height: bigTagHeight,
-    borderRadius: medium
+    minHeight: _spacing["default"]['size-6'],
+    padding: [_spacing["default"]['size-2'], _spacing["default"]['size-4']]
   },
   tagText: {
     boxSizing: 'border-box',
-    fontFamily: _fonts["default"].body,
-    fontWeight: '400',
+    font: objectToFontValue(_fonts2["default"]['heading-tag']),
     fontStyle: 'normal',
     fontStretch: 'normal',
     letterSpacing: 'normal',
@@ -79,20 +66,10 @@ var _default = {
     position: 'relative',
     overflow: 'hidden',
     display: 'inline-block',
-    lineHeight: tagTextLineHeight,
     paddingRight: function paddingRight(props) {
-      return props.iconName ? xTiny : 0;
+      return props.iconName ? _spacing["default"]['size-1'] : 0;
     }
   },
-  standardTagText: {
-    fontSize: tagTextStandardSize
-  },
-  mediumTagText: {
-    fontSize: tagTextMediumSize
-  },
-  bigTagText: {
-    fontSize: tagTextBigSize
-  },
   "default": {
     color: grey900,
     background: grey100
@@ -101,47 +78,57 @@ var _default = {
     color: grey900,
     background: bgWhite
   },
-  info: {
-    color: infoText,
-    backgroundColor: infoLight
+  link: {
+    color: textLink,
+    background: (0, _hexRgba["default"])(textLink, 10)
+  },
+  featured: {
+    color: text.white.primary,
+    background: tag.featured.bg,
+    border: "1px solid ".concat(tag.featured.border)
+  },
+  promo: {
+    color: text.white.primary,
+    background: tag.promo.bg,
+    border: "1px solid ".concat(tag.promo.border)
   },
   success: {
-    color: successText,
-    background: successLight
+    color: text.success,
+    background: tag.success.bg,
+    border: "1px solid ".concat(tag.success.border)
+  },
+  info: {
+    color: text.indigo.primary,
+    background: tag.info.bg,
+    border: "1px solid ".concat(tag.info.border)
   },
   warning: {
-    color: warningText,
-    background: warningLight
+    color: text.warning,
+    background: tag.warning.bg,
+    border: "1px solid ".concat(tag.warning.border)
   },
   error: {
-    color: errorText,
-    background: errorLight
-  },
-  link: {
-    color: textLink,
-    background: (0, _hexRgba["default"])(textLink, 10)
+    color: text.error,
+    background: tag.error.bg,
+    border: "1px solid ".concat(tag.error.border)
   },
 
   /* Icon with themes */
   icon: {
     display: 'inline-block',
-    marginRight: xTiny,
+    marginRight: _spacing["default"]['size-1'],
     content: '""',
     paddingBottom: 0,
     left: 0,
     backgroundRepeat: 'no-repeat'
   },
   standardIcon: {
-    width: gutter,
-    height: gutter
-  },
-  mediumIcon: {
-    width: smallIcon,
-    height: smallIcon
+    width: _spacing["default"]['size-3'],
+    height: _spacing["default"]['size-3']
   },
   bigIcon: {
-    width: smallIcon,
-    height: smallIcon
+    width: _spacing["default"]['size-4'],
+    height: _spacing["default"]['size-4']
   },
   defaultIcon: {
     background: function background(props) {
@@ -153,29 +140,39 @@ var _default = {
       return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([grey900])) : '';
     }
   },
-  infoIcon: {
+  linkIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([infoText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([textLink])) : '';
+    }
+  },
+  featuredIcon: {
+    background: function background(props) {
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.inverse["default"]])) : '';
+    }
+  },
+  promoIcon: {
+    background: function background(props) {
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.inverse["default"]])) : '';
     }
   },
   successIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([successText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.success])) : '';
     }
   },
-  warningIcon: {
+  infoIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([warningText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.brand.bold])) : '';
     }
   },
-  errorIcon: {
+  warningIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([errorText])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.warning])) : '';
     }
   },
-  linkIcon: {
+  errorIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([textLink])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([icon.error])) : '';
     }
   }
 };

package/package.json

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