@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.223

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 || 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,11 @@
 .flip,
 .flipNone {
-  color: var(--zd_text_smoke21);
-}.flip, .flipNone {
-  background-color: transparent;
+  background-color: var(--zdt_flipcard_default_bg);
+  color: var(--zdt_flipcard_default_text);
 }
 .container {
   position: relative;
-  transition: 0.3s all;
+  transition: var(--zd_transition3) all;
   transform-style: preserve-3d;
 }
 .container,
@@ -30,6 +29,7 @@
 .notFlip .container {
   transform: rotateY(180deg);
 }
-.flip:hover .container, .hoverContainer:hover .container {
+.flip:hover .container,
+.hoverContainer:hover .container {
   transform: rotateY(180deg);
 }

package/es/FormAction/FormAction.js

@@ -1,128 +1,83 @@
-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 from 'react';
 import PropTypes from 'prop-types';
 import style from './FormAction.module.css';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-export var LeftSide = function LeftSide(props) {
+export const LeftSide = props => {
   props.children;
 };
-export var RightSide = function RightSide(props) {
+export const RightSide = props => {
   props.children;
 };
-export var Center = function Center(props) {
+export const Center = props => {
   props.children;
 };
+export default class FormAction extends React.Component {
+  render() {
+    let {
+      size,
+      children,
+      paddingLeftSize,
+      paddingRightClass
+    } = this.props;
+    let leftbuttonGroup = [],
+        rightbuttonGroup = [],
+        centerbuttonGroup = [];
+    React.Children.map(children, child => {
+      if (!child) {
+        return child;
+      } else if (child.type === LeftSide) {
+        leftbuttonGroup = leftbuttonGroup.concat(child.props.children);
+      } else if (child.type === RightSide) {
+        rightbuttonGroup = rightbuttonGroup.concat(child.props.children);
+      } else if (child.type === Center) {
+        centerbuttonGroup = centerbuttonGroup.concat(child.props.children);
+      } else {
+        leftbuttonGroup.push(child);
+      }
+    });
+    let hasLeftChild = leftbuttonGroup.length > 0;
+    let hasRightChild = rightbuttonGroup.length > 0;
+    let hasCenterChild = centerbuttonGroup.length > 0;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.wrapperDiv
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      isCover: false,
+      align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
+      className: ` 
+                        ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
 
-var FormAction = function (_React$Component) {
-  _inherits(FormAction, _React$Component);
-
-  function FormAction() {
-    _classCallCheck(this, FormAction);
-
-    return _possibleConstructorReturn(this, (FormAction.__proto__ || _Object$getPrototypeOf(FormAction)).apply(this, arguments));
+                        ${style[`${size}Footer`]}
+                    `
+    }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
+      flexible: hasRightChild ? true : false,
+      shrink: !hasRightChild && hasLeftChild ? true : false
+    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight
+    }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
+      shrink: hasRightChild && !hasLeftChild ? true : false
+    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight
+    }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
+    }, item)) : centerbuttonGroup[0]) : null));
   }
 
