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

package/lib/ImportantNotes/__tests__/ImportantNotes.spec.js

@@ -15,4 +15,100 @@ describe('ImportantNotes', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering the text prop', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      text: "sample text for notes"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconName prop', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      iconName: "ZD-GN-info",
+      text: "sample text for notes"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconName prop and text and children are empty', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      iconName: ""
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconName prop is null and given text value', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      iconName: "",
+      text: "sample text for notes"
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconSize', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      iconName: "ZD-GN-info",
+      iconSize: "15"
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the children', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], null, "children")),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the text and children prop', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      text: "sample text for notes"
+    }, "Sample text for children")),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the text and children prop is empty', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      text: ""
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the iconClass', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      iconName: "ZD-GN-info",
+      iconClass: "customIconClass"
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isCover prop is true', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], null)),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the isCover prop is false', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      isCover: false
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the className prop', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ImportantNotes["default"], {
+      className: "customClass"
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/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>
+`;

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -1,67 +1,67 @@
-.varClass {
-  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
-  --tag_border_color: var(--zdt_tagWithIconGrey_border);
-  --tag_small_fontSize: var(--zd_font_size10);
-  --tag_large_fontSize: var(--zd_font_size12);
-}
-
-.wrapper {
-  composes: varClass;
-  color: var(--tag_text_color);
-  background-color: var(--tag_bg_color);
-}
-
-.small,
-.large {
-  max-width: 100% ;
-  height: var(--zd_size18) ;
-}
-
-.small, .large {
-  border: 1px solid var(--tag_border_color);
-  border-radius: var(--zd_size4);
-  padding: 0 var(--zd_size6) ;
-}
-
-.bold {
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.small_text {
-  font-size: var(--tag_small_fontSize);
-}
-
-.large_text {
-  font-size: var(--tag_large_fontSize);
-}
-
-.text {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-[dir=ltr] .iconSpace {
-  margin-right: var(--zd_size4) ;
-}
-
-[dir=rtl] .iconSpace {
-  margin-left: var(--zd_size4) ;
-}
-
-.yellow {
-  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
-  --tag_text_color: var(--zdt_tagWithIconYellow_text);
-  --tag_border_color: var(--zdt_tagWithIconYellow_border);
-}
-
-.grey {
-  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
-  --tag_border_color: var(--zdt_tagWithIconGrey_border);
-}
-
-.blue {
-  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
-  --tag_text_color: var(--zdt_tagWithIconBlue_text);
-  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+
+.small,
+.large {
+  max-width: 100% ;
+  height: var(--zd_size18) ;
+}
+
+.small, .large {
+  border: 1px solid var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6) ;
+}
+
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .iconSpace {
+  margin-right: var(--zd_size4) ;
+}
+
+[dir=rtl] .iconSpace {
+  margin-left: var(--zd_size4) ;
+}
+
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
 }