footer& step stories

Author: TheSonOfThomp

packages/wizard/src/WizardFooter/WizardFooter.stories.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import {
+  storybookArgTypes,
+  StoryMetaType,
+  StoryType,
+} from '@lg-tools/storybook-utils';
+
+import { WizardFooter } from '.';
+
+const meta: StoryMetaType<typeof WizardFooter> = {
+  title: 'Components/Wizard/WizardFooter',
+  component: WizardFooter,
+  parameters: {
+    default: 'LiveExample',
+  },
+  argTypes: {
+    backButtonProps: { control: 'object' },
+    cancelButtonProps: { control: 'object' },
+    primaryButtonProps: { control: 'object' },
+    activeStep: { control: 'number' },
+    totalSteps: { control: 'number' },
+    onStepChange: storybookArgTypes.func,
+    isControlled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+const Template: StoryType<typeof WizardFooter> = args => {
+  const [step, setStep] = useState(args.activeStep || 0);
+
+  return (
+    <WizardFooter
+      {...args}
+      activeStep={step}
+      onStepChange={newStep => {
+        setStep(newStep);
+        args.onStepChange?.(newStep);
+      }}
+    />
+  );
+};
+
+export const LiveExample = Template.bind({});
+LiveExample.args = {
+  activeStep: 1,
+  totalSteps: 3,
+  backButtonProps: {
+    children: 'Back',
+  },
+  cancelButtonProps: {
+    children: 'Cancel',
+  },
+  primaryButtonProps: {
+    children: 'Next',
+    variant: 'primary',
+  },
+};
+
+export const FirstStep = Template.bind({});
+FirstStep.args = {
+  activeStep: 0,
+  totalSteps: 3,
+  cancelButtonProps: {
+    children: 'Cancel',
+  },
+  primaryButtonProps: {
+    children: 'Get Started',
+    variant: 'primary',
+  },
+};
+
+export const LastStep = Template.bind({});
+LastStep.args = {
+  activeStep: 2,
+  totalSteps: 3,
+  backButtonProps: {
+    children: 'Back',
+  },
+  cancelButtonProps: {
+    children: 'Cancel',
+  },
+  primaryButtonProps: {
+    children: 'Finish',
+    variant: 'primary',
+  },
+};
+
+export const DangerousAction = Template.bind({});
+DangerousAction.args = {
+  activeStep: 1,
+  totalSteps: 2,
+  backButtonProps: {
+    children: 'Back',
+  },
+  cancelButtonProps: {
+    children: 'Cancel',
+  },
+  primaryButtonProps: {
+    children: 'Delete Resource',
+    variant: 'danger',
+  },
+};
+
+export const WithCustomHandlers = Template.bind({});
+WithCustomHandlers.args = {
+  activeStep: 1,
+  totalSteps: 3,
+  backButtonProps: {
+    children: 'Go Back',
+    onClick: () => alert('Custom back handler'),
+  },
+  cancelButtonProps: {
+    children: 'Exit',
+    onClick: () => alert('Custom cancel handler'),
+  },
+  primaryButtonProps: {
+    children: 'Continue',
+    variant: 'primary',
+    onClick: () => alert('Custom primary handler'),
+  },
+};
+
+export const MinimalFooter = Template.bind({});
+MinimalFooter.args = {
+  activeStep: 0,
+  totalSteps: 1,
+  primaryButtonProps: {
+    children: 'Done',
+    variant: 'primary',
+  },
+};

packages/wizard/src/WizardStep/WizardStep.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  storybookArgTypes,
+  StoryMetaType,
+  StoryType,
+} from '@lg-tools/storybook-utils';
+
+import { WizardStep } from '.';
+
+const meta: StoryMetaType<typeof WizardStep> = {
+  title: 'Components/Wizard/WizardStep',
+  component: WizardStep,
+  parameters: {
+    default: 'LiveExample',
+  },
+  argTypes: {
+    title: storybookArgTypes.children,
+    description: storybookArgTypes.children,
+    children: storybookArgTypes.children,
+  },
+};
+
+export default meta;
+
+const Template: StoryType<typeof WizardStep> = args => <WizardStep {...args} />;
+
+export const LiveExample = Template.bind({});
+LiveExample.args = {
+  title: 'Step 1: Basic Information',
+  description: 'Please provide your basic information to get started.',
+  children: (
+    <div>
+      <p>This is the content of the step.</p>
+      <p>You can include forms, instructions, or any other content here.</p>
+    </div>
+  ),
+};
+
+export const WithLongDescription = Template.bind({});
+WithLongDescription.args = {
+  title: 'Step 2: Detailed Configuration',
+  description: (
+    <div>
+      <p>
+        This step involves more complex configuration options. Please read
+        carefully before proceeding.
+      </p>
+      <ul>
+        <li>Configure your primary settings</li>
+        <li>Set up your preferences</li>
+        <li>Review the terms and conditions</li>
+      </ul>
+    </div>
+  ),
+  children: (
+    <div>
+      <p>Complex form content would go here...</p>
+      <button type="button">Sample Button</button>
+    </div>
+  ),
+};
+
+export const MinimalStep = Template.bind({});
+MinimalStep.args = {
+  title: 'Final Step',
+  description: 'Review and submit.',
+  children: <p>Simple content for the final step.</p>,
+};
+
+export const WithoutDescription = Template.bind({});
+WithoutDescription.args = {
+  title: 'Step Without Description',
+  children: (
+    <div>
+      <p>This step doesn&apos;t have a description.</p>
+      <p>Sometimes you may want to omit the description for simpler steps.</p>
+    </div>
+  ),
+};