@zohodesk/dot 1.0.0-temp-157 → 1.0.0-temp-160

package/es/v1/layout/SetupDetailLayout/SetupDetailLayout.js

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { SetupDetailLayout_defaultProps, SetupHeader_defaultProps, SetupContent_defaultProps, SetupFooter_defaultProps } from '../../../layout/SetupDetailLayout/props/defaultProps';
+import { SetupDetailLayout_propTypes, SetupHeader_propTypes, SetupContent_propTypes, SetupFooter_propTypes } from '../../../layout/SetupDetailLayout/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { Icon } from '@zohodesk/icons';
+import style from '../../../layout/SetupDetailLayout/SetupDetailLayout.module.css';
+export default function SetupDetailLayout(props) {
+  let {
+    children,
+    needHelpInfo,
+    getHelpInfo,
+    helpInfoTitle,
+    dataId,
+    i18nKeys
+  } = props;
+  const {
+    closeText = 'Close'
+  } = i18nKeys;
+  const [isHelpInfoOpen, setHelpInfoOpen] = useState(false);
+
+  function toggleHelpInfo() {
+    setHelpInfoOpen(!isHelpInfoOpen);
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    isScrollAttribute: true,
+    dataId: dataId
+  }, React.Children.map(children, child => {
+    if (child && child.type == SetupHeader) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        openHelpInfo: toggleHelpInfo,
+        needHelpInfo: needHelpInfo
+      });
+    }
+
+    return child;
+  }), getHelpInfo ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.popup} ${isHelpInfoOpen ? style.open : style.close}`,
+    dataId: `${dataId}_infobox`
+  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    className: style.infoHeader
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.infoIcon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-info31"
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.infoText
+  }, helpInfoTitle), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("span", {
+    onClick: toggleHelpInfo,
+    className: style.infoClose,
+    "data-title": closeText,
+    "data-id": `${dataId}_close`,
+    "data-test-id": `${dataId}_close`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-close"
+  }))))), /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    scroll: "vertical",
+    className: style.infoFooter
+  }, getHelpInfo()))) : null);
+}
+SetupDetailLayout.propTypes = SetupDetailLayout_propTypes;
+SetupDetailLayout.defaultProps = SetupDetailLayout_defaultProps;
+export function SetupHeader(props) {
+  let {
+    title,
+    needBack,
+    onBackClick,
+    openHelpInfo,
+    needHelpInfo,
+    needHelpInfoWrapper,
+    getLeftPlaceHolder,
+    getRightPlaceHolder,
+    leftClassName,
+    rightClassName,
+    isCustomizedHeader,
+    headerCustomStyle,
+    dataId,
+    i18nKeys
+  } = props;
+  const {
+    infoText = 'Help',
+    backText = 'Back'
+  } = i18nKeys;
+  return /*#__PURE__*/React.createElement(Box, {
+    className: isCustomizedHeader === true ? headerCustomStyle : style.header,
+    dataId: dataId
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.back
+  }, needBack ? /*#__PURE__*/React.createElement("span", {
+    className: style.backIcon,
+    onClick: onBackClick,
+    "data-title": backText,
+    "data-id": `${dataId}_back`,
+    "data-test-id": `${dataId}_back`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-back"
+  })) : null), /*#__PURE__*/React.createElement(Box, {
+    flexible: !getLeftPlaceHolder && !getRightPlaceHolder ? true : false,
+    className: style.title,
+    dataId: `${dataId}_title`
+  }, title), getLeftPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    adjust: getRightPlaceHolder ? true : false,
+    className: leftClassName
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, getLeftPlaceHolder())) : null, getRightPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    adjust: getLeftPlaceHolder ? true : false,
+    className: rightClassName
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: style.rightPanel
+  }, getRightPlaceHolder())) : null, needHelpInfo ? /*#__PURE__*/React.createElement(Box, null, needHelpInfoWrapper ? /*#__PURE__*/React.createElement("span", {
+    className: style.helpInfoCont
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.helpInfo,
+    onClick: openHelpInfo,
+    "data-title": infoText,
+    "data-id": `${dataId}_info`,
+    "data-test-id": `${dataId}_info`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-info31"
+  }))) : /*#__PURE__*/React.createElement("span", {
+    className: `${style.helpInfo} ${style.mr15}`,
+    onClick: openHelpInfo,
+    "data-title": infoText,
+    "data-id": `${dataId}_info`,
+    "data-test-id": `${dataId}_info`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-info31"
+  }))) : null));
+}
+SetupHeader.propTypes = SetupHeader_propTypes;
+SetupHeader.defaultProps = SetupHeader_defaultProps;
+export function SetupContent(props) {
+  let {
+    children,
+    needPadding,
+    className,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    scroll: "vertical",
+    className: `${className ? className : ''} ${style.content} ${needPadding ? style.padding : ''} `,
+    isScrollAttribute: true,
+    dataId: dataId
+  }, children);
+}
+SetupContent.propTypes = SetupContent_propTypes;
+SetupContent.defaultProps = SetupContent_defaultProps;
+export function SetupFooter(props) {
+  let {
+    children,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    dataId: dataId
+  }, children);
+}
+SetupFooter.propTypes = SetupFooter_propTypes;
+SetupFooter.defaultProps = SetupFooter_defaultProps;

package/es/v1/layout/SetupDetailLayout/index.js

@@ -0,0 +1,4 @@
+export { default as SetupDetailLayout } from './SetupDetailLayout';
+export { SetupHeader } from './SetupDetailLayout';
+export { SetupFooter } from './SetupDetailLayout';
+export { SetupContent } from './SetupDetailLayout';

package/es/v1/layout/SubtabLayout/SubtabLayout.js

@@ -0,0 +1,128 @@
+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 from 'react';
+import { SubtabHeader_propTypes, SubtabFooter_propTypes, SubtabContent_propTypes, SubtabLayout_propTypes } from '../../../layout/SubtabLayout/props/propTypes';
+import { SubtabHeader_defaultProps, SubtabFooter_defaultProps, SubtabContent_defaultProps, SubtabLayout_defaultProps } from '../../../layout/SubtabLayout/props/defaultProps';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
+import PlusIcon from '../../PlusIcon/PlusIcon';
+import style from '../../../layout/SubtabLayout/SubtabLayout.module.css';
+export function SubtabHeader(props) {
+  let {
+    onAdd,
+    getLeftPlaceHolder,
+    title,
+    label,
+    getRightPlaceHolder,
+    type,
+    leftClassName,
+    rightClassName,
+    className,
+    needBorder,
+    needShadow,
+    needPlusIconLine,
+    children,
+    dataId,
+    isPeekView
+  } = props;
+  return /*#__PURE__*/React.createElement(CardHeader, {
+    customClass: `${style.tabHead} ${needShadow ? style.shadowStyle : ''} ${needBorder ? `${style[type]}_borderStyle` : ''}`
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: ` ${className} ${isPeekView ? `${style[type]}_peek` : style[type]}`,
+    align: "vertical"
+  }, onAdd || children ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.left} ${needPlusIconLine ? style.plusIconLine : ''}`
+  }, onAdd ? /*#__PURE__*/React.createElement(PlusIcon, {
+    dataId: dataId,
+    onClick: onAdd
+  }) : children) : null, title ? /*#__PURE__*/React.createElement(Box, {
+    className: `${style.title} ${onAdd ? style.cursor : ''}`,
+    onClick: onAdd ? onAdd : null
+  }, title) : null, getLeftPlaceHolder && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    adjust: getRightPlaceHolder ? true : false,
+    className: leftClassName
+  }, label ? /*#__PURE__*/React.createElement("div", {
+    className: style.label
+  }, label) : null, getLeftPlaceHolder), getRightPlaceHolder && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    adjust: getLeftPlaceHolder ? true : false,
+    className: rightClassName
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    className: style.aside
+  }, getRightPlaceHolder))));
+}
+SubtabHeader.propTypes = SubtabHeader_propTypes;
+SubtabHeader.defaultProps = SubtabHeader_defaultProps;
+export function SubtabFooter(props) {
+  let {
+    isPeekView,
+    getRightFooterPlaceHolder,
+    dataId,
+    children,
+    className,
+    leftClassName,
+    rightClassName,
+    size,
+    needPadding,
+    type
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    className: ` ${style.footer}  ${needPadding ? isPeekView ? `${style[type]}_peekFooter` : `${style[type]}_detailFooter` : ''} ${style[size]} ${className}`,
+    dataId: dataId
+  }, children ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    className: leftClassName
+  }, children) : null, getRightFooterPlaceHolder ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    className: rightClassName
+  }, getRightFooterPlaceHolder) : null);
+}
+SubtabFooter.propTypes = SubtabFooter_propTypes;
+SubtabFooter.defaultProps = SubtabFooter_defaultProps;
+export function SubtabContent(props) {
+  let {
+    children,
+    scroll,
+    className,
+    eleRef,
+    dataId,
+    onScroll
+  } = props;
+  return /*#__PURE__*/React.createElement(CardContent, {
+    scroll: scroll,
+    isScrollAttribute: true,
+    onScroll: onScroll,
+    customClass: className ? className : '',
+    eleRef: eleRef,
+    dataId: dataId
+  }, children);
+}
+SubtabContent.propTypes = SubtabContent_propTypes;
+SubtabContent.defaultProps = SubtabContent_defaultProps;
+export default function SubtabLayout(props) {
+  let {
+    children,
+    dataId
+  } = props;
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    isScrollAttribute: true,
+    dataId: dataId
+  }, props, {
+    childTypes: {
+      cardHeader: SubtabHeader,
+      cardContent: SubtabContent
+    }
+  }), children);
+}
+SubtabLayout.defaultProps = SubtabLayout_defaultProps;
+SubtabLayout.propTypes = SubtabLayout_propTypes;

