bootstrap_italia-8.x-0.x-dev/components/components-2/button/button-demo.html.twig

{#
/**
 * @file
 * Button demo.
 *
 * Example:
 *
   {% include '@bi-bcl/button/button-demo.html.twig' %}
 */
#}
{% apply spaceless %}

  {% set variants = [
    "primary", "secondary", "info", "success", "danger", "warning", "white", "dark", "light", "black", "link"
  ] %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button base'|t,
    path_demo_code: '/button/button-demo.html.twig#L22',
  } %}
    {% block content %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Button'|t,
        button_classes: ['m-1']
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Link'|t,
        tag: 'a',
        url: '#',
        button_classes: ['m-1']
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Input'|t,
        tag: 'input',
        button_classes: ['m-1']
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Submit'|t,
        tag: 'input',
        type: 'submit',
        button_classes: ['m-1']
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Reset'|t,
        tag: 'input',
        type: 'reset',
        button_classes: ['m-1']
      } %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button variants'|t,
    path_demo_code: '/button/button-demo.html.twig#L60',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% set attributes = create_attribute() %}
        {% set attributes = attributes.setAttribute('data-attribute', 'value') %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          button_classes: ['m-1'],
          button_attributes: attributes
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button outline variants'|t,
    path_demo_code: '/button/button-demo.html.twig#L76',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          outline: true,
          button_classes: [
            'm-1',
            variant == 'white' or variant == 'light' ? 'text-secondary'
          ]
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button disabled'|t,
    path_demo_code: '/button/button-demo.html.twig#L95',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          disabled: true,
          button_classes: [
            'm-1',
            variant == 'primary' ? 'text-dark'
          ]
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button outline disabled'|t,
    path_demo_code: '/button/button-demo.html.twig#L114',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          outline: true,
          disabled: true,
          button_classes: [
            'm-1',
            variant == 'white' or variant == 'light' ? 'text-secondary'
          ]
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button with dark background'|trans,
    path_demo_code: '/button/button-demo.html.twig#L135',
    demo_classes: ['bg-dark']
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          button_classes: ['m-1']
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button outline with dark background'|trans,
    path_demo_code: '/button/button-demo.html.twig#L151',
    demo_classes: ['bg-dark'],
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          outline: true,
          button_classes: [
            'm-1',
            variant == 'dark' or variant == 'black' or variant == 'link' ? 'text-white'
          ]
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button disabled with dark background'|trans,
    path_demo_code: '/button/button-demo.html.twig#L171',
    demo_classes: ['bg-dark'],
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          disabled: true,
          button_classes: ['m-1']
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button outline disabled with dark background'|trans,
    path_demo_code: '/button/button-demo.html.twig#L188',
    demo_classes: ['bg-dark'],
  } %}
    {% block content %}
      {% for variant in variants %}
        {% include '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          disabled: true,
          outline: true,
          button_classes: [
            'm-1',
            variant == 'dark' or variant == 'black' or variant == 'link' ? 'text-white'
          ]
        } %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button with icon'|trans,
    path_demo_code: '/button/button-demo.html.twig#L208',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% embed '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          button_classes: ['m-1', 'btn-icon'],
        } %}
          {% block after %}
            {% include '@bi-bcl/icon/icon.html.twig' with {
              name: 'it-star-full',
              size: 'sm',
              color: variant == 'light' or variant == 'white' ? 'primary' : 'white',
              icon_classes: ['ms-1'],
            } %}
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button with rounded icon'|trans,
    path_demo_code: '/button/button-demo.html.twig#L232',
  } %}
    {% block content %}
      {% for variant in variants %}
        {% embed '@bi-bcl/button/button.html.twig' with {
          label: variant,
          variant: variant,
          button_classes: ['m-1', 'btn-icon'],
        } %}
          {% block before %}
            <span class="rounded-icon">
            {% include '@bi-bcl/icon/icon.html.twig' with {
              name: 'it-user',
              size: 'sm',
              color: variant == 'light' or variant == 'white' ? 'primary' : variant,
              icon_classes: ['mr-1'],
            } %}
          </span>&nbsp;
          {% endblock %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button various size'|trans,
    path_demo_code: '/button/button-demo.html.twig#L257',
  } %}
    {% block content %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Primary Large'|trans,
        variant: 'primary',
        size: 'lg',
        button_classes: ['m-1'],
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Secondary Large'|trans,
        variant: 'secondary',
        size: 'lg',
        button_classes: ['m-1'],
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Primary Small'|trans,
        variant: 'primary',
        size: 'sm',
        button_classes: ['m-1'],
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Secondary Small'|trans,
        variant: 'secondary',
        size: 'sm',
        button_classes: ['m-1'],
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Primary mini'|trans,
        variant: 'primary',
        size: 'xs',
        button_classes: ['m-1'],
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Secondary mini'|trans,
        variant: 'secondary',
        size: 'xs',
        button_classes: ['m-1'],
      } %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button full width'|trans,
    path_demo_code: '/button/button-demo.html.twig#L302',
    demo_classes: ['d-grid', 'gap-2'],
  } %}
    {% block content %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Primary Large'|trans,
        variant: 'primary',
        size: 'lg',
        button_classes: ['m-1'],
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Secondary Large'|trans,
        variant: 'secondary',
        size: 'lg',
        button_classes: ['m-1'],
      } %}
    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Button full width responsive md'|trans,
    path_demo_code: '/button/button-demo.html.twig#L323',
    demo_classes: ['d-grid', 'gap-2', 'd-md-block'],
  } %}
    {% block content %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Primary Large'|trans,
        variant: 'primary',
        size: 'lg',
        button_classes: ['m-1'],
      } %}
      {% include '@bi-bcl/button/button.html.twig' with {
        label: 'Secondary Large'|trans,
        variant: 'secondary',
        size: 'lg',
        button_classes: ['m-1'],
      } %}
    {% endblock %}
  {% endembed %}
{% endapply %}