Commit 820e1e1e authored by Ken Hawkins's avatar Ken Hawkins

Component: vf-back-to-top refinements

In progress ...
parent e3d341e2
Pipeline #148251 passed with stage
in 5 minutes and 56 seconds
......@@ -14,17 +14,14 @@ variants:
hidden: false
context:
type: inline
- name: With_scroll_target
label: With scroll target
hidden: false
context:
type: inline
scrollToId: variants
scrollToId: top
example: true
- name: floating
label: Floating
hidden: false
context:
type: floating
example: true
# Global component context
context:
component-type: block
......
......@@ -3,6 +3,7 @@
{% set type = context.type %}
{% set text = context.text %}
{% set scrollToId = context.scrollToId %}
{% set example = context.example %}
{% endif %}
{# Determine text, if not explicitly set -#}
......@@ -10,15 +11,24 @@
{% set text = 'Back to top' %}
{% endif %}
{% if example == true %}
<!-- this HTML is for example use only -->
<div class="" style="position: relative;" id="top">
{% render '@vf-content' %}
{% endif %}
<div class="vf-back-to-top vf-back-top--{{type}}" data-vf-js-back-to-top {% if type === 'floating'%} data-vf-js-back-to-top-floating {% endif %}>
<a {% if scrollToId %} href="{{'#'+scrollToId}}" {% endif %}} data-scroll-to-id="{{scrollToId}}" class="vf-button vf-button--primary vf-button--sm" aria-label="{{text}}">
<span class="vf-button__text | vf-u-sr-only">{{text}}</span>
<a {% if scrollToId %}href="{{'#'+scrollToId}}" data-scroll-to-id="{{scrollToId}}" {% endif %}class="vf-button vf-button--primary vf-button--sm" aria-label="{{text}}">
<svg class="vf-icon vf-icon--search-btn | vf-button__icon" viewBox="0 0 140 140" width="16" height="16">
<g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
<path d="M23.421,11.765,13.768.8A2.641,2.641,0,0,0,12,0a2.645,2.645,0,0,0-1.768.8L.579,11.765A1.413,1.413,0,1,0,2.7,13.632l7.45-8.466a.25.25,0,0,1,.437.166V22.587a1.413,1.413,0,1,0,2.826,0V5.332a.25.25,0,0,1,.438-.165L21.3,13.632a1.413,1.413,0,1,0,2.121-1.867Z" fill="#ffffff" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
</g>
</svg>
{{text}}
{{text}}
</a>
</div>
{% if example == true %}
<!-- this HTML is for example use only -->
</div>
{% endif %}
{% if context %}
{% set button_href = context.button_href %}
{% set theme = context.theme %}
{% set id = context.id %}
......@@ -9,7 +8,6 @@
{% set override_class = context.override_class %}
{% set html = context.html %}
{% set text = context.text %}
{% endif %}
{% spaceless %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment