Unverified Commit 784d89dc authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub

Component: vf-back-to-top refinements (#1493)

Looking good, thanks
parent e3d341e2
Pipeline #148283 passed with stage
in 16 minutes and 32 seconds
......@@ -4,15 +4,19 @@
## About
Takes user to top of the current page or to the target element.
An anchor or JavaScript button to scroll the user to top of the current page, or to a target element.
## Usage
#### Floating variant
Floating variant is recommended for this component, which appears floating at the bottom right of page. It appears at right bottom of page once user scrolls down to 100% of the page height.
Only use on component per page, multiple "back to top" links are [not recommended](https://www.nngroup.com/articles/back-to-top).
#### Inline variant
Inline variant can be placed anywhere. Only use on Inline component instance - multiple "back to top" links are [not usable](https://www.nngroup.com/articles/back-to-top).
### Inline variant
The inline variant can be used without JavaScript and placed at the bottom of content or the page.
### Floating variant
Te floating variant is recommended for this component, which appears floating at the bottom right of page. It will appear once the user has scrolled down to 100% of the page height. This requires JavaScript to function.
## Install
......
......@@ -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 %}
......
......@@ -213,7 +213,7 @@ Depending on your environment you'll want to use `render` or `include`. As a rul
### Using `include`
You'll need to pass a context object from your code or Yaml file ([exampe](https://github.com/visual-framework/vf-eleventy/blob/master/src/site/index.yml)), as well as the path to the Nunjucks template. Nunjucks' `include` is an abstraction of `render` and provides some additional portability.
You'll need to pass a context object from your code or Yaml file ([example](https://github.com/visual-framework/vf-eleventy/blob/master/src/site/index.yml)), as well as the path to the Nunjucks template. Nunjucks' `include` is an abstraction of `render` and provides some additional portability.
{# Ideally we could also show the Yaml format here, but that will require additional parsing of the passed `variant.context`. Not impossible, but an additional task #}
{% endmarkdown %}
......@@ -231,30 +231,26 @@ You'll need to pass a context object from your code or Yaml file ([exampe](https
{# <pre><code>
{{-variant.context | dump(2)}}
</code></pre> #}
{% markdown %}
### Using `render`
This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where `include` is not be available.
{% endmarkdown %}
<pre><code>
{%- raw %}{% render '@{% endraw %}{{variant.baseHandle}}', {{variant.context | dump(2)}} {% raw %}%}{% endraw %}
</code></pre>
</details>
{% if component.baseHandle == "vf-card" or component.baseHandle == "vf-button" %}
{% set reactComponents = "vf-card, vf-button, vf-back-to-top" %}
{% if component.baseHandle in reactComponents %}
<details class="vf-details vf-box vf-box--outline">
<summary class="vf-details--summary">React syntax (pre-alpha)</summary>
<pre><code>
import { {{ component.baseHandle | camelize(true) }} } from "@visual-framework/{{component.baseHandle}}/{{component.baseHandle}}.react.js";
{{ '<' | escape }}{{ component.baseHandle | camelize(true) }} parameter="value" />
import { {{ component.baseHandle | camelize(true) | replace("-", "") }} } from "@visual-framework/{{component.baseHandle}}/{{component.baseHandle}}.react.js";
// or
import { {{ component.baseHandle | camelize(true) | replace("-", "") }} } from "@visual-framework/{{component.baseHandle}}/{{component.baseHandle}}.jsx";
{{ '<' | escape }}{{ component.baseHandle | camelize(true) | replace("-", "") }} parameter="value" />
</code></pre>
<br/><p>For individual parameter names and options, see the Nunjucks syntax example. <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-extensions-react/README.md">Also follow the React setup guide</a>. Note: React support is in its early pre-alpha stage and not all component are yet supported.</p>
</details>
......
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