import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';

<Meta title="Bootstrap/Alerts" />

### Basic alerts

<bs-alert variant="primary">This is a primary alert</bs-alert>
<bs-alert variant="secondary">This is a secondary alert</bs-alert>
<bs-alert variant="success">This is a success alert</bs-alert>
<bs-alert variant="danger">This is a danger alert</bs-alert>
<bs-alert variant="warning">This is a warning alert</bs-alert>
<bs-alert variant="info">This is a info alert</bs-alert>
<bs-alert variant="dark">This is a dark alert</bs-alert>
<bs-alert variant="light">This is a light alert</bs-alert>

### Links in alerts

<bs-alert variant="primary">This is a primary alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>
<bs-alert variant="secondary">This is a secondary alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>
<bs-alert variant="success">This is a success alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>
<bs-alert variant="danger">This is a danger alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>
<bs-alert variant="warning">This is a warning alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>
<bs-alert variant="info">This is a info alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>
<bs-alert variant="dark">This is a dark alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>
<bs-alert variant="light">This is a light alert with <a href="#">an example link</a>. The link should be styled to match the alert.</bs-alert>

### Additional content

<bs-alert variant="primary">
    <h4 class="alert-heading">Well done!</h4>
    <p>
        Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with
        this kind of content.
    </p>
    <hr />
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</bs-alert>

### Dismissible

<bs-alert variant="primary" dismissible="true">
    <strong>Hey!</strong> You can dismiss this by clicking the close button, try it out!
</bs-alert>

### Action Buttons

<bs-alert variant="success" dismissible="true">
    <h4>Action buttons</h4>

    Action buttons can be handled pretty easily using flex classes like this!

    <hr>
    
    <div class="d-flex justify-content-between">
        <bs-button variant="outline-danger">Cancel</bs-button>
        <bs-button variant="outline-success">OK</bs-button>
    </div>
</bs-alert>
