@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,118 @@
+//
+// CivicTheme Banner component styles.
+//
+
+.ct-banner {
+  $root: &;
+
+  position: relative;
+
+  #{$root}__wrapper {
+    position: relative;
+  }
+
+  #{$root}__inner {
+    @include ct-background();
+
+    & {
+      padding-top: ct-spacing(3);
+      padding-bottom: ct-spacing(10);
+    }
+
+    @include ct-print() {
+      padding-top: ct-spacing(2);
+      padding-bottom: ct-spacing(3);
+    }
+  }
+
+  #{$root}__content-below {
+    margin-top: ct-spacing(2);
+  }
+
+  #{$root}__featured-image__wrapper {
+    @include ct-image-fit();
+
+    & {
+      box-sizing: border-box;
+      width: var(--ct-banner-featured-image-width);
+      display: none;
+    }
+
+    @include ct-breakpoint(m) {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  &#{$root}--decorative {
+    #{$root}__inner {
+      clip-path: var(--ct-banner-decorative-mobile-clip-path);
+
+      @include ct-breakpoint(m) {
+        padding-top: ct-spacing(8);
+        padding-bottom: ct-spacing(8);
+        clip-path: var(--ct-banner-decorative-desktop-clip-path);
+      }
+
+      @include ct-print() {
+        padding-top: ct-spacing(2);
+        padding-bottom: ct-spacing(3);
+      }
+    }
+
+    #{$root}__content-below {
+      margin-top: -1 * ct-spacing(2);
+    }
+
+    #{$root}__featured-image__wrapper {
+      @include ct-breakpoint(m) {
+        bottom: 0;
+        top: auto;
+        height: 100%;
+        max-height: ct-particle(75);
+        padding-top: ct-spacing(8);
+      }
+    }
+
+    #{$root}__featured-image {
+      clip-path: var(--ct-banner-featured-image-clip-path);
+    }
+  }
+
+  #{$root}__breadcrumb {
+    margin-bottom: ct-spacing(4);
+
+    @include ct-breakpoint(m) {
+      margin-bottom: ct-spacing(6);
+    }
+  }
+
+  #{$root}__site-section {
+    margin-bottom: ct-spacing(2);
+  }
+
+  #{$root}__title {
+    margin-bottom: ct-spacing(2);
+
+    @include ct-breakpoint(m) {
+      margin-bottom: ct-spacing(3);
+    }
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    #{$root}__inner {
+      @include ct-component-property($root, $theme, background-color);
+    }
+
+    &#{$root}--decorative {
+      #{$root}__featured-image__wrapper {
+        @include ct-breakpoint(m) {
+          @include ct-image-shadow(ct-component-var($root, $theme, featured-image, shadow-color), 'up-left');
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+import Constants from '../../../dist/constants.json';
+
+import Paragraph from '../../01-atoms/paragraph/paragraph.twig';
+import Button from '../../01-atoms/button/button.twig';
+import NavigationCard from '../../02-molecules/navigation-card/navigation-card.twig';
+import Grid from '../../00-base/grid/grid.twig';
+
+export default {
+  args: (theme = 'light') => ({
+    theme,
+    breadcrumb: {
+      links: [
+        {
+          text: 'Link 1',
+          url: 'https://example.com/breadcrumb-1',
+        },
+        {
+          text: 'Link 2',
+          url: 'https://example.com/breadcrumb-2',
+        },
+        {
+          text: 'Link 3',
+          url: 'https://example.com/breadcrumb-2',
+        },
+      ],
+      active_is_link: false,
+    },
+    site_section: 'Site section name',
+    title: 'Providing visually engaging digital experiences',
+    is_decorative: true,
+    featured_image: {
+      url: './demo/images/demo2.jpg',
+      alt: 'Featured image alt text',
+    },
+    background_image: {
+      url: Constants.BACKGROUNDS[Object.keys(Constants.BACKGROUNDS)[0]],
+      alt: 'Background image alt text',
+    },
+    background_image_blend_mode: 'multiply',
+    content_top1: '',
+    content_top2: '',
+    content_top3: '',
+    content_middle: '',
+    content: Paragraph({
+      theme,
+      content: `<p>Government grade set of high quality design themes that are accessible, inclusive and provide a consistent digital experience for your citizen. </p><p>${Button({
+        theme,
+        text: 'Learn about our mission',
+        type: 'primary',
+        kind: 'link',
+      }).trim()}</p>`,
+    }).trim(),
+    content_bottom: '',
+    content_below: Grid({
+      theme,
+      template_column_count: 4,
+      items: [
+        NavigationCard({
+          theme,
+          title: 'Register for a workshop',
+          summary: 'Est sed aliqua ullamco occaecat velit nisi in dolor excepteur.',
+          icon: 'mortarboard',
+        }).trim(),
+        NavigationCard({
+          theme,
+          title: 'Register for a workshop',
+          summary: 'Ea dolor enim eiusmod consectetur proident adipisicing aute dolor ad est.',
+          icon: 'mortarboard',
+        }).trim(),
+        NavigationCard({
+          theme,
+          title: 'Register for a workshop',
+          summary: 'Anim occaecat ex nostrud non do sunt ut nostrud mollit aliqua.',
+          icon: 'mortarboard',
+        }).trim(),
+        NavigationCard({
+          theme,
+          title: 'Register for a workshop',
+          summary: 'Sunt duis dolore voluptate quis do in.',
+          icon: 'mortarboard',
+        }).trim(),
+      ],
+      row_class: 'row--equal-heights-content row--vertically-spaced',
+    }).trim(),
+    modifier_class: '',
+    attributes: null,
+  }),
+};

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

@@ -0,0 +1,87 @@
+/**
+ * CivicTheme Banner component stories.
+ */
+
+import Component from './banner.twig';
+import BannerData from './banner.stories.data';
+import Constants from '../../../dist/constants.json';
+
+const meta = {
+  title: 'Organisms/Banner',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    content_top1: {
+      control: { type: 'text' },
+    },
+    breadcrumb: {
+      control: { type: 'array' },
+    },
+    content_top2: {
+      control: { type: 'text' },
+    },
+    content_top3: {
+      control: { type: 'text' },
+    },
+    content_middle: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    content_below: {
+      control: { type: 'text' },
+    },
+    site_section: {
+      control: { type: 'text' },
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    is_decorative: {
+      control: { type: 'boolean' },
+    },
+    featured_image: {
+      control: { type: 'object' },
+    },
+    background_image: {
+      control: { type: 'object' },
+    },
+    background_image_blend_mode: {
+      control: { type: 'select' },
+      options: Constants.SCSS_VARIABLES['ct-background-blend-modes'],
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Banner = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: BannerData.args('light'),
+};
+
+export const BannerDark = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+
+  args: BannerData.args('dark'),
+
+  globals: {
+    backgrounds: {
+      value: 'dark',
+    },
+  },
+};

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

@@ -0,0 +1,94 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/03-organisms/banner/banner.twig';
+
+describe('Banner Component', () => {
+  test('renders with only required attributes', async () => {
+    const c = await dom(template, {
+      title: 'Banner Title',
+    });
+
+    expect(c.querySelectorAll('.ct-banner')).toHaveLength(1);
+    expect(c.querySelector('.ct-banner__title').textContent.trim()).toBe('Banner Title');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with all attributes provided', async () => {
+    const c = await dom(template, {
+      content_top1: 'Top Content 1',
+      breadcrumb: {
+        links: [{ text: 'Home', url: '/' }, { text: 'Section', url: '/section' }],
+        active_is_link: true,
+      },
+      content_top2: 'Top Content 2',
+      content_top3: 'Top Content 3',
+      content_middle: 'Middle Content',
+      content: 'Main Content',
+      content_bottom: 'Bottom Content',
+      content_below: 'Below Content',
+      site_section: 'Site Section',
+      title: 'Banner Title',
+      is_decorative: true,
+      featured_image: {
+        url: 'https://example.com/image.jpg',
+        alt: 'Featured Image',
+      },
+      background_image: {
+        url: 'https://example.com/background.jpg',
+        alt: 'Background Image',
+      },
+      background_image_blend_mode: 'multiply',
+      theme: 'dark',
+      modifier_class: 'additional-class',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+    });
+
+    expect(c.querySelectorAll('.ct-banner')).toHaveLength(1);
+    expect(c.querySelector('.ct-banner').classList).toContain('ct-theme-dark');
+    expect(c.querySelector('.ct-banner').classList).toContain('ct-banner--decorative');
+    expect(c.querySelector('.ct-banner').classList).toContain('additional-class');
+    expect(c.querySelector('.ct-banner__title').textContent.trim()).toBe('Banner Title');
+    expect(c.querySelector('.ct-banner__content-top').textContent.trim()).toBe('Top Content 1');
+    expect(c.querySelector('.ct-banner__content-top2').textContent.trim()).toBe('Top Content 2');
+    expect(c.querySelector('.ct-banner__content-top3').textContent.trim()).toBe('Top Content 3');
+    expect(c.querySelector('.ct-banner__content-middle').textContent.trim()).toBe('Middle Content');
+    expect(c.querySelector('.ct-banner__content').textContent.trim()).toBe('Main Content');
+    expect(c.querySelector('.ct-banner__content-bottom').textContent.trim()).toBe('Bottom Content');
+    expect(c.querySelector('.ct-banner__content-below').textContent.trim()).toBe('Below Content');
+    expect(c.querySelector('.ct-banner__site-section').textContent.trim()).toBe('Site Section');
+    expect(c.querySelector('.ct-banner').getAttribute('data-test')).toBe('true');
+
+    const backgroundImageElement = c.querySelector('.ct-banner__inner');
+    expect(backgroundImageElement.style.backgroundImage).toContain('https://example.com/background.jpg');
+    expect(backgroundImageElement.classList).toContain('ct-background--multiply');
+
+    const featuredImageElement = c.querySelector('.ct-banner__featured-image');
+    expect(featuredImageElement.getAttribute('src')).toContain('https://example.com/image.jpg');
+    expect(featuredImageElement.getAttribute('alt')).toBe('Featured Image');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders without additional attributes and classes', async () => {
+    const c = await dom(template, {
+      title: 'Banner Title',
+      theme: 'light',
+      modifier_class: '',
+    });
+
+    expect(c.querySelectorAll('.ct-banner')).toHaveLength(1);
+    expect(c.querySelector('.ct-banner').classList).toContain('ct-theme-light');
+    expect(c.querySelector('.ct-banner').classList).not.toContain('ct-banner--decorative');
+    expect(c.querySelector('.ct-banner').classList).not.toContain('additional-class');
+    expect(c.querySelector('.ct-banner__title').textContent.trim()).toBe('Banner Title');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when all content slots are empty', async () => {
+    const c = await dom(template, {});
+
+    expect(c.querySelectorAll('.ct-banner')).toHaveLength(0);
+  });
+});

package/components/03-organisms/banner/banner.twig

@@ -0,0 +1,218 @@
+{#
+/**
+ * @file
+ * CivicTheme Banner component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - is_decorative: [boolean] Whether to show as decorative.
+ * - background_image_blend_mode: [string] Background image blending type. Defaults to 'normal'.
+ * - modifier_class: [string] Additional CSS classes.
+ * - breadcrumb: [object] Breadcrumb navigation.
+ *   Each property contains:
+ *   - links: [array] Breadcrumb links.
+ *   - active_is_link: [boolean] Whether the active item is a link.
+ * - featured_image: [object] Featured image.
+ *   Each property contains:
+ *   - url: [string] Image source URL.
+ *   - alt: [string] Image alt text.
+ * - background_image: [object] Background image.
+ *   Each property contains:
+ *   - url: [string] Image source URL.
+ *   - alt: [string] Image alt text.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - content_top1: Top section content.
+ * - content_top2: Second top section content.
+ * - content_top3: Third top section content.
+ * - content_middle: Middle section content.
+ * - content: Main content.
+ * - content_bottom: Bottom section content.
+ * - content_below: Below banner section content.
+ * - site_section: Site section name.
+ * - title: Banner title.
+ *
+ * Blocks:
+ * - content_top1_block
+ * - breadcrumb_block
+ * - content_top2_block
+ * - content_top3_block
+ * - site_section_block
+ * - title_block
+ * - content_middle_block
+ * - content_block
+ * - featured_image_block
+ * - content_below_block
+ * - content_bottom_block
+ */
+#}
+
+{% set is_decorative_class = is_decorative ? 'ct-banner--decorative' : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s'|format(theme_class, is_decorative_class, modifier_class|default('')) %}
+
+{% if content_top1 is not empty or content_top2 is not empty or content_top3 is not empty or site_section is not empty or title is not empty or content_middle is not empty or content is not empty or content_below is not empty or content_bottom is not empty %}
+  <div class="ct-banner {{ modifier_class -}}" id="main-content" tabindex="-1" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    <div class="ct-banner__wrapper">
+      <div
+        class="ct-banner__inner {% if background_image_blend_mode %}ct-background--{{ background_image_blend_mode|default('normal') }}{% endif %}"
+        {% if background_image and background_image.url is defined and background_image.url is not empty %}style="background-image: url('{{ background_image.url }}');"{% endif %}
+      >
+        {% if background_image and background_image.alt is defined and background_image.alt is not empty %}
+          <span role="img" aria-label="{{ background_image.alt }}"> </span>
+        {% endif %}
+
+        <div class="container">
+
+          {% if content_top1 is not empty %}
+            <div class="row">
+              {%- block content_top1_block %}
+                <div class="col-xxs-12">
+                  <div class="ct-banner__content-top">
+                    {{- content_top1 -}}
+                  </div>
+                </div>
+              {% endblock -%}
+            </div>
+          {% endif %}
+
+          {% if breadcrumb is not empty or content_top2 is not empty %}
+            <div class="row">
+              {% block breadcrumb_block %}
+                {% if breadcrumb is not empty %}
+                  <div class="{% if featured_image is not empty %}col-xxs-12 col-m-6{% else %}col-xxs-12{% endif %}">
+                    {% include '@molecules/breadcrumb/breadcrumb.twig' with {
+                      theme: theme,
+                      links: breadcrumb.links,
+                      active_is_link: breadcrumb.active_is_link,
+                      modifier_class: 'ct-banner__breadcrumb',
+                    } only %}
+                  </div>
+                {% endif %}
+              {% endblock %}
+
+              {% if content_top2 is not empty %}
+                {%- block content_top2_block %}
+                  <div class="col-xxs-12 col-m-6">
+                    <div class="ct-banner__content-top2">
+                      {{- content_top2 -}}
+                    </div>
+                  </div>
+                {% endblock -%}
+              {% endif %}
+            </div>
+          {% endif %}
+
+          {% if content_top3 is not empty %}
+            <div class="row">
+              {%- block content_top3_block %}
+                <div class="col-xxs-12">
+                  <div class="ct-banner__content-top3">
+                    {{- content_top3 -}}
+                  </div>
+                </div>
+              {% endblock -%}
+            </div>
+          {% endif %}
+
+          {% if site_section is not empty %}
+            <div class="row">
+              {%- block site_section_block %}
+                <div class="col-xxs-12">
+                  {% include '@atoms/heading/heading.twig' with {
+                    theme: theme,
+                    content: site_section,
+                    level: 5,
+                    modifier_class: 'ct-banner__site-section',
+                  } only %}
+                </div>
+              {% endblock -%}
+            </div>
+          {% endif %}
+
+          {% if title is not empty %}
+            <div class="row">
+              {%- block title_block %}
+                <div class="{% if featured_image is not empty %}col-xxs-12 col-m-6{% else %}col-xxs-12{% endif %}">
+                  {% include '@atoms/heading/heading.twig' with {
+                    theme: theme,
+                    content: title,
+                    level: 1,
+                    modifier_class: 'ct-banner__title',
+                  } only %}
+                </div>
+              {% endblock -%}
+            </div>
+          {% endif %}
+
+          {% if content_middle is not empty %}
+            <div class="row">
+              {%- block content_middle_block %}
+                <div class="{% if featured_image is not empty %}col-xxs-12 col-m-6{% else %}col-xxs-12{% endif %}">
+                  <div class="ct-banner__content-middle">
+                    {{- content_middle -}}
+                  </div>
+                </div>
+              {% endblock -%}
+            </div>
+          {% endif %}
+
+          {% if content is not empty %}
+            <div class="row">
+              {%- block content_block %}
+                <div class="{% if featured_image is not empty %}col-xxs-12 col-m-6{% else %}col-xxs-12{% endif %}">
+                  <div class="ct-banner__content">
+                    {{- content -}}
+                  </div>
+                </div>
+              {% endblock -%}
+            </div>
+          {% endif %}
+
+        </div>
+      </div>
+
+      {% block featured_image_block %}
+        {% if featured_image is not empty %}
+          <div class="ct-banner__featured-image__wrapper">
+            {% include '@atoms/image/image.twig' with {
+              theme: theme,
+              url: featured_image.url,
+              alt: featured_image.alt,
+              modifier_class: 'ct-banner__featured-image',
+            } only %}
+          </div>
+        {% endif %}
+      {% endblock %}
+    </div>
+
+    {% if content_below is not empty %}
+      <div class="container">
+        <div class="row">
+          {%- block content_below_block %}
+            <div class="col-xxs-12">
+              <div class="ct-banner__content-below">
+                {{- content_below -}}
+              </div>
+            </div>
+          {% endblock -%}
+        </div>
+      </div>
+    {% endif %}
+
+    {% if content_bottom is not empty %}
+      <div class="container">
+        <div class="row">
+          {%- block content_bottom_block %}
+            <div class="col-xxs-12">
+              <div class="ct-banner__content-bottom">
+                {{- content_bottom -}}
+              </div>
+            </div>
+          {% endblock -%}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+{% endif %}