diff --git a/components/vf-design-tokens/CHANGELOG.md b/components/vf-design-tokens/CHANGELOG.md
index 0753999084..388119a922 100644
--- a/components/vf-design-tokens/CHANGELOG.md
+++ b/components/vf-design-tokens/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 3.1.0
+
+* adds `--1600` (`4rem`) spacing token.
+
### 3.0.0
* We're moving the documentation to the `vf-component-library`
diff --git a/components/vf-design-tokens/dist/json/vf-spacing.ios.json b/components/vf-design-tokens/dist/json/vf-spacing.ios.json
index 5aa1375e84..1a7f67ea7d 100644
--- a/components/vf-design-tokens/dist/json/vf-spacing.ios.json
+++ b/components/vf-design-tokens/dist/json/vf-spacing.ios.json
@@ -107,6 +107,18 @@
"CSSCustomProperty": "--vf-spacing--1200",
"comment": null
}
+ },
+ {
+ "type": "number",
+ "category": "spacing",
+ "name": "vfSpacing1600",
+ "value": "4rem",
+ "meta": {
+ "friendlyName": "Spacing 1600",
+ "sassVariable": "$vf-spacing--1600",
+ "CSSCustomProperty": "--vf-spacing--1600",
+ "comment": null
+ }
}
]
}
\ No newline at end of file
diff --git a/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss b/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss
index b9bb1822d8..bc0ed731cc 100644
--- a/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss
+++ b/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss
@@ -13,4 +13,5 @@
--vf-spacing--600: 1.5rem;
--vf-spacing--800: 2rem;
--vf-spacing--1200: 3rem;
+ --vf-spacing--1600: 4rem;
}
diff --git a/components/vf-design-tokens/dist/sass/maps/vf-spacing.map.scss b/components/vf-design-tokens/dist/sass/maps/vf-spacing.map.scss
index f66c714772..5a0aa2a089 100644
--- a/components/vf-design-tokens/dist/sass/maps/vf-spacing.map.scss
+++ b/components/vf-design-tokens/dist/sass/maps/vf-spacing.map.scss
@@ -13,4 +13,5 @@ $vf-spacing-map: (
'vf-spacing--600': (1.5rem),
'vf-spacing--800': (2rem),
'vf-spacing--1200': (3rem),
+ 'vf-spacing--1600': (4rem),
);
diff --git a/components/vf-design-tokens/src/maps/vf-spacing.yml b/components/vf-design-tokens/src/maps/vf-spacing.yml
index 7c479a0b99..2499734350 100644
--- a/components/vf-design-tokens/src/maps/vf-spacing.yml
+++ b/components/vf-design-tokens/src/maps/vf-spacing.yml
@@ -62,6 +62,13 @@ props:
sassVariable: $vf-spacing--1200
CSSCustomProperty: --vf-spacing--1200
comment:
+ - name: vf-spacing--1600
+ value: 4rem
+ meta:
+ friendlyName: Spacing 1600
+ sassVariable: $vf-spacing--1600
+ CSSCustomProperty: --vf-spacing--1600
+ comment:
global:
type: number
category: spacing
diff --git a/components/vf-hero/CHANGELOG.md b/components/vf-hero/CHANGELOG.md
index c11ae77bfb..4b30da47b2 100755
--- a/components/vf-hero/CHANGELOG.md
+++ b/components/vf-hero/CHANGELOG.md
@@ -1,7 +1,21 @@
+### 2.0.0
+
+* introduces new naming convention for design variants.
+ * `--inverted`: that inverts the foreground and background colours
+ * `--flush`: pulls the `vf-hero__content` to the bottom of the `vf-hero`.
+ * `--offset`: pulls the `vf-hero__content` below the `vf-hero` container.
+ * `--centered`: centres the `vf-hero__content` component.
+ * `--block`: makes the `vf-hero__content` bleed all the way ot the left of the page.
+ * `--striped`: inverts the `vf-hero__text` to that of what's set in `vf-hero__content`.
+ * `--800`, `--1200`, and `--1600` spacing variants.
+* replaces `vf-hero-theme--` with `vf-hero--` for the `primary`, `secondary`, and `tertiary` variants.
+* removes the 'Mortal Kombat' naming convention.
+* reduces visible options of the new `vf-hero`.
+* older versions (v2) degrade gracefully to the default variant.
+
### 1.8.0
-* removes the JavaScript for the `--intense` version due to an issue in Safari 14 and iOS
- * https://github.com/visual-framework/vf-core/pull/1241
+* deprecates the `--intense` variant.
### 1.7.1
diff --git a/components/vf-hero/README.md b/components/vf-hero/README.md
index 16b77464cf..663486886a 100755
--- a/components/vf-hero/README.md
+++ b/components/vf-hero/README.md
@@ -4,15 +4,97 @@
## About
-The `vf-hero` component is to be used as a visual queue and page header. The `vf-hero` can take a heading, sub-heading, and text content. The text content can also be a link which adds am arrow icon.
+The `vf-hero` component is to be used as a visual queue and page header. The `vf-hero` can take a heading, sub-heading, and text content. The text (`vf-hero__text`) content can also be a 'call to action' link which adds am arrow icon.
## Usage
+Currently there are now two use cases for the `vf-hero` component:
+
+
+### Landing Pages
+
+For landing pages like the home page, or a location page can take an image (provided by Design) which should be uploaded to [the files site](https://www.embl.org/files) and applied using the custom property available (`--vf-hero--bg-image`).
+
+The `vf-hero` for landing pgaes make use of the classes `vf-hero--primary` and `vf-hero--1200` to standardise the layout through out embl.org.
+
+By default the `vf-hero` for landing pages make use of the roundels bacground image. To keep the raw struture of the HTML and CSS the same this is applied using a CSS custom property. IE 11 will get the background colour still, but no image. This is progressive enhancement.
+
+The basic HTML structure for landing pages is:
+
+```
+
+
+
+
+
+```
+
+---
+### Group Sites
+
+For group sites that exist like a sub-site or microsite as part of embl.org they are afforded their own specific `vf-hero`.
+
+The `vf-hero` for group sites make use of the classes `vf-hero--primary`, `vf-hero--block`, and `vf-hero--800` to standardise the layout through out embl.org.
+
+By default the `vf-hero` for group sites make use of the roundels background image. To keep the raw struture of the HTML and CSS the same this is applied using a CSS custom property. IE 11 will get the background colour still, but no image. This is progressive enhancement.
+
+If group leaders wish to, they can include some additional content to the heading such as their group location, and if it's part of a bigger group with the HTML structure:
+
+```
+
+
+
+```
+
+
+
+As the group sites variant of the `vf-hero` is used to announce the group name and some short additional information, it does not allow for the inclusion of the `vf-hero__text` element.
+
### CSS Custom Properties
-`--vf-hero-bg-image` — this is for the url for the background image. It can either be added, inline if you're writing the HTML, using the `.yml` data source of `vf_hero_image`, or by other needs (a input or upload in WordPress, for example).
+`--vf-hero--bg-image` — this is for the url for the background image. It can either be added, inline if you're writing the HTML, using the `.yml` data source of `vf_hero_image`, or by other needs (a input or upload in WordPress, for example).
-`--vf-hero-grid__row--initial` — This is used to represent the heigh of the image and helps calculate the position of the content, depending on the variant you have chosen.
+`---vf-hero--bg-image-size` — this is to determine the sizing of the background image. As group sites are using the roundel image it needs specific dimensions so that it works. These dimensions are `auto 28.5rem`. We use a fallback here as background images in `vf-hero` should be full bleed by default so the fall back in the CSS is for cover — `var(---vf-hero--bg-image-size, cover)`. For
## Install
diff --git a/components/vf-hero/vf-hero--example.njk b/components/vf-hero/vf-hero--example.njk
deleted file mode 100644
index f4fcf48942..0000000000
--- a/components/vf-hero/vf-hero--example.njk
+++ /dev/null
@@ -1,63 +0,0 @@
-
-
-
-