@zohodesk/dot 1.0.0-beta.254 → 1.0.0-beta.255

package/README.md

@@ -2,10 +2,17 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.255
+
+- **TagWithIcon** - New component Added.
+
+- **FreezeLayer** - cancel click preventing issue solved.
+
 # 1.0.0-beta.254
 
-- Contrast option implemented through preprocess. Category key value added for all color variables.
-- BoxShadow Values Separated for Contrast
+- `Contrast` option implemented through preprocess. Category key value added for all color variables.
+
+- BoxShadow Values Separated for Contrast.
 
 # 1.0.0-beta.253
 

package/assets/Appearance/dark/mode/dotDarkMode.module.css

@@ -528,4 +528,15 @@
 	--zdt_separator_default_text: hsla(216, 23%, calc(32% + var(--zd_dark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
 	--zdt_separator_secondary_text: hsla(210, 7%, calc(89% + var(--zd_dark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	
+	/* tag with icon */
+	--zdt_tagWithIconGrey_bg: rgba(255, 255, 255, 0.03);
+	--zdt_tagWithIconGrey_border: hsla(0, calc(0 * 1%), calc(100% + var(--zd_dark_default_inverse_medium_lValue)), calc( 0.2 + var(--zd_alpha_low)));
+	--zdt_tagWithIconGrey_text: hsla(210, 7%, calc(89% + var(--zd_dark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconBlue_bg: hsla(215, 28%, calc(20% + var(--zd_dark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconBlue_border: hsla(213, 40%, calc(29% + var(--zd_dark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconBlue_text: hsla(212, 100%, calc(64% + var(--zd_dark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconYellow_bg: hsla(215, 12%, calc(20% + var(--zd_dark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconYellow_border: hsla(35, 18%, calc(29% + var(--zd_dark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconYellow_text: hsla(37, 91%, calc(61% + var(--zd_dark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/assets/Appearance/default/mode/dotDefaultMode.module.css

@@ -528,4 +528,15 @@
 	--zdt_separator_default_text: hsla(0, calc(0 * 1%), calc(79% + var(--zd_default_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
 	--zdt_separator_secondary_text: hsla(0, calc(0 * 1%), calc(0% + var(--zd_default_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	
+	/* tag with icon */
+	--zdt_tagWithIconGrey_bg: var(--zdt_m_cta_grey_20_bg_ignore);
+	--zdt_tagWithIconGrey_border: var(--zdt_cta_grey_35_border);
+	--zdt_tagWithIconGrey_text: hsla(0, calc(0 * 1%), calc(0% + var(--zd_default_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconBlue_bg: hsla(213, 85%, calc(95% + var(--zd_default_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconBlue_border: hsla(212, 83%, calc(86% + var(--zd_default_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconBlue_text: hsla(212, 92%, calc(48% + var(--zd_default_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconYellow_bg: hsla(49, 92%, calc(95% + var(--zd_default_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconYellow_border: hsla(49, 84%, calc(83% + var(--zd_default_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconYellow_text: hsla(29, 90%, calc(66% + var(--zd_default_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css

@@ -528,4 +528,15 @@
 	--zdt_separator_default_text: hsla(0, calc(0 * 1%), calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_separator_primary_text: var(--zdt_cta_primary_text);
 	--zdt_separator_secondary_text: hsla(210, 7%, calc(89% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	
+	/* tag with icon */
+	--zdt_tagWithIconGrey_bg: rgba(255, 255, 255, 0.03);
+	--zdt_tagWithIconGrey_border: hsla(0, calc(0 * 1%), calc(100% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.2 + var(--zd_alpha_low)));
+	--zdt_tagWithIconGrey_text: hsla(210, 7%, calc(89% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconBlue_bg: hsla(215, 28%, calc(20% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconBlue_border: hsla(213, 40%, calc(29% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconBlue_text: hsla(212, 100%, calc(64% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconYellow_bg: hsla(215, 12%, calc(20% + var(--zd_pureDark_darker_lowest_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_tagWithIconYellow_border: hsla(35, 18%, calc(29% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_tagWithIconYellow_text: hsla(37, 91%, calc(61% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 }

package/es/FreezeLayer/useFreezeLayer.js

@@ -12,8 +12,6 @@ export default function useFreezeLayer(_ref) {
   function handleClick(e) {
     if (onClick && !isTextSelected()) {
       onClick(e);
-    } else {
-      cancelBubblingEffect(e);
     }
   }
   function enableFreeze() {

package/es/TagWithIcon/TagWithIcon.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Icon from '@zohodesk/icons/es/Icon';
+import style from './TagWithIcon.module.css';
+export default class TagWithIcon extends React.Component {
+  render() {
+    const {
+      text,
+      iconName,
+      iconSize,
+      palette,
+      iconClass,
+      isBold,
+      size,
+      dataId,
+      className,
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      className: `${style.wrapper} ${style[palette]} ${style[size]} ${className}`,
+      dataId: dataId,
+      title: title
+    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconClass: `${text ? style.iconSpace : ''} ${iconClass} `
+    }) : null, text ? /*#__PURE__*/React.createElement(Box, {
+      shrink: true,
+      "data-title": text,
+      className: `${style.text} ${style[size]}_text ${isBold ? style.bold : ''}`
+    }, text) : null);
+  }
+}
+TagWithIcon.propTypes = propTypes;
+TagWithIcon.defaultProps = defaultProps;

package/es/TagWithIcon/TagWithIcon.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+.small,
+.large {
+  max-width: 100%;
+  height: var(--zd_size18);
+}
+.small, .large {
+  border: 1px solid;
+  border-color: var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6);
+}
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .iconSpace{
+  margin-right: var(--zd_size4);
+}
+[dir=rtl] .iconSpace{
+  margin-left: var(--zd_size4);
+}
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+}

package/es/TagWithIcon/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  iconSize: '9',
+  size: 'large',
+  iconClass: '',
+  isBold: true,
+  palette: 'grey',
+  className: ''
+};

package/es/TagWithIcon/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  title: PropTypes.string,
+  isBold: PropTypes.bool,
+  palette: PropTypes.oneOf(['yellow', 'blue', 'grey']),
+  size: PropTypes.oneOf('small', 'large'),
+  className: PropTypes.string,
+  text: PropTypes.string
+};

package/lib/FreezeLayer/useFreezeLayer.js

@@ -31,8 +31,6 @@ function useFreezeLayer(_ref) {
   function handleClick(e) {
     if (onClick && !(0, _Common.isTextSelected)()) {
       onClick(e);
-    } else {
-      (0, _Common.cancelBubblingEffect)(e);
     }
   }
   function enableFreeze() {

package/lib/TagWithIcon/TagWithIcon.js

@@ -0,0 +1,71 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _defaultProps = require("./props/defaultProps");
+var _propTypes = require("./props/propTypes");
+var _Layout = require("@zohodesk/components/es/Layout");
+var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
+var _TagWithIconModule = _interopRequireDefault(require("./TagWithIcon.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var TagWithIcon = /*#__PURE__*/function (_React$Component) {
+  _inherits(TagWithIcon, _React$Component);
+  var _super = _createSuper(TagWithIcon);
+  function TagWithIcon() {
+    _classCallCheck(this, TagWithIcon);
+    return _super.apply(this, arguments);
+  }
+  _createClass(TagWithIcon, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        text = _this$props.text,
+        iconName = _this$props.iconName,
+        iconSize = _this$props.iconSize,
+        palette = _this$props.palette,
+        iconClass = _this$props.iconClass,
+        isBold = _this$props.isBold,
+        size = _this$props.size,
+        dataId = _this$props.dataId,
+        className = _this$props.className,
+        title = _this$props.title;
+      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isInline: true,
+        alignBox: "row",
+        align: "vertical",
+        isCover: false,
+        className: "".concat(_TagWithIconModule["default"].wrapper, " ").concat(_TagWithIconModule["default"][palette], " ").concat(_TagWithIconModule["default"][size], " ").concat(className),
+        dataId: dataId,
+        title: title
+      }, iconName ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        name: iconName,
+        size: iconSize,
+        iconClass: "".concat(text ? _TagWithIconModule["default"].iconSpace : '', " ").concat(iconClass, " ")
+      }) : null, text ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        shrink: true,
+        "data-title": text,
+        className: "".concat(_TagWithIconModule["default"].text, " ").concat(_TagWithIconModule["default"][size], "_text ").concat(isBold ? _TagWithIconModule["default"].bold : '')
+      }, text) : null);
+    }
+  }]);
+  return TagWithIcon;
+}(_react["default"].Component);
+exports["default"] = TagWithIcon;
+TagWithIcon.propTypes = _propTypes.propTypes;
+TagWithIcon.defaultProps = _defaultProps.defaultProps;

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -0,0 +1,56 @@
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+.small,
+.large {
+  max-width: 100%;
+  height: var(--zd_size18);
+}
+.small, .large {
+  border: 1px solid;
+  border-color: var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6);
+}
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .iconSpace{
+  margin-right: var(--zd_size4);
+}
+[dir=rtl] .iconSpace{
+  margin-left: var(--zd_size4);
+}
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+}

package/lib/TagWithIcon/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  iconSize: '9',
+  size: 'large',
+  iconClass: '',
+  isBold: true,
+  palette: 'grey',
+  className: ''
+};
+exports.defaultProps = defaultProps;

package/lib/TagWithIcon/props/propTypes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var propTypes = {
+  iconClass: _propTypes["default"].string,
+  iconName: _propTypes["default"].string,
+  iconSize: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  isBold: _propTypes["default"].bool,
+  palette: _propTypes["default"].oneOf(['yellow', 'blue', 'grey']),
+  size: _propTypes["default"].oneOf('small', 'large'),
+  className: _propTypes["default"].string,
+  text: _propTypes["default"].string
+};
+exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.254",
+  "version": "1.0.0-beta.255",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -96,4 +96,4 @@
       }
     }
   }
-}
+}