ihk24/gfi-ihk-2024/stories/components/form-element/FormElement.stories.js

import {createFormElement} from "./FormElementComponent";

export default {
  title: 'Components/Form Element',
  args: {
    inputType: 'text',
  },
  argTypes: {
    inputType: {
      control: 'select',
      options: ['text', 'checkbox', 'radio', 'select', 'password', 'textarea'],
    }
  }
}

const Template = ({...args}) => {
  return createFormElement({...args});
};

export const TextFormElement = Template.bind({});
TextFormElement.args = {
  placeholder: 'Platzhalter',
};

export const CheckboxFormElement = Template.bind({});
CheckboxFormElement.args = {
  inputType: 'checkbox',
  label: 'Ich akzeptiere die <a href="#">Datenschutzbestimmungen</a>.',
};

export const RadioFormElement = Template.bind({});
RadioFormElement.args = {
  inputType: 'radio',
  label: 'Option 1',
};

export const SelectFormElement = Template.bind({});
SelectFormElement.args = {
  inputType: 'select',
  label: 'Auswahl',
};

export const TextareaFormElement = Template.bind({});
TextareaFormElement.args = {
  inputType: 'textarea',
  label: 'Ihre Nachricht',
};