@zohodesk/components 1.6.8 → 1.6.11

package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -0,0 +1,1160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-describedby="button-description"
+    aria-disabled="false"
+    aria-label="Smart Button"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should apply customClass to wrapper and text 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle customButtonClass"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13 customTextClass"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should apply customProps to wrapper, text and icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should be disabled when isDisabled prop is true 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render Sizes of buttons - full 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeFull shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render Sizes of buttons - large 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeLarge shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render Sizes of buttons - medium 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render Sizes of buttons - small 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeSmall shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render Status of buttons - default 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render Status of buttons - loading 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="true"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      data-id="flex"
+      data-test-id="flex"
+    />
+    <div
+      class="flex row alignItems_center justifyContent_center loaderOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <svg
+        aria-hidden="true"
+        class="spinner "
+        role="img"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          class="spinnerTrack"
+          cx="12"
+          cy="12"
+          r="10"
+        />
+        <circle
+          class="spinnerHead"
+          cx="12"
+          cy="12"
+          r="10"
+        />
+      </svg>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render Status of buttons - success 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      data-id="flex"
+      data-test-id="flex"
+    />
+    <div
+      class="flex row alignItems_center justifyContent_center successOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <svg
+        aria-hidden="true"
+        class="tick "
+        role="img"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M4 12l5 5L20 6"
+        />
+      </svg>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render bgAppearance of buttons - default 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render bgAppearance of buttons - none 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render bgAppearance of buttons - onHover 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render borderAppearance of buttons - default 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render borderAppearance of buttons - none 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render borderAppearance of buttons - onHover 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render disabledAppearance of buttons - dull 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render disabledAppearance of buttons - none 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledPointer"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render disabledAppearance of buttons - strike 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledPointer strike"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render loaderPlacement of buttons - end 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="true"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="flex row alignItems_center justifyContent_center"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <svg
+          aria-hidden="true"
+          class="spinner "
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="spinnerTrack"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <circle
+            class="spinnerHead"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render loaderPlacement of buttons - overlay 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="true"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      data-id="flex"
+      data-test-id="flex"
+    />
+    <div
+      class="flex row alignItems_center justifyContent_center loaderOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <svg
+        aria-hidden="true"
+        class="spinner "
+        role="img"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          class="spinnerTrack"
+          cx="12"
+          cy="12"
+          r="10"
+        />
+        <circle
+          class="spinnerHead"
+          cx="12"
+          cy="12"
+          r="10"
+        />
+      </svg>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render loaderPlacement of buttons - start 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="true"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="flex row alignItems_center justifyContent_center"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <svg
+          aria-hidden="true"
+          class="spinner "
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="spinnerTrack"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <circle
+            class="spinnerHead"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render palette of buttons - danger 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-red-70 text-white border-red-70 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render palette of buttons - default 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render palette of buttons - primary 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-blue-80 text-white border-blue-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render palette of buttons - secondary 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-grey-65 text-white border-grey-65 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render palette of buttons - success 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-green-80 text-white border-green-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render paletteShade of buttons - default 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render paletteShade of buttons - lighter 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-10 text-brand-80 border-brand-10 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render shape of buttons - pill 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapePill"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render shape of buttons - rectangle 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render shape of buttons - roundedRectangle 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render type of buttons - button 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render type of buttons - reset 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="reset"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render type of buttons - submit 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="submit"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render variant of buttons - icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render variant of buttons - iconWithText 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render variant of buttons - text 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with children 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Click Me
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with customId and testId 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    data-id="customIdValue"
+    data-test-id="testIdValue"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with iconName and iconSize  1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-plus    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size20);"
+      />
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with iconPlacement  1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-plus    "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size16);"
+      />
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with readOnly style when isReadOnly prop is true 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="true"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with renderBefore and renderAfter 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span>
+        Before
+      </span>
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+      <span>
+        After
+      </span>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with renderIcon 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span>
+        CustomIcon
+      </span>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with renderLoader 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="true"
+    aria-disabled="true"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      data-id="flex"
+      data-test-id="flex"
+    />
+    <span>
+      Loading...
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with renderSuccess 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      data-id="flex"
+      data-test-id="flex"
+    />
+    <span>
+      Success!
+    </span>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with selected style when isSelected prop is true 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    aria-readonly="false"
+    class="buttonReset button sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with the basic set of default props 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render with title attribute 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    aria-readonly="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    data-title="Button test title"
+    type="button"
+  >
+    <div
+      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;