ISTWCMS-5647: adding the mosst basic for node to work

src/patterns/04-components/card/card--node/_card--node.scss

+.card__node {
+  > .card__header,
+  > .card__footer {
+    margin: 0 auto;
+    max-width: $max-width;
+  }
+
+  .uw-node__without-image & {
+    .card__header,
+    .card__footer {
+      margin: 0 auto;
+      max-width: $max-width;
+      padding: 0 gesso-spacing(sm);
+      @include xl {
+        padding: 0;
+      }
+    }
+  }
+  .card__tags {
+    margin: 1rem auto;
+    max-width: $max-width;
+    padding: 0 gesso-spacing(sm);
+    @include xl {
+      padding: 0;
+    }
+  }
+  .card__footer {
+    margin-bottom: rem(gesso-spacing(md));
+    margin-top: auto;
+    padding: 0 gesso-spacing(sm);
+    @include xl {
+      padding: 0;
+    }
+  }
+
+  // CSS for specific node card presentations:
+  &--web-page{
+    // Currently this is PL demo only
+    // needs to be implemented correctly when webpage has media.
+    .uw-node__with-image & {
+      .card__featured-image{
+        align-items: center;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: grid;
+        height: 45rem;
+        justify-items: center;
+        min-height: 44rem;
+        position: relative;
+
+        .card__header {
+          @include uw-contained-width(75rem);
+          align-self:flex-end;
+          margin-bottom:4rem;
+          margin-top: 0;
+          .card__title {
+            background: rgba(0,0,0,0.50);
+            color:#fff;
+            margin-bottom: 0;
+            margin-top: 2rem;
+            padding: gesso-spacing(md) gesso-spacing(md);
+          }
+        }
+      }
+    }
+  }
+  // CSS for specific node card presentations:
+  &--contact {
+    display: grid;
+    gap: $grid-gap;
+
+    .card__content {
+      .layout {
+        padding: 0;
+      }
+    }
+
+    @include medium {
+      display: grid;
+      gap: 2rem;
+      grid-template-columns: 10rem 1fr;
+    }
+
+    .card__image {
+      grid-column: 1 / 3;
+      grid-row: 1 / 10;
+      @include medium {
+        grid-column: 1 / 2;
+      }
+    }
+
+    .card__header,
+    .card__body,
+    .card__footer {
+      grid-column: 1 / 3;
+      @include medium {
+        grid-column: 2 / 3;
+      }
+      padding: 0;
+    }
+
+    .uw-node__without-image & {
+      @include medium {
+        grid-template-columns: 100%;
+      }
+
+      .card__header,
+      .card__body,
+      .card__footer {
+        grid-column: 1 / 2;
+      }
+    }
+  }
+
+  // CSS for specific node card presentations:
+  &--blog,
+  &--news-item,
+  &--event {
+    .uw-node__without-image & {
+      @include uw-contained-width();
+      padding:0;
+    }
+    .uw-node__with-image & {
+      .card__featured-image {
+        align-items: center;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: grid;
+        height: 45rem;
+        justify-items: center;
+        min-height: 44rem;
+        position: relative;
+        .card__header {
+          // Width is experimental to match one of the wide-width in
+          // layouts for small width page look.
+          @include uw-contained-width(49.0625rem);
+          align-self: end;
+          margin-bottom: 0;
+          margin-top: 0;
+          .card__date {
+            margin-bottom: 0;
+            margin-top: 0;
+          }
+          .card__title {
+            background: gesso-brand(org-default, uw-white, primary);
+            font-size: gesso-font-size(8);
+            margin-bottom: 0;
+            margin-top: 0;
+            padding: gesso-spacing(sm) gesso-spacing(sm);
+          }
+          .card__sub-title {
+            background: gesso-brand(org-default, uw-white, primary);
+            font-size: gesso-font-size(4);
+            margin-bottom: 0;
+            margin-top: 0;
+            padding: gesso-spacing(xs) gesso-spacing(sm);
+          }
+          .card__author {
+            background: gesso-brand(org-default, uw-white, primary);
+            margin-bottom: 0;
+            margin-top: 0;
+            padding: gesso-spacing(xs) gesso-spacing(sm);
+          }
+        }
+      }
+      .card__footer,
+      .card__tags {
+        // Width is experimental to match one of the max-widths in
+        // layouts for narrower width page look.
+        @include uw-contained-width(47.0625rem);
+      }
+    }
+    // CSS for displaying the title within the node :
+  }
+
+  &--opportunity{
+    .uw-node__without-image &{
+      .card__header{
+        margin-bottom:gesso-spacing(md);
+      }
+    }
+  }
+  &--project{
+    .card__footer{
+      .card__tags{
+        padding:0;
+      }
+    }
+  }
+}

src/patterns/04-components/card/card--node/_card--node.twig

+{% if node.media or node.image %}
+  {% set node_image_class =  'with-image' %}
+{% else %}
+  {% set node_image_class =  'without-image' %}
+{% endif %}
+
+{% set modifier_classes = 'node--' ~ node.bundle %}
+
+<div class="uw-node__{{ node_image_class }}">
+  {% include '@components/card/card.twig' with {
+    'url': node.url,
+    'type': type,
+    'show_hover': '',
+    'header': node.header,
+    'show_header': show_header,
+    'media': node.media,
+    'image': node.image,
+    'content': node.content,
+    'footer': node.footer,
+    'tags': node.tags,
+    'ical': node.ical,
+  } %}
+</div>

src/patterns/04-components/card/card--node/card--node.twig

+<h2>Node - basic</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_webpage,
+  'type': 'node'
+} %}
+<h2>Node - with media</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_webpage_media,
+  'type': 'node'
+} %}
+<h2>Node - Blog (without media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_blog,
+  'type': 'node'
+} %}
+
+<h2>Node - Blog (with media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_blog_media,
+  'type': 'node'
+} %}
+
+<h2>Node - Event (without media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_event,
+  'type': 'node'
+} %}
+
+<h2>Node - Event (with media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_event_media,
+  'type': 'node'
+} %}
+
+<h2>Node - News (without media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_news,
+  'type': 'node'
+} %}
+
+<h2>Node - News (with media)</h2>
+{% include '@components/card/card--node/_card--node.twig' with {
+  'node': node_news_media,
+  'type': 'node'
+} %}

src/patterns/04-components/card/card-elements/_author.twig

+<div class="card__author">
+  by
+  {% if author.link %}
+    <a href="{{ author.link }}">{{ author.name }}</a>
+  {% else %}
+    {{ author.name }}
+  {% endif %}
+</div>

src/patterns/04-components/card/card-elements/_date.twig

+<div class="card__date">
+
+  {% for d in date %}
+    {% if date|length > 1 and loop.index0 == 0 %}
+      <details class="uw-date-details">
+      <summary role="button" aria-controls="edit-future-dates-collapsible" aria-expanded="false" aria-pressed="false" class="uw-date-details__summary">
+    {% endif %}
+    {% if modifier_classes != 'node--opportunity' %}
+    <span class="uw-date">
+    {% endif %}
+    {% if d.all_day %}
+      {% if d.start_date %}
+        {% set ddate = d.start_date %}
+      {% else %}
+        {% set ddate = d.date %}
+      {% endif %}
+      {% include '@components/date/_date.twig' with {
+        'date_format': 'long',
+        'date': ddate,
+      } %} (all day)
+    {% elseif d.date_range %}
+      {% include '@components/date/_date.twig' with {
+        'date_format': 'long_with_time',
+        'date': d.start_date,
+      } %}
+      -
+      {% if d.same_day %}
+        {% include '@components/date/_date.twig' with {
+          'date_format': 'time_only',
+          'date': d.end_date,
+        } %}
+      {% else %}
+        {% include '@components/date/_date.twig' with {
+          'date_format': 'long_with_time',
+          'date': d.end_date,
+        } %}
+      {% endif %}
+
+      {% include '@components/date/_date.twig' with {
+        'date_format': 'timezone',
+        'date': d.start_date,
+      } %}
+
+    {% else %}
+      {% include '@components/date/_date.twig' with {
+        'date_format': date_format,
+        'date': d.date,
+      } %}
+    {% endif %}
+
+    {% if date|length > 1 and loop.index0 == 0 %}
+    </summary>
+    {% endif %}
+
+    {% if date|length > 1 and loop.last %}
+      </details>
+    {% endif %}
+
+    {% if modifier_classes != 'node--opportunity' %}
+      </span>
+    {% endif %}
+
+  {% endfor %}
+</div>

