@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -1,5 +1,11 @@
 import { html } from "lit-html";
 
+const defaultArgs = {
+  heading: "Create",
+  subheading: "Optional",
+  theme: "inherit",
+};
+
 export default {
   title: "Web Components/Stepper",
   component: "ic-stepper",
@@ -8,10 +14,10 @@ export default {
 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-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update" type="active"></ic-step>
+      <ic-step heading="Delete" type="disabled"></ic-step>
     </ic-stepper>`,
 
   name: "Full-width stepper",
@@ -20,10 +26,10 @@ export const FullWidthStepper = {
 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-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update" type="active"></ic-step>
+      <ic-step heading="Delete" type="disabled"></ic-step>
     </ic-stepper>`,
 
   name: "Left-aligned stepper",
@@ -32,41 +38,41 @@ export const LeftAlignedStepper = {
 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-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update" type="active"></ic-step>
+      <ic-step heading="Delete" type="disabled"></ic-step>
     </ic-stepper>`,
 
   name: "With hidden step information",
 };
 
-export const WithoutStepTitles = {
+export const WithoutHeadings = {
   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 type="completed"></ic-step>
+      <ic-step type="completed"></ic-step>
+      <ic-step type="current"></ic-step>
       <ic-step></ic-step>
     </ic-stepper>`,
 
-  name: "Without step titles",
+  name: "Without headings",
 };
 
 export const CustomStepper = {
   render: () =>
     html`<ic-stepper>
-      <ic-step step-title="First"></ic-step>
+      <ic-step heading="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"
+        heading="Second With a Very Long Title"
+        subheading="Optional subtitle that is long and should wrap"
+        type="current"
       ></ic-step>
-      <ic-step step-title="Third" step-type="disabled"></ic-step>
+      <ic-step heading="Third" type="disabled"></ic-step>
       <ic-step
-        step-title="Fourth title that is long and should wrap"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth title that is long and should wrap"
+        subheading="Optional Subtitle"
+        type="completed"
       ></ic-step>
     </ic-stepper>`,
 
@@ -76,44 +82,30 @@ export const CustomStepper = {
 export const CustomConnectorWidth = {
   render: () =>
     html`<ic-stepper aligned="left" connector-width="200">
-      <ic-step step-title="First"></ic-step>
+      <ic-step heading="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"
+        heading="Second With a Very Long Title"
+        subheading="Optional subtitle that is long and should wrap"
+        type="current"
       ></ic-step>
-      <ic-step step-title="Third" step-type="disabled"></ic-step>
+      <ic-step heading="Third" type="disabled"></ic-step>
       <ic-step
-        step-title="Fourth title that is long and should wrap"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth title that is long and should wrap"
+        subheading="Optional Subtitle"
+        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-step heading="Create"></ic-step>
+        <ic-step heading="Read" type="current"></ic-step>
+        <ic-step heading="Update" status="optional"></ic-step>
+        <ic-step heading="Delete" status="required"></ic-step>
       </ic-stepper>
       <ic-button
         class="back-btn-compact-stepper"
@@ -138,31 +130,31 @@ export const CompactStepper = {
         );
         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";
+            if (steps[i].type === "current") {
+              steps[i].type = compactStepTypes[i];
+              steps[i - 1].type = "current";
               i--;
             }
           }
-          if (steps[steps.length - 2].stepType === "current") {
+          if (steps[steps.length - 2].type === "current") {
             nextBtn.setAttribute("disabled", "false");
           }
-          if (steps[0].stepType === "current") {
+          if (steps[0].type === "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";
+            if (steps[i].type === "current") {
+              steps[i].type = compactStepTypes[i];
+              steps[i + 1].type = "current";
               i++;
             }
           }
-          if (steps[1].stepType === "current") {
+          if (steps[1].type === "current") {
             backBtn.setAttribute("disabled", "false");
           }
-          if (steps[steps.length - 1].stepType === "current") {
+          if (steps[steps.length - 1].type === "current") {
             nextBtn.setAttribute("disabled", "true");
           }
         }
@@ -171,96 +163,26 @@ export const CompactStepper = {
   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 heading="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"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
+          type="current"
         ></ic-step>
-        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step heading="Third" type="disabled"></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
-          step-type="disabled"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
+          type="disabled"
         ></ic-step>
       </ic-stepper>
       <ic-button
@@ -293,31 +215,31 @@ export const CustomCompactStepper = {
         );
         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";
+            if (customSteps[i].type === "current") {
+              customSteps[i].type = customCompactStepTypes[i];
+              customSteps[i - 1].type = "current";
               i--;
             }
           }
-          if (customSteps[customSteps.length - 2].stepType === "current") {
+          if (customSteps[customSteps.length - 2].type === "current") {
             nextBtnCustomCompactStepper.setAttribute("disabled", "false");
           }
-          if (customSteps[0].stepType === "current") {
+          if (customSteps[0].type === "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";
+            if (customSteps[i].type === "current") {
+              customSteps[i].type = customCompactStepTypes[i];
+              customSteps[i + 1].type = "current";
               i++;
             }
           }
-          if (customSteps[1].stepType === "current") {
+          if (customSteps[1].type === "current") {
             backBtnCustomCompactStepper.setAttribute("disabled", "false");
           }
-          if (customSteps[customSteps.length - 1].stepType === "current") {
+          if (customSteps[customSteps.length - 1].type === "current") {
             nextBtnCustomCompactStepper.setAttribute("disabled", "true");
           }
         }
@@ -325,3 +247,31 @@ export const CustomCompactStepper = {
 
   name: "Custom compact stepper",
 };
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-stepper theme=${args.theme}>
+      <ic-step
+        heading=${args.heading}
+        subheading=${args.subheading}
+        type="completed"
+      ></ic-step>
+      <ic-step heading="Read" type="current" subheading="Optional"></ic-step>
+      <ic-step heading="Update" type="active"></ic-step>
+      <ic-step heading="Delete" type="disabled" subheading="Optional"></ic-step>
+    </ic-stepper>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-stepper/test/basic/ic-stepper-test-examples.js

@@ -1,74 +1,74 @@
 export const defaultStepper = `
     <ic-stepper>
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-        step-title="Second With a Very Long Title"
-        step-subtitle="Optional Subtitle"
-        step-type="current"
+        heading="Second With a Very Long Title"
+        subheading="Optional Subtitle"
+        type="current"
         ></ic-step>
-        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step heading="Third" type="disabled"></ic-step>
         <ic-step
-        step-title="Fourth"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth"
+        subheading="Optional Subtitle"
+        type="completed"
         ></ic-step>
     </ic-stepper>`;
 export const customConnectorWidthStepper = `
     <ic-stepper aligned="left" connector-width="150">
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-        step-title="Second With a Very Long Title"
-        step-subtitle="Optional Subtitle"
-        step-type="current"
+        heading="Second With a Very Long Title"
+        subheading="Optional Subtitle"
+        type="current"
         ></ic-step>
-        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step heading="Third" type="disabled"></ic-step>
         <ic-step
-        step-title="Fourth"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth"
+        subheading="Optional Subtitle"
+        type="completed"
         ></ic-step>
     </ic-stepper>`;
 export const invalidConnectorWidthStepper = `
     <ic-stepper aligned="left" connector-width="96">
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-        step-title="Second With a Very Long Title"
-        step-subtitle="Optional Subtitle"
-        step-type="current"
+        heading="Second With a Very Long Title"
+        subheading="Optional Subtitle"
+        type="current"
         ></ic-step>
-        <ic-step step-title="Third" step-type="disabled"></ic-step>
+        <ic-step heading="Third" type="disabled"></ic-step>
         <ic-step
-        step-title="Fourth"
-        step-subtitle="Optional Subtitle"
-        step-type="completed"
+        heading="Fourth"
+        subheading="Optional Subtitle"
+        type="completed"
         ></ic-step>
     </ic-stepper>`;
 export const compactStepper = `
     <ic-stepper variant="compact" id="custom-compact-stepper">
         <ic-step 
-        step-title="First"
+        heading="First"
         ></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
           icon
-          step-status="optional"
-          step-type="completed"
+          status="optional"
+          type="completed"
         ></ic-step>
       </ic-stepper>`;
 //# sourceMappingURL=ic-stepper-test-examples.js.map

package/dist/collection/components/ic-stepper/test/basic/ic-stepper-test-examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-stepper-test-examples.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;kBAcZ,CAAC;AAEnB,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;kBAczB,CAAC;AAEnB,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;kBAc1B,CAAC;AAEnB,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2BV,CAAC","sourcesContent":["export const defaultStepper = `\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const customConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const invalidConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const compactStepper = `\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`;\n"]}
+{"version":3,"file":"ic-stepper-test-examples.js","sourceRoot":"","sources":["../../../../../src/components/ic-stepper/test/basic/ic-stepper-test-examples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;kBAcZ,CAAC;AAEnB,MAAM,CAAC,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;kBAczB,CAAC;AAEnB,MAAM,CAAC,MAAM,4BAA4B,GAAG;;;;;;;;;;;;;;kBAc1B,CAAC;AAEnB,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2BV,CAAC","sourcesContent":["export const defaultStepper = `\n    <ic-stepper>\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const customConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const invalidConnectorWidthStepper = `\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>`;\n\nexport const compactStepper = `\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        heading=\"First\"\n        ></ic-step>\n        <ic-step\n          heading=\"Second With a Very Long Title\"\n          subheading=\"Optional subtitle that is long and should wrap\"\n          current\n          type=\"current\"\n        ></ic-step>\n        <ic-step\n          heading=\"Third\"\n          type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fourth title that is long and should wrap\"\n          subheading=\"Optional Subtitle\"\n          type=\"completed\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fifth and final step\"\n          subheading=\"Optional Subtitle\"\n          icon\n          status=\"optional\"\n          type=\"completed\"\n        ></ic-step>\n      </ic-stepper>`;\n"]}