Merging from dev to component

.github/workflows/delete.yml

@@ -13,11 +13,6 @@ jobs:
       run: echo "VERSION=${GITHUB_BRANCH}" >> $GITHUB_ENV
       env: 
         GITHUB_BRANCH: ${{ github.ref_name }}
-    - name: If from develop branch, change to latest
-      if: ${{ github.ref == 'refs/heads/develop' }}
-      run: echo "VERSION=latest" >> $GITHUB_ENV
-      env: 
-        GITHUB_BRANCH: ${{ github.event.ref }}
     - name: Display version install
       run: echo "Deleting version ${VERSION} in dev.toolkit"
     - name: Configure AWS Credentials

src/css/components/_hero.scss

@@ -58,6 +58,28 @@ il-hero {
     --il-hero-focused-button-border-color: var(--il-blue);
   }
 
+  img {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 223px;
+    object-fit: cover;
+    object-position: center;
+
+    @media (min-width: 576px) {
+      height: 315px;
+    }
+
+    @media (min-width: 767px) {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 101;
+    }
+  }
+
   h1 {
     @include reset-heading;
     font: 700 36px var(--il-source-sans);

src/css/components/_index.scss

@@ -7,6 +7,7 @@
 @import 'hero';
 @import 'image-feature';
 @import 'navigation';
+@import 'page-title';
 @import 'section-nav';
 @import 'statistic';
 @import 'unit-wordmark';

src/css/components/_page-title.scss

@@ -0,0 +1,39 @@
+il-page-title {
+  --il-page-title-text-color: white;
+  --il-page-title-background-color: var(--il-blue);
+
+  &.il-theme-blue {
+    --il-page-title-text-color: white;
+    --il-page-title-background-color: var(--il-blue);
+  }
+
+  &.il-theme-orange {
+    --il-page-title-text-color: white;
+    --il-page-title-background-color: var(--il-orange);
+  }
+
+  &.il-theme-white {
+    --il-page-title-text-color: var(--il-blue);
+    --il-page-title-background-color: white;
+  }
+
+  h1 {
+    font-size: 1em;
+    font-weight: inherit;
+    font-family: inherit;
+    text-align: left;
+    margin: 0;
+    padding: 0;
+    color: inherit;
+  }
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    object-fit: cover;
+    object-position: center;
+  }
+}

src/js/components/hero.css.js → src/js/components/hero/hero.css.js

@@ -30,70 +30,13 @@ export default css`
 
 /* DEPRECATED: color attribute */
 
-.hero.orange {
+.hero[data-color="orange"] {
   --il-hero-background-color: var(--il-orange);
 }
 
 .background {
   position: relative;
   width: 100%;
-  height: 223px;
-  overflow: hidden;
-}
-.hero.with-duotone .background {
-  background-color: var(--il-orange);
-}
-.background-image {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.background-image img {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 101;
-  object-fit: cover;
-  object-position: center;
-}
-.hero.with-duotone .background-image img {
-  filter: brightness(125%) contrast(125%) grayscale(100%);
-  mix-blend-mode: multiply;
-}
-.overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.duotone--light.overlay {
-  display: none;
-  z-index: 201;
-  background-color: var(--il-orange);
-  mix-blend-mode: darken;
-}
-.duotone--dark.overlay {
-  z-index: 202;
-  background-color: var(--il-blue);
-  mix-blend-mode: lighten;
-}
-.fingerprint.overlay {
-  z-index: 300;
-  stroke: #FEFEFE;
-  opacity: .149;
-}
-.fingerprint.overlay svg {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%:
-  object-fit: cover;
 }
 .content-container--level-1 {
   padding-left: var(--il-content-margin);
@@ -111,8 +54,20 @@ export default css`
 .content-container--level-3 {
   padding: 18px 0 36px;
 }
