@zohodesk/dot 1.1.0 → 1.2.0

package/es/v1/FormAction/FormAction.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { defaultProps } from '../../FormAction/props/defaultProps';
+import { propTypes } from '../../FormAction/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../FormAction/FormAction.module.css';
+export const LeftSide = props => {
+  props.children;
+};
+export const RightSide = props => {
+  props.children;
+};
+export const Center = props => {
+  props.children;
+};
+export default function FormAction(props) {
+  let {
+    size,
+    children,
+    paddingLeftSize,
+    paddingRightClass,
+    dataSelectorId
+  } = 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,
+    "data-selector-id": dataSelectorId
+  }, /*#__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}`}
+
+                        ${style[`${size}Footer`]}
+                    `
+  }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
+    flexible: hasRightChild ? true : false,
+    shrink: !hasRightChild && hasLeftChild ? true : false
+  }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
+    shrink: hasRightChild && !hasLeftChild ? true : false
+  }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, 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));
+}
+FormAction.propTypes = propTypes;
+FormAction.defaultProps = defaultProps; // if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/IconButton/IconButton.js

@@ -0,0 +1,113 @@
+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, { useState } from 'react';
+import { defaultProps } from '../../IconButton/props/defaultProps';
+import { propTypes } from '../../IconButton/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container } from '@zohodesk/components/lib/Layout';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import style from '../../IconButton/IconButton.module.css';
+export default function IconButton(props) {
+  let {
+    palette,
+    iconSize,
+    iconName,
+    className,
+    iconClass,
+    dataId,
+    dataSelectorId,
+    eleRef,
+    isActive,
+    tourId,
+    isDisabled,
+    children,
+    hoverType,
+    title,
+    isBold,
+    isNeedEffect,
+    needButtonTag,
+    a11y,
+    dataIsHtml,
+    customProps,
+    onClick,
+    onMouseOver,
+    onMouseDown
+  } = props;
+  const [isPressed, setPressed] = useState(false);
+
+  function handleToggle(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
+      e.preventDefault();
+      triggerClick(e);
+      triggerMouseDown(e);
+    }
+  }
+
+  function triggerClick(e) {
+    !isDisabled ? (onClick && onClick(e), setPressed(true)) : null;
+  }
+
+  function triggerMouseOver(e) {
+    !isDisabled ? (onMouseOver && onMouseOver(e), setPressed(true)) : null;
+  }
+
+  function triggerMouseDown(e) {
+    !isDisabled ? (onMouseDown && onMouseDown(e), setPressed(true)) : null;
+  }
+
+  function onBlur(e) {
+    !isDisabled ? setPressed(false) : null;
+  }
+
+  let {
+    ariaHaspopup,
+    ariaExpanded,
+    ariaLabel,
+    ariaControls,
+    ariaLabelledby
+  } = a11y;
+  return /*#__PURE__*/React.createElement(RippleEffect, {
+    palette: palette,
+    isActive: isActive,
+    hoverType: hoverType,
+    isDisabled: isDisabled,
+    isNeedEffect: isNeedEffect
+  }, /*#__PURE__*/React.createElement(Container, _extends({
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHaspopup,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": ariaControls,
+    "aria-labelledby": ariaLabelledby,
+    tagName: needButtonTag ? 'button' : 'div',
+    isInline: true,
+    tourId: tourId,
+    align: "both",
+    isCover: false,
+    className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId,
+    onClick: triggerClick,
+    "data-title": title,
+    "data-ishtml": dataIsHtml,
+    eleRef: eleRef,
+    onMouseDown: triggerMouseDown,
+    onMouseEnter: triggerMouseOver,
+    "aria-pressed": isPressed,
+    onKeyDown: handleToggle,
+    onFocus: triggerMouseOver,
+    onBlur: onBlur,
+    disabled: isDisabled
+  }, customProps), iconName ? /*#__PURE__*/React.createElement(Icon, {
+    isBold: isBold,
+    size: iconSize,
+    name: iconName,
+    iconClass: iconClass
+  }) : null, children ? children : null));
+}
+IconButton.propTypes = propTypes;
+IconButton.defaultProps = defaultProps; // if (__DOCS__) {
+//   IconButton.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/ImportantNotes/ImportantNotes.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { defaultProps } from '../../ImportantNotes/props/defaultProps';
+import { propTypes } from '../../ImportantNotes/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Icon } from '@zohodesk/icons';
+import style from '../../ImportantNotes/ImportantNotes.module.css';
+export default function ImportantNotes(props) {
+  let {
+    text,
+    iconName,
+    iconSize,
+    children,
+    iconClass,
+    isCover,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    isInline: !isCover,
+    isCover: false,
+    alignBox: "row",
+    align: "top",
+    className: `${style.section} ${className || ''}`
+  }, iconName ? /*#__PURE__*/React.createElement(Box, {
+    className: style.icon,
+    align: "start"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: iconClass
+  })) : null, text || children ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.title
+  }, text, children ? children : null) : null);
+}
+ImportantNotes.propTypes = propTypes;
+ImportantNotes.defaultProps = defaultProps; // if (__DOCS__) {
+//   ImportantNotes.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'General'
+//   };
+// }

