From 5c878876d3bdd2c7cd094871fa0644f3310bcec8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 23 Jul 2025 08:34:23 +0200 Subject: Commit merge of button and badge into action-button (and rename it to button) --- tpl/objects/action-button.pug | 36 ---------------------------- tpl/objects/badge.pug | 37 ---------------------------- tpl/objects/button.pug | 56 +++++++++++++++++++++++++++++-------------- tpl/objects/dialog.pug | 6 ++--- tpl/objects/icon-nav.pug | 8 +++---- tpl/objects/lightbox.pug | 6 ++--- tpl/objects/menu.pug | 2 +- tpl/objects/navbar.pug | 2 +- tpl/objects/side-nav.pug | 2 +- 9 files changed, 51 insertions(+), 104 deletions(-) delete mode 100644 tpl/objects/action-button.pug delete mode 100644 tpl/objects/badge.pug (limited to 'tpl/objects') diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug deleted file mode 100644 index 0e77e58..0000000 --- a/tpl/objects/action-button.pug +++ /dev/null @@ -1,36 +0,0 @@ -include icon.pug - -mixin action-button - - - let classes = { - 'o-action-button': true, - 'u-d-block': attributes.block, - 'o-action-button--secondary': attributes.secondary, - 'o-action-button--quiet': attributes.quiet, - 'o-action-button--pill': attributes.pill, - 'o-action-button--static': attributes.static, - 'o-action-button--icon': !!attributes.icon && !block, - 'is-selected': attributes.selected, - } - if (attributes.theme) { - classes['o-action-button--' + attributes.theme] = true - } - if (attributes.size) { - classes['o-action-button--' + attributes.size] = true - } - if (attributes.class) { - classes[attributes.class] = true; - } - - let href = attributes.disabled ? null : '#'; - - a(class=classes href=href) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-action-button__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug deleted file mode 100644 index 48e4029..0000000 --- a/tpl/objects/badge.pug +++ /dev/null @@ -1,37 +0,0 @@ -mixin badge(variant) - - - let classes = { - 'o-badge': true, - 'o-badge--pill': !!attributes.pill, - 'o-badge--quiet': !!attributes.quiet, - 'o-menu__badge': !!attributes.menu, - } - if (attributes.size) { - classes['o-badge--' + attributes.size] = true - } - if (variant) { - classes['o-badge--' + variant] = true - } - - if attributes.href - a(href=attributes.href class=classes) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-badge__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) - else - span(class=classes) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-badge__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 0884c8d..b9b4cbd 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -1,28 +1,48 @@ -mixin a-button +include icon.pug + +mixin button - let classes = { - 'o-button': true, - 'o-button--block': attributes.block, - 'o-button--primary': attributes.primary, - 'o-button--outline': attributes.outline, - 'o-button--round': !!attributes.icon && !block + 'o-button': true, + 'u-d-block': attributes.block, + 'o-button--secondary': attributes.secondary, + 'o-button--quiet': attributes.quiet, + 'o-button--pill': attributes.pill, + 'o-button--static': attributes.static, + 'o-button--icon': !!attributes.icon && !block, + 'is-selected': attributes.selected, } - if (attributes.variant) { - classes['o-button--' + attributes.variant] = true + if (attributes.theme) { + classes['o-button--' + attributes.theme] = true } if (attributes.size) { classes['o-button--' + attributes.size] = true } + if (attributes.class) { + classes[attributes.class] = true; + } let href = attributes.disabled ? null : '#'; - a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-button__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) + if attributes.badge + span(class=classes href=href) + if attributes.icon + +icon(attributes.icon) + = ' ' + if block + span.o-button__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) + else + a(class=classes href=href) + if attributes.icon + +icon(attributes.icon) + = ' ' + if block + span.o-button__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 3ceae69..1a2f061 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -54,13 +54,13 @@ mixin dialog(title) else if title +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') + +button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') section(class=bodyClass) if slots.body - slots.body() footer.o-dialog__footer.l-button-group - +a-button(outline=true)= 'Cancel' + +button(outline=true)= 'Cancel' = ' ' - +a-button(variant='accent')= 'Continue' + +button(variant='accent')= 'Continue' diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug index f1c7d8a..afdf2db 100644 --- a/tpl/objects/icon-nav.pug +++ b/tpl/objects/icon-nav.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin icon-nav - @@ -19,9 +19,9 @@ mixin icon-nav-item(icon) - let classes = { 'o-icon-nav__item': true, - 'o-action-button': true, - 'o-action-button--round': true, - 'o-action-button--quiet': true, + 'o-button': true, + 'o-button--round': true, + 'o-button--quiet': true, 'is-selected': attributes.selected, } if (attributes.class) { diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 842d44a..2d520b5 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -23,14 +23,14 @@ mixin lightbox(images) header.o-lightbox__header div(class=linksClasses) block - +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') + +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') each img, i in images img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) if images.length > 1 - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') .o-lightbox__thumbnails each img, i in images diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 578f9bc..802f9bd 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin menu - diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug index 5c7642c..14ec9d3 100644 --- a/tpl/objects/navbar.pug +++ b/tpl/objects/navbar.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin navbar - diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug index ccd24e4..2dcbd84 100644 --- a/tpl/objects/side-nav.pug +++ b/tpl/objects/side-nav.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin side-nav - -- cgit v1.2.3-70-g09d2