@dta-au/civictheme-twig 1.13.1

package/components/03-organisms/list/list.scss

@@ -0,0 +1,83 @@
+//
+// CivicTheme List component styles.
+//
+
+.ct-list {
+  $root: &;
+
+  &#{$root}--with-background {
+    padding-left: var(--ct-accordion-space-horizontal);
+    padding-right: var(--ct-accordion-space-horizontal);
+
+    @include ct-breakpoint($ct-layout-breakpoint) {
+      padding-left: var(--ct-accordion-space-horizontal-desktop);
+      padding-right: var(--ct-accordion-space-horizontal-desktop);
+    }
+
+    // If outer layout has no sidebars, then don't include background padding.
+    .ct-layout:not([data-layout-builder-layout='true']).ct-layout--no-top-left.ct-layout--no-top-right.ct-layout--no-bottom-left.ct-layout--no-bottom-right & {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  &__inner {
+    > *:not(:last-child) {
+      margin-bottom: ct-spacing(3);
+
+      @include ct-breakpoint(m) {
+        margin-bottom: ct-spacing(4);
+      }
+    }
+  }
+
+  &__link-above {
+    margin-top: ct-spacing(3);
+
+    @include ct-breakpoint(m) {
+      display: flex;
+      justify-content: flex-end;
+      align-self: center;
+      margin-left: auto;
+      margin-top: 0;
+    }
+  }
+
+  &__results-count {
+    @include ct-typography('heading-5');
+
+    margin: 0;
+  }
+
+  &__rows {
+    .col,
+    [class*='col-'] {
+      container-type: inline-size;
+    }
+  }
+
+  &__link-below {
+    padding-top: ct-spacing();
+    padding-bottom: ct-spacing();
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    &#{$root}__content,
+    &#{$root}__header,
+    &#{$root}__rows-header {
+      @include ct-component-property($root, $theme, color);
+    }
+
+    #{$root}__results-count {
+      @include ct-component-property($root, $theme, results-count, color);
+    }
+
+    &#{$root}--with-background {
+      @include ct-component-property($root, $theme, background-color);
+
+      #{$root}__results-below {
+        @include ct-component-property($root, $theme, background-color);
+      }
+    }
+  }
+}

package/components/03-organisms/list/list.stories.data.js

@@ -0,0 +1,98 @@
+import GroupFilter from '../../02-molecules/group-filter/group-filter.twig';
+import GroupFilterData from '../../02-molecules/group-filter/group-filter.stories.data';
+import SingleFilter from '../../02-molecules/single-filter/single-filter.twig';
+import SingleFilterData from '../../02-molecules/single-filter/single-filter.stories.data';
+import Grid from '../../00-base/grid/grid.twig';
+import PromoCard from '../../02-molecules/promo-card/promo-card.twig';
+import PromoCardData from '../../02-molecules/promo-card/promo-card.stories.data';
+import EventCard from '../../02-molecules/event-card/event-card.twig';
+import EventCardData from '../../02-molecules/event-card/event-card.stories.data';
+import NavigationCard from '../../02-molecules/navigation-card/navigation-card.twig';
+import NavigationCardData from '../../02-molecules/navigation-card/navigation-card.stories.data';
+import Snippet from '../../02-molecules/snippet/snippet.twig';
+import SnippetData from '../../02-molecules/snippet/snippet.stories.data';
+import Paragraph from '../../01-atoms/paragraph/paragraph.twig';
+import Pagination from '../../02-molecules/pagination/pagination.twig';
+import PaginationData from '../../02-molecules/pagination/pagination.stories.data';
+
+export default {
+  args(theme = 'light', options = {}, overrides = {}) {
+    const items = this.items(theme, options);
+    const groupOptions = options.selectedFilters === true ? { selectedFilters: true } : undefined;
+    return {
+      theme,
+      title: 'My List Title',
+      link_above: {
+        text: 'View more',
+        url: 'http://www.example.com',
+        title: 'View more',
+        is_new_window: false,
+        is_external: false,
+      },
+      content: 'Example content',
+      filters: options.group ? GroupFilter(GroupFilterData.args(theme, groupOptions)) : SingleFilter(SingleFilterData.args(theme)),
+      results_count: 'Showing 1 of 6',
+      rows_above: Paragraph({
+        theme,
+        content: 'Example content above rows',
+      }),
+      rows: items.length > 0 ? Grid({
+        theme,
+        items,
+        template_column_count: options.columnCount || 3,
+        auto_breakpoint: options.columnAutoBreakpoint,
+        fill_width: false,
+        with_background: false,
+        row_class: 'row--equal-heights-content row--vertically-spaced',
+      }) : null,
+      rows_below: Paragraph({
+        theme,
+        content: `Example content below rows`,
+      }),
+      empty: '<p>No results found</p>',
+      pagination: Pagination(PaginationData.args(theme)),
+      footer: '',
+      link_below: {
+        text: 'View more',
+        url: 'http://www.example.com',
+        title: 'View more',
+        is_new_window: false,
+        is_external: false,
+      },
+      vertical_spacing: 'none',
+      with_background: false,
+      attributes: null,
+      modifier_class: '',
+      ...overrides,
+    };
+  },
+  items(theme = 'light', options = {}) {
+    const components = {
+      promo: { data: PromoCardData.args(theme), render: PromoCard },
+      event: { data: EventCardData.args(theme), render: EventCard },
+      navigation: { data: NavigationCardData.args(theme), render: NavigationCard },
+      snippet: { data: SnippetData.args(theme), render: Snippet },
+    };
+    const component = options.component || 'promo';
+    const { render } = components[component];
+    const defaultData = components[component].data;
+    const itemData = options.items || Array.from(Array(6), () => ({}));
+    return itemData.map((data) => render({ ...defaultData, ...data }));
+  },
+  basicOverrides(overrides = {}) {
+    return {
+      title: null,
+      link_above: null,
+      content: null,
+      filters: null,
+      results_count: null,
+      rows_above: null,
+      rows_below: null,
+      empty: null,
+      pagination: null,
+      footer: null,
+      link_below: null,
+      ...overrides,
+    };
+  },
+};

package/components/03-organisms/list/list.stories.js

@@ -0,0 +1,223 @@
+/**
+ * CivicTheme List component stories.
+ */
+
+import Component from './list.twig';
+import ListData from './list.stories.data';
+
+const meta = {
+  title: 'Organisms/List',
+  component: Component,
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    link_above: {
+      control: { type: 'object' },
+    },
+    filters: {
+      control: { type: 'text' },
+    },
+    results_count: {
+      control: { type: 'text' },
+    },
+    rows_above: {
+      control: { type: 'text' },
+    },
+    rows: {
+      control: { type: 'text' },
+    },
+    rows_below: {
+      control: { type: 'text' },
+    },
+    empty: {
+      control: { type: 'text' },
+    },
+    pagination: {
+      control: { type: 'text' },
+    },
+    footer: {
+      control: { type: 'text' },
+    },
+    link_below: {
+      control: { type: 'object' },
+    },
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    with_background: {
+      control: { type: 'boolean' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const List = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light'),
+};
+
+export const ListDark = {
+  parameters: {
+    layout: 'padded',
+  },
+
+  args: ListData.args('dark'),
+
+  globals: {
+    backgrounds: {
+      value: 'dark',
+    },
+  },
+};
+
+export const ListGroupFilters = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', { group: true }),
+};
+
+export const ListNoResults = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', { items: [] }),
+};
+
+export const ListGroupFiltersWithSelectedFilters = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', { group: true, selectedFilters: true }),
+};
+
+export const ListNavigationCard = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', { component: 'navigation', columnCount: 1 }),
+};
+
+export const ListSnippet = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', { component: 'snippet', columnCount: 1 }),
+};
+
+export const ListPromoCardEqualHeights = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', {
+    component: 'promo',
+    items: [
+      {
+        title: 'Duis in nulla.',
+        tags: [
+          'Tag small text',
+          'Tag with large text that spans over two lines',
+        ],
+      },
+      {
+        title: 'Veniam occaecat deserunt sint dolor minim dolore occaecat.',
+        tags: [
+          'Tag with large text that spans over two lines',
+          'Tag small text',
+        ],
+      },
+      { title: 'Do anim occaecat dolor cupidatat est eu sunt labore non aute nisi proident ullamco pariatur ut ex pariatur.' },
+    ],
+  }, ListData.basicOverrides({ title: 'Promo Card Equal Height' })),
+};
+
+export const ListEventCardEqualHeights = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', {
+    component: 'event',
+    items: [
+      { title: 'Duis in nulla.' },
+      { title: 'Veniam occaecat deserunt sint dolor minim dolore occaecat.' },
+      { title: 'Do anim occaecat dolor cupidatat est eu sunt labore non aute nisi proident ullamco pariatur ut ex pariatur.' },
+    ],
+  }, ListData.basicOverrides({ title: 'Event Card Equal Height' })),
+};
+
+export const ListNavigationEqualHeights = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', {
+    component: 'navigation',
+    items: [
+      { title: 'Duis in nulla.' },
+      { title: 'Veniam occaecat deserunt sint dolor minim dolore occaecat.' },
+      { title: 'Do anim occaecat dolor cupidatat est eu sunt labore non aute nisi proident ullamco pariatur ut ex pariatur.' },
+    ],
+  }, ListData.basicOverrides({ title: 'Navigation Card Equal Height' })),
+};
+
+export const ListPromoCardTwoColumn = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', {
+    component: 'promo',
+    items: [
+      { title: 'Duis in nulla.' },
+      { title: 'Veniam occaecat deserunt sint dolor minim dolore occaecat.' },
+      { title: 'Do anim occaecat dolor cupidatat est eu sunt labore non aute nisi proident ullamco pariatur ut ex pariatur.' },
+      { title: 'Proident ad mollit aute quis laborum duis laborum exercitation.' },
+    ],
+    columnCount: 2,
+  }, ListData.basicOverrides({ title: 'Promo Card Two Column' })),
+};
+
+export const ListPromoCardFourColumn = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', {
+    component: 'promo',
+    items: [
+      { title: 'Duis in nulla.' },
+      { title: 'Veniam occaecat deserunt sint dolor minim dolore occaecat.' },
+      { title: 'Do anim occaecat dolor cupidatat est eu sunt labore non aute nisi proident ullamco pariatur ut ex pariatur.' },
+      { title: 'Proident ad mollit aute quis laborum duis laborum exercitation.' },
+    ],
+    columnCount: 4,
+  }, ListData.basicOverrides({ title: 'Promo Card Four Column' })),
+};
+
+export const ListPromoCardAutoColumn = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: ListData.args('light', {
+    component: 'promo',
+    items: [
+      { title: 'Cupidatat ad dolor in est.' },
+      { title: 'Labore incididunt.' },
+      { title: 'Consectetur sit ut eu.' },
+      { title: 'Lorem ipsum eiusmod ex dolor.' },
+      { title: 'Id do elit.' },
+      { title: 'Cillum aute nostrud eiusmod.' },
+    ],
+    columnCount: 6,
+    columnAutoBreakpoint: true,
+  }, ListData.basicOverrides({ title: 'Promo Card Auto Column' })),
+};

