@zohodesk/components 1.2.13 → 1.2.15

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -196,10 +196,7 @@
     position: absolute;
     height: var(--zd_size34) ;
     width: var(--zd_size34) ;
-    clip: rect(var(--zd_size3),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size29),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size17),
- undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size8)) ;
+    clip: rect(var(--zd_size3), var(--zd_size29), var(--zd_size17), var(--zd_size8)) ;
     padding: var(--zd_size4) ;
     display: flex;
     align-items: center;

package/es/Label/__tests__/Label.spec.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Label from '../Label.js';
+describe('Label', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const type = ['title', 'subtitle'];
+  test.each(type)('rendering the type of- %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['xsmall', 'small', 'medium', 'large'];
+  test.each(size)('rendering the size of- %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the clipped is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      clipped: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the title', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      title: "labelTitle"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const variant = ['primary', 'default'];
+  test.each(variant)('rendering the variant of- %s', variant => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      variant: variant
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      customClass: "LabelCustomClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Id', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      id: "LabelID"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the htmlFor', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      htmlFor: "LabelHtmlFor"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the onClick prop with asFragment and toMatchSnapshot', () => {
+    // Define an onClick mock function
+    const onClickMock = jest.fn(); // Render the Label component with the onClick prop
+
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Label, {
+      text: "Click Me",
+      onClick: onClickMock
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,312 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label rendering the Id 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+    id="LabelID"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the clipped is true 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+          dotted cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the customClass 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor LabelCustomClass "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the defult props 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the htmlFor 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+    for="LabelHtmlFor"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the onClick prop with asFragment and toMatchSnapshot 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           pointer  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Click Me
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- danger 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium danger font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- dark 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium dark font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- disable 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium disable font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- mandatory 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium mandatory font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium primary font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- secondary 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium secondary font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- large 1`] = `
+<DocumentFragment>
+  <label
+    class="label title large default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- small 1`] = `
+<DocumentFragment>
+  <label
+    class="label title small default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size of- xsmall 1`] = `
+<DocumentFragment>
+  <label
+    class="label title xsmall default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the title 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+    data-title="labelTitle"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type of- subtitle 1`] = `
+<DocumentFragment>
+  <label
+    class="label subtitle medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type of- title 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the variant of- default 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_default
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the variant of- primary 1`] = `
+<DocumentFragment>
+  <label
+    class="label title medium default font_primary
+           cursor  "
+    data-id="label"
+    data-selector-id="label"
+    data-test-id="label"
+  >
+    Label
+  </label>
+</DocumentFragment>
+`;

package/es/ListItem/ListItem.module.css

@@ -15,8 +15,7 @@
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    ;
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
@@ -48,9 +47,7 @@
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
 [dir=ltr] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7
-)    var(--zd_size5
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
@@ -63,9 +60,7 @@
   --listitem_height: var(--zd_size48);
 }
 [dir=ltr] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10
-)    var(--zd_size25
-)    ;
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
@@ -185,25 +180,19 @@
   display: block;
 }
 [dir=ltr] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
-)    var(--zd_size5
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
 [dir=rtl] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
-)    var(--zd_size20
-)    ;
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
 [dir=rtl] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
 [dir=ltr] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10
-)    var(--zd_size25
-)    ;
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
 [dir=rtl] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);