@ukic/web-components 2.35.0 → 2.35.2

package/dist/collection/components/ic-toggle-button/ic-toggle-button.stories.js

@@ -0,0 +1,537 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Toggle button",
+  component: "ic-toggle-button",
+};
+
+export const Default = {
+  render: (args) =>
+    html`<ic-toggle-button label="Toggle"></ic-toggle-button>
+      <script>
+        var toggle = document.querySelector("ic-toggle-button");
+        toggle.addEventListener("icToggleChecked", function (event) {
+          console.log(event.detail.checked);
+        });
+      </script>`,
+
+  name: "Default",
+};
+
+export const Checked = {
+  render: (args) =>
+    html`<ic-toggle-button
+      label="Toggle"
+      toggle-checked="true"
+    ></ic-toggle-button>`,
+
+  name: "Checked",
+};
+
+export const Disabled = {
+  render: (args) =>
+    html`<ic-toggle-button label="Toggle" disabled="true"></ic-toggle-button>
+      <ic-toggle-button
+        label="Toggle"
+        disabled="true"
+        toggle-checked="true"
+      ></ic-toggle-button>`,
+
+  name: "Disabled",
+};
+
+export const WithIcon = {
+  render: (args) =>
+    html`<ic-toggle-button label="Toggle">
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-toggle-button>`,
+
+  name: "With icon",
+};
+
+export const Sizes = {
+  render: (args) =>
+    html`<div style="padding: 6px">
+        <ic-toggle-button label="Toggle" size="small"></ic-toggle-button>
+      </div>
+      <div style="padding: 6px">
+        <ic-toggle-button label="Toggle"></ic-toggle-button>
+      </div>
+      <div style="padding: 6px">
+        <ic-toggle-button label="Toggle" size="large"></ic-toggle-button>
+      </div>`,
+
+  name: "Sizes",
+};
+
+export const WithBadge = {
+  render: (args) =>
+    html`<ic-toggle-button label="Toggle">
+        <ic-badge text-label="1" slot="badge" variant="success"></ic-badge>
+      </ic-toggle-button>
+      <ic-toggle-button label="Toggle">
+        <ic-badge slot="badge" variant="success" type="dot"></ic-badge>
+      </ic-toggle-button>`,
+
+  name: "With badge",
+};
+
+export const AppearanceDark = {
+  render: (args) =>
+    html`<ic-toggle-button
+      label="Toggle"
+      appearance="dark"
+    ></ic-toggle-button>`,
+
+  name: "Appearance dark",
+};
+
+export const AppearanceLight = {
+  render: (args) =>
+    html`<div
+      style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
+    >
+      <ic-toggle-button label="Toggle" appearance="light"></ic-toggle-button>
+    </div>`,
+
+  name: "Appearance light",
+};
+
+export const FullWidth = {
+  render: (args) =>
+    html`<ic-toggle-button
+      label="Toggle"
+      full-width="true"
+    ></ic-toggle-button>`,
+
+  name: "Full width",
+};
+
+export const Loading = {
+  render: (args) =>
+    html`<div style="padding: 6px">
+        <ic-toggle-button label="Toggle" loading="true"></ic-toggle-button>
+        <ic-toggle-button
+          label="Toggle"
+          loading="true"
+          toggle-checked="true"
+        ></ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          loading="true"
+          accessible-label="Refresh the page"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          loading="true"
+          toggle-checked="true"
+          accessible-label="Refresh the page"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+      </div>
+      <div
+        style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
+      >
+        <ic-toggle-button
+          label="Toggle"
+          loading="true"
+          appearance="light"
+        ></ic-toggle-button>
+        <ic-toggle-button
+          label="Toggle"
+          loading="true"
+          toggle-checked="true"
+          appearance="light"
+        ></ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          loading="true"
+          accessible-label="Refresh the page"
+          appearance="light"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          loading="true"
+          toggle-checked="true"
+          accessible-label="Refresh the page"
+          appearance="light"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+      </div>
+      <div style="padding:6px 10px; width:fit-content">
+        <ic-toggle-button
+          label="Toggle"
+          loading="true"
+          appearance="dark"
+        ></ic-toggle-button>
+        <ic-toggle-button
+          label="Toggle"
+          loading="true"
+          toggle-checked="true"
+          appearance="dark"
+        ></ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          loading="true"
+          accessible-label="Refresh the page"
+          appearance="dark"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          loading="true"
+          toggle-checked="true"
+          accessible-label="Refresh the page"
+          appearance="dark"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+      </div>`,
+
+  name: "Loading",
+};
+
+export const IconOnly = {
+  render: (args) =>
+    html`<div style="padding:6px 10px; width:fit-content">
+        <ic-toggle-button
+          variant="icon"
+          size="small"
+          accessible-label="Refresh the page"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button variant="icon" accessible-label="Refresh the page">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          size="large"
+          accessible-label="Refresh the page"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          disabled="true"
+          accessible-label="Refresh the page"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+      </div>
+      <div
+        style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
+      >
+        <ic-toggle-button
+          variant="icon"
+          accessible-label="Refresh the page"
+          appearance="light"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          disabled="true"
+          accessible-label="Refresh the page"
+          appearance="light"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+      </div>
+      <div style="padding:6px 10px; width:fit-content">
+        <ic-toggle-button
+          variant="icon"
+          accessible-label="Refresh the page"
+          appearance="dark"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+        <ic-toggle-button
+          variant="icon"
+          disabled="true"
+          accessible-label="Refresh the page"
+          appearance="dark"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-toggle-button>
+      </div>`,
+
+  name: "Icon only",
+};
+
+export const IconRight = {
+  render: (args) =>
+    html`<ic-toggle-button label="Toggle" icon-placement="right">
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-toggle-button>`,
+
+  name: "Icon right",
+};
+
+export const IconTop = {
+  render: (args) =>
+    html`<ic-toggle-button label="Toggle" icon-placement="top">
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-toggle-button>`,
+
+  name: "Icon top",
+};
+
+export const TooltipPlacement = {
+  render: (args) =>
+    html`<div style="padding:100px 10px; width:fit-content">
+      <ic-toggle-button
+        variant="icon"
+        tooltip-placement="right"
+        accessible-label="Refresh the page"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-toggle-button>
+      <ic-toggle-button
+        variant="icon"
+        tooltip-placement="top"
+        accessible-label="Refresh the page"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-toggle-button>
+      <ic-toggle-button
+        variant="icon"
+        tooltip-placement="left"
+        accessible-label="Refresh the page"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-toggle-button>
+    </div>`,
+
+  name: "Tooltip placement",
+};