{% stories Textarea with {
  "title": "Atoms/Textarea",
  "parameters": {
    "componentSubtitle": "Bootstrap Textarea Component",
    "docs": {
      "description": {
        "component": "Textarea type form element."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "resizable": {
      "name": "Resizable",
      "description": "An indicator for whether the text area is resizable.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "'- empty -'": "",
        "None": "none",
        "Vertical": "vertical",
        "Horizontal": "horizontal",
        "Both": "both"
      }
    },
    "required": {
      "name": "Required",
      "description": "An indicator for whether the text area is required.",
      "control": "boolean",
      "defaultValue": false
    },
    "value": {
      "name": "Value",
      "description": "The text area content.",
      "control": "text"
    },
    "rows": {
      "name": "Rows",
      "description": "Specifies the number of visible text lines.",
      "control": "number",
      "min": 1,
      "step": 1
    },
    "cols": {
      "name": "Cols",
      "description": "Specifies the visible width in average character widths.",
      "control": "number",
      "min": 1,
      "step": 1
    },
    "placeholder": {
      "name": "Placeholder",
      "description": "Specifies a short hint that describes the expected value of a text area.",
      "control": "text"
    },
    "maxlength": {
      "name": "Max Length",
      "description": "Specifies the maximum length (in characters) of a text area. By default, the maximum is 524,288 characters.",
      "control": "number",
      "min": 1,
      "max": 524288,
      "step": 1
    },
    "readonly": {
      "name": "Read Only",
      "description": "Specifies whether the control may be modified by the user.",
      "defaultValue": false,
      "control": "boolean"
    },
    "disabled": {
      "name": "Disabled",
      "description": "Disables the control for user input.",
      "defaultValue": false,
      "control": "boolean"
    },
    "wrapper_html_tag": {
      "name": "Wrapper HTML tag",
      "description": "The HTML tag for the wrapper.",
      "control": "select",
      "defaultValue": "div",
      "options": {
        "'- empty -'": "",
        "div": "div",
        "span": "span"
      }
    },
    "wrapper_utility_classes": {
      "name": "Wrapper utility classes",
      "description": "An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over the wrapper div to this component.",
      "control": "object",
      "defaultValue": []
    },
    "textarea_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": []
    },
    "wrapper_attributes": {
      "name": "Wrapper Attributes",
      "description": "HTML attributes for the wrapper element.",
      "control": "object",
      "defaultValue": {}
    },
    "attributes": {
      "name": "Attributes",
      "description": "HTML attributes for the containing element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}


{% story Textarea with {
  "name": "Textarea",
  "args": {
    "resizable": "",
    "required": false,
    "value": "Vivamus hendrerit est sit amet vehicula tempus. Fusce non sollicitudin massa. Nam sollicitudin mollis ullamcorper.",
    "rows": 5,
    "cols": 80,
    "maxlength": 300,
    "placeholder": "Type test in this text area",
    "readonly": false,
    "disabled": false,
    "wrapper_html_tag": "div",
    "wrapper_utility_classes": [],
    "textarea_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:textarea') }}
{% endstory %}


{% story TextareaResizeBoth with {
  "name": "Textarea - Resize both",
  "args": {
    "resizable": "both",
    "required": true,
    "value": "Vivamus hendrerit est sit amet vehicula tempus. Fusce non sollicitudin massa. Nam sollicitudin mollis ullamcorper.",
    "rows": 5,
    "cols": 80,
    "maxlength": 300,
    "placeholder": "Type test in this text area",
    "readonly": false,
    "disabled": false,
    "wrapper_html_tag": "div",
    "wrapper_utility_classes": [],
    "textarea_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:textarea') }}
{% endstory %}


{% story TextareaDisabled with {
  "name": "Textarea - Disabled",
  "args": {
    "resizable": "",
    "required": true,
    "value": "Vivamus hendrerit est sit amet vehicula tempus. Fusce non sollicitudin massa. Nam sollicitudin mollis ullamcorper.",
    "rows": 5,
    "cols": 80,
    "maxlength": 300,
    "placeholder": "Type test in this text area",
    "readonly": false,
    "disabled": true,
    "wrapper_html_tag": "div",
    "wrapper_utility_classes": [],
    "textarea_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:textarea') }}
{% endstory %}


{% story TextareaValid with {
  "name": "Textarea - Valid",
  "args": {
    "resizable": "",
    "required": true,
    "value": "Vivamus hendrerit est sit amet vehicula tempus. Fusce non sollicitudin massa. Nam sollicitudin mollis ullamcorper.",
    "rows": 5,
    "cols": 80,
    "maxlength": 300,
    "placeholder": "Type test in this text area",
    "readonly": false,
    "disabled": false,
    "wrapper_html_tag": "div",
    "wrapper_utility_classes": [],
    "textarea_utility_classes": ['is-valid']
  }
} %}
{{ include('vartheme_bs5:textarea') }}
{% endstory %}


{% story TextareaInvalid with {
  "name": "Textarea - Invalid",
  "args": {
    "resizable": "",
    "required": true,
    "value": "",
    "rows": 5,
    "cols": 80,
    "maxlength": 100,
    "placeholder": "This field is required and has no text in the text area",
    "readonly": false,
    "disabled": false,
    "wrapper_html_tag": "div",
    "wrapper_utility_classes": [],
    "textarea_utility_classes": ['is-invalid']
  }
} %}
{{ include('vartheme_bs5:textarea') }}
{% endstory %}

{% endstories %}
