Commit d2e33181 authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Design token navigation

parent 7f83795b
Pipeline #211602 passed with stages
in 10 minutes and 3 seconds
......@@ -28,10 +28,7 @@ There should be only one use of `vf-navigation--on-this-page` on a page.
Using the `vfNavigationOnThisPage` JavaScript adds a quality-of-life improvement by automatically activating sections as the user scrolls them into view on the page.
For this feature to work, anchor targets need two things:
1. a data attribute: `data-vf-js-navigation-on-this-page="true"`
2. an element id: `id="container-1"`
For this feature to work, anchor targets need two things an element id: `id="container-1"`
These could be added to any item on the page, but would most logically be added to a `vf-grid`, `embl-grid` or `vf-section-header`
......
......@@ -5,7 +5,7 @@
"activateJavascript": activateJavascript
} %}
<section class="embl-grid embl-grid--has-sidebar" data-vf-js-navigation-on-this-page="true" id="container-1">
<section class="embl-grid embl-grid--has-sidebar" id="container-1">
{% render '@vf-section-header', {
"section_title": "Home",
"href": "container-1"
......@@ -29,7 +29,7 @@
</div>
</section>
<section class="embl-grid embl-grid--has-sidebar" data-vf-js-navigation-on-this-page="true" id="container-2">
<section class="embl-grid embl-grid--has-sidebar" id="container-2">
{% render '@vf-section-header', {
"section_title": "Downloads",
"href": "JavaScript:Void(0);"
......@@ -56,7 +56,7 @@
</div>
</section>
<section class="embl-grid embl-grid--has-sidebar" data-vf-js-navigation-on-this-page="true" id="container-3">
<section class="embl-grid embl-grid--has-sidebar" id="container-3">
{% render '@vf-section-header', {
"section_title": "Release notes",
"href": "JavaScript:Void(0);"
......@@ -80,7 +80,7 @@
</div>
</section>
<section class="embl-grid embl-grid--has-sidebar" data-vf-js-navigation-on-this-page="true" id="container-4">
<section class="embl-grid embl-grid--has-sidebar" id="container-4">
{% render '@vf-section-header', {
"section_title": "Another item",
"href": "JavaScript:Void(0);"
......
......@@ -8,7 +8,7 @@
*/
export function vfNavigationOnThisPage() {
var sectionList = document.querySelectorAll("[data-vf-js-navigation-on-this-page-container='true'],[data-vf-js-navigation-on-this-page-container='1']")[0];
var section = document.querySelectorAll("[data-vf-js-navigation-on-this-page]");
var section = document.querySelectorAll("[id]");
var sectionPositions = {};
var i = 0;
......
......@@ -28,6 +28,11 @@ module.exports = {
title: "Building a site",
summary: "How to make a project with Visual Framework components."
},
designtokens: {
url: "/design-tokens",
title: "Design tokens",
summary: "Colour, typography, spacing and other stylistic decisions as structured data.."
},
developing: {
url: "/developing",
title: "Contributing",
......
......@@ -2,6 +2,7 @@
title: Spacing and sizing
date: 2018-10-19 12:24:50
section: designtokens
hideSectionNavigation: true
templateEngineOverride: njk
tags:
- posts
......@@ -12,6 +13,25 @@ layout: layouts/base.njk
<h1 class="vf-intro__heading">{{ title }}</h1>
{% set context = {
"heading": "On this page",
"classModifier": "on-this-page",
"activateJavascript": true,
"navigation": [
{
"text": "Spacing",
"navigation_href": "#spacing",
"currentSection": true
},
{
"text": "Breakpoints",
"navigation_href": "#breakpoints"
}
]
}
%}
{% include "vf-core-components/vf-navigation/vf-navigation.njk" %}
<section class="embl-grid">
{% render '@vf-section-header', {
"section_title": "Spacing",
......
......@@ -3,6 +3,7 @@ title: Theme colours
date: 2021-06-22 12:24:50
section: designtokens
templateEngineOverride: njk
hideSectionNavigation: true
tags:
- posts
- sections
......@@ -13,6 +14,41 @@ layout: layouts/base.njk
{% set type %}color{% endset %}
<h1 class="vf-intro__heading">{{ title }}</h1>
{% set context = {
"heading": "On this page",
"classModifier": "on-this-page",
"activateJavascript": true,
"navigation": [
{
"text": "Brand",
"navigation_href": "#brand",
"currentSection": true
},
{
"text": "Text",
"navigation_href": "#text"
},
{
"text": "Interactive",
"navigation_href": "#interactive"
},
{
"text": "Buttons",
"navigation_href": "#buttons"
},
{
"text": "UI and neutral colours",
"navigation_href": "#ui"
},
{
"text": "Decorative",
"navigation_href": "#decorative"
}
]
}
%}
{% include "vf-core-components/vf-navigation/vf-navigation.njk" %}
{# <pre>{{ tokens.themeBrand.properties | dump(2 )}}</pre> #}
<section class="embl-grid">
{% render '@vf-section-header', {
......@@ -64,7 +100,7 @@ layout: layouts/base.njk
{% render '@vf-section-header', {
"section_title": "Buttons",
"href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-color__buttons.map.scss",
"id": "Buttons"
"id": "buttons"
} %}
<article class="vf-grid vf-grid__col-2">
{% for item in tokens.themeButtons.properties %}
......
......@@ -2,6 +2,7 @@
title: Type sizes
date: 2021-06-22 12:24:50
section: designtokens
hideSectionNavigation: true
templateEngineOverride: njk
tags:
- posts
......
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