@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/event-card/event-card.scss

@@ -0,0 +1,153 @@
+//
+// CivicTheme Event Card component styles.
+//
+
+@use 'sass:map';
+
+.ct-event-card {
+  $root: &;
+
+  & {
+    @include ct-elevation(2);
+
+    position: relative;
+    border-radius: var(--ct-event-card-border-radius);
+    width: 100%;
+
+    // Event image from "spilling" over the border radius.
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &:hover {
+      outline: 1px solid transparent;
+    }
+  }
+
+  &--card-clickable {
+    @include ct-elevation-interaction();
+
+    #{$root}__title-link {
+      @include ct-link-cover-parent();
+    }
+  }
+
+  &:not(#{$root}--with-image) {
+    @include ct-highlight-stripe-horizontal(var(--ct-event-card-stripe-height), var(--ct-event-card-border-radius), 0);
+  }
+
+  #{$root}__image {
+    img {
+      aspect-ratio: var(--ct-event-card-image-aspect-ratio);
+      display: block;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+
+  #{$root}__content {
+    padding: ct-spacing(3);
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ct-spacing(2);
+  }
+
+  #{$root}__title {
+    @include ct-typography('heading-4');
+  }
+
+  #{$root}__title-link {
+    @include ct-font-size-inherit();
+
+    text-decoration: none;
+
+    &:focus-visible {
+      @include ct-outline();
+      @include ct-outline-border();
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:visited {
+      color: inherit;
+    }
+  }
+
+  #{$root}__location {
+    @include ct-typography('label-regular');
+  }
+
+  #{$root}__tags {
+    display: flex;
+    margin-top: auto;
+    align-items: flex-end;
+    gap: ct-spacing(1);
+  }
+
+  #{$root}__link-graphic {
+    @include ct-flex-align-right();
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: ct-spacing(4);
+    height: ct-spacing(4);
+    pointer-events: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      opacity: var(--ct-event-card-link-graphic-hover-opacity);
+      border-radius: 100%;
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+
+    &#{$root}--card-clickable {
+      &:hover {
+        @include ct-component-property($root, $theme, hover, outline-color);
+
+        #{$root}__title-link {
+          @include ct-component-property($root, $theme, title, hover, color);
+        }
+
+        #{$root}__link-graphic {
+          &::before {
+            @include ct-component-property($root, $theme, link, graphic, hover, background-color);
+          }
+        }
+      }
+    }
+
+    &:not(#{$root}--card-clickable) {
+      #{$root}__title-link {
+        &:hover {
+          @include ct-component-property($root, $theme, title, hover, color);
+        }
+      }
+    }
+
+    #{$root}__title,
+    #{$root}__title-link {
+      @include ct-component-property($root, $theme, title, color);
+    }
+
+    #{$root}__link-graphic {
+      @include ct-component-property($root, $theme, link, graphic, color);
+    }
+
+    &#{$root}:not(#{$root}--with-image) {
+      @include ct-highlight-stripe-background-color(ct-component-var($root, $theme, stripe, background-color));
+    }
+  }
+}

package/components/02-molecules/event-card/event-card.stories.data.js

@@ -0,0 +1,31 @@
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    date: '20 Jan 2023 11:00',
+    date_iso: '',
+    date_end: '21 Jan 2023 15:00',
+    date_end_iso: '',
+    title: 'Event name which runs across two or three lines',
+    location: 'Suburb, State – 16:00–17:00',
+    summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    link: {
+      url: 'https://example.com/event',
+      is_new_window: false,
+    },
+    is_title_click: false,
+    image: {
+      url: './demo/images/demo7.jpg',
+      alt: 'Image alt text',
+    },
+    tags: [
+      'Tag 1',
+      'Tag 2',
+    ],
+    modifier_class: '',
+    attributes: null,
+    content_top: '',
+    image_over: '',
+    content_middle: '',
+    content_bottom: '',
+  }),
+};

package/components/02-molecules/event-card/event-card.stories.js

