Merge branch 'develop'

web-illinois · Jun 23, 2022 · a1c8b24 · a1c8b24
2 parents f1ccf04 + 23d8b06
commit a1c8b24
Show file tree

Hide file tree

Showing 70 changed files with 426 additions and 345 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -1,15 +1,3 @@
-New in version 2.2
-------------------
+VERSION 2.9.0 - Released June 23, 2022
 
-* New component: <il-accordion>
-  https://github.com/web-illinois/toolkit/wiki/Accordion
-
-* New "alt" attribute for the hero component
-  https://github.com/web-illinois/toolkit/wiki/Hero
-
-* Automatic link URLs with the data-il attribute
-  https://github.com/web-illinois/toolkit/wiki/Data-attributes
-
-* Upgraded to Lit 2.0
-
-* Bug fixes and security updates
+* New card component
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "il-toolkit",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Web toolkit",
   "repository": "https://github.com/web-illinois/toolkit",
   "author": "Web Implementation Guidelines Group",

diff --git a/src/css/colors.scss b/src/css/colors.scss
@@ -3,8 +3,11 @@
     --#{$name}: #{$hex};
   }
 
-  --il-gradient-blue: linear-gradient(180deg, var(--il-industrial-blue) 0%, var(--il-blue) 100%);
-  --il-gradient-orange: linear-gradient(180deg, var(--il-orange) 0%, var(--il-altgeld) 100%);
+  --il-blue-gradient: linear-gradient(180deg, var(--il-industrial-blue) 0%, var(--il-blue) 100%);
+  --il-orange-gradient: linear-gradient(180deg, var(--il-orange) 0%, var(--il-altgeld) 100%);
+
+  --il-gradient-blue: var(--il-blue-gradient); // Deprecated
+  --il-gradient-orange: var(--il-orange-gradient); // Deprecated
 
   // Color defaults
 

