Commit f036dcc8 authored by Stuart Robson's avatar Stuart Robson Committed by Ken Hawkins
Browse files

refactor vf-element components to make use of yaml/nunjucks (#363)

* updates vf-blockquote to use yaml and adds id/class overrides

* a little blockquote fix

* updates buttons to use yaml to generate variants

* updates divider to allow for overiding classes/ids

* updates figure to allow for overiding classes/ids

* updates logo to allow for overiding classes/ids and use of data

* update vf-list to use YAML

* a refactor of the initial templating for vf-heading

* updates vf-text to make use of taml data and nunjucks logic

* Add http before link
parent 0c7c0480
Pipeline #17363 passed with stages
in 2 minutes and 11 seconds
......@@ -4,3 +4,4 @@ preview: '@preview--elements'
status: beta
context:
component-type: element
text: “Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.“
<blockquote class="vf-blockquote">
“Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better “
<blockquote
{# You're using an ID? Really?? That'll go here #}
{% if id %} id="{{-id-}}"{% endif %}
{# Here is where we are adding the vf-text--body modifier #}
class="vf-blockquote
{%- if override_class %} | {{override_class}}{% endif -%}">
{{- html | safe if html else text -}}
</blockquote>
<button class="vf-button vf-button--outline vf-button--primary">An Primary Outline Button</button>
<button class="vf-button vf-button--outline vf-button--secondary">A Secondary Outline Button</button>
<button class="vf-button vf-button--outline vf-button--tertiary">A Tertiary Outline Button</button>
<button class="vf-button vf-button--s vf-button--primary">A Small Button</button>
<button class="vf-button vf-button--primary">A Regular Button</button>
<button class="vf-button vf-button--l vf-button--primary">A Large Button</button>
<button class="vf-button vf-button--primary">A Primary Button</button>
<button class="vf-button vf-button--secondary">A Secondary Button</button>
<button class="vf-button vf-button--tertiary">A Tertiary Button</button>
<button class="vf-button vf-button--pill vf-button--primary" href="#">A Pill Button</button>
<a class="vf-button vf-button--pill vf-button--primary " href="#">A Pill Button</a>
<button class="vf-button vf-button--rounded vf-button--primary">A Rounded Button</button>
......@@ -4,3 +4,57 @@ preview: '@preview--elements'
status: beta
context:
component-type: element
variants:
- name: default
hidden: true
context:
text: alpha
- name: primary
context:
text: a primary button
theme: primary
- name: secondary
context:
text: a secondary button
theme: secondary
- name: tertiary
context:
text: a tertiary button
theme: tertiary
- name: small
context:
text: a small button
theme: primary
style: ["s"]
- name: regular
context:
text: a regular button
theme: primary
style: ["r"]
- name: large
context:
text: a large button
theme: primary
style: ["l"]
- name: pill
context:
text: a pill style
style: ["pill"]
theme: primary
- name: rounded
context:
text: a rounded style
style: ["rounded"]
theme: primary
- name: outline
context:
text: an outline style
style: ["outline"]
theme: primary
- name: link
context:
text: an link variant
href: https://example.com/
theme: primary
<button class="vf-button vf-button--primary">I am a button</button>
{# Determine type of element to use, if not explicitly set -#}
{% if href %}
{% set tags = 'a' %}
{% else %}
{% set tags = 'button' %}
{% endif %}
{# Work out what colour theme is needed for the styling #}
{% if theme %}
{% set theme_class = theme %}
{% endif %}
<{{tags}}
{# If there's an href put it here #}
{%- if tags == 'a' %}
href="{{ href if href else '#' }}"
{%- endif %}
{# You're using an ID? Really?? That'll go here #}
{% if id %} id="{{-id-}}"{% endif %}
class="vf-button
{#- This will list the them classname #}
{%- if theme_class %} vf-button--{{theme_class}}{% endif %}
{# If you're styling the shape of the item, the classnames will render in this for loop #}
{%- if style %}
{% for styles in style %} vf-button--{{styles}}{% endfor -%}
{% endif -%}
{# You want a snowflake of a classname for something, here you #}
{%- if override_class %} | {{override_class}}{% endif -%}
">
{{- html | safe if html else text -}}
</{{tags}}>
<hr class="vf-divider">
<hr
{# You're using an ID? Really?? That'll go here #}
{% if id %} id="{{-id-}}"{% endif %}
{# Here is where we are adding the vf-text--body modifier #}
class="vf-divider
{%- if override_class %} | {{override_class}}{% endif -%}">
......@@ -4,3 +4,7 @@ preview: '@preview--elements'
status: alpha
context:
component-type: element
text: Version, 1982, Adenovirus with 217 dots
alttext: hello alt text
imageUrl: "/assets/vf-figure/assets/figure-example.png"
<figure class="vf-figure">
<img class="vf-figure__image" src="{{ '/assets/vf-figure/assets/figure-example.png' | path }}" alt="">
<figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots</figcaption>
<figure
{# You're using an ID? Really?? That'll go here #}
{% if id %} id="{{-id-}}"{% endif %}
class="vf-figure
{%- if override_class %} | {{override_class}}{% endif -%}">
<img class="vf-figure__image" src="{{imageUrl}}" alt="{{alttext}}">
<figcaption class="vf-figure__caption">{{- html | safe if html else text -}}</figcaption>
</figure>
......@@ -2,19 +2,35 @@ title: Visual Framework Headings
label: Headings
preview: '@preview--elements'
status: beta
variants:
- name: template
hidden: true
context:
component-type: element
vf_heading_modifiers:
- type: display
title: This heading size is display and inverted
- type: extra-large
title: This heading size is extra large
- type: large
title: This heading size is large
- type: regular
title: This heading size is regular
- type: small
title: This heading size is small
variants:
- name: default
hidden: true
- name: display
context:
type: display
heading: This heading size is extra large and inverted
style: invert
tags: h1
- name: extra-large
context:
type: extra-large
heading: This heading size is extra large
tags: h1
- name: large
context:
type: large
heading: This heading size is large
tags: h2
- name: regular
context:
type: regular
heading: This heading size is regular
tags: h3
- name: small
context:
type: small
heading: This heading size is smalls
tags: h4
{#
Pass in your display type and title:
{% render '@vf-heading', {"type": "large", "title": "large"} %}
#}
{% spaceless %}
{#
Set our data for the template
#}
{# Determine type of element to use, if not explicitly set -#}
{% if tags %}
{% else %}
{% set tags = 'p' %}
{% endif %}
{# Work out what colour theme is needed for the styling #}
{% if style %}
{% set style_class = style %}
{% endif %}
{% if type and title %}
{% set vf_heading_modifiers = [{ "type": type, "title" : title}] %}
{# Set font-size class to be used #}
{% if type == "display" %}
{% set size = "xl" %}
{% elseif type == "extra-large" %}
{% set size = "xl" %}
{% elseif type == "large" %}
{% set size = "l" %}
{% elseif type == "regular" %}
{% set size = "r" %}
{% elseif type == "small" %}
{% set size = "s" %}
{% endif %}
{#
Template
If type && title are not passed it will use default modifiers in the component YAML
#}
{% for modifier in vf_heading_modifiers %}
{% if modifier.type == "display" -%}
<h1 class="vf-text vf-text--heading-xl vf-text--invert">{{modifier.title}}</h1>
{% elif modifier.type == "extra-large" -%}
<h2 class="vf-text vf-text--heading-xl">{{modifier.title}}</h2>
{% elif modifier.type == "large" -%}
<h3 class="vf-text vf-text--heading-l">{{modifier.title}}</h3>
{% elif modifier.type == "regular" -%}
<h4 class="vf-text vf-text--heading-r">{{modifier.title}}</h4>
{% elif modifier.type == "small" -%}
<h5 class="vf-text vf-text--heading-s">{{modifier.title}}</h5>
{% else -%}
{# catch all for if the heading type doesn't match #}
<h5 class="vf-text vf-text--heading-s">{{modifier.title}}</h5>
{% endif %}
{% endfor %}
<{{tags}}
{# You're using an ID? Really?? That'll go here #}
{%- if id %} id="{{-id-}}"{% endif %}
class="vf-text
{%- if type %} vf-text--heading-{{size}}{% endif -%}
{%- if style_class %} vf-text--{{style_class}}{% endif -%}
{# You want a snowflake of a classname for something, here you #}
{%- if override_class %} | {{override_class}}{% endif -%}
">
{{- html | safe if html else heading -}}
</{{tags}}>
{% endspaceless %}
<ul class="vf-list vf-list--inline">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
</ul>
<ol class="vf-list vf-list--ordered">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<ol class="vf-list vf-list--ordered">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
<ol class="vf-list vf-list--ordered">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
</ol>
</ol>
</ol>
<ul class="vf-list vf-list--unordered">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
</ul>
......@@ -2,9 +2,38 @@ title: Visual Framework Lists
label: Lists
preview: '@preview--elements'
status: alpha
variants:
- name: default
label: Block
title: "vf-list component: Block"
context:
component-type: element
variants:
- name: default
context:
list:
- a list item
- another list item
- and another list item
- yet another list item
- name: inline
context:
list_type: inline
list:
- a list item
- another list item
- and another list item
- yet another list item
- name: ordered
context:
list_type: ordered
list:
- a list item
- another list item
- and another list item
- yet another list item
- name: unordered
context:
list_type: unordered
list:
- a list item
- another list item
- and another list item
- yet another list item
<ul class="vf-list">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
<ul
{# You're using an ID? Really?? That'll go here #}
{% if id %} id="{{-id-}}"{% endif %}
class="vf-list
{%- if list_type %} vf-list--{{list_type}}{% endif %}
{%- if override_class %} | {{override_class}}{% endif -%}
">
{% for item in list %}
<li class="vf-list__item">{{item}}</li>
{% endfor %}
</ul>
<a href="/" class="vf-logo--responsive"></a>
<a href="{{href}}"
{# You're using an ID? Really?? That'll go here #}
{% if id %} id="{{-id-}}"{% endif %}
class="vf-logo--responsive
{%- if override_class %} | {{override_class}}{% endif -%}">
<span class="vf-sr-only">{{sreen_reader_text}}</span>
</a>
......@@ -3,3 +3,5 @@ label: Logo
preview: '@preview--elements'
context:
component-type: element
href: http://www.embl.de
sreen_reader_text: Visual Framework 2.0
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment