@dta-au/civictheme-twig 1.13.1

package/components/02-molecules/pagination/pagination.scss

@@ -0,0 +1,103 @@
+//
+// CivicTheme Pagination component styles.
+//
+
+.ct-pagination {
+  $root: &;
+
+  @include ct-typography('label-regular');
+
+  & {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: auto;
+    border-top-width: ct-particle(0.125);
+    border-top-style: solid;
+    padding: ct-spacing(3);
+    box-sizing: border-box;
+  }
+
+  @include ct-breakpoint(m) {
+    width: 100%;
+    border-bottom-width: ct-particle(0.125);
+    border-bottom-style: solid;
+  }
+
+  #{$root}__items_per_page {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: ct-spacing(4);
+
+    @include ct-breakpoint(m) {
+      width: auto;
+      margin-bottom: 0;
+    }
+  }
+
+  #{$root}__items_per_page__field {
+    align-self: center;
+    margin-bottom: 0;
+    white-space: nowrap;
+  }
+
+  #{$root}__items_per_page__select {
+    min-width: ct-particle(10);
+    margin-left: ct-spacing();
+    padding: 0 ct-spacing(2) 0 ct-spacing(2);
+  }
+
+  #{$root}__items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+
+    @include ct-breakpoint(m) {
+      margin-left: auto;
+    }
+  }
+
+  #{$root}__item--ellipsis {
+    padding: 0 ct-spacing();
+    text-align: center;
+  }
+
+  #{$root}__item--first,
+  #{$root}__item--previous {
+    padding: 0 ct-spacing(1) 0 0;
+
+    @include ct-breakpoint(m) {
+      padding: 0 ct-spacing(2) 0 0;
+    }
+  }
+
+  #{$root}__item--next,
+  #{$root}__item--last {
+    padding: 0 0 0 ct-spacing(1);
+
+    @include ct-breakpoint(m) {
+      padding: 0 0 0 ct-spacing(2);
+    }
+  }
+
+  #{$root}__item__link {
+    padding: 0 ct-spacing();
+    white-space: nowrap;
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, color);
+
+    & {
+      border-top-color: ct-component-var($root, $theme, border-color);
+      border-bottom-color: ct-component-var($root, $theme, border-color);
+    }
+  }
+}

package/components/02-molecules/pagination/pagination.stories.data.js

@@ -0,0 +1,55 @@
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    heading_id: 'ct-pagination-demo',
+    items: {
+      previous: {
+        href: 'http://example.com',
+      },
+      pages: {
+        1: { href: 'http://example.com' },
+        2: { href: 'http://example.com' },
+        3: { href: 'http://example.com' },
+      },
+      next: {
+        href: 'http://example.com',
+      },
+    },
+    items_modifier_class: '',
+    current: 1,
+    total_pages: 3,
+    items_per_page_title: 'Items per page',
+    items_per_page_options: [
+      {
+        type: 'option',
+        label: 10,
+        value: 10,
+        is_selected: false,
+      },
+      {
+        type: 'option',
+        label: 20,
+        value: 20,
+        is_selected: true,
+      },
+      {
+        type: 'option',
+        label: 50,
+        value: 50,
+        is_selected: false,
+      },
+      {
+        type: 'option',
+        label: 100,
+        value: 100,
+        is_selected: false,
+      },
+    ],
+    items_per_page_name: 'items_per_page_name',
+    items_per_page_id: 'items-per-page-id',
+    items_per_page_attributes: null,
+    use_ellipsis: false,
+    modifier_class: '',
+    attributes: null,
+  }),
+};

package/components/02-molecules/pagination/pagination.stories.js

@@ -0,0 +1,56 @@
+/**
+ * CivicTheme Pagination component stories.
+ */
+
+import Component from './pagination.twig';
+import PaginationData from './pagination.stories.data';
+
+const meta = {
+  title: 'Molecules/List/Pagination',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    heading_id: {
+      control: { type: 'text' },
+    },
+    items: {
+      control: { type: 'array' },
+    },
+    items_modifier_class: {
+      control: { type: 'text' },
+    },
+    current: {
+      control: { type: 'number' },
+    },
+    items_per_page_title: {
+      control: { type: 'text' },
+    },
+    items_per_page_options: {
+      control: { type: 'array' },
+    },
+    items_per_page_name: {
+      control: { type: 'text' },
+    },
+    items_per_page_id: {
+      control: { type: 'text' },
+    },
+    use_ellipsis: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Pagination = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: PaginationData.args('light'),
+};

