{"size": 4248, "ext": "js", "max_stars_repo_path": "src/components/Stepper/Stepper.stories.js", "max_stars_repo_name": "lob/ui-components", "max_stars_repo_stars_event_min_datetime": "2021-07-20T21:30:26.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-16T18:31:59.000Z", "max_issues_repo_path": "src/components/Stepper/Stepper.stories.js", "max_issues_repo_name": "lob/ui-components", "max_issues_repo_issues_event_min_datetime": "2021-04-16T00:46:03.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T20:36:35.000Z", "max_forks_repo_path": "src/components/Stepper/Stepper.stories.js", "max_forks_repo_name": "lob/ui-components", "max_forks_repo_forks_event_min_datetime": "2021-08-09T15:47:52.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-14T18:59:53.000Z"}
{"max_stars_count": 6, "max_issues_count": 160, "max_forks_count": 2, "avg_line_length": 24.9882352941, "max_line_length": 180, "alphanum_fraction": 0.5539077213}
import Stepper from './Stepper.vue';
import StepperItem from './StepperItem.vue';
import mdx from './Stepper.mdx';
import { config } from 'tailwind-plugin-lob';

const { theme } = config;
const { colors } = theme;

export default {
  title: 'Components/Stepper',
  component: Stepper,
  subcomponents: { StepperItem },
  parameters: {
    docs: {
      page: mdx
    }
  },
  argTypes: {}
};

const Template = (args) => ({
  components: { Stepper, StepperItem },
  setup: () => ({ args }),
  template: `
  <div class="bg-white-300" style="padding: 2rem 0;">
    <Stepper>
      <StepperItem position="first" :finished="true" :alignment="args.alignment" :text-vertical-align="args.textVerticalAlign" backgroundColor="${colors.white['300']}">
        <div class="text-center">
          Finished
        </div>
      </StepperItem>
      <StepperItem :active="true" :alignment="args.alignment" :text-vertical-align="args.textVerticalAlign" backgroundColor="${colors.white['300']}">
        <div class="text-center">
          Active
        </div>
      </StepperItem>
      <StepperItem color="${colors.error}" :alignment="args.alignment" :text-vertical-align="args.textVerticalAlign" backgroundColor="${colors.white['300']}">
        <div class="text-center">
          Error
        </div>
      </StepperItem>
      <StepperItem position="last" color="${colors.gray['100']}" :alignment="args.alignment" :text-vertical-align="args.textVerticalAlign" backgroundColor="${colors.white['300']}">
        <div class="text-center">
          Unfinished
        </div>
      </StepperItem>
    </Stepper>
    </div>
    `
});

export const Primary = Template.bind({});
Primary.argTypes = {
  alignment: {
    options: ['left', 'center', 'right'],
    control: {
      type: 'select'
    }
  },
  textVerticalAlign: {
    options: ['bottom', 'top'],
    control: {
      type: 'select'
    }
  }
};
Primary.args = {
  alignment: 'center',
  textVerticalAlign: 'bottom'
};

const ComplexTemplate = (args) => ({
  components: { Stepper, StepperItem },
  setup: () => ({ args }),
  template: `
    <Stepper>
      <StepperItem position="first" alignment="left" color="#6db6ff" border-color="#ccc">
        <p class="font-medium mr-4">
          Mail Sent
        </p>
        <p>
          22,677 (100%)
        </p>
      </StepperItem>
      <StepperItem alignment="left" color="#185cb7" border-color="#ccc">
         <p class="font-medium mr-4">
          Mailed
        </p>
        <p>
          21,343 (97.6%)
        </p>
      </StepperItem>
      <StepperItem alignment="left" color="#db6d00" border-color="#ccc">
         <p class="font-medium mr-4">
          In Transit
        </p>
        <p>
          21,201 (96.2%)
        </p>
      </StepperItem>
      <StepperItem alignment="left" color="#009292" border-color="#ccc" :dashed-border="true">
         <p class="font-medium mr-4">
          Processed for Delivery
        </p>
        <p>
          20,334 (93.2%)
        </p>
      </StepperItem>
      <StepperItem alignment="left" color="#ffb6db" border-color="#ccc" :dashed-border="true">
         <p class="font-medium mr-4">
          Re-routed
        </p>
        <p>
          252 (0.3%)
        </p>
      </StepperItem>
      <StepperItem position="last" alignment="left" color="#920000" border-color="#ccc">
         <p class="font-medium mr-4">
          Returned to sender
        </p>
        <p>
          25 (0.0%)
        </p>
      </StepperItem>
    </Stepper>
    `
});

export const Complex = ComplexTemplate.bind({});

const ItemTemplate = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { StepperItem },
  setup: () => ({ args }),
  template: `
    <StepperItem v-bind="args">
      Some text
    </StepperItem>
    `
});

export const Item = ItemTemplate.bind({});
Item.argTypes = {
  position: {
    options: ['first', 'middle', 'last'],
    control: {
      type: 'select'
    }
  },
  alignment: {
    options: ['left', 'center', 'right'],
    control: {
      type: 'select'
    }
  },
  textVerticalAlign: {
    options: ['bottom', 'top'],
    control: {
      type: 'select'
    }
  }
};

Item.args = {
  active: true,
  finished: true,
  position: 'middle',
  dashedBorder: false
};
