Unverified Commit dc4cd265 authored by Stuart Robson's avatar Stuart Robson Committed by GitHub
Browse files

the one that changes the vf-figure component for the better (#904)

* updates floated figures to be aligned and includes centered

* changes to figure alignment
parent 8765acb9
Pipeline #73272 passed with stages
in 2 minutes and 46 seconds
# Change Log
## 1.2.0
- Changes structure of nunjuck to add the ability to make use of props.
- Changes class selector naming from `float` to `align`.
- Adds a `align-centered` variant.
- Adds `--vf-figure__width` as a CSS Custom Property that can be overriden.
- Adds some documentation
## 1.1.0
* Adds vf-figure--float (-inline-start and -inline-end) variants
......
......@@ -2,7 +2,32 @@
[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-figure.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-figure)
## About
## Usage
The `vf-figure` componet defaults to give the image a maximum width of 100% so that it can be placed inside of a grid (like `vf-grid`) and fill the space of the grid item(s) that have been allocated by its parent.
If you need to specify the width of the component you can use the CSS custom property `--vf-figure__width` which will override the width in the CSS.
The `vf-figure` component also has some alignment class selectors available.
### Class Selectors
- `vf-figure--align`: required to align the component depending on where it is needed. This class also changes the width of the image to `auto` but can still be overriden with `--vf-figure__width`. The class also changes the `display` to `display: table` so that we can confine the `figcaption` inside of the `figure` HTML element without any overflow.
- `vf-figure--align-inline-start`: This class adds `float: left;`.
- `vf-figure--align-inline-end`: This class adds `float: right;`.
- `vf-figure--align-inline-centered`: This class adds `margin: 0 auto;`.
### Nunjucks Props
To avoid any mistyping, forgetfulness, and to aid in future proofing the component. We are using 'pseudo props' in nunjucks to determine which CSS selectors to use. All props do nothing unless included in your data for the component.
#### Props available
- `vf_figure__align_inline_start`: if set to true (`vf_figure__align_inline_start: true`) it will apply the class selectors `vf-figure--align vf-figure--align-inline-start` to `vf-figure`.
- `vf_figure__align_inline_end`: if set to true (`vf_figure__align_inline_end: true`) it will apply the class selectors `vf-figure--align vf-figure--align-inline-end` to `vf-figure`.
- `vf_figure__align_inline_centered`: if set to true (`vf_figure__align_inline_centered: true`) it will apply the class selectors `vf-figure--align vf-figure--align-inline-centered` to `vf-figure`.
## Install
......
......@@ -11,11 +11,12 @@ context:
variants:
- name: default
- name: Float Inline Start
- name: Align Inline Start
context:
override_class: vf-figure--float vf-figure--float-inline-start
text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odit facilis ducimus beatae neque officiis assumenda recusandae iure rerum magni tempore eaque, ex dolor quam repellendus error suscipit accusamus consequuntur.
- name: Float Inline End
vf_figure__align_inline_start: true
- name: Align Inline End
context:
override_class: vf-figure--float vf-figure--float-inline-end
text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.
vf_figure__align_inline_end: true
- name: Align Centered
context:
vf_figure__align_centered: true
<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 -%}">
<figure
{#- You're using an ID? Really?? That'll go here -#}
{%- if id -%} id="{{-id-}}" {%- endif %}
class="vf-figure
{%- if vf_figure__align_inline_start %} vf-figure--align vf-figure--align-inline-start{% endif -%}
{%- if vf_figure__align_inline_end %} vf-figure--align vf-figure--align-inline-end{% endif -%}
{%- if vf_figure__align_centered %} vf-figure--align vf-figure--align-centered{% endif -%}
{%- 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>
<figcaption class="vf-figure__caption">
{{- html | safe if html else text -}}
</figcaption>
</figure>
......@@ -16,15 +16,15 @@
.vf-figure__image {
height: auto;
max-width: 100%;
width: 100%;
width: var(--vf-figure__width, 100%);
}
.vf-figure--float {
.vf-figure--align {
display: table;
.vf-figure__image {
max-width: unset;
width: auto;
width: var(--vf-figure__width, auto);
}
.vf-figure__caption {
......@@ -33,10 +33,14 @@
}
}
.vf-figure--float-inline-start {
.vf-figure--align-inline-start {
float: left;
}
.vf-figure--float-inline-end {
.vf-figure--align-inline-end {
float: right;
}
.vf-figure--align-centered {
margin: 0 auto;
}
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