diff --git a/src/css/components/_card.scss b/src/css/components/_card.scss
@@ -0,0 +1,194 @@
+:root {
+  --il-card-link-focus-outline: 0;
+  --il-card-heading-link-focus-outline: 0;
+  --il-card-link-icon-mask-image: url("data:image/svg+xml, %3Csvg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1000 1000\" style=\"enable-background:new 0 0 1000 1000;\" xml:space=\"preserve\"%3E%3Cg%3E%3Cpath d=\"M589,503.6c0-17.3-6.1-28.9-18.3-40.4L203.9,117c-6.1-11.5-24.5-17.3-42.8-17.3l0,0c-12.2,0-30.6,5.8-42.8,17.3l0,0 c-24.5,23.1-24.5,57.7,0,80.8l324,305.8l-324,305.8c-24.5,23.1-24.5,57.7,0,80.8c12.2,11.5,30.6,17.3,42.8,17.3s30.6-5.8,42.8-17.3 L570.7,544C582.9,532.5,589,520.9,589,503.6z\"/%3E%3Cpath d=\"M876.3,463.2L509.6,117c-12.2-11.5-24.5-17.3-42.8-17.3l0,0c-18.3,0-30.6,5.8-42.8,17.3l0,0c-24.5,23.1-24.5,57.7,0,80.8 l324,305.8L424,809.5c-24.5,23.1-24.5,57.7,0,80.8c12.2,11.5,24.5,17.3,42.8,17.3c18.3,0,30.6-5.8,42.8-17.3L876.3,544 c12.2-11.5,18.3-23.1,18.3-40.4S888.6,474.8,876.3,463.2z\"/%3E%3C/g%3E%3C/svg%3E");
+}
+
+il-card, .il-card {
+  background: var(--il-card-background, white);
+  color: var(--il-card-color, var(--il-base-25));
+  box-sizing: border-box;
+  margin: 0;
+  padding: 40px 30px 30px;
+  text-align: center;
+  font: 400 1.125em/1.667em var(--il-source-sans); // 18px/30px
+  border: 1px solid var(--il-card-border-color, var(--il-gray-2));
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    color: var(--il-card-link-color);
+
+    &:focus, &:hover {
+      color: var(--il-card-link-focus-color, var(--il-card-link-color));
+      outline: var(--il-card-link-focus-outline);
+    }
+  }
+
+  h2, h3, h4, h5, h6 {
+    margin: 1rem 0 0;
+    padding: 0;
+    font: 700 1.39em/1em var(--il-source-sans); // 25px
+    color: var(--il-card-heading-color);
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    a {
+      text-decoration: underline;
+      color: var(--il-card-heading-link-color);
+
+      &:focus, &:hover {
+        color: var(--il-card-heading-link-focus-color, var(--il-card-heading-link-color));
+        outline: var(--il-card-heading-link-focus-outline);
+      }
+    }
+
+    + p {
+      margin-top: 16px;
+    }
+  }
+
+  img {
+    box-sizing: border-box;
+    display: block;
+    width: calc(100% + 60px);
+    height: auto;
+    margin: 30px -30px;
+
+    &:first-child {
+      margin-top: -40px;
+    }
+  }
+
+  .il-buttons {
+    margin: 1.3em 0 0;
+    padding: 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .il-button {
+    font-weight: 600;
+  }
+
+  .il-icon {
+    display: block;
+    margin: 0;
+    padding: 0;
+    font-size: 4.167em;
+    color: var(--il-card-icon-color);
+
+    &:first-child {
+      margin-top: -.25em;
+    }
+  }
+}
+
+il-card[link] {
+  text-decoration: none;
+  cursor: pointer;
+  border-bottom-width: 3px;
+  border-bottom-color: var(--il-card-border-bottom-color, var(--il-orange));
+
+  a {
+    text-decoration: none;
+  }
+
+  h2, h2 a {
+    color: var(--il-card-heading-color);
+  }
+
+  h2::after {
+    content: "";
+    -webkit-mask-image: var(--il-card-link-icon-mask-image);
+    mask-image: var(--il-card-link-icon-mask-image);
+    background-size: 16px 16px;
+    background-color: currentColor;
+    font-weight: 500;
+    height: 16px;
+    width: 16px;
+    margin-left: 4px;
+    display: inline;
+    position: absolute;
+    margin-top: 6px;
+  }
+
+  &:hover, &:focus {
+    background: var(--il-card-hover-background);
+    color: var(--il-card-hover-color);
+
+    h2, h2 a {
+      color: var(--il-card-hover-heading-color);
+    }
+  }
+}
+
+.il-theme-white {
+  --il-card-background: white;
+  --il-card-color: var(--il-base-25);
+  --il-card-link-focus-color: var(--il-orange);
+  --il-card-heading-color: var(--il-orange);
+  --il-card-heading-link-focus-color: var(--il-blue);
+  --il-card-hover-background: var(--il-blue);
+  --il-card-hover-color: white;
+  --il-card-hover-heading-color: var(--il-orange);
+}
+
+.il-theme-gray {
+  --il-card-background: var(--il-gray-1);
+  --il-card-color: var(--il-base-25);
+  --il-card-link-focus-color: var(--il-altgeld);
+  --il-card-heading-color: var(--il-orange);
+  --il-card-heading-link-focus-color: var(--il-blue);
+  --il-card-hover-background: var(--il-blue);
+  --il-card-hover-color: white;
+  --il-card-hover-heading-color: var(--il-orange);
+}
+
+.il-theme-blue, .il-theme-blue-gradient {
+  --il-card-background: var(--il-blue);
+  --il-card-border-color: var(--il-blue);
+  --il-card-color: white;
+  --il-card-link-focus-color: var(--il-orange);
+  --il-card-heading-color: white;
+  --il-card-heading-link-focus-color: var(--il-orange);
+  --il-card-hover-background: white;
+  --il-card-hover-color: var(--il-base-25);
+  --il-card-hover-heading-color: var(--il-orange);
+}
+
+.il-theme-blue-gradient {
+  --il-card-background: var(--il-blue-gradient);
+  --il-card-link-focus-color: var(--il-arches-blue-lighter-2);
+  --il-card-heading-color: white;
+  --il-card-heading-link-focus-color: var(--il-arches-blue-lighter-2);
+}
+
+.il-theme-orange, .il-theme-orange-gradient {
+  --il-card-background: var(--il-orange);
+  --il-card-border-color: var(--il-orange);
+  --il-card-color: var(--il-blue);
+  --il-card-link-color: var(--il-blue);
+  --il-card-link-focus-color: var(--il-blue);
+  --il-card-link-focus-outline: 2px dotted var(--il-blue);
+  --il-card-heading-color: white;
+  --il-card-heading-link-focus-color: var(--il-blue);
+  --il-card-border-bottom-color: var(--il-blue);
+  --il-card-hover-background: white;
+  --il-card-hover-color: var(--il-base-25);
+  --il-card-hover-heading-color: var(--il-orange);
+}
+
+.il-theme-orange-gradient {
+  --il-card-background: var(--il-orange-gradient);
+  --il-card-border-color: var(--il-orange);
+  --il-card-color: var(--il-blue);
+}
+
diff --git a/src/css/components/_clickable-card.scss b/src/css/components/_clickable-card.scss
@@ -11,7 +11,7 @@
   --il-clickable-card-background-hover: var(--il-blue);
 }
 