package/es/v1/layout/SubtabLayout/index.js

@@ -0,0 +1,4 @@
+export { default as SubtabLayout } from './SubtabLayout';
+export { SubtabHeader } from './SubtabLayout';
+export { SubtabContent } from './SubtabLayout';
+export { SubtabFooter } from './SubtabLayout';

package/es/v1/list/AvatarFlip/AvatarFlip.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { defaultProps } from '../../../list/AvatarFlip/props/defaultProps';
+import { propTypes } from '../../../list/AvatarFlip/props/propTypes';
+import FlipCard from '../../FlipCard/FlipCard';
+import style from '../../../list/AvatarFlip/AvatarFlip.module.css';
+export default function AvatarFlip(props) {
+  let {
+    id,
+    action,
+    name,
+    isChecked,
+    onChange,
+    noNeedFlip,
+    size,
+    onClick,
+    isPaidUser,
+    isPortalUser,
+    channel,
+    src,
+    icon,
+    initial,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    frontClass,
+    needTitle,
+    tourId,
+    iconSize,
+    isFilledCheckbox,
+    channelTitle,
+    customProps
+  } = props;
+  return /*#__PURE__*/React.createElement(FlipCard, {
+    id: id,
+    action: action,
+    name: name,
+    initial: initial,
+    isChecked: isChecked,
+    onChange: onChange,
+    noNeedFlip: noNeedFlip,
+    size: size,
+    onClick: onClick,
+    isPaidUser: isPaidUser,
+    isPortalUser: isPortalUser,
+    channel: channel,
+    src: src,
+    icon: icon,
+    iconSize: iconSize,
+    iconClass: `${style.iconStyle}`,
+    dataId: dataId,
+    ticListContainer: "tic-list-filp-cont",
+    ticList: "tic-list-filp",
+    className: className,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass,
+    frontClass: frontClass,
+    needTitle: needTitle,
+    tourId: tourId,
+    isFilledCheckbox: isFilledCheckbox,
+    channelTitle: channelTitle,
+    customProps: customProps
+  });
+}
+AvatarFlip.propTypes = propTypes;
+AvatarFlip.defaultProps = defaultProps; // if (__DOCS__) {
+//   AvatarFlip.docs = {
+//     folderName: 'List',
+//     componentGroup: 'AvatarFlip'
+//   };
+// }