package/es/v1/Link/Link.js

@@ -0,0 +1,95 @@
+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, { useContext, useRef } from 'react';
+import { defaultProps } from '../../Link/props/defaultProps';
+import { propTypes } from '../../Link/props/propTypes';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import LinkContext from '../../Link/LinkContext';
+import style from '../../Link/Link.module.css';
+export default function Link(props) {
+  let {
+    children,
+    href,
+    target,
+    urlData,
+    urlName,
+    className,
+    title,
+    download,
+    rel,
+    dataId,
+    customProps,
+    ariaLabel,
+    hasReload,
+    onClick
+  } = props;
+  const {
+    options
+  } = useContext(LinkContext);
+  const {
+    isLink,
+    constructURL,
+    onCallBack
+  } = options;
+  let urlOutput = href ? href : constructURL(urlName, urlData);
+  let option = useRef({});
+
+  if (download) {
+    option.current.download = true;
+  }
+
+  let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
+  let others = Object.keys(props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
+    res[key] = props[key];
+    return res;
+  }, {});
+
+  function callBack(e) {
+    if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
+      cancelBubblingEffect(e);
+      return;
+    }
+
+    onClick && onClick(e);
+
+    if (!hasReload && target != '_blank') {
+      e && e.preventDefault();
+    }
+
+    cancelBubblingEffect(e);
+    !onClick && onCallBack && onCallBack(e);
+  }
+
+  function addHttp(url) {
+    /* eslint-disable */
+    if (!/^(f|ht)tps?:\/\//i.test(url)) {
+      url = 'http://' + url;
+    }
+    /* eslint-enable */
+
+
+    return url;
+  } //urlOutput = addHttp(urlOutput);
+
+
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
+    target: target,
+    "data-title": title,
+    className: `${style.container}  ${className ? className : ''}`
+  }, option.current, {
+    rel: rel,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, others, {
+    onClick: callBack
+  }, customProps, {
+    "aria-label": ariaLabel
+  }), children);
+}
+Link.defaultProps = defaultProps;
+Link.propTypes = propTypes; // if (__DOCS__) {
+//   Link.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/MessageBanner/MessageBanner.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { defaultProps } from '../../MessageBanner/props/defaultProps';
+import { propTypes } from '../../MessageBanner/props/propTypes';
+import Link from '../../Link/Link';
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../MessageBanner/MessageBanner.module.css';
+export default function MessageBanner(props) {
+  let {
+    type,
+    message,
+    onClose,
+    href,
+    onClick,
+    urlText,
+    palette,
+    customClass,
+    dataId,
+    dataSelectorId
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${style[`type_${type}`]} ${style[`palette_${palette}`]} ${customClass}`,
+    alignBox: "row",
+    isCover: false,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.content,
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.message,
+    adjust: true,
+    shrink: true,
+    "data-title": message
+  }, message), href && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+    href: href,
+    onClick: onClick,
+    className: style.link,
+    target: "_blank"
+  }, urlText)))), onClose ? /*#__PURE__*/React.createElement(Box, {
+    className: style.close,
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-closee",
+    size: "35"
+  }))) : null);
+}
+MessageBanner.defaultProps = defaultProps;
+MessageBanner.propTypes = propTypes; // if (__DOCS__) {
+//   MessageBanner.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/TagWithIcon/TagWithIcon.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { defaultProps } from '../../TagWithIcon/props/defaultProps';
+import { propTypes } from '../../TagWithIcon/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Icon from '@zohodesk/icons/es/Icon';
+import style from '../../TagWithIcon/TagWithIcon.module.css';
+export default function TagWithIcon(props) {
+  const {
+    text,
+    iconName,
+    iconSize,
+    palette,
+    iconClass,
+    isBold,
+    size,
+    dataId,
+    className,
+    title
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    isInline: true,
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: `${style.wrapper} ${style[palette]} ${style[size]} ${className}`,
+    dataId: dataId,
+    title: title
+  }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: `${text ? style.iconSpace : ''} ${iconClass} `
+  }) : null, text ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "data-title": text,
+    className: `${style.text} ${style[size]}_text ${isBold ? style.bold : ''}`
+  }, text) : null);
+}
+TagWithIcon.propTypes = propTypes;
+TagWithIcon.defaultProps = defaultProps;

package/es/v1/alert/AlertHeader/AlertHeader.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { defaultProps } from '../../../alert/AlertHeader/props/defaultProps';
+import { propTypes } from '../../../alert/AlertHeader/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Title from '../../../lookup/header/Title/Title';
+import Close from '../../../lookup/header/Close/Close';
+import style from '../../../alert/AlertHeader/AlertHeader.module.css';
+export default function AlertHeader(props) {
+  let {
+    title,
+    palette,
+    needIcon,
+    iconType,
+    onClose,
+    iconName,
+    iconSize,
+    closeTitle,
+    children,
+    breakChildren,
+    dataId,
+    iconClass
+  } = props;
+  let iconObj = {
+    delete: 'ZD-socialDelete',
+    alert: 'ZD-exclamationThincircle',
+    remoteAssist: 'ZD-taskDemo',
+    splitTicket: 'ZD-splitNew',
+    update: 'ZD-update'
+  };
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${style.container} ${style[palette]}`,
+    isCover: false,
+    wrap: "wrap"
+  }, needIcon ? /*#__PURE__*/React.createElement("div", {
+    className: style.iconContainer
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: iconSize,
+    name: iconName ? iconName : iconObj[iconType] ? iconObj[iconType] : iconName,
+    iconClass: `${style.iconStyle} ${iconObj[iconType] && !iconSize ? style[`icon_${iconType}`] : ''} ${style[`text_${palette}`]} ${iconClass}`
+  })) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    wrap: breakChildren ? 'wrap' : null
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.title,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Title, {
+    text: title,
+    palette: palette
+  })), children ? /*#__PURE__*/React.createElement(Box, {
+    adjust: true,
+    flexible: true
+  }, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Close, {
+    onClose: onClose,
+    title: closeTitle,
+    dataId: `${dataId}_close`
+  })) : null);
+}
+AlertHeader.propTypes = propTypes;
+AlertHeader.defaultProps = defaultProps; // if (__DOCS__) {
+//   AlertHeader.docs = {
+//     componentGroup: 'AlertHeader',
+//     folderName: 'Alert'
+//   };
+// }

