@dta-au/civictheme-twig 1.13.1

package/components/04-templates/page/page.scss

@@ -0,0 +1,11 @@
+//
+// CivicTheme Page Template component styles.
+//
+
+.ct-page {
+  $root: &;
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, background-color);
+  }
+}

package/components/04-templates/page/page.stories.data.js

@@ -0,0 +1,166 @@
+import Banner from '../../03-organisms/banner/banner.twig';
+import BannerData from '../../03-organisms/banner/banner.stories.data';
+import HeaderData from '../../03-organisms/header/header.stories.data';
+import FooterData from '../../03-organisms/footer/footer.stories.data';
+import SideNavigation from '../../03-organisms/side-navigation/side-navigation.twig';
+import SideNavigationData from '../../03-organisms/side-navigation/side-navigation.stories.data';
+import Button from '../../01-atoms/button/button.twig';
+import Paragraph from '../../01-atoms/paragraph/paragraph.twig';
+import BasicContent from '../../02-molecules/basic-content/basic-content.twig';
+import BasicContentData from '../../02-molecules/basic-content/basic-content.stories.data';
+import Accordion from '../../02-molecules/accordion/accordion.twig';
+import List from '../../03-organisms/list/list.twig';
+import ListData from '../../03-organisms/list/list.stories.data';
+import Grid from '../../00-base/grid/grid.twig';
+
+export default {
+  args: (theme = 'light') => {
+    const headerData = HeaderData.args(theme);
+    const footerData = FooterData.args(theme);
+
+    return {
+      theme,
+      vertical_spacing: 'both',
+      header_theme: theme,
+      header_top_1: headerData.content_top1,
+      header_top_2: headerData.content_top2,
+      header_top_3: headerData.content_top3,
+      header_middle_1: headerData.content_middle1,
+      header_middle_2: headerData.content_middle2,
+      header_middle_3: headerData.content_middle3,
+      header_bottom_1: headerData.content_bottom1,
+      banner: Banner(BannerData.args(theme)),
+      highlighted: '',
+      content_top: '',
+      hide_sidebar_left: false,
+      hide_sidebar_right: false,
+      sidebar_top_left: SideNavigation(SideNavigationData.args(theme)),
+      sidebar_top_left_attributes: null,
+      sidebar_top_right: '',
+      sidebar_top_right_attributes: null,
+      content: BasicContent(BasicContentData.args(theme)),
+      content_attributes: null,
+      sidebar_bottom_left: Paragraph({
+        theme,
+        content: `<p>Register for events!</p><p>${Button({
+          theme,
+          text: 'Register',
+          type: 'primary',
+          kind: 'link',
+        })}</p>`,
+      }),
+      sidebar_bottom_left_attributes: null,
+      sidebar: '',
+      sidebar_attributes: null,
+      sidebar_bottom_right: '',
+      sidebar_bottom_right_attributes: null,
+      content_contained: false,
+      content_bottom: '',
+      footer_theme: theme,
+      footer_logo: '',
+      footer_background_image: '',
+      footer_top_1: footerData.content_top1,
+      footer_top_2: footerData.content_top2,
+      footer_middle_1: footerData.content_middle1,
+      footer_middle_2: footerData.content_middle2,
+      footer_middle_3: footerData.content_middle3,
+      footer_middle_4: footerData.content_middle4,
+      footer_bottom_1: footerData.content_bottom1,
+      footer_bottom_2: footerData.content_bottom2,
+      attributes: null,
+      modifier_class: '',
+    };
+  },
+};
+
+export const PageFullWidthData = {
+  args: (theme = 'light') => {
+    const headerData = HeaderData.args(theme);
+    const footerData = FooterData.args(theme);
+    const accordionData = {
+      theme,
+      with_background: true,
+      vertical_spacing: 'both',
+      panels: [
+        {
+          title: 'Accordion title 1',
+          content: 'Accordion content 1 <a href="https://example.com">Example link</a>',
+          expanded: false,
+        },
+        {
+          title: 'Accordion title 2',
+          content: 'Accordion content 2 <a href="https://example.com">Example link</a>',
+          expanded: false,
+        },
+        {
+          title: 'Accordion title 3',
+          content: 'Accordion content 3 <a href="https://example.com">Example link</a>',
+          expanded: false,
+        },
+      ],
+    };
+    const listData = {
+      theme,
+      rows: Grid({
+        theme,
+        items: ListData.items(theme, {
+          component: 'promo',
+          items: [
+            { title: 'Example 1', date: null, subtitle: null, tags: null },
+            { title: 'Example 2 lorem ipsum dolor sit amet', date: null, subtitle: null, tags: null },
+            { title: 'Example 3', date: null, subtitle: null, tags: null },
+          ],
+        }),
+        template_column_count: 3,
+        fill_width: false,
+        with_background: false,
+        row_class: 'row--equal-heights-content row--vertically-spaced',
+      }),
+      vertical_spacing: 'none',
+      with_background: false,
+      attributes: null,
+      modifier_class: '',
+    };
+
+    return {
+      theme,
+      vertical_spacing: 'none',
+      header_theme: theme,
+      header_top_1: headerData.content_top1,
+      header_top_2: headerData.content_top2,
+      header_top_3: headerData.content_top3,
+      header_middle_1: headerData.content_middle1,
+      header_middle_2: headerData.content_middle2,
+      header_middle_3: headerData.content_middle3,
+      header_bottom_1: headerData.content_bottom1,
+      banner: Banner({ ...BannerData.args(theme), content_below: '', is_decorative: false, featured_image: null }),
+      highlighted: '',
+      content_top: '',
+      content_attributes: null,
+      content_contained: false,
+      content_bottom: '',
+      footer_theme: theme,
+      footer_logo: '',
+      footer_background_image: '',
+      footer_top_1: footerData.content_top1,
+      footer_top_2: footerData.content_top2,
+      footer_middle_1: footerData.content_middle1,
+      footer_middle_2: footerData.content_middle2,
+      footer_middle_3: footerData.content_middle3,
+      footer_middle_4: footerData.content_middle4,
+      footer_bottom_1: footerData.content_bottom1,
+      footer_bottom_2: footerData.content_bottom2,
+      attributes: null,
+      modifier_class: '',
+      hide_sidebar_left: true,
+      hide_sidebar_right: true,
+      content: [
+        BasicContent({ theme, content: '<p>Text without a class sed aute in sed consequat veniam excepteur minim mollit.</p>', vertical_spacing: 'both' }),
+        Accordion(accordionData),
+        Accordion({ ...accordionData, with_background: false }),
+        List({ ...listData, with_background: true, vertical_spacing: 'both' }),
+        List({ ...listData, with_background: false, vertical_spacing: 'both' }),
+      ].join(''),
+    };
+  },
+};

