Component release notes

components/vf-design-tokens/dist/json/vf-breakpoints.ios.json

@@ -7,7 +7,7 @@
       "value": "360px",
       "meta": {
         "friendlyName": "Extra Small Breakpoint",
-        "sassVariable": "$vf-breakpoint--xs",
+        "sassVariable": "vf-breakpoint--xs",
         "CSSCustomProperty": "--vf-breakpoint--xs",
         "comment": null
       }
@@ -18,7 +18,7 @@
       "name": "vfBreakpointSm",
       "meta": {
         "friendlyName": "Small Breakpoint",
-        "sassVariable": "$vf-breakpoint--sm",
+        "sassVariable": "vf-breakpoint--sm",
         "CSSCustomProperty": "--vf-breakpoint--sm",
         "comment": null
       },
@@ -31,7 +31,7 @@
       "value": "768px",
       "meta": {
         "friendlyName": "Regular Breakpoint",
-        "sassVariable": "$vf-breakpoint--md",
+        "sassVariable": "vf-breakpoint--md",
         "CSSCustomProperty": "--vf-breakpoint--md",
         "comment": null
       }
@@ -43,7 +43,7 @@
       "value": "1024px",
       "meta": {
         "friendlyName": "Large Breakpoint",
-        "sassVariable": "$vf-breakpoint--lg",
+        "sassVariable": "vf-breakpoint--lg",
         "CSSCustomProperty": "--vf-breakpoint--lg",
         "comment": null
       }
@@ -55,7 +55,7 @@
       "value": "1280px",
       "meta": {
         "friendlyName": "Extra Large Breakpoint",
-        "sassVariable": "$vf-breakpoint--xl",
+        "sassVariable": "vf-breakpoint--xl",
         "CSSCustomProperty": "--vf-breakpoint--xl",
         "comment": null
       }

components/vf-design-tokens/src/variables/vf-breakpoints.yml

@@ -3,13 +3,13 @@ props:
     value: 360px
     meta:
       friendlyName: Extra Small Breakpoint
-      sassVariable: $vf-breakpoint--xs
+      sassVariable: vf-breakpoint--xs
       CSSCustomProperty:  --vf-breakpoint--xs
       comment:
   - name: vf-breakpoint--sm
     meta:
       friendlyName: Small Breakpoint
-      sassVariable: $vf-breakpoint--sm
+      sassVariable: vf-breakpoint--sm
       CSSCustomProperty:  --vf-breakpoint--sm
       comment:
     value: 600px
@@ -17,21 +17,21 @@ props:
     value: 768px
     meta:
       friendlyName: Regular Breakpoint
-      sassVariable: $vf-breakpoint--md
+      sassVariable: vf-breakpoint--md
       CSSCustomProperty:  --vf-breakpoint--md
       comment:
   - name: vf-breakpoint--lg
     value: 1024px
     meta:
       friendlyName: Large Breakpoint
-      sassVariable: $vf-breakpoint--lg
+      sassVariable: vf-breakpoint--lg
       CSSCustomProperty:  --vf-breakpoint--lg
       comment:
   - name: vf-breakpoint--xl
     value: 1280px
     meta:
       friendlyName: Extra Large Breakpoint
-      sassVariable: $vf-breakpoint--xl
+      sassVariable: vf-breakpoint--xl
       CSSCustomProperty:  --vf-breakpoint--xl
       comment:
 

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

