@ukic/web-components 2.35.0 → 2.35.1

package/dist/collection/components/ic-skeleton/ic-skeleton.stories.js

@@ -0,0 +1,141 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  appearance: "default",
+  variant: "rectangle",
+};
+
+export default {
+  title: "Web Components/Skeleton",
+  component: "ic-skeleton",
+};
+
+export const Rectangle = {
+  render: () =>
+    html` <ic-typography variant="h4">Default</ic-typography>
+      <ic-skeleton></ic-skeleton>
+      <ic-typography variant="h4">Inherited from child</ic-typography>
+      <ic-skeleton
+        ><div style="height:200px;width:450px;">Test text</div></ic-skeleton
+      >
+      <ic-typography variant="h4"
+        >Height and width set with styles</ic-typography
+      >
+      <ic-skeleton style="height:200px;width:200px;"></ic-skeleton>
+      <ic-typography variant="h4">Height set with styles</ic-typography>
+      <ic-skeleton style="height:75px;"></ic-skeleton>
+      <ic-typography variant="h4">Width set with styles</ic-typography>
+      <ic-skeleton style="width:450px;"></ic-skeleton>`,
+
+  name: "Rectangle",
+};
+
+export const Circle = {
+  render: () => html`<ic-skeleton variant="circle" />`,
+  name: "Circle",
+};
+
+export const Text = {
+  render: () =>
+    html` <ic-typography variant="h1">h1</ic-typography>
+      <ic-typography variant="h1"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h2">h2</ic-typography>
+      <ic-typography variant="h2"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h3">h3</ic-typography>
+      <ic-typography variant="h3"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="h4">h4</ic-typography>
+      <ic-typography variant="h4"><ic-skeleton variant="text" /></ic-typography>
+      <ic-typography variant="subtitle-large">subtitle-large</ic-typography>
+      <ic-typography variant="subtitle-large"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="subtitle-small">subtitle-small</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="body">body</ic-typography>
+      <ic-typography variant="body"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="caption">caption</ic-typography>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="label">label</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="caption-uppercase"
+        >caption uppercase</ic-typography
+      >
+      <ic-typography variant="caption-uppercase"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <ic-typography variant="label-uppercase">label uppercase</ic-typography>
+      <ic-typography variant="subtitle-small"
+        ><ic-skeleton variant="text"
+      /></ic-typography>`,
+
+  name: "Text",
+};
+
+export const Example = {
+  render: () =>
+    html` <ic-skeleton variant="circle" height="20"></ic-skeleton>
+      <div style="height:8px"></div>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text"
+      /></ic-typography>
+      <div style="height:8px"></div>
+      <ic-skeleton></ic-skeleton>`,
+
+  name: "Example",
+};
+
+export const Light = {
+  render: () =>
+    html` <ic-skeleton variant="circle" height="20" light="true"></ic-skeleton>
+      <div style="height:8px"></div>
+      <ic-typography variant="caption"
+        ><ic-skeleton variant="text" light="true"
+      /></ic-typography>
+      <div style="height:8px"></div>
+      <ic-skeleton light="true"></ic-skeleton>`,
+
+  name: "Light",
+};
+
+export const Playground = {
+  render: (args) =>
+    html` <div>
+      <ic-skeleton
+        appearance=${args.appearance}
+        variant=${args.variant}
+        style="height: ${args.variant == "circle"
+          ? "20px"
+          : ""};width:${args.variant == "circle" ? "20px" : ""};"
+      ></ic-skeleton>
+    </div>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    appearance: {
+      options: ["default", "light"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    variant: {
+      options: ["rectangle", "circle", "text"],
+
+      control: {
+        type: "radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-status-tag/ic-status-tag.stories.js

@@ -0,0 +1,161 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  announced: false,
+  label: "Status tag label",
+  size: "default",
+  status: "neutral",
+  variant: "filled",
+};
+
+export default {
+  title: "Web Components/Status tag",
+  component: "ic-status-tag",
+};
+
+export const Neutral = {
+  render: () => html`
+    <ic-status-tag label="Neutral"></ic-status-tag>
+    <ic-status-tag label="Neutral" variant="outlined"></ic-status-tag>
+  `,
+
+  name: "Neutral",
+};
+
+export const Success = {
+  render: () => html`
+    <ic-status-tag label="Success" status="success"></ic-status-tag>
+    <ic-status-tag
+      label="Success"
+      status="success"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Success",
+};
+
+export const Warning = {
+  render: () => html`
+    <ic-status-tag label="Warning" status="warning"></ic-status-tag>
+    <ic-status-tag
+      label="Warning"
+      status="warning"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Warning",
+};
+
+export const Danger = {
+  render: () => html`
+    <ic-status-tag label="Danger" status="danger"></ic-status-tag>
+    <ic-status-tag
+      label="Danger"
+      status="danger"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Danger",
+};
+
+export const Size = {
+  render: () => html`
+    <ic-status-tag label="Small" size="small"></ic-status-tag>
+    <ic-status-tag
+      label="Small"
+      variant="outlined"
+      size="small"
+    ></ic-status-tag>
+    <ic-status-tag label="Default" size="default"></ic-status-tag>
+    <ic-status-tag
+      label="Default"
+      variant="outlined"
+      size="default"
+    ></ic-status-tag>
+    <ic-status-tag label="Large" size="large"></ic-status-tag>
+    <ic-status-tag
+      label="Large"
+      variant="outlined"
+      size="large"
+    ></ic-status-tag>
+  `,
+
+  name: "Size",
+};
+
+export const Announced = {
+  render: () => html`
+    <ic-status-tag
+      label="Warning"
+      status="warning"
+      id="tag"
+      announced="false"
+    ></ic-status-tag>
+    <br />
+    <br />
+    <ic-button variant="primary" size="small" onClick="onClick()" id="btn"
+      >Toggle announced prop</ic-button
+    >
+    <script>
+      const tag = document.getElementById("tag");
+      const btn = document.getElementById("btn");
+      btn.addEventListener("click", onClick);
+      function onClick(e) {
+        e.preventDefault();
+        tag.announced
+          ? ((tag.announced = "false"),
+            (tag.status = "warning"),
+            (tag.label = "Warning"))
+          : ((tag.announced = "true"),
+            (tag.status = "success"),
+            (tag.label = "Success"));
+      }
+    </script>
+  `,
+
+  name: "Announced",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-status-tag
+      label=${args.label}
+      size=${args.size}
+      status=${args.status}
+      variant=${args.variant}
+      announced=${args.announced}
+    ></ic-status-tag>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    size: {
+      options: ["default", "small", "large"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    status: {
+      options: ["neutral", "success", "warning", "danger"],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    variant: {
+      options: ["filled", "outlined"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-stepper/ic-stepper.stories.js

@@ -0,0 +1,327 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Stepper",
+  component: "ic-stepper",
+};
+
+export const FullWidthStepper = {
+  render: () =>
+    html`<ic-stepper>
+      <ic-step step-title="Create" step-type="completed"></ic-step>
+      <ic-step step-title="Read" step-type="current"></ic-step>
+      <ic-step step-title="Update" step-type="active"></ic-step>
+      <ic-step step-title="Delete" step-type="disabled"></ic-step>
+    </ic-stepper>`,
+
+  name: "Full-width stepper",
+};
+
+export const LeftAlignedStepper = {
+  render: () =>
+    html`<ic-stepper aligned="left">
+      <ic-step step-title="Create" step-type="completed"></ic-step>
+      <ic-step step-title="Read" step-type="current"></ic-step>
+      <ic-step step-title="Update" step-type="active"></ic-step>
+      <ic-step step-title="Delete" step-type="disabled"></ic-step>
+    </ic-stepper>`,
+
+  name: "Left-aligned stepper",
+};
+
+export const WithHiddenStepInformation = {
+  render: () =>
+    html`<ic-stepper hide-step-info>
+      <ic-step step-title="Create" step-type="completed"></ic-step>
+      <ic-step step-title="Read" step-type="current"></ic-step>
+      <ic-step step-title="Update" step-type="active"></ic-step>
+      <ic-step step-title="Delete" step-type="disabled"></ic-step>
+    </ic-stepper>`,
+
+  name: "With hidden step information",
+};
+
+export const WithoutStepTitles = {
+  render: () =>
+    html`<ic-stepper>
+      <ic-step step-type="completed"></ic-step>
+      <ic-step step-type="completed"></ic-step>
+      <ic-step step-type="current"></ic-step>
+      <ic-step></ic-step>
+    </ic-stepper>`,
+
+  name: "Without step titles",
+};
+
+export const CustomStepper = {
+  render: () =>
+    html`<ic-stepper>
+      <ic-step step-title="First"></ic-step>
+      <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional subtitle that is long and should wrap"
+        step-type="current"
+      ></ic-step>
+      <ic-step step-title="Third" step-type="disabled"></ic-step>
+      <ic-step
+        step-title="Fourth title that is long and should wrap"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+      ></ic-step>
+    </ic-stepper>`,
+
+  name: "Custom stepper",
+};
+
+export const CustomConnectorWidth = {
+  render: () =>
+    html`<ic-stepper aligned="left" connector-width="200">
+      <ic-step step-title="First"></ic-step>
+      <ic-step
+        step-title="Second With a Very Long Title"
+        step-subtitle="Optional subtitle that is long and should wrap"
+        step-type="current"
+      ></ic-step>
+      <ic-step step-title="Third" step-type="disabled"></ic-step>
+      <ic-step
+        step-title="Fourth title that is long and should wrap"
+        step-subtitle="Optional Subtitle"
+        step-type="completed"
+      ></ic-step>
+    </ic-stepper>`,
+
+  name: "Custom connector width",
+};
+
+export const Light = {
+  render: () =>
+    html`<div style="background-color:#24262b;">
+      <ic-stepper appearance="light">
+        <ic-step step-title="Create" step-type="completed"></ic-step>
+        <ic-step step-title="Read" step-type="current"></ic-step>
+        <ic-step step-title="Update" step-type="active"></ic-step>
+        <ic-step step-title="Delete" step-type="disabled"></ic-step>
+      </ic-stepper>
+    </div>`,
+
+  name: "Light",
+};
+
+export const CompactStepper = {
+  render: () =>
+    html`<ic-stepper variant="compact" id="standard-compact-stepper">
+        <ic-step step-title="Create"></ic-step>
+        <ic-step step-title="Read" step-type="current"></ic-step>
+        <ic-step step-title="Update" step-status="optional"></ic-step>
+        <ic-step step-title="Delete" step-status="required"></ic-step>
+      </ic-stepper>
+      <ic-button
+        class="back-btn-compact-stepper"
+        style="margin-right: var(--ic-space-lg)"
+        onclick="toPreviousStep()"
+        >Back</ic-button
+      >
+      <ic-button class="next-btn-compact-stepper" onclick="toNextStep()"
+        >Next</ic-button
+      >
+      <script>
+        const compactStepTypes = [
+          "active",
+          "completed",
+          "disabled",
+          "completed",
+        ];
+        const backBtn = document.querySelector(".back-btn-compact-stepper");
+        const nextBtn = document.querySelector(".next-btn-compact-stepper");
+        const steps = document.querySelectorAll(
+          "#standard-compact-stepper > ic-step"
+        );
+        function toPreviousStep() {
+          for (let i = steps.length - 1; i > 0; i--) {
+            if (steps[i].stepType === "current") {
+              steps[i].stepType = compactStepTypes[i];
+              steps[i - 1].stepType = "current";
+              i--;
+            }
+          }
+          if (steps[steps.length - 2].stepType === "current") {
+            nextBtn.setAttribute("disabled", "false");
+          }
+          if (steps[0].stepType === "current") {
+            backBtn.setAttribute("disabled", "true");
+          }
+        }
+        function toNextStep() {
+          for (let i = 0; i < steps.length - 1; i++) {
+            if (steps[i].stepType === "current") {
+              steps[i].stepType = compactStepTypes[i];
+              steps[i + 1].stepType = "current";
+              i++;
+            }
+          }
+          if (steps[1].stepType === "current") {
+            backBtn.setAttribute("disabled", "false");
+          }
+          if (steps[steps.length - 1].stepType === "current") {
+            nextBtn.setAttribute("disabled", "true");
+          }
+        }
+      </script>`,
+
+  name: "Compact stepper",
+};
+
+export const CompactStepperLight = {
+  render: () =>
+    html`<div style="background-color:#24262b;">
+        <ic-stepper
+          variant="compact"
+          id="standard-compact-stepper"
+          appearance="light"
+        >
+          <ic-step step-title="Create"></ic-step>
+          <ic-step step-title="Read" step-type="current"></ic-step>
+          <ic-step step-title="Update" step-status="optional"></ic-step>
+          <ic-step step-title="Delete" step-status="required"></ic-step>
+        </ic-stepper>
+      </div>
+      <ic-button
+        class="back-btn-compact-stepper"
+        style="margin-right: var(--ic-space-lg)"
+        onclick="toPreviousStep()"
+        >Back</ic-button
+      >
+      <ic-button class="next-btn-compact-stepper" onclick="toNextStep()"
+        >Next</ic-button
+      >
+      <script>
+        const compactStepTypes = [
+          "active",
+          "completed",
+          "disabled",
+          "completed",
+        ];
+        const backBtn = document.querySelector(".back-btn-compact-stepper");
+        const nextBtn = document.querySelector(".next-btn-compact-stepper");
+        const steps = document.querySelectorAll(
+          "#standard-compact-stepper > ic-step"
+        );
+        function toPreviousStep() {
+          for (let i = steps.length - 1; i > 0; i--) {
+            if (steps[i].stepType === "current") {
+              steps[i].stepType = compactStepTypes[i];
+              steps[i - 1].stepType = "current";
+              i--;
+            }
+          }
+          if (steps[steps.length - 2].stepType === "current") {
+            nextBtn.setAttribute("disabled", "false");
+          }
+          if (steps[0].stepType === "current") {
+            backBtn.setAttribute("disabled", "true");
+          }
+        }
+        function toNextStep() {
+          for (let i = 0; i < steps.length - 1; i++) {
+            if (steps[i].stepType === "current") {
+              steps[i].stepType = compactStepTypes[i];
+              steps[i + 1].stepType = "current";
+              i++;
+            }
+          }
+          if (steps[1].stepType === "current") {
+            backBtn.setAttribute("disabled", "false");
+          }
+          if (steps[steps.length - 1].stepType === "current") {
+            nextBtn.setAttribute("disabled", "true");
+          }
+        }
+      </script>`,
+
+  name: "Compact stepper light",
+};
+
+export const CustomCompactStepper = {
+  render: () =>
+    html`<ic-stepper variant="compact" id="custom-compact-stepper">
+        <ic-step step-title="First"></ic-step>
+        <ic-step
+          step-title="Second With a Very Long Title"
+          step-subtitle="Optional subtitle that is long and should wrap"
+          step-type="current"
+        ></ic-step>
+        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step
+          step-title="Fourth title that is long and should wrap"
+          step-subtitle="Optional Subtitle"
+          step-type="completed"
+        ></ic-step>
+        <ic-step
+          step-title="Fifth and final step"
+          step-subtitle="Optional Subtitle"
+          step-status="optional"
+          step-type="disabled"
+        ></ic-step>
+      </ic-stepper>
+      <ic-button
+        class="back-btn-custom-compact-stepper"
+        style="margin-right: var(--ic-space-lg)"
+        onclick="toPreviousCustomStep()"
+        >Back</ic-button
+      >
+      <ic-button
+        class="next-btn-custom-compact-stepper"
+        onclick="toNextCustomStep()"
+        >Next</ic-button
+      >
+      <script>
+        const customCompactStepTypes = [
+          "active",
+          "completed",
+          "disabled",
+          "completed",
+          "disabled",
+        ];
+        const backBtnCustomCompactStepper = document.querySelector(
+          ".back-btn-custom-compact-stepper"
+        );
+        const nextBtnCustomCompactStepper = document.querySelector(
+          ".next-btn-custom-compact-stepper"
+        );
+        const customSteps = document.querySelectorAll(
+          "#custom-compact-stepper > ic-step"
+        );
+        function toPreviousCustomStep() {
+          for (let i = customSteps.length - 1; i > 0; i--) {
+            if (customSteps[i].stepType === "current") {
+              customSteps[i].stepType = customCompactStepTypes[i];
+              customSteps[i - 1].stepType = "current";
+              i--;
+            }
+          }
+          if (customSteps[customSteps.length - 2].stepType === "current") {
+            nextBtnCustomCompactStepper.setAttribute("disabled", "false");
+          }
+          if (customSteps[0].stepType === "current") {
+            backBtnCustomCompactStepper.setAttribute("disabled", "true");
+          }
+        }
+        function toNextCustomStep() {
+          for (let i = 0; i < customSteps.length - 1; i++) {
+            if (customSteps[i].stepType === "current") {
+              customSteps[i].stepType = customCompactStepTypes[i];
+              customSteps[i + 1].stepType = "current";
+              i++;
+            }
+          }
+          if (customSteps[1].stepType === "current") {
+            backBtnCustomCompactStepper.setAttribute("disabled", "false");
+          }
+          if (customSteps[customSteps.length - 1].stepType === "current") {
+            nextBtnCustomCompactStepper.setAttribute("disabled", "true");
+          }
+        }
+      </script>`,
+
+  name: "Custom compact stepper",
+};