Merge branch 'feature/ISTWCMS-5598-ebremner-basic-node-card' into '1.0.x'

Feature/istwcms 5598 ebremner basic node card

See merge request !5

src/patterns/01-core/elements/_details.scss

 // @file
 // Details element styles.
 
+@use '../../01-core' as *;
+
+//$summary-font-family: gesso-font-family(book);
+//$details-font-family: gesso-font-family(primary);
+
 :where(details) {
+  @include uw-no-breakout();
+  @include svg-background(mobile-arrow-down);
   background: var(--gray-2);
-  border-radius: var(--radius-2);
-  padding-block: var(--size-2);
-  padding-inline: var(--size-3);
+  border: var(--size-xs) solid #bfbfbf;
+  border-bottom:var(--size-xs) solid var(--uw-black-primary);
+  border-radius: var(--radius-1);
+  box-shadow: var(--shadow-1);
+  color: var(--uw-black-primary);
+  font-family: var(--font-serif);
+  margin: var(--size-3) 0;
+  transition: box-shadow 300ms ease;
+  width:100%;
+  &[open] > .seven-details__summary {
+    color: var(--uw-black-primary);
+  }
+  [open] > & {
+    @include svg-background(mobile-arrow-up);
+    width:100%;
+  }
 
   &[open] > summary {
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
-    margin-bottom: var(--size-2);
+    color: var(--uw-black-primary);
+  }
+  &:hover {
+    box-shadow: var(--shadow-3);
+  }
+  &:focus-within {
+    box-shadow: var(--shadow-3);
+  }
+  &:first-child{
+    margin-top: 0;
   }
-
   p:last-child {
     margin-bottom: 0;
   }
+  // Fallback for browsers that don’t support details.
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  .js &:not([open]) > .details__content {
+    display: none;
+  }
 }
 
 :where(summary) {
-  background: var(--gray-3);
-  border-radius: var(--radius-2);
+  @include uw-no-breakout();
+  @include svg-background(mobile-arrow-down);
+  background: var(--gray-2);
+  background-position: right var(--size-2) center; // LTR
+  background-repeat: no-repeat;
+  background-size: rem(13px);
+  border-radius: var(--radius-1);
+  color: var(--uw-black-primary);
   cursor: pointer;
+  display:block;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-0);
   font-weight: var(--font-weight-700);
-  margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
-  padding: var(--size-2) var(--size-3);
+  margin: 0;
+  line-height: 1.25;
+  outline: 0;
+  padding: var(--size-2);
+  transition: box-shadow 300ms ease;
   touch-action: manipulation;
