{% stories Image with {
  "title": "Atoms/Image",
  "parameters": {
    "componentSubtitle": "Bootstrap Image component",
    "docs": {
      "description": {
        "component": "Image component with responsive behavior for the system image."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "align": {
      "name": "Aligning images",
      "description": "(optional) Align images with the helper float classes or text alignment classes. block-level images can be centered using the `.mx-auto` margin utility class.",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Start": "start",
        "Center": "center",
        "End": "end"
      }
    },
    "responsive": {
      "name": "Responsive image",
      "description": "(optional) Images in Bootstrap are made responsive with `.img-fluid`. This applies max-width with 100% and height with auto to the image so that it scales with the parent width.",
      "defaultValue": false,
      "control": "boolean"
    },
    "thumbnails": {
      "name": "Image thumbnails",
      "description": "(optional) In addition to Bootstrap border-radius utilities, you can use `.img-thumbnail` to give an image a rounded 1px border appearance.",
      "defaultValue": false,
      "control": "boolean"
    },
    "rounded": {
      "name": "Rounded image",
      "defaultValue": false,
      "control": "boolean"
    },
    "image_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 ImageDefault with {
  "name": "Image",
  "args": {
    "align": "",
    "responsive": true,
    "thumbnails": false,
    "rounded": false,
    "image_utility_classes": [],
    "attributes": {"src": "https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg"}
  }
} %}
{{ include('vartheme_bs5:image') }}
{% endstory %}

{% story ImageThumbnails with {
  "name": "Thumbnails",
  "args": {
    "align": "",
    "responsive": true,
    "thumbnails": true,
    "rounded": false,
    "image_utility_classes": [],
    "attributes": {"src": "https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/avatar-1.jpg"}
  }
} %}
{{ include('vartheme_bs5:image') }}
{% endstory %}

{% story ImageRounded with {
  "name": "Rounded",
  "args": {
    "align": "",
    "responsive": true,
    "thumbnails": false,
    "rounded": true,
    "image_utility_classes": [],
    "attributes": {"src": "https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/avatar-1.jpg"}
  }
} %}
{{ include('vartheme_bs5:image') }}
{% endstory %}

{% endstories %}
