From 626179982b9e9e5aafc30551011143fe6e53aa24 Mon Sep 17 00:00:00 2001
From: kmurphychi247 <82771690+kmurphychi247@users.noreply.github.com>
Date: Mon, 19 Feb 2024 07:57:43 -0600
Subject: [PATCH] Button link (#15)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* adds a new pattern for buttons that can be used on a card. Allows for a boolean to be checked to add the stretched-link class to a button pattern
* removes unnecessary file
---------
Co-authored-by: “Kerry <“kmurphychi@gmail.com”>
---
.../button-link/button-link.ui_patterns.yml | 145 ++++++++++++++++++
.../button-link/pattern-button-link.html.twig | 34 ++++
2 files changed, 179 insertions(+)
create mode 100644 templates/patterns/button-link/button-link.ui_patterns.yml
create mode 100644 templates/patterns/button-link/pattern-button-link.html.twig
diff --git a/templates/patterns/button-link/button-link.ui_patterns.yml b/templates/patterns/button-link/button-link.ui_patterns.yml
new file mode 100644
index 0000000..004e71a
--- /dev/null
+++ b/templates/patterns/button-link/button-link.ui_patterns.yml
@@ -0,0 +1,145 @@
+button-link:
+ label: "Button as a Link"
+ description: "For actions in forms, dialogs, and more with support for multiple sizes, states, and more."
+ links:
+ - 'https://getbootstrap.com/docs/5.3/components/buttons/'
+ category: "Button"
+ variants:
+ default:
+ label: "Default"
+ description: "No 'btn' class added."
+ primary__sm:
+ label: "Primary small"
+ secondary__sm:
+ label: "Secondary small"
+ success__sm:
+ label: "Success small"
+ danger__sm:
+ label: "Danger small"
+ warning__sm:
+ label: "Warning small"
+ info__sm:
+ label: "Info small"
+ light__sm:
+ label: "Light small"
+ dark__sm:
+ label: "Dark small"
+ link__sm:
+ label: "Link small"
+ primary:
+ label: "Primary"
+ secondary:
+ label: "Secondary"
+ success:
+ label: "Success"
+ danger:
+ label: "Danger"
+ warning:
+ label: "Warning"
+ info:
+ label: "Info"
+ light:
+ label: "Light"
+ dark:
+ label: "Dark"
+ link:
+ label: "Link"
+ primary__lg:
+ label: "Primary large"
+ secondary__lg:
+ label: "Secondary large"
+ success__lg:
+ label: "Success large"
+ danger__lg:
+ label: "Danger large"
+ warning__lg:
+ label: "Warning large"
+ info__lg:
+ label: "Info large"
+ light__lg:
+ label: "Light large"
+ dark__lg:
+ label: "Dark large"
+ link__lg:
+ label: "Link large"
+ outline_primary__sm:
+ label: "Outline Primary small"
+ outline_secondary__sm:
+ label: "Outline Secondary small"
+ outline_success__sm:
+ label: "Outline Success small"
+ outline_danger__sm:
+ label: "Outline Danger small"
+ outline_warning__sm:
+ label: "Outline Warning small"
+ outline_info__sm:
+ label: "Outline Info small"
+ outline_light__sm:
+ label: "Outline Light small"
+ outline_dark__sm:
+ label: "Outline Dark small"
+ outline_primary:
+ label: "Outline Primary"
+ outline_secondary:
+ label: "Outline Secondary"
+ outline_success:
+ label: "Outline Success"
+ outline_danger:
+ label: "Outline Danger"
+ outline_warning:
+ label: "Outline Warning"
+ outline_info:
+ label: "Outline Info"
+ outline_light:
+ label: "Outline Light"
+ outline_dark:
+ label: "Outline Dark"
+ outline_primary__lg:
+ label: "Outline Primary large"
+ outline_secondary__lg:
+ label: "Outline Secondary large"
+ outline_success__lg:
+ label: "Outline Success large"
+ outline_danger__lg:
+ label: "Outline Danger large"
+ outline_warning__lg:
+ label: "Outline Warning large"
+ outline_info__lg:
+ label: "Outline Info large"
+ outline_light__lg:
+ label: "Outline Light large"
+ outline_dark__lg:
+ label: "Outline Dark large"
+ settings:
+ disabled:
+ type: "boolean"
+ label: "Disabled?"
+ description: "Is the button disabled?"
+ preview: false
+ allow_expose: true
+ allow_token: true
+ label_visually_hidden:
+ type: "boolean"
+ label: "Hide button label?"
+ description: "Is the button's label hidden?"
+ preview: false
+ allow_expose: true
+ allow_token: true
+ stretched_link:
+ type: "boolean"
+ label: "If this is a link for a card, would you like to link the entire card?"
+ description: "Link entire card?"
+ preview: false
+ allow_expose: true
+ allow_token: true
+ fields:
+ label:
+ type: "text"
+ label: "Label"
+ description: "The button label."
+ preview: "Submit"
+ url:
+ type: "url"
+ label: "URL"
+ description: "The button URL. Optional."
+ preview: "https://example.com"
diff --git a/templates/patterns/button-link/pattern-button-link.html.twig b/templates/patterns/button-link/pattern-button-link.html.twig
new file mode 100644
index 0000000..7d8ea82
--- /dev/null
+++ b/templates/patterns/button-link/pattern-button-link.html.twig
@@ -0,0 +1,34 @@
+{% if variant and variant|lower != 'default' %}
+ {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'btn-' ~ v})|replace({'_': '-'})) %}
+ {% set attributes = attributes.addClass(variants) %}
+ {% set attributes = attributes.addClass('btn') %}
+{% endif %}
+
+{% if label_visually_hidden %}
+ {% set label %}
+
+ {{ label }}
+
+ {% endset %}
+{% endif %}
+
+{% if stretched_link %}
+ {% set attributes = attributes.addClass('stretched-link') %}
+{% endif %}
+
+
+{% if url or attributes.href %}
+ {% set url = url|default(attributes.href) %}
+ {% set attributes = attributes.setAttribute('href', url) %}
+ {% if disabled %}
+ {% set attributes = attributes.setAttribute('href', false).setAttribute('tabindex', '-1').setAttribute('aria-disabled', 'true').addClass('disabled') %}
+ {% endif %}
+
+ {{ label }}
+{% else %}
+ {% if disabled %}
+ {% set attributes = attributes.setAttribute('disabled', '') %}
+ {% endif %}
+
+ {{ label }}
+{% endif %}