GitLab

* small changes to the max-width

* updates tokens

* updates a bit

* some bits

* vf-body changelog version snafu

Add documentation and example on disabling the 1.4 data protection banner, as you should use the 2.0 data protection banner from the contentHub

* fixes some issues with vf-grid when in IE11 land

* fixes changelog typo

* style(vf-form__checkbox): resizes checkbox and adds better hover state

We have made the checkbox smaller. Going from 24px to 16px. We have also introduced a better hover
state where the tick is shown on hover

* docs(vf_form__core--example): updates the example page for all vf-form components

Added the vf-stack component to control the spacing

* fix(vf-form__helper): removes the bottom margin on the error helper

This relates to the change in vf-form__item where we are now using vf-stack to control spacing

BREAKING CHANGE: This requires the updated vf-form__item to control the spacing

* style(vf-form__input): refreshes styling of input and required asterick, adds vf-stack to examples

We have reduced the border size and colour of the inputs and reduced the internal spacing. We have
also added the vf-stack element to the examples in the nunjucks file. The reqiured astericks has
also been repositioned to match the new spacing of the input

* feat(vf-form__item): adds vf-stack to the wrapper, changes inline variant, adds custom stack margin

Added the vf-stack component to the wrapper so that we can space the elements of a form item inside
it. Adds a custom stack spacing unit to determine the size of margin. Makes the inline variant tell
the labels to use inline-flex

* style(vf-form__label): removes margins, adds flex and align items

* style(vf-form__radio): makes checked button smaller circle inside border, adds hover state

* style(vf-form__select): reduces border size, changes color, matches padding of vf-form__input

* style(vf-form__textarea): updates border size and colour, and padding to match other inputs

* removes placeholders because idk UX

* fixes error styling and form item hierarchy

* changes hover and focus effect for radio and checkboxes

* fixes issues with inline checkboxes and radios

* all the changelogs

* Typo

* Changelog formatting, github PR link

* Remove placeholder changelog text

* fixes 04px and makes them rems too

* adds hover/focus shadow like the cards
Co-authored-by: Ken Hawkins <khawkins98@gmail.com>

* improves spacing and usability of teaser

* removes leftover hover effect from card
Co-authored-by: Stuart Robson <sr@Stuarts-MacBook-Air.local>

This commit moves the example content for vf-intro into the 'variants' section of the .yml file so
that it should not be printed if people are u

I noticed it was hard to find information about VF components from some parts of the component library.

Noticed a couple of links were out of date and the developing setting up guide wasn't as easy to get to as it should be.

* bug: section-header-closing-tag

There was an extra `}` in the Nunjucks template that was corrupting the html.

This doesn't do anything exotic, but creates a standard reference of how an EBI page has the black bar and the VF 2.0 footer.

More work to be done but will ease a lot of confusion by EBI devs.

It also updates the _data/containers to link to the njk templates in a way that works for vf-component-library.

* Bug: vf-intro usage of vf_intro_subheading

While working on #1325 I ntoiced that `vf_intro_subheading` was missing from the context in vf-intro.njk, also the README.md had some invalid syntax.

Co-authored-by: Renovate Bot <bot@renovateapp.com>

Now that we have an EBI VF 2.0 footer, this updates it.

Co-authored-by: Renovate Bot <bot@renovateapp.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ken Hawkins <khawkins98@gmail.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* Chore: cleanup vf dependencies

I noticed a few unused dependencies languishing.

This removes them and does a little bit of linting.

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ken Hawkins <khawkins98@gmail.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* enhancment: drop cssnano for native minification

I noticed some odd output during the cssnano step:

```
[16:40:28] Starting 'vf-css:production'...
--vf-cluster-margin [
  {
    index: 40,
    token: '-',
    type: 9,
    eval: [Function: sub],
    precedence: 1,
    show: '-'
  },
...
```

Looking further I realised gulp-cssnano was a major version behind on cssnano, and investigating further I realised that dart sass now has native minifcation: https://github.com/sass/dart-sass/issues/221

So this PR:

- drops cssnano
- uses dart sass native minification
- resolves the junk output in the build process
- uses latest dart-sass version

This resolves the issue by wrapping in a `try` statement. It also warns if vfTabs or vfBanner functions aren't found, as they should be used by official EMBL sites using the contentHub loader.

vfTabs is more optional, but vfBanner is a "must" for the data protection banner.

Closes #809

* Bug: missing imports in component index.scss files

Several components were missing the vf-global-variables from their index.scss file, resulting in this on the compontent css build:

```
[18:28:47] Starting 'vf-css:generate-component-css'...
[18:28:47] Finished 'vf-css:generate-component-css' after 1.29 ms
Error: Undefined variable.
  ╷
6 │ @mixin set-type($font-size, $font-family: $global-font-family, $custom-margin-bottom: auto) {
  │                                           ^^^^^^^^^^^^^^^^^^^
  ╵
  ../../components/vf-sass-config/mixins/_typography.scss 6:43  set-type()
  ../../components/vf-heading/vf-heading.scss 17:3              @import
  ../../components/vf-section-header/index.scss 9:9             root stylesheet
Error: Undefined variable.
   ╷
22 │     @if $vf-include-normalisations == true {
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  ../../components/vf-sass-config/mixins/_typography.scss 22:9    set-type()
...
```

This resolves that.

* Add changelogs

* Restructures that link between tabs from a sequential relationship to an explicit relationship based off the tab href and panel id.
  * https://github.com/visual-framework/vf-core/issues/1136
* This is a non-breaking change that may be further improved with an optional data-vf-js-tab-id

Fixes #1136

* Improve Eleventy-Fractal integration to avoid unnecessary Eleventy rebuilds on Sass and JS updates.

Co-authored-by: Renovate Bot <bot@renovateapp.com>

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* small updates to the image CSS

* updates docs and changelog

* updates the global header to work with the stack layout on body

* updates main navigation to account for the stack

This addresses the long-lingering #1036, where we've been sprinkling local CSS to achieve a "Featured news" container.

Even though the vf-summary and vf-news-container have uncertain futures, this would stop the propogation of "local CSS" across sites to enable a smoother transition to "the new thing", once we figure out what it is.

* Chore: update changelog guidance

Mostly to use periods.

Closes #1286

* Typo

Co-authored-by: Renovate Bot <bot@renovateapp.com>