@storybook/addon-knobs#radios JavaScript Examples

Basic = () => {
  const variantOptions = {
    text: "text",
    password: "password",
    textarea: "textarea",
  };
  const variantDefaultValue = "text";

  const inputProps = {
    inputType: radios("Input Type", variantOptions, variantDefaultValue),
    label: text("Label", "This is input label"),
    dataId: text("Data id", "input-data-id"),
    inputName: text("Name", "input-name"),
  };
  return <Input {...inputProps} />;
}

WithKnobs = () => ({
  components: { BaseWizard, BaseCard, TypeBody, TypeHeading },
  setup() {
    const cards = [
      {
        id: '1',
        parentId: '',
        title: 'some Title',
        label: 'Section 1',
        component: 'hello',
        completed: false,
      },
      {
        id: '2',
        parentId: '1',
        title: 'Sub step of section 1',
        label: 'Sub step of section 1',
        completed: true,
      },
      {
        id: '3',
        parentId: '1',
        title: 'Sub step of section 1',
        label: 'Section 2',
        completed: true,
      },
      {
        id: '4',
        title: 'some Title',
        parentId: '',
        label: 'Section 2',
        completed: true,
      },
      {
        id: '5',
        title: 'some Title',
        parentId: '',
        label: 'Section 3',
        completed: true,
      },
    ];

    const currentStep = ref(cards[0]);
    const isFirstStep = computed(() => currentStep.value === cards[0]);
    const isLastStep = computed(
      () => currentStep.value === cards[cards.length - 1]
    );

    const handleComplete = (res) => {
      action(`completed clicked`)(res);
    };

    const handleNext = (next) => {
      if (next) {
        currentStep.value = next;
      }
    };

    const handlePrevious = (previous) => {
      if (previous) {
        currentStep.value = previous;
      }
    };

    return {
      cards,
      currentStep,
      handleComplete,
      handleNext,
      handlePrevious,
      isFirstStep,
      isLastStep,
    };
  },
  props: {
    isLoading: {
      type: Boolean,
      default: boolean('isLoading', false),
    },
    /**
     * This will act as a screen takeover, making an emersive experience
     */
    fullScreen: {
      type: Boolean,
      default: boolean('fullScreen', false),
    },
    showFooter: {
      type: Boolean,
      default: boolean('showFooter', true),
    },
    showProgress: {
      type: Boolean,
      default: boolean('showProgress', true),
    },
    title: {
      type: String,
      default: text('title', 'Some awesome title'),
    },
    layout: {
      type: String,
      default: radios(
        'layout',
        { vertical: 'vertical', horizontal: 'horizontal' },
        'vertical'
      ),
    },
    /**
     * An Object[] that will set the stage for the wizard. This list will:
     * - Generate the progress stepper/bar
     * - Be used to track state (first, last, etc)
     * - Control meta data like Progress label
     *
     * The shape should be as follows:
     * - `progressLabel`- Optional. When present, labels will appear in the ProgressStepper
     */
    steps: {
      type: Array,
      default: () => [],
    },
    compact: {
      type: Boolean,
      default: boolean('compact', false),
    },
    isComplete: {
      type: Boolean,
      default: boolean('isComplete', false),
    },
  },
  template: `
  <BaseWizard
    :show-progress="showProgress"
    :show-footer="showFooter"
    :steps="cards"
    :title="title"
    :layout="layout"
    :is-last-step="isLastStep"
    :is-first-step="isFirstStep"
    :full-screen="fullScreen"
    :current-step="currentStep"
    :is-complete="isComplete"
    :is-loading="isLoading"
    :compact="compact"
    @complete="handleComplete"
    @next="handleNext"
    @previous="handlePrevious"
    >
    <div class="flex-1 p-6 bg-gray-7 overflow-y-auto">
      <div class="mx-auto max-w-5xl">
        <BaseCard>
          <div class="space-y-6">
          <TypeHeading variant="title" tag="div">
          {{ currentStep.title }}
          </TypeHeading>
          <TypeHeading tag="div">
              <div v-if="isFirstStep">This is the First Card!!!!</div>
              <div v-if="isLastStep">LAST CARD</div>
          </TypeHeading>
          <TypeBody tag="div">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet
              velit assumenda iusto, ab explicabo numquam, ipsam molestias nostrum
              voluptate tempora odio dolorum ut, consectetur minima incidunt fuga
              voluptates error in?
          </TypeBody>
          </div>
        </BaseCard>
      </div>
    </div>
    </BaseWizard>
  `,
})