@@ -0,0 +1,68 @@
+/**
+ * CivicTheme Event Card component stories.
+ */
+
+import Component from './event-card.twig';
+import EventCardData from './event-card.stories.data';
+
+const meta = {
+  title: 'Molecules/List/Event Card',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    date: {
+      control: { type: 'text' },
+    },
+    date_end: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    location: {
+      control: { type: 'text' },
+    },
+    summary: {
+      control: { type: 'text' },
+    },
+    link: {
+      control: { type: 'object' },
+    },
+    is_title_click: {
+      control: { type: 'boolean' },
+    },
+    image: {
+      control: { type: 'object' },
+    },
+    tags: {
+      control: { type: 'array' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    image_over: {
+      control: { type: 'text' },
+    },
+    content_middle: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const EventCard = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: EventCardData.args('light'),
+};

package/components/02-molecules/event-card/event-card.test.js

@@ -0,0 +1,74 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/event-card/event-card.twig';
+
+describe('Event Card Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      title: 'Event Title',
+      summary: 'This is a summary of the event.',
+      date: '2023-01-01 12:00',
+      date_iso: '2023-01-01T12:00:00Z',
+      location: 'Event Location',
+    });
+
+    expect(c.querySelectorAll('.ct-event-card')).toHaveLength(1);
+    expect(c.querySelector('.ct-event-card__title').textContent.trim()).toEqual('Event Title');
+    expect(c.querySelector('.ct-event-card__summary').textContent.trim()).toEqual('This is a summary of the event.');
+    expect(c.querySelector('.ct-event-card__location').textContent.trim()).toEqual('Event Location');
+    expect(c.querySelector('.ct-event-card__date')).toBeTruthy();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content_top: 'Top content',
+      image_over: 'Image over content',
+      content_middle: 'Middle content',
+      content_bottom: 'Bottom content',
+      image: { url: 'https://example.com/image.jpg', alt: 'Image description' },
+      title: 'Event Title',
+      summary: 'This is a summary of the event.',
+      date: '2023-01-01 12:00',
+      date_iso: '2023-01-01T12:00:00Z',
+      location: 'Event Location',
+      link: { url: 'https://example.com' },
+      tags: ['Tag 1', 'Tag 2'],
+      theme: 'dark',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-event-card');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.classList.contains('ct-event-card--card-clickable')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+
+    expect(c.querySelector('.ct-event-card__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-event-card__image__over').textContent.trim()).toEqual('Image over content');
+    expect(c.querySelector('.ct-event-card__middle').textContent.trim()).toEqual('Middle content');
+    expect(c.querySelector('.ct-event-card__content-bottom').textContent.trim()).toEqual('Bottom content');
+    expect(c.querySelector('.ct-event-card__title').textContent.trim()).toEqual('Event Title');
+    expect(c.querySelector('.ct-event-card__summary').textContent.trim()).toEqual('This is a summary of the event.');
+    expect(c.querySelector('.ct-event-card__location').textContent.trim()).toEqual('Event Location');
+
+    const tags = c.querySelectorAll('.ct-event-card__tags .ct-tag');
+    expect(tags).toHaveLength(2);
+    expect(tags[0].textContent.trim()).toEqual('Tag 1');
+    expect(tags[1].textContent.trim()).toEqual('Tag 2');
+
+    const image = c.querySelector('.ct-event-card__image img');
+    expect(image).toBeTruthy();
+    expect(image.getAttribute('src')).toEqual('https://example.com/image.jpg');
+    expect(image.getAttribute('alt')).toEqual('Image description');
+
+    const titleLink = c.querySelector('.ct-event-card__title-link');
+    expect(titleLink).toBeTruthy();
+    expect(titleLink.getAttribute('href')).toEqual('https://example.com');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/02-molecules/event-card/event-card.twig

@@ -0,0 +1,195 @@
+{#
+/**
+ * @file
+ * CivicTheme Event Card component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - image: [object] Event image.
+ *   Each property contains:
+ *   - url: [string] Link URL.
+ *   - alt: [string] Image alt text.
+ * - is_title_click: [boolean] Whether to make only the title clickable instead of the whole card.
+ * - date_iso: [string] Start date and time in ISO format.
+ * - date: [string] Date area content.
+ * - date_end_iso: [string] End date and time in ISO format.
+ * - date_end: [string] End date and time.
+ * - link: [object] Optional link.
+ *   Each property contains:
+ *   - url: [string] Link URL.
+ *   - is_new_window: [boolean] Whether to open in a new window.
+ * - tags: [array] Event tags:
+ *   Each item contains:
+ *   - text: [string] Tag text.
+ *   - url: [string] Tag URL.
+ *   - is_new_window: [boolean] Whether to open tag in a new window.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - image_over: Image overlay content.
+ * - content_top: Top content area content.
+ * - title: Title area content.
+ * - content_middle: Middle content area content.
+ * - location: Location area content.
+ * - summary: Summary area content.
+ * - content_bottom: Bottom content area content.
+ *
+ * Blocks:
+ * - image_block
+ * - image_over_block
+ * - content_block
+ * - content_top_block
+ * - date_block
+ * - title_block
+ * - content_middle_block
+ * - location_block
+ * - summary_block
+ * - content_tags_block
+ * - content_bottom_block
+ */
+#}
+
+{% set with_image = image.url is not empty %}
+{% set with_image_class = with_image ? 'ct-event-card--with-image' : '' %}
+{% set with_link = link is not empty and link.url is defined and link.url is not empty %}
+{% set is_card_clickable = with_link and is_title_click is empty %}
+{% set card_clickable_class = is_card_clickable ? 'ct-event-card--card-clickable' : '' %}
+{% set image_over_class = image_over ? 'ct-event-card--image-over' : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s %s'|format(theme_class, with_image_class, image_over_class, card_clickable_class, modifier_class|default('')) %}
+
+{% if title is not empty %}
+  <div class="ct-event-card {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% block image_block %}
+      {% if image.url is not empty or image_over is not empty %}
+        <div class="ct-event-card__image">
+          {% include '@atoms/image/image.twig' with {
+            theme: theme,
+            url: image.url,
+            alt: image.alt,
+          } only %}
+
+          {% block image_over_block %}
+            {% if image_over is not empty %}
+              <div class="ct-event-card__image__over">
+                {{ image_over }}
+              </div>
+            {% endif %}
+          {% endblock %}
+        </div>
+      {% endif %}
+    {% endblock %}
+
+    {% block content_block %}
+      <div class="ct-event-card__content">
+        {% block content_top_block %}
+          {% if content_top is not empty %}
+            <div class="ct-event-card__content-top">
+              {{- content_top -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block date_block %}
+          {% if date is not empty %}
+            {% set date_content %}
+              {% include '@base/datetime/datetime.twig' with {
+                start: date,
+                start_iso: date_iso|default(null),
+                end: date_end|default(null),
+                end_iso: date_end_iso|default(null),
+              } only %}
+            {% endset %}
+
+            <div class="ct-event-card__date">
+              {% include '@atoms/tag/tag.twig' with {
+                theme: theme,
+                type: 'secondary',
+                content: date_content,
+                icon: 'calendar-2',
+                icon_placement: 'before',
+              } only %}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block title_block %}
+          {% if title is not empty %}
+            {% set title_content %}
+              {% if with_link %}
+                <a
+                  class="ct-event-card__title-link"
+                  href="{{ link.url }}"
+                  {% if link.is_new_window %}target="_blank"{% endif %}
+                >{{ title }}</a>
+              {% else %}
+                {{ title }}
+              {% endif %}
+            {% endset %}
+            <div class='ct-event-card__title'>{{ title_content }}</div>
+          {% endif %}
+        {% endblock %}
+
+        {% block content_middle_block %}
+          {% if content_middle is not empty %}
+            <div class="ct-event-card__middle">
+              {{- content_middle -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block location_block %}
+          {% if location %}
+            {% include '@atoms/paragraph/paragraph.twig' with {
+              theme: theme,
+              content: location,
+              modifier_class: 'ct-event-card__location',
+            } only %}
+          {% endif %}
+        {% endblock %}
+
+        {% block summary_block %}
+          {% if summary is not empty %}
+            {% include '@atoms/paragraph/paragraph.twig' with {
+              theme: theme,
+              content: summary,
+              no_margin: true,
+              modifier_class: 'ct-event-card__summary',
+            } only %}
+          {% endif %}
+        {% endblock %}
+
+        {% block content_tags_block %}
+          {% if tags or with_link %}
+            <div class="ct-event-card__tags">
+              {% if tags %}
+                {% include '@molecules/tag-list/tag-list.twig' with {
+                  theme: theme,
+                  tags: tags,
+                } only %}
+              {% endif %}
+
+              {% if is_card_clickable %}
+                <div class="ct-event-card__link-graphic">
+                  {% include '@base/icon/icon.twig' with {
+                    symbol: 'right-arrow-2',
+                    size: 'regular',
+                  } only %}
+                </div>
+              {% endif %}
+            </div>
+          {% endif %}
+        {% endblock %}
+
+        {% block content_bottom_block %}
+          {% if content_bottom is not empty %}
+            <div class="ct-event-card__content-bottom">
+              {{- content_bottom -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </div>
+    {% endblock %}
+  </div>
+{% endif %}

package/components/02-molecules/fast-fact-card/__snapshots__/fast-fact-card.test.js.snap

@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fast Fact Card Component renders with link when provided 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-fast-fact-card ct-theme-light ct-fast-fact-card--card-clickable "
+  >
+    
+        
+            
+    <div
+      class="ct-fast-fact-card__title"
+    >
+      
+                  
+      <a
+        class="ct-fast-fact-card__title-link"
+        href="https://example.com"
+      >
+        Fast Fact Title
+      </a>
+      
+              
+    </div>
+    
+      
+            
+
+
+    <div
+      class="ct-paragraph ct-theme-light ct-paragraph--large  ct-fast-fact-card__summary"
+    >
+      This is a summary of the fast fact.
+    </div>
+          
+  </div>
+  
+
+</div>
+`;
+
+exports[`Fast Fact Card Component renders with optional attributes 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-fast-fact-card ct-theme-dark ct-fast-fact-card--card-clickable custom-class"
+    data-test="true"
+  >
+    
+            
+    <div
+      class="ct-fast-fact-card__image"
+    >
+      
+        
+
+
+  
+      <img
+        alt="Image description"
+        class="ct-image ct-theme-dark "
+        src="https://example.com/image.jpg"
+      />
+      
+      
+    </div>
+    
+      
+            
+    <div
+      class="ct-fast-fact-card__title"
+    >
+      
+                  
+      <a
+        class="ct-fast-fact-card__title-link"
+        href="https://example.com"
+        target="_blank"
+      >
+        Fast Fact Title
+      </a>
+      
+              
+    </div>
+    
+      
+            
+
+
+    <div
+      class="ct-paragraph ct-theme-dark ct-paragraph--large  ct-fast-fact-card__summary"
+    >
+      This is a summary of the fast fact.
+    </div>
+          
+  </div>
+  
+
+</div>
+`;
+
+exports[`Fast Fact Card Component renders with required attributes 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-fast-fact-card ct-theme-light  "
+  >
+    
+        
+            
+    <div
+      class="ct-fast-fact-card__title"
+    >
+      
+                  Fast Fact Title
+              
+    </div>
+    
+      
+            
+
+
+    <div
+      class="ct-paragraph ct-theme-light ct-paragraph--large  ct-fast-fact-card__summary"
+    >
+      This is a summary of the fast fact.
+    </div>
+          
+  </div>
+  
+
+</div>
+`;
+
+exports[`Fast Fact Card Component renders with title click only when is_title_click is true 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-fast-fact-card ct-theme-light  "
+  >
+    
+        
+            
+    <div
+      class="ct-fast-fact-card__title"
+    >
+      
+                  
+      <a
+        class="ct-fast-fact-card__title-link"
+        href="https://example.com"
+      >
+        Fast Fact Title
+      </a>
+      
+              
+    </div>
+    
+      
+            
+
+
+    <div
+      class="ct-paragraph ct-theme-light ct-paragraph--large  ct-fast-fact-card__summary"
+    >
+      This is a summary of the fast fact.
+    </div>
+          
+  </div>
+  
+
+</div>
+`;