From 21a4ff61a2a23d88f7e521a6fac5e21c85237526 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Mon, 15 Nov 2021 17:20:42 +0000
Subject: [PATCH] ISTWCMS-5195: updating card to use correct bem and banners to
use correct class
---
.../04-components/banners/banners.js | 2 +-
.../card/card--node/card--node.yml | 79 +++++++++++++++++++
.../card/card-elements/_banner.twig | 31 ++++----
source/_patterns/04-components/card/card.twig | 2 +-
source/_patterns/04-components/card/card.yml | 18 ++---
5 files changed, 106 insertions(+), 26 deletions(-)
create mode 100644 source/_patterns/04-components/card/card--node/card--node.yml
diff --git a/source/_patterns/04-components/banners/banners.js b/source/_patterns/04-components/banners/banners.js
index d7419fb4..a90fdc60 100644
--- a/source/_patterns/04-components/banners/banners.js
+++ b/source/_patterns/04-components/banners/banners.js
@@ -8,7 +8,7 @@
$(document).ready(function () {
// Step through each FF on the page.
- $('.card.banner').each(function () {
+ $('.card__banner').each(function () {
// Get the number of items for the carousel, if any.
var num_of_items = 1;
diff --git a/source/_patterns/04-components/card/card--node/card--node.yml b/source/_patterns/04-components/card/card--node/card--node.yml
new file mode 100644
index 00000000..285c45e3
--- /dev/null
+++ b/source/_patterns/04-components/card/card--node/card--node.yml
@@ -0,0 +1,79 @@
+---
+modifier_classes: ''
+header_level: '2'
+node:
+ url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'This is a Card title'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ tags:
+ tag1:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ tag2:
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ social_media:
+ menu_tree:
+ - text: 'Facebook'
+ url: 'https://www.facebook.com/university.waterloo'
+ - text: 'Twitter'
+ url: 'https://twitter.com/uWaterloo'
+ - text: 'YouTube'
+ url: 'https://www.youtube.com/user/uwaterloo'
+ - text: 'Instagram'
+ url: 'https://www.instagram.com/uofwaterloo/'
+ - text: 'LinkedIn'
+ url: 'https://www.linkedin.com/edu/school?id=10875'
+ social_media_placement: 'card-footer'
+ hero_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative hero text'
+type: 'node'
diff --git a/source/_patterns/04-components/card/card-elements/_banner.twig b/source/_patterns/04-components/card/card-elements/_banner.twig
index 64db59fd..3cd7896a 100644
--- a/source/_patterns/04-components/card/card-elements/_banner.twig
+++ b/source/_patterns/04-components/card/card-elements/_banner.twig
@@ -1,19 +1,20 @@
-{% if image.big_text or image.small_text %}
- <div class="card__header">
- {% if image.big_text %}
- <div class="card__title">
- {{ image.big_text }}
- </div>
- {% endif %}
- {% if image.small_text %}
- <span class="sub-title">
- {{ image.small_text }}
- </span>
- {% endif %}
- </div>
-{% endif %}
+<div class="card__banner--image">
+
+ {% if image.big_text or image.small_text %}
+ <div class="card__banner--titles">
+ {% if image.big_text %}
+ <span class="card__banner--title">
+ {{ image.big_text }}
+ </span>
+ {% endif %}
+ {% if image.small_text %}
+ <span class="card__banner--sub-title">
+ {{ image.small_text }}
+ </span>
+ {% endif %}
+ </div>
+ {% endif %}
-<div class="card__banner">
{% if image.url %}
<a href="{{ image.url }}">
{% endif %}
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 5b058e37..cec81378 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -11,7 +11,7 @@
{% set show_header = 'yes' %}
{% endif %}
-<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
+<article class="card{% if type %} card__{{ type }}{% endif %}{% if show_hover %} card--show-hover {% endif %}" >
{% if hero_image %}
{% include '@components/card/card-elements/_hero-image.twig' with {
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index 4839c8b4..fe8dca9d 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -1,15 +1,14 @@
---
modifier_classes: ''
-title: 'This is a Card title'
header_level: '2'
url: '#'
-author_name: 'Author Lastname'
-author_link: '#'
-footer:
-date: 'Friday, September 19, 2020'
-date_format: 'long-date'
-read_more: true
-show_hover: true
+header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'This is a Card title'
+ author:
+ name: 'Author Lastname'
+ link: '#'
tags:
tag1:
-
@@ -73,6 +72,7 @@ social_media:
- text: 'LinkedIn'
url: 'https://www.linkedin.com/edu/school?id=10875'
social_media_placement: 'card-footer'
-hero:
+hero_image:
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative hero text'
+type: 'card'
--
GitLab