Merge pull request #249 from CityOfDetroit/issue.detroitmi.1593

Support attribute-based animations on article card

src/components/organisms/ArticleCard/ArticleCard.js

@@ -16,7 +16,7 @@ template.innerHTML = `
 `;
 
 class ArticleCard extends HTMLElement {
-  static observedAttributes = [];
+  static observedAttributes = ['show'];
 
   constructor() {
     // Always call super first in constructor
@@ -43,6 +43,19 @@ class ArticleCard extends HTMLElement {
     this._wrapWithLink();
   }
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'show': {
+        const textContainer = this.shadowRoot.querySelector('.text-container');
+        if (newValue !== null) {
+          textContainer?.classList.add('show');
+        } else {
+          textContainer?.classList.remove('show');
+        }
+      }
+    }
+  }
+
   /**
    * Wraps the .card-container element in an 'a' element with an href attribute.
    */

src/components/organisms/ArticleCard/ArticleCard.scss

@@ -0,0 +1,47 @@
+.img-placeholder {
+  width: 100%;
+  height: 400px;
+  background-color: #d3d3d3;
+}
+
+.card-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.text-container {
+  position: absolute;
+  box-sizing: border-box;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+  width: 100%;
+  height: 40%;
+  bottom: 0;
+  left: 0;
+  transition:
+    padding-top 0.2s,
+    height 0.2s ease-in-out;
+}
+
+.card-container:hover .text-container,
+.card-container .text-container.show {
+  box-sizing: border-box;
+  height: 100%;
+  padding-top: 30%;
+}
+
+.subtitle-container {
+  margin-top: 2em;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.card-container:hover,
+.card-container .text-container.show {
+  .subtitle-container {
+    margin-top: 2em;
+    opacity: 1;
+  }
+}

src/stories/articlecard.stories.js

@@ -26,6 +26,10 @@ export default {
       description: 'The subtitle of the article. Custom markdown is supported.',
     },
     color: COMMON_STORY_ARGS.bootstrapColor,
+    show: {
+      control: { type: 'boolean' },
+      description: 'Toggle to show or hide the article card title text.',
+    },
   },
   args: {
     src: 'https://placehold.co/300x400',
@@ -36,6 +40,7 @@ export default {
     color: 'primary',
     href: 'https://www.example.com',
     target: '_blank',
+    show: false,
   },
 };
 
@@ -57,6 +62,9 @@ function _createArticleCard(args) {
   articleCardElt1.setAttribute('color', args.color);
   articleCardElt1.setAttribute('href', args.href);
   articleCardElt1.setAttribute('target', args.target);
+  if (args.show) {
+    articleCardElt1.setAttribute('show', 'show');
+  }
   if (_containsHTMLTags(args.title)) {
     const title = _createElementFromHTML(args.title);
     title.slot = 'title';