@zohodesk/dot 1.7.20-exp.1 → 1.7.21

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -7,8 +7,8 @@ import Popup from '@zohodesk/components/es/v1/Popup/Popup';
 import { Box, Container } from '@zohodesk/components/es/v1/Layout';
 import DropDownHeading from '@zohodesk/components/es/v1/DropDown/DropDownHeading';
 import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import Loader from '@zohodesk/svg/es/Loader/Loader';
+import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
 import StatusListItem from "../StatusListItem/StatusListItem";
 import commonStyle from '@zohodesk/components/es/common/common.module.css';

package/es/v1/lookup/EmptyPage/EmptyPage.js

@@ -2,10 +2,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import EmptyAccounts from '@zohodesk/svg/lib/emptystate/version3/EmptyAccounts';
-import EmptyContact from '@zohodesk/svg/lib/emptystate/version3/EmptyContact';
-import EmptyProducts from '@zohodesk/svg/lib/emptystate/version3/EmptyProducts';
+import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
+import EmptyAccounts from '@zohodesk/svg/es/emptystate/version3/EmptyAccounts';
+import EmptyContact from '@zohodesk/svg/es/emptystate/version3/EmptyContact';
+import EmptyProducts from '@zohodesk/svg/es/emptystate/version3/EmptyProducts';
 /*** CSS ***/
 
 import style from "../../../lookup/EmptyPage/LookupEmptyPage.module.css";

package/es/v1/lookup/header/ViewDropDown/ViewDropDown.js

@@ -15,7 +15,7 @@ import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomRes
 
 import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import Loader from '@zohodesk/svg/es/Loader/Loader';
 import style from "../../../../lookup/header/ViewDropDown/ViewDropDown.module.css";
 /* eslint-disable react/forbid-component-props */
 

package/es/v1/notification/DesktopNotification/DesktopNotification.js

