Merge pull request #433 from web-illinois/develop

Version 2.16.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "il-toolkit",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "description": "Web toolkit",
   "repository": "https://github.com/web-illinois/toolkit",
   "author": "Web Implementation Guidelines Group",

src/css/components/_gallery-item.scss

@@ -0,0 +1,10 @@
+:root {
+    --il-gallery-item-height: 60vh;
+  }
+
+  il-gallery-item, .il-formatted il-gallery {
+    img {
+       max-height: var(--il-gallery-item-height);
+       object-fit: contain;
+    }
+}

src/css/components/_gallery.scss

@@ -0,0 +1,38 @@
+:root {
+    --il-gallery-width: 350px;
+    --il-gallery-height: 350px;
+    --il-gallery-background: var(--il-gray-1);
+    --il-gallery-background-focus: var(--il-blue);
+    --il-gallery-text-focus: white;
+  }
+
+  il-gallery.il-size-large, .il-size-large il-gallery  {
+    --il-gallery-width: 525px;
+    --il-gallery-height: 350px;
+  }
+
+  il-gallery.il-size-small, .il-size-small il-gallery  {
+    --il-gallery-width: 350px;
+    --il-gallery-height: 233px;
+  }
+
+  il-gallery.il-size-xsmall, .il-size-xsmall il-gallery {
+    --il-gallery-width: 250px;
+    --il-gallery-height: 300px;
+  }
+
+  il-gallery, .il-formatted il-gallery {
+    img {
+       max-width: var(--il-gallery-width);
+       max-height: var(--il-gallery-height);
+    }
+    p { 
+        margin: 0; 
+        padding: 0;
+    }
+
+    p[slot=title] {
+      font-weight: 700;
+      font-size: 1.25rem;
+    }
+}

src/css/components/_image-feature-with-overlay.scss

@@ -24,6 +24,10 @@ il-image-feature, .il-formatted il-image-feature
   }
 }
 
+il-image-feature.il-overlay, .il-overlay il-image-feature {
+  background: none;
+}
+
 il-image-feature.il-overlay img, .il-overlay il-image-feature img {
   position: absolute;
   width: 100%;

src/css/components/_image-feature.scss

@@ -12,6 +12,7 @@
   --il-image-feature-heading-color: white;
   --il-image-feature-link-color: white;
   --il-image-feature-link-hover-color: var(--il-orange);
+  --il-image-feature-max-width: auto;
 }
 
 %image-feature-theme-blue-gradient {
@@ -88,6 +89,7 @@
 
 .il-formatted il-image-feature, il-image-feature, .il-formatted il-video-feature, il-video-feature {
   display: var(--il-image-feature-display);
+  background: var(--il-image-feature-background);
   margin-bottom: 20px;
 
   h2, h3, h4, h5, p {
@@ -192,6 +194,8 @@ il-image-feature, il-video-feature {
 }
 
 il-image-feature {
+  --il-image-feature-content-padding: 1.875rem 1.25rem;
+
   img {
     object-fit: cover;
     position: absolute;
@@ -200,3 +204,36 @@ il-image-feature {
   }
 }
 
+@media (min-width: 767px) {
+  il-image-feature {
+    --il-image-feature-content-padding: 1.875rem;
+  }
+}
+@media (min-width: 993px) {
+  il-image-feature {
+    --il-image-feature-content-padding: 3rem 2.2vw;
+  }
+}
+@media (min-width: 1450px) {
+  il-image-feature {
+    --il-image-feature-content-padding: 3rem 6rem;
+  }
+}
+
+il-image-feature.il-picture-no-fill, .il-formatted .il-picture-no-fill il-image-feature {
+  --il-image-feature-flex-grow-image: 0;
+  --il-image-feature-flex-direction: row;
+  --il-image-feature-content-padding: 1.875rem;
+  background: var(--il-image-feature-background);
+
+  img {
+    object-fit: initial;
+    position: initial;
+    width: initial;
+    height: initial;
+  }
+}
+
+il-image-feature.il-fixed-width, .il-formatted .il-fixed-width il-image-feature {
+  --il-image-feature-max-width: var(--il-content-max-width);
+}

src/css/components/_index.scss

@@ -6,6 +6,8 @@
 @import 'clickable-card';
 @import 'directory';
 @import 'footer';
+@import 'gallery-item';
+@import 'gallery';
 @import 'header';
 @import 'hero';
 @import 'image-feature';

src/js/components/gallery-detail/gallery-detail.component.js

@@ -0,0 +1,58 @@
+import { LitElement, html } from 'lit';
+import styles from './gallery-detail.css';
+
+class GalleryDetailComponent extends LitElement {
+
+    static get styles() {
+        return styles;
+      }
+
+    static get properties() {
+        return {
+            href: {type: String, attribute: true},
+            home: {type: String, attribute: true},
+            previous: {type: String, attribute: true},
+            next: {type: String, attribute: true}
+        };
+      }
+
+    constructor() {
+        super();
+        this.home = '';
+        this.previous = '';
+        this.next = '';
+    }
+
+    renderHome() { 
+        return this.home == '' ? html`` : html`<a href="${this.home}" class="gallery-detail-back">${this.renderChevron()} Back to Gallery</a>`;
+    }
+
+    renderNavigation() { 
+        return this.previous == '' && this.next == '' ? html`` : 
+        this.next == '' ? html`<nav class="gallery-detail-navigation" aria-label="Gallery Navigation">
+            <a href="${this.previous}" class="gallery-detail-previous" aria-label="Previous Item">${this.renderChevron()}</a></nav>` :
+        this.previous == '' ? html`<nav class="gallery-detail-navigation" aria-label="Gallery Navigation">
+            <a href="${this.next}" class="gallery-detail-next" aria-label="Next Item">${this.renderChevron()}</a></nav>` :
+        html`<nav class="gallery-detail-navigation" aria-label="Gallery Navigation">
+            <a href="${this.previous}" class="gallery-detail-previous" aria-label="Previous Item">${this.renderChevron()}</a>
+            <a href="${this.next}" class="gallery-detail-next" aria-label="Next Item">${this.renderChevron()}</a></nav>`;
+    }
+
+    renderChevron() {
+        return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path
+          d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" />
+        </svg>`;
+      }
+
+    render() {
+        return html`<div class="gallery-detail">
+        ${this.renderHome()}
+        <div class="gallery-detail-text"><slot name="caption"></slot></div>
+        <div class="gallery-detail-image"><slot></slot></div>
+        ${this.renderNavigation()}
+        </div>`;
+    }
+}
+
+customElements.define('il-gallery-detail', GalleryDetailComponent);

src/js/components/gallery-detail/gallery-detail.css.js

@@ -0,0 +1,57 @@
+import { css } from 'lit';
+
+export default css`
+    div.gallery-detail {
+        display: grid;
+        grid-template-columns: 160px auto 160px;
+        grid-template-rows: auto 1fr 150px;
+    }
+    div.gallery-detail .gallery-detail-image {
+        grid-column: 1 / span 3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    div.gallery-detail .gallery-detail-navigation {
+        grid-column: 1 / span 3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: var(--il-blue);
+        color: white;
+        margin-top: 20px;
+        border-top: solid 4px var(--il-orange);
+        fill: white;
+    }
+    div.gallery-detail .gallery-detail-text {
+        display: flex;
+        justify-content: center;
+        align-items: end;
+        padding-bottom: 5px;
+        grid-column: 2;
+    }
+    div.gallery-detail .gallery-detail-back {
+        align-items: center;
+    }
+    div.gallery-detail .gallery-detail-back svg {
+        width: 15px;
+        height: 15px;
+        transform: rotate(90deg);
+        padding-top: 6px;
+        padding-left: 10px;
+    }
+    div.gallery-detail .gallery-detail-navigation a {
+        height: 50px;
+        width: 50px;
+        padding: 0 20px;
+    }
+    div.gallery-detail .gallery-detail-navigation a:first-child {
+        transform: rotate(90deg);
+    }
+    div.gallery-detail .gallery-detail-navigation a:last-child {
+        transform: rotate(-90deg);
+    }
+    div.gallery-detail .gallery-detail-navigation a:focus, div.gallery-detail .gallery-detail-navigation a:hover {
+        fill: var(--il-orange);
+    }
+`;

src/js/components/gallery-item/gallery-item.component.js

@@ -0,0 +1,39 @@
+import { LitElement, html } from 'lit';
+import styles from './gallery-item.css';
+import Debugger from '../../debug';
+
+class GalleryItemComponent extends LitElement {
+
+    static get styles() {
+        return styles;
+      }
+
+    static get properties() {
+        return {
+            href: {type: String, attribute: true},
+        };
+      }
+
+    constructor() {
+        super();
+        this.href = '';
+    }
+
+    render() {
+        return html`
+        <li class="gallery-item">
+        <a href="${this.href}">
+            <div class="gallery-image-frame">
+            <slot></slot>
+            </div>
+            <div class="gallery-image-title">
+            <slot name="title"></slot>
+            </div>
+            <div class="gallery-image-description">
+            <slot name="caption"></slot>
+            </div>
+        </li>`;
+    }
+}
+
+customElements.define('il-gallery-item', GalleryItemComponent);

src/js/components/gallery-item/gallery-item.css.js

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+
+export default css`
+    li.gallery-item .gallery-image-frame {
+        height: var(--il-gallery-height);
+        display: flex;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        background: var(--il-gallery-background);
+    }
+    li.gallery-item .gallery-image-title {
+        padding-top: .5rem;
+        padding-left: .5rem;
+    }
+    li.gallery-item .gallery-image-description {
+        padding-left: .5rem;
+        padding-bottom: .5rem;
+    }
+    li.gallery-item a {
+        color: var(--il-text-color);
+        text-decoration: none;
+    }
+    li.gallery-item a:hover, li.gallery-item a:focus {
+        color: var(--il-gallery-text-focus);
+        outline: none;
+    }
+    li.gallery-item a:hover .gallery-image-title, li.gallery-item a:focus .gallery-image-title, 
+    li.gallery-item a:hover .gallery-image-description, li.gallery-item a:focus .gallery-image-description {
+        background: var(--il-gallery-background-focus);
+    }
+    li.gallery-item a:hover .gallery-image-frame, li.gallery-item a:focus .gallery-image-frame {
+        background: var(--il-gallery-background-focus);
+    }
+`;

src/js/components/gallery/gallery.component.js

@@ -0,0 +1,20 @@
+import { LitElement, html } from 'lit';
+import styles from './gallery.css';
+import Debugger from '../../debug';
+
+class GalleryComponent extends LitElement {
+
+    static get styles() {
+        return styles;
+      }
+
+    render() {
+        return html`
+        <ul class="gallery">
+            <slot></slot>
+        </ul>`;
+
+    }
+}
+
+customElements.define('il-gallery', GalleryComponent);

src/js/components/gallery/gallery.css.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+export default css`
+ul.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,var(--il-gallery-width));
+    grid-column-gap: 60px;
+    grid-row-gap: 40px;
+    justify-content: center;
+    list-style: none;
+    padding: 0px;
+    margin: 0;
+}
+`;