Component release 20211014-01

PUBLISHING.md

@@ -35,10 +35,10 @@ 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 20210705-01`
+    - commit message in a format of: `Component release 20211014-01`
 1. add a tag
     - see last tag `git describe --abbrev=0 --tags`
-    - add a semantic versioned tag `git tag -a v2.5.0-beta.5 -m 'Release of precompiled CSS, JS, assets'`
+    - add a semantic versioned tag `git tag -a v2.5.2-beta.5 -m 'Release of precompiled CSS, JS, assets'`
     - Why like this?
        - We do not add tags per individual component version. However, Lerna needs a named tag to see what has changed. With our method we get one tag per release bundle and avoid tag spamming in the release history.
        - Trigger a deploy to the CDN (i.e. `v2.5.0`) https://assets.emblstatic.net/vf/v2.4.10/css/styles.css

components/vf-design-tokens/package.json

 {
   "name": "@visual-framework/vf-design-tokens",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "A collection of design tokens for consumption across projects and products",
   "main": "index.js",
   "scripts": {

components/vf-dropdown/package.json

 {
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "name": "@visual-framework/vf-dropdown",
   "description": "vf-dropdown component",
   "homepage": "",

components/vf-location-nearest/package.json

 {
-  "version": "1.0.1",
+  "version": "1.0.2",
   "name": "@visual-framework/vf-location-nearest",
   "description": "vf-location-nearest component",
   "homepage": "",

components/vf-sass-config/package.json

 {
-  "version": "2.6.1",
+  "version": "2.6.2",
   "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.24",
+  "version": "0.1.25",
   "name": "@visual-framework/vf-sass-starter",
   "description": "vf-sass-starter component",
   "homepage": "https://stable.visual-framework.dev",
@@ -20,10 +20,10 @@
     "component"
   ],
   "dependencies": {
-    "@visual-framework/vf-design-tokens": "^3.6.1",
+    "@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.1",
+    "@visual-framework/vf-sass-config": "^2.6.2",
     "@visual-framework/vf-sass-utilities": "^1.0.1",
     "@visual-framework/vf-utility-classes": "^2.0.0"
   },

components/vf-section-header/package.json

 {
-  "version": "1.5.2",
+  "version": "1.5.3",
   "name": "@visual-framework/vf-section-header",
   "description": "vf-section-header component",
   "homepage": "https://stable.visual-framework.dev/",

components/vf-table/package.json

 {
-  "version": "1.2.0-rc.2",
+  "version": "1.2.0-rc.3",
   "name": "@visual-framework/vf-table",
   "description": "vf-table component",
   "homepage": "https://stable.visual-framework.dev",

components/vf-tabs/package.json

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

tools/vf-component-library/package.json

 {
   "name": "@visual-framework/vf-component-library",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Generate a static-html site of Visual Framework 2.0 components and docs.",
   "main": "index.js",
   "scripts": {

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.1",
+  vfVersion: "v2.5.2",
   vfVersionPrefix: "",
   sections: {
     about: {

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

@@ -4,7 +4,7 @@ pageClass: posts
 templateEngineOverride: njk
 ---
 
-{% include "navigation.njk" %}
+{# {% include "navigation.njk" %} #}
 
 {#- Use this template for individual items of content. -#}
 
@@ -12,8 +12,7 @@ templateEngineOverride: njk
   Posted as an example, on <time datetime="{{ date }}">{{ date | dateDisplay }}</time>
 </p> #}
 
-<section class="vf-intro | embl-grid embl-grid--has-centered-content">
-  <div></div>
+<section class="vf-intro">
   <div>
     <h1 class="vf-intro__heading">{{title}}</h1>
     {% if subtitle %}

tools/vf-component-library/src/site/design-tokens/theming.njk

@@ -48,7 +48,7 @@ layout: layouts/base.njk
   {% render '@vf-section-header', {
     "section_title": "Interactive",
     "href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-color__interactive.map.scss",
-    "id": "text"
+    "id": "interactive"
   } %}
   <article class="vf-grid vf-grid__col-2">
     {% for item in tokens.interactive.properties %}

tools/vf-component-library/src/site/updates/2021-10-14-component-updates.njk

+---
+title: Rollup release 2.5.2
+subtitle: This release brings a bug fixes, new design tokens and improved documentation.
+date: 2021-10-14 22:10:29
+version: 2.5.2
+tags:
+  - posts
+  - changelog
+layout: layouts/post.njk
+---
+
+{% markdown %}
+
+In addition to [new design tokens for interactive foreground and background colours](/design-tokens/theming/#interactive), we've refreshed the [guidance on the component creation process and technicalities](/guidance/creating-components/).
+
+Read below for details on the changes in each component.
+
+Our next release will [bring an overhaul to the component previews](https://github.com/visual-framework/vf-core/pull/1689).
+
+As always, you can [join the conversation on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ).
+
+{% endmarkdown %}
+
+{% set context = {
+  "component_modifier": "vf-links__list--easy",
+  "title": "On this page",
+  "svg": true,
+  "list": [
+    {
+      "text": "Refinements",
+      "link_list_href": "#refinements"
+    },
+    {
+      "text": "Bug fixes",
+      "link_list_href": "#bugs"
+    }
+  ]
+}
+%}
+{% include blocks.links_list %}
+
+{% 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 ---/ #}
+
+{% markdown %}
+
+<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">
+This releases {{version}} to the CDN
+</h3>
+<div class="vf-box__text">
+
+[`https://assets.emblstatic.net/vf/v{{version}}/css/styles.css`](https://assets.emblstatic.net/vf/v{{version}}/css/styles.css) <br/>
+[`https://assets.emblstatic.net/vf/v{{version}}/scripts/scripts.js`](https://assets.emblstatic.net/vf/v{{version}}/scripts/scripts.js)
+
+As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here]({{ '/building' | url }}).
+
+{#- don't forget to add the latest version to /tools/vf-component-library/src/site/_data/siteConfig.js -#}
+
+</div>
+</article><br/>
+</section>
+
+<br/>
+
+### Refinements <a href="#refinements" id="refinements"></a>
+
+{{ notes("vf-design-tokens", "3.6.2", "63c3bec9fe233120497f6ba33a9dc292a53185c0") }}
+
+* Add `interactive-color` tokens.
+    * https://github.com/visual-framework/vf-core/issues/1688
+
+{{ notes("vf-dropdown", "1.0.0-alpha.4", "63c3bec9fe233120497f6ba33a9dc292a53185c0") }}
+
+* Use new interactive colour token.
+    * https://github.com/visual-framework/vf-core/issues/1688
+
+{{ notes("vf-sass-config", "2.6.2", "63c3bec9fe233120497f6ba33a9dc292a53185c0") }}
+
+* Add map to `interactive-color` sass map
+    * https://github.com/visual-framework/vf-core/issues/1688
+
+{{ notes("vf-table", "1.2.0-rc.3", "63c3bec9fe233120497f6ba33a9dc292a53185c0") }}
+* Use new interactive colour token.
+    * https://github.com/visual-framework/vf-core/issues/1688
+
+{{ notes("vf-tabs", "VERSIONHERE", "63c3bec9fe233120497f6ba33a9dc292a53185c0") }}
+
+* Use new interactive colour token.
+    * https://github.com/visual-framework/vf-core/issues/1688
+
+### Bug fixes <a href="#bugs" id="bugs"></a>
+
+{{ notes("vf-location-nearest", "1.0.2", "0459997ca19e5d000edeb9a80b4041180e61a2fe") }}
+
+* Remove unneeded `console.log`.
+
+{{ notes("vf-tabs", "2.0.2", "0459997ca19e5d000edeb9a80b4041180e61a2fe") }}
+
+* Prevent hijacking of scroll when focusing tabs.
+    * https://github.com/visual-framework/vf-core/pull/1696
+
+{{ notes("vf-section-header", "1.5.3", "63c3bec9fe233120497f6ba33a9dc292a53185c0") }}
+
+* Bug: following 1.5.2, ensures that links are always style correctly.
+
+
+{% endmarkdown %}