@@ -7,7 +7,7 @@ import AutoClose from "../../../actions/AutoClose";
 import Button from '@zohodesk/components/es/v1/Button/Button';
 import FormAction from "../../../FormAction/FormAction";
 import DesktopNotificationHeader from "../DesktopNotificationHeader/DesktopNotificationHeader";
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from "../../../version2/notification/DesktopNotification/DesktopNotification.module.css";
 let buttonPaletteObject = {
   success: {

package/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -4,7 +4,7 @@ import propTypes from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/v1/Layout';
 import AlertClose from "../../alert/AlertClose/AlertClose";
 import AlertIcons from "../../alert/alertIcons/AlertIcons";
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/v1/Typography/Typography';
 import style from "../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css";
 export default function DesktopNotificationHeader(props) {

package/es/v1/svg/PlusIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PlusIcon_defaultProps } from "./props/defaultProps";
 import { PlusIcon_propTypes } from "./props/propTypes";
-import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+import SVG from '@zohodesk/svg/es/v1/SVG/SVG';
 export default function PlusIcon(props) {
   let {
     isRender,

package/es/v1/svg/SnippetIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SnippetIcon_defaultProps } from "./props/defaultProps";
 import { SnippetIcon_propTypes } from "./props/propTypes";
-import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+import SVG from '@zohodesk/svg/es/v1/SVG/SVG';
 export default function SnippetIcon(props) {
   let {
     isRender,

package/es/v1/svg/TemplateIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TemplateIcon_defaultProps } from "./props/defaultProps";
 import { TemplateIcon_propTypes } from "./props/propTypes";
-import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
+import SVG from '@zohodesk/svg/es/v1/SVG/SVG';
 export default function TemplateIcon(props) {
   let {
     isRender,

package/es/version2/AlertClose/AlertClose.js

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import style from "./AlertClose.module.css";
 export default class AlertClose extends PureComponent {
   render() {

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -5,7 +5,7 @@ import AutoClose from "../../actions/AutoClose";
 import AlertIcons from "../alertIcons/AlertIcons";
 import AlertClose from "../AlertClose/AlertClose";
 import style from "./GlobalNotification.module.css";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 export default class GlobalNotification extends React.Component {
   constructor(props) {

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -126,8 +126,7 @@
   --globalnotification_text_color: var(--zdt_globalnotification_info_text);
 }
 
-.danger,
-.error {
+.danger,.error {
   --commonalert_border_color: var(--zdt_commonalert_danger_border);
   --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
   --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
@@ -149,7 +148,7 @@
 
 .text {
   font-size: var(--zd_font_size14) ;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   line-height: 1.4286;
   overflow: hidden;

package/es/version2/errorstate/Inconvenience/Inconvenience.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import CommonEmptyState from "./../../../emptystate/CommonEmptyState/CommonEmptyState";
-import ErrorInconvenience from '@zohodesk/svg/lib/errorstate/version3/ErrorInconvenience';
-import Button from '@zohodesk/components/lib/Button/Button';
+import ErrorInconvenience from '@zohodesk/svg/es/errorstate/version3/ErrorInconvenience';
+import Button from '@zohodesk/components/es/Button/Button';
 import style from "./../V2_ErrorStates.module.css";
 export default class Inconvenience extends React.Component {
   constructor(props) {

package/es/version2/errorstate/OopsSomethingMiss/OopsSomethingMiss.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
-import ErrorOopsSomethingMiss from '@zohodesk/svg/lib/errorstate/version3/ErrorOopsSomethingMiss';
-import Button from '@zohodesk/components/lib/Button/Button';
+import ErrorOopsSomethingMiss from '@zohodesk/svg/es/errorstate/version3/ErrorOopsSomethingMiss';
+import Button from '@zohodesk/components/es/Button/Button';
 import style from "./../V2_ErrorStates.module.css";
 export default class OopsSomethingMiss extends React.Component {
   constructor(props) {

package/es/version2/errorstate/UnableToProcessRequest/UnableToProcessRequest.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
-import ErrorUnableToProcessRequest from '@zohodesk/svg/lib/errorstate/version3/ErrorUnableToProcessRequest';
-import Button from '@zohodesk/components/lib/Button/Button';
+import ErrorUnableToProcessRequest from '@zohodesk/svg/es/errorstate/version3/ErrorUnableToProcessRequest';
+import Button from '@zohodesk/components/es/Button/Button';
 import style from "./../V2_ErrorStates.module.css";
 export default class UnableToProcessRequest extends React.Component {
   constructor(props) {

package/es/version2/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
-import ErrorUnauthorizedLogin from '@zohodesk/svg/lib/errorstate/version3/ErrorUnauthorizedLogin';
-import Button from '@zohodesk/components/lib/Button/Button';
+import ErrorUnauthorizedLogin from '@zohodesk/svg/es/errorstate/version3/ErrorUnauthorizedLogin';
+import Button from '@zohodesk/components/es/Button/Button';
 import style from "./../V2_ErrorStates.module.css";
 export default class UnauthorizedLogin extends React.Component {
   constructor(props) {

package/es/version2/errorstate/UrlNotFound/UrlNotFound.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
-import ErrorUrlNotFound from '@zohodesk/svg/lib/errorstate/version3/ErrorUrlNotFound';
-import Button from '@zohodesk/components/lib/Button/Button';
+import ErrorUrlNotFound from '@zohodesk/svg/es/errorstate/version3/ErrorUrlNotFound';
+import Button from '@zohodesk/components/es/Button/Button';
 import style from "./../V2_ErrorStates.module.css";
 export default class UrlNotFound extends React.Component {
   constructor(props) {

package/es/version2/errorstate/V2_ErrorStates.module.css

@@ -5,7 +5,7 @@
   margin-top: var(--zd_size15) ;
 }
 .title {
-  font-weight: var(--zd-fw-bold);
+  font-family: var(--zd_bold);
 }
 .desc {
   line-height: 1.5714;

package/es/version2/errorstate/WillBeRightBack/WillBeRightBack.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import CommonEmptyState from "../../../emptystate/CommonEmptyState/CommonEmptyState";
-import ErrorWillBeRightBack from '@zohodesk/svg/lib/errorstate/version3/ErrorWillBeRightBack';
-import Button from '@zohodesk/components/lib/Button/Button';
+import ErrorWillBeRightBack from '@zohodesk/svg/es/errorstate/version3/ErrorWillBeRightBack';
+import Button from '@zohodesk/components/es/Button/Button';
 import style from "./../V2_ErrorStates.module.css";
 export default class WillBeRightBack extends React.Component {
   constructor(props) {

package/es/version2/lookup/AlertHeader/AlertHeader.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react'; //AlertDependencies
 
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import AlertClose from "../../AlertClose/AlertClose";
 import AlertIcons from "../../alertIcons/AlertIcons"; //CSS
 

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -1,7 +1,6 @@
 .varClass {
   --commonalert_border_color: var(--zdt_commonalert_default_border);
 }
-
 .container {
   composes: varClass;
   position: relative;
@@ -10,15 +9,12 @@
   border-color: var(--commonalert_border_color);
   border-width: 2px 0 0 0;
 }
-
 .headerLayout {
   min-height: var(--zd_size54) ;
 }
-
 [dir=ltr] .headerLayout {
   padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20) ;
 }
-
 [dir=rtl] .headerLayout {
   padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45) ;
 }
@@ -27,13 +23,11 @@
   --commonalert_border_color: var(--zdt_commonalert_success_border);
 }
 
-.info,
-.notification {
+.info,.notification {
   --commonalert_border_color: var(--zdt_commonalert_info_border);
 }
 
-.danger,
-.error {
+.danger,.error {
   --commonalert_border_color: var(--zdt_commonalert_danger_border);
 }
 
@@ -58,7 +52,7 @@
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size18) ;
   line-height: 1.2222;
-  font-weight: var(--zd-fw-bold);
+  font-family: var(--zd_bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   cursor: default;

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -6,11 +6,11 @@ import { propTypes } from "./props/propTypes";
 
 import Lookup from "../../../lookup/Lookup/Lookup";
 import AlertHeader from "../AlertHeader/AlertHeader";
-import Button from '@zohodesk/components/lib/Button/Button';
+import Button from '@zohodesk/components/es/Button/Button';
 import Section from "../../../lookup/Section/Section";
 import FormAction from "../../../FormAction/FormAction";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 /**** CSS ****/
 
 import style from "./AlertLookupNew.module.css";

package/es/version2/lookup/alertLookupCommonNew.module.css

@@ -14,7 +14,7 @@
 
 .noteTitle {
     font-size: var(--zd_font_size13) ;
-    font-weight: var(--zd-fw-semibold);
+    font-family: var(--zd_semibold);
     composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes, DesktopNotificationUI_propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import AutoClose from "../../../actions/AutoClose";
-import Button from '@zohodesk/components/lib/Button/Button';
+import Button from '@zohodesk/components/es/Button/Button';
 import FormAction from "../../../FormAction/FormAction";
 import DesktopNotificationHeader from "../DesktopNotificationHeader/DesktopNotificationHeader";
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from "./DesktopNotification.module.css";
 let buttonPaletteObject = {
   success: {

package/es/version2/notification/DesktopNotification/DesktopNotification.module.css

@@ -36,8 +36,7 @@
 .large {
   width: var(--zd_size580) ;
 }
-
-.tapWidth {
+.tapWidth{
   max-width: 100% ;
   min-width: 100% ;
 }
@@ -110,7 +109,7 @@
 .subTitle {
   font-size: var(--zd_font_size15) ;
   line-height: 1.3333;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   composes: ftsmooth wbreak from '~@zohodesk/components/es/common/common.module.css';
 }
 
@@ -131,4 +130,4 @@
 .footer {
   overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
+}

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import AlertClose from "../../AlertClose/AlertClose";
 import AlertIcons from "../../alertIcons/AlertIcons";
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import style from "./DesktopNotificationHeader.module.css";
 export default class DesktopNotificationHeader extends Component {

package/lib/ActionButton/ActionButton.js

@@ -13,21 +13,21 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Popup = _interopRequireDefault(require("@zohodesk/components/lib/Popup/Popup"));
+var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
 
 var _icons = require("@zohodesk/icons");
 
-var _Button = _interopRequireDefault(require("@zohodesk/components/lib/Button/Button"));
+var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
 
-var _Layout = require("@zohodesk/components/lib/Layout");
+var _Layout = require("@zohodesk/components/es/Layout");
 
-var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
+var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox"));
 
-var _CssProvider = _interopRequireDefault(require("@zohodesk/components/lib/Provider/CssProvider"));
+var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/Provider/CssProvider"));
 
 var _ActionButtonModule = _interopRequireDefault(require("./ActionButton.module.css"));
 
-var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

package/lib/ActionButton/ActionButton.module.css

@@ -98,7 +98,7 @@
 
 .txt {
   font-size: var(--zd_font_size13) ;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   text-transform: capitalize;
 }
 

package/lib/AlphabeticList/AlphabeticList.js

@@ -13,7 +13,7 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Layout = require("@zohodesk/components/lib/Layout");
+var _Layout = require("@zohodesk/components/es/Layout");
 
 var _AlphabeticListModule = _interopRequireDefault(require("./AlphabeticList.module.css"));
 

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11) ;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
 }

package/lib/Attachment/Attachment.js

@@ -15,7 +15,7 @@ var _propTypes = require("./props/propTypes");
 
 var _icons = require("@zohodesk/icons");
 
-var _Layout = require("@zohodesk/components/lib/Layout");
+var _Layout = require("@zohodesk/components/es/Layout");
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
 
@@ -97,7 +97,8 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         align: "horizontal"
       }, fileName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AttachmentModule["default"].atatchName,
-        "data-title": fileName
+        "data-title": fileName,
+        dataId: "".concat(dataId, "_filename")
       }, fileName) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AttachmentModule["default"].footer
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -108,14 +109,16 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         className: _AttachmentModule["default"].attachSize,
         adjust: true,
         shrink: true,
-        "data-title": fileSize
+        "data-title": fileSize,
+        dataId: "".concat(dataId, "_filesize")
       }, fileSize) : null, fileInfo ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AttachmentModule["default"].dot
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AttachmentModule["default"].attachSize,
         adjust: true,
         shrink: true,
-        "data-title": fileInfo
+        "data-title": fileInfo,
+        dataId: "".concat(dataId, "_fileinfo")
       }, fileInfo)) : null)))), downloadLink && !isDisabled ? /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         target: "_self",
         href: downloadLink,

package/lib/Attachment/__tests__/Attachment.spec.js

@@ -13,6 +13,30 @@ describe('Attachment', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Attachment["default"], null)),
         asFragment = _render.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+describe('Attachment with props', function () {
+  test('rendering the defult props', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Attachment["default"], {
+      onClick: jest.fn(),
+      dataId: "test_id",
+      size: "medium",
+      iconName: "test_icon",
+      fileName: "test_file",
+      fileSize: "10MB",
+      downloadLink: "http://example.com",
+      palette: "default",
+      tooltip: "test_tooltip",
+      fileInfo: "test_info",
+      i18nKeys: {
+        downloadTitle: 'Download'
+      },
+      dataSelectorId: "test_selector",
+      isDisabled: false
+    })),
+        asFragment = _render2.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/Attachment/__tests__/__snapshots__/Attachment.spec.js.snap

@@ -39,3 +39,108 @@ exports[`Attachment rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Attachment with props rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="attachment  attachmentHover palette_default medium inflex rowdir"
+    data-id="test_id"
+    data-selector-id="test_selector"
+    data-test-id="test_id"
+    data-title="test_tooltip"
+    tabindex="0"
+  >
+    <div
+      class="attachleft shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+    <div
+      class="attachright grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir hCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="atatchName shrinkOff"
+          data-id="test_id_filename"
+          data-selector-id="box"
+          data-test-id="test_id_filename"
+          data-title="test_file"
+        >
+          test_file
+        </div>
+        <div
+          class="footer shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir baseline"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_filesize"
+              data-selector-id="box"
+              data-test-id="test_id_filesize"
+              data-title="10MB"
+            >
+              10MB
+            </div>
+            <div
+              class="dot shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            />
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_fileinfo"
+              data-selector-id="box"
+              data-test-id="test_id_fileinfo"
+              data-title="test_info"
+            >
+              test_info
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <a
+      class="container  attachDownload"
+      data-id="test_id_download"
+      data-test-id="test_id_download"
+      data-title="Download"
+      href="http://example.com"
+      rel="noopener noreferrer"
+      target="_self"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-download-new  downIcon  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </a>
+  </div>
+</DocumentFragment>
+`;

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -13,17 +13,17 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _Layout = require("@zohodesk/components/lib/Layout");
+var _Layout = require("@zohodesk/components/es/Layout");
 
 var _icons = require("@zohodesk/icons");
 
-var _Avatar = _interopRequireDefault(require("@zohodesk/components/lib/Avatar/Avatar"));
+var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Avatar"));
 
-var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
-var _Typography = _interopRequireDefault(require("@zohodesk/components/lib/Typography/Typography"));
+var _Typography = _interopRequireDefault(require("@zohodesk/components/es/Typography/Typography"));
 
-var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
+var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));