Issue #3293118: Add default Radix components to Vartheme

{#

/**

 * @file

 * Template for Alert component.

 *

 * Available config:

 * - type: primary | secondary | success | danger | warning | info | light | dark

 * - heading: string,

 * - dimissible: true | false

 * - utility_classes: An array of utility classes.

 */

#}

{% set dismissible = dismissible ?? true %}

{% set classes = [

  'alert',

  type ? 'alert-' ~ type,

  dismissible ? 'alert-dismissible',

]|merge(utility_classes ? utility_classes : []) %}

<div class="{{ classes|join(' ') }}" role="alert">

  {% if heading %}

    <h4 class="alert-heading">{{ heading }}</h4>

  {% endif %}

  {% block content %}

    {{ content }}

  {% endblock %}

  {% if dismissible %}

    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">

    </button>

  {% endif %}

</div>

{#

/**

 * @file

 * Template for a Badge component.

 *

 * Available config:

 * - html_tag: The HTML tag to use for the bade. Defaults to span.

 * - bg: primary | secondary | success | danger | warning | info | light | dark

 * - color: primary | secondary | success | danger | warning | info | light | dark | body | white

 * - utility_classes: An array of utility classes.

 * - content: The content of the badge.

 * - url: if anchor add a url, html_tag will be set to a automatically.

 */

#}

{% set classes = [

  'badge',

  bg ? 'bg-' ~ bg : 'bg-primary',

  color ? 'text-' ~ color,

]|merge(utility_classes ? utility_classes : []) %}

{% set html_tag = html_tag ?? 'span' %}

{% if url %}

  {% set html_tag = 'a' %}

  {% set url = url|render %}

{% endif %}

{% if content %}

  <{{ html_tag }} {{ url ? 'href=' ~ url }} class="{{ classes|join(' ') }}">

  {% block content %}

    {{ content }}

  {% endblock %}

  </{{ html_tag }}>

{% endif %}

 No newline at end of file

{#

/**

 * @file

 * Template for a Breadcrumb component.

 *

 * Available config:

 * - utility_classes: An array of utility classes.

 */

#}

{% if breadcrumb %}

  <nav aria-label="breadcrumb" class="{{ utility_classes|join(' ') }}">

    <ol class="breadcrumb">

      {% for item in breadcrumb %}

        <li class="breadcrumb-item {{ not item.url ? 'active' }}">

          {% if item.url %}

            <a href="{{ item.url }}">{{ item.text }}</a>

          {% else %}

            {{ item.text }}

          {% endif %}

        </li>

      {% endfor %}

    </ol>

  </nav>

{% endif %}

{#

/**

 * @file

 * Template for a button component.

 *

 * Available config:

 * - type: primary | secondary | success | danger | warning | info | light | dark

 * - outline: true | false

 * - tag: button, a, input

 * - value: string

 * - attributes: Attributes array.

 */

#}

{% set button_classes = [

  'btn',

  (type ? 'btn-' ~ type),

]|merge(button_utility_classes) %}

<button{{ attributes.addClass(button_classes) }}>

  {% block button_content %}

    {{ button_content }}

  {% endblock %}

</button>

{#

/**

 * @file

 * Template for a Card component.

 */

#}

<div class="card">

  <div class="card-body">

    {% block body %}

      {{ body }}

    {% endblock %}

  </div>

</div>