Unverified Commit acb0d66d authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

Component/vf smooth scroll (#1719)

parent 21066c56
Pipeline #213553 passed with stages
in 8 minutes and 39 seconds
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
{% render '@vf-no-js' %}
<title>{{ _target.title }} | {{ _config.project.title }}</title>
......
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
{% render '@vf-no-js' %}
<title>{{ _target.title }} | {{ _config.project.title }}</title>
......
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
{% render '@vf-no-js' %}
<title>{{ _target.title }} | {{ _config.project.title }}</title>
......
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
{% render "@vf-no-js" %}
<title>{{ _target.title }} | {{ _config.project.title }}</title>
......
......@@ -164,6 +164,7 @@ button {
@import 'vf-heading/vf-heading.scss';
@import 'vf-text/vf-text.scss';
@import 'vf-u-fullbleed/vf-u-fullbleed.scss';
@import 'vf-smooth-scroll/vf-smooth-scroll.scss';
/* Visual Framework Utility Class Mixins */
@import 'vf-sass-config/mixins/vf-utility-mixins.scss';
......
bin
.github
.travis.yml
node_modules
### 1.0.0-alpha.1
* A line of what is new in your component.
* Use sentence styling.
* Keep your notes, short and punchy.
* End your sentences with periods.
* https://github.com/visual-framework/vf-core/issues/1286
* Link to any related issues or discussions, such as the above.
# Smooth scroll utility component
[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-smooth-scroll.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-smooth-scroll)
## About
This enables smooth scrolling when a user clicks on anchor links or other in-page scrolling is triggered.
## Usage
This is an opt-in behaviour that is activated by putting the `vf-smooth-scroll` class on a parent element — a good place would be at `<html class="vf-smooth-scroll">` (note: it probably won't work if you add it your `<body>` element).
Not that as of November 2021, CSS-based smooth scrolling [is still not support by Safari on Mac OS or iOS](https://caniuse.com/css-scroll-behavior).
### Accessibility
This component targets WCAG 2.1 AA accessibility.
Generally this improves accessibility by smooth scrolling between content, for some scenarios the behaviour may become distracting.
Note that smooth scrolling is disabled if a user has flagged `prefers-reduced-motion`.
You can also read about [the Visual Framework's approach to accessibility](https://stable.visual-framework.dev/guidance/accessibility/).
## Install
This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and [yarn](https://classic.yarnpkg.com/en/docs/install), you can install `vf-smooth-scroll` with this command.
```
$ yarn add --dev @visual-framework/vf-smooth-scroll
```
### Sass/CSS
The style files included are written in [Sass](https://sass-lang.com/). If you're using a VF-core project, you can import it like this:
```
@import "@visual-framework/vf-smooth-scroll/vf-smooth-scroll.scss";
```
Make sure you import Sass requirements along with the modules. You can use a [project boilerplate](https://stable.visual-framework.dev/building/) or the [`vf-sass-starter`](https://stable.visual-framework.dev/components/vf-sass-starter/)
## Help
- [Read the Visual Framework troubleshooting](https://stable.visual-framework.dev/troubleshooting/)
- [Open a ticket](https://github.com/visual-framework/vf-core/issues)
- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ)
// setup files required
// sass-lint:disable clean-import-paths
@import 'vf-global-variables';
@import 'vf-variables';
@import 'vf-functions';
@import 'vf-mixins';
// component specific styles
@import 'vf-smooth-scroll.variables.scss';
@import 'vf-smooth-scroll.scss';
// component variant styles
// @import 'vf-smooth-scroll--variant.scss';
{
"version": "1.0.0-alpha.0",
"name": "@visual-framework/vf-smooth-scroll",
"description": "vf-smooth-scroll component",
"homepage": "",
"author": "VF",
"license": "Apache 2.0",
"style": "vf-smooth-scroll.css",
"sass": "index.scss",
"main": "build/index.js",
"test": "echo \"Error: no test specified\" && exit 1",
"publishConfig": {
"access": "public"
},
"repo": "https://github.com/visual-framework/vf-core/tree/develop/components/vf-smooth-scroll",
"bugs": {
"url": "https://github.com/visual-framework/vf-core/issues"
},
"keywords": [
"fractal",
"component"
]
}
# The title shown on the component page
title: Smooth scroll
# Label shown on index pages
label: Smooth scroll
status: alpha
# The template used from /components/_previews
#
# Per-variant options
# variants:
# - name: default
# label: Default
# hidden: true
# context:
# children_are_possible:
# variant_title: A Easy Card Title 1
# variant_href: "JavaScript:Void(0);"
# modifier: vf-card--very-easy
# variant_image: ../../assets/vf-card/assets/vf-card-example.png
# Global component context
context:
component-type: utility
# custom-values: passed as {{custom-values}}
# - note: you in your custom-values you should use dashes `-`
# and not underscores `_` as underscores prevent inherited template use
# title: Title text
# text: String of text
# image: ../../assets/vf-component-name/assets/vf-component-name.png
# - note on paths: be sure to prefix with `../../`
# - Why? https://github.com/visual-framework/vf-core/issues/364
// vf-smooth-scroll
// Don't need JS? Then feel free to delete this file.
/*
* A note on the Visual Framework and JavaScript:
* The VF is primarily a CSS framework so we've included only a minimal amount
* of JS in components and it's fully optional (just remove the JavaScript selectors
* i.e. `data-vf-js-tabs`). So if you'd rather use Angular or Bootstrap for your
* tabs, the Visual Framework won't get in the way.
*
* When querying the DOM for elements that should be acted on:
* 🚫 Don't: const tabs = document.querySelectorAll('.vf-tabs');
* ✅ Do: const tabs = document.querySelectorAll('[data-vf-js-tabs]');
*
* This allows users who would prefer not to have this JS engage on an element
* to drop `data-vf-js-component` and still maintain CSS styling.
*/
// Uncomment this boilerplate
// // if you need to import any other components' JS to use here
// import { vfOthercomponent } from vfImportPrefix + '../vf-other-component/vf-other-component';
//
// /**
// * The global function for this component
// * @example vfSmoothScroll(firstPassedVar)
// * @param {string} [firstPassedVar] - An option to be passed
// */
// function vfSmoothScroll(firstPassedVar) {
// firstPassedVar = firstPassedVar || 'defaultVal';
//
// }
//
// // If you need to invoke the component by default
// vfSmoothScroll();
//
// // By default your component should be usable with js imports
// export { vfSmoothScroll };
//
// // You should also import it at ./components/vf-component-rollup/scripts.js
// // import { vfSmoothScroll } from 'vf-smooth-scroll/vf-smooth-scroll';
// // Or import directly
// // import { vfSmoothScroll } from '../components/raw/vf-smooth-scroll/vf-smooth-scroll.js';
// // And, if needed, invoke it
// // vfSmoothScroll();
{# Make sure any variables are listed inside the following if statement #}
{% if context %}
{# {% set vf-smooth-scroll = context.vf-smooth-scroll %} #}
{% endif %}
<div class="vf-smooth-scroll">
{# Simple example borrowed from https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior #}
<p>
Scroll to:
<a href="#pageA">A</a>
<a href="#pageB">B</a>
<a href="#pageC">C</a>
</p>
<div class="vf-stack vf-stack--800" style="scroll-behavior: smooth; overflow-y: scroll; height: 100px; max-width: 350px;">
<article class="vf-card vf-card--brand vf-card--bordered" id="pageA">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading">Item A</h3><p class="vf-card__subheading">With sub–heading</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered" id="pageB">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading">Item B</h3><p class="vf-card__subheading">With sub–heading</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered" id="pageC">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading">Item C</h3><p class="vf-card__subheading">With sub–heading</p>
</div>
</article>
</div>
</div>
{# You can do Nunjucks logic in your templates that references the .yml settings
What's Nunjucks: https://mozilla.github.io/nunjucks/templating.html #}
{#
{% if item.image == "blank" %}
<span><!-- no image --></span>
{% else %}
{{ item.image }}
{% endif %}
#}
// vf-smooth-scroll
@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
* Component: #{map-get($componentInfo, 'name')}
* Version: #{map-get($componentInfo, 'version')}
* Location: #{map-get($componentInfo, 'location')}
* Build time: #{map-get($componentInfo, 'buildTimeStamp')}
*/
@import 'vf-smooth-scroll.variables.scss';
// You need to add this Sass file to ./components/vf-componenet-rollup/index.scss
// @import 'vf-smooth-scroll/vf-smooth-scroll.scss';
// This smooth scroll uses animations keyframes to allow search to only work
// when the user clicks on a page (doesn't use native search)
// More at https://schepp.dev/posts/smooth-scrolling-and-page-search/
@keyframes vfsmoothscroll1 {
from, to { scroll-behavior: smooth; }
}
@keyframes vfsmoothscroll2 {
from, to { scroll-behavior: smooth; }
}
.vf-smooth-scroll:focus-within {
animation-name: vfsmoothscroll2;
scroll-behavior: smooth;
}
.vf-smooth-scroll {
animation: vfsmoothscroll1 1s;
}
@media (prefers-reduced-motion: reduce) {
.vf-smooth-scroll:focus-within {
scroll-behavior: auto;
}
}
// vf-smooth-scroll Sass variables file.
// ------------------------------------------------------------
// ------------------------------------------------------------
// Default component variables
// ------------------------------------------------------------
// $vf-smooth-scroll--example-bg-color: set-color(vf-color--yellow);
// $vf-smooth-scroll--example2-bg-color: set-ui-color(vf-ui-color--grey);
<!doctype html>
<html lang="en">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
......@@ -44,7 +44,7 @@
<!-- Feed -->
<link href="https://stable.visual-framework.dev/feed.xml" type="application/rss+xml" rel="alternate" title="Visual Framework 2.0 Updates">
</head>
<body class="{{ bodyClass }} vf-body vf-stack" >
<body class="{{ bodyClass }} vf-body | vf-stack" >
<header class="vf-global-header | vf-search-client-side--no-index">
{% render '@vf-logo', {logo_href: '/' | url, logo_text: 'Visual Framework', image: siteConfig.siteInformation.url + 'assets/vf-logo/assets/logo.svg', "hidden_text": false } %}
<nav class="vf-navigation vf-navigation--global | vf-cluster">
......
......@@ -167,7 +167,7 @@ hideSectionNavigation: true
},
{
"text": "Install",
"navigation_href": "#install"
"navigation_href": "#installation"
},
{
"text": "Changelog",
......@@ -188,7 +188,7 @@ hideSectionNavigation: true
<section class="embl-grid">
{% render '@vf-section-header', {
"section_title": "Usage",
"id": "Usage",
"id": "usage",
"href": ""
} %}
<article>
......@@ -383,7 +383,7 @@ import { {{ component.baseHandle | camelize(true) | replace("-", "") }} } from "
{% endmarkdown %}
{% endif %}
### Assets
### Assets <span id="assets"></span>
- [Nunjucks template]({{ ('/assets/' + component.baseHandle + '/' + component.baseHandle + '.njk') | url }})
- [Config]({{ ('/assets/' + component.baseHandle + '/' + component.baseHandle + '.config.yml') | url }})
......
......@@ -7,7 +7,7 @@ tags: posts
layout: layouts/boilerplate.njk
---
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
{% render "@vf-no-js" %}
<title>{{ pagination.items[0].name or title or (renderData and renderData.title)}} | {{ siteConfig.siteInformation.title }}</title>
......
......@@ -7,7 +7,7 @@ tags: posts
layout: layouts/boilerplate.njk
---
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<!-- See the VF No JS docs: https://stable.visual-framework.dev/components/vf-no-js/ -->
{% render "@vf-no-js" %}
......
......@@ -6,7 +6,7 @@ tags: posts
layout: layouts/boilerplate.njk
---
<!DOCTYPE html>
<html lang="en" class="vf-no-js">
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
{% render "@vf-no-js" %}
<title>{{ pagination.items[0].name or title or (renderData and renderData.title)}} | {{ siteConfig.siteInformation.title }}</title>
......
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