Enhancement: vf-hero refinments (#1614)

* Enhancement: vf-hero refinments

* Updates the default hero spacing to be equivalent to 1200 (was: 800). This better matches the actual default usage in practice and is based off design feedback for consistency.
* Hides 1600 variant that has gone unused.
* Readme updated to note that most uses will want a background image at 3000 by 1000 pixels.

As discussed with @cindyebi and Design.

* Update CHANGELOG.md

components/vf-hero/CHANGELOG.md

@@ -1,3 +1,10 @@
+### 3.3.0
+
+* Updates the default hero spacing to be equivalent to 1200 (was: 800). This better matches the actual default usage in practice and is based off design feedback for consistency.
+* Hides 1600 variant that has gone unused.
+* Readme updated to note that most uses will want a background image at 3000 by 1000 pixels.
+* https://github.com/visual-framework/vf-core/pull/1614
+
 ### 3.2.3
 
 * Fixes width issue on mobile introduced when making the hero content a little wider.

components/vf-hero/README.md

@@ -4,16 +4,16 @@
 
 ## About
 
-The `vf-hero` component is to be used as a visual queue and page header. The `vf-hero` can take a kicker, heading, sub-heading, text content, and a 'call to action' link as needed.
+The `vf-hero` component is to be used as a visual queue and page header. As needed, it can take a kicker, heading, sub-heading, text content, and a 'call to action' link.
 
 ## Usage
 
-By default the `vf-hero` makes 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.
+By default the `vf-hero` makes use of the roundels background image. To keep the raw structure of the HTML and CSS the same this is applied using a CSS custom property.
 
-The `vf-hero` 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 default variant is equivalent to `vf-hero--1200` and the recommended image size is 3000 by 1000 pixels.
 
-IE 11 will get the background colour and the roundels image, it will not paint a different background image if added. This is progressive enhancement.
 ### Content
+
 | Content name | Usage                                                                          | `.yml` key           |
 | ------------ | ------------------------------------------------------------------------------ | -------------------- |
 | Heading      | To be used for the heading of the page.                                                                               | `vf_hero_heading`    |
@@ -24,8 +24,6 @@ IE 11 will get the background colour and the roundels image, it will not paint a
 | Link Text    | The text for the hero 'call to action' link. Only works if there is associated Link HREF.                                                                                | `vf_hero_link_text`  |
 | Link HREF    |  The url that the Link Text would be pointing to and opens in the same browser tab. This only works if there is associated Link Text                                                                              | `vf_hero_link_href`  |
 
-
-
 | Content name | `.yml` key           | CSS classname         |
 | ------------ | -------------------- | --------------------- |
 | Kicker       | `vf_hero_kicker`     | `vf-hero__kicker`     |
@@ -36,14 +34,20 @@ IE 11 will get the background colour and the roundels image, it will not paint a
 | Link Text    | `vf_hero_link_text`  | `vf-hero__link`       |
 | Link HREF    | `vf_hero_link_href`  | n/a                   |
 
-
-
 ### 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-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)`.
 
+### Internet Explorer support
+
+IE 11 will get the background colour and the "roundels" image. Under the approach of progressive enhancement, IE 11 will not paint a different background image if added.
+
+### EMBL usage
+
+For EMBL sites, the `vf-hero` 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`).
+
 ## Install
 
 This repository is distributed with [npm](https://www.npmjs.com/). After [installing npm](https://nodejs.org/), you can install `vf-hero` with this command.

components/vf-hero/vf-hero.config.yml

@@ -62,6 +62,7 @@ variants:
       vf_hero_link_href: JavaScript:Void(0);
       vf_hero_image_size: auto 28.5rem
   - name: spacing (1600)
+    hidden: true
     context:
       spacing: 1600
       vf_hero_kicker: <a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology

components/vf-hero/vf-hero.scss

@@ -18,9 +18,9 @@
   background-image: var(--vf-hero--bg-image, url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/roundels.png'));
 
   margin-bottom: map-get($vf-spacing-map, vf-spacing--800);
-  margin-bottom: var(--vf-hero--spacing, #{map-get($vf-spacing-map, vf-spacing--800)});
+  margin-bottom: var(--vf-hero--spacing, #{map-get($vf-spacing-map, vf-spacing--1200)});
   padding: map-get($vf-spacing-map, vf-spacing--800) 0;
-  padding: var(--vf-hero--spacing, #{map-get($vf-spacing-map, vf-spacing--800)}) 0;
+  padding: var(--vf-hero--spacing, #{map-get($vf-spacing-map, vf-spacing--1200)}) 0;
 }
 
 .vf-hero.vf-u-fullbleed::before {
@@ -159,6 +159,7 @@
   }
 }
 
+// This variant is supported, but hidden and currently not recommended (subject to change)
 .vf-hero--1600 {
   --vf-hero--spacing: #{space(1600)};
   & > .vf-box {