@zohodesk/dot 1.0.0-temp-195.3 → 1.0.0-temp-198.2

package/es/FormAction/FormAction.module.css

@@ -1,101 +1,101 @@
-.varClass {
-  --footerBg: var(--zdt_formAction_bg);
-  --footerBorder: var(--zdt_formAction_border);
-}
-
-.wrapperDiv {
-  position: relative;
-  z-index: 1;
-  composes: varClass;
-}
-
-.footerParent {
-  position: relative;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
-  background-color: var(--footerBg);
-  border-top: solid 1px var(--footerBorder);
-}
-
-.largeFooter {
-  padding-top: var(--zd_size24) ;
-  padding-bottom: var(--zd_size24) ;
-}
-
-.mediumFooter {
-  padding-top: var(--zd_size20) ;
-  padding-bottom: var(--zd_size20) ;
-}
-
-.smallFooter {
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
-}
-
-[dir=ltr] .largePadding {
-  padding-left: var(--zd_size60) ;
-}
-
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60) ;
-}
-
-[dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50) ;
-}
-
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50) ;
-}
-
-[dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25) ;
-}
-
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25) ;
-}
-
-[dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20) ;
-}
-
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20) ;
-}
-
-.marginRight {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12) ;
-}
-
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12) ;
-}
-
-[dir=ltr] .marginRight:last-child {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0 ;
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
+
+.wrapperDiv {
+  position: relative;
+  z-index: 1;
+  composes: varClass;
+}
+
+.footerParent {
+  position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
+}
+
+.largeFooter {
+  padding-top: var(--zd_size24) ;
+  padding-bottom: var(--zd_size24) ;
+}
+
+.mediumFooter {
+  padding-top: var(--zd_size20) ;
+  padding-bottom: var(--zd_size20) ;
+}
+
+.smallFooter {
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
+}
+
+[dir=ltr] .largePadding {
+  padding-left: var(--zd_size60) ;
+}
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60) ;
+}
+
+[dir=ltr] .mediumPadding {
+  padding-left: var(--zd_size50) ;
+}
+
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50) ;
+}
+
+[dir=ltr] .xmediumPadding {
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30) ;
+}
+
+[dir=ltr] .smallPadding {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=ltr] .xsmallPadding {
+  padding-left: var(--zd_size20) ;
+}
+
+[dir=rtl] .xsmallPadding {
+  padding-right: var(--zd_size20) ;
+}
+
+.marginRight {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=ltr] .smallFooter .marginRight {
+  margin-right: var(--zd_size12) ;
+}
+
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12) ;
+}
+
+[dir=ltr] .marginRight:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0 ;
 }

package/es/IconButton/IconButton.module.css

@@ -1,22 +1,22 @@
-.varClass {
-  --iconColor: var(--zdt_iconButton_icon_black);
-}
-.wrapper {
-  height: var(--zd_size28) ;
-  width: var(--zd_size28) ;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  composes: varClass;
-  color: var(--iconColor);
-  cursor: pointer;
-}
-.primary {
-  --iconColor: var(--zdt_iconButton_icon_primary);
-}
-.primary:hover {
-  --iconColor: var(--zdt_iconButton_icon_primaryHover);
-}
-.primary_active,
-.primaryFilled,
-.primaryFilled_active {
-  --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
+.wrapper {
+  height: var(--zd_size28) ;
+  width: var(--zd_size28) ;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--iconColor);
+  cursor: pointer;
+}
+.primary {
+  --iconColor: var(--zdt_iconButton_icon_primary);
+}
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
+}
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}

package/es/ImportantNotes/__tests__/ImportantNotes.spec.js

@@ -8,4 +8,100 @@ describe('ImportantNotes', () => {
     } = render( /*#__PURE__*/React.createElement(ImportantNotes, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the text prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      text: "sample text for notes"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconName prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      iconName: "ZD-GN-info",
+      text: "sample text for notes"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconName prop and text and children are empty', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      iconName: ""
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconName prop is null and given text value', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      iconName: "",
+      text: "sample text for notes"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconSize', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      iconName: "ZD-GN-info",
+      iconSize: "15"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, null, "children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the text and children prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      text: "sample text for notes"
+    }, "Sample text for children"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the text and children prop is empty', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      text: ""
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      iconName: "ZD-GN-info",
+      iconClass: "customIconClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isCover prop is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isCover prop is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      isCover: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the className prop', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ImportantNotes, {
+      className: "customClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ImportantNotes/__tests__/__snapshots__/ImportantNotes.spec.js.snap

@@ -1,5 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ImportantNotes rendering the children 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-help-centre    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+    <div
+      class="title grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      children
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the className prop 1`] = `
+<DocumentFragment>
+  <div
+    class="section customClass flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-help-centre    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`ImportantNotes rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -26,3 +88,274 @@ exports[`ImportantNotes rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`ImportantNotes rendering the iconClass 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-info  customIconClass  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the iconName prop 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-info    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+    <div
+      class="title grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      sample text for notes
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the iconName prop and text and children are empty 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  />
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the iconName prop is null and given text value 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="title grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      sample text for notes
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the iconSize 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-info    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size15);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the isCover prop is false 1`] = `
+<DocumentFragment>
+  <div
+    class="section  inflex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-help-centre    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the isCover prop is true 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-help-centre    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the text and children prop 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-help-centre    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+    <div
+      class="title grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      sample text for notesSample text for children
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the text and children prop is empty 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-help-centre    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ImportantNotes rendering the text prop 1`] = `
+<DocumentFragment>
+  <div
+    class="section  flex rowdir top"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="icon shrinkOff selfStart"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-help-centre    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size14);"
+      />
+    </div>
+    <div
+      class="title grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      sample text for notes
+    </div>
+  </div>
+</DocumentFragment>
+`;