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

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,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,8 +21,8 @@
   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 {

package/es/FormAction/docs/FormAction__default.docs.js

@@ -1,199 +1,72 @@
-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 Button from '@zohodesk/components/lib/Button/Button';
 import Icon from '@zohodesk/icons/lib/Icon';
 import FormAction, { LeftSide, RightSide, Center } from '../FormAction';
-
-var FormAction__default = function (_Component) {
-  _inherits(FormAction__default, _Component);
-
-  function FormAction__default() {
-    _classCallCheck(this, FormAction__default);
-
-    return _possibleConstructorReturn(this, (FormAction__default.__proto__ || _Object$getPrototypeOf(FormAction__default)).apply(this, arguments));
+export default class FormAction__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(FormAction, null, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("p", null, "Left"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "medium"
+    }, /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Right"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement("p", null, "Left")), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Right"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "small"
+    }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement("p", null, "Center"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Large"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "medium"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Medium"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "medium",
+      paddingLeftSize: "xmedium"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "XMedium"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "small"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled",
+      size: "small"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "Small"))), /*#__PURE__*/React.createElement(FormAction, {
+      size: "small",
+      paddingLeftSize: "xsmall"
+    }, /*#__PURE__*/React.createElement(LeftSide, null, /*#__PURE__*/React.createElement(Button, {
+      text: "primary",
+      palette: "primary",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Button, {
+      text: "primaryFilled",
+      palette: "primaryFilled",
+      size: "small"
+    })), /*#__PURE__*/React.createElement(RightSide, null, /*#__PURE__*/React.createElement("p", null, "XSmall"))));
   }
 
-  _createClass(FormAction__default, [{
-    key: 'render',
-    value: function render() {
-      return React.createElement(
-        'div',
-        { style: {
-            marginTop: '20px'
-          }
-        },
-        React.createElement(
-          FormAction,
-          null,
-          React.createElement(
-            LeftSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Left'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'medium' },
-          React.createElement(
-            RightSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Right'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'large' },
-          React.createElement(
-            LeftSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Left'
-            )
-          ),
-          React.createElement(
-            RightSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Right'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'small' },
-          React.createElement(
-            Center,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Center'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'large' },
-          React.createElement(
-            LeftSide,
-            null,
-            React.createElement(Button, { text: 'primary', palette: 'primary' }),
-            React.createElement(Button, { text: 'primaryFilled', palette: 'primaryFilled' })
-          ),
-          React.createElement(
-            RightSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Large'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'medium' },
-          React.createElement(
-            LeftSide,
-            null,
-            React.createElement(Button, { text: 'primary', palette: 'primary' }),
-            React.createElement(Button, { text: 'primaryFilled', palette: 'primaryFilled' })
-          ),
-          React.createElement(
-            RightSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Medium'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'medium', paddingLeftSize: 'xmedium' },
-          React.createElement(
-            LeftSide,
-            null,
-            React.createElement(Button, { text: 'primary', palette: 'primary' }),
-            React.createElement(Button, { text: 'primaryFilled', palette: 'primaryFilled' })
-          ),
-          React.createElement(
-            RightSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'XMedium'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'small' },
-          React.createElement(
-            LeftSide,
-            null,
-            React.createElement(Button, { text: 'primary', palette: 'primary', size: 'small' }),
-            React.createElement(Button, { text: 'primaryFilled', palette: 'primaryFilled', size: 'small' })
-          ),
-          React.createElement(
-            RightSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'Small'
-            )
-          )
-        ),
-        React.createElement(
-          FormAction,
-          { size: 'small', paddingLeftSize: 'xsmall' },
-          React.createElement(
-            LeftSide,
-            null,
-            React.createElement(Button, { text: 'primary', palette: 'primary', size: 'small' }),
-            React.createElement(Button, { text: 'primaryFilled', palette: 'primaryFilled', size: 'small' })
-          ),
-          React.createElement(
-            RightSide,
-            null,
-            React.createElement(
-              'p',
-              null,
-              'XSmall'
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return FormAction__default;
-}(Component);
-
-export default FormAction__default;
-
+}
 
 if (false) {
   FormAction__default.docs = {
-    componentGroup: 'FormAction'
+    componentGroup: 'Atom'
   };
 }