{% stories Accordion with {
  "title": "Molecules/Accordion",
  "parameters": {
    "componentSubtitle": "Bootstrap Accordion Item Component",
    "docs": {
      "description": {
        "component": "An accordion item component with accordion header and accordion body."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "title": {
      "name": "Title",
      "description": "Unique ID for the accordion component.",
      "defaultValue": "",
      "control": "text"
    },
    "title_tag": {
      "name": "Title tag",
      "description": "The HTML (h1, h2, h3, h4, h5, or h6) title of the accordion tag.",
      "defaultValue": "h2",
      "control": "select",
      "options": {
        "h1": "h1",
        "h2": "h2",
        "h3": "h3",
        "h4": "h4",
        "h5": "h5",
        "h6": "h6"
      }
    },
    "accordion_id": {
      "name": "Accordion ID",
      "description": "Unique ID for the accordion component.",
      "defaultValue": "",
      "control": "text"
    },
    "header_tag": {
      "name": "Header tag",
      "description": "The HTML (h1, h2, h3, h4, h5, or h6) header tag of the accordion items.",
      "defaultValue": "h4",
      "control": "select",
      "options": {
        "h1": "h1",
        "h2": "h2",
        "h3": "h3",
        "h4": "h4",
        "h5": "h5",
        "h6": "h6"
      }
    },
    "items": {
      "name": "Items",
      "description": "An array of accordion items inside the accordion. Each accordion item is an object that has (header, body) slots, with (id, header_tag, collapse, expanded, accordion_item_utility_classes, accordion_item_header_utility_classes, accordion_item_body_utility_classes, attributes, header_attributes, body_attributes) properties.",
      "control": "object",
      "defaultValue": []
    },
    "expanded_item_index": {
      "name": "Expanded item index",
      "description": "The index of the accordion item which is opened by default. (0 = no item, 1 = first item, 2 = second item)",
      "defaultValue": 0,
      "control": "number",
      "min": 0,
      "max": 1000,
      "step": 1
    },
    "toggle_all": {
      "name": "Show Toggle All",
      "description": "Have an expand all or collapse all option as [expand all] or [collapse all]",
      "defaultValue": true,
      "control": "boolean"
    },
    "flush": {
      "name": "Flush",
      "description": "True if the accordion has no background color or borders.",
      "defaultValue": true,
      "control": "boolean"
    },
    "accordion_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 the root accordion wrapper.",
      "control": "object",
      "defaultValue": []
    },
    "accordion_title_utility_classes": {
      "name": "Title Utility Classes",
      "description": "An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to the title element.",
      "control": "object",
      "defaultValue": []
    },
    "attributes": {
      "name": "Attributes",
      "description": "HTML attributes for the root accordion wrapper element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}

{% story AccordionAllCollapsed with {
  "name": "Accordion - All collapsed",
  "args": {
    "title": "Lorem Ipsum Dolor Sit Amet",
    "title_tag": "h2",
    "accordion_id": "accordion-test",
    "header_tag": "h4",
    "items": [
      {
        "item_id": "item-1",
        "header": "Accordion header",
        "body": "This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "item_id": "item-2",
        "header": "Accordion header",
        "body": "This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "item_id": "item-3",
        "header": "Accordion header",
        "body": "This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "item_id": "item-3",
        "header": "Accordion header",
        "body": "This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      }
    ],
    "toggle_all": false,
    "flush": false,
    "accordion_utility_classes": [],
    "accordion_title_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:accordion') }}
{% endstory %}


{% story AccordionAllExpanded with {
  "name": "Accordion - All expanded",
  "args": {
    "header_tag": "h4",
    "items": [
      {
        "header": "Accordion header",
        "body": "This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.",
        "collapsable": true,
        "expanded": true
      },
      {
        "header": "Accordion header",
        "body": "This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.",
        "collapsable": true,
        "expanded": true
      },
      {
        "header": "Accordion header",
        "body": "This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.",
        "collapsable": true,
        "expanded": true
      },
      {
        "header": "Accordion header",
        "body": "This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.",
        "collapsable": true,
        "expanded": true
      }
    ],
    "expanded_item_index": 0,
    "toggle_all": false,
    "flush": false,
    "accordion_utility_classes": [],
    "accordion_title_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:accordion') }}
{% endstory %}


{% story Accordion2ndItemExpanded with {
  "name": "Accordion - 2nd item expanded",
  "args": {
    "header_tag": "h4",

    "items": [
      {
        "header": "Accordion header",
        "body": "This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "header": "Accordion header",
        "body": "This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "header": "Accordion header",
        "body": "This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "header": "Accordion header",
        "body": "This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      }
    ],
    "expanded_item_index": 2,
    "toggle_all": false,
    "flush": false,
    "accordion_utility_classes": [],
    "accordion_title_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:accordion') }}
{% endstory %}


{% story AccordionShowToggleAll with {
  "name": "Accordion - Show Toggle All",
  "args": {
    "title": "Lorem Ipsum Dolor Sit Amet",
    "title_tag": "h2",
    "accordion_id": "accordion-test",
    "header_tag": "h4",
    "items": [
      {
        "header": "Accordion header",
        "body": "This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "header": "Accordion header",
        "body": "This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "header": "Accordion header",
        "body": "This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      },
      {
        "header": "Accordion header",
        "body": "This is the fourth item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow."
      }
    ],
    "toggle_all": true,
    "flush": false,
    "accordion_utility_classes": [],
    "accordion_title_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:accordion') }}
{% endstory %}


{% endstories %}
