@zohodesk/components 1.1.0 → 1.2.0-temp-195

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

@@ -1,288 +1,591 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Avatar component should display avatar image and initial while avatar loading... 1`] = `
-<div
-  className="avatar medium medium circle primary text_black
-          border"
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <span
-    className="initial initialTxt"
-    data-id="Avatar_AvatarInitial"
-  >
-    VA
-  </span>
-  <img
-    className="none"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should display image valid url 1`] = `
-<div
-  className="avatar medium medium circle primary text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should display initial 1`] = `
-<div
-  className="avatar medium medium circle primary text_black
-          border"
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <span
-    className="initial initialTxt"
-    data-id="Avatar_AvatarInitial"
-  >
-    VA
-  </span>
-</div>
-`;
-
-exports[`Avatar component should display initial if invalid url 1`] = `
-<div
-  className="avatar medium medium circle primary text_black
-          border"
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <span
-    className="initial initialTxt"
-    data-id="Avatar_AvatarInitial"
-  >
-    VA
-  </span>
-</div>
-`;
-
-exports[`Avatar component should have title 1`] = `
-<div
-  className="avatar medium medium circle primary text_black
-          "
-  data-id="Avatar"
-  data-title="Sample Title"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should no need title 1`] = `
-<div
-  className="avatar medium medium circle primary text_black
-          "
-  data-id="Avatar"
-  data-title=""
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the palette is default 1`] = `
-<div
-  className="avatar medium medium circle default text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the palette is info 1`] = `
-<div
-  className="avatar medium medium circle info text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the palette is secondary 1`] = `
-<div
-  className="avatar medium medium circle secondary text_white
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the shape is square 1`] = `
-<div
-  className="avatar medium medium square primary text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the size is large 1`] = `
-<div
-  className="avatar large large circle primary text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the size is small 1`] = `
-<div
-  className="avatar square  circle primary text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the size is xlarge 1`] = `
-<div
-  className="avatar xlarge xlarge circle primary text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the size is xmedium 1`] = `
-<div
-  className="avatar xmedium xmedium circle primary text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
-
-exports[`Avatar component should the size is xsmall 1`] = `
-<div
-  className="avatar xsmall xsmall circle primary text_black
-          "
-  data-id="Avatar"
-  data-title="vimalesan a"
-  onClick={[Function]}
->
-  <img
-    className="image"
-    data-id="Avatar_AvatarImg"
-    name="vimalesan a"
-    onError={[Function]}
-    onLoad={[Function]}
-    src="avatar.jpg"
-  />
-</div>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar rendering BorderOnActive true 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border borderOnActive  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering Name in 2 Word 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+    data-title="Gowtham Kathirvel"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    >
+      GK
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering NeedBorder false 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering alternateSrc 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <img
+      class="image animate "
+      data-id="Avatar_AvatarImg"
+      data-selector-id="avatar_AvatarImg"
+      data-test-id="Avatar_AvatarImg"
+      src="https://www.w3schools.com/images/w3schools_green.jpg"
+    />
+    <span
+      class="shadow black "
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering borderOnHover true 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border borderOnHover  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering customClass true 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   customClassAvatar"
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering initial 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    >
+      AvatarTeam
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering isAnimate is false 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <img
+      class="image  "
+      data-id="Avatar_AvatarImg"
+      data-selector-id="avatar_AvatarImg"
+      data-test-id="Avatar_AvatarImg"
+      src="https://www.w3schools.com/images/w3schools_green.jpg"
+    />
+    <span
+      class="shadow black "
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering needInnerBorder is true 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <img
+      class="image  innerBorder"
+      data-id="Avatar_AvatarImg"
+      data-selector-id="avatar_AvatarImg"
+      data-test-id="Avatar_AvatarImg"
+      src="https://www.w3schools.com/images/w3schools_green.jpg"
+    />
+    <span
+      class="shadow black "
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering needTitle 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+    data-title="AvatarNameTitile"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering showAlternateAvatar is enabled border get disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <img
+      class="image animate "
+      data-id="Avatar_AvatarImg"
+      data-selector-id="avatar_AvatarImg"
+      data-test-id="Avatar_AvatarImg"
+      src="https://www.w3schools.com/css/img_5terre.jpg"
+    />
+    <span
+      class="shadow black "
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering showDefaultBorder is true 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <img
+      class="image animate "
+      data-id="Avatar_AvatarImg"
+      data-selector-id="avatar_AvatarImg"
+      data-test-id="Avatar_AvatarImg"
+      src="https://www.w3schools.com/images/w3schools_green.jpg"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering src 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black  "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+    data-title="AvatarName"
+  >
+    <img
+      alt="AvatarName"
+      class="image animate "
+      data-id="Avatar_AvatarImg"
+      data-selector-id="avatar_AvatarImg"
+      data-test-id="Avatar_AvatarImg"
+      name="AvatarName"
+      src="https://www.w3schools.com/images/w3schools_green.jpg"
+    />
+    <span
+      class="shadow black "
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the Custom props 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-avatar="true"
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the palette of- default 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle default black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the palette of- info 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle info black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the palette of- secondary 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle secondary white border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the shape of- circle 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the shape of- square 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium square_medium primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- black 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- large 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar large large circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- small 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar small small circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- white 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary white border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- xlarge 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar xlarge xlarge circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar xmedium xmedium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- xsmall 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar xsmall xsmall circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering the size of- xxsmall 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar xxsmall xxsmall circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Avatar rendering title 1`] = `
+<DocumentFragment>
+  <div
+    class="avatar medium medium circle primary black border   "
+    data-id="Avatar"
+    data-selector-id="avatar"
+    data-test-id="Avatar"
+    data-title="AvatarNameTitile"
+  >
+    <span
+      class="initial"
+      data-id="Avatar_AvatarInitial"
+      data-selector-id="avatar_AvatarInitial"
+      data-test-id="Avatar_AvatarInitial"
+    />
+  </div>
+</DocumentFragment>
+`;