{% stories Link with {
  "title": "Atoms/Link",
  "parameters": {
    "componentSubtitle": "Bootstrap Link Component",
    "docs": {
      "description": {
        "component": "Link with Bootstrap Link helpers and utility classes."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "url": {
      "name": "URL Link",
      "description": "URL link",
      "defaultValue": "",
      "control": "text"
    },
    "content": {
      "name": "Content",
      "description": "Link Content",
      "control": "text",
      "defaultValue": "Button"
    },
    "color": {
      "name": "Link Color",
      "description": "Bootstrap includes several predefined link colors to colorize links. these classes have a :hover and :focus state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Primary": "primary",
        "Secondary": "secondary",
        "Success": "success",
        "Danger": "danger",
        "Warning": "warning",
        "Info": "info",
        "Light": "light",
        "Dark": "dark",
        "'Body emphasis'": "body-emphasis"
      }
    },
    "opacity": {
      "name": "Link opacity",
      "description": "Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "'Link opacity 10'": "10",
        "'Link opacity 25'": "25",
        "'Link opacity 50'": "50",
        "'Link opacity 75'": "75",
        "'Link opacity 100'": "100"
      }
    },
    "underline_color": {
      "name": "Underline color",
      "description": "Change the underline’s color independent of the link text color.",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Primary": "primary",
        "Secondary": "secondary",
        "Success": "success",
        "Danger": "danger",
        "Warning": "warning",
        "Info": "info",
        "Light": "light",
        "Dark": "dark"
      }
    },
    "underline_offset": {
      "name": "Underline offset",
      "description": "Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "'Offset 1'": "1",
        "'Offset 2'": "2",
        "'Offset 3'": "3"
      }
    },
    "underline_opacity": {
      "name": "Underline opacity",
      "description": "Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "'Underline opacity 0'": "10",
        "'Underline opacity 10'": "10",
        "'Underline opacity 25'": "25",
        "'Underline opacity 50'": "50",
        "'Underline opacity 75'": "75",
        "'Underline opacity 100'": "100"
      }
    },
    "link_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 Link with {
  "name": "Link",
  "args": {
    "url": "#",
    "content": "Link Text",
    "color": "",
    "opacity": "",
    "underline_color": "",
    "underline_offset": "",
    "underline_opacity": "",
    "link_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:link') }}
{% endstory %}

{% story ReadMore with {
  "name": "Read more",
  "args": {
    "url": "#",
    "content": "Read more ...",
    "color": "",
    "opacity": "",
    "underline_color": "dark",
    "underline_offset": "3",
    "underline_opacity": "50",
    "link_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:link') }}
{% endstory %}

{% endstories %}
