@zohodesk/dot 1.1.0 → 1.2.0

package/es/v1/emptystate/EditionPage/EditionPage.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { defaultProps } from '../../../emptystate/EditionPage/props/defaultProps';
+import { propTypes } from '../../../emptystate/EditionPage/props/propTypes';
+import EmptyCrmPotential from '@zohodesk/svg/lib/v1/emptystate/version3/EmptyCrmPotential';
+import style from '../../../emptystate/EditionPage/EditionPage.css';
+export default function EditionPage(props) {
+  let {
+    title,
+    subtitle,
+    information,
+    dataId,
+    footerText,
+    onButtonClick,
+    butttonText,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.editionContainer,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.svg
+  }, /*#__PURE__*/React.createElement(EmptyCrmPotential, null)), /*#__PURE__*/React.createElement("div", {
+    className: style.header
+  }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: style.description
+  }, subtitle) : null, /*#__PURE__*/React.createElement("div", {
+    className: style.description
+  }, information ? `${information} ` : null, butttonText ? /*#__PURE__*/React.createElement("span", {
+    className: style.button,
+    "data-id": `${dataId}_button`,
+    "data-test-id": `${dataId}_button`,
+    onClick: onButtonClick
+  }, butttonText) : null), children ? /*#__PURE__*/React.createElement("div", {
+    className: style.content
+  }, children) : null, footerText ? /*#__PURE__*/React.createElement("div", {
+    "data-id": `${dataId}_footerText`,
+    "data-test-id": `${dataId}_footerText`,
+    className: style.footer
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: footerText
+    }
+  })) : null);
+}
+EditionPage.defaultProps = defaultProps;
+EditionPage.propTypes = propTypes; // if (__DOCS__) {
+//   EditionPage.docs = {
+//     componentGroup: 'EmptyState'
+//   };
+// }

package/es/v1/lookup/Lookup/Lookup.js

