@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/es/FlipCard/docs/FlipCard__default.docs.js

@@ -1,102 +1,63 @@
-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 PropTypes from 'prop-types';
 import FlipCard from '../FlipCard';
-
-var FlipCard__default = function (_Component) {
-  _inherits(FlipCard__default, _Component);
-
-  function FlipCard__default(props) {
-    _classCallCheck(this, FlipCard__default);
-
-    var _this = _possibleConstructorReturn(this, (FlipCard__default.__proto__ || _Object$getPrototypeOf(FlipCard__default)).call(this, props));
-
-    _this.state = { isChecked: false };
-    return _this;
+export default class FlipCard__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: false
+    };
   }
 
-  _createClass(FlipCard__default, [{
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
-
-      return React.createElement(
-        'div',
-        null,
-        React.createElement(
-          'div',
-          null,
-          React.createElement(FlipCard, {
-            channel: 'email',
-            action: 'incoming',
-            id: 'test1',
-            onChange: function onChange(id, checked) {
-              _this2.setState({ isChecked: checked });
-            },
-            noNeedFlip: true,
-            isChecked: this.state.isChecked,
-            size: 'xmedium'
-          })
-        ),
-        React.createElement('br', null),
-        React.createElement('br', null),
-        React.createElement(
-          'div',
-          null,
-          React.createElement(FlipCard, {
-            id: 'test2',
-            name: 'phone',
-            onChange: function onChange(id, checked) {
-              _this2.setState({ isChecked: checked });
-            },
-            isChecked: this.state.isChecked,
-            size: 'xmedium'
-          })
-        ),
-        React.createElement('br', null),
-        React.createElement('br', null),
-        React.createElement(
-          'div',
-          null,
-          React.createElement(FlipCard, {
-            id: 'test3',
-            name: 'EL',
-            isPaidUser: true,
-            onChange: function onChange(id, checked) {
-              _this2.setState({ isChecked: checked });
-            },
-            isChecked: this.state.isChecked,
-            size: 'xmedium'
-          })
-        ),
-        React.createElement('br', null),
-        React.createElement('br', null),
-        React.createElement(
-          'div',
-          null,
-          React.createElement(FlipCard, {
-            id: 'test4',
-            name: 'BK',
-            isPortalUser: true,
-            onChange: function onChange(id, checked) {
-              _this2.setState({ isChecked: checked });
-            },
-            isChecked: this.state.isChecked,
-            size: 'xmedium'
-          })
-        )
-      );
-    }
-  }]);
-
-  return FlipCard__default;
-}(Component);
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      channel: "email",
+      action: "incoming",
+      id: "test1",
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      noNeedFlip: true,
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test2",
+      name: "phone",
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test3",
+      name: "EL",
+      isPaidUser: true,
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FlipCard, {
+      id: "test4",
+      name: "BK",
+      isPortalUser: true,
+      onChange: (id, checked) => {
+        this.setState({
+          isChecked: checked
+        });
+      },
+      isChecked: this.state.isChecked,
+      size: "xmedium"
+    })));
+  }
 
-export default FlipCard__default;
+}
 
 if (false) {
   FlipCard__default.docs = {

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,24 +1,17 @@
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
 .wrapperDiv {
   position: relative;
   z-index: 1;
+  composes: varClass;
 }
 .footerParent {
-  border-top: 1px solid var(--zd_border_smoke91);
   position: relative;
-  background-color: var(--dot_bg_white);
-}
-.footerParent:after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  box-shadow: 0 -2px 4px -2px var(--zd_shadow_graytrans6);
-  top: calc(var(--zd_size1) * -1);
-  bottom: 0;
-  left: 15%;
-  right: 15%;
-  border-radius: 100px / 10px;
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
 }
-
 .largeFooter {
   padding-top: var(--zd_size24);
   padding-bottom: var(--zd_size24);
@@ -32,33 +25,58 @@
   padding-bottom: var(--zd_size10);
 }
 
-.largePadding {
+[dir=ltr] .largePadding {
   padding-left: var(--zd_size60);
 }
-.mediumPadding {
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60);
+}
+[dir=ltr] .mediumPadding {
   padding-left: var(--zd_size50);
 }
-.xmediumPadding {
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .xmediumPadding {
   padding-left: var(--zd_size30);
 }
-.smallPadding {
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallPadding {
   padding-left: var(--zd_size25);
 }
-.xsmallPadding {
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25);
+}
+[dir=ltr] .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';
 }
-.largeFooter .marginRight,
-.mediumFooter .marginRight {
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-.smallFooter .marginRight {
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15);
+}
+[dir=ltr] .smallFooter .marginRight {
   margin-right: var(--zd_size12);
 }
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12);
+}
 
-.marginRight:last-child {
+[dir=ltr] .marginRight:last-child {
   margin-right: 0;
 }
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0;
+}