package/components/02-molecules/pagination/pagination.test.js

@@ -0,0 +1,121 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/pagination/pagination.twig';
+
+describe('Pagination Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      theme: 'light',
+      items: {
+        previous: { text: 'Previous', href: '#previous' },
+        pages: {
+          1: { href: '#1' },
+          2: { href: '#2' },
+          3: { href: '#3' },
+        },
+        next: { text: 'Next', href: '#next' },
+      },
+      current: '2',
+    });
+
+    expect(c.querySelectorAll('.ct-pagination')).toHaveLength(1);
+    const pages = c.querySelectorAll('.ct-pagination__item');
+    expect(pages).toHaveLength(5); // Previous, 1, 2 (current), 3, Next
+    expect(c.querySelector('.ct-pagination__item--active .ct-pagination__item__link').textContent.trim()).toEqual('2');
+    expect(c.querySelector('.ct-pagination__item--previous .ct-pagination__link').getAttribute('href')).toEqual('#previous');
+    expect(c.querySelector('.ct-pagination__item--next .ct-pagination__link').getAttribute('href')).toEqual('#next');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      heading_id: 'pagination-heading',
+      items: {
+        first: { text: 'First', href: '#first' },
+        previous: { text: 'Previous', href: '#previous' },
+        pages: {
+          1: { href: '#1' },
+          2: { href: '#2' },
+          3: { href: '#3' },
+        },
+        next: { text: 'Next', href: '#next' },
+        last: { text: 'Last', href: '#last' },
+      },
+      current: '2',
+      items_per_page_title: 'Items per page',
+      items_per_page_options: [
+        { type: 'option', label: '10', value: '10', selected: 'selected' },
+        { type: 'option', label: '20', value: '20' },
+        { type: 'option', label: '50', value: '50' },
+      ],
+      items_per_page_name: 'itemsPerPage',
+      items_per_page_id: 'items-per-page',
+      items_per_page_attributes: new DrupalAttribute().setAttribute('data-test', 'items-per-page'),
+      use_ellipsis: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'pagination'),
+      modifier_class: 'custom-class',
+    });
+
+    const element = c.querySelector('.ct-pagination');
+    expect(element).not.toBeNull();
+    expect(element.classList.contains('ct-theme-dark')).toBe(true);
+    expect(element.classList.contains('custom-class')).toBe(true);
+    expect(element.getAttribute('data-test')).toEqual('pagination');
+
+    const heading = c.querySelector('#pagination-heading');
+    expect(heading).not.toBeNull();
+    expect(heading.textContent.trim()).toEqual('Pagination');
+
+    const itemsPerPage = c.querySelector('.ct-pagination__items_per_page');
+    expect(itemsPerPage).toBeTruthy();
+    expect(itemsPerPage.querySelector('select').getAttribute('name')).toEqual('itemsPerPage');
+    expect(itemsPerPage.querySelector('select').getAttribute('id')).toEqual('items-per-page');
+    expect(itemsPerPage.querySelector('.ct-field').getAttribute('data-test')).toEqual('items-per-page');
+    const options = itemsPerPage.querySelector('select').querySelectorAll('option');
+    expect(options).toHaveLength(3);
+
+    const ellipses = c.querySelectorAll('.ct-pagination__item--ellipsis');
+    expect(ellipses).toHaveLength(1);
+
+    const pages = c.querySelectorAll('.ct-pagination__item');
+    expect(pages).toHaveLength(8);
+    expect(c.querySelector('.ct-pagination__item--active .ct-pagination__item__link').textContent.trim()).toEqual('2');
+    expect(c.querySelector('.ct-pagination__item--first .ct-pagination__link').getAttribute('href')).toEqual('#first');
+    expect(c.querySelector('.ct-pagination__item--previous .ct-pagination__link').getAttribute('href')).toEqual('#previous');
+    expect(c.querySelector('.ct-pagination__item--next .ct-pagination__link').getAttribute('href')).toEqual('#next');
+    expect(c.querySelector('.ct-pagination__item--last .ct-pagination__link').getAttribute('href')).toEqual('#last');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when items are empty', async () => {
+    const c = await dom(template, {
+      items: [],
+    });
+
+    expect(c.querySelectorAll('.ct-pagination')).toHaveLength(0);
+  });
+
+  test('renders current page correctly', async () => {
+    const c = await dom(template, {
+      items: {
+        previous: { text: 'Previous', href: '#previous' },
+        pages: {
+          1: { href: '#1' },
+          2: { href: '#2' },
+          3: { href: '#3' },
+        },
+        next: { text: 'Next', href: '#next' },
+      },
+      current: '2',
+    });
+
+    const currentPage = c.querySelector('.ct-pagination__item--active .ct-pagination__item__link');
+    expect(currentPage).toBeTruthy();
+    expect(currentPage.textContent.trim()).toEqual('2');
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/02-molecules/pagination/pagination.twig

@@ -0,0 +1,177 @@
+{#
+/**
+ * @file
+ * CivicTheme Pagination component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - heading_id: [string] Heading ID for accessibility.
+ * - items_modifier_class: [string] Additional classes for pagination items.
+ * - items_per_page_title: [string] Items per page field title.
+ * - items_per_page_name: [string] Items per page select field name.
+ * - items_per_page_id: [string] Items per page select field ID.
+ * - items_per_page_attributes: [Drupal\Core\Template\Attribute] Items per page select element attributes.
+ * - use_ellipsis: [boolean] Whether ellipsis should be shown.
+ * - modifier_class: [string] Additional CSS classes.
+ * - items: [object] Object containing pagination items.
+ *   Each property contains:
+ *   - first: [object] First page link.
+ *   Each property contains:
+ *     - text: [string] Link text.
+ *     - href: [string] Link URL.
+ *   - previous: [object] Previous page link.
+ *   Each property contains:
+ *     - text: [string] Link text.
+ *     - href: [string] Link URL.
+ *   - pages: [object] Object containing page links.
+ *   - next: [object] Next page link.
+ *   Each property contains:
+ *     - text: [string] Link text.
+ *     - href: [string] Link URL.
+ *   - last: [object] Last page link.
+ *   Each property contains:
+ *     - text: [string] Link text.
+ *     - href: [string] Link URL.
+ * - items_per_page_options: [array] Options for items per page:
+ *   Each item contains:
+ *   - type: [string] Option type ('option').
+ *   - label: [string] Option label.
+ *   - value: [string] Option value.
+ *   - selected: [string] Whether the option is selected.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - title: Active page title.
+ * - current: Current page number.
+ * - total_pages: Total pages count.
+ */
+#}
+
+{% set items_per_page_title = items_per_page_title|default('Items per page') %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+{% set attributes = attributes is defined and attributes is not null ? attributes : create_attribute({}) %}
+
+{% if items is not empty %}
+  <nav
+    class="ct-pagination {{ modifier_class -}}" role="navigation"
+    {% if heading_id is not empty %}aria-labelledby="{{ heading_id }}"{% endif %}
+    {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}
+  >
+    <h4 {% if heading_id is not empty %}id="{{ heading_id }}"{% endif %} class="ct-visually-hidden">{{ 'Pagination' }}</h4>
+
+    {% if items_per_page_options is defined and items_per_page_options is not empty %}
+      <div class="ct-pagination__items_per_page">
+        {%- include '@molecules/field/field.twig' with {
+          theme: theme|default('light'),
+          title: items_per_page_title,
+          type: 'select',
+          orientation: 'horizontal',
+          name: items_per_page_name,
+          id: items_per_page_id,
+          options: items_per_page_options,
+          attributes: items_per_page_attributes,
+          modifier_class: 'ct-pagination__items_per_page__field ct-field--horizontal--fluid',
+        } -%}
+      </div>
+    {% endif %}
+
+    <ul class="ct-pagination__items {{ items_modifier_class }}">
+      {# Print first item if we are not on the first page. #}
+      {% if items.first is not empty %}
+        <li class="ct-pagination__item ct-pagination__item--first hide-xxs show-m">
+          {% include '@atoms/link/link.twig' with {
+            theme: theme,
+            text: items.first.text|default('First'),
+            url: items.first.href,
+            is_disabled: (current - 1) ? false : true,
+            icon: 'left-arrow',
+            icon_placement: 'before',
+            attributes: create_attribute({title: 'Go to first page'}),
+            modifier_class: 'ct-pagination__link',
+          } only %}
+        </li>
+      {% endif %}
+
+      {# Print previous item. #}
+      <li class="ct-pagination__item ct-pagination__item--previous">
+        {% include '@atoms/link/link.twig' with {
+          theme: theme,
+          text: items.previous.text|default('Prev'),
+          url: items.previous.href,
+          is_disabled: (current - 1) ? false : true,
+          icon: 'left-arrow',
+          icon_placement: 'before',
+          attributes: (current - 1) ? create_attribute({title: 'Go to previous page - page %s'|format(current - 1)}) : create_attribute({title: 'Go to previous page'}),
+          modifier_class: 'ct-pagination__link',
+        } only %}
+      </li>
+
+      {# Generate pagination. #}
+      {% for key, item in items.pages %}
+        {% if loop.last %}
+          {# Add an ellipsis if there are further previous pages. #}
+          {% if use_ellipsis and current > 1 %}
+            <li class="ct-pagination__item ct-pagination__item--ellipsis ct-pagination__item--ellipsis-previous" role="presentation">
+              &hellip;
+            </li>
+          {% endif %}
+        {% endif %}
+
+        <li class="ct-pagination__item {% if current == key %}ct-pagination__item--active{% else %}hide-xxs show-m{% endif %}">
+          {% include '@atoms/link/link.twig' with {
+            theme: theme,
+            text: key ~ '',
+            title: title,
+            hidden_text: current == key ? 'Current page' : 'Page',
+            is_active: current == key,
+            url: item.href,
+            attributes: current == key ? create_attribute({title: 'Current page'}) : create_attribute({title: 'Go to page %s of %s'|format(key, items.pages|length)}),
+            modifier_class: 'ct-pagination__item__link',
+          } only %}
+        </li>
+
+        {% if loop.first %}
+          {# Add an ellipsis if there are further next pages. #}
+          {% if use_ellipsis and current < total_pages %}
+            <li class="ct-pagination__item ct-pagination__item--ellipsis ct-pagination__item--ellipsis-next" role="presentation">
+              &hellip;
+            </li>
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+
+      {# Print next item if we are not on the last page. #}
+      <li class="ct-pagination__item ct-pagination__item--next">
+        {% include '@atoms/link/link.twig' with {
+          theme: theme,
+          text: items.next.text|default('Next'),
+          title: title,
+          aria_text: 'Next page',
+          url: items.next.href,
+          is_disabled: (current < total_pages) ? false : true,
+          icon: 'right-arrow-2',
+          icon_placement: 'after',
+          attributes: current < total_pages ? create_attribute({title: 'Go to next page - page %s'|format(current + 1)}) : create_attribute({title: 'Go to next page'}),
+          modifier_class: 'ct-pagination__link',
+        } only %}
+      </li>
+
+      {# Print last item if we are not on the last page. #}
+      {% if items.last %}
+        <li class="ct-pagination__item ct-pagination__item--last hide-xxs show-m">
+          {% include '@atoms/link/link.twig' with {
+            theme: theme,
+            text: items.last.text|default('Last'),
+            url: items.last.href,
+            is_disabled: (current < total_pages) ? false : true,
+            icon: 'right-arrow-2',
+            icon_placement: 'after',
+            attributes: create_attribute({title: 'Go to last page'}),
+            modifier_class: 'ct-pagination__link',
+          } only %}
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %}