npm - @zohodesk/dot - Versions diffs - 1.0.0-temp-198.1 → 1.0.0-temp-198.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/.cli/UnValidatedFiles.html CHANGED Viewed

@@ -45,7 +45,7 @@
 <body>
     <div id="table-container"></div>
     <script>
-        const jsonData = {"DotProvider":{"filePath":"src/v1/DotProvider/DotProvider.js"}}
+        const jsonData = {"DotProvider":{"filePath":"src/DotProvider/DotProvider.js"}}
         const tableContainer = document.getElementById('table-container');
         const table = document.createElement('table');
         const thead = document.createElement('thead');

package/es/{v1/DotProvider → DotProvider}/hooks/useDotProvider.js RENAMED Viewed

@@ -8,7 +8,7 @@ import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/components/es/common/basic.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/components/lib/common/boxShadow.module.css';
-import "../../../common/dot_boxShadow.module.css";
+import "../../common/dot_boxShadow.module.css";
 function useDotProvider(_ref) {
   let {

package/es/{v1/DotProvider → DotProvider}/hooks/useDownloadAssetsAndSetAttr.js RENAMED Viewed

@@ -1,5 +1,8 @@
 import { useMemo, useLayoutEffect } from 'react';
-import { getThemeAppearanceAssetPromise, getThemeColorAssetPromise, getZoomSizeAssetPromise, getFontSizeAssetPromise } from "../utils/assetPromiseHandlers";
+import { getThemeAppearanceAssetPromise } from "../utils/assetPromiseHandlers/themeAppearanceAssetPromise.js";
+import { getThemeColorAssetPromise } from "../utils/assetPromiseHandlers/themeColorAssetPromise.js";
+import { getFontSizeAssetPromise } from "../utils/assetPromiseHandlers/fontSizeAssetPromise.js";
+import { getZoomSizeAssetPromise } from "../utils/assetPromiseHandlers/zoomSizeAssetPromise.js";
 export default function useDownloadAssetsAndSetAttr(_ref) {
   let {
     themeAppearance,

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Light_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Dark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Light_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/green/Green_PureDark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Light_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Dark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Light_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/red/Red_PureDark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css";

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css";

package/es/DotProvider/utils/assetPromiseHandlers/fontSizeAssetPromise.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { sizeImports, sizeMapping } from "../sizeAssetsConfig";
+export function getFontSizeAssetPromise() {
+  return sizeImports[sizeMapping.fontSize]();
+}

package/es/DotProvider/utils/assetPromiseHandlers/themeAppearanceAssetPromise.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { getAssetsImportPromises } from "../getAssetsImportPromises";
+import { themeAppearanceImports, themeAppearanceMapping } from "../themeAppearanceAssetsConfig";
+import { validateAndLogError } from "../errorValidation";
+import { LIBRARIES, THEME_APPEARANCES } from "../constants";
+export function getThemeAppearanceAssetPromise(_ref) {
+  let {
+    themeAppearance
+  } = _ref;
+  const isError = validateAndLogError({
+    options: THEME_APPEARANCES,
+    value: themeAppearance,
+    type: 'themeAppearance'
+  });
+  if (!isError) {
+    const assetImportKeys = [];
+    LIBRARIES.map(library => {
+      const assetImportKey = themeAppearanceMapping[library][themeAppearance];
+      assetImportKeys.push(assetImportKey);
+    });
+    return getAssetsImportPromises({
+      assetImportKeys: assetImportKeys,
+      assetImports: themeAppearanceImports
+    });
+  }
+  return [];
+}

package/es/DotProvider/utils/assetPromiseHandlers/themeColorAssetPromise.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { getAssetsImportPromises } from "../getAssetsImportPromises";
+import { themeColorImports, themeColorMapping } from "../themeColorAssetsConfig";
+import { validateAndLogError } from "../errorValidation";
+import { LIBRARIES, THEME_COLORS } from "../constants";
+export function getThemeColorAssetPromise(_ref) {
+  let {
+    themeAppearance,
+    themeColor
+  } = _ref;
+  const isError = validateAndLogError({
+    options: THEME_COLORS,
+    value: themeColor,
+    type: 'themeColor'
+  });
+  if (!isError) {
+    const assetImportKeys = [];
+    LIBRARIES.map(library => {
+      const assetImportKey = themeColorMapping[library][themeColor][themeAppearance];
+      assetImportKeys.push(assetImportKey);
+    });
+    return getAssetsImportPromises({
+      assetImportKeys: assetImportKeys,
+      assetImports: themeColorImports
+    });
+  }
+  return [];
+}

package/es/DotProvider/utils/assetPromiseHandlers/zoomSizeAssetPromise.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { sizeImports, sizeMapping } from "../sizeAssetsConfig";
+export function getZoomSizeAssetPromise() {
+  return sizeImports[sizeMapping.zoomSize]();
+}

package/es/{v1/DotProvider → DotProvider}/utils/sizeAssetsConfig.js RENAMED Viewed

@@ -1,4 +1,4 @@
-export const assetImports = {
+export const sizeImports = {
   Lib_ZoomSize: () => import(
   /* webpackChunkName: 'Lib_ZoomSize' */
   '@zohodesk/variables/assets/sizeVariables.module.css'),
@@ -6,7 +6,7 @@ export const assetImports = {
   /* webpackChunkName: 'Lib_FontSize' */
   '@zohodesk/variables/assets/fontsizeVariables.module.css')
 };
-export const assetImportMapping = {
+export const sizeMapping = {
   zoomSize: 'Lib_ZoomSize',
   fontSize: 'Lib_FontSize'
 };

package/es/{v1/DotProvider → DotProvider}/utils/themeAppearanceAssetsConfig.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
-export const assetImports = {
+export const themeAppearanceImports = {
   Lib_LightMode_Component: () => import(
   /* webpackChunkName: 'Lib_LightMode_Component' */
   '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css'),
@@ -11,13 +11,13 @@ export const assetImports = {
   '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css'),
   Lib_LightMode_Dot: () => import(
   /* webpackChunkName: 'Lib_LightMode_Dot' */
-  "./../../../../assets/Appearance/light/mode/Dot_LightMode.module.css"),
+  "./../../../assets/Appearance/light/mode/Dot_LightMode.module.css"),
   Lib_DarkMode_Dot: () => import(
   /* webpackChunkName: 'Lib_DarkMode_Dot' */
-  "./../../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"),
+  "./../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"),
   Lib_PureDarkMode_Dot: () => import(
   /* webpackChunkName: 'Lib_PureDarkMode_Dot' */
-  "./../../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css"),
+  "./../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css"),
   Lib_LightMode_SVG: () => import(
   /* webpackChunkName: 'Lib_LightMode_SVG' */
   '@zohodesk/svg/assets/Appearance/light/mode/SVG_LightMode.module.css'),
@@ -28,7 +28,7 @@ export const assetImports = {
   /* webpackChunkName: 'Lib_PureDarkMode_SVG' */
   '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css')
 };
-export const assetImportMapping = {
+export const themeAppearanceMapping = {
   [LIBRARY_COMPONENT]: {
     [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Component',
     [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Component',

package/es/{v1/DotProvider → DotProvider}/utils/themeColorAssetsConfig.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
-export const assetImports = {
+export const themeColorImports = {
   Lib_Blue_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Blue_Light_Component' */
   "../libraryChunks/themes/component/blue/Blue_Light_Component"),
@@ -136,7 +136,7 @@ export const assetImports = {
   /* webpackChunkName: 'Lib_Yellow_PureDark_SVG' */
   "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
 };
-export const assetImportMapping = {
+export const themeColorMapping = {
   [LIBRARY_COMPONENT]: {
     [THEME_COLOR_BLUE]: {
       [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Component',

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

@@ -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 CHANGED Viewed

@@ -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>
+`;