src/patterns/04-components/card/card-elements/_hero-image.twig

+<style>
+
+  {% for source in hero_image.sources|reverse %}
+  @media only screen and {{ source.media | replace({'all and': ''}) }} {
+    .card__featured-image {
+      background-image: url("{{ source.srcset | replace({ ' 1x': '' }) }}");
+    }
+  }
+  {% endfor %}
+</style>
+
+<div class="card__featured-image" role="img" aria-label="{{ hero_image.alt }}">
+  {% if header %}
+    {% include '@components/card/card-elements/_header.twig' with {
+      'header': header,
+      'show_title': 'yes',
+    } %}
+  {% endif %}
+</div>

src/patterns/04-components/card/card-elements/_media.twig

+<div class="card__media">
+
+  {% if media.type == 'banner' %}
+    {% include '@components/banners/banners.twig' with {
+      'banners': media.media
+    } only %}
+  {% endif %}
+
+  {% if media.type == 'image' %}
+    {% include '@components/card/card-elements/_hero-image.twig' with {
+      'hero_image': media.media,
+      'header': header
+    } %}
+  {% endif %}
+
+  {% if media.type == 'remote_video' %}
+    {% include '@components/remote-video/remote-video.twig' with {
+      'remote_video': media.media
+    } %}
+  {% endif %}
+</div>

src/patterns/04-components/card/card-elements/_title.twig

+{% if header_level %}
+<h{{ header_level }} class="card__title">
+  {% else %}
+  <div class="card__title">
+    <strong>
+      {% endif %}
+
+
+      {% if url and type != 'node' %}
+      <a href="{{ url }}">
+        {% endif %}
+
+        {{ title }}
+
+        {% if url and type != 'node' %}
+      </a>
+      {% endif %}
+
+      {% if header_level %}
+</h{{ header_level }}>
+{% else %}
+  </strong>
+  </div>
+{% endif%}
+
+{% if sub_title %}
+  <span class="card__sub-title">{{ sub_title }}</span>
+{% endif %}

src/patterns/04-components/date/_date.scss

+.uw-date {
+  width:auto;
+
+  @include large {
+    margin-left:inherit;
+  }
+}
+
+.uw-date-details{
+  box-sizing: border-box;
+  display: inline-block;
+
+  .uw-date {
+    box-sizing: border-box;
+    display:block;
+    padding: rem(gesso-spacing(xs)) rem(gesso-spacing(sm));
+
+    &:first-child {
+      padding: rem(gesso-spacing(xs))  2.75rem rem(gesso-spacing(xs)) rem(gesso-spacing(sm));
+    }
+
+    text-transform: uppercase;
+  }
+
+  &[open] {
+    background-color: transparent !important;
+
+    .card__node--event & {
+      margin-bottom:2rem;
+    }
+
+    position: absolute;
+    width:calc(100%);
+    z-index: gesso-z-index(content);
+
+    @include xs {
+      width:inherit;
+    }
+  }
+}
+
+.uw-date-details__summary {
+  .uw-date {
+    background:inherit;
+  }
+
+  background-position: right 0.75rem center; // LTR
+  background-repeat: no-repeat;
+  background-size: rem(13px);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  padding:0;
+
+  .block-uw-cbl-multi-type-list & {
+    background-position: right 0.5rem center; // LTR
+  }
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci';
+@each $faculty in $faculties {
+  .#{$faculty} {
+    @if $faculty == org-default {
+
+      .uw-date-details {
+        background-color: gesso-brand(org-default, uw-gold, 'primary');
+
+        .uw-date {
+          background-color: gesso-brand(org-default, uw-gold, 'primary');
+        }
+
+        &[open] {
+          .uw-date-details__summary {
+            @include svg-background(mobile-arrow-up);
+            //width:100%;
+          }
+        }
+      }
+
+      .uw-date-details__summary {
+        .uw-date {
+          background:inherit;
+        }
+
+        @include svg-background(mobile-arrow-down);
+        background-color: gesso-brand(org-default, uw-gold,'primary');
+        color: gesso-brand(org-default,uw-black,'primary');
+      }
+    } @else {
+      .uw-date-details {
+        background-color: gesso-brand($faculty, 'primary');
+
+        .uw-date {
+          background-color: gesso-brand($faculty, 'primary');
+        }
+
+        &[open] {
+          .uw-date-details__summary {
+            @include svg-background(mobile-arrow-up-w);
+            //width:100%;
+          }
+        }
+      }
+
+      .uw-date-details__summary{
+        .uw-date{
+          background:inherit;
+        }
+
+        @include svg-background(mobile-arrow-down-w);
+        background-color:gesso-brand($faculty, 'primary');
+        color: gesso-brand(org-default, uw-white, 'primary');
+      }
+    }
+  }
+}

