Chore: Update example previews (#1699)

Following workin in #1689, this sets correct previews for many components

components/vf-back-to-top/vf-back-to-top.config.yml

@@ -24,6 +24,7 @@ variants:
       example: true
 # Global component context
 context:
+  exampleMultiColumns: "false"
   component-type: block
   # custom-values: passed as {{custom-values}}
   # - note: you in your custom-values you should use dashes `-`

components/vf-breadcrumbs/vf-breadcrumbs.config.yml

@@ -2,6 +2,7 @@ title: Breadcrumbs
 label: Breadcrumbs
 status: live
 context:
+  exampleMultiColumns: "false"
   component-type: block
   breadcrumbs:
     - text: Explore

components/vf-divider/vf-divider.config.yml

@@ -3,9 +3,8 @@ label: Divider
 status: live
 preview: '@preview--body'
 context:
+  exampleMultiColumns: "false"
   component-type: element
-
-
 variants:
   - name: default
   - name: fullbleed

components/vf-favicon/README.md

@@ -6,7 +6,7 @@
 
 A template to specify favicons for your site.
 
-### Usage
+## Usage
 
 ```
 {% raw %}

components/vf-figure/vf-figure.config.yml

@@ -3,6 +3,7 @@ label: Figure
 
 status: beta
 context:
+  exampleMultiColumns: "false"
   component-type: element
 
   text: Version, 1982, Adenovirus with 217 dots

components/vf-footer/vf-footer.config.yml

@@ -3,6 +3,6 @@ label: Footer
 preview: '@preview--nogrid'
 status: live
 context:
+  exampleMultiColumns: "false"
   component-type: block
-
   footer__url: 'JavaScript:Void(0);'

components/vf-global-header/vf-global-header.config.yml

@@ -4,8 +4,8 @@ preview: '@preview--nogrid'
 status: live
 
 context:
+  exampleMultiColumns: "false"
   component-type: block
-
   global_logo:
     logo_href: /
     image: ../../assets/vf-logo/assets/logo.svg

components/vf-link/vf-link--example.njk

 <div class="vf-stack vf-stack--400">
   <!-- Primary -->
-  <a href="{{link_href}}" class="vf-link">A text link</a>
+  <a href="{{link_href}}" class="vf-link">A text link</a><br/>
   <!-- Primary Hover -->
-  <a href="{{link_href}}" class="vf-link vf-link--hover">A text link with :hover</a>
+  <a href="{{link_href}}" class="vf-link vf-link--hover">A text link with :hover</a><br/>
   <!-- Primary Visited -->
-  <a href="{{link_href}}" class="vf-link vf-link--visited">A text link with :visited</a>
+  <a href="{{link_href}}" class="vf-link vf-link--visited">A text link with :visited</a><br/>
   <!-- Primary Disabled -->
-  <a href="{{link_href}}" class="vf-link" disabled>A text link that is disabled</a>
+  <a href="{{link_href}}" class="vf-link" disabled>A text link that is disabled</a><br/>
 
   <p class="vf-u-margin__bottom--0 vf-text-body vf-text-body--2">This is an example of using <a href="{{link_href}}">inline links</a> when you are using the <code>.vf-content</code> container.</p>
 </div>

components/vf-link/vf-link.config.yml

@@ -9,7 +9,11 @@ context:
   buttonType: default
 variants:
   - name: default
-    hidden: true;
+    hidden: false
     context:
       link_href: "JavaScript:Void(0);"
       text: "A default link"
+  - name: example
+    context:
+      isExample: true
+

components/vf-navigation/vf-navigation.config.yml

@@ -4,6 +4,7 @@ preview: '@preview--nogrid'
 status: live
 
 context:
+  exampleMultiColumns: "false"
   component-type: block
 
 variants:

components/vf-pagination/vf-pagination.config.yml

@@ -3,6 +3,7 @@ label: Pagination
 status: live
 
 context:
+  exampleMultiColumns: "false"
   component-type: block
 
   previous_text: Previous

components/vf-search/vf-search.config.yml

@@ -4,6 +4,7 @@ status: beta
 preview: '@preview--nogrid'
 
 context:
+  exampleMultiColumns: "false"
   component-type: block
 
 variants:

components/vf-social-links/README.md

@@ -2,6 +2,10 @@
 
 [![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-social-links.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-social-links)
 
+## About
+
+Links to social services.
+
 ## Usage
 
 ### Variants Available

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

@@ -2,6 +2,7 @@ title: Tabs
 label: Tabs
 status: live
 context:
+  exampleMultiColumns: "false"
   component-type: block
   tabs:
     - tab_title: Section