package/es/v1/list/BluePrintStatus/BluePrintStatus.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { propTypes } from '../../../list/BluePrintStatus/props/propTypes';
+import style from '../../../list/BluePrintStatus/BluePrintStatus.module.css';
+import { Icon } from '@zohodesk/icons';
+export default function BluePrintStatus(props) {
+  let {
+    title
+  } = props;
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${style.container}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-blueprint",
+    title: title,
+    iconClass: style.iconStyle
+  }));
+}
+BluePrintStatus.propTypes = propTypes; // if (__DOCS__) {
+//   BluePrintStatus.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/list/Comment/Comment.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { defaultProps } from '../../../list/Comment/props/defaultProps';
+import { propTypes } from '../../../list/Comment/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { i18NProviderUtils } from '@zohodesk/i18n';
+import Button from '@zohodesk/components/es/v1/semantic/Button/Button';
+import style from '../../../list/Comment/Comment.module.css';
+export default function Comment(props) {
+  let {
+    count,
+    onClick,
+    className
+  } = props;
+  let i18N = i18NProviderUtils.getI18NValue;
+  let commentCount = parseInt(count);
+  let commentTitle = !commentCount ? i18N('tabs.request.comment') : commentCount > 1 ? i18N('support.comment.many', count) : i18N('support.comment.one');
+  return /*#__PURE__*/React.createElement(Button, {
+    customClass: `${style.container} ${className} `,
+    onClick: onClick,
+    dataId: "commentLstContainer",
+    title: commentTitle,
+    a11y: {
+      ariaLabel: commentTitle
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-TK-commentLine",
+    iconClass: style.commentIcon
+  }), count && /*#__PURE__*/React.createElement("span", {
+    className: style.count
+  }, count));
+}
+Comment.defaultProps = defaultProps;
+Comment.propTypes = propTypes; // if (__DOCS__) {
+//   Comment.docs = {
+//     folderName: 'List',
+//     componentGroup: 'Comment'
+//   };
+// }

