@zohodesk/dot 1.0.0-temp-115 → 1.0.0-temp-116

package/README.md

@@ -2,6 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.0.0-beta.243
+
+- NewStar => Position and Font Size Increase Isse Solved
+
 # 1.0.0-beta.242
 
 - `Accesssility`- Screen Reader fix.

package/es/IconButton/IconButton.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -79,7 +80,8 @@ export default class IconButton extends React.Component {
       isNeedEffect,
       needButtonTag,
       a11y,
-      dataIsHtml
+      dataIsHtml,
+      customProps
     } = this.props;
     let {
       isPressed
@@ -97,7 +99,7 @@ export default class IconButton extends React.Component {
       hoverType: hoverType,
       isDisabled: isDisabled,
       isNeedEffect: isNeedEffect
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, /*#__PURE__*/React.createElement(Container, _extends({
       "aria-label": ariaLabel,
       "aria-haspopup": ariaHaspopup,
       "aria-expanded": ariaExpanded,
@@ -121,7 +123,7 @@ export default class IconButton extends React.Component {
       onFocus: this.triggerMouseOver,
       onBlur: this.onBlur,
       disabled: isDisabled
-    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+    }, customProps), iconName ? /*#__PURE__*/React.createElement(Icon, {
       isBold: isBold,
       size: iconSize,
       name: iconName,

package/es/IconButton/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   isNeedEffect: true,
   needButtonTag: true,
   a11y: {},
-  dataIsHtml: false
+  dataIsHtml: false,
+  customProps: {}
 };

package/es/IconButton/props/propTypes.js

@@ -27,5 +27,6 @@ export const propTypes = {
     ariaControls: PropTypes.string,
     ariaLabelledby: PropTypes.string
   }),
-  dataIsHtml: PropTypes.bool
+  dataIsHtml: PropTypes.bool,
+  customProps: PropTypes.object
 };

package/es/NewStar/NewStar.js

@@ -13,36 +13,38 @@ export default class NewStar extends React.Component {
     } = this.props;
     let alignPosition = {
       topRight: {
-        className: style.topRight,
-        align: 'right',
-        alignBox: 'row',
-        reverse: 'wrap'
+        className: style.topRight
+        // align: 'right',
+        // alignBox: 'row',
+        // reverse: 'wrap'
       },
+
       topLeft: {
-        className: style.topLeft,
-        align: 'left',
-        alignBox: 'row',
-        reverse: 'wrap'
+        className: style.topLeft
+        // align: 'left',
+        // alignBox: 'row',
+        // reverse: 'wrap'
       },
+
       bottomLeft: {
-        className: style.bottomLeft,
-        align: 'left',
-        alignBox: 'column-reverse',
-        reverse: 'wrap'
+        className: style.bottomLeft
+        // align: 'left',
+        // alignBox: 'column-reverse',
+        // reverse: 'wrap'
       },
+
       bottomRight: {
-        className: style.bottomRight,
-        align: 'right',
-        alignBox: 'column',
-        reverse: 'wrap-reverse'
+        className: style.bottomRight
+        // align: 'right',
+        // alignBox: 'column',
+        // reverse: 'wrap-reverse'
       }
     };
+
     return /*#__PURE__*/React.createElement(Container, {
-      alignBox: alignPosition[position].alignBox,
+      alignBox: "row",
       isCover: false,
-      className: `${style.star} ${alignPosition[position].className} ${customClass}`,
-      wrap: alignPosition[position].reverse,
-      align: alignPosition[position].align
+      className: `${style.star} ${alignPosition[position].className} ${customClass}`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-snippetStar",
       iconClass: `${style[palette]} ${style.starOne}`,

package/es/NewStar/NewStar.module.css

@@ -1,6 +1,5 @@
 .star {
   position: absolute;
-
   height: var(--zd_size20);
   width: var(--zd_size21);
 }
@@ -48,9 +47,15 @@
   transform: translate(-45%, 45%);
   left: 0;
 }
+
+.stars {
+  position: absolute;
+}
+
 [dir=ltr] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
+
 [dir=rtl] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
@@ -85,6 +90,66 @@
   animation-delay: 1s;
 }
 
+.topLeft .starOne{top:0}
+
+[dir=ltr] .topLeft .starOne{
+  left:0}
+
+[dir=rtl] .topLeft .starOne{right:0}
+.topLeft .starTwo{top:0}
+[dir=ltr] .topLeft .starTwo{
+  left:10px}
+[dir=rtl] .topLeft .starTwo{right:10px}
+.topLeft .starThree{top:10px}
+[dir=ltr] .topLeft .starThree{
+  left:0}
+[dir=rtl] .topLeft .starThree{right:0}
+
+.topRight .starOne{top:0}
+
+[dir=ltr] .topRight .starOne{
+  right:0}
+
+[dir=rtl] .topRight .starOne{left:0}
+.topRight .starTwo{top:0}
+[dir=ltr] .topRight .starTwo{
+  right:10px}
+[dir=rtl] .topRight .starTwo{left:10px}
+.topRight .starThree{top:10px}
+[dir=ltr] .topRight .starThree{
+  right:0}
+[dir=rtl] .topRight .starThree{left:0}
+
+.bottomLeft .starOne{bottom:0}
+
+[dir=ltr] .bottomLeft .starOne{
+  left:0}
+
+[dir=rtl] .bottomLeft .starOne{right:0}
+.bottomLeft .starTwo{bottom:0}
+[dir=ltr] .bottomLeft .starTwo{
+  left:10px}
+[dir=rtl] .bottomLeft .starTwo{right:10px}
+.bottomLeft .starThree{bottom:10px}
+[dir=ltr] .bottomLeft .starThree{
+  left:0}
+[dir=rtl] .bottomLeft .starThree{right:0}
+
+.bottomRight .starOne{bottom:0}
+
+[dir=ltr] .bottomRight .starOne{
+  right:0}
+
+[dir=rtl] .bottomRight .starOne{left:0}
+.bottomRight .starTwo{bottom:0}
+[dir=ltr] .bottomRight .starTwo{
+  right:10px}
+[dir=rtl] .bottomRight .starTwo{left:10px}
+.bottomRight .starThree{bottom:10px}
+[dir=ltr] .bottomRight .starThree{
+  right:0}
+[dir=rtl] .bottomRight .starThree{left:0}
+
 @keyframes twinkle {
   0% {
     opacity: 0.5;

package/lib/IconButton/IconButton.js

@@ -14,6 +14,7 @@ var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components
 var _RippleEffect = _interopRequireDefault(require("@zohodesk/components/lib/RippleEffect/RippleEffect"));
 var _IconButtonModule = _interopRequireDefault(require("./IconButton.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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, 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; }
@@ -109,7 +110,8 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         isNeedEffect = _this$props4.isNeedEffect,
         needButtonTag = _this$props4.needButtonTag,
         a11y = _this$props4.a11y,
-        dataIsHtml = _this$props4.dataIsHtml;
+        dataIsHtml = _this$props4.dataIsHtml,
+        customProps = _this$props4.customProps;
       var isPressed = this.state.isPressed;
       var ariaHaspopup = a11y.ariaHaspopup,
         ariaExpanded = a11y.ariaExpanded,
@@ -122,7 +124,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         hoverType: hoverType,
         isDisabled: isDisabled,
         isNeedEffect: isNeedEffect
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         "aria-label": ariaLabel,
         "aria-haspopup": ariaHaspopup,
         "aria-expanded": ariaExpanded,
@@ -146,7 +148,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         onFocus: this.triggerMouseOver,
         onBlur: this.onBlur,
         disabled: isDisabled
-      }, iconName ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, customProps), iconName ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         isBold: isBold,
         size: iconSize,
         name: iconName,

package/lib/IconButton/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   isNeedEffect: true,
   needButtonTag: true,
   a11y: {},
-  dataIsHtml: false
+  dataIsHtml: false,
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/IconButton/props/propTypes.js

@@ -33,5 +33,5 @@ var propTypes = (_propTypes = {
   ariaLabel: _propTypes2["default"].string,
   ariaControls: _propTypes2["default"].string,
   ariaLabelledby: _propTypes2["default"].string
-})), _defineProperty(_propTypes, "dataIsHtml", _propTypes2["default"].bool), _propTypes);
+})), _defineProperty(_propTypes, "dataIsHtml", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

package/lib/NewStar/NewStar.js

@@ -38,36 +38,38 @@ var NewStar = /*#__PURE__*/function (_React$Component) {
         position = _this$props.position;
       var alignPosition = {
         topRight: {
-          className: _NewStarModule["default"].topRight,
-          align: 'right',
-          alignBox: 'row',
-          reverse: 'wrap'
+          className: _NewStarModule["default"].topRight
+          // align: 'right',
+          // alignBox: 'row',
+          // reverse: 'wrap'
         },
+
         topLeft: {
-          className: _NewStarModule["default"].topLeft,
-          align: 'left',
-          alignBox: 'row',
-          reverse: 'wrap'
+          className: _NewStarModule["default"].topLeft
+          // align: 'left',
+          // alignBox: 'row',
+          // reverse: 'wrap'
         },
+
         bottomLeft: {
-          className: _NewStarModule["default"].bottomLeft,
-          align: 'left',
-          alignBox: 'column-reverse',
-          reverse: 'wrap'
+          className: _NewStarModule["default"].bottomLeft
+          // align: 'left',
+          // alignBox: 'column-reverse',
+          // reverse: 'wrap'
         },
+
         bottomRight: {
-          className: _NewStarModule["default"].bottomRight,
-          align: 'right',
-          alignBox: 'column',
-          reverse: 'wrap-reverse'
+          className: _NewStarModule["default"].bottomRight
+          // align: 'right',
+          // alignBox: 'column',
+          // reverse: 'wrap-reverse'
         }
       };
+
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        alignBox: alignPosition[position].alignBox,
+        alignBox: "row",
         isCover: false,
-        className: "".concat(_NewStarModule["default"].star, " ").concat(alignPosition[position].className, " ").concat(customClass),
-        wrap: alignPosition[position].reverse,
-        align: alignPosition[position].align
+        className: "".concat(_NewStarModule["default"].star, " ").concat(alignPosition[position].className, " ").concat(customClass)
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-snippetStar",
         iconClass: "".concat(_NewStarModule["default"][palette], " ").concat(_NewStarModule["default"].starOne),

package/lib/NewStar/NewStar.module.css

@@ -1,6 +1,5 @@
 .star {
   position: absolute;
-
   height: var(--zd_size20);
   width: var(--zd_size21);
 }
@@ -48,9 +47,15 @@
   transform: translate(-45%, 45%);
   left: 0;
 }
+
+.stars {
+  position: absolute;
+}
+
 [dir=ltr] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
+
 [dir=rtl] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
@@ -85,6 +90,66 @@
   animation-delay: 1s;
 }
 
