@zohodesk/dot 1.0.0-beta.23 → 1.0.0-beta.230

package/es/ExternalLink/ExternalLink.js

@@ -1,73 +1,52 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+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); }
+
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
-
 /**** CSS ****/
-import style from './ExternalLink.module.css';
-
-var ExternalLink = function (_React$Component) {
-  _inherits(ExternalLink, _React$Component);
-
-  function ExternalLink() {
-    _classCallCheck(this, ExternalLink);
-
-    return _possibleConstructorReturn(this, (ExternalLink.__proto__ || _Object$getPrototypeOf(ExternalLink)).apply(this, arguments));
-  }
 
-  _createClass(ExternalLink, [{
-    key: 'addHttp',
-    value: function addHttp(url) {
-      var site = url.toLowerCase();
-      var regEx = new RegExp(/((ftp|https|mailto|tel|http?):)/);
-      if (!regEx.test(site)) {
-        return 'http://' + site;
-      }
-      return site;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          href = _props.href,
-          title = _props.title,
-          target = _props.target,
-          className = _props.className,
-          children = _props.children,
-          rel = _props.rel,
-          dataId = _props.dataId;
+import style from './ExternalLink.module.css';
+export default class ExternalLink extends React.Component {
+  addHttp(url) {
+    const regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
 
-      var urlOutput = href && typeof href != 'boolean' ? this.addHttp(String(href)) : 'javascript:void(0);';
-      return React.createElement(
-        'a',
-        {
-          href: urlOutput,
-          target: target,
-          className: style.link + ' ' + (className ? className : ''),
-          'data-title': title,
-          rel: rel,
-          'data-id': dataId
-        },
-        children
-      );
+    if (!regEx.test(url)) {
+      return `http://${url}`;
     }
-  }]);
-
-  return ExternalLink;
-}(React.Component);
 
-export default ExternalLink;
+    return url;
+  }
 
+  render() {
+    const {
+      href,
+      title,
+      target,
+      className,
+      children,
+      rel,
+      dataId,
+      onClick,
+      customProps
+    } = this.props;
+    const urlOutput = href && typeof href !== 'boolean' ? this.addHttp(String(href)) : 'javascript:void(0);';
+    return /*#__PURE__*/React.createElement("a", _extends({
+      href: urlOutput,
+      target: target,
+      className: `${style.link} ${className ? className : ''}`,
+      "data-title": title,
+      rel: rel,
+      "data-id": dataId,
+      onClick: onClick
+    }, customProps), children);
+  }
 
+}
 ExternalLink.defaultProps = {
   rel: 'noopener noreferrer',
-  target: '_blank'
+  target: '_blank',
+  customProps: {}
 };
-
 ExternalLink.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -75,7 +54,9 @@ ExternalLink.propTypes = {
   href: PropTypes.string,
   rel: PropTypes.string,
   target: PropTypes.oneOf(['_blank', '_self']),
-  title: PropTypes.string
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  customProps: PropTypes.object
 };
 
 if (false) {

package/es/ExternalLink/ExternalLink.module.css

@@ -1,4 +1,4 @@
-.link {
-  text-decoration: none;
-  color: inherit
+.link {
+  text-decoration: none;
+  color: inherit
 }

package/es/ExternalLink/__tests__/ExternalLink.spec.js

@@ -1,36 +1,27 @@
 import React from 'react';
 import ExternalLink from '../ExternalLink';
 import renderer from 'react-test-renderer';
-
-describe('ExternalLink Component', function () {
-  it('should add http/https to href tag if it is not already present', function () {
-    var checkLinks = ['javascript:alert(1)', 'www.test.com', 'test.com', '#'];
-    checkLinks.forEach(function (link) {
-      var ele = renderer.create(React.createElement(
-        ExternalLink,
-        { href: link },
-        link
-      ));
-      var renderedElement = ele.toJSON();
-      expect(renderedElement.props.href).toEqual('http://' + link);
+describe('ExternalLink Component', () => {
+  it('should add http/https to href tag if it is not already present', () => {
+    const checkLinks = ['javascript:alert(1)', 'www.test.com', 'test.com', '#'];
+    checkLinks.forEach(link => {
+      let ele = renderer.create( /*#__PURE__*/React.createElement(ExternalLink, {
+        href: link
+      }, link));
+      const renderedElement = ele.toJSON();
+      expect(renderedElement.props.href).toEqual(`http://${link}`);
     });
   });
-  it('should not add http/https to href tag if it is already present', function () {
-    var ele = renderer.create(React.createElement(
-      ExternalLink,
-      { href: 'https://www.google.com' },
-      'www.google.com'
-    ));
-    var renderedElement = ele.toJSON();
+  it('should not add http/https to href tag if it is already present', () => {
+    let ele = renderer.create( /*#__PURE__*/React.createElement(ExternalLink, {
+      href: "https://www.google.com"
+    }, "www.google.com"));
+    const renderedElement = ele.toJSON();
     expect(renderedElement.props.href).toEqual('https://www.google.com');
   });
-  it('should default to / if href is undefined', function () {
-    var ele = renderer.create(React.createElement(
-      ExternalLink,
-      null,
-      'www.google.com'
-    ));
-    var renderedElement = ele.toJSON();
+  it('should default to / if href is undefined', () => {
+    let ele = renderer.create( /*#__PURE__*/React.createElement(ExternalLink, null, "www.google.com"));
+    const renderedElement = ele.toJSON();
     expect(renderedElement.props.href).toEqual('javascript:void(0);');
   });
 });

package/es/ExternalLink/docs/ExternalLink__default.docs.js

@@ -1,37 +1,16 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
 import React, { Component } from 'react';
 import ExternalLink from '../ExternalLink';
-
-var ExternalLink__default = function (_React$Component) {
-  _inherits(ExternalLink__default, _React$Component);
-
-  function ExternalLink__default(props) {
-    _classCallCheck(this, ExternalLink__default);
-
-    return _possibleConstructorReturn(this, (ExternalLink__default.__proto__ || _Object$getPrototypeOf(ExternalLink__default)).call(this, props));
+export default class ExternalLink__default extends React.Component {
+  constructor(props) {
+    super(props);
   }
 
-  _createClass(ExternalLink__default, [{
-    key: 'render',
-    value: function render() {
-      ///agent/:orgName/:deptName/:moduleName/details/:moduleId
-
-      return React.createElement(
-        'div',
-        null,
-        React.createElement(ExternalLink, null)
-      );
-    }
-  }]);
-
-  return ExternalLink__default;
-}(React.Component);
+  render() {
+    ///agent/:orgName/:deptName/:moduleName/details/:moduleId
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExternalLink, null));
+  }
 
-export default ExternalLink__default;
+}
 
 if (false) {
   ExternalLink__default.docs = {

package/es/FlipCard/FlipCard.js

@@ -1,8 +1,5 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+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, { Component } from 'react';
 import PropTypes from 'prop-types';
 import AvatarUser from '../avatar/AvatarUser/AvatarUser';
@@ -10,150 +7,149 @@ import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
 import { Container } from '@zohodesk/components/lib/Layout';
 import ChannelIcon from '../ChannelIcon/ChannelIcon';
-import { CssProvider } from '@zohodesk/components/lib/CssProvider';
+import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
 import style from './FlipCard.module.css';
 import { stopBubbling } from '../utils/General';
-
-var FlipCard = function (_Component) {
-  _inherits(FlipCard, _Component);
-
-  function FlipCard(props) {
-    _classCallCheck(this, FlipCard);
-
-    var _this = _possibleConstructorReturn(this, (FlipCard.__proto__ || _Object$getPrototypeOf(FlipCard)).call(this, props));
-
-    _this.onChange = _this.onChange.bind(_this);
-    _this.onClick = _this.onClick.bind(_this);
-    return _this;
+export default class FlipCard extends Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.onClick = this.onClick.bind(this);
   }
 
-  _createClass(FlipCard, [{
-    key: 'onClick',
-    value: function onClick(e) {
-      var noNeedFlip = this.props.noNeedFlip;
-
-      if (!noNeedFlip) {
-        stopBubbling(e);
-      }
-    }
-  }, {
-    key: 'onChange',
-    value: function onChange(isChecked, e) {
-      var onChange = this.props.onChange;
+  onClick(e) {
+    let {
+      noNeedFlip
+    } = this.props;
 
+    if (!noNeedFlip) {
       stopBubbling(e);
-      var id = this.props.id;
-
-      onChange(id, isChecked, e);
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          id = _props.id,
-          action = _props.action,
-          name = _props.name,
-          initial = _props.initial,
-          isChecked = _props.isChecked,
-          noNeedFlip = _props.noNeedFlip,
-          size = _props.size,
-          channel = _props.channel,
-          isPaidUser = _props.isPaidUser,
-          isPortalUser = _props.isPortalUser,
-          src = _props.src,
-          icon = _props.icon,
-          iconSize = _props.iconSize,
-          iconClass = _props.iconClass,
-          ticListContainer = _props.ticListContainer,
-          ticList = _props.ticList,
-          dataId = _props.dataId,
-          className = _props.className,
-          palette = _props.palette,
-          frontClass = _props.frontClass,
-          needTitle = _props.needTitle,
-          iconColor = _props.iconColor,
-          tourId = _props.tourId;
-
-      return React.createElement(
-        'div',
-        {
-          className: CssProvider(size) + '  ' + (noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip),
-          onClick: this.onClick,
-          'data-id': ticListContainer,
-          'data-tour': tourId
-        },
-        React.createElement(
-          'div',
-          { className: style.container, 'data-id': ticList },
-          !noNeedFlip ? React.createElement(
-            Container,
-            {
-              align: 'both',
-              className: style.front + ' ' + (frontClass ? frontClass : '')
-            },
-            React.createElement(CheckBox, {
-              checked: isChecked,
-              name: 'category',
-              onChange: this.onChange,
-              id: 'checkbox_' + id,
-              dataId: 'listViewCheckBox_' + id
-            })
-          ) : null,
-          React.createElement(
-            Container,
-            { align: 'both', className: style.back },
-            channel && action ? React.createElement(ChannelIcon, {
-              name: channel,
-              action: action,
-              size: size,
-              iconSize: iconSize,
-              iconClass: iconClass,
-              dataId: channel,
-              className: className,
-              palette: palette,
-              iconColor: iconColor
-            }) : icon ? React.createElement(AvatarIcon, {
-              name: icon,
-              iconSize: iconSize,
-              size: size,
-              iconClass: iconClass,
-              dataId: icon,
-              className: className,
-              iconColor: iconColor
-            }) : React.createElement(AvatarUser, {
-              name: name,
-              initial: initial,
-              size: size,
-              isPaid: isPaidUser,
-              isPortal: isPortalUser,
-              src: src,
-              dataId: dataId,
-              needTitle: needTitle
-            })
-          )
-        )
-      );
-    }
-  }]);
-
-  return FlipCard;
-}(Component);
+  }
 
-export default FlipCard;
+  onChange(isChecked, e) {
+    let {
+      onChange
+    } = this.props;
+    stopBubbling(e);
+    let {
+      id
+    } = this.props;
+    onChange(id, isChecked, e);
+  }
 
+  render() {
+    let {
+      id,
+      action,
+      name,
+      initial,
+      isChecked,
+      noNeedFlip,
+      size,
+      channel,
+      isPaidUser,
+      isPortalUser,
+      src,
+      icon,
+      iconSize,
+      iconClass,
+      ticListContainer,
+      ticList,
+      dataId,
+      className,
+      palette,
+      textPalette,
+      customTextClass,
+      frontClass,
+      needTitle,
+      iconColor,
+      tourId,
+      isFilledCheckbox,
+      channelTitle,
+      customProps
+    } = this.props;
+    const {
+      CheckBoxProps = {},
+      ChannelIconProps = {},
+      AvatarIconProps = {},
+      AvatarUserProps = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
+      onClick: this.onClick,
+      "data-id": ticListContainer,
+      "data-tour": tourId
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.container,
+      "data-id": ticList
+    }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: `${style.front} ${frontClass ? frontClass : ''}`
+    }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+      isFilled: isFilledCheckbox,
+      checked: isChecked,
+      onChange: this.onChange,
+      id: `checkbox_${id}`,
+      dataId: `listViewCheckBox_${id}`
+    }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.back
+    }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, _extends({
+      name: channel,
+      action: action,
+      size: size,
+      iconSize: iconSize,
+      iconClass: iconClass,
+      dataId: channel,
+      className: className,
+      palette: palette,
+      textPalette: textPalette,
+      customTextClass: customTextClass,
+      iconColor: iconColor,
+      title: channelTitle,
+      iconTitle: channelTitle
+    }, ChannelIconProps)) : icon ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
+      name: icon,
+      iconSize: iconSize,
+      size: size,
+      iconClass: iconClass,
+      dataId: icon,
+      className: className,
+      iconColor: iconColor,
+      title: needTitle ? name : ''
+    }, AvatarIconProps)) : /*#__PURE__*/React.createElement(AvatarUser, _extends({
+      name: name,
+      initial: initial,
+      size: size,
+      isPaid: isPaidUser,
+      isPortal: isPortalUser,
+      src: src,
+      dataId: dataId,
+      needTitle: needTitle,
+      palette: palette,
+      textPalette: textPalette,
+      customTextClass: customTextClass
+    }, AvatarUserProps)))));
+  }
 
+}
 FlipCard.propTypes = {
   action: PropTypes.string,
   channel: PropTypes.string,
+  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   className: PropTypes.string,
+  customTextClass: PropTypes.string,
   dataId: PropTypes.string,
   frontClass: PropTypes.string,
   icon: PropTypes.string,
   iconClass: PropTypes.string,
+  iconColor: PropTypes.string,
   iconSize: PropTypes.string,
   id: PropTypes.string.isRequired,
   initial: PropTypes.string,
   isChecked: PropTypes.bool,
+  isFilledCheckbox: PropTypes.bool,
   isPaidUser: PropTypes.bool,
   isPortalUser: PropTypes.bool,
   name: PropTypes.string,
@@ -163,15 +159,23 @@ FlipCard.propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
   src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
   ticList: PropTypes.string,
   ticListContainer: PropTypes.string,
-  iconColor: PropTypes.string,
-  tourId: PropTypes.string
+  tourId: PropTypes.string,
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    ChannelIconProps: PropTypes.object,
+    AvatarIconProps: PropTypes.object,
+    AvatarUserProps: PropTypes.object
+  })
 };
 FlipCard.defaultProps = {
   size: 'medium',
-  needTitle: true
+  needTitle: true,
+  customProps: {}
 };
+
 if (false) {
   FlipCard.docs = {
     componentGroup: 'Molecule'

package/es/FlipCard/FlipCard.module.css

@@ -1,12 +1,12 @@
 .flip,
 .flipNone {
-  color: var(--zd_text_smoke21);
+  color: var(--zdt_flipcard_default_text);
 }.flip, .flipNone {
-  background-color: transparent;
+  background-color: var(--zdt_flipcard_default_bg);
 }
 .container {
   position: relative;
-  transition: 0.3s all;
+  transition: var(--zd_transition3) all;
   transform-style: preserve-3d;
 }
 .container,
@@ -21,15 +21,24 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
-.front {
+[dir=ltr] .front {
   transform: rotateY(180deg) perspective(1px);
 }
+[dir=rtl] .front {
+  transform: rotateY(-180deg) perspective(1px);
+}
 .back {
   transform: rotateY(0deg) perspective(1px);
 }
-.notFlip .container {
+[dir=ltr] .notFlip .container {
   transform: rotateY(180deg);
 }
-.flip:hover .container, .hoverContainer:hover .container {
+[dir=rtl] .notFlip .container {
+  transform: rotateY(-180deg);
+}
+[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
   transform: rotateY(180deg);
 }
+[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
+  transform: rotateY(-180deg);
+}