package/es/v1/list/DepartmentDropDown/DepartmentDropDown.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { defaultProps } from '../../../list/DepartmentDropDown/props/defaultProps';
+import { propTypes } from '../../../list/DepartmentDropDown/props/propTypes';
+import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
+import { DepartmentText } from '../SecondaryText';
+import style from '../../../list/DepartmentDropDown/DepartmentDropDown.module.css';
+
+function DepartmentDropDown(props) {
+  let {
+    departmentName,
+    departmentList = [],
+    onSelectLabel,
+    isEditable,
+    dataId,
+    isFetching,
+    isPopupActive,
+    getNextOptions,
+    isNextOptions,
+    onSearch,
+    needSearchFetching,
+    searchStr,
+    i18nKeys,
+    onMoveDepartment,
+    getDepartment
+  } = props;
+  let {
+    title = 'Move Department',
+    searchEmptyText = 'No results found',
+    searchErrorText = 'No results',
+    placeholder = 'Search Department'
+  } = i18nKeys;
+
+  function onClick(e) {
+    if (getDepartment) {
+      getDepartment(e);
+    }
+
+    onSearch('');
+  }
+
+  function handleMoveDepartment(deptId) {
+    onSearch('');
+    onMoveDepartment(deptId);
+  }
+
+  return /*#__PURE__*/React.createElement(ToggleDropDown, {
+    title: title,
+    options: departmentList,
+    value: /*#__PURE__*/React.createElement(DepartmentText, {
+      text: departmentName,
+      dataTitle: departmentName
+    }),
+    keyName: "name",
+    idName: "id",
+    onClick: handleMoveDepartment,
+    isArrow: false,
+    isEditable: isEditable,
+    onSelectLabel: onSelectLabel,
+    isPopupActive: isPopupActive,
+    needExternalPopupState: true,
+    isSearch: departmentList.length > 5 || searchStr.length !== 0,
+    boxSize: "small",
+    dataId: dataId,
+    isDataLoaded: !isFetching,
+    isPadding: false,
+    searchErrorText: searchErrorText,
+    searchEmptyHint: searchEmptyText,
+    isNeedEffect: false,
+    className: style.departmentBox,
+    placeHolderText: placeholder,
+    getNextOptions: getNextOptions,
+    isNextOptions: isNextOptions,
+    onSearch: onSearch,
+    needSearchFetching: needSearchFetching
+  });
+}
+
+DepartmentDropDown.defaultProps = defaultProps;
+DepartmentDropDown.propTypes = propTypes;
+export default DepartmentDropDown; // if (__DOCS__) {
+//   DepartmentDropDown.docs = {
+//     folderName: 'List',
+//     componentGroup: 'DepartmentDropDown'
+//   };
+// }

