Component release 20211025-01

PUBLISHING.md

@@ -35,7 +35,7 @@ A reference guide on how to do releases of the VF [monorepo](https://www.toptal.
 ### 4. Post-release
 
 1. commit and push changes to the `develop` branch
-    - commit message in a format of: `Component release 20211014-01`
+    - commit message in a format of: `Component release 20211025-01`
 1. add a tag
     - see last tag `git describe --abbrev=0 --tags`
     - add a semantic versioned tag `git tag -a v2.5.2-beta.5 -m 'Release of precompiled CSS, JS, assets'`

components/embl-grid/package.json

 {
-  "version": "2.1.2",
+  "version": "2.2.0",
   "name": "@visual-framework/embl-grid",
   "description": "embl-grid component",
   "homepage": "http://www.embl.org/guidelines/visual-framework/dev-docs/",

components/vf-card-container/package.json

 {
-  "version": "3.2.0",
+  "version": "3.2.1",
   "name": "@visual-framework/vf-card-container",
   "description": "vf-card-container component",
   "homepage": "https://stable.visual-framework.dev",

components/vf-card/package.json

 {
-  "version": "2.6.1",
+  "version": "2.6.2",
   "name": "@visual-framework/vf-card",
   "description": "vf-card component",
   "homepage": "https://stable.visual-framework.dev",

components/vf-content/package.json

 {
-  "version": "1.6.3",
+  "version": "1.6.4",
   "name": "@visual-framework/vf-content",
   "description": "vf-content component",
   "homepage": "https://stable.visual-framework.dev/",
@@ -22,7 +22,7 @@
     "@visual-framework/vf-button": "^2.0.0-alpha.2",
     "@visual-framework/vf-divider": "^2.0.1",
     "@visual-framework/vf-figure": "^1.3.0",
-    "@visual-framework/vf-form": "^2.0.0-alpha.1",
+    "@visual-framework/vf-form": "^2.0.0-alpha.2",
     "@visual-framework/vf-heading": "^1.0.1",
     "@visual-framework/vf-link": "^2.0.0",
     "@visual-framework/vf-list": "^1.0.0",

components/vf-form/package.json

 {
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "name": "@visual-framework/vf-form",
   "description": "form  component",
   "homepage": "https://stable.visual-framework.dev/",
@@ -29,7 +29,7 @@
     "@visual-framework/vf-form__label": "^3.0.0-alpha.0",
     "@visual-framework/vf-form__legend": "^2.0.0-alpha.0",
     "@visual-framework/vf-form__radio": "^3.0.0-alpha.0",
-    "@visual-framework/vf-form__select": "^3.0.0-alpha.0",
+    "@visual-framework/vf-form__select": "^3.0.0",
     "@visual-framework/vf-form__textarea": "^3.0.0-alpha.0"
   }
 }

components/vf-form__select/package.json

 {
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0",
   "name": "@visual-framework/vf-form__select",
   "description": "vf-form__select component",
   "homepage": "http://www.embl.org/guidelines/visual-framework/dev-docs/",

components/vf-hero/package.json

 {
-  "version": "3.3.1",
+  "version": "3.3.2",
   "name": "@visual-framework/vf-hero",
   "description": "vf-hero component",
   "homepage": "https://stable.visual-framework.dev",

components/vf-intro/package.json

 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "name": "@visual-framework/vf-intro",
   "description": "vf-intro component",
   "homepage": "https://stable.visual-framework.dev/",

components/vf-sass-config/package.json

 {
-  "version": "2.6.2",
+  "version": "2.7.0",
   "name": "@visual-framework/vf-sass-config",
   "description": "vf-sass-config",
   "homepage": "https://stable.visual-framework.dev/",

components/vf-sass-starter/package.json

 {
-  "version": "0.1.25",
+  "version": "0.1.26",
   "name": "@visual-framework/vf-sass-starter",
   "description": "vf-sass-starter component",
   "homepage": "https://stable.visual-framework.dev",
@@ -23,7 +23,7 @@
     "@visual-framework/vf-design-tokens": "^3.6.2",
     "@visual-framework/vf-font-plex-mono": "^1.1.1",
     "@visual-framework/vf-font-plex-sans": "^1.1.1",
-    "@visual-framework/vf-sass-config": "^2.6.2",
+    "@visual-framework/vf-sass-config": "^2.7.0",
     "@visual-framework/vf-sass-utilities": "^1.0.1",
     "@visual-framework/vf-utility-classes": "^2.0.0"
   },

components/vf-stack/package.json

 {
-  "version": "2.1.2",
+  "version": "3.0.0",
   "name": "@visual-framework/vf-stack",
   "description": "vf-stack component",
   "homepage": "",

components/vf-tabs/package.json

 {
-  "version": "2.0.2",
+  "version": "2.1.0",
   "name": "@visual-framework/vf-tabs",
   "description": "vf-tabs component",
   "homepage": "https://stable.visual-framework.dev/",

components/vf-tabs/vf-tabs.config.yml

@@ -72,7 +72,7 @@ variants:
         - tab_title: Section
           tab_number: 99999
           tab_heading: Default
-          tab_content: An <a href="#vf-tabs__section-88888">example deep link</a> loading this anchore will directly activate the neighbouring tab. <code>/vf-tabs#vf-tabs__section-88888</code>
+          tab_content: An <a href="/components/vf-tabs#vf-tabs__section--88888">example deep link</a> loading this anchor will directly activate the neighbouring tab. <code>/vf-tabs#vf-tabs__section--88888</code>
         - tab_title: A Short Section
           tab_number: 88888
           tab_heading: Deep-linked tab

tools/vf-component-library/package.json

 {
   "name": "@visual-framework/vf-component-library",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "description": "Generate a static-html site of Visual Framework 2.0 components and docs.",
   "main": "index.js",
   "scripts": {
@@ -26,7 +26,7 @@
   "dependencies": {
     "@11ty/eleventy": "0.12.1",
     "@visual-framework/vf-config": "1.0.1-alpha.0",
-    "@visual-framework/vf-core": "^2.2.32",
+    "@visual-framework/vf-core": "^2.2.33",
     "@visual-framework/vf-extensions": "^1.0.1",
     "html-minifier": "4.0.0",
     "node-html-parser": "5.0.0",

tools/vf-component-library/src/site/_data/siteConfig.js

@@ -15,7 +15,7 @@ module.exports = {
   // vfVersion: "develop",
   // vfVersionPrefix: "dev.",
   // use this when tagging a release
-  vfVersion: "v2.5.2",
+  vfVersion: "v2.5.3",
   vfVersionPrefix: "",
   sections: {
     about: {

tools/vf-component-library/src/site/_includes/component-release-links.njk

+{#- Links to component updates -#}
+{% macro notes(component='vf-xxx', componentVersion='9.9.9', commitId='0123456789') %}
+
+#### [{{component}}](https://latest.visual-framework.dev/components/{{component}}/) <span class="vf-badge vf-badge--secondary">{{ componentVersion }}</span> <a href="https://www.npmjs.com/package/@visual-framework/{{component}}/v/{{componentVersion}}" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/{{commitId}}" class="vf-badge vf-badge--secondary">git diff</a>
+
+{% endmacro %}
+
+{% macro notesTool(component='vf-xxx', componentVersion='9.9.9', commitId='0123456789') %}
+{# Tools don't have pages in the component library #}
+
+#### [{{component}}](https://github.com/visual-framework/vf-core/tree/develop/tools/{{component}}/#readme) <span class="vf-badge vf-badge--secondary">{{ componentVersion }}</span> <a href="https://www.npmjs.com/package/@visual-framework/{{component}}/v/{{componentVersion}}" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/{{commitId}}" class="vf-badge vf-badge--secondary">git diff</a>
+
+{% endmacro %}
+
+{% macro componentLink(component='vf-xxx') %}[{{component}}](https://latest.visual-framework.dev/components/{{component}}/){% endmacro %}
+{# endmacros ---/ #}

tools/vf-component-library/src/site/_includes/layouts/post.njk

@@ -4,13 +4,11 @@ pageClass: posts
 templateEngineOverride: njk
 ---
 
-{# {% include "navigation.njk" %} #}
-
 {#- Use this template for individual items of content. -#}
 
-{# <p class="date">
+{#- <p class="date">
   Posted as an example, on <time datetime="{{ date }}">{{ date | dateDisplay }}</time>
-</p> #}
+</p> -#}
 
 <section class="vf-intro">
   <div>

tools/vf-component-library/src/site/updates/2021-03-05-component-updates.md

@@ -9,28 +9,12 @@ tags:
 layout: layouts/post.njk
 ---
 
+{%- import "component-release-links.njk" as releaseLinks -%}
+
 This week's release of components is minor and continue to focus on optimisation.
 
 Our next releases will likely contain [important changes on vf-form elements](https://github.com/visual-framework/vf-core/pull/1408) that will greatly improve the look and usability. We also [expect vf-masthead to be formally deprecated](https://github.com/visual-framework/vf-core/pull/1406).
 
-{# macros ---> #}
-{% macro notes(component='vf-xxx', componentVersion='9.9.9', commitId='0123456789') %}
-
-#### [{{component}}](https://latest.visual-framework.dev/components/{{component}}/) <span class="vf-badge">{{ componentVersion }}</span> <a href="https://www.npmjs.com/package/@visual-framework/{{component}}/v/{{componentVersion}}" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/{{commitId}}" class="vf-badge">git diff</a>
-
-{% endmacro %}
-
-{% macro notesTool(component='vf-xxx', componentVersion='9.9.9', commitId='0123456789') %}
-<!-- Tools don't have pages in the component library -->
-
-#### [{{component}}](https://github.com/visual-framework/vf-core/tree/develop/tools/{{component}}/#readme) <span class="vf-badge">{{ componentVersion }}</span> <a href="https://www.npmjs.com/package/@visual-framework/{{component}}/v/{{componentVersion}}" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/{{commitId}}" class="vf-badge">git diff</a>
-
-{% endmacro %}
-
-
-{% macro componentLink(component='vf-xxx') %}[{{component}}](https://latest.visual-framework.dev/components/{{component}}/){% endmacro %}
-{# endmacros ---/ #}
-
 <section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br/>
 <article class="vf-box vf-box-theme--primary vf-box--easy">
 <h3 class="vf-box__heading">
@@ -53,7 +37,7 @@ As a reminder, the rollup CSS and JS are compilations of many independently vers
 
 We've given further consideration on how to best support React. We'll use a dual approach, providing full true React components for complex VF components. For less interactive components we'll continue to consume the precompiled Nunjucks templates.
 
-{{ notesTool("vf-extensions-react", "0.0.3", "57b76f040149e75e68a9926f1e68edfc646c45a7") }}
+{{ releaseLinks.notesTool("vf-extensions-react", "0.0.3", "57b76f040149e75e68a9926f1e68edfc646c45a7") }}
 
 * Update readme with refined approach to VF-React support.
   * https://github.com/visual-framework/vf-core/issues/1401
@@ -65,7 +49,7 @@ We've given further consideration on how to best support React. We'll use a dual
 
 <img class="vf-figure__image" alt="misaligned text" src="https://user-images.githubusercontent.com/928100/109184416-45cca400-778f-11eb-9f49-895676232e72.png" />
 
-{{ notes("vf-card", "2.5.2", "6b597ab28fddf3d7dfa9369ecd2316004e14c038") }}
+{{ releaseLinks.notes("vf-card", "2.5.2", "6b597ab28fddf3d7dfa9369ecd2316004e14c038") }}
 
 * adds `align-items: start;` to the card so all child align when in a card container.
   * https://github.com/visual-framework/vf-core/issues/1395

tools/vf-component-library/src/site/updates/2021-03-24-component-updates.njk

@@ -8,6 +8,9 @@ tags:
   - changelog
 layout: layouts/post.njk
 ---
+
+{%- import "component-release-links.njk" as releaseLinks -%}
+
 {% markdown %}
 
 In the month of March we've been busy with usability optimisations — particularly on major visual and functional improvements to the form elements — and other new components, fixes and improvements. Read on for more.
@@ -50,23 +53,6 @@ In the month of March we've been busy with usability optimisations — particula
 %}
 {% include blocks.links_list %}
 
-{# macros ---> #}
-{% macro notes(component='vf-xxx', componentVersion='9.9.9', commitId='0123456789') %}
-
-#### [{{component}}](https://latest.visual-framework.dev/components/{{component}}/) <span class="vf-badge">{{ componentVersion }}</span> <a href="https://www.npmjs.com/package/@visual-framework/{{component}}/v/{{componentVersion}}" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/{{commitId}}" class="vf-badge">git diff</a>
-
-{% endmacro %}
-
-{% macro notesTool(component='vf-xxx', componentVersion='9.9.9', commitId='0123456789') %}
-<!-- Tools don't have pages in the component library -->
-
-#### [{{component}}](https://github.com/visual-framework/vf-core/tree/develop/tools/{{component}}/#readme) <span class="vf-badge">{{ componentVersion }}</span> <a href="https://www.npmjs.com/package/@visual-framework/{{component}}/v/{{componentVersion}}" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/{{commitId}}" class="vf-badge">git diff</a>
-
-{% endmacro %}
-
-{% macro componentLink(component='vf-xxx') %}[{{component}}](https://latest.visual-framework.dev/components/{{component}}/){% endmacro %}
-{# endmacros ---/ #}
-
 {% markdown %}
 
 <section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br/>
@@ -163,7 +149,7 @@ Here's a detailed list of the changes visible above, and changes you're not seei
 
 ## New flag layout component <a href="#forms" id="flag"></a>
 
-{{ notes("vf-flag", "1.0.0-alpha.1", "7f8c68bba5a08f0d5d3d494d5537d728812402d5") }}
+{{ releaseLinks.notes("vf-flag", "1.0.0-alpha.1", "7f8c68bba5a08f0d5d3d494d5537d728812402d5") }}
 
 * introduces the flag layout component.
 * adds all variants that match positions and spacing.g
@@ -171,52 +157,52 @@ Here's a detailed list of the changes visible above, and changes you're not seei
 
 ## Enhancements and fixes <a href="#forms" id="enhancements"></a>
 
-{{ notes("vf-hero", "3.2.0", "f1f806b5562c9704787f98fbf157b48bbf7b17c0") }}
+{{ releaseLinks.notes("vf-hero", "3.2.0", "f1f806b5562c9704787f98fbf157b48bbf7b17c0") }}
 
 * adds thinner `vf-hero--400` variant.
 * fixes `vf-hero__content vf-box` sizing padding calculation for `vf-hero--800` variant.
 * makes the maximum width of the `vf-hero__content` wider, but make smaller widths `max-content`.
 
-{{ notes("vf-design-tokens", "3.4.0", "f767f3a9e86741d58a9b1eb2f13be803596ff1ef") }}
+{{ releaseLinks.notes("vf-design-tokens", "3.4.0", "f767f3a9e86741d58a9b1eb2f13be803596ff1ef") }}
 
 * introduces neutral colours stack Design Tokens.
 * adds deprecation notices to relevant Design Tokens, to be remove in next major version release.
 
-{{ notes("vf-stack", "2.1.0", "e315a49906bfc742d804158071e7b2894a8fcbda") }}
+{{ releaseLinks.notes("vf-stack", "2.1.0", "e315a49906bfc742d804158071e7b2894a8fcbda") }}
 
 * adds more options: `200`,`500`,`1200`, and `1600` vertical spaces.
 
-{{ notes("vf-search", "2.0.0", "818e4681c0cb341566737c612cc940914109a529") }}
+{{ releaseLinks.notes("vf-search", "2.0.0", "818e4681c0cb341566737c612cc940914109a529") }}
 
 * adds a div around the form content.
 * makes changes to the CSS for `--inline` variant so it's responsive to the parent width.
 
 ## Chores <a href="#forms" id="chores"></a>
 
-{{ notesTool("vf-sass-config", "2.5.0", "f767f3a9e86741d58a9b1eb2f13be803596ff1ef") }}
+{{ releaseLinks.notesTool("vf-sass-config", "2.5.0", "f767f3a9e86741d58a9b1eb2f13be803596ff1ef") }}
 
 * adds neutral colour tokens function `neutral(Nn)`
 
-{{ notes("vf-card", "2.5.3", "bb1e5bafbf22ecd39214c98a83bc95805928497b") }}
+{{ releaseLinks.notes("vf-card", "2.5.3", "bb1e5bafbf22ecd39214c98a83bc95805928497b") }}
 
 * Corrects fix in 2.5.2 by using `align-content: start;`.
   * https://github.com/visual-framework/vf-core/issues/1395#issuecomment-801232527
 
-{{ notes("vf-card", "2.5.4", "63535a057c213e0685428c2472c18e1a02597fad") }}
+{{ releaseLinks.notes("vf-card", "2.5.4", "63535a057c213e0685428c2472c18e1a02597fad") }}
 
 * adds `word-break: break-word;` to text so the text won't exceed the box model.
 
-{{ notesTool("vf-frctl-extensions", "1.0.1", "0925481ea013188db901c1626c1fccfeac30240d") }}
+{{ releaseLinks.notesTool("vf-frctl-extensions", "1.0.1", "0925481ea013188db901c1626c1fccfeac30240d") }}
 
 * Updates highlightjs syntax of codeblock tag
   * https://github.com/visual-framework/vf-core/pull/1435
   * https://github.com/highlightjs/highlight.js/issues/2277
 
-{{ notes("vf-search-client-side", "1.0.2", "685b98003d83abebfdb33a1590d05ed721ce1cda") }}
+{{ releaseLinks.notes("vf-search-client-side", "1.0.2", "685b98003d83abebfdb33a1590d05ed721ce1cda") }}
 
 * Updates to match v2.0.0 of vf-search--inline
 
-{{ notes("vf-card-container", "3.1.2", "bb1e5bafbf22ecd39214c98a83bc95805928497b") }}
+{{ releaseLinks.notes("vf-card-container", "3.1.2", "bb1e5bafbf22ecd39214c98a83bc95805928497b") }}
 
 * Updates example to use content of different lengths.