@feminab/box-ui 0.1.0 → 0.1.3

package/src/tests/__snapshots__/Badge.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📘 Badge Storybook Stories renders Default badge 1`] = `
+<div>
+  <div
+    class="badge-base badge-md badge-success"
+  >
+    <span>
+      Label
+    </span>
+  </div>
+</div>
+`;

package/src/tests/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📘 Button Storybook Stories renders Default button 1`] = `
+<div>
+  <div
+    class="-m-4"
+  >
+    <div
+      class="flex inline-flex flex-row space-x-2 p-4"
+    >
+      <button
+        class="btn-base btn-md btn-primary btn-primary-hover btn-primary-focus shadow-grayDark"
+        type="button"
+      >
+        Primary
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`📘 Button Storybook Stories renders all button sizes 1`] = `
+<div>
+  <div
+    class="-m-4"
+  >
+    <div
+      class="flex inline-flex flex-row space-x-2 p-4"
+    >
+      <button
+        class="btn-base btn-sm btn-primary btn-primary-hover btn-primary-focus shadow-grayDark"
+        type="button"
+      >
+        sm
+      </button>
+      <button
+        class="btn-base btn-md btn-primary btn-primary-hover btn-primary-focus shadow-grayDark"
+        type="button"
+      >
+        md
+      </button>
+      <button
+        class="btn-base btn-lg btn-primary btn-primary-hover btn-primary-focus shadow-grayDark"
+        type="button"
+      >
+        lg
+      </button>
+      <button
+        class="btn-base btn-xl btn-primary btn-primary-hover btn-primary-focus shadow-grayDark"
+        type="button"
+      >
+        xl
+      </button>
+      <button
+        class="btn-base btn-2xl btn-primary btn-primary-hover btn-primary-focus shadow-grayDark"
+        type="button"
+      >
+        2xl
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`📘 Button Storybook Stories renders all button variants 1`] = `
+<div>
+  <div
+    class="-m-4"
+  >
+    <div
+      class="flex inline-flex flex-row space-x-2 p-4"
+    >
+      <button
+        class="btn-base btn-md btn-primary btn-primary-hover btn-primary-focus shadow-grayDark"
+        type="button"
+      >
+        Primary
+      </button>
+      <button
+        class="btn-base btn-md btn-secondary btn-secondary-hover btn-secondary-focus shadow-grayDark"
+        type="button"
+      >
+        Secondary
+      </button>
+      <button
+        class="btn-base btn-md btn-secondaryGray btn-secondaryGray-hover btn-secondaryGray-focus shadow-grayDark"
+        type="button"
+      >
+        Secondary Gray
+      </button>
+      <button
+        class="btn-base btn-md btn-tertiary btn-tertiary-hover btn-tertiary-focus shadow-grayDark"
+        type="button"
+      >
+        Tertiary
+      </button>
+      <button
+        class="btn-base btn-md btn-tertiaryGray btn-tertiaryGray-hover btn-tertiaryGray-focus shadow-grayDark"
+        type="button"
+      >
+        Tertiary Gray
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/tests/__snapshots__/ButtonGroup.test.tsx.snap

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📘 ButtonGroup Storybook Stories renders IconButtonGroup with icons 1`] = `
+<div>
+  <div
+    class="-m-4"
+  >
+    <div
+      class="p-4"
+    >
+      <div>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-l-lg bg-gray-50 dark:bg-gray-700"
+        >
+          <svg
+            fill="none"
+            height="20"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="8"
+              x2="21"
+              y1="6"
+              y2="6"
+            />
+            <line
+              x1="8"
+              x2="21"
+              y1="12"
+              y2="12"
+            />
+            <line
+              x1="8"
+              x2="21"
+              y1="18"
+              y2="18"
+            />
+            <line
+              x1="3"
+              x2="3.01"
+              y1="6"
+              y2="6"
+            />
+            <line
+              x1="3"
+              x2="3.01"
+              y1="12"
+              y2="12"
+            />
+            <line
+              x1="3"
+              x2="3.01"
+              y1="18"
+              y2="18"
+            />
+          </svg>
+        </button>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-r-lg"
+        >
+          <svg
+            fill="none"
+            height="20"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="7"
+              width="7"
+              x="3"
+              y="3"
+            />
+            <rect
+              height="7"
+              width="7"
+              x="14"
+              y="3"
+            />
+            <rect
+              height="7"
+              width="7"
+              x="14"
+              y="14"
+            />
+            <rect
+              height="7"
+              width="7"
+              x="3"
+              y="14"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`📘 ButtonGroup Storybook Stories renders LabelButtonGroup 1`] = `
+<div>
+  <div
+    class="-m-4"
+  >
+    <div
+      class="p-4"
+    >
+      <div>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-l-lg"
+        >
+          Leading
+        </button>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-700 border-r-0"
+        >
+          Middle
+        </button>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-r-lg"
+        >
+          Trailing
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`📘 ButtonGroup Storybook Stories renders LabelIconButtonGroup 1`] = `
+<div>
+  <div
+    class="-m-4"
+  >
+    <div
+      class="p-4"
+    >
+      <div>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-l-lg"
+        >
+          <span>
+            <svg
+              class="mr-2"
+              fill="none"
+              height="20"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+              />
+            </svg>
+          </span>
+          First
+        </button>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-700 border-r-0"
+        >
+          <span>
+            <svg
+              class="mr-2"
+              fill="none"
+              height="20"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+              />
+            </svg>
+          </span>
+          Second
+        </button>
+        <button
+          class="inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500 rounded-r-lg"
+        >
+          <span>
+            <svg
+              class="mr-2"
+              fill="none"
+              height="20"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+              />
+            </svg>
+          </span>
+          Third
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;