@zohodesk/dot 1.0.0-temp-187.10 → 1.0.0-temp-208.1

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

@@ -4,7 +4,7 @@ exports[`IconButton Checking the "Children" 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -27,7 +27,7 @@ exports[`IconButton eleRef prop is a function 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -45,7 +45,7 @@ exports[`IconButton rendering ally 1`] = `
     aria-label="ariaLabel"
     aria-labelledby="ariaLabelledby"
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -60,7 +60,7 @@ exports[`IconButton rendering ally 2`] = `
     aria-expanded="false"
     aria-haspopup="false"
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -73,7 +73,7 @@ exports[`IconButton rendering in ClassName 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper IconButtonClass undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -86,7 +86,7 @@ exports[`IconButton rendering in Icon 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -108,7 +108,7 @@ exports[`IconButton rendering in dataIsHtml is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="true"
     data-selector-id="iconButton"
@@ -121,7 +121,7 @@ exports[`IconButton rendering in isDisabled is True 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover   disabled inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -135,7 +135,7 @@ exports[`IconButton rendering in title 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -149,7 +149,7 @@ exports[`IconButton rendering isNeedEffect is False 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined  inflex coldir both"
+    class="buttonReset large wrapper  undefined  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -162,7 +162,7 @@ exports[`IconButton rendering needButtonTag 1`] = `
 <DocumentFragment>
   <div
     aria-pressed="false"
-    class="false wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -175,7 +175,7 @@ exports[`IconButton rendering the defult props 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -188,7 +188,7 @@ exports[`IconButton rendering the hovertypes- bg 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border bgHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -201,7 +201,7 @@ exports[`IconButton rendering the hovertypes- border 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border borderHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -214,7 +214,7 @@ exports[`IconButton rendering the hovertypes- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -227,7 +227,7 @@ exports[`IconButton rendering the isActive true with palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -240,7 +240,7 @@ exports[`IconButton rendering the isActive true with palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primary_active effect primary border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -253,7 +253,7 @@ exports[`IconButton rendering the isActive true with palette of- primaryFilled 1
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primaryFilled_active effect primaryFilled border defaultHover active hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -266,7 +266,7 @@ exports[`IconButton rendering the palette of- default 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -279,7 +279,7 @@ exports[`IconButton rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primary effect primary border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -292,7 +292,72 @@ exports[`IconButton rendering the palette of- primaryFilled 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  primaryFilled effect primaryFilled border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- large 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset medium wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- small 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset small wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- xlarge 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset xlarge wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    data-id="iconContainer"
+    data-ishtml="false"
+    data-selector-id="iconButton"
+    data-test-id="iconContainer"
+  />
+</DocumentFragment>
+`;
+
+exports[`IconButton rendering the size of- xsmall 1`] = `
+<DocumentFragment>
+  <button
+    aria-pressed="false"
+    class="buttonReset xsmall wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"
@@ -305,7 +370,7 @@ exports[`IconButton rendering tourId 1`] = `
 <DocumentFragment>
   <button
     aria-pressed="false"
-    class="buttonReset wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
+    class="buttonReset large wrapper  undefined effect default border defaultHover  hoverEffect  inflex coldir both"
     data-id="iconContainer"
     data-ishtml="false"
     data-selector-id="iconButton"

package/es/IconButton/props/defaultProps.js

@@ -1,6 +1,7 @@
 export const defaultProps = {
   palette: 'default',
   iconSize: '13',
+  size: 'large',
   className: '',
   iconClass: '',
   dataId: 'iconContainer',

package/es/IconButton/props/propTypes.js

@@ -9,6 +9,7 @@ export const propTypes = {
   iconClass: PropTypes.string,
   iconName: PropTypes.string,
   iconSize: PropTypes.string,
+  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
   isActive: PropTypes.bool,
   isBold: PropTypes.bool,
   isDisabled: PropTypes.bool,

package/es/Onboarding/CarouselDots/CarouselDot/CarouselDot.js

@@ -0,0 +1,34 @@
+import React from 'react';
+/* Props */
+
+import { propTypes } from "./props/propTypes.js";
+import { defaultProps } from "./props/defaultProps.js";
+/* Style */
+
+import style from "./css/CarouselDot.module.css";
+
+function CarouselDot(props) {
+  const {
+    onClick,
+    isActive,
+    index,
+    isAnimationPaused,
+    testId,
+    customId
+  } = props;
+
+  function handleClick() {
+    typeof onClick === "function" && onClick(index);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.bullet} ${isAnimationPaused ? style.animationPaused : ''} ${isActive ? style.bulletActive : style.bulletNormal}`,
+    onClick: handleClick,
+    "data-id": customId,
+    "data-test-id": testId
+  });
+}
+
+CarouselDot.propTypes = propTypes;
+CarouselDot.defaultProps = defaultProps;
+export default CarouselDot;

package/es/Onboarding/CarouselDots/CarouselDot/__tests__/CarouselDot.spec.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CarouselDot from "../CarouselDot";
+describe('CarouselDot', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of isActive', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of isAnimationPaused', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      isAnimationPaused: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      customId: "radar"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDot, {
+      testId: "radar_test"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/Onboarding/CarouselDots/CarouselDot/__tests__/__snapshots__/CarouselDot.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CarouselDot rendering of isActive 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletActive"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering of isAnimationPaused 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet animationPaused bulletNormal"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="carouselDot"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering with customId 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="radar"
+    data-test-id="carouselDot"
+  />
+</DocumentFragment>
+`;
+
+exports[`CarouselDot rendering with testId 1`] = `
+<DocumentFragment>
+  <div
+    class="bullet  bulletNormal"
+    data-id="carouselDot"
+    data-test-id="radar_test"
+  />
+</DocumentFragment>
+`;

package/es/Onboarding/CarouselDots/CarouselDot/css/CarouselDot.module.css

@@ -0,0 +1,83 @@
+.bulletNormal{
+    composes: pointer from '~@zohodesk/components/lib/common/common.module.css';
+  }
+  .bulletNormal:hover {
+    transform: scale(1.4);
+  }
+  .bullet {
+    /* padding: 4px 3px; */
+    position: relative;
+    width: var(--zd_size8) ;
+    height: var(--zd_size8) ;
+    overflow: hidden;
+    border-radius: 20px;
+  }
+  .bullet,
+  .bullet::after {
+    transition: opacity var(--zd_transition2), background-color var(--zd_transition2), width var(--zd_transition6) cubic-bezier(0.165, 0.84, 0.44, 1),transform 0.2s ease-in-out;
+  }
+  .bullet::before,
+  .bullet::after {
+    content: '';
+    width: inherit ;
+    height: inherit ;
+    position: absolute;
+    top: 50% ;
+  }
+  .bullet::before, .bullet::after {
+    border-radius: inherit;
+    transform: translateY(-50%);
+  }
+  [dir=ltr] .bullet::before, [dir=ltr] .bullet::after {
+    left: 0 ;
+  }
+  [dir=rtl] .bullet::before, [dir=rtl] .bullet::after {
+    right: 0 ;
+  }
+  .bullet::before {
+    opacity: .4;
+  }
+  .bullet::before, .bulletActive::after {
+    background-color: var(--zdt_button_primaryfill_bg);
+  }
+  .bulletActive {
+    width: var(--zd_size30) ;
+  }
+  .bulletActive::before,
+  .bulletActive::after {
+    width: 100% ;
+  }
+  .bulletActive::after {
+    opacity: 1;
+  }
+  [dir=ltr] .bulletActive::after {
+    left:-100% ;
+    animation:  progressLoading-ltr 5s linear infinite;
+  }
+  [dir=rtl] .bulletActive::after {
+    right:-100% ;
+    animation:  progressLoading-rtl 5s linear infinite;
+  }
+  [dir=ltr] .animationPaused::after {
+    animation-play-state: paused;
+  }
+  [dir=rtl] .animationPaused::after {
+    animation-play-state: paused;
+  }
+  @keyframes progressLoading-ltr {
+    0% {
+      left: -100% ;
+    }
+    100% {
+      left: 0% ;
+    }
+  }
+  @keyframes progressLoading-rtl {
+    0% {
+      left: -100% ;
+    }
+    100% {
+      left: 0% ;
+    }
+  }
+  

package/es/Onboarding/CarouselDots/CarouselDot/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  isActive: false,
+  isAnimationPaused: false,
+  customId: "carouselDot",
+  testId: 'carouselDot'
+};

package/es/Onboarding/CarouselDots/CarouselDot/props/propTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  isAnimationPaused: PropTypes.bool,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  index: PropTypes.number,
+  testId: PropTypes.string,
+  customId: PropTypes.string
+};

package/es/Onboarding/CarouselDots/CarouselDots.js

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+import { Flex } from '@zohodesk/layout';
+import { propTypes } from "./props/propTypes";
+import { defaultProps } from "./props/defaultProps";
+import CarouselDot from "./CarouselDot/CarouselDot";
+import style from "./css/CarouselDots.module.css";
+
+const CarouselDots = _ref => {
+  let {
+    sliderDetails,
+    currentSliderIndex,
+    isAnimationPaused,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    testId,
+    customId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Flex, {
+    $ui_displayMode: "flex",
+    $ui_alignItems: "center",
+    $ui_className: style.btnCnt,
+    $ui_justifyContent: "center",
+    $tagAttributes_container: {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    },
+    customId: customId,
+    testId: testId
+  }, sliderDetails.map((data, index) => /*#__PURE__*/React.createElement(CarouselDot, {
+    key: data.tabName,
+    isActive: index === currentSliderIndex,
+    isAnimationPaused: isAnimationPaused,
+    onClick: onClick,
+    index: index,
+    customId: customId + '_' + index,
+    testId: testId + '_' + index
+  })));
+};
+
+CarouselDots.propTypes = propTypes;
+CarouselDots.defaultProps = defaultProps;
+export default /*#__PURE__*/memo(CarouselDots);

package/es/Onboarding/CarouselDots/__tests__/CarouselDots.spec.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CarouselDots from "../CarouselDots";
+describe('CarouselDots', () => {
+  const sliderData = [{
+    imageSource: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3Mu0NdfXXqvCExZ9YG_j93CKuU4DIdcIlEQ&s",
+    tabName: 'commentPin',
+    heading: "Onboarding with carousel Slide 1",
+    description: "Discover innovative tools and solutions to streamline your processes and boost productivity on Slide 1."
+  }, {
+    imageSource: "https://crm-masters.com/wp-content/uploads/2023/05/cover-images-1200-%C3%97-630px-39-1-1200x675.jpg",
+    tabName: 'visibility',
+    heading: "Slide 2",
+    description: "Immerse yourself in a visually stunning experience on Slide 2, where innovative ideas and compelling visuals spark curiosity and inspiration."
+  }];
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering of slider data', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      sliderDetails: sliderData
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering prop of currentSliderIndex', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      sliderDetails: sliderData,
+      currentSliderIndex: 1
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering prop of isAnimationPaused', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      sliderDetails: sliderData,
+      isAnimationPaused: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with customId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      customId: "radar"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with testId', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(CarouselDots, {
+      testId: "radar_test"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});