@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,148 @@
+//
+// CivicTheme Publication Card component styles.
+//
+
+@use 'sass:map';
+
+.ct-publication-card {
+  $root: &;
+
+  & {
+    @include ct-elevation(2);
+
+    position: relative;
+    border-radius: var(--ct-publication-card-border-radius);
+    width: 100%;
+
+    // Prevent 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();
+    }
+  }
+
+  @include ct-breakpoint(m) {
+    flex-direction: row;
+  }
+
+  #{$root}__image {
+    @include ct-image-fit();
+
+    & {
+      position: relative;
+      height: var(--ct-publication-card-image-height-mobile);
+      width: auto;
+      min-width: var(--ct-publication-card-image-width-mobile);
+    }
+
+    @include ct-breakpoint(m) {
+      width: var(--ct-publication-card-image-width-desktop);
+      height: auto;
+      min-height: var(--ct-publication-card-image-height-desktop);
+      flex-shrink: 0;
+    }
+  }
+
+  #{$root}__content {
+    width: 100%;
+    padding: ct-spacing(3);
+    box-sizing: border-box;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: ct-spacing(2);
+  }
+
+  #{$root}__title {
+    @include ct-typography('heading-4');
+  }
+
+  #{$root}__title-bar {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    gap: ct-spacing();
+  }
+
+  #{$root}__title-icon {
+    flex-shrink: 0;
+  }
+
+  #{$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}__filename {
+    @include ct-typography('label-regular');
+
+    padding-right: ct-spacing(3);
+  }
+
+  #{$root}__content-bottom {
+    display: flex;
+    justify-content: space-between;
+    margin-top: auto;
+    padding-top: ct-spacing(3);
+  }
+
+  @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);
+        }
+      }
+    }
+
+    &: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}__title-icon {
+      @include ct-component-property($root, $theme, title, icon, color);
+    }
+
+    #{$root}__filename {
+      @include ct-component-property($root, $theme, filename, color);
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+/**
+ * CivicTheme Publication Card component stories.
+ */
+
+import Component from './publication-card.twig';
+
+const meta = {
+  title: 'Molecules/List/Publication Card',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    summary: {
+      control: { type: 'text' },
+    },
+    image: {
+      control: { type: 'object' },
+    },
+    image_over: {
+      control: { type: 'text' },
+    },
+    file: {
+      control: { type: 'object' },
+    },
+    is_title_click: {
+      control: { type: 'boolean' },
+    },
+    filename_prefix: {
+      control: { type: 'text' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_middle: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const PublicationCard = {
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    theme: 'light',
+    title: 'Publication card title',
+    summary: 'Summary of the publication card',
+    image: {
+      url: './demo/images/demo1.jpg',
+      alt: 'Image alt text',
+    },
+    file: {
+      name: 'Document.doc',
+      ext: 'doc',
+      url: 'https://example.com/file.pdf',
+      size: '42.88 KB',
+      created: '2022-01-01',
+      changed: '2022-01-02',
+      icon: 'word-file',
+    },
+    is_title_click: false,
+    filename_prefix: 'File details:',
+    image_over: '',
+    content_top: '',
+    content_middle: '',
+    content_bottom: '',
+    attributes: null,
+    modifier_class: '',
+  },
+};

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

@@ -0,0 +1,113 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/publication-card/publication-card.twig';
+
+describe('Publication Card Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      file: {
+        name: 'Sample File',
+        ext: 'PDF',
+        url: 'https://example.com/sample.pdf',
+        size: '2MB',
+      },
+      title: 'Publication Card Title',
+    });
+
+    expect(c.querySelectorAll('.ct-publication-card')).toHaveLength(1);
+    expect(c.querySelector('.ct-publication-card__title').textContent.trim()).toEqual('Publication Card Title');
+    expect(c.querySelector('.ct-publication-card__filename').textContent.trim()).toContain('Sample File (PDF, 2MB)');
+
+    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: 'Publication Card Title',
+      summary: 'This is the summary of the publication card.',
+      file: {
+        name: 'Sample File',
+        ext: 'PDF',
+        url: 'https://example.com/sample.pdf',
+        size: '2MB',
+        created: '2023-01-01',
+        changed: '2023-02-01',
+        icon: 'pdf-file',
+      },
+      theme: 'dark',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-publication-card');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('ct-publication-card--with-image')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('true');
+
+    expect(c.querySelector('.ct-publication-card__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-publication-card__content-bottom').textContent.trim()).toEqual('Bottom content');
+    expect(c.querySelector('.ct-publication-card__title').textContent.trim()).toEqual('Publication Card Title');
+    expect(c.querySelector('.ct-publication-card__summary').textContent.trim()).toEqual('This is the summary of the publication card.');
+
+    const image = c.querySelector('.ct-publication-card__image img');
+    expect(image).toBeTruthy();
+    expect(image.getAttribute('src')).toEqual('https://example.com/image.jpg');
+    expect(image.getAttribute('alt')).toEqual('Image description');
+
+    const fileLink = c.querySelector('.ct-publication-card__filename');
+    expect(fileLink).toBeTruthy();
+    expect(fileLink.textContent.trim()).toContain('Sample File (PDF, 2MB)');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when file is empty', async () => {
+    const c = await dom(template, {
+      file: {},
+    });
+
+    expect(c.querySelectorAll('.ct-publication-card')).toHaveLength(0);
+  });
+
+  test('renders file link with extension and size', async () => {
+    const c = await dom(template, {
+      file: {
+        name: 'Sample File',
+        ext: 'PDF',
+        url: 'https://example.com/sample.pdf',
+        size: '2MB',
+      },
+    });
+
+    const fileLink = c.querySelector('.ct-publication-card__link');
+    expect(fileLink).toBeTruthy();
+    expect(fileLink.textContent.trim()).toContain('Sample File (PDF, 2MB)');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with summary when provided', async () => {
+    const c = await dom(template, {
+      file: {
+        name: 'Sample File',
+        ext: 'PDF',
+        url: 'https://example.com/sample.pdf',
+        size: '2MB',
+      },
+      summary: 'This is the summary of the publication card.',
+    });
+
+    const summary = c.querySelector('.ct-publication-card__summary');
+    expect(summary).toBeTruthy();
+    expect(summary.textContent.trim()).toEqual('This is the summary of the publication card.');
+
+    assertUniqueCssClasses(c);
+  });
+});

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

