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

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

  {% set message_xs = 'Font Titillium 14px. Leading 21px.' %}

  {% set message_sm = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' %}

  {% set message_md = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.' %}

  {% set message_lg = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.' %}

  {% set message_xl = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.' %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Modal demo'|t,
    path_demo_code: '/modal/modal-demo.html.twig#L69',
  } %}
    {% block content %}

      {% embed '@bi-bcl/modal/modal.html.twig' with {
        modal_title: title,
        modal_body: message_xs,
        button_label: 'Launch demo modal'|t
      } %}
        {% block modalFooter %}
          <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">
            {{ 'Action 2'|t }}</button>
          <button class="btn btn-primary btn-sm" type="button">{{ 'Action 1'|t }}</button>
        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}


  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Modal demo icon'|t,
    path_demo_code: '/modal/modal-demo.html.twig#L91',
  } %}
    {% block content %}

      {% embed '@bi-bcl/modal/modal.html.twig' with {
        modal_title: title,
        modal_body: message_xs,
        modal_icon: 'it-info-circle',
        button_label: 'Launch demo modal'|t,
        button_variant: 'success'
      } %}
        {% block modalFooter %}
          <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">
            {{ 'Ok'|t }}</button>
        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Modal demo link-list centered'|t,
    path_demo_code: '/modal/modal-demo.html.twig#113',
  } %}
    {% block content %}

      {% embed '@bi-bcl/modal/modal.html.twig' with {
        modal_title: true,
        dismissible: false,
        modal_position: 'centered',
        modal_label: 'Link list modal'|t,
        button_label: 'Launch demo modal'|t,
        button_size: 'lg',
        modal_classes: ['it-dialog-link-list'],
      } %}

        {% block modalTitle %}
          <span>1.</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        {% endblock %}

        {% block modalBody %}
          <div class="link-list-wrapper">
            <ul class="link-list">
              <li>
                <a class="list-item icon-left" href="#">
                  {% include '@bi-bcl/icon/icon.html.twig' with {
                    name: 'it-chevron-right',
                    color: 'primary',
                  } %}
                  <span>Link lista 1</span>
                </a>
              </li>
              <li>
                <a class="list-item icon-left" href="#">
                  {% include '@bi-bcl/icon/icon.html.twig' with {
                    name: 'it-chevron-right',
                    color: 'primary',
                  } %}
                  <span>Link lista 2</span>
                </a>
              </li>
              <li>
                <a class="list-item icon-left" href="#">
                  {% include '@bi-bcl/icon/icon.html.twig' with {
                    name: 'it-chevron-right',
                    color: 'primary',
                  } %}
                  <span>Link lista 3</span>
                </a>
              </li>
            </ul>
          </div>
        {% endblock %}

        {% block modalFooter %}{% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Modal popconfirm centered'|t,
    path_demo_code: '/modal/modal-demo.html.twig#L173',
  } %}
    {% block content %}

      {% embed '@bi-bcl/modal/modal.html.twig' with {
        modal_title: title,
        modal_body: message_xs,
        popconfirm: true,
        modal_position: 'centered',
        button_label: 'Launch demo modal'|t
      } %}
        {% block modalFooter %}
          <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">
            {{ 'Action 2'|t }}</button>
          <button class="btn btn-primary btn-sm" type="button">{{ 'Action 1'|t }}</button>
        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Modal demo long text'|t,
    path_demo_code: '/modal/modal-demo.html.twig#L196',
  } %}
    {% block content %}

      {% embed '@bi-bcl/modal/modal.html.twig' with {
        modal_title: title,
        modal_body: message_xl,
        scrollable: true,
        button_label: 'Launch demo modal'|t
      } %}
        {% block modalFooter %}
          <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">
            {{ 'Action 2'|t }}</button>
          <button class="btn btn-primary btn-sm" type="button">{{ 'Action 1'|t }}</button>
        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Modal demo long text fullscreen'|t,
    path_demo_code: '/modal/modal-demo.html.twig#L218',
  } %}
    {% block content %}

      {% embed '@bi-bcl/modal/modal.html.twig' with {
        modal_title: title,
        modal_body: message_xl~message_xl~message_xl~message_xl~message_xl~message_xl,
        scrollable: true,
        modal_size: 'fullscreen',
        button_label: 'Launch demo modal'|t
      } %}
        {% block modalFooter %}
          <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">
            {{ 'Action 2'|t }}</button>
          <button class="btn btn-primary btn-sm" type="button">{{ 'Action 1'|t }}</button>
        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

  {% embed '@bi-bcl/demo-container.html.twig' with {
    title: 'Modal demo long text fullscreen 2'|t,
    path_demo_code: '/modal/modal-demo.html.twig#L241',
  } %}
    {% block content %}

      {% embed '@bi-bcl/modal/modal.html.twig' with {
        modal_label: title,
        scrollable: true,
        modal_size: 'fullscreen',
        button_label: 'Launch demo modal'|t
      } %}
        {% block modalBody %}
          <div class="container">
            <div class="row">
              <div class="col">
                <h3 class="h2">{{ title }}</h3>
              </div>
            </div>
            <div class="row">
              <div class="col">
                {{ message_xl~message_xl~message_xl~message_xl~message_xl~message_xl }}
              </div>
              <div class="col">
                {{ message_xl~message_xl~message_xl~message_xl~message_xl~message_xl }}
              </div>
            </div>
          </div>
        {% endblock %}

        {% block modalFooter %}
          <button class="btn btn-outline-primary btn-sm" type="button" data-bs-dismiss="modal">
            {{ 'Action 2'|t }}</button>
          <button class="btn btn-primary btn-sm" type="button">{{ 'Action 1'|t }}</button>
        {% endblock %}
      {% endembed %}

    {% endblock %}
  {% endembed %}

{% endapply %}