+  [open] > & {
+    @include svg-background(mobile-arrow-up);
+    width:100%;
+  }
+  &:hover,
+  &:focus{
+    color:var(--uw-black-primary);
+  }
+  &:first-child{
+    margin-top: 0;
+  }
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+//
+.details__fallback-link {
+  display: block;
+  outline: 0;
+  text-decoration: none;
+}
+.details__content {
+  @include uw-no-breakout();
+  background: var(--uw-white-primary);
+  border: var(--size-xs) solid var(--gray-2);
+  border-top: 0;
+  padding: var(--size-2);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+  .uw-label{
+    margin-bottom:0;
+    margin-top: var(--size-2);
+  }
+}
+.details__description,
+.seven-details__description{
+  color: var(--uw-black-primary);
+  font-size: var(--font-size-00);
+  margin-bottom: var(--size-2);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+.node--type{
+  &-uw-ct-contact{
+    .details {
+      max-width:600px;
+    }
+  }
+}
+.seven-details__wrapper {
+  padding: var(--size-2);
+  .uw-input,
+  .form-text{
+    width:100%;
+  }
 }

src/patterns/01-core/elements/_html.scss

@@ -12,8 +12,9 @@
   block-size: 100%;
   caret-color: var(--caret-color);
   color: var(--text-0);
-  font-family: var(--font-sans);
-  line-height: var(--font-lineheight-4);
+  font-family: var(--font-serif);
+  font-size: var(--font-size-1);
+  line-height: var(--font-lineheight-2);
   min-height: 100%;
   scrollbar-color: var(--scrollbar-color) transparent;
   text-size-adjust: none;

src/patterns/01-core/elements/_label.scss

 // @file
 // Label element styles.
 
-// :where(label) {}
+ :where(label) {
+   font-family: var(--font-sans);
+ }
+.uw-label{
+  font-family: var(--font-sans);
+}

src/patterns/01-core/elements/_paragraph.scss

@@ -2,8 +2,8 @@
 // Paragraph styles.
 
 :where(p) {
-  font-size: var(--font-size-2);
-  margin-bottom: var(--size-2);;
+  font-size: var(--font-size-1);
+  margin-bottom: var(--size-2);
   margin-top: 0;
   max-inline-size: var(--size-content-3);
 

src/patterns/01-core/mixins/_index.scss

@@ -3,6 +3,7 @@
 @forward 'headings';
 @forward 'image-replace';
 @forward 'layout';
+@forward 'link';
 @forward 'list';
 @forward 'svg-background';
 @forward 'svg-icon';

src/patterns/01-core/mixins/_link.scss

+// @file
+// Link mixins
+
+@mixin link($link, $hover: $link, $active: $hover, $visit: $link) {
+  color: $link;
+  text-decoration:underline;
+  &:visited {
+    color: $visit;
+  }
+  &:hover,
+  &:focus {
+    color: $hover;
+    text-decoration:none;
+
+  }
+  &:active {
+    color: $active;
+  }
+}
+@mixin link-no-underline($link, $hover: $link, $active: $hover, $visit: $link) {
+  color: $link;
+  text-decoration:none;
+  &:visited {
+    color: $visit;
+  }
+  &:hover,
+  &:focus {
+    color: $hover;
+    text-decoration:none;
+  }
+  &:active {
+    color: $active;
+  }
+}
+
+@mixin link-reverse($link, $hover: $link, $active: $hover, $visit: $link) {
+  color: $link;
+  text-decoration:none;
+  &:visited {
+    color: $visit;
+  }
+  &:hover,
+  &:focus {
+    color: $hover;
+    text-decoration:underline;
+  }
+  &:active {
+    color: $active;
+  }
+}

src/patterns/01-core/mixins/_svg-background.scss

@@ -7,3 +7,16 @@
   background-size: 100%;
   display: inline-block;
 }
+
+
+//@mixin svg-background($image-name, $image-location: '../source/images/icons/') {
+//  background-image: url($image-location + $image-name + '.svg');
+//}
+//
+//@mixin svg-background-color($image-color, $image-name, $image-location: '../source/images/icons/') {
+//  background-color: $image-color;
+//  -webkit-mask:  url($image-location + $image-name + '.svg') no-repeat;
+//  mask: url($image-location + $image-name + '.svg') no-repeat;
+//  -webkit-mask-size: contain;
+//  mask-size: contain;
+//}

src/patterns/02-base/macros/uw.macro.twig

+{% macro readmore(url, title, label = "Read more", description_prefix = "about" ) %}
+  {% include '@components/readmore-link/readmore-link.twig' with {
+    'url': url,
+    'label': label,
+    'description_prefix': description_prefix,
+    'title': title
+  } %}
+{% endmacro %}
+
+{% macro tag(url, title, type = "full", size = "normal" ) %}
+  {% include '@components/tag/tag.twig' with {
+    'url': url,
+    'title': title,
+    'type': type,
+    'size': size,
+    'faculty':faculty
+  } %}
+{% endmacro %}

src/patterns/03-layouts/_index.scss

-// @file
-// Styles layouts
-
-@use 'content/content' as *;
-@use 'footer/footer' as *;
-@use 'grid/grid' as *;
-@use 'header/header' as *;
-@use 'region/region' as *;
-@use 'layout/layout' as *;
-@use 'layout/layout-base' as *;
-@use 'layout/layout--1-col/layout--1-col' as *;
-@use 'layout/layout--2-col/layout--2-col' as *;
-@use 'layout/layout--3-col/layout--3-col' as *;
-@use 'layout/layout--4-col/layout--4-col' as *;
-@use 'layout/layout--5-col/layout--5-col' as *;
-@use 'layout/layout--inverted-l-left/layout--inverted-l-left' as *;
-@use 'layout/layout--inverted-l-right/layout--inverted-l-right' as *;
-@use 'site-container/site-container' as *;
-@use 'site-footer/site-footer' as *;
+@forward 'content/content';
+@forward 'footer/footer';
+@forward 'grid/grid';
+@forward 'header/header';
+@forward 'layout/layout';
+@forward 'layout/layout-base';
+@forward 'node/node';
+@forward 'region/region';
+@forward 'site-container/site-container';
+@forward 'site-footer/site-footer';

src/patterns/03-layouts/layout/_layout-base.scss

 @use '../../01-core' as *;
+@use '../../03-layouts/layout/layout--1-col/layout--1-col' as *;
+@use '../../03-layouts/layout/layout--2-col/layout--2-col' as *;
+@use '../../03-layouts/layout/layout--3-col/layout--3-col' as *;
+@use '../../03-layouts/layout/layout--4-col/layout--4-col' as *;
+@use '../../03-layouts/layout/layout--5-col/layout--5-col' as *;
+@use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *;
+@use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *;
 
 .layout__region {
 
   .layout-builder &{
-
-    //outline: 2px dashed #2f91da;
-    outline: 2px dashed var(--blue-6);
+    outline: var(--size-sm) dashed var(--blue-6);
   }
 
   .pl & {
-
-    //outline: 2px dashed #2f91da;
-    outline: 2px dashed var(--blue-6);
-    padding: 1.5rem;
+    outline: var(--size-sm) dashed var(--blue-6);
+    padding: var(--size-3);
     text-align: center;
     .pl-labels{
       text-align: center;

src/patterns/03-layouts/node/_node.scss

+// @file
+// Styles for node..
+
+@use '../../01-core' as *;
+
+$sidebar-width: 18.75rem;
+
+.uw-node {
+
+  &__grid {
+    display: block;
+  }
+
+  &__sidebar{
+    display: none;
+  }
+
+  // Reset the grid to become flexed when we have sidebar.
+  &.uw-node__with-sidebar {
+
+    .uw-node__grid {
+      display: flex;
+      flex-direction: column;
+      gap: var(--grid-gap);
+      justify-content: center;
+
+      .layout {
+        margin: 0 auto;
+        width: 100%;
+      }
+
+      .uw-contained-width {
+        margin: 0 auto;
+      }
+
+      .uw-full-width {
+        width: 100vw;
+      }
+
+      @media(min-width: $screen-md) {
+        flex-direction: row;
+        gap: var(--grid-gap);
+
+        .layout {
+          padding-right: 0;
+          width: clamp(320px, 868px, calc(100vw - 347px));
+        }
+
+        .uw-contained-width {
+          padding-right: 0;
+          width: clamp(320px, 868px, calc(100vw - 347px));
+        }
+
+        /* Match the width of WCMS2's narrow: 496px */
+        .uw-contained-width--narrow {
+          padding-right: 0;
+          width: clamp(320px, 496px, calc(100vw - 347px));
+        }
+
+        /* Match the width of WCMS2's wide: 753px */
+        .uw-contained-width--wide {
+          padding-right: 0;
+          width: clamp(320px, 753px, calc(100vw - 347px));
+        }
+      }
+    }
+
+    .uw-node__sidebar {
+
+      // Turn on sidebar with display.
+      display: block;
+      padding: 0 var(--size-2);
+      width: 100%;
+
+      .layout {
+        padding: 0;
+      }
+
+      @media(min-width: $screen-md) {
+        padding: 0;
+        width: $sidebar-width;
+        .layout {
+          width: inherit;
+        }
+      }
+    }
+  }
+}
+
+// Class appears when full width content loads with sidebar on page
+.uw-section-has-full-width.uw-node__with-sidebar {
+
+  .uw-node__grid {
+    justify-content: space-between;
+
+    .uw-node__node {
+      width: 100%;
+
+      @media(min-width: $screen-md) {
+        padding-right: 0;
+        width: calc(100vw - 347px);
+      }
+    }
+
+    .uw-full-width {
+      max-width: inherit;
+      padding: 0;
+      width: 100%;
+    }
+  }
+
+  .uw-node__sidebar {
+    @media(min-width: $screen-md) {
+      padding: 0;
+    }
+  }
+}

src/patterns/03-layouts/node/node.twig

+{% if classes %}
+  {% set classes = classes %}
+{% else %}
+  {% set classes = [] %}
+{% endif %}
+
+{% if has_sidebar == 'Yes' %}
+  {% set classes = classes | merge(['uw-node', 'uw-node__with-sidebar']) %}
+{% else %}
+  {% set classes = classes | merge(['uw-node']) %}
+{% endif %}
+
+<div {{ attributes.addClass(classes) }}>
+  <div class="uw-node__grid">
+    <article class="uw-node__node">
+      {% block content %}
+        This is the node content
+      {% endblock %}
+    </article>
+    {% if has_sidebar == 'Yes' %}
+      <aside class="uw-node__sidebar">
+        {% block sidebar_content %}
+          This is the sidebar
+        {% endblock %}
+      </aside>
+    {% endif %}
+  </div>
+</div>

src/patterns/03-layouts/node/node.yml

+has_sidebar: Yes

src/patterns/03-layouts/region/_region.scss

@@ -3,8 +3,8 @@
 
 .l-region {
   .pl &{
-    outline: 1px dashed var(--gray-4);
-    padding: 1.5rem;
+    outline: var(--size-xs) dashed var(--gray-4);
+    padding: var(--size-3);
     text-align: center;
   }
 }

src/patterns/03-layouts/site-footer/_site-footer.scss

 @use '../../01-core' as *;
 
 .uw-site-footer {
-  background-color: var(--gray-3);
+  background-color: var(--uw-black-3);
   &__wrapper {
     @include layout-constrain;
     display: grid;

src/patterns/04-components/_index.scss

+@forward 'card/card';
+@forward 'tag-list/tag-list';
+@forward 'tag/tag';

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

+// @file
+// Styles for Cards..
+
+@use '../../01-core' as *;
+
+$card-accent-border-color: var(--uw-black-primary) !default;
+$card-link-color: var(--uw-black-primary) !default;
+$card-link-color-hover: var(--gray-5) !default;
+$card-meta-color:  var(--gray-5) !default;
+$card-padding: var(--size-2) !default;
+
+.card {
+  width: 100%;
+
+  .views-row & {
+    height: 100%;
+  }
+
+  .uw-label {
+    display: block;
+    margin-top: var(--size-2);
+  }
+
+  &__catalog-tags {
+    padding-bottom: $card-padding;
+  }
+}
+
+// if card--show-hover class is present then show "
+.card--show-hover{
+  border-bottom: 3px solid $card-accent-border-color;
+  box-shadow: var(--shadow-1);
+  transition: box-shadow 300ms ease;
+
+  &:hover,
+  &:focus-within {
+    box-shadow: var(--shadow-3);
+  }
+}
+
+.card__image {
+  margin-bottom: $card-padding;
+
+  img {
+    display: block;
+  }
+
+  a {
+    background: var(--uw-black-primary);
+    display: block;
+
+    img {
+      -webkit-filter: opacity(100%);
+      filter: opacity(100%);
+      transition: filter;
+    }
+    &:hover,
+    &:focus {
+      img {
+        -webkit-filter: opacity(62%);
+        filter: opacity(62%);
+        transition:filter;
+      }
+    }
+  }
+}
+
+.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-no-breakout();
+  margin-bottom: var(--size-3);
+  width: 100%;
+
+  .card__node--event & {
+    display:grid;
+    grid-template-columns: 1fr auto;
+
+    .card__author {
+      grid-column: 1/2;
+    }
+
+    .card__date {
+      grid-column: 1/2;
+    }
+
+    .card__title {
+      grid-column: 1/2;
+    }
+
+    .view-interact {
+      background-color:  var(--uw-white-1);
+      grid-column: 2/3;
+      grid-row: 2/3;
+      margin: 0;
+      padding: 1rem 1rem 0 0;
+
+      .uw-node__without-image & {
+        grid-column: 2/3;
+        grid-row: inherit;
+        margin-bottom: 1rem;
+        padding: 0;
+      }
+    }
+  }
+}
+
+.card__date {
+  font-size: var(--font-size-1);
+  margin-bottom: var(--size-2);
+  position: relative;
+}
+
+.card__title {
+  margin: 0 0 var(--size-1) 0;
+  padding: 0;
+  width: 100%;
+
+  a {
+
+    @include link-reverse(
+       var(--uw-black-primary),
+        var(--uw-black-primary)
+    );
+  }
+}
+
+.card__author {
+  @include uw-no-breakout();
+  font-family: var(--font-mono);
+  font-size: var(--font-size-1);
+  margin-top: 0;
+  padding: 0 0 var(--size-1) 0;
+  a {
+    @include link(
+        var(--uw-black-primary),
+        var(--uw-black-primary)
+    );
+  }
+}
+
+// body
+.card__body {
+  width: 100%;
+}
+
+.card__content {
+  margin-bottom: var(--size-3);
+  width: 100%;
+
+  &:empty {
+    margin-bottom:0;
+  }
+}
+
+
+.card__position {
+  color: var(--uw-black-primary);
+  font-size: 1.26562rem;
+}
+
+// footer
+.card__footer {
+  width: 100%;
+}
+
+.card__tags {
+  margin:0;
+  padding:0;
+  width: 100%;
+}
+
+.card__readmore {
+  text-align: right;
+}
+
+.card__social {
+  max-width: 20rem;
+  width: 100%;
+}
+
+.card__project{
+  &-members--content {
+    @include uw-flex-grid();
+    .card__project-member {
+      @include flex(1 1 auto);
+      @include flex-grow(1);
+      width: 45%;
+    }
+    @media(min-width: $screen-md) {
+      .card__project-member {
+        @include flex(1 1 auto);
+        @include flex-grow(1);
+        width: 20%;
+      }
+    }
+  }
+}
+
+// Have not worked on card feature.
+.card--feature {
+  .card__body {
+    padding-top: $card-padding;
+  }
+  .card__media {
+    margin-bottom: 0;
+  }
+}

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

+<div class="card__content">{{ content }}</div>

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

+{% if footer.service_information %}
+  {% include '@components/card/card-elements/_service-information.twig' with {
+    'info': footer.service_information
+  } %}
+{% endif %}
+
+{% if footer.service_details %}
+  {% include '@components/card/card-elements/_service-details.twig' with {
+    'service_details': footer.service_details
+  } %}
+{% endif %}
+
+{% if footer.service_hours %}
+  {% include '@components/card/card-elements/_service-hours.twig' with {
+    'service_hours': footer.service_hours
+  } %}
+{% endif %}
+
+{% if footer.contact_info %}
+  {% include '@components/card/card-elements/_contact-info.twig' with {
+    'contact_info': footer.contact_info
+  } %}
+{% endif %}
+
+{% if footer.contact_for %}
+  {% include '@components/card/card-elements/_contact-for.twig' with {
+    'contact_for': footer.contact_for
+  } %}
+{% endif %}
+
+{% if footer.groups %}
+  {% include '@components/card/card-elements/_groups.twig' with {
+    'groups': footer.groups.groups
+  } %}
+{% endif %}
+
+{% if footer.opportunity_dates %}
+  {% include '@components/card/card-elements/_opportunity-dates.twig' with {
+    'dates': footer.opportunity_dates
+  } %}
+{% endif %}
+
+{% if footer.opportunity_details %}
+  {% include '@components/card/card-elements/_opportunity-details.twig' with {
+    'opportunity_details': footer.opportunity_details
+  }%}
+{% endif %}
+
+{% if footer.links %}
+  {% include '@components/card/card-elements/_links.twig' with {
+    'links': footer.links
+  }%}
+{% endif %}
+
+{% if footer.location_info %}
+  {% include '@components/card/card-elements/_location-info.twig' with {
+    'location_info': footer.location_info
+  }%}
+{% endif %}
+
+{% if footer.additional_info %}
+  {% include '@components/card/card-elements/_additional-info.twig' with {
+    'additional_info': footer.additional_info
+  } %}
+{% endif %}
+
+{% if footer.posted %}
+  {% include '@components/label/label.twig' with {
+    'label': 'Date posted'
+  } %}
+  {% include '@components/card/card-elements/_date.twig' with {
+    'date_format': 'long',
+    'date': footer.posted
+  } %}
+{% endif %}
+
+{% if footer.deadline %}
+  {% include '@components/label/label.twig' with {
+    'label': 'Application deadline'
+  } %}
+  {% include '@components/card/card-elements/_date.twig' with {
+    'date_format': 'long_with_time',
+    'date': footer.deadline
+  } %}
+{% endif %}
+
+{% if footer.opportunity_type %}
+  {% include '@components/card/card-elements/_opportunity-type.twig' with {
+    'opportunity_type': footer.opportunity_type
+  } %}
+{% endif %}
+
+{% if footer.project_details %}
+  {% include '@components/card/card-elements/_project-details.twig' with {
+    'project_details': footer.project_details
+  } %}
+{% endif %}
+
+{% if footer.timeline %}
+  {% include '@components/card/card-elements/_timeline.twig' with {
+    'timeline': footer.timeline
+  } %}
+{% endif %}
+
+{% if footer.project_members %}
+  {% include '@components/card/card-elements/_project-members.twig' with {
+    'project_members': footer.project_members
+  } %}
+{% endif %}
+
+{% if footer.tags %}
+  {% include '@components/card/card-elements/_tags.twig' with {
+    'tags': footer.tags,
+  } %}
+{% endif %}

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

+<div class="card__header">
+
+  {% if bundle == 'uw_ct_profile' %}
+    {% if image %}
+      <div class="uw-image__profiles">
+        {% include '@components/card/card-elements/_image.twig' with {
+          'image': image,
+          'bundle': bundle
+        } %}
+      </div>
+    {% endif %}
+  {% endif %}
+
+  {% if header.date %}
+
+    {% if type == 'event' %}
+      {% set date_format = 'long_with_time' %}
+    {% else %}
+      {% set date_format = 'long' %}
+    {% endif %}
+
+    {% include '@components/card/card-elements/_date.twig' with {
+      'date_format': date_format,
+      'date': header.date,
+      'type': type,
+    } %}
+  {% endif %}
+
+  {% if header.title and show_title == 'yes' %}
+    {% include '@components/card/card-elements/_title.twig' with {
+      'header_level': 2,
+      'title': header.title,
+      'type': type
+    } %}
+  {% endif %}
+
+  {% if header.position %}
+    {% include '@components/card/card-elements/_position.twig' with {
+      'position': header.position
+    } %}
+  {% endif %}
+
+  {% if header.author %}
+    {% include '@components/card/card-elements/_author.twig' with {
+      'author': header.author
+    } %}
+  {% endif %}
+
+  {% if header.posted %}
+    {% include '@components/label/label.twig' with {
+      'label': 'Date posted'
+    } %}
+    {% include '@components/card/card-elements/_date.twig' with {
+      'date_format': 'long',
+      'date': header.posted
+    } %}
+  {% endif %}
+
+  {% if header.opportunity_type %}
+    {% include '@components/card/card-elements/_opportunity-type.twig' with {
+      'opportunity_type': header.opportunity_type
+    } %}
+  {% endif %}
+
+  {% if header.employment_type %}
+    {% include '@components/card/card-elements/_employment-type.twig' with {
+      'employment_type': header.employment_type
+    } %}
+  {% endif %}
+
+  {% if header.rate_of_pay or header.rate_of_pay_type %}
+    {% include '@components/card/card-elements/_rate-of-pay.twig' with {
+      'rate_of_pay': header.rate_of_pay,
+      'rate_of_pay_type': header.rate_of_pay_type
+    } %}
+  {% endif %}
+
+  {% if header.job_id %}
+    {% include '@components/card/card-elements/_job-id.twig' with {
+      'job_id': header.job_id
+    } %}
+  {% endif %}
+
+  {% if ical %}
+    {% include '@components/view/view-interact/view-interact.twig' with {
+      'ical': ical
+    }%}
+  {% endif %}
+
+</div>