package/components/04-templates/page/page.stories.js

@@ -0,0 +1,163 @@
+/**
+ * CivicTheme Page Template component stories.
+ */
+
+import Component from './page.twig';
+import PageData, { PageFullWidthData } from './page.stories.data';
+
+const meta = {
+  title: 'Templates/Page',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    header_theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    header_top_1: {
+      control: { type: 'text' },
+    },
+    header_top_2: {
+      control: { type: 'text' },
+    },
+    header_top_3: {
+      control: { type: 'text' },
+    },
+    header_middle_1: {
+      control: { type: 'text' },
+    },
+    header_middle_2: {
+      control: { type: 'text' },
+    },
+    header_middle_3: {
+      control: { type: 'text' },
+    },
+    header_bottom_1: {
+      control: { type: 'text' },
+    },
+    banner: {
+      control: { type: 'text' },
+    },
+    highlighted: {
+      control: { type: 'text' },
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    hide_sidebar_left: {
+      control: { type: 'boolean' },
+    },
+    hide_sidebar_right: {
+      control: { type: 'boolean' },
+    },
+    sidebar_top_left: {
+      control: { type: 'text' },
+    },
+    sidebar_top_right: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    sidebar_bottom_left: {
+      control: { type: 'text' },
+    },
+    sidebar: {
+      control: { type: 'text' },
+    },
+    sidebar_bottom_right: {
+      control: { type: 'text' },
+    },
+    content_contained: {
+      control: { type: 'boolean' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    footer_theme: {
+      control: { type: 'text' },
+    },
+    footer_logo: {
+      control: { type: 'text' },
+    },
+    footer_background_image: {
+      control: { type: 'text' },
+    },
+    footer_top_1: {
+      control: { type: 'text' },
+    },
+    footer_top_2: {
+      control: { type: 'text' },
+    },
+    footer_middle_1: {
+      control: { type: 'text' },
+    },
+    footer_middle_2: {
+      control: { type: 'text' },
+    },
+    footer_middle_3: {
+      control: { type: 'text' },
+    },
+    footer_middle_4: {
+      control: { type: 'text' },
+    },
+    footer_bottom_1: {
+      control: { type: 'text' },
+    },
+    footer_bottom_2: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Page = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: PageData.args('light'),
+};
+
+export const PageDark = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+
+  args: PageData.args('dark'),
+
+  globals: {
+    backgrounds: {
+      value: 'dark',
+    },
+  },
+};
+
+export const PageFullWidth = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: PageFullWidthData.args('light'),
+};
+
+export const PageSidebar = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    ...PageFullWidthData.args('light'),
+    hide_sidebar_left: false,
+    hide_sidebar_right: false,
+    sidebar_top_left: PageData.args('light').sidebar_top_left,
+  },
+};