package/components/03-organisms/list/list.test.js

@@ -0,0 +1,93 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/03-organisms/list/list.twig';
+
+describe('List Component', () => {
+  test('renders with all attributes provided', async () => {
+    const c = await dom(template, {
+      title: 'Sample Title',
+      link_above: {
+        text: 'Link Above',
+        url: 'https://example.com',
+        is_new_window: false,
+        is_external: false,
+      },
+      filters: 'Sample Filters',
+      results_count: '10 Results',
+      rows_above: 'Rows Above',
+      rows: 'Rows Content',
+      rows_below: 'Rows Below',
+      empty: '',
+      pagination: 'Pagination Content',
+      footer: 'Footer Content',
+      link_below: {
+        text: 'Link Below',
+        url: 'https://example.com',
+        is_new_window: false,
+        is_external: false,
+      },
+      theme: 'dark',
+      vertical_spacing: 'both',
+      with_background: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'additional-class',
+    });
+
+    expect(c.querySelectorAll('.ct-list')).toHaveLength(1);
+    expect(c.querySelector('.ct-list').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-list').classList).toContain('ct-list--with-background');
+    expect(c.querySelector('.ct-list').classList).toContain('ct-vertical-spacing-inset--both');
+    expect(c.querySelector('.ct-list').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-list__title').textContent.trim()).toBe('Sample Title');
+    expect(c.querySelector('.ct-list__link-above__link').textContent.trim()).toBe('Link Above');
+    expect(c.querySelector('.ct-list__filters').textContent.trim()).toBe('Sample Filters');
+    expect(c.querySelector('.ct-list__results-count').textContent.trim()).toBe('10 Results');
+    expect(c.querySelector('.ct-list__rows-above').textContent.trim()).toBe('Rows Above');
+    expect(c.querySelector('.ct-list__rows').textContent.trim()).toBe('Rows Content');
+    expect(c.querySelector('.ct-list__rows-below').textContent.trim()).toBe('Rows Below');
+    expect(c.querySelector('.ct-list__pagination').textContent.trim()).toBe('Pagination Content');
+    expect(c.querySelector('.ct-list__footer').textContent.trim()).toBe('Footer Content');
+    expect(c.querySelector('.ct-list__link-below__link').textContent.trim()).toBe('Link Below');
+    expect(c.querySelector('.ct-list').getAttribute('data-test')).toBe('true');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with some attributes missing', async () => {
+    const c = await dom(template, {
+      title: '',
+      link_above: null,
+      filters: '',
+      results_count: '',
+      rows_above: '',
+      rows: '',
+      rows_below: '',
+      empty: 'No results found',
+      pagination: '',
+      footer: '',
+      link_below: null,
+      theme: 'light',
+      vertical_spacing: '',
+      with_background: false,
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-list')).toHaveLength(1);
+    expect(c.querySelector('.ct-list').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-list').classList).not.toContain('ct-list--with-background');
+    expect(c.querySelector('.ct-list').classList).not.toContain('ct-vertical-spacing-inset--both');
+    expect(c.querySelector('.ct-list__title')).toBeNull();
+    expect(c.querySelector('.ct-list__link-above__link')).toBeNull();
+    expect(c.querySelector('.ct-list__filters')).toBeNull();
+    expect(c.querySelector('.ct-list__results-count')).toBeNull();
+    expect(c.querySelector('.ct-list__rows-above')).toBeNull();
+    expect(c.querySelector('.ct-list__rows')).toBeNull();
+    expect(c.querySelector('.ct-list__rows-below')).toBeNull();
+    expect(c.querySelector('.ct-list__pagination')).toBeNull();
+    expect(c.querySelector('.ct-list__footer')).toBeNull();
+    expect(c.querySelector('.ct-list__link-below__link')).toBeNull();
+    expect(c.querySelector('.ct-list__empty-results__inner').textContent.trim()).toBe('No results found');
+
+    assertUniqueCssClasses(c);
+  });
+});