diff --git a/components/card-container/card-container.component.yml b/components/card-container/card-container.component.yml new file mode 100644 index 0000000..254f2d3 --- /dev/null +++ b/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" diff --git a/components/card-container/card-container.twig b/components/card-container/card-container.twig new file mode 100644 index 0000000..5095668 --- /dev/null +++ b/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, + ] +%} + +
+
+ {% block cards %} + {{ cards }} + {% endblock %} +
+
diff --git a/components/card/card.component.yml b/components/card/card.component.yml new file mode 100644 index 0000000..2f8d598 --- /dev/null +++ b/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 diff --git a/components/card/card.twig b/components/card/card.twig new file mode 100644 index 0000000..3b8177f --- /dev/null +++ b/components/card/card.twig @@ -0,0 +1,53 @@ +
+ {% if card_image %} +
+ {% else %} + {# If no image is provided, we'll use the no-image style #} +
+ {% endif %} + + {% if card_image %} + {# Images from the media library. We suppress alt since the adjacent link text has precedence #} + + {% endif %} + {% if card_badge %} +
+ {{ card_badge }} +
+ {% endif %} + {% if card_title %} + {# Card title. Heading level defined in the component. #} +
+ <{{ card_title_h_level }}> + + {{ card_title }} + + +
+ {% endif %} + +
+
+ {% if card_subheading %} + {{ card_subheading }} + {% endif %} + {% if card_text %} +
+ {{ card_text }} +
+ {% endif %} + {% if card_taxonomies %} +
+ {% for taxonomy in card_taxonomies %} +
+ + + {{ taxonomy.name }} + + +
+ {% endfor %} +
+ {% endif %} +
+
diff --git a/templates/node/node--event--full.html.twig b/templates/node/node--event--full.html.twig new file mode 100644 index 0000000..c4d0fef --- /dev/null +++ b/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', + ] +%} + + {{ title_prefix }} + + {{ label }} + + {{ title_suffix }} + + +
+ {{ node.field_event_media.entity.field_media_image.alt }} +
+
+
    + + {% if content.field_event_date_start %} +
  • + + + + {{ content.field_event_date_start.0 }} + {% if content.field_event_date_end|render %} +  —  + {{ content.field_event_date_end.0 }} + {% endif %} + +
    • + {% endif %} + + + + + {% if node.field_event_location.value %} +
  • + + + {{ node.field_event_location.value }} + +
    • + {% endif %} + + +
+ + {% if content.field_event_description %} + {{ content.field_event_description.0 }} + {% endif %} + + {% if content.field_event_url %} +

+ {{label}} on Cornell Events +

+ {% endif %} +
+
+ diff --git a/templates/node/node--event.html.twig b/templates/node/node--event.html.twig new file mode 100644 index 0000000..8b0d343 --- /dev/null +++ b/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 ) }} diff --git a/templates/views/views-view-unformatted--events.html.twig b/templates/views/views-view-unformatted--events.html.twig new file mode 100644 index 0000000..a1da3a6 --- /dev/null +++ b/templates/views/views-view-unformatted--events.html.twig @@ -0,0 +1,23 @@ +
+

{{ view.getTitle() }}

+ + {% 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 )}} +