-  _createClass(FormAction, [{
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          size = _props.size,
-          children = _props.children,
-          paddingLeftSize = _props.paddingLeftSize,
-          paddingRightClass = _props.paddingRightClass;
-
-      var leftbuttonGroup = [],
-          rightbuttonGroup = [],
-          centerbuttonGroup = [];
-      React.Children.map(children, function (child) {
-        if (!child) {
-          return child;
-        } else if (child.type === LeftSide) {
-          leftbuttonGroup = leftbuttonGroup.concat(child.props.children);
-        } else if (child.type === RightSide) {
-          rightbuttonGroup = rightbuttonGroup.concat(child.props.children);
-        } else if (child.type === Center) {
-          centerbuttonGroup = centerbuttonGroup.concat(child.props.children);
-        } else {
-          leftbuttonGroup.push(child);
-        }
-      });
-
-      var hasLeftChild = leftbuttonGroup.length > 0;
-
-      var hasRightChild = rightbuttonGroup.length > 0;
-
-      var hasCenterChild = centerbuttonGroup.length > 0;
-      return React.createElement(
-        'div',
-        { className: style.wrapperDiv },
-        React.createElement(
-          Container,
-          {
-            alignBox: 'row',
-            isCover: false,
-            align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
-            className: ' \n                        ' + (style.footerParent + ' ' + (hasCenterChild ? '' : style[(paddingLeftSize ? paddingLeftSize : size) + 'Padding']) + ' ' + paddingRightClass) + '\n\n                        ' + style[size + 'Footer'] + '\n                    '
-          },
-          hasLeftChild ? React.createElement(
-            Box,
-            {
-              flexible: hasRightChild ? true : false,
-              shrink: !hasRightChild && hasLeftChild ? true : false
-            },
-            leftbuttonGroup.length > 1 ? leftbuttonGroup.map(function (item) {
-              return React.createElement(
-                'div',
-                { className: style.marginRight },
-                item
-              );
-            }) : leftbuttonGroup[0]
-          ) : null,
-          hasRightChild ? React.createElement(
-            Box,
-            { shrink: hasRightChild && !hasLeftChild ? true : false },
-            rightbuttonGroup.length > 1 ? rightbuttonGroup.map(function (item) {
-              return React.createElement(
-                'div',
-                { className: style.marginRight },
-                item
-              );
-            }) : rightbuttonGroup[0]
-          ) : null,
-          hasCenterChild ? React.createElement(
-            Box,
-            null,
-            centerbuttonGroup.length > 1 ? centerbuttonGroup.map(function (item, index) {
-              return React.createElement(
-                'div',
-                { className: style.marginRight, key: index },
-                item
-              );
-            }) : centerbuttonGroup[0]
-          ) : null
-        )
-      );
-    }
-  }]);
-
-  return FormAction;
-}(React.Component);
-
-export default FormAction;
-
-
+}
 FormAction.propTypes = {
   children: PropTypes.node,
   paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: PropTypes.string,
   size: PropTypes.oneOf(['large', 'medium', 'small'])
 };
-
 FormAction.defaultProps = {
   size: 'medium',
   paddingRightClass: ''
-};
+};
+
+if (false) {
+  FormAction.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/FormAction/FormAction.module.css

@@ -1,11 +1,16 @@
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
 .wrapperDiv {
   position: relative;
   z-index: 1;
+  composes: varClass;
 }
 .footerParent {
   position: relative;
-  background-color: var(--dot_bg_white);
-  border-top: solid 1px var(--dot_border_solitude);
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
 }
 .largeFooter {
   padding-top: var(--zd_size24);
@@ -16,62 +21,37 @@
   padding-bottom: var(--zd_size20);
 }
 .smallFooter {
-  padding-top: var(--zd_size6);
-  padding-bottom: var(--zd_size6);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
 }
 
-[dir=ltr] .largePadding {
+.largePadding {
   padding-left: var(--zd_size60);
 }
-
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60);
-}
-[dir=ltr] .mediumPadding {
+.mediumPadding {
   padding-left: var(--zd_size50);
 }
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50);
-}
-[dir=ltr] .xmediumPadding {
+.xmediumPadding {
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30);
-}
-[dir=ltr] .smallPadding {
+.smallPadding {
   padding-left: var(--zd_size25);
 }
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25);
-}
-[dir=ltr] .xsmallPadding {
+.xsmallPadding {
   padding-left: var(--zd_size20);
 }
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20);
-}
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
+.largeFooter .marginRight,
+.mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15);
-}
-[dir=ltr] .smallFooter .marginRight {
+.smallFooter .marginRight {
   margin-right: var(--zd_size12);
 }
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12);
-}
 
-[dir=ltr] .marginRight:last-child {
+.marginRight:last-child {
   margin-right: 0;
 }
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0;
-}