Unverified Commit 79c7800b authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

Feature: allow examples of variants (#1689)

* 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).
parent a67ccfb1
Pipeline #203698 passed with stages
in 7 minutes and 10 seconds
......@@ -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
......@@ -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,14 +17,26 @@ 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?
......@@ -32,6 +44,7 @@ variants:
newTheme: primary
- name: Bordered
context:
isExample: true
card_heading: A Bordered Card Heading
card_subheading: With sub–heading
variant: bordered
......@@ -39,6 +52,7 @@ 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 Link
context:
isExample: true
card_heading: A Bordered Card Heading
card_subheading: With sub–heading
variant: bordered
......@@ -47,6 +61,7 @@ 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
......@@ -54,34 +69,37 @@ variants:
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
......@@ -89,6 +107,7 @@ variants:
newTheme: primary
- name: Striped
context:
isExample: true
card_heading: A Striped Card Heading
card_subheading: With sub–heading
variant: striped
......@@ -96,14 +115,15 @@ 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: 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
......@@ -111,16 +131,6 @@ variants:
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
......
......@@ -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
......
......@@ -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
......
......@@ -2,13 +2,14 @@
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
......@@ -16,23 +17,29 @@ variants:
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:
......@@ -40,9 +47,7 @@ variants:
- 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
......
......@@ -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
......
......@@ -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] %}
......
......@@ -2,76 +2,13 @@
layout: layouts/base.njk
pageClass: components
templateEngineOverride: njk
hideSectionNavigation: true
---
{% set component = pagination.items[0] %}
{% set collectionComponents = component.items %}
{% set variants = component.variants.items %}
<div class="embl-grid">
<nav class="vf-tree vf-search-client-side--no-index">
<div class="vf-tree__inner | vf-u-padding--200">
{#- all component list -#}
{#- we're half-implement vf-tree for now until we can ... things -#}
{%- set types = ['layout', 'element', 'block', 'form', 'container', 'utility'] -%}
{%- for type in types -%}
{%- set componentList = [] -%}
{%- for item in fractalEnvironment.localComponents -%}
{# Normal "flat" components #}
{%- if item.isHidden == false and (item.variants.items[0].context['component-type'] == type or item.variants.items[0].context['component-type'] == 'embl-' + type) -%}
{% set componentList = (componentList.push({ "text": item.title, "link_list_href": ('/components/' + item.handle) | string | url }),componentList) %}
{%- endif -%}
{# Handle component collections #}
{%- if item.isCollection == true %}
{%- for collection in item.items %}
{% if collection.isHidden == false and (collection.variants.items[0].context['component-type'] == type or collection.variants.items[0].context['component-type'] == 'embl-' + type) %}
{# <pre>{{ item | dump(2)}}</pre> #}
{% set componentList = (componentList.push({ "text": collection.title, "link_list_href": ('/components/' + item.handle + '/' + collection.handle) | string | url }),componentList) %}
{%- endif %}
{%- endfor %}
{%- endif %}
{%- endfor -%}
{%- render '@vf-link-list--tight', {
"component-type": "block",
"component_modifier": "vf-links--tight vf-links__list--s",
"title": type | title,
"list_modifier": "secondary",
"list":
componentList
} -%}
{% endfor -%}
<!-- some tools don't have a natural place in the component library and are linked to githup -->
<h3 class="vf-links__heading">Tools</h3>
<ul class="vf-links__list vf-links__list--secondary | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions">
VF extensions
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-extensions-react/README.md">
React extensions
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-compilation">
Sass compilation
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator">
Component generator
</a>
</li>
</ul>
</div>
</nav>
<div class="vf-grid">
<section class="vf-content component-library-notes | vf-stack vf-stack--400">
{# for any content set in the page, this is most likely blank #}
......@@ -109,35 +46,47 @@ templateEngineOverride: njk
"theme": "tertiary"
} %}
{% include "vf-core-components/vf-badge/vf-badge.njk" %}
It is strongly recommended that this <strong>not to be used</strong>. Read below for advice on how to migrate.</p></div>
It is strongly recommended that this <strong>not to be used</strong>.</p></div>
</div>
{%- endif %}
<h1>
{{ component.title }}
{# {{component.baseHandle}} #}
{% if collectionComponents %}
{% else %}
<a class="vf-link" href="https://github.com/visual-framework/vf-core/tree/develop/components/{{component.baseHandle}}"><img src="https://img.shields.io/badge/github-{{component.baseHandle | replace("-","--")}}-blue" alt="github location" /></a>
<a class="vf-link" href="https://badge.fury.io/js/%40visual-framework%2F{{component.baseHandle}}"><img src="https://badge.fury.io/js/%40visual-framework%2F{{component.baseHandle}}.svg" alt="npm version"></a>
{# <a href="https://www.npmjs.com/package/@visual-framework/{{component.baseHandle}}">npm</a> #}
{% endif %}
</h1>
{% if component.handle == "vf-design-tokens" %}
{% markdown %}
[View the design token docs](/design-tokens/)
{% endmarkdown %}
{% endif %}
{# <pre>{{ component | dump(2)}}</pre> #}
{# readme.md #}
{% if component.notes %}
{% if collectionComponents %}
{% else %}
{% set componentLinks %}
<a class="vf-link" href="https://github.com/visual-framework/vf-core/tree/develop/components/{{component.baseHandle}}"><img src="https://img.shields.io/badge/github-{{component.baseHandle | replace("-","--")}}-blue" alt="github location" /></a>
<a class="vf-link" href="https://badge.fury.io/js/%40visual-framework%2F{{component.baseHandle}}"><img src="https://badge.fury.io/js/%40visual-framework%2F{{component.baseHandle}}.svg" alt="npm version"></a>
{% endset %}
{% endif %}
{% set readmeAbout = component.notes | string | stringBetween("## About", "\n## ") %}
<p class="vf-lede">
{% if readmeAbout %}{{ readmeAbout | markdown | safe | striptags }}{% endif %}
</p>
{% if readmeAbout %}
{% set readmeAbout = readmeAbout | markdown | safe | striptags | string %}
{% render '@vf-intro', {
"id": "about",
"vf_intro_heading": component.title,
"vf_intro_badge": {
"style": [
"phases"
],
"text": variants[0].context['component-type'],
"theme": "primary",
"badge_href": "/components#" + variants[0].context['component-type']
},
"vf_intro_subheading": "",
"vf_intro_lede": readmeAbout.val,
"vf_intro_text": [
componentLinks
]
} %}
{% endif %}
{% endif %}
<hr class="vf-divider" />
......@@ -162,60 +111,72 @@ templateEngineOverride: njk
{% endif %}
{# Table of contents #}
{% set navigationList = [
{
"text": "Usage",
"link_list_href": "#usage"
},
{
"text": "Variants",
"link_list_href": "#variants"
},
{
"text": "Examples",
"link_list_href": "#examples"
},
{
"text": "Install",
"link_list_href": "#install"
},
{
"text": "Changelog",
"link_list_href": "#changelog"
},
{
"text": "Assets",
"link_list_href": "#assets"
}
] %}
{% render '@vf-link-list', {
"component_modifier": "vf-links__list--easy",
"title": "On this page",
"svg": true,
"list":
navigationList
} %}
{% if variants %}
{% if variants | length > 1 %}
{# If more than 1 variant type, show a heading #}
<h3 id="variants">Variants</h3>
{# Variant table of contents #}
{%- set variantList = [] -%}
{%- for variant in variants %}
{% if variant.isHidden == false%}
{% set variantList = (variantList.push({
"text": variant.title,
"link_list_href": '#' + variant.handle
}), variantList)
%}
{% endif %}
{% endfor %}
{% render '@vf-link-list', {
"component_modifier": "vf-links__list--easy",
"title": "",
"svg": true,
"list":
variantList
} %}
<hr class="vf-divider" />
{% endif %}
{% endif %}
<hr class="vf-divider" />
{% if component.notes %}
{% set readmeUsage = component.notes | string | stringBetween("## Usage", "\n## ") %}
{% if readmeUsage %}
<section class="vf-u-margin__top--800">
{% render '@vf-heading--display', {
"type": 1,
"heading": "Usage",
"id": "usage",
"style": "invert",
"tags": "h2"
<section class="embl-grid">
{% render '@vf-section-header', {
"section_title": "Usage",
"id": "Usage",
"href": ""
} %}
<article>
{{ readmeUsage | markdown | safe }}
</article>
</section>
{{ readmeUsage | markdown | safe }}
{% endif %}
{% endif %}
{# ---- #}
{% if variants %}
{% render '@vf-heading--display', {
"type": 1,
"heading": "Variants",
"id": "variants",
"style": "invert",
"tags": "h2"
} %}
{%- for variant in variants %}
{% if variant.isHidden == false%}
{% if variants | length > 1 %}
{% if variant.isHidden == false and variant.context['isExample'] != true %}
{% if variants | length > 1 %}
{# If more than 1 variant type, show variant specific details #}
{% render '@vf-section-header--is-a-link', {
"section_title": "" + variant.label + " variant",
"id": variant.handle,
......@@ -226,25 +187,24 @@ templateEngineOverride: njk
<article class="vf-stack vf-stack--lg vf-u-margin__bottom--1200"
style="clear: both; /* insurance against strange components */"
>
{% if component.baseHandle == 'vf-u-fullbleed' %}
{# these get a fake iframe #}
<article class="vf-box vf-box--outline" style="
overflow: scroll;
margin: 0;
padding: 0;
">
{% render '@'+variant.handle, variant.context %}
</article>
{% else %}
<div class="vf-box"
style="overflow: auto; background-image: linear-gradient(45deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(135deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(59, 111, 182, .1) 75%), linear-gradient(135deg, transparent 75%, rgba(59, 111, 182, .1) 75%);background-size: 20px 20px; background-position-x: 0px, 10px, 10px, 0px;background-position-y: 0px, 0px, -10px, 10px;"
>
{# When you want a box with a slight shadow #}
{% if variants[0].context['exampleMultiColumns'] != "false" and (variants[0].context['component-type'] == "block" or variants[0].context['component-type'] == "element") %}
<section class="vf-grid vf-grid__col-3">
<div><!--empty--></div>
{% endif %}
{% if component.baseHandle == 'vf-u-fullbleed' %}
{% render '@'+variant.handle, variant.context %}
</div>
{% else %}
<div class="vf-u-padding--400"
style="overflow: auto; background-image: linear-gradient(45deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(135deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(59, 111, 182, .1) 75%), linear-gradient(135deg, transparent 75%, rgba(59, 111, 182, .1) 75%);background-size: 20px 20px; background-position-x: 0px, 10px, 10px, 0px;background-position-y: 0px, 0px, -10px, 10px;"
>
{# When you want a box with a slight shadow #}
{% render '@'+variant.handle, variant.context %}
</div>
{% endif %}
{% if variants[0].context['exampleMultiColumns'] != "false" and (variants[0].context['component-type'] == "block" or variants[0].context['component-type'] == "element") %}
<div><!--empty--></div>
</section>
{% endif %}