Feature: allow examples of variants (#1689)

khawkins98 · web-flow · commit 79c7800bd672 · 2021-10-15T15:30:51.000+02:00
* Feature: allow examples of variants Adds technical support to facilitate #1530 by: 1. Adding a new component cotnext variable `isExample: true` 2. Adding template support in the component library While these are technically new variants, they do not generate additional template files and are shown in contextually appropriate way. Incroporating examples also brings some required updates to the layout of the component pages — most of which have been overdue, such as removing the tree layout (whose function is planned to be replaced by the forthcoming mega menu).
diff --git a/components/vf-badge/vf-badge.config.yml b/components/vf-badge/vf-badge.config.yml
@@ -8,6 +8,7 @@ variants:
     hidden: true
     context:
       text: alpha
+      theme: primary
 
   - name: primary
     context:
@@ -16,16 +17,19 @@ variants:
 
   - name: secondary
     context:
+      isExample: true
       text: alpha
       theme: secondary
 
   - name: tertiary
     context:
+      isExample: true
       text: alpha
       theme: tertiary
 
   - name: link - primary
     context:
+      isExample: true
       badge_href: "JavaScript:Void(0);"
       theme: primary
       text: beta
diff --git a/components/vf-card/vf-card.config.yml b/components/vf-card/vf-card.config.yml
@@ -2,7 +2,7 @@
 title: Card
 # Label shown on index pages
 label: Card
-status: beta
+status: live
 # preview: '@preview--nogrid'
 # The template used from /components/_previews
 #
@@ -17,28 +17,42 @@ variants:
 
   # Bordered Variants
   # -----------------
-  - name: Bordered Headings
+  - name: Bordered
     context:
       card_heading: A Bordered Card Heading
       card_subheading: With sub–heading
       variant: bordered
       newTheme: primary
+      card_href: "JavaScript:Void(0);"
+      card_image: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg
+      card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
+      card_image__alt: Image alt text
+  - name: Bordered Headings
+    context:
+      isExample: true
+      card_heading: A Bordered Card Heading as an example
+      card_subheading: With sub–heading
+      variant: bordered
+      newTheme: primary
   - name: Bordered Headings with Link
     context:
+      isExample: true
       card_heading: A Bordered Card Heading
       card_href: "JavaScript:Void(0);"
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
       variant: bordered
       newTheme: primary
   - name: Bordered
     context:
+      isExample: true
       card_heading: A Bordered Card Heading
       card_subheading: With sub–heading
       variant: bordered
       newTheme: primary
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
   - name: Bordered with Link
     context:
+      isExample: true
       card_heading: A Bordered Card Heading
       card_subheading: With sub–heading
       variant: bordered
@@ -47,80 +61,76 @@ variants:
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
   - name: Bordered with Image
     context:
+      isExample: true
       card_heading: A Bordered Card Heading
       card_subheading: With sub–heading
       variant: bordered
       newTheme: primary
       card_image: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
       card_image__alt: Image alt text
-  - name: Bordered with Image and Link
+  - name: Bordered with Image and no Heading
     context:
-      card_heading: A Bordered Card Heading
-      card_subheading: With sub–heading
+      isExample: true
       variant: bordered
       newTheme: primary
-      card_href: "JavaScript:Void(0);"
       card_image: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
       card_image__alt: Image alt text
-  - name: Bordered with Image and no Heading
+
+  # Striped Variants
+  # ----------------
+  - name: Striped
     context:
-      variant: bordered
+      card_heading: A Striped Card Heading
+      card_subheading: With sub–heading
+      variant: striped
       newTheme: primary
+      card_href: "JavaScript:Void(0);"
       card_image: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
       card_image__alt: Image alt text
-
-  # Striped Variants
-  # ----------------
   - name: Striped only Headings
     context:
+      isExample: true
       card_heading: A Striped Card Heading
       card_subheading: With sub–heading
       variant: striped
       newTheme: primary
   - name: Striped only linked Headings
     context:
+      isExample: true
       card_heading: A Striped Card Heading
       card_href: "JavaScript:Void(0);"
       card_subheading: With sub–heading
       variant: striped
       newTheme: primary
   - name: Striped
     context:
+      isExample: true
       card_heading: A Striped Card Heading
       card_subheading: With sub–heading
       variant: striped
       newTheme: primary
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
   - name: Striped with Link
     context:
+      isExample: true
       card_heading: A Striped Card Heading
       variant: striped
       newTheme: primary
       card_href: "JavaScript:Void(0);"
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
-
   - name: Striped with Image
     context:
+      isExample: true
       card_heading: A Striped Card Heading
       card_subheading: With sub–heading
       variant: striped
       newTheme: primary
       card_image: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg
       card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
       card_image__alt: Image alt text
-  - name: Striped with Image and Link
-    context:
-      card_heading: A Striped Card Heading
-      card_subheading: With sub–heading
-      variant: striped
-      newTheme: primary
-      card_href: "JavaScript:Void(0);"
-      card_image: https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg
-      card_text: Lorem ipsum dolor sit amet, consectetur <a href="JavaScript:Void(0);" class="vf-card__link">adipisicing elit</a>. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?
-      card_image__alt: Image alt text
 
 
 
diff --git a/components/vf-embed/vf-embed.config.yml b/components/vf-embed/vf-embed.config.yml
@@ -11,24 +11,23 @@ variants:
     label: 16x9
     context:
       vf_embed_variant_16x9: true
-
   - name: 4x3
     context:
       vf_embed_variant_4x3: true
-
   - name: 16x9 and max-width
     context:
+      isExample: true
       vf_embed_variant_16x9: true
       vf_embed_max_width: 480px
-
   - name: custom
     context:
+      isExample: true
       vf_embed_variant_custom: true
       vf_embed_custom_ratio_X: 7
       vf_embed_custom_ratio_Y: 2
-
   - name: custom and max-width
     context:
+      isExample: true
       vf_embed_max_width: 600px
       vf_embed_variant_custom: true
       vf_embed_custom_ratio_X: 11
diff --git a/components/vf-table/README.md b/components/vf-table/README.md
@@ -2,6 +2,10 @@
 
 [![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-table.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-table)
 
+## About
+
+Ever useful for presentation of tabular information and data — never to be used for layout.
+
 ## Usage
 
 ### CSS Class Reference
@@ -13,7 +17,6 @@
 | `vf-table--bordered` | `vf-table` | adds a border around all elements                                      |
 | `vf-table--compact`  | `vf-table` | Reduces the padding on the heading and cells                           |
 | `vf-table--loose`    | `vf-table` | Increases the padding on the heading and cells                         |
-|                      |            |                                                                        |
 
 ## Install
 
diff --git a/components/vf-table/vf-table.config.yml b/components/vf-table/vf-table.config.yml
@@ -2,47 +2,52 @@
 title: Table
 # Label shown on index pages
 label: Table
-status: alpha
+status: beta
 
 variants:
   - name: default
 
   - name: has footer
     context:
+      isExample: true
       table_footer:
         - text: Hello
           colspans: 3
         - text: world
           colspans: 1
   - name: has caption
     context:
+      isExample: true
       table_caption: Hello Caption
   - name: has row heading
     context:
+      isExample: true
       firstCellIsHeader: true
   - name: actions
     context:
+      isExample: true
       inline_actions:
         - edit
         - delete
   - name: sortable
     context:
+      isExample: true
       sortable: true
   - name: selectable
     context:
+      isExample: true
       selectable: true
   - name: selectable (selected)
     context:
+      isExample: true
       selected: true
       selectable: true
       actions:
         - edit
         - delete
         - download
         - cancel
-
-
-
+  # Deprecated variants
   - name: striped
     hidden: true
     status: deprecated
@@ -95,16 +100,14 @@ variants:
 
 context:
   component-type: block
-
+  exampleMultiColumns: "false"
   count: 0
-
   table_headings:
     - title: Event
     - title: Date
       sorted: top
     - title: Type
     - title: Location
-
   table_rows:
     -
       - selected_row: true
diff --git a/tools/vf-component-generator/templates/_component.config.yml b/tools/vf-component-generator/templates/_component.config.yml
@@ -11,6 +11,7 @@ status: alpha
   #   label: Default
   #   hidden: true
   #   context:
+  #     isExample: true # if this only demonstrates usage
   #     children_are_possible:
   #       variant_title: A Easy Card Title 1
   #       variant_href: "JavaScript:Void(0);"
@@ -19,8 +20,9 @@ status: alpha
 # Global component context
 context:
   component-type: <%= componentType %>
+  exampleMultiColumns: "true" # shows component previews in a smaller layout space (must be wrapped in "quotes")
   # custom-values: passed as {{custom-values}}
-  # - note: you in your custom-values you should use dashes `-` 
+  # - note: you in your custom-values you should use dashes `-`
   #         and not underscores `_` as underscores prevent inherited template use
   # title: Title text
   # text: String of text
diff --git a/tools/vf-component-library/src/site/_includes/layouts/base.njk b/tools/vf-component-library/src/site/_includes/layouts/base.njk
@@ -92,6 +92,12 @@
             <a href="{{ siteConfig.sections[section].url | url }}" class="vf-breadcrumbs__link">{{ siteConfig.sections[section].title }}</a>
           </li>
         {% endif %}
+        {# Components #}
+        {% if pagination.items[0] %}
+          <li class="vf-breadcrumbs__item">
+            <a href="/components" class="vf-breadcrumbs__link">Components and patterns</a>
+          </li>
+        {% endif %}
         {# Handle child components #}
         {% if pagination.items[0] %}
           {% if pagination.items[0].name.split('__')[1] %}
diff --git a/tools/vf-component-library/src/site/_includes/layouts/components.njk b/tools/vf-component-library/src/site/_includes/layouts/components.njk
diff --git a/tools/vf-component-library/src/site/_includes/navigation-component-list.njk b/tools/vf-component-library/src/site/_includes/navigation-component-list.njk
