@progressive-development/pd-wizard 0.0.13 → 0.0.14

package/package.json

@@ -14,7 +14,7 @@
     "order",
     "steps"
   ],
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "lit": "^2.0.2",
-    "@progressive-development/pd-forms": "0.0.16"
+    "@progressive-development/pd-forms": "0.0.17"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/stories/steps.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+import '../src/PdSteps.js';
+
+export default {
+  title: 'Squi-Components/UI/Steps',
+  component: 'squi-steps',
+  argTypes: {
+    
+  },
+};
+
+function StepsTemplate({ steps, currentStepNr, styleTyp }) {
+  return html`
+    <squi-steps currentStepNr="${currentStepNr}" .steps="${steps}" styleTyp=${styleTyp}>      
+      </squi-steps>
+  `;
+}
+
+export const CircleNumber = StepsTemplate.bind({});
+CircleNumber.args = {
+  steps: [{name: 'Step 1'}, {name: 'Step 2'}, {name: 'Step 3'}, {name: 'Step 4'}],
+  currentStepNr: 2,
+  styleTyp: 'circle'
+};
+
+export const TabStyle = StepsTemplate.bind({});
+TabStyle.args = {
+  steps: [{name: 'Repair'}, {name: 'Billing'}],
+  currentStepNr: 1,
+  styleTyp: 'tab'
+};
+

package/stories/wizard.stories.js

@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import '../pd-wizard.js';
+
+export default {
+  title: 'PdWizard/Wizard',
+  component: 'pd-wizard',
+  argTypes: {},
+};
+
+function WizardTemplate({ wizardSteps, currentNumber }) {
+  return html`
+    <pd-wizard
+      id="wizardId"
+      .wizardSteps="${wizardSteps}"
+      currentNumber="${currentNumber}"
+    >
+      <div slot="step-1">Test 1</div>
+      <div slot="step-2">Test 2</div>
+      <div slot="step-3">Test 3</div>
+      <div slot="step-4">Test 4</div>
+    </pd-wizard>
+  `;
+}
+
+export const Wizard = WizardTemplate.bind({});
+Wizard.args = {
+  wizardSteps: [
+    { title: 'Step 1', name: 'Step 1' },
+    { title: 'Maintenance Bronze', name: 'Step 2' },
+    { title: 'Step 3', name: 'Step 3' },
+    { title: 'Step 4', name: 'Step 4' },
+  ],
+  currentNumber: 2,
+};