@@ -0,0 +1,162 @@
+{#
+/**
+ * @file
+ * CivicTheme Publication Card component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - modifier_class: [string] Additional CSS classes.
+ * - image: [object] Card image.
+ *   Each property contains:
+ *   - url: [string] Image URL.
+ *   - alt: [string] Image alt text.
+ * - file: [object] File object for download.
+ *   Each property contains:
+ *   - name: [string] File name.
+ *   - url: [string] File URL.
+ *   - ext: [string] File extension.
+ *   - size: [string] File size.
+ * - is_title_click: [boolean] Whether to make only the title clickable instead of the whole card.
+ * - filename_prefix: [string] Description of file details for accessibility.
+ * - title: [string] Card title text.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - image_over: Image overlay content.
+ * - content_top: Top content area.
+ * - content_middle: Middle content area.
+ * - summary: Card summary.
+ * - content_bottom: Bottom content area.
+ *
+ * Blocks:
+ * - image_block
+ * - image_over_block
+ * - content_top_block
+ * - title_block
+ * - content_middle_block
+ * - summary_block
+ * - link_block
+ * - content_bottom_block
+ */
+#}
+
+{% set with_image = image.url is not empty %}
+{% set with_image_class = with_image ? 'ct-publication-card--with-image' : '' %}
+{% set with_file = file is not empty and file.url is defined and file.url is not empty %}
+{% set is_card_clickable = with_file and is_title_click is empty and title is not empty %}
+{% set card_clickable_class = is_card_clickable ? 'ct-publication-card--card-clickable' : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s'|format(theme_class, with_image_class, card_clickable_class, modifier_class|default('')) %}
+
+{% set filename_prefix = filename_prefix|default('File details:') %}
+{% set has_ext = file.ext is not empty %}
+{% set has_size = file.size is not empty %}
+{% set extension_text = (has_ext and has_size) ? '%s, %s'|format(file.ext, file.size) : file.ext|default(file.size|default('')) %}
+{% set extension_text = extension_text ? '(%s)'|format(extension_text) : '' %}
+{% set filename_text = file.name is not empty ? file.name : '' %}
+{% set filename = '%s %s'|format(filename_text, extension_text)|trim %}
+
+{% if file is not empty %}
+  <div class="ct-publication-card {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    {% block image_block %}
+      {% if image.url is not empty %}
+        <div class="ct-publication-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-publication-card__image__over">
+                {{ image_over }}
+              </div>
+            {% endif %}
+          {% endblock %}
+        </div>
+      {% endif %}
+    {% endblock %}
+
+    <div class="ct-publication-card__content">
+      {% block content_top_block %}
+        {% if content_top is not empty %}
+          <div class="ct-publication-card__content-top">
+            {{- content_top -}}
+          </div>
+        {% endif %}
+      {% endblock %}
+
+      {% block title_block %}
+        {% if title is not empty %}
+          {% set title_content %}
+            {% if with_file %}
+              {% set title_label = filename ? '%s. %s %s'|format(title, filename_prefix, filename) : '' %}
+              <a
+                class="ct-publication-card__title-link"
+                href="{{ file.url }}"
+                {% if title_label %}aria-label="{{ title_label }}"{% endif %}
+              >{{ title }}</a>
+            {% else %}
+              {{ title }}
+            {% endif %}
+          {% endset %}
+
+          <div class="ct-publication-card__title-bar">
+            <div class="ct-publication-card__title">{{ title_content }}</div>
+            {% include '@base/icon/icon.twig' with {
+              symbol: 'download',
+              size: 'regular',
+              modifier_class: 'ct-publication-card__title-icon',
+            } only %}
+          </div>
+        {% endif %}
+      {% endblock %}
+
+      {% block content_middle_block %}
+        {% if content_middle is not empty %}
+          <div class="ct-publication-card__content__middle">
+            {{- content_middle -}}
+          </div>
+        {% 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-publication-card__summary',
+          } only %}
+        {% endif %}
+      {% endblock %}
+
+      {% block link_block %}
+        {% if filename is not empty %}
+          {% if title is not empty %}
+            <div class="ct-publication-card__filename">
+              <span class="ct-visually-hidden">{{ filename_prefix }}</span>
+              {{ filename }}
+            </div>
+          {% else %}
+            {% include '@atoms/link/link.twig' with {
+              theme: theme,
+              text: filename,
+              url: file.url,
+              modifier_class: 'ct-publication-card__link',
+            } only %}
+          {% endif %}
+        {% endif %}
+      {% endblock %}
+
+      {% block content_bottom_block %}
+        {% if content_bottom is not empty %}
+          <div class="ct-publication-card__content-bottom">
+            {{- content_bottom -}}
+          </div>
+        {% endif %}
+      {% endblock %}
+    </div>
+  </div>
+{% endif %}

package/components/02-molecules/search/__snapshots__/search.test.js.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search Component renders with URL only 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-search ct-theme-light "
+  >
+    
+  
+    <a
+      class="ct-link ct-theme-light     ct-search__link"
+      href="https://example.com/search"
+    >
+      
+      
+      <span
+        class="ct-text-icon__text"
+      >
+        <span
+          class="ct-search__link-text"
+        >
+          Search
+        </span>
+      </span>
+       
+      <svg
+        aria-hidden="true"
+        class="ct-icon ct-link__icon"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M21.7104 20.2899L18.0004 16.6099C19.4405 14.8143 20.1379 12.5352 19.9492 10.2412C19.7605 7.94721 18.7001 5.81269 16.9859 4.27655C15.2718 2.74041 13.0342 1.91941 10.7333 1.98237C8.43243 2.04534 6.24311 2.98747 4.61553 4.61505C2.98795 6.24263 2.04582 8.43194 1.98286 10.7328C1.9199 13.0337 2.7409 15.2713 4.27704 16.9854C5.81318 18.6996 7.94769 19.76 10.2417 19.9487C12.5357 20.1374 14.8148 19.44 16.6104 17.9999L20.2904 21.6799C20.3834 21.7736 20.494 21.848 20.6158 21.8988C20.7377 21.9496 20.8684 21.9757 21.0004 21.9757C21.1324 21.9757 21.2631 21.9496 21.385 21.8988C21.5068 21.848 21.6174 21.7736 21.7104 21.6799C21.8906 21.4934 21.9914 21.2442 21.9914 20.9849C21.9914 20.7256 21.8906 20.4764 21.7104 20.2899ZM11.0004 17.9999C9.61592 17.9999 8.26255 17.5894 7.1114 16.8202C5.96026 16.051 5.06305 14.9578 4.53324 13.6787C4.00342 12.3996 3.8648 10.9921 4.1349 9.63427C4.40499 8.27641 5.07168 7.02912 6.05065 6.05016C7.02961 5.07119 8.27689 4.4045 9.63476 4.13441C10.9926 3.86431 12.4001 4.00293 13.6792 4.53275C14.9583 5.06256 16.0515 5.95977 16.8207 7.11091C17.5899 8.26206 18.0004 9.61544 18.0004 10.9999C18.0004 12.8564 17.2629 14.6369 15.9501 15.9497C14.6374 17.2624 12.8569 17.9999 11.0004 17.9999Z"
+        />
+        
+
+      </svg>
+      
+
+    </a>
+  </div>
+  
+
+</div>
+`;
+
+exports[`Search Component renders with optional attributes 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-search ct-theme-dark custom-class"
+    data-test="true"
+  >
+    
+  
+    <a
+      class="ct-link ct-theme-dark     ct-search__link"
+      href="https://example.com/search"
+    >
+      
+      
+      <span
+        class="ct-text-icon__text"
+      >
+        <span
+          class="ct-search__link-text"
+        >
+          Search
+        </span>
+      </span>
+       
+      <svg
+        aria-hidden="true"
+        class="ct-icon ct-link__icon"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M21.7104 20.2899L18.0004 16.6099C19.4405 14.8143 20.1379 12.5352 19.9492 10.2412C19.7605 7.94721 18.7001 5.81269 16.9859 4.27655C15.2718 2.74041 13.0342 1.91941 10.7333 1.98237C8.43243 2.04534 6.24311 2.98747 4.61553 4.61505C2.98795 6.24263 2.04582 8.43194 1.98286 10.7328C1.9199 13.0337 2.7409 15.2713 4.27704 16.9854C5.81318 18.6996 7.94769 19.76 10.2417 19.9487C12.5357 20.1374 14.8148 19.44 16.6104 17.9999L20.2904 21.6799C20.3834 21.7736 20.494 21.848 20.6158 21.8988C20.7377 21.9496 20.8684 21.9757 21.0004 21.9757C21.1324 21.9757 21.2631 21.9496 21.385 21.8988C21.5068 21.848 21.6174 21.7736 21.7104 21.6799C21.8906 21.4934 21.9914 21.2442 21.9914 20.9849C21.9914 20.7256 21.8906 20.4764 21.7104 20.2899ZM11.0004 17.9999C9.61592 17.9999 8.26255 17.5894 7.1114 16.8202C5.96026 16.051 5.06305 14.9578 4.53324 13.6787C4.00342 12.3996 3.8648 10.9921 4.1349 9.63427C4.40499 8.27641 5.07168 7.02912 6.05065 6.05016C7.02961 5.07119 8.27689 4.4045 9.63476 4.13441C10.9926 3.86431 12.4001 4.00293 13.6792 4.53275C14.9583 5.06256 16.0515 5.95977 16.8207 7.11091C17.5899 8.26206 18.0004 9.61544 18.0004 10.9999C18.0004 12.8564 17.2629 14.6369 15.9501 15.9497C14.6374 17.2624 12.8569 17.9999 11.0004 17.9999Z"
+        />
+        
+
+      </svg>
+      
+
+    </a>
+  </div>
+  
+
+</div>
+`;
+
+exports[`Search Component renders with required attributes 1`] = `
+<div>
+  
+
+
+
+  <div
+    class="ct-search ct-theme-light "
+  >
+    
+  
+    <a
+      class="ct-link ct-theme-light     ct-search__link"
+      href="https://example.com/search"
+    >
+      
+      
+      <span
+        class="ct-text-icon__text"
+      >
+        <span
+          class="ct-search__link-text"
+        >
+          Search
+        </span>
+      </span>
+       
+      <svg
+        aria-hidden="true"
+        class="ct-icon ct-link__icon"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        
+
+        <path
+          d="M21.7104 20.2899L18.0004 16.6099C19.4405 14.8143 20.1379 12.5352 19.9492 10.2412C19.7605 7.94721 18.7001 5.81269 16.9859 4.27655C15.2718 2.74041 13.0342 1.91941 10.7333 1.98237C8.43243 2.04534 6.24311 2.98747 4.61553 4.61505C2.98795 6.24263 2.04582 8.43194 1.98286 10.7328C1.9199 13.0337 2.7409 15.2713 4.27704 16.9854C5.81318 18.6996 7.94769 19.76 10.2417 19.9487C12.5357 20.1374 14.8148 19.44 16.6104 17.9999L20.2904 21.6799C20.3834 21.7736 20.494 21.848 20.6158 21.8988C20.7377 21.9496 20.8684 21.9757 21.0004 21.9757C21.1324 21.9757 21.2631 21.9496 21.385 21.8988C21.5068 21.848 21.6174 21.7736 21.7104 21.6799C21.8906 21.4934 21.9914 21.2442 21.9914 20.9849C21.9914 20.7256 21.8906 20.4764 21.7104 20.2899ZM11.0004 17.9999C9.61592 17.9999 8.26255 17.5894 7.1114 16.8202C5.96026 16.051 5.06305 14.9578 4.53324 13.6787C4.00342 12.3996 3.8648 10.9921 4.1349 9.63427C4.40499 8.27641 5.07168 7.02912 6.05065 6.05016C7.02961 5.07119 8.27689 4.4045 9.63476 4.13441C10.9926 3.86431 12.4001 4.00293 13.6792 4.53275C14.9583 5.06256 16.0515 5.95977 16.8207 7.11091C17.5899 8.26206 18.0004 9.61544 18.0004 10.9999C18.0004 12.8564 17.2629 14.6369 15.9501 15.9497C14.6374 17.2624 12.8569 17.9999 11.0004 17.9999Z"
+        />
+        
+
+      </svg>
+      
+
+    </a>
+  </div>
+  
+
+</div>
+`;