The one that refactors the vf-hero quite a lot (#1219)

* updates tokens

* vf-hero updates

* updates vf-u-fullbleed

* adds --800 as the default for the component

* correct the theming of the alt version

* quick documentation update

* adds fallbakcs for CSS that relied on custom props

* adds new spacing token

* updates to hero

* updates for a simpler hero to start with

* updates variants to all work, but only show what to use for now

* hides all the variants that shouldn't be used yet

* quick fix of naming convention for css custom property

* updates readme and adds changelog

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`

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
+      }
     }
   ]
 }

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;
 }

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),
 );

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

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
 

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:
+
+```
+<section class="vf-hero vf-hero--primary vf-hero--1200 | vf-u-fullbleed" style="--vf-hero--bg-image-size: auto 28.5rem">
+
+  <div class="vf-hero__content | vf-stack vf-stack--400 ">
+
+    <h2 class="vf-hero__heading">
+      About the Hentze group!
+    </h2>
+
+    <p class="vf-hero__subheading">an example of some ancillary text</p>
+
+    <p class="vf-hero__text">The Hentze group combines biochemical and <a href="JavaScript:Void(0);">systems–level approaches</a> to investigate the connections between <a href="JavaScript:Void(0);">gene expression</a> and <a href="JavaScript:Void(0);">cell metabolism</a>, and their roles in human disease.</p>
+
+  </div>
+
+</section>
+```
+
+---
+### 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:
+
+```
+<h2 class="vf-hero__heading">
+  Strategy & Communications
+  <span class="vf-hero__heading--additional">
+    <a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology
+  </span>
+</h2>
+```
+
+<br>
+
+The basic HTML structure for the group site `vf-hero` is:
+
+
+```
+<section class="vf-hero vf-hero--primary vf-hero--block vf-hero--800 | vf-u-fullbleed" style="--vf-hero--bg-image-size: auto 28.5rem">
+
+  <div class="vf-hero__content | vf-stack vf-stack--400 ">
+
+    <h2 class="vf-hero__heading">
+
+      <a href="JavaScript:Void(0);">
+      Strategy &amp; Communications
+      </a>
+
+      <span class="vf-hero__heading--additional"><a href="JavaScript:Void(0);">VF Hamburg</a> | Structural Biology</span>
+
+    </h2>
+
+    <p class="vf-hero__subheading">Chromosome structure and dynamics</p>
+
+  </div>
+
+</section>
+```
+
+
+
+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