@zohodesk/components 1.2.13 → 1.2.15

package/es/Ribbon/Ribbon.module.css

@@ -217,8 +217,7 @@
 }
 
 [dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6
-)    ;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6);
 }
 
 [dir=rtl] .flag {

package/es/Ribbon/__tests__/Ribbon.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Ribbon from '../Ribbon.js';
+describe('Label', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Ribbon, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['default', 'danger', 'primary', 'secondary', 'info', 'dark'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Ribbon, {
+      palette: palette
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const type = ['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag'];
+  test.each(type)('rendering the type - %s', type => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Ribbon, {
+      type: type
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering children ', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Ribbon, null, /*#__PURE__*/React.createElement("span", null, " Ribbon 1 ")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const size = ['small', 'medium', 'large', 'xlarge'];
+  test.each(size)('rendering the size - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Ribbon, {
+      size: size
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Ribbon, {
+      customClass: "ribbonCustomClass"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,374 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label rendering children  1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="children"
+    >
+      <span>
+         Ribbon 1 
+      </span>
+    </span>
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the customClass 1`] = `
+<DocumentFragment>
+  <span
+    class="basic ribbonCustomClass palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the defult props 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- danger 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_danger default_danger large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- dark 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_dark default_dark large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- info 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_info default_info large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_primary default_primary large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the palette of- secondary 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_secondary default_secondary large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - large 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - medium 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default medium default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - small 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default small default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the size - xlarge 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default xlarge default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - box 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  plain_default 
+                 box_default  large box"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - default 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default default_default large default"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - flag 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default  large flag"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - plain 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  plain_default 
+                   large plain"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - ribbon 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default  large ribbon"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - stamp 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  plain_default 
+                  stamp_default large stamp"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - sticker 1`] = `
+<DocumentFragment>
+  <span
+    class="basic  palette_default  large sticker"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="after"
+    />
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+    <span
+      class="before"
+    />
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label rendering the type - tag 1`] = `
+<DocumentFragment>
+  <span
+    class="basic   large tag"
+    data-id="ribbonComp"
+    data-selector-id="ribbon"
+    data-test-id="ribbonComp"
+  >
+    <span
+      class="childText"
+    >
+      Ribbon
+    </span>
+  </span>
+</DocumentFragment>
+`;

package/es/RippleEffect/__tests__/RippleEffect.spec.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import RippleEffect from '../RippleEffect.js';
+describe('RippleEffect', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, null, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isActive: true
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isDisabled is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isDisabled: true
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const palette = ['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger'];
+  test.each(palette)('rendering the palette of- %s', palette => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: palette
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  const hoverTypes = ['default', 'border', 'bg', 'test'];
+  test.each(hoverTypes)('rendering hoverType of- %s', hoverType => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      hoverType: hoverType
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isNeedEffect is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isNeedEffect: false
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering needBorder is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      needBorder: false
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isCopyTextEnabled is false', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(RippleEffect, {
+      isCopyTextEnabled: true
+    }, /*#__PURE__*/React.createElement("div", null, "RippleEffect")));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RippleEffect rendering hoverType of- bg 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border bgHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- border 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border borderHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- default 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering hoverType of- test 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border   hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover active hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isCopyTextEnabled is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect notAllowed"
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover   disabled"
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering isNeedEffect is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering needBorder is false 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default  defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- danger 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect danger border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect default border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- green 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect green border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primary border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryDark 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryDark border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryFilled 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryFilled border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;
+
+exports[`RippleEffect rendering the palette of- primaryLight 1`] = `
+<DocumentFragment>
+  <div
+    class=" effect primaryLight border defaultHover  hoverEffect "
+  >
+    RippleEffect
+  </div>
+</DocumentFragment>
+`;