package/es/v1/alert/AlertLookup/AlertLookup.js

@@ -0,0 +1,104 @@
+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 { defaultProps } from '../../../alert/AlertLookup/props/defaultProps';
+import { propTypes } from '../../../alert/AlertLookup/props/propTypes';
+/**** Components ****/
+
+import Button from '@zohodesk/components/lib/Button/Button';
+import AlertHeader from '../AlertHeader/AlertHeader';
+import Lookup from '../../../lookup/Lookup/Lookup';
+import Section from '../../../lookup/Section/Section';
+import FormAction from '../../../FormAction/FormAction';
+/**** CSS ****/
+
+import style from '../../../alert/AlertLookup/AlertLookup.module.css';
+export default function AlertLookup(props) {
+  let {
+    isActive,
+    palette,
+    size,
+    type,
+    title,
+    message,
+    confirmationMessage,
+    submitText,
+    cancelText,
+    onSubmitClick,
+    onCancelClick,
+    children,
+    forwardRef,
+    onClose,
+    headerChildren,
+    wrapHeader,
+    sectionClassName,
+    dataId,
+    onLookupClick,
+    customClass,
+    needIcon,
+    iconName,
+    iconClass,
+    iconSize,
+    customProps,
+    isHtmlContent,
+    onEsc
+  } = props;
+  const {
+    LookupProps = {},
+    AlertHeaderProps = {},
+    PrimaryButtonProps = {},
+    SecondaryButtonProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement(Lookup, _extends({
+    needFocusScope: true,
+    onClose: onEsc == 'close' ? onClose : onCancelClick,
+    isActive: isActive,
+    size: size,
+    dataId: dataId,
+    forwardRef: forwardRef,
+    onClick: onLookupClick,
+    customClass: customClass
+  }, LookupProps), /*#__PURE__*/React.createElement(AlertHeader, _extends({
+    title: title,
+    palette: palette,
+    iconType: type,
+    needIcon: Boolean(type) || needIcon,
+    onClose: onClose,
+    breakChildren: wrapHeader,
+    iconName: iconName,
+    iconClass: iconClass,
+    iconSize: iconSize
+  }, AlertHeaderProps), headerChildren ? headerChildren() : null), /*#__PURE__*/React.createElement(Section, {
+    alignBox: "row",
+    className: style.section
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${style.innerSection} ${sectionClassName}`
+  }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }) : /*#__PURE__*/React.createElement("div", null, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
+    className: style.text
+  }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(FormAction, {
+    size: "small",
+    paddingLeftSize: "xsmall"
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    text: submitText,
+    dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
+    onClick: onSubmitClick,
+    palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled'
+  }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+    dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
+    text: cancelText,
+    onClick: onCancelClick,
+    palette: "secondary"
+  }, SecondaryButtonProps))) : null));
+}
+AlertLookup.propTypes = propTypes;
+AlertLookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   AlertLookup.docs = {
+//     componentGroup: 'AlertLookup',
+//     folderName: 'Alert'
+//   };
+// }

package/es/v1/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { defaultProps } from '../../../emptystate/CommonEmptyState/props/defaultProps';
+import { propTypes } from '../../../emptystate/CommonEmptyState/props/propTypes';
+import Link from '../../Link/Link';
+import style from '../../../emptystate/CommonEmptyState/CommonEmptyState.module.css';
+export default function CommonEmptyState(props) {
+  let {
+    title,
+    description,
+    linkDescription,
+    linkUrl,
+    linkText,
+    linkTarget,
+    onUrlClick,
+    getEmptyState,
+    className,
+    dataId,
+    isFluid,
+    children,
+    size,
+    palette,
+    customClass
+  } = props;
+  let {
+    titleClass = '',
+    descriptionClass = ''
+  } = customClass;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${style[size]} ${className} ${!isFluid ? style.fluid : ''} ${style[palette]}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/React.createElement("div", {
+    className: `${style.title} ${titleClass}`
+  }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
+    className: style.linkWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${style.desc} ${descriptionClass}`
+  }, description), !linkDescription && linkText ? /*#__PURE__*/React.createElement(Link, {
+    href: linkUrl,
+    className: style.link,
+    target: linkTarget,
+    onClick: onUrlClick,
+    dataId: `${dataId}_primarylink`
+  }, linkText) : null) : null, linkDescription || !description && !linkDescription && linkText ? /*#__PURE__*/React.createElement("div", {
+    className: style.linkDescWrapper
+  }, linkDescription ? /*#__PURE__*/React.createElement("span", {
+    className: `${style.linkDesc}`
+  }, linkDescription) : null, linkText ? /*#__PURE__*/React.createElement(Link, {
+    href: linkUrl,
+    className: style.link,
+    target: linkTarget,
+    onClick: onUrlClick,
+    dataId: `${dataId}_secondarylink`
+  }, linkText) : null) : null, children ? /*#__PURE__*/React.createElement("div", {
+    className: style.children
+  }, children) : null);
+}
+CommonEmptyState.propTypes = propTypes;
+CommonEmptyState.defaultProps = defaultProps; // if (__DOCS__) {
+//   CommonEmptyState.docs = {
+//     componentGroup: 'EmptyState'
+//   };
+// }