+.topLeft .starOne{top:0}
+
+[dir=ltr] .topLeft .starOne{
+  left:0}
+
+[dir=rtl] .topLeft .starOne{right:0}
+.topLeft .starTwo{top:0}
+[dir=ltr] .topLeft .starTwo{
+  left:10px}
+[dir=rtl] .topLeft .starTwo{right:10px}
+.topLeft .starThree{top:10px}
+[dir=ltr] .topLeft .starThree{
+  left:0}
+[dir=rtl] .topLeft .starThree{right:0}
+
+.topRight .starOne{top:0}
+
+[dir=ltr] .topRight .starOne{
+  right:0}
+
+[dir=rtl] .topRight .starOne{left:0}
+.topRight .starTwo{top:0}
+[dir=ltr] .topRight .starTwo{
+  right:10px}
+[dir=rtl] .topRight .starTwo{left:10px}
+.topRight .starThree{top:10px}
+[dir=ltr] .topRight .starThree{
+  right:0}
+[dir=rtl] .topRight .starThree{left:0}
+
+.bottomLeft .starOne{bottom:0}
+
+[dir=ltr] .bottomLeft .starOne{
+  left:0}
+
+[dir=rtl] .bottomLeft .starOne{right:0}
+.bottomLeft .starTwo{bottom:0}
+[dir=ltr] .bottomLeft .starTwo{
+  left:10px}
+[dir=rtl] .bottomLeft .starTwo{right:10px}
+.bottomLeft .starThree{bottom:10px}
+[dir=ltr] .bottomLeft .starThree{
+  left:0}
+[dir=rtl] .bottomLeft .starThree{right:0}
+
+.bottomRight .starOne{bottom:0}
+
+[dir=ltr] .bottomRight .starOne{
+  right:0}
+
+[dir=rtl] .bottomRight .starOne{left:0}
+.bottomRight .starTwo{bottom:0}
+[dir=ltr] .bottomRight .starTwo{
+  right:10px}
+[dir=rtl] .bottomRight .starTwo{left:10px}
+.bottomRight .starThree{bottom:10px}
+[dir=ltr] .bottomRight .starThree{
+  right:0}
+[dir=rtl] .bottomRight .starThree{left:0}
+
 @keyframes twinkle {
   0% {
     opacity: 0.5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-115",
+  "version": "1.0.0-temp-116",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -44,7 +44,7 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-temp-114",
+    "@zohodesk/components": "1.0.0-temp-115",
     "@zohodesk/icons": "1.0.0-beta.109",
     "@zohodesk/svg": "1.0.0-beta.49",
     "@zohodesk/virtualizer": "1.0.3",
@@ -55,7 +55,7 @@
     "velocity-react": "1.4.3",
     "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-temp-114",
+    "@zohodesk/components": "1.0.0-temp-115",
     "@zohodesk/icons": "1.0.0-beta.109",
     "@zohodesk/svg": "1.0.0-beta.48",
     "@zohodesk/a11y": "1.3.7"