+
+
+img {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 223px;
+  overflow: hidden;
+  object-fit: cover;
+  object-position: center;
+}
+
 @media (min-width: 576px) {
-  .background {
+  .background img {
     height: 315px;
   }
   .content {
@@ -128,6 +83,14 @@ export default css`
     left: 0;
     z-index: 1;
   }
+  .background img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 101;
+  }
   .content-container--level-3 {
     display: flex;
     flex-direction: column;

src/js/components/hero.js → src/js/components/hero/hero.js

@@ -1,7 +1,6 @@
 import { LitElement, html } from 'lit';
-import fingerprint from '../elements/fingerprint';
-import Alignment from '../lib/alignment';
-import Debugger from '../debug';
+import Alignment from '../../lib/alignment';
+import Debugger from '../../debug';
 import styles from './hero.css';
 
 class Hero extends LitElement {
@@ -12,7 +11,6 @@ class Hero extends LitElement {
       alt: { type: String, attribute: true },
       background: { type: String, attribute: true },
       color: { type: String, attribute: true, default: "blue" },
-      duotone: { type: Boolean, attribute: true }
     };
   }
 
@@ -26,51 +24,41 @@ class Hero extends LitElement {
     this.alt = '';
     this.background = undefined;
     this.color = "blue";
-    this.duotone = false;
   }
 
   connectedCallback() {
     super.connectedCallback();
     if (this.hasAttribute('align')) {
       Debugger.warn("il-hero: the \"align\" attribute is deprecated. Use alignment classes instead.");
     }
+    if (this.hasAttribute('alt')) {
+      Debugger.warn("il-hero: the \"alt\" attribute is deprecated. Use a slotted image element with alt text instead.");
+    }
+    if (this.hasAttribute('background')) {
+      Debugger.warn("il-hero: the \"background\" attribute is deprecated. Use a slotted image element instead.");
+    }
     if (this.hasAttribute('color')) {
       Debugger.warn("il-hero: the \"color\" attribute is deprecated. Use theme classes instead.");
     }
   }
 
-  renderBackground() {
-    return html`
-      <div class="background" role="presentation">
-        ${this.duotone ? this.renderDuotone() : ''}
-        ${this.background ? this.renderBackgroundImage() : ''}
-      </div>
-    `;
-  }
-
   renderBackgroundImage() {
     return html`
-        <div class="background-image">
-          <img src="${this.background}" alt="${this.alt}">
-        </div>
+        <img src="${this.background}" alt="${this.alt}">
     `;
   }
 
-  renderDuotone() {
-    return html`
-      <div class="duotone overlay duotone--light"></div>
-      <div class="gradient overlay duotone--dark"></div>
-  `;
-  }
-
   render() {
     const alignment = new Alignment(this.align);
-    const heroClass = [this.color];
-    if (this.background) heroClass.push('with-background');
-    if (this.duotone) heroClass.push('with-duotone');
+    const color = this.color;
     return html`
-        <div class="hero ${heroClass.join(' ')}" data-align-x=${alignment.x} data-align-y=${alignment.y}>
-          ${this.background ? this.renderBackground() : ''}
+        <div class="hero" data-color=${color} data-align-x=${alignment.x} data-align-y=${alignment.y}>
+          <div class="background">
+            <slot name="background">
+              ${this.background ? this.renderBackgroundImage() : ''}
+            </slot>
+          </div>
+
           <div class="content-container--level-1 content-outer content-container--for-il-content-margin">
             <div class="content-container--level-2 content-container--for-il-content-max-width">
               <div class="content-container--level-3 content content-container--for-hero-content-max-width">

src/js/components/page-title/page-title.component.js

@@ -0,0 +1,31 @@
+import { LitElement, html } from 'lit';
+import Debugger from '../../debug';
+import styles from './page-title.css';
+
+class PageTitle extends LitElement {
+
+  static get styles() {
+    return styles;
+  }
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+      <div class="page-title">
+        <div class="background">
+          <slot name="background"></slot>
+        </div>
+        <div class="inner">
+          <div class="text">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      `;
+  }
+}
+
+customElements.define('il-page-title', PageTitle);

src/js/components/page-title/page-title.css.js

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+
+export default css`
+.page-title {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  padding: 0 var(--il-content-margin);
+}
+.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.inner {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  min-height: 12.5rem;
+  max-width: var(--il-content-max-width);
+  margin: 0 auto;
+  padding-top: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.text {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 101;
+  color: var(--il-page-title-text-color);
+  text-align: left;
+  font: 700 2.5em var(--il-source-sans);
+  padding: 16px 14px 20px;
+}
+.text::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background-color: var(--il-page-title-background-color);
+  opacity: .85;
+}
+`;

src/js/index.js

@@ -8,7 +8,7 @@ import './components/call-to-action';
 import './components/clickable-card/clickable-card.component';
 import './components/footer';
 import './components/header';
-import './components/hero';
+import './components/hero/hero';
 import './components/image-feature/image-feature.component';
 import './components/layout/page.component';
 import './components/layout/section.component';
@@ -17,6 +17,7 @@ import './components/link';
 import './components/navigation/navigation.component';
 import './components/navigation/link.component';
 import './components/navigation/section.component';
+import './components/page-title/page-title.component';
 import './components/pagination/pagination.component';
 import './components/search/search.component';
 import './components/section-nav';

tests/components/hero/alt-text.njk

@@ -1,5 +1,5 @@
 ---
-title: Hero with alt text
+title: "Hero with alt text (deprecated)"
 group: "Components: Hero"
 layout: layouts/page.njk
 ---