{% stories Image with {
  "title": "Atoms/Input",
  "parameters": {
    "componentSubtitle": "Bootstrap Input form control component",
    "docs": {
      "description": {
        "component": "Textual form controls `<input>`s an upgrade with custom styles, sizing, focus states, and more."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "type": {
      "name": "HTML Input Type",
      "description": "Specifies the type `<input>` element to display",
      "defaultValue": "text",
      "control": "select",
      "options": {
        "Button": "button",
        "Checkbox": "checkbox",
        "Color": "color",
        "Date": "date",
        "Datetime": "datetime-local",
        "Email": "email",
        "File": "file",
        "hidden": "hidden",
        "Image": "image",
        "Month": "month",
        "Number": "number",
        "Password": "password",
        "Radio": "radio",
        "Range": "range",
        "Reset": "reset",
        "Search": "search",
        "Submit": "submit",
        "Tel": "tel",
        "Text": "text",
        "Time": "time",
        "Url": "url",
        "Week": "week"
      }
    },
    "value": {
      "name": "Input value",
      "defaultValue": "",
      "control": "text"
    },
    "bs_form_control": {
      "name": "Bootstrap Form Control",
      "description": "Has Bootstrap Form Control class",
      "defaultValue": false,
      "control": "boolean"
    },
    "bs_size": {
      "name": "Bootstrap Size",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Small": "form-control-sm",
        "large": "form-control-lg"
      }
    },
    "placeholder": {
      "name": "Placeholder",
      "description": "The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format).",
      "defaultValue": "",
      "control": "text"
    },
    "children": {
      "name": "children",
      "defaultValue": "",
      "control": "text"
    },
    "input_utility_classes": {
      "name": "Utility Classes",
      "description": "An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.",
      "control": "object",
      "defaultValue": []
    },
    "attributes": {
      "name": "Attributes",
      "description": "HTML attributes for the containing element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}

{% story InputText with {
  "name": "Input Text",
  "args": {
    "type": "text",
    "value": "Example text",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "Example text",
    "children": " Example input text element",
    "input_utility_classes": ['w-50']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputButton with {
  "name": "Input Button",
  "args": {
    "type": "button",
    "value": "Example button",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": "",
    "input_utility_classes": ['btn', 'btn-primary']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputCheckbox with {
  "name": "Input Checkbox",
  "args": {
    "type": "checkbox",
    "value": "",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input Checkbox element",
    "input_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputColor with {
  "name": "Input Color",
  "args": {
    "type": "color",
    "value": "#008ecf",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": " Select input Color element",
    "input_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputEmail with {
  "name": "Input Email",
  "args": {
    "type": "email",
    "value": "example@email.com",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "example@email.com",
    "children": " Example input Email element",
    "input_utility_classes": ['w-50']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputFile with {
  "name": "Input File",
  "args": {
    "type": "file",
    "value": "",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "Example File",
    "children": "Example input File element",
    "input_utility_classes": ['w-50']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputHidden with {
  "name": "Input Hidden",
  "args": {
    "type": "hidden",
    "value": "Example hidden value",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": "Example input hidden element, inspect HTML code to see the code for it",
    "input_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputImage with {
      "name": "Input Image",
      "args": {
        "type": "image",
        "value": "",
        "bs_form_control": true,
        "bs_size": "",
        "placeholder": "",
        "children": " Example input Image element as a submit button",
        "input_utility_classes": ['w-25'],
        "attributes": {
          "src": "https://git.drupalcode.org/project/vartheme_bs5/-/raw/3.0.x/images/social_auth/social_auth_google/img/google_logo.svg",
          "alt": "Submit to Google",
          "width": "50",
          "height": "50"
        }
      }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputNumber with {
  "name": "Input Number",
  "args": {
    "type": "number",
    "value": "",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "Input numbers only",
    "children": " Example input number element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputPassword with {
  "name": "Input Password",
  "args": {
    "type": "password",
    "value": "",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "Type a password",
    "children": " Example input password element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputRadio with {
  "name": "Input Radio",
  "args": {
    "type": "radio",
    "value": "Example Radio",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input radio button element",
    "input_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputRange with {
  "name": "Input Range",
  "args": {
    "type": "range",
    "value": "",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input range element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputReset with {
  "name": "Input Reset",
  "args": {
    "type": "reset",
    "value": "Reset",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input reset button element",
    "input_utility_classes": ['btn', 'btn-primary']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputSearch with {
  "name": "Input Search",
  "args": {
    "type": "search",
    "value": "Search",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input search button element",
    "input_utility_classes": ['btn', 'btn-primary']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputSubmit with {
  "name": "Input Submit",
  "args": {
    "type": "submit",
    "value": "Submit",
    "bs_form_control": false,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input Submit button element",
    "input_utility_classes": ['btn', 'btn-primary']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputTelephone with {
  "name": "Input Telephone",
  "args": {
    "type": "tel",
    "value": "",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input Telephone number element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputTime with {
  "name": "Input Time",
  "args": {
    "type": "time",
    "value": "",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input time element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputUrl with {
  "name": "Input URL",
  "args": {
    "type": "url",
    "value": "https://vardot.com",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "Input a link",
    "children": " Example input URL link element",
    "input_utility_classes": ['w-50']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputWeek with {
  "name": "Input Week",
  "args": {
    "type": "week",
    "value": "",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input Week element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputMonth with {
  "name": "Input Month",
  "args": {
    "type": "month",
    "value": "",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input Month input element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputDate with {
  "name": "Input Date",
  "args": {
    "type": "date",
    "value": "07/04/2023",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input Date element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% story InputDatetimeLocal with {
  "name": "Input Datetime local",
  "args": {
    "type": "datetime-local",
    "value": "07/04/2023 02:52 PM",
    "bs_form_control": true,
    "bs_size": "",
    "placeholder": "",
    "children": " Example input Datetime local element",
    "input_utility_classes": ['w-25']
  }
} %}
{{ include('vartheme_bs5:input') }}
{% endstory %}

{% endstories %}
