diff --git a/source/_patterns/04-components/tabs/_tabs.twig b/source/_patterns/04-components/tabs/_tabs.twig index 4bcc63fbe06ab130e30acd7f269ea6715bbda64c..51f03d34cc775ad1e9b7325dc937fa635fac745c 100644 --- a/source/_patterns/04-components/tabs/_tabs.twig +++ b/source/_patterns/04-components/tabs/_tabs.twig @@ -4,8 +4,16 @@ {% for type in content_list %} {% if tab_type == "link" %} <a href="{{ type.url }}" class="uw-tablinks {{ button_modifier_classes }}{% if type.active %} active{% endif %}">{{ type.text }}</a> + {% elseif tab_type == "button" %} + {% set button_class -%} + uw-tablinks {{ button_modifier_classes }}{% if type.button_class %} {{ type.button_class }}{% endif %} + {%- endset %} + <button class="{{ button_class }}">{{ type.text }}</button> {% else %} - <button role="tab" class="uw-tablinks {{ button_modifier_classes }}" {% if loop.index == 1 %} aria-selected="true" {% else %} aria-selected="false" {% endif %} aria-controls="{{ type }}" id="tab-{{ loop.index }}" tabindex="0">{{ type }}</button> + {% set button_class -%} + uw-tablinks {{ button_modifier_classes }}{% if type.button_class %} {{ type.button_class }}{% endif %} + {%- endset %} + <button role="tab" class="{{ button_class }}" {% if loop.index == 1 %} aria-selected="true" {% else %} aria-selected="false" {% endif %} aria-controls="{{ type }}" id="tab-{{ loop.index }}" tabindex="0">{{ type }}</button> {% endif %} {% endfor %} </div> diff --git a/source/_patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig b/source/_patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig new file mode 100644 index 0000000000000000000000000000000000000000..de42eb8b7b6772da20bddd9b59fb44759732dbd4 --- /dev/null +++ b/source/_patterns/04-components/tabs/tabs--buttons/tabs--buttons.twig @@ -0,0 +1,10 @@ +{% set button_modifier_classes -%} + button button--large {{ modifier_classes }} +{%- endset %} + +{% include "@components/tabs/_tabs.twig" with { + tab_type: 'button', + content_list: content_list, + button_modifier_classes: button_modifier_classes, + tabs_modifier_class: tabs_modifier_class, +} %} \ No newline at end of file