Events cards

components/card-container/card-container.component.yml

@@ -0,0 +1,40 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Card Container
+status: experimental
+group: Layout
+slots:
+  cards:
+    title: Cards
+    expected:
+      - cds_base:card
+props:
+  type: object
+  properties:
+    use_tiles:
+      title: Use Tiled Layout
+      type: boolean
+    overlay:
+      title: Use Overlay
+      type: boolean
+    collapse:
+      title: Collapse Cards
+      type: boolean
+    responsive:
+      title: Responsive Behavior
+      type: string
+      enum:
+        - max-1
+        - max-2
+        - max-3
+        - max-4
+        - max-4-2
+        - max-3-1
+        - one-plus-max-3
+      meta:enum:
+        max-1: "1 column"
+        max-2: "2 columns"
+        max-3: "3 columns"
+        max-4: "4 columns"
+        max-4-2: "4 columns, then 2 columns"
+        max-3-1: "3 columns, then 1 column"
+        one-plus-max-3: "Highlight card, followed by 3 columns"

components/card-container/card-container.twig

@@ -0,0 +1,18 @@
+{% set card_container_attributes = create_attribute() %}
+{% set card_container_classes = [
+  'layout-cards',
+  'cwd-basic',
+  use_tiles ? 'tiles' : '',
+  overlay ? '' : 'no-overlay',
+  collapse ? 'collapse' : '',
+  responsive,
+  ]
+%}
+
+<div {{ card_container_attributes.addClass(card_container_classes) }}>
+  <div class="cards">
+    {% block cards %}
+      {{ cards }}
+    {% endblock %}
+  </div>
+</div>

components/card/card.component.yml

@@ -0,0 +1,50 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Card
+status: experimental
+group: Block
+props:
+  type: object
+  properties:
+    image_source:
+      title: Image Source
+      type: string
+      enum:
+        - Media Library
+        - External URL
+        - None
+    card_image:
+      $ref: json-schema-definitions://canvas.module/image
+      title: Image
+      type: object
+      examples:
+        - src: "assets/sample.jpg"
+          alt: "Cornell's mascot, the Big Red Bear, receives a homecoming hug from a young girl."
+          width: 360
+          height: 360
+    card_title:
+      title: Title
+      type: string
+    card_title_h_level:
+      title: Title Heading Level
+      type: string
+      enum:
+        - h2
+        - h3
+      default: h3
+    card_subheading:
+      title: Subheading
+      type: string
+    card_url:
+      type: string
+      title: Link
+    card_text:
+      title: Description
+      type: string
+    card_badge:
+      title: Badge
+      type: string
+    card_tags:
+      title: Tags
+      type: array
+      items:
+        type: string

components/card/card.twig

@@ -0,0 +1,53 @@
+<div class="card">
+  {% if card_image %}
+    <div class="group-image">
+  {% else %}
+    {# If no image is provided, we'll use the no-image style #}
+    <div class="group-noimage">
+  {% endif %}
+    <a href="{{ card_url }}">
+      {% if card_image %}
+        {# Images from the media library.  We suppress alt since the adjacent link text has precedence #}
+        <img src="{{ card_image.src }}" alt="" />
+      {% endif %}
+      {% if card_badge %}
+        <div class="badge">
+          {{ card_badge }}
+        </div>
+      {% endif %}
+      {% if card_title %}
+        {# Card title. Heading level defined in the component. #}
+        <div class="overlay">
+          <{{ card_title_h_level }}>
+            <span class="deco">
+              {{ card_title }}
+            </span>
+          </{{ card_title_h_level }}>
+        </div>
+      {% endif %}
+    </a>
+  </div>
+  <div class="group-fields">
+    {% if card_subheading %}
+      <strong>{{ card_subheading }}</strong>
+    {% endif %}
+    {% if card_text %}
+      <div class="field summary">
+        {{ card_text }}
+      </div>
+    {% endif %}
+    {% if card_taxonomies %}
+      <div class="metadata-set">
+        {% for taxonomy in card_taxonomies %}
+          <div class="field">
+            <a href="{{ taxonomy.url }}">
+              <span class="deco">
+                {{ taxonomy.name }}
+              </span>
+            </a>
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+</div>

templates/node/node--event--full.html.twig

@@ -0,0 +1,67 @@
+{%
+  set classes = [
+    node.bundle|clean_class,
+    node.isPromoted() ? 'is-promoted',
+    node.isSticky() ? 'is-sticky',
+    not node.isPublished() ? 'is-unpublished',
+    view_mode ? view_mode|clean_class,
+    'clearfix',
+    'padded',
+    'region',
+  ]
+%}
+<article{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  <h1{{ title_attributes }}>
+    {{ label }}
+  </h1>
+  {{ title_suffix }}
+
+    <div{{ content_attributes.addClass('event') }}>
+      <figure>
+        <img class="align-right" src="{{ node.field_event_media|file_url }}" alt="{{ node.field_event_media.entity.field_media_image.alt }}" />
+      </figure>
+      <div>
+        <ul class="custom no-bullet">
+
+          {% if content.field_event_date_start %}
+            <li>
+
+              <i aria-hidden="true" class="fa fa-calendar-o"></i>
+              <strong>
+              {{ content.field_event_date_start.0 }}
+              {% if content.field_event_date_end|render %}
+                &thinsp;&mdash;&thinsp;
+                {{ content.field_event_date_end.0 }}
+              {% endif %}
+              </strong>
+            </li>
+          {% endif %}
+
+
+
+
+          {% if node.field_event_location.value %}
+            <li>
+              <strong>
+              <i aria-hidden="true" class="fa fa-building"></i>
+              {{ node.field_event_location.value }}
+              </strong>
+            </li>
+          {% endif %}
+
+
+        </ul>
+
+        {% if content.field_event_description %}
+          {{ content.field_event_description.0 }}
+        {% endif %}
+
+        {% if content.field_event_url %}
+          <p class="localist-link">
+            <a class="link-button" href="{{ content.field_event_url.url }}">{{label}} on Cornell Events</a>
+          </p>
+        {% endif %}
+      </div>
+    </div>
+</article>

templates/node/node--event.html.twig

@@ -0,0 +1,17 @@
+{# Dependency: twig_tweak #}
+
+{% set card_image =
+  {
+    src: node.field_event_media|file_url,
+    alt: node.field_event_media.entity.field_media_image.alt,
+  }
+%}
+
+{{ include('cds_base:card', {
+  card_title: node.title.value,
+  card_title_h_level: 'h3',
+  card_subheading: content.field_event_date_start,
+  card_text: content.field_event_description,
+  card_url: node.field_event_url.uri ?: url,
+  card_image: card_image,
+}, with_context = false ) }}

templates/views/views-view-unformatted--events.html.twig

@@ -0,0 +1,23 @@
+<div class="region padded">
+  <h1>{{ view.getTitle() }}</h1>
+
+  {% set events %}
+    {% for row in rows %}
+      {#
+        With the events config (outputting events as rendered entities), this takes the
+        content from a node template (node--event.html.twig) and outputs it in the view.
+      #}
+      {{- row.content -}}
+    {% endfor %}
+  {% endset %}
+
+  {#
+    use_tiles - a prop of card-container we are setting
+    cards - a slot of card-container that we are populating with cards.  Slots don't have formatting
+            defined, but the card blocks do.
+  #}
+  {{ include('cds_base:card-container', {
+    use_tiles: false,
+    cards: events
+  }, with_context = false )}}
+</div>