package/es/v1/list/Dot/Dot.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { defaultProps } from '../../../list/Dot/props/defaultProps';
+import { propTypes } from '../../../list/Dot/props/propTypes';
+import style from '../../../list/Dot/Dot.module.css';
+export default function Dot(props) {
+  let {
+    className,
+    spacingType
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.dot} ${style[spacingType]} ${className}`
+  }, ".");
+}
+Dot.propTypes = propTypes;
+Dot.defaultProps = defaultProps;

package/es/v1/list/DotNew/DotNew.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { defaultProps } from '../../../list/DotNew/props/defaultProps';
+import { propTypes } from '../../../list/DotNew/props/propTypes';
+import style from '../../../list/DotNew/DotNew.module.css';
+export default function DotNew(props) {
+  let {
+    className,
+    dataTitle,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${style[size]} ${className ? className : ''}`,
+    "data-title": dataTitle
+  });
+}
+DotNew.propTypes = propTypes;
+DotNew.defaultProps = defaultProps; // if (__DOCS__) {
+//   DotNew.docs = {
+//     folderName: 'List',
+//     componentGroup: 'DotNew'
+//   };
+// }

package/es/v1/list/GridStencils/GridStencils.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { propTypes } from '../../../list/GridStencils/props/propTypes';
+import style from '../../../list/GridStencils/GridStencils.module.css';
+export default function GridStencils(props) {
+  let {
+    lineBar,
+    from,
+    isThreeLayout,
+    styles,
+    order
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: from == 'leftPanel' && isThreeLayout ? `${style.stenLoading} ${style.threeLayout}` : from == 'leftPanel' ? `${style.stenLoading} ${style.leftCont}` : style.stenLoading,
+    style: styles,
+    order: order
+  }, lineBar ? /*#__PURE__*/React.createElement("div", {
+    className: style.stenLoadbody
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${style.lineBar} ${style.stenListBAr}`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${style.lineBar2} ${style.stenListBAr}`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${style.lineBar3} ${style.stenListBAr}`
+  })) : '');
+}
+GridStencils.propTypes = propTypes; // if (__DOCS__) {
+//   GridStencils.docs = {
+//     folderName: 'List',
+//     componentGroup: 'GridStencils'
+//   };
+// }

package/es/v1/list/Icons/AddNewIcon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AddNewIcon_propTypes } from '../../../list/Icons/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import style from '../../../list/Icons/Icons.module.css';
+export default function AddNewIcon(props) {
+  let {
+    onClick,
+    dataId,
+    dataTitle,
+    iconClass,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-title": dataTitle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-SE-addTickets",
+    iconClass: iconClass ? iconClass : ''
+  }));
+}
+AddNewIcon.propTypes = AddNewIcon_propTypes;

package/es/v1/list/Icons/CompleteIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { CompleteIcon_propTypes } from '../../../list/Icons/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import style from '../../../list/Icons/Icons.module.css';
+export default function CompleteIcon(props) {
+  let {
+    onClick,
+    dataId,
+    dataTitle,
+    iconClass,
+    className,
+    iconSize
+  } = props;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    "data-title": dataTitle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-checkbox",
+    iconClass: iconClass ? iconClass : '',
+    size: iconSize
+  }));
+}
+CompleteIcon.propTypes = CompleteIcon_propTypes;