@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,20 +5,27 @@
     composes: varClass;
     min-height: var(--zd_size54);
     position: relative;
+    color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;
     border-color: var(--commonalert_border_color);
     border-width: 2px 0 0 0;
-    color: var(--zdt_desktopnotification_text);
   }
   
   .title {
-    margin: 0 var(--zd_size5) 0 var(--zd_size10);
     font-size: var(--zd_font_size18);
     line-height: var(--zd_size22);
     font-family: var(--zd_bold);
     composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
+  
+  [dir=ltr] .title {
+  margin: 0 var(--zd_size5) 0 var(--zd_size10);
+  }
+  
+  [dir=rtl] .title {
+    margin: 0 var(--zd_size10) 0 var(--zd_size5);
+  }
 
   .infoText {
     font-size: var(--zd_font_size14);
@@ -50,8 +57,11 @@
 
 
 /* Primary Header */
-.primary {
-    padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
+[dir=ltr] .primary {
+  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
+}
+[dir=rtl] .primary {
+    padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
 }
 
 .primary .iconContainer {
@@ -66,14 +76,26 @@
   .primary .close {
     position: absolute;
     top: var(--zd_size12);
-    right: var(--zd_size12);
+  }
+  
+  [dir=ltr] .primary .close {
+  right: var(--zd_size12);
+  }
+  
+  [dir=rtl] .primary .close {
+    left: var(--zd_size12);
   }
 
   /* Secondary Header */
   .secondary {
-    padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-    border-radius: 0 0 var(--zd_size10) var(--zd_size10);
     composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+    border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  }
+  [dir=ltr] .secondary {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
+  }
+  [dir=rtl] .secondary {
+    padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
   }
 
   .secondary .infoText {
@@ -86,15 +108,30 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    left: var(--zd_size18);
     margin: auto 0;
   }
 
+  [dir=ltr] .secondary .iconContainer {
+  left: var(--zd_size18);
+  }
+
+  [dir=rtl] .secondary .iconContainer {
+    right: var(--zd_size18);
+  }
+
   .secondary .close {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: var(--zd_size12);
-    margin: auto 0 auto var(--zd_size25);
     height: var(--zd_size25);
+  }
+
+  [dir=ltr] .secondary .close {
+  right: var(--zd_size12);
+  margin: auto 0 auto var(--zd_size25);
+  }
+
+  [dir=rtl] .secondary .close {
+    left: var(--zd_size12);
+    margin: auto var(--zd_size25) auto 0;
   }

package/lib/version2/notification/DesktopNotificationHeader/docs/DesktopNotificationHeader__default.docs.js

@@ -0,0 +1,108 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader"));
+
+var _docStyleModule = _interopRequireDefault(require("@zohodesk/components/lib/common/docStyle.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var DesktopNotificationHeader__default = /*#__PURE__*/function (_Component) {
+  _inherits(DesktopNotificationHeader__default, _Component);
+
+  var _super = _createSuper(DesktopNotificationHeader__default);
+
+  function DesktopNotificationHeader__default(props) {
+    _classCallCheck(this, DesktopNotificationHeader__default);
+
+    return _super.call(this, props);
+  }
+
+  _createClass(DesktopNotificationHeader__default, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: _docStyleModule["default"].m50
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '452px',
+          marginBottom: '20px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+        type: "success",
+        title: "Updated Successfully"
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '452px',
+          marginBottom: '20px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+        type: "notification",
+        title: "Desktop Notification"
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '452px',
+          marginBottom: '20px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+        type: "danger",
+        title: "Authorization Pending"
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '452px',
+          marginBottom: '20px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
+        type: "success",
+        title: "You have started following this Ticket",
+        variant: "secondary"
+      })));
+    }
+  }]);
+
+  return DesktopNotificationHeader__default;
+}(_react.Component);
+
+exports["default"] = DesktopNotificationHeader__default;
+DesktopNotificationHeader__default.propTypes = {};
+
+if (false) {
+  DesktopNotificationHeader__default.docs = {
+    componentGroup: 'DesktopNotificationHeader',
+    folderName: 'Alert'
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-temp-62",
+  "version": "1.0.0-temp-65",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -17,8 +17,7 @@
     "build:dev": "npm run clean && npm run build:es --module:mode=dev -- -w",
     "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
     "prepare": "npm run init && npm run build && npm run build:es && npm run rtl",
-    "init": "npm run clean && npm run build:variables",
-    "build:variables": "node ./preprocess/index",
+    "init": "npm run clean",
     "lint": "react-cli lint",
     "lintAll": "react-cli lint ./src",
     "lintAllFix": "npm run lintAll --eslint:fix=true",
@@ -31,26 +30,23 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.29",
+    "@zohodesk/variables": "1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-227",
-    "@zohodesk/icons": "1.0.0-beta.92",
-    "@zohodesk/svg": "1.0.0-beta.41",
+    "@zohodesk/components": "1.0.0-temp-48",
+    "@zohodesk/icons": "1.0.0-beta.85",
+    "@zohodesk/svg": "1.0.0-beta.37",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
   "peerDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "^1.0.0-beta.29",
+    "@zohodesk/variables": "^1.0.0-beta.25",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-227",
+    "@zohodesk/components": "1.0.0-alpha-219",
     "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/svg": "1.0.0-beta.41"
+    "@zohodesk/svg": "^1.0.0-beta.37"
   },
   "react-cli": {
-    "preprocessor": {
-      "runner": "preprocess/index.js"
-    },
     "app": {
       "removePropTypes": {
         "removeImport": true

package/src/ActionButton/ActionButton.js

@@ -0,0 +1,197 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import Icon from '@zohodesk/icons/lib/Icon';
+import Button from '@zohodesk/components/lib/Button/Button';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import  CssProvider  from '@zohodesk/components/lib/Provider/CssProvider';
+import style from './ActionButton.module.css';
+
+export class ActionButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+  }
+
+  handleTogglePopup(e) {
+    let { togglePopup,defaultPosition } = this.props;
+    togglePopup(e,defaultPosition);
+  }
+
+  render() {
+    let {
+      isLoading,
+      onClick,
+      size,
+      dataId,
+      isArrow,
+      text,
+      subText,
+      arrowBoxDataId,
+      arrowBoxSize,
+      palette,
+      onHover,
+      position,
+      className,
+      iconName,
+      iconSize,
+      dataTitle,
+      isDisabled,
+      isPopupOpen,
+      removeClose,
+      children,
+      dropBoxClass,
+      isBoxPaddingNeed,
+      getContainerRef,
+      getTargetRef
+    } = this.props;
+    return (
+      <Container
+        alignBox='row'
+        isCover={false}
+        className={` ${style.container} ${style[palette+'Box']} ${style[size]} ${className} ${
+          isDisabled ? CssProvider('isDisabled') : ''
+        } ${!onClick ? style.wholeDiv : ''} `}
+        onClick={onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined}
+        onMouseEnter={!onClick ? onHover && this.handleTogglePopup : undefined}
+        onMouseLeave={!onClick ? onHover && this.handleTogglePopup : undefined}
+        eleRef={getTargetRef}
+      >
+        {isLoading ? (
+          <Box flexible>
+            <Button
+              status='loading'
+              palette={palette}
+              size='medium'
+              customClass={{
+                customButton: style.btn
+              }}
+            />
+          </Box>
+        ) : (
+          <React.Fragment>
+            <Box
+              flexible
+              onClick={onClick}
+              dataId={dataId}
+              className={`${style.contentBox} ${style[palette+'Btn']} ${style[size+'_btnBox']} ${
+                children ? style.contentBoxBdr : style.contentBoxBdrRds
+              } ${style.clickable} `}
+              data-title={dataTitle}
+            >
+              <Container align='both'>
+                <Box className={style.contentwrapper}>
+                  <Container isCover={false} alignBox='row' align='vertical'>
+                    {iconName ? (
+                      <Icon
+                        name={iconName}
+                        size={iconSize}
+                        iconClass={`${style.iconClr} ${
+                          text ? style.iconMrgn : ''
+                        }`}
+                      />
+                    ) : null}
+                    {text ? (
+                      <Box shrink className={style.txt} data-title={text}>
+                        {text}
+                      </Box>
+                    ) : null}
+                  </Container>
+                </Box>
+                {subText ? (
+                  <Box data-title={subText} className={style.subTxt}>
+                    {subText}
+                  </Box>
+                ) : null}
+              </Container>
+            </Box>
+
+            {children ? (
+              <Box
+                onClick={ onClick ? !onHover && this.handleTogglePopup : undefined}
+                onMouseEnter={ onClick ? onHover && this.handleTogglePopup : undefined}
+                onMouseLeave={ onClick ? onHover && this.handleTogglePopup : undefined}
+                className={`${style[arrowBoxSize+'_arrowBox']} ${style[palette+'Arw']}  ${
+                  style.arrowWrapper
+                } ${isPopupOpen ? style.arrowActive : ''}`}
+                dataId={arrowBoxDataId}
+              >
+                <Container align='both'>
+                  <Icon
+                    name='ZD-down'
+                    size='6'
+                    iconClass={style.arrow}
+                  />
+                </Container>
+                {isPopupOpen ? (
+                  <DropBox
+                    size='small'
+                    isActive={isPopupOpen}
+                    boxPosition={position}
+                    isAnimate
+                    isArrow={isArrow}
+                    customClass={{
+                      customDropBoxWrap: dropBoxClass
+                    }}
+                    isBoxPaddingNeed={isBoxPaddingNeed}
+                    getRef={getContainerRef}
+                  >
+                    {children}
+                  </DropBox>
+                ) : null}
+              </Box>
+            ) : null}
+          </React.Fragment>
+        )}
+      </Container>
+    );
+  }
+}
+
+ActionButton.defaultProps = {
+  size: 'medium',
+  isArrow: false,
+  arrowBoxDataId: 'arrowBox',
+  dataId: 'actionButton',
+  onHover: false,
+  className: '',
+  iconName: '',
+  iconSize: '9',
+  isDisabled: false,
+  dropBoxClass: '',
+  arrowBoxSize: 'medium',
+  isBoxPaddingNeed: true,
+  palette: 'primaryFilled'
+};
+ActionButton.propTypes = {
+  arrowBoxDataId: PropTypes.string,
+  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  dropBoxClass: PropTypes.string,
+  defaultPosition: PropTypes.string,
+  position: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isArrow: PropTypes.bool,
+  isBoxPaddingNeed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  onClick: PropTypes.func,
+  onHover: PropTypes.bool,
+  palette: PropTypes.oneOf('primaryFilled', 'primary'),
+  removeClose: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  subText: PropTypes.string,
+  text: PropTypes.string,
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func
+};
+ActionButton.docs = {
+  componentGroup: 'Atom'
+};
+export default Popup(ActionButton);

package/src/ActionButton/ActionButton.module.css

@@ -0,0 +1,120 @@
+.varClass {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
+  --buttonBorder: var(--zdt_actionButton_primary_border);
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
+}
+.container {
+  composes: varClass;
+}
+.container:hover {
+  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
+}
+.primaryFilledBox {
+  --buttonText: var(--zdt_actionButton_primaryFilled_text);
+}
+.primaryFilledBtn, .primaryFilledArw {
+  background-color: var(--buttonBg);
+}
+.primaryBox {
+  --buttonText: var(--zdt_actionButton_primary_text);
+}
+.primaryBtn, .primaryArw {
+  border: 1px solid var(--buttonBorder);
+}
+.primaryBtn {
+  border-right: none;
+}
+.contentBox,
+.arrowWrapper {
+  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
+}
+.clickable {
+  cursor: pointer;
+}
+.contentBoxBdr {
+  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
+}
+.contentBoxBdrRds {
+  border-radius: var(--zd_size4);
+}
+.small {
+  height: var(--zd_size28);
+}
+.medium,
+.large {
+  height: var(--zd_size30);
+}
+.medium {
+  min-width: var(--zd_size115);
+}
+.large {
+  min-width: var(--zd_size135);
+}
+.small_btnBox {
+  padding: 0 var(--zd_size8);
+}
+.medium_btnBox,
+.large_btnBox {
+  padding: 0 var(--zd_size10);
+}
+.txt {
+  font-size: var(--zd_font_size13);
+  font-family: var(--zd_semibold);
+  text-transform: capitalize;
+}
+.subTxt {
+  font-size: var(--zd_font_size10);
+}
+.contentwrapper,
+.txt,
+.subTxt {
+  max-width: 100%;
+}
+.txt,
+.subTxt {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--buttonText);
+}
+.arrowWrapper {
+  position: relative;
+  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
+  cursor: pointer;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+}
+.primaryFilledArw {
+    border-left: 1px solid var(--buttonSeparatorBorder);
+}
+.small_arrowBox {
+  width: var(--zd_size20);
+}
+.medium_arrowBox {
+  width: var(--zd_size26);
+}
+.primaryFilledArw:hover,
+.primaryFilledArw.arrowActive,
+.clickable.primaryFilledBtn:hover,
+.wholeDiv.primaryFilledBox:hover {
+  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
+}
+.primaryArw:hover,
+.primaryArw.arrowActive,
+.clickable.primaryBtn:hover,
+.wholeDiv.primaryBox:hover {
+  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
+  --buttonText: var(--zdt_actionButton_primary_hover_text);
+}
+.btn {
+  height: 100%;
+  width: 100%;
+}
+.popupWrapper {
+  padding: var(--zd_size10) 0;
+  margin: var(--zd_size5) 0;
+}
+.arrow,
+.iconClr {
+  color: var(--buttonText);
+}
+.iconMrgn {
+  margin-right: var(--zd_size6);
+}

package/src/ActionButton/docs/ActionButton__default.docs.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import ActionButton from '../ActionButton';
+
+export default class ActionButton__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='small' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='medium' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='large' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Reply' size='large' isLoading />
+        </div>
+        <br></br>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropdownChildren={'children'}
+            dropBoxPosition='bottomRight'
+            size='small'
+            isDisabled
+          />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropBoxPosition='bottomRight'
+            size='small'
+          >
+            children
+          </ActionButton>
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropBoxPosition='bottomRight'
+            size='small'
+            onHover
+          >
+            children
+          </ActionButton>
+        </div>
+        <br></br>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            dropBoxPosition='bottomRight'
+            size='small'
+            onHover
+          >
+            children
+          </ActionButton>
+        </div>
+        <br />
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            dropBoxPosition='bottomRight'
+            size='small'
+          >
+            children
+          </ActionButton>
+        </div>
+        <br />
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton text='Comment' subText='Public' />
+        </div>
+        <div style={{ margin: '20px', display: 'inline-block' }}>
+          <ActionButton
+            text='Reply all'
+            iconName='ZD-replyall'
+            iconSize='9'
+            onClick={() => ''}
+            dropBoxPosition='bottomRight'
+            size='small'
+            palette='primary'
+          >
+            children
+          </ActionButton>
+        </div>
+        <div style={{ margin: '20px'}}></div>
+      </React.Fragment>
+    );
+  }
+}
+ActionButton__default.docs = {
+  componentGroup: 'Atom'
+};