package/components/04-templates/page/page.test.js

@@ -0,0 +1,170 @@
+import jestEach from 'jest-each';
+import DrupalAttribute from 'drupal-attribute';
+
+const each = jestEach.default;
+
+const template = 'components/04-templates/page/page.twig';
+
+describe('Page Component', () => {
+  test('renders with default values', async () => {
+    const c = await dom(template, {});
+
+    expect(c.querySelectorAll('.ct-page.ct-theme-light')).toHaveLength(1);
+    expect(c.querySelector('#top')).toBeTruthy();
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with custom theme and attributes', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    expect(c.querySelectorAll('.ct-page.ct-theme-dark.custom-class')).toHaveLength(1);
+    expect(c.querySelector('.ct-page').getAttribute('data-test')).toEqual('true');
+    assertUniqueCssClasses(c);
+  });
+
+  test('strips HTML tags from attributes', async () => {
+    const c = await dom(template, {
+      attributes: new DrupalAttribute().setAttribute('data-test', '<script>alert(1)</script>'),
+    });
+
+    expect(c.querySelector('.ct-page').getAttribute('data-test')).toEqual('<script>alert(1)</script>');
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders all blocks with complex attributes and classes', async () => {
+    const c = await dom(template, {
+      theme: 'dark',
+      modifier_class: 'custom-class',
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      header_theme: 'light',
+      header_top_1: 'Header Top 1',
+      header_top_2: 'Header Top 2',
+      header_top_3: 'Header Top 3',
+      header_middle_1: 'Header Middle 1',
+      header_middle_2: 'Header Middle 2',
+      header_middle_3: 'Header Middle 3',
+      header_bottom_1: 'Header Bottom 1',
+      banner: '<strong>Banner Content</strong>',
+      highlighted: '<strong>Highlighted Content</strong>',
+      content_top: 'Content Top',
+      sidebar_top_left: 'Sidebar Top Left',
+      sidebar_top_left_attributes: new DrupalAttribute().setAttribute('data-sidebar-top-left', 'true'),
+      sidebar_top_right: 'Sidebar Top Right',
+      sidebar_top_right_attributes: new DrupalAttribute().setAttribute('data-sidebar-top-right', 'true'),
+      content: 'Main Content',
+      content_attributes: new DrupalAttribute().setAttribute('data-content', 'true'),
+      sidebar_bottom_left: 'Sidebar Bottom Left',
+      sidebar_bottom_left_attributes: new DrupalAttribute().setAttribute('data-sidebar-bottom-left', 'true'),
+      sidebar_bottom_right: 'Sidebar Bottom Right',
+      sidebar_bottom_right_attributes: new DrupalAttribute().setAttribute('data-sidebar-bottom-right', 'true'),
+      content_contained: true,
+      content_bottom: 'Content Bottom',
+      vertical_spacing: 'top',
+      footer_theme: 'light',
+      footer_logo: 'Footer Logo',
+      footer_background_image: 'Footer Background Image',
+      footer_top_1: 'Footer Top 1',
+      footer_top_2: 'Footer Top 2',
+      footer_middle_1: 'Footer Middle 1',
+      footer_middle_2: 'Footer Middle 2',
+      footer_middle_3: 'Footer Middle 3',
+      footer_middle_4: 'Footer Middle 4',
+      footer_bottom_1: 'Footer Bottom 1',
+      footer_bottom_2: 'Footer Bottom 2',
+    });
+
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Header Top 1');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Header Top 2');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Header Top 3');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Header Middle 1');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Header Middle 2');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Header Middle 3');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Header Bottom 1');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('<strong>Banner Content</strong>');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('<strong>Highlighted Content</strong>');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Content Top');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Sidebar Top Left');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Sidebar Top Right');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Main Content');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Sidebar Bottom Left');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Sidebar Bottom Right');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Content Bottom');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Top 1');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Top 2');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Middle 1');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Middle 2');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Middle 3');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Middle 4');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Bottom 1');
+    expect(c.querySelector('.ct-page').outerHTML).toContain('Footer Bottom 2');
+    expect(c.querySelector('.ct-page').getAttribute('data-test')).toEqual('true');
+    assertUniqueCssClasses(c);
+  });
+
+  each([
+    [{
+      hide_sidebar_left: false,
+      hide_sidebar_right: false,
+      content: 'Main Content',
+      sidebar_top_left: 'Sidebar Top Left',
+      sidebar_top_right: 'Sidebar Top Right',
+      sidebar_bottom_left: 'Sidebar Bottom Left',
+      sidebar_bottom_right: 'Sidebar Bottom Right',
+    }, 'both sidebars hidden'],
+    [{
+      hide_sidebar_left: false,
+      hide_sidebar_right: true,
+      content: 'Main Content',
+      sidebar_top_left: 'Sidebar Top Left',
+      sidebar_top_right: '',
+      sidebar_bottom_left: 'Sidebar Bottom Left',
+      sidebar_bottom_right: '',
+    }, 'right sidebar hidden'],
+    [{
+      hide_sidebar_left: true,
+      hide_sidebar_right: false,
+      content: 'Main Content',
+      sidebar_top_left: '',
+      sidebar_top_right: 'Sidebar Top Right',
+      sidebar_bottom_left: '',
+      sidebar_bottom_right: 'Sidebar Bottom Right',
+    }, 'left sidebar hidden'],
+    [{
+      hide_sidebar_left: true,
+      hide_sidebar_right: true,
+      content: 'Main Content',
+      sidebar_top_left: '',
+      sidebar_top_right: '',
+      sidebar_bottom_left: '',
+      sidebar_bottom_right: '',
+    }, 'both sidebars hidden'],
+  ]).test('renders content block with permutations: %s', async (props) => {
+    const c = await dom(template, props);
+
+    // Main content check
+    expect(c.querySelector('.ct-page').outerHTML).toContain(props.content);
+
+    // Sidebar checks
+
+    // Main content check
+    expect(c.querySelector('.ct-page').outerHTML).toContain(props.content);
+
+    // Sidebar checks
+    const sidebarTopLeft = c.querySelector('.ct-layout__sidebar_top_left');
+    const sidebarTopRight = c.querySelector('.ct-layout__sidebar_top_right');
+    const sidebarBottomLeft = c.querySelector('.ct-layout__sidebar_bottom_left');
+    const sidebarBottomRight = c.querySelector('.ct-layout__sidebar_bottom_right');
+
+    expect(sidebarTopLeft ? sidebarTopLeft.outerHTML : '').toContain(props.sidebar_top_left);
+    expect(sidebarTopRight ? sidebarTopRight.outerHTML : '').toContain(props.sidebar_top_right);
+    expect(sidebarBottomLeft ? sidebarBottomLeft.outerHTML : '').toContain(props.sidebar_bottom_left);
+    expect(sidebarBottomRight ? sidebarBottomRight.outerHTML : '').toContain(props.sidebar_bottom_right);
+
+    assertUniqueCssClasses(c);
+  });
+});

