{% stories Heroslider with {
  "title": "Organisms/Heroslider",
  "parameters": {
    "componentSubtitle": "Bootstrap heroslider component",
    "docs": {
      "description": {
        "component": "A slideshow component for cycling through elements images/media or slides of text—like a heroslider."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "id": {
      "name": "Hero Slider ID",
      "description": "Set a unique id on the heroslider for optional controls, especially if the single page is using multiple hero sliders.",
      "control": "text",
      "defaultValue": ""
    },
    "items": {
      "name": "Items",
      "description": "An array of slider items, Each item has (caption, slide, text)",
      "control": "object",
      "defaultValue": []
    },
    "controls": {
      "name": "Controls",
      "description": "Add the previous/next controls.",
      "control": "boolean",
      "defaultValue": true
    },
    "indicators": {
      "name": "Indicators",
      "description": "Add indicators to the heroslider, alongside the previous/next controls.",
      "control": "boolean",
      "defaultValue": true
    },
    "controls_indicators_position": {
      "name": "Media position",
      "description": "Choose the location of the media from (overlay|start|end|top|bottom).",
      "control": "select",
      "defaultValue": "overlay",
      "options": {
        "' - none - '": "",
        "Overlay": "overlay",
        "Start": "start",
        "End": "end",
        "Top": "top",
        "Bottom": "bottom"
      }
    },
    "interval": {
      "name": "Interval",
      "description": "The amount of time to delay between automatically cycling an item.",
      "control": "number",
      "defaultValue": 5000
    },
    "keyboard": {
      "name": "Keyboard",
      "description": "Whether the carousel should react to keyboard events.",
      "control": "boolean",
      "defaultValue": true
    },
    "pause": {
      "name": "Pause",
      "description": "If set to `hover`, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t pause it. On touch-enabled devices, when set to `hover`, cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "False": "false",
        "True": "true",
        "Hover": "hover"
      }
    },
    "ride": {
      "name": "Ride",
      "description": "If set to `true`, autoplays the carousel after the user manually cycles the first item. If set to `carousel`, autoplays the carousel on load.",
      "control": "select",
      "defaultValue": "",
      "options": {
        "' - none - '": "",
        "False": "false",
        "True": "true",
        "Carousel": "carousel"
      }
    },
    "touch": {
      "name": "Touch",
      "description": "Whether the carousel should support left/right swipe interactions on touchscreen devices.",
      "control": "boolean",
      "defaultValue": true
    },
    "wrap": {
      "name": "Wrap",
      "description": "Whether the carousel should cycle continuously or have hard stops.",
      "control": "boolean",
      "defaultValue": true
    },
    "heroslider_utility_classes": {
      "name": "Utility Classes",
      "description": "An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the heroslider element.",
      "control": "object",
      "defaultValue": []
    },
    "heroslider_indicators_utility_classes": {
      "name": "Indicators Utility Classes",
      "description": "An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the indicators element.",
      "control": "object",
      "defaultValue": []
    },
    "attributes": {
      "name": "Attributes",
      "description": "HTML attributes to apply to the heroslider main wrapper tag.",
      "control": "object",
      "defaultValue": {}
    },
    "indicators_attributes": {
      "name": "Indicators Attributes",
      "description": "HTML attributes to apply to the indicators wrapper tag.",
      "control": "object",
      "defaultValue": {}
    },
    "empty": {
      "name": "Empty",
      "description": "The HTML message when the Hero Slider has no slides",
      "control": "text",
      "defaultValue": ""
    }
  }
} %}


{% story HeroSliderThreeSlides with {
  "name": "Hero Slider - Three Slides",
  "args": {
    "id": "test-heroslider-with-3-slides",
    "controls": true,
    "indicators": true,
    "controls_indicators_position": "overlay",
    "interval": 5000,
    "keyboard": true,
    "pause": "hover",
    "ride": "carousel",
    "touch": true,
    "wrap": true,
    "items": [
      {"'#markup'": "<div class=\"card varbase-hero-card clearfix border-0\"> <div class=\"media media--type-image media--view-mode-varbase-heroslider ds-1col clearfix\"> <div class=\"vw-100 varbase-video-player ratio ratio-16x9\"> <div class=\"drimage\" data-w=\"2600\" data-h=\"1463\"><picture><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\" width=\"16\" height=\"9\" loading=\"lazy\"></picture></div><noscript><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></noscript> </div></div> <div class=\"hero-card-content card-img-overlay d-flex flex-column justify-content-end align-items-start\"> <div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h2 class=\"card-title\"> Varbase; Better Than Ever</h2></div><div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-field-brief field--type-string-long field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div> <div class=\"mt-5\"><a href=\"https://vardot.com\" class=\"btn btn-primary btn-lg\" target=\"_blank\" rel=\"noopener\">Learn More</a></div> </div></div>"},
      {"'#markup'": "<div class=\"card varbase-hero-card clearfix border-0\"> <div class=\"media media--type-image media--view-mode-varbase-heroslider ds-1col clearfix\"> <div class=\"vw-100 varbase-video-player ratio ratio-16x9\"> <div class=\"drimage\" data-w=\"2600\" data-h=\"1463\"><picture><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\" width=\"16\" height=\"9\" loading=\"lazy\"></picture></div><noscript><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></noscript> </div></div> <div class=\"hero-card-content card-img-overlay d-flex flex-column justify-content-end align-items-start\"> <div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h2 class=\"card-title\"> Varbase; Better Than Ever</h2></div><div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-field-brief field--type-string-long field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div> <div class=\"mt-5\"><a href=\"https://vardot.com\" class=\"btn btn-primary btn-lg\" target=\"_blank\" rel=\"noopener\">Learn More</a></div> </div></div>"},
      {"'#markup'": "<div class=\"card varbase-hero-card clearfix border-0\"> <div class=\"media media--type-image media--view-mode-varbase-heroslider ds-1col clearfix\"> <div class=\"vw-100 varbase-video-player ratio ratio-16x9\"> <div class=\"drimage\" data-w=\"2600\" data-h=\"1463\"><picture><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\" width=\"16\" height=\"9\" loading=\"lazy\"></picture></div><noscript><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\"></noscript> </div></div> <div class=\"hero-card-content card-img-overlay d-flex flex-column justify-content-end align-items-start\"> <div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h2 class=\"card-title\"> Varbase; Better Than Ever</h2></div><div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-field-brief field--type-string-long field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div> <div class=\"mt-5\"><a href=\"https://vardot.com\" class=\"btn btn-primary btn-lg\" target=\"_blank\" rel=\"noopener\">Learn More</a></div> </div></div>"}
    ],
    "empty": "<p> Hero Slider </p><p> There are no slides right now! </p><a class=\"btn btn-primary hidden-anonymous visible-admin add-slider\" href=\"[site:url]/node/add/varbase_heroslider/\"> Add One Now </a>",
    "heroslider_utility_classes": [],
    "heroslider_indicators_utility_classes": [],
  }
} %}
{{ include('vartheme_bs5:heroslider') }}
{% endstory %}


{% story HeroSliderOneSlide with {
  "name": "Hero Slider - One Slide",
  "args": {
    "id": "test-heroslider-1-slide",
    "controls": true,
    "indicators": true,
    "controls_indicators_position": "overlay",
    "interval": 5000,
    "keyboard": true,
    "pause": "hover",
    "ride": "carousel",
    "touch": true,
    "wrap": true,
    "items": [
      {"'#markup'": "<div class=\"card varbase-hero-card clearfix border-0\"> <div class=\"media media--type-image media--view-mode-varbase-heroslider ds-1col clearfix\"> <div class=\"vw-100 varbase-video-player ratio ratio-16x9\"> <div class=\"drimage\" data-w=\"2600\" data-h=\"1463\"><picture><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\" width=\"16\" height=\"9\" loading=\"lazy\"></picture></div><noscript><img src=\"https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg\" ></noscript> </div></div> <div class=\"hero-card-content card-img-overlay d-flex flex-column justify-content-end align-items-start\"> <div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-node-title field--type-ds field--label-hidden field__item\"><h2 class=\"card-title\"> Varbase; Better Than Ever</h2></div><div data-component-id=\"vartheme_bs5:field\" class=\"field field--name-field-brief field--type-string-long field--label-hidden field__item\">Elevate your digital experience with Varbase's dynamic design system, seamlessly blending aesthetic appeal with unparalleled functionality. Unleash the power of intuitive design for a compelling web presence.</div> <div class=\"mt-5\"><a href=\"https://vardot.com\" class=\"btn btn-primary btn-lg\" target=\"_blank\" rel=\"noopener\">Learn More</a></div> </div></div>"}
    ],
    "empty": "<p> Hero Slider </p><p> There are no slides right now! </p><a class=\"btn btn-primary hidden-anonymous visible-admin add-slider\" href=\"[site:url]/node/add/varbase_heroslider/\"> Add One Now </a>",
    "heroslider_utility_classes": [],
    "heroslider_indicators_utility_classes": [],
  }
} %}
{{ include('vartheme_bs5:heroslider') }}
{% endstory %}


{% story EmptyHeroSlider with {
  "name": "Empty Hero Slider",
  "args": {
    "controls": true,
    "indicators": true,
    "controls_indicators_position": "overlay",
    "interval": 5000,
    "keyboard": true,
    "pause": "hover",
    "ride": "carousel",
    "touch": true,
    "wrap": true,
    "items": [],
    "empty": "<p> Hero Slider </p><p> There are no slides right now! </p><a class=\"btn btn-primary hidden-anonymous visible-admin add-slider\" href=\"[site:url]/node/add/varbase_heroslider/\"> Add One Now </a>",
    "heroslider_utility_classes": [],
    "heroslider_indicators_utility_classes": [],
  }
} %}
{{ include('vartheme_bs5:heroslider') }}
{% endstory %}


{% endstories %}