@@ -0,0 +1,105 @@
+/*** Libraries ***/
+import React, { useRef, useCallback } from 'react';
+import { defaultProps } from '../../../lookup/Lookup/props/defaultProps';
+import { propTypes } from '../../../lookup/Lookup/props/propTypes';
+/*** Components ***/
+
+import FreezeLayer from '../../../FreezeLayer/FreezeLayer';
+import { Container } from '@zohodesk/components/lib/Layout';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+/*** CSS ***/
+
+import style from '../../../lookup/Lookup/Lookup.module.css';
+/*eslint-disable react/forbid-component-props */
+
+export default function Lookup(props) {
+  const {
+    isActive,
+    children,
+    size,
+    dataId,
+    forwardRef,
+    onClick,
+    customClass,
+    htmlId,
+    a11y,
+    childAnimationName,
+    onClose,
+    needFocusScope,
+    customProps,
+    onKeyDown
+  } = props;
+  const {
+    role = 'dialog',
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaModal = isActive ? true : undefined
+  } = a11y;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    autoFocus = true,
+    restoreFocus = true,
+    needArrowLoop = false,
+    needTabLoop = true,
+    enableEnterAction = false
+  } = focusScopeProps;
+  const createRef = useRef(null);
+  const handleKeyDown = useCallback(e => {
+    onKeyDown && onKeyDown(e);
+  }, [onKeyDown]);
+  useEffect(() => {
+    if (isActive) {
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isActive]);
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+  const content = /*#__PURE__*/React.createElement("div", {
+    ref: createRef,
+    tabIndex: "-1",
+    "data-a11y-need-focus-style": "false",
+    role: role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-modal": ariaModal,
+    id: htmlId,
+    className: `${style.box} ${style[`${size}Size`]}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children);
+  return /*#__PURE__*/React.createElement(FreezeLayer, {
+    align: "horizontal",
+    animationName: "fade",
+    childAnimationName: childAnimationName,
+    isActive: isActive,
+    palette: "snow",
+    forwardRef: forwardRef,
+    onClick: onClick,
+    customClass: customClass
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: style.container,
+    dataId: "fldValue"
+  }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    needTabLoop: needTabLoop,
+    needArrowLoop: needArrowLoop,
+    elementRef: createRef,
+    autoFocus: autoFocus,
+    restoreFocus: restoreFocus,
+    onClose: onClose,
+    enableEnterAction: enableEnterAction
+  }, content) : content));
+}
+Lookup.propTypes = propTypes;
+Lookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   Lookup.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

package/es/v1/setup/table/Table/Table.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/Table/props/defaultProps';
+import { propTypes } from '../../../../setup/table/Table/props/propTypes';
+import { Container } from '@zohodesk/components/lib/Layout';
+export default function Table(props) {
+  let {
+    children,
+    dataId,
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    dataId: dataId,
+    className: customClass
+  }, children);
+}
+Table.propTypes = propTypes;
+Table.defaultProps = defaultProps; // if (__DOCS__) {
+//   Table.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableBody/TableBody.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableBody/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableBody/props/propTypes';
+import { Box } from '@zohodesk/components/lib/Layout';
+export default function TableBody(props) {
+  let {
+    children,
+    eleRef,
+    onScroll = () => {},
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    eleRef: eleRef,
+    flexible: true,
+    scroll: "vertical",
+    onScroll: onScroll,
+    className: customClass
+  }, children);
+}
+TableBody.propTypes = propTypes;
+TableBody.defaultProps = defaultProps; // if (__DOCS__) {
+//   TableBody.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableData/TableData.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableData/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableData/props/propTypes';
+import { Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../../setup/table/TableData/SetupTableData.module.css';
+export default function TableData(props) {
+  let {
+    children,
+    flexible,
+    shrink,
+    align,
+    type,
+    dataId,
+    customClass,
+    eleRef
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    dataId: dataId,
+    flexible: flexible,
+    shrink: shrink,
+    eleRef: eleRef,
+    className: `${customClass} ${style.container} ${type ? style[type] : ''} ${align ? style[align] ? style[align] : '' : ''}`
+  }, children);
+}
+TableData.defaultProps = defaultProps;
+TableData.propTypes = propTypes; // if (__DOCS__) {
+//   TableData.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableHead/TableHead.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableHead/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableHead/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../../setup/table/TableHead/SetupTableHead.module.css';
+export default function TableHead(props) {
+  let {
+    children,
+    className,
+    onMouseEnter,
+    onMouseLeave,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    className: `${style.container} ${className} `,
+    dataId: dataId,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    className: style.subContainer
+  }, children));
+}
+TableHead.defaultProps = defaultProps;
+TableHead.propTypes = propTypes; // if (__DOCS__) {
+//   TableHead.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/TableRow/TableRow.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/TableRow/props/defaultProps';
+import { propTypes } from '../../../../setup/table/TableRow/props/propTypes';
+import { Container } from '@zohodesk/components/lib/Layout';
+import style from '../../../../setup/table/TableRow/SetupTableRow.module.css';
+export default function TableRow(props) {
+  let {
+    children,
+    eleRef,
+    eleStyle,
+    className,
+    dataId,
+    onMouseEnter,
+    onMouseLeave,
+    onClick
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    dataId: dataId,
+    eleRef: eleRef,
+    style: eleStyle,
+    align: "vertical",
+    isCover: false,
+    alignBox: "row",
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    className: `${style.container} ${className}`,
+    onClick: onClick
+  }, children);
+}
+TableRow.defaultProps = defaultProps;
+TableRow.propTypes = propTypes; // if (__DOCS__) {
+//   TableRow.docs = {
+//     componentGroup: 'Table',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/setup/table/Text/Text.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { defaultProps } from '../../../../setup/table/Text/props/defaultProps';
+import { propTypes } from '../../../../setup/table/Text/props/propTypes';
+import Link from '../../../../Link/Link';
+import style from '../../../../setup/table/Text/TableText.module.css';
+export default function Text(props) {
+  let {
+    text,
+    url,
+    onClick,
+    type,
+    palette,
+    className,
+    size,
+    dataId,
+    title = null,
+    target
+  } = props;
+  title = title || text;
+  let textComponent;
+  let classNameCheck = `${type ? style[type] : ''}  ${style[`${palette}Color`]} ${style[size]} ${className} ${onClick ? style.isClickable : ''}`;
+
+  if (url) {
+    textComponent = /*#__PURE__*/React.createElement(Link, {
+      title: title,
+      dataId: dataId,
+      href: url,
+      target: target,
+      className: classNameCheck,
+      onClick: onClick
+    }, text);
+  } else {
+    textComponent = /*#__PURE__*/React.createElement("div", {
+      "data-title": title,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      className: classNameCheck,
+      onClick: onClick
+    }, text);
+  }
+
+  return textComponent;
+}
+Text.defaultProps = defaultProps;
+Text.propTypes = propTypes; // if (__DOCS__) {
+//   Text.docs = {
+//     componentGroup: 'Text',
+//     folderName: 'Setup'
+//   };
+// }

package/es/v1/version2/AlertClose/AlertClose.js

@@ -0,0 +1,43 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { propTypes } from '../../../version2/AlertClose/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../version2/AlertClose/AlertClose.module.css';
+
+function AlertClose(props) {
+  let {
+    onClose,
+    dataId,
+    dataTitle,
+    type,
+    customClass
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: `${style.close} ${type ? style[type] : ''} ${customClass ? customClass : ''}`,
+    "data-title": dataTitle,
+    onClick: onClose,
+    dataId: dataId,
+    align: "both",
+    isInline: true,
+    alignBox: "row",
+    isCover: false,
+    tabIndex: "0"
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Icon, {
+    name: "GC-cross",
+    isBold: true,
+    size: "12",
+    iconClass: style.closeIcon
+  })));
+}
+
+AlertClose.propTypes = propTypes;
+const MemoizedAlertClose = /*#__PURE__*/memo(AlertClose);
+MemoizedAlertClose.propTypes = propTypes;
+MemoizedAlertClose.displayName = 'AlertClose';
+export default MemoizedAlertClose; // if (__DOCS__) {
+//   AlertClose.docs = {
+//     componentGroup: 'AlertClose',
+//     folderName: 'Alert'
+//   };
+// }

package/es/v1/version2/GlobalNotification/GlobalNotification.js

@@ -0,0 +1,111 @@
+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, { useEffect } from 'react';
+import { defaultProps } from '../../../version2/GlobalNotification/props/defaultProps';
+import { propTypes } from '../../../version2/GlobalNotification/props/propTypes';
+import AutoClose from '../../../actions/AutoClose';
+import AlertIcons from '../alertIcons/AlertIcons';
+import AlertClose from '../AlertClose/AlertClose';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../../version2/GlobalNotification/GlobalNotification.module.css';
+export default function GlobalNotification(props) {
+  let {
+    type,
+    message,
+    hideMessage,
+    onClick,
+    i18nKeys = {},
+    customProps,
+    dataSelectorId,
+    showMessage
+  } = props;
+  useEffect(() => {
+    if (!['danger', 'error', 'warning'].includes(type)) {
+      setTimeout(() => {
+        hideMessage();
+      }, 3000);
+    }
+  }, [showMessage, type]);
+  let {
+    closeTitle = 'Close'
+  } = i18nKeys;
+  return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
+    type: type,
+    message: message,
+    hideMessage: hideMessage,
+    onClick: onClick,
+    closeTitle: closeTitle,
+    customProps: customProps,
+    dataSelectorId: dataSelectorId
+  });
+}
+GlobalNotification.propTypes = propTypes;
+GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
+//   GlobalNotification.docs = {
+//     componentGroup: 'GlobalNotification',
+//     folderName: 'Alert'
+//   };
+// }
+
+export function GlobalNotificationUI(props) {
+  function onClose(e) {
+    let {
+      hideMessage,
+      onClose
+    } = props;
+    hideMessage && hideMessage(e);
+    onClose && onClose(e);
+  }
+
+  let {
+    type = '',
+    message,
+    onClick,
+    closeTitle = '',
+    customProps = {},
+    dataSelectorId
+  } = props;
+  let {
+    ExtraProps = {}
+  } = customProps;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: `${style.message} ${type ? style[type] : ''}`,
+    "data-id": `show_${type}_message`,
+    "data-test-id": `show_${type}_message`,
+    tabIndex: 0,
+    "data-selector-id": dataSelectorId
+  }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
+    className: `${style.container}`,
+    alignBox: "row",
+    isCover: false,
+    align: "vertical",
+    isInline: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.icon
+  }, /*#__PURE__*/React.createElement(AlertIcons, {
+    type: type,
+    variant: "secondary"
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.text,
+    onClick: onClick,
+    "data-id": "infoMessage",
+    "data-test-id": "infoMessage",
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  })), /*#__PURE__*/React.createElement(Box, {
+    className: style.close
+  }, /*#__PURE__*/React.createElement(AlertClose, {
+    dataId: `close_${type}_message`,
+    dataTitle: closeTitle,
+    onClose: onClose,
+    type: type
+  }))));
+}
+export function GlobalNotificationNew(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: GlobalNotificationUI
+  }));
+}

package/es/v1/version2/alertIcons/AlarmAlertIcon.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { AlarmAlertIcon_defaultProps } from '../../../version2/alertIcons/props/defaultProps';
+import { AlarmAlertIcon_propTypes } from '../../../version2/alertIcons/props/propTypes';
+import style from '../../../version2/alertIcons/AlertIcons.module.css';
+export default function AlarmAlertIcon(props) {
+  let {
+    variant,
+    type
+  } = props;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 100 100",
+    className: type ? `${style[type]}` : ''
+  }, /*#__PURE__*/React.createElement("path", {
+    className: `${style[`info_${variant}`]}`,
+    d: "M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
+  }), /*#__PURE__*/React.createElement("polygon", {
+    className: style.outer_cls2,
+    points: "95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
+  }), /*#__PURE__*/React.createElement("rect", {
+    className: style.outer_cls2,
+    x: "10",
+    y: "21.46",
+    width: "1.16",
+    height: "2.18"
+  }), /*#__PURE__*/React.createElement("rect", {
+    className: style.outer_cls2,
+    x: "11.8",
+    y: "24.27",
+    width: "2.21",
+    height: "1.15"
+  }), /*#__PURE__*/React.createElement("rect", {
+    className: style.outer_cls2,
+    x: "10",
+    y: "26.05",
+    width: "1.16",
+    height: "2.18"
+  }), /*#__PURE__*/React.createElement("rect", {
+    className: style.outer_cls2,
+    x: "7.15",
+    y: "24.27",
+    width: "2.21",
+    height: "1.15"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: style.outer_cls3,
+    d: "M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    className: style.outer_cls4,
+    cx: "50.21",
+    cy: "11.21",
+    rx: "1.22",
+    ry: "1.21"
+  }), /*#__PURE__*/React.createElement("polygon", {
+    className: style.outer_cls4,
+    points: "59.77 90 61.8 87.28 63.69 90 59.77 90"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: style.outer_cls5,
+    d: "M25.63,50.18s5.71-18.8,14.18-21.65S70.1,42.91,60.19,67.13s-35,10.55-38.08,7S12.21,62.29,25.63,50.18Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: style.outer_cls6,
+    d: "M60.2,57.89H49.52a1,1,0,0,1-1-1V48.23a1,1,0,0,1,2,0v7.66H60.2a1,1,0,0,1,0,2ZM50.52,44.08v-.29a1,1,0,0,0-2,0v.29a1,1,0,0,0,2,0Zm23.73.86a1,1,0,0,0,.14-1.4l-5.13-6.36a1,1,0,0,0-1.56,1.25l5.14,6.36a1,1,0,0,0,.78.37A1,1,0,0,0,74.25,44.94ZM51,79.68a22.84,22.84,0,0,0-.47-45.61l0-2.68a1,1,0,0,0-1-1h-5a1.38,1.38,0,0,1,0-2.76H54A1.4,1.4,0,0,1,55.35,29,1.35,1.35,0,0,1,55,30a1.31,1.31,0,0,1-.95.4h-.54a1,1,0,0,0,0,2H54A3.31,3.31,0,0,0,57.34,29,3.38,3.38,0,0,0,54,25.64H44.43a3.38,3.38,0,0,0,0,6.76h4.06l0,2.66a1,1,0,0,0,1,1A20.84,20.84,0,1,1,28.68,56.89a20.94,20.94,0,0,1,15-20A1,1,0,1,0,43.13,35a22.84,22.84,0,0,0-9.25,38.57,22.61,22.61,0,0,0,15.62,6.2C50,79.73,50.48,79.71,51,79.68Z"
+  }));
+}
+AlarmAlertIcon.propTypes = AlarmAlertIcon_propTypes;
+AlarmAlertIcon.defaultProps = AlarmAlertIcon_defaultProps;

package/es/v1/version2/alertIcons/AlertIcons.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AlertIcons_defaultProps } from '../../../version2/alertIcons/props/defaultProps';
+import { AlertIcons_propTypes } from '../../../version2/alertIcons/props/propTypes';
+import DangerAlertIcon from './DangerAlertIcon';
+import SuccessAlertIcon from './SuccessAlertIcon';
+import WarningAlertIcon from './WarningAlertIcon';
+import InfoAlertIcon from './InfoAlertIcon';
+import NotificationAlertIcon from './NotificationAlertIcon';
+import AlarmAlertIcon from './AlarmAlertIcon';
+import style from '../../../version2/alertIcons/AlertIcons.module.css';
+let alertIconsObject = {
+  success: {
+    AlertIcon: SuccessAlertIcon
+  },
+  error: {
+    AlertIcon: DangerAlertIcon
+  },
+  danger: {
+    AlertIcon: DangerAlertIcon
+  },
+  warning: {
+    AlertIcon: WarningAlertIcon
+  },
+  info: {
+    AlertIcon: InfoAlertIcon
+  },
+  notification: {
+    AlertIcon: NotificationAlertIcon
+  },
+  alarm: {
+    AlertIcon: AlarmAlertIcon
+  }
+};
+export default function AlertIcons(props) {
+  let {
+    type,
+    variant,
+    dataSelectorId
+  } = props;
+  let {
+    AlertIcon = DangerAlertIcon
+  } = alertIconsObject[type] || {};
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.iconContainer,
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement(AlertIcon, {
+    variant: variant,
+    type: type
+  }));
+}
+AlertIcons.propTypes = AlertIcons_propTypes;
+AlertIcons.defaultProps = AlertIcons_defaultProps; // if (__DOCS__) {
+//   AlertIcons.docs = {
+//     componentGroup: 'AlertIcons',
+//     folderName: 'Alert'
+//   };
+// }