-il-clickable-card, il-card {
+il-clickable-card {
   @extend .il-formatted;
 }
 
@@ -63,35 +63,6 @@ il-clickable-card,
   }
 }
 
-il-card, .il-formatted il-card {
-  display: var(--il-clickable-card-display);
-
-  h2,
-  h3,
-  h4,
-  h5,
-  p.heading {
-    color: var(--il-clickable-card-heading-color);
-    font-size: 1.3125rem;
-    font-weight: 700;
-    line-height: 1.75rem;
-    margin: 0;
-    letter-spacing: .015em;
-    text-align: center;
-    padding: 0.625rem 0 1.25rem;
-    border-bottom: 1px solid #ddd6d6;
-
-    + * {
-      margin-top: .625rem;
-    }
-  }
-
-  p {
-    font-size: 1.25rem;
-    line-height: 1.6875rem;
-  }
-}
-
 il-clickable-card.il-theme-blue, .il-theme-blue il-clickable-card {
   --il-clickable-card-color-hover: var(--il-blue);
   --il-clickable-card-heading-color-hover: var(--il-orange);

diff --git a/src/css/components/_index.scss b/src/css/components/_index.scss
@@ -1,6 +1,7 @@
 @import 'back-to-top';
 @import 'breadcrumbs';
 @import 'call-to-action';
+@import 'card';
 @import 'clickable-card';
 @import 'footer';
 @import 'header';

diff --git a/src/js/components/card/card.component.js b/src/js/components/card/card.component.js
@@ -5,9 +5,7 @@ class Card extends LitElement {
 
   static get properties() {
     return {
-        width: {type: String, attribute: true},
-        src: {type: String, attribute: true},
-        alt: {type: String, attribute: true},
+      link: {type: Boolean, default: false, attribute: true},
     };
   }
 
@@ -17,26 +15,48 @@ class Card extends LitElement {
 
   constructor() {
     super();
-    this.src = '';
-    this.alt = '';
-    this.width = '';
+    this.link = false;
+    this.handleClick = this.handleClick.bind(this);
   }
 
-  render() {
-    let widthStyle = this.width == '' ? '' : `width: ${this.width};`;
-    if (this.src == '') {
-      return html`
-      <article style="${widthStyle}">
-          <div class="text nopicture"><slot></slot></div>
-      </article>
-      `;
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleClick);
+  }
+
+  elementIsLink(elem) {
+    const link = this.getLinkElement();
+    return elem === link || link.contains(elem);
+  }
+
+  getLinkElement() {
+    return this.querySelector('a');
+  }
+
+  hasLinkElement() {
+    return !!this.getLinkElement();
+  }
+
+  isLink() {
+    return this.link;
+  }
+
+  handleClick(evt) {
+    if (this.isLink() && this.hasLinkElement()) {
+      if (!this.elementIsLink(evt.target)) this.getLinkElement().click();
     }
-
+  }
+
+  render() {
     return html`
-      <article style="${widthStyle}">
-        <img src="${this.src}" alt="${this.alt}">
-          <div class="text"><slot></slot></div>
-      </article>
+      <div class="card">
+          <slot></slot>
+      </div>
       `;
   }
 }

diff --git a/src/js/components/card/card.css.js b/src/js/components/card/card.css.js
@@ -1,29 +1,4 @@
 import { css } from 'lit';
 
 export default css`
-    article {
-        display: block;
-        border: 1px solid var(--il-gray-2);
-        border-bottom: 3px solid var(--il-orange);
-        margin: var(--il-clickable-card-margin);
-        text-decoration: none;
-        color: var(--il-text-color);
-        background: var(--il-background-color);
-    }
-    article.blue {
-      --il-text-color: white;
-      --il-background-color: var(--il-blue);
-    }
-    img {
-        width: 100%;
-    }
-    div.text {
-      padding: 1.75rem 1.875rem 2.8rem 1.875rem;
-    }
-    div.text.nopicture {
-      padding: 2.8rem 1.875rem;
-    }
-    article a {
-      text-decoration: none;
-    }
 `;