package/components/04-templates/page/page.twig

@@ -0,0 +1,138 @@
+{#
+/**
+ * @file
+ * CivicTheme Page Template component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - modifier_class: [string] Additional CSS classes.
+ * - header_theme: [string] Theme variation for header (light or dark).
+ * - hide_sidebar_left: [boolean] Whether to hide the left sidebar.
+ * - hide_sidebar_right: [boolean] Whether to hide the right sidebar.
+ * - content_contained: [boolean] Whether page content should be contained.
+ * - vertical_spacing: [string] Controls vertical spacing (top, bottom, or both).
+ * - footer_theme: [string] Theme variation for footer (light or dark).
+ * - footer_background_image: [string] Background image for footer.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - banner: Banner content.
+ * - highlighted: Highlighted content.
+ * - header_top_1: Header top section 1 content.
+ * - header_top_2: Header top section 2 content.
+ * - header_top_3: Header top section 3 content.
+ * - header_middle_1: Header middle section 1 content.
+ * - header_middle_2: Header middle section 2 content.
+ * - header_middle_3: Header middle section 3 content.
+ * - header_bottom_1: Header bottom section 1 content.
+ * - content_top: Main content area top content.
+ * - sidebar_top_left: Top left sidebar content.
+ * - sidebar_top_left_attributes: HTML attributes for top left sidebar.
+ * - sidebar_top_right: Top right sidebar content.
+ * - sidebar_top_right_attributes: HTML attributes for top right sidebar.
+ * - content: Main content.
+ * - content_attributes: HTML attributes for main content.
+ * - sidebar_bottom_left: Bottom left sidebar content.
+ * - sidebar_bottom_left_attributes: HTML attributes for bottom left sidebar.
+ * - sidebar_bottom_right: Bottom right sidebar content.
+ * - sidebar_bottom_right_attributes: HTML attributes for bottom right sidebar.
+ * - sidebar: Legacy sidebar content.
+ * - sidebar_attributes: Legacy sidebar HTML attributes
+ * - content_bottom: Main content area bottom content.
+ * - footer_top_1: Footer top section 1 content.
+ * - footer_top_2: Footer top section 2 content.
+ * - footer_middle_1: Footer middle section 1 content.
+ * - footer_middle_2: Footer middle section 2 content.
+ * - footer_middle_3: Footer middle section 3 content.
+ * - footer_middle_4: Footer middle section 4 content.
+ * - footer_bottom_1: Footer bottom section 1 content.
+ * - footer_bottom_2: Footer bottom section 2 content.
+ *
+ * Blocks:
+ * - header_block
+ * - banner_block
+ * - highlighted_block
+ * - content_block
+ * - footer_block
+ * - back_to_top_block
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
+
+<div class="ct-page {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+  <a id="top" tab-index="-1" aria-hidden="true"></a>
+
+  {% block header_block %}
+    {% include '@organisms/header/header.twig' with {
+      theme: header_theme,
+      content_top1: header_top_1,
+      content_top2: header_top_2,
+      content_top3: header_top_3,
+      content_middle1: header_middle_1,
+      content_middle2: header_middle_2,
+      content_middle3: header_middle_3,
+      content_bottom1: header_bottom_1,
+    } only %}
+  {% endblock %}
+
+  {% block banner_block %}
+    {% if banner is not empty %}
+      {{ banner }}
+    {% endif %}
+  {% endblock %}
+
+  {% if highlighted is not empty %}
+    {% block highlighted_block %}
+      <div class="container">
+        <div class="row">
+          <div class="col-xxs-12">
+            {{ highlighted }}
+          </div>
+        </div>
+      </div>
+    {% endblock %}
+  {% endif %}
+
+  {% block content_block %}
+    {% include '@base/layout/layout.twig' with {
+      content_top: content_top,
+      hide_sidebar_left: hide_sidebar_left,
+      hide_sidebar_right: hide_sidebar_right,
+      sidebar_top_left: sidebar_top_left,
+      sidebar_top_left_attributes: sidebar_top_left_attributes,
+      sidebar_top_right: sidebar_top_right,
+      sidebar_top_right_attributes: sidebar_top_right_attributes,
+      content: content,
+      content_attributes: content_attributes,
+      sidebar_bottom_left: sidebar_bottom_left|default(sidebar),
+      sidebar_bottom_left_attributes: sidebar_bottom_left_attributes|default(sidebar_attributes),
+      sidebar_bottom_right: sidebar_bottom_right,
+      sidebar_bottom_right_attributes: sidebar_bottom_right_attributes,
+      is_contained: content_contained,
+      content_bottom: content_bottom,
+      vertical_spacing: vertical_spacing|default('none'),
+      attributes: (banner is empty) ? create_attribute({id: 'main-content', tabindex: '-1'}) : create_attribute(),
+    } only %}
+  {% endblock %}
+
+  {% block footer_block %}
+    {% include '@organisms/footer/footer.twig' with {
+      theme: footer_theme,
+      background_image: footer_background_image,
+      content_top1: footer_top_1,
+      content_top2: footer_top_2,
+      content_middle1: footer_middle_1,
+      content_middle2: footer_middle_2,
+      content_middle3: footer_middle_3,
+      content_middle4: footer_middle_4,
+      content_bottom1: footer_bottom_1,
+      content_bottom2: footer_bottom_2,
+    } only %}
+  {% endblock %}
+
+  {% block back_to_top_block %}
+    {% include '@molecules/back-to-top/back-to-top.twig' with {} only %}
+  {% endblock %}
+</div>