@@ -12,11 +12,11 @@ module.exports = {
   buildTime: DateTime.fromISO(new Date().toISOString()),
   // vfVersion: global.vfVersion,
   // use this when NOT tagging a release
-  vfVersion: "develop",
-  vfVersionPrefix: "dev.",
+  // vfVersion: "develop",
+  // vfVersionPrefix: "dev.",
   // use this when tagging a release
-  // vfVersion: "v2.5.0-beta.3",
-  // vfVersionPrefix: "",
+  vfVersion: "v2.5.0-beta.4",
+  vfVersionPrefix: "",
   sections: {
     about: {
       url: "/about",

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

 ---
 title: Breakpoints
 date: 2018-10-19 12:24:50
-section: designtokens
-templateEngineOverride: njk
-tags:
-  - posts
-  - sections
-  - designtokens
+templateEngineOverride: md
 layout: layouts/base.njk
 ---
 
-{% set type %}breakpoints{% endset %}
-<h1 class="vf-intro__heading">{{ title }}</h1>
-
-<main class="vf-grid vf-grid__col-3">
-  {% for item in tokens.breakpoints.properties %}
-    {% include "./token-card.njk" %}
-  {% else %}
-    <p>Something went wrong.</p>
-  {% endfor %}
-</main>
+This has been moved, [see the spacing and sizing tokens](/design-tokens/spacing/).

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

 ---
-title: Spacing
+title: Spacing and sizing
 date: 2018-10-19 12:24:50
 section: designtokens
 templateEngineOverride: njk
@@ -12,12 +12,34 @@ layout: layouts/base.njk
 
 <h1 class="vf-intro__heading">{{ title }}</h1>
 
-{% set type %}spacing{% endset %}
-<main class="vf-grid vf-grid__col-3">
-  {% for item in tokens.spacing.properties %}
-    {% include "./token-card.njk" %}
-  {% else %}
-    <p>Something went wrong.</p>
-  {% endfor %}
-</main>
+<section class="embl-grid">
+  {% render '@vf-section-header', {
+    "section_title": "Spacing",
+    "href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss",
+    "id": "spacing"
+  } %}
+  <article class="vf-grid vf-grid__col-2">
+    {% set type %}spacing{% endset %}
+    {% for item in tokens.spacing.properties %}
+      {% include "./token-card.njk" %}
+    {% else %}
+      <p>Something went wrong.</p>
+    {% endfor %}
+  </article>
+</section>
 
+<section class="embl-grid">
+  {% render '@vf-section-header', {
+    "section_title": "Breakpoint widths",
+    "href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-breakpoints.map.scss",
+    "id": "breakpoints"
+  } %}
+  <article class="vf-grid vf-grid__col-2">
+    {% set type %}breakpoints{% endset %}
+    {% for item in tokens.breakpoints.properties %}
+      {% include "./token-card.njk" %}
+    {% else %}
+      <p>Something went wrong.</p>
+    {% endfor %}
+  </article>
+</section>

tools/vf-component-library/src/site/updates/2021-06-21-component-updates.njk

 ---
 title: Rollup release 2.5.0-beta.3
-subtitle: As we move forward towards a more visually and technically consistent 2.5.0 rollup release. Beta 3 brings bug fixes and improvement to documentation and accessibility.
+subtitle: Beta 3 brings bug fixes and improvement to documentation and accessibility as we move forward towards a more visually and technically consistent 2.5.0 rollup release.
 date: 2021-06-21 15:20:29
 version: 2.5.0-beta.3
 tags:

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

 ---
 title: Rollup release 2.5.0-beta.4
-subtitle: As we move forward towards a more visually and technically consistent 2.5.0 rollup release. Beta 4 brings bug fixes and incorporates functional design tokens.
+subtitle: Beta 4 brings bug fixes and incorporates functional design tokens as we move forward towards a more visually and technically consistent 2.5.0 rollup release.
 date: 2021-06-24 15:20:29
 version: 2.5.0-beta.4
 tags:
@@ -11,8 +11,12 @@ layout: layouts/post.njk
 
 {% markdown %}
 
+The presentation of [design token information](/design-tokens) has been improved, grouping the range of tokens into sizing, typography and thematic colours. You'll be able to more easily access the values and Sass maps.
+
 You'll also find improvements to `vf-breadcrumbs` and more flexibility with `vf-search-client-side`.
 
+For our next beta, we aim to [improve the colour of typography](https://github.com/visual-framework/vf-core/issues/1587) by moving to an off-black. We'll also begin to focus on [improving navigation patterns](https://github.com/visual-framework/vf-core/discussions/1560), including [the footer](https://github.com/visual-framework/vf-core/discussions/1529). With those done we hope to release rollup 2.5.0 in July.
+
 Read on for more.
 
 {% endmarkdown %}