src/patterns/04-components/date/_date.twig

+{% if date_format == 'long' %}
+  {{ date|date('l, F j, Y') }}
+{% endif %}
+
+{% if date_format == 'standard' %}
+  {{ date|date('F j, Y') }}
+{% endif %}
+
+{% if date_format == 'long_with_time' %}
+  {{ date|date('l, F j, Y g:i a') }}
+{% endif %}
+
+{% if date_format == 'time_only' %}
+  {{ date|date('g:i a') }}
+{% endif %}
+
+{% if date_format == 'timezone' %}
+  {{ date|date('T') }}
+{% endif %}
+
+{% if date_format == 'month_only' %}
+  {{ date|date('F Y') }}
+{% endif %}

src/patterns/04-components/date/date.js

+(function ($, Drupal) {
+  'use strict';
+  Drupal.behaviors.uwdate = {
+    attach: function () {
+      $(document).ready(
+        function () {
+
+          $('.uw-date-details').each(
+            function () {
+
+              var findHeight = $(this).find($('.uw-date-details__summary .uw-date'));
+              var dateHeight = findHeight.outerHeight(true) + 'px';
+
+              // On click set the height of parent card__date.
+              // allow for no jump when 2 lines
+
+              $(this) .on(
+                'click', function () {
+                  // Get the parent and set min-height.
+                  $(this).parent('.card__date').css('min-height', dateHeight);
+
+                }
+              );
+            }
+          );
+        }
+      );
+    }
+  };
+})(jQuery, Drupal);

src/patterns/04-components/date/date.twig

+{% if pattern_lab %}
+  {% include '@components/label/label.twig' with {
+    'label': 'Standard (date_format: standard)'
+  } %}
+  {% include '@components/date/_date.twig' with {
+    'date_format': 'standard',
+    'date': date()
+  } %}
+
+  {% include '@components/label/label.twig' with {
+    'label': 'Long (date_format: long)'
+  } %}
+  {% include '@components/date/_date.twig' with {
+    'date_format': 'long',
+    'date': date()
+  } %}
+
+  {% include '@components/label/label.twig' with {
+    'label': 'Long with time (date_format: long_with_time)'
+  } %}
+  {% include '@components/date/_date.twig' with {
+    'date_format': 'long_with_time',
+    'date': date()
+  } %}
+
+  {% include '@components/label/label.twig' with {
+    'label': 'Time only (date_format: time_only)'
+  } %}
+  {% include '@components/date/_date.twig' with {
+    'date_format': 'time_only',
+    'date': date()
+  } %}
+
+  {% include '@components/label/label.twig' with {
+    'label': 'Timezone (date_format: timezone)'
+  } %}
+  {% include '@components/date/_date.twig' with {
+    'date_format': 'timezone',
+    'date': date()
+  } %}
+
+  {% include '@components/label/label.twig' with {
+    'label': 'Month only (date_format: month_only)'
+  } %}
+  {% include '@components/date/_date.twig' with {
+    'date_format': 'month_only',
+    'date': date()
+  } %}
+{% endif %}