@dta-au/civictheme-twig 1.13.1

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

@@ -0,0 +1,54 @@
+//
+// CivicTheme Attachment component styles.
+//
+
+.ct-attachment {
+  $root: &;
+
+  &#{$root}--with-background {
+    @include ct-breakpoint(m) {
+      padding-left: var(--ct-attachment-space-horizontal);
+      padding-right: var(--ct-attachment-space-horizontal);
+    }
+  }
+
+  #{$root}__wrapper {
+    border: solid ct-particle(0.125);
+    border-radius: var(--ct-attachment-border-radius);
+    padding: ct-spacing(3);
+
+    @include ct-breakpoint(m) {
+      padding: ct-spacing(4);
+    }
+  }
+
+  #{$root}__title {
+    margin-bottom: ct-spacing(2);
+  }
+
+  #{$root}__content {
+    margin-bottom: ct-spacing(2);
+  }
+
+  #{$root}__links .ct-item-list__item {
+    display: flex;
+    gap: 0 ct-spacing();
+  }
+
+  #{$root}__links__link__extension {
+    text-transform: uppercase;
+  }
+
+  @include ct-component-theme($root) using($root, $theme) {
+    @include ct-component-property($root, $theme, color);
+
+    &#{$root}--with-background {
+      @include ct-component-property($root, $theme, wrapper, background-color);
+    }
+
+    #{$root}__wrapper {
+      @include ct-component-property($root, $theme, border-color);
+      @include ct-component-property($root, $theme, background-color);
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+/**
+ * CivicTheme Attachment component stories.
+ */
+
+import Component from './attachment.twig';
+
+const meta = {
+  title: 'Molecules/Attachment',
+  component: Component,
+  argTypes: {
+    theme: {
+      control: { type: 'radio' },
+      options: ['light', 'dark'],
+    },
+    title: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    files: {
+      control: { type: 'object' },
+    },
+    with_background: {
+      control: { type: 'boolean' },
+    },
+    vertical_spacing: {
+      control: { type: 'radio' },
+      options: ['none', 'top', 'bottom', 'both'],
+    },
+    content_top: {
+      control: { type: 'text' },
+    },
+    content_bottom: {
+      control: { type: 'text' },
+    },
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const Attachment = {
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    theme: 'light',
+    title: 'Attachments',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    files: [
+      {
+        url: 'https://example.com/document.doc',
+        name: 'Document.doc',
+        ext: 'doc',
+        size: '42.88 KB',
+        created: '2022-01-01',
+        changed: '2022-01-01',
+        icon: 'word-file',
+      },
+      {
+        url: 'https://example.com/document.docx',
+        name: 'Document.docx',
+        ext: 'docx',
+        size: '32.48 KB',
+        created: '2022-01-01',
+        changed: '2022-01-01',
+        icon: 'word-file',
+      },
+      {
+        url: 'https://example.com/document.pdf',
+        name: 'Document.pdf',
+        ext: 'pdf',
+        size: '42.82 KB',
+        created: '2022-01-01',
+        changed: '2022-01-01',
+        icon: 'pdf-file',
+      },
+      {
+        url: 'https://example.com/document.ppt',
+        name: 'Document.ppt',
+        ext: 'ppt',
+        size: '12.88 KB',
+        created: '2022-01-01',
+        changed: '2022-01-01',
+        icon: 'download-file',
+      },
+      {
+        url: 'https://example.com/document.xlsx',
+        name: 'Document.xlsx',
+        ext: 'xlsx',
+        size: '34.45 KB',
+        created: '2022-01-01',
+        changed: '2022-01-01',
+        icon: 'download-file',
+      },
+      {
+        url: 'https://example.com/document.xls',
+        name: 'Document.xls',
+        ext: 'xls',
+        size: '65.67 KB',
+        created: '2022-01-01',
+        changed: '2022-01-01',
+        icon: 'download-file',
+      },
+      {
+        url: 'https://example.com/document',
+        name: 'Document',
+        ext: null,
+        size: null,
+        created: '2022-01-01',
+        changed: '2022-01-01',
+        icon: 'download-file',
+      },
+    ],
+    with_background: false,
+    vertical_spacing: 'none',
+    content_top: '',
+    content_bottom: '',
+    modifier_class: '',
+    attributes: null,
+  },
+};

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

@@ -0,0 +1,84 @@
+import DrupalAttribute from 'drupal-attribute';
+
+const template = 'components/02-molecules/attachment/attachment.twig';
+
+describe('Attachment Component', () => {
+  test('renders with required attributes', async () => {
+    const c = await dom(template, {
+      files: [
+        { name: 'File 1', ext: 'pdf', url: 'https://example.com/file1.pdf', size: '1MB', created: '2023-01-01', changed: '2023-01-02', icon: 'pdf-file' },
+        { name: 'File 2', ext: 'docx', url: 'https://example.com/file2.docx', size: '2MB', created: '2023-01-03', changed: '2023-01-04', icon: 'word-file' },
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-attachment')).toHaveLength(1);
+    expect(c.querySelectorAll('.ct-attachment__links__link')).toHaveLength(2);
+    expect(c.querySelector('.ct-attachment__links__link').textContent.trim()).toContain('File 1');
+    expect(c.querySelector('.ct-attachment__links__link__changed').textContent.trim()).toContain('LAST UPDATED: 2023-01-02');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('renders with optional attributes', async () => {
+    const c = await dom(template, {
+      content_top: 'Top content',
+      title: 'Attachment Title',
+      content: 'Attachment content',
+      files: [
+        { name: 'File 1', ext: 'pdf', url: 'https://example.com/file1.pdf', size: '1MB', created: '2023-01-01', changed: '2023-01-02', icon: 'pdf-file' },
+      ],
+      content_bottom: 'Bottom content',
+      theme: 'dark',
+      vertical_spacing: 'both',
+      with_background: true,
+      attributes: new DrupalAttribute().setAttribute('data-test', 'true'),
+      modifier_class: 'custom-class',
+    });
+
+    expect(c.querySelectorAll('.ct-attachment.custom-class.ct-theme-dark.ct-attachment--with-background.ct-vertical-spacing-inset--both')).toHaveLength(1);
+    expect(c.querySelector('.ct-attachment__content-top').textContent.trim()).toEqual('Top content');
+    expect(c.querySelector('.ct-attachment__title').textContent.trim()).toEqual('Attachment Title');
+    expect(c.querySelector('.ct-attachment__content').textContent.trim()).toEqual('Attachment content');
+    expect(c.querySelector('.ct-attachment__content-bottom').textContent.trim()).toEqual('Bottom content');
+    expect(c.querySelector('.ct-attachment').getAttribute('data-test')).toEqual('true');
+    expect(c.querySelector('.ct-attachment__links__link').textContent.trim()).toContain('File 1');
+
+    assertUniqueCssClasses(c);
+  });
+
+  test('does not render when files are empty', async () => {
+    const c = await dom(template, {
+      files: [],
+    });
+
+    expect(c.querySelectorAll('.ct-attachment')).toHaveLength(0);
+  });
+
+  test('renders with multiple files and attributes', async () => {
+    const c = await dom(template, {
+      files: [
+        { name: 'File 1', ext: 'pdf', url: 'https://example.com/file1.pdf', size: '1MB', created: '2023-01-01', changed: '2023-01-02', icon: 'pdf-file' },
+        { name: 'File 2', ext: 'docx', url: 'https://example.com/file2.docx', size: '2MB', created: '2023-01-03', changed: '2023-01-04', icon: 'word-file' },
+        { name: 'File without extension', url: 'https://example.com/file3' },
+        { name: 'File with only extension', ext: 'txt', url: 'https://example.com/file4.txt' },
+        { name: 'File with only size', url: 'https://example.com/file5', size: '500KB' },
+      ],
+    });
+
+    expect(c.querySelectorAll('.ct-attachment__links__link')).toHaveLength(5);
+    expect(c.querySelectorAll('.ct-attachment__links__link')[0].textContent.trim()).toContain('File 1');
+    expect(c.querySelectorAll('.ct-attachment__links__link')[1].textContent.trim()).toContain('File 2');
+    expect(c.querySelectorAll('.ct-attachment__links__link__changed')[0].textContent.trim()).toContain('LAST UPDATED: 2023-01-02');
+    expect(c.querySelectorAll('.ct-attachment__links__link__changed')[1].textContent.trim()).toContain('LAST UPDATED: 2023-01-04');
+
+    expect(c.querySelectorAll('.ct-attachment__links__link')[2].textContent.trim()).toBe('File without extension');
+    expect(c.querySelectorAll('.ct-attachment__links__link')[2].textContent.trim()).not.toContain('docx');
+    expect(c.querySelectorAll('.ct-attachment__links__link')[2].textContent.trim()).not.toContain('2MB');
+
+    expect(c.querySelectorAll('.ct-attachment__links__link')[3].textContent.trim()).toContain('File with only extension');
+    expect(c.querySelectorAll('.ct-attachment__links__link')[3].textContent.trim()).toContain('(txt)');
+
+    expect(c.querySelectorAll('.ct-attachment__links__link')[4].textContent.trim()).toContain('File with only size');
+    expect(c.querySelectorAll('.ct-attachment__links__link')[4].textContent.trim()).toContain('(500KB)');
+  });
+});

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

@@ -0,0 +1,139 @@
+{#
+/**
+ * @file
+ * CivicTheme Attachment component.
+ *
+ * Props:
+ * - theme: [string] Theme variation (light or dark).
+ * - title: [string] Attachment title.
+ * - content: [string] Attachment content.
+ * - files: [array] File attachments:
+ *   Each item contains:
+ *   - name: [string] File name (as it appears to the user).
+ *   - ext: [string] File extension.
+ *   - url: [string] File URL.
+ *   - size: [string] File size (as it appears to the user).
+ *   - created: [string] File created date.
+ *   - changed: [string] File modified date.
+ *   - icon: [string] File type icon name.
+ * - vertical_spacing: [string] Vertical spacing position (top, bottom, both).
+ * - with_background: [boolean] Whether to display with a background.
+ * - modifier_class: [string] Additional CSS classes.
+ * - attributes: [Drupal\Core\Template\Attribute] Additional HTML attributes.
+ *
+ * Slots:
+ * - content_top: Top content area content.
+ * - content_bottom: Bottom content area content.
+ *
+ * Blocks:
+ * - content_top_block
+ * - content_block
+ * - links_block
+ * - content_bottom_block
+ */
+#}
+
+{% set with_background_class = with_background ? 'ct-attachment--with-background' : '' %}
+{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing-inset--%s'|format(vertical_spacing) : '' %}
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s %s %s'|format(theme_class, vertical_spacing_class, with_background_class, modifier_class|default('')) %}
+
+{% if files is not empty %}
+  <div class="ct-attachment {{ modifier_class -}}" {% if attributes is defined and attributes is not null %}{{- attributes -}}{% endif %}>
+    <div class="container">
+      <div class="row">
+        <div class="col-xxs-12">
+          <div class="ct-attachment__wrapper">
+            {% block content_top_block %}
+              {% if content_top is not empty %}
+                <div class="ct-attachment__content-top">
+                  {{- content_top -}}
+                </div>
+              {% endif %}
+            {% endblock %}
+
+            {% block content_block %}
+              {% if title is not empty or content is not empty %}
+                <div class="ct-attachment__inner">
+                  {% if title is not empty %}
+                    {% include '@atoms/heading/heading.twig' with {
+                      theme: theme,
+                      content: title,
+                      level: 4,
+                      modifier_class: 'ct-attachment__title',
+                    } only %}
+                  {% endif %}
+
+                  {% if content is not empty %}
+                    {% include '@atoms/paragraph/paragraph.twig' with {
+                      theme: theme,
+                      content: content,
+                      size: 'small',
+                      modifier_class: 'ct-attachment__content',
+                    } only %}
+                  {% endif %}
+                </div>
+              {% endif %}
+            {% endblock %}
+
+            {% block links_block %}
+              {% set link_items = [] %}
+              {% for file in files %}
+                {%- set link %}
+                  {% include '@base/icon/icon.twig' with {
+                    symbol: file.icon ? file.icon : 'download-file',
+                    size: 'large',
+                    modifier_class: 'ct-attachment__links__link__icon',
+                  } only %}
+
+                  <div class="ct-attachment__links__link__wrapper">
+                    {% set link_text %}
+                      {{ file.name }}
+                      {% if file.ext is not empty and file.size is not empty %}
+                        <span class="ct-attachment__links__link__extension">({{ file.ext }}, {{ file.size }})</span>
+                      {% elseif file.ext is not empty or file.size is not empty %}
+                        <span class="ct-attachment__links__link__extension">({{ file.ext|default(file.size) }})</span>
+                      {% endif %}
+                    {% endset %}
+
+                    {% include '@atoms/link/link.twig' with {
+                      theme: theme,
+                      text: link_text,
+                      title: 'Download %s'|format(file.name),
+                      url: file.url,
+                      modifier_class: 'ct-attachment__links__link',
+                    } only %}
+
+                    {% if file.changed is not empty %}
+                      {% include '@atoms/paragraph/paragraph.twig' with {
+                        theme: theme,
+                        content: 'LAST UPDATED: ' ~ file.changed,
+                        size: 'small',
+                        modifier_class: 'ct-attachment__links__link__changed',
+                      } only %}
+                    {% endif %}
+                  </div>
+                {% endset -%}
+                {% set link_items = link_items|merge([link]) %}
+              {% endfor %}
+
+              {% include '@base/item-list/item-list.twig' with {
+                items: link_items,
+                direction: 'vertical',
+                modifier_class: 'ct-attachment__links',
+              } only %}
+            {% endblock %}
+
+            {% block content_bottom_block %}
+              {% if content_bottom is not empty %}
+                <div class="ct-attachment__content-bottom">
+                  {{- content_bottom -}}
+                </div>
+              {% endif %}
+            {% endblock %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endif %}

package/components/02-molecules/back-to-top/__snapshots__/back-to-top.test.js.snap

@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Back to Top Component button contains correct icon 1`] = `
+<div>
+  <div
+    class="ct-back-to-top "
+    data-component-name="back-to-top"
+    data-scrollspy=""
+    data-scrollspy-offset="400"
+  >
+    
+  
+
+  
+    <a
+      _keys="data-skip-to-target"
+      class="ct-button ct-theme-light  ct-button--link ct-button--regular   ct-back-to-top__button"
+      data-component-name="button"
+      data-skip-to-target=""
+      href="#top"
+      role="button"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        <span
+          class="ct-visually-hidden"
+        >
+          Return focus to the top of the page
+        </span>
+        <svg
+          aria-hidden="true"
+          class="ct-icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M17.7102 11.29L12.7102 6.29C12.6151 6.19896 12.5029 6.1276 12.3802 6.08C12.1367 5.97999 11.8636 5.97999 11.6202 6.08C11.4974 6.1276 11.3853 6.19896 11.2902 6.29L6.29019 11.29C6.19695 11.3832 6.12299 11.4939 6.07253 11.6158C6.02207 11.7376 5.99609 11.8681 5.99609 12C5.99609 12.2663 6.10188 12.5217 6.29019 12.71C6.47849 12.8983 6.73388 13.0041 7.00019 13.0041C7.26649 13.0041 7.52188 12.8983 7.71019 12.71L11.0002 9.41V17C11.0002 17.2652 11.1055 17.5196 11.2931 17.7071C11.4806 17.8946 11.735 18 12.0002 18C12.2654 18 12.5198 17.8946 12.7073 17.7071C12.8948 17.5196 13.0002 17.2652 13.0002 17V9.41L16.2902 12.71C16.3831 12.8037 16.4937 12.8781 16.6156 12.9289C16.7375 12.9797 16.8682 13.0058 17.0002 13.0058C17.1322 13.0058 17.2629 12.9797 17.3848 12.9289C17.5066 12.8781 17.6172 12.8037 17.7102 12.71C17.8039 12.617 17.8783 12.5064 17.9291 12.3846C17.9798 12.2627 18.006 12.132 18.006 12C18.006 11.868 17.9798 11.7373 17.9291 11.6154C17.8783 11.4936 17.8039 11.383 17.7102 11.29Z"
+          />
+          
+
+        </svg>
+        
+
+      </span>
+    </a>
+    
+
+  </div>
+  
+
+</div>
+`;
+
+exports[`Back to Top Component renders button with correct attributes 1`] = `
+<div>
+  <div
+    class="ct-back-to-top "
+    data-component-name="back-to-top"
+    data-scrollspy=""
+    data-scrollspy-offset="400"
+  >
+    
+  
+
+  
+    <a
+      _keys="data-skip-to-target"
+      class="ct-button ct-theme-light  ct-button--link ct-button--regular   ct-back-to-top__button"
+      data-component-name="button"
+      data-skip-to-target=""
+      href="#top"
+      role="button"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        <span
+          class="ct-visually-hidden"
+        >
+          Return focus to the top of the page
+        </span>
+        <svg
+          aria-hidden="true"
+          class="ct-icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M17.7102 11.29L12.7102 6.29C12.6151 6.19896 12.5029 6.1276 12.3802 6.08C12.1367 5.97999 11.8636 5.97999 11.6202 6.08C11.4974 6.1276 11.3853 6.19896 11.2902 6.29L6.29019 11.29C6.19695 11.3832 6.12299 11.4939 6.07253 11.6158C6.02207 11.7376 5.99609 11.8681 5.99609 12C5.99609 12.2663 6.10188 12.5217 6.29019 12.71C6.47849 12.8983 6.73388 13.0041 7.00019 13.0041C7.26649 13.0041 7.52188 12.8983 7.71019 12.71L11.0002 9.41V17C11.0002 17.2652 11.1055 17.5196 11.2931 17.7071C11.4806 17.8946 11.735 18 12.0002 18C12.2654 18 12.5198 17.8946 12.7073 17.7071C12.8948 17.5196 13.0002 17.2652 13.0002 17V9.41L16.2902 12.71C16.3831 12.8037 16.4937 12.8781 16.6156 12.9289C16.7375 12.9797 16.8682 13.0058 17.0002 13.0058C17.1322 13.0058 17.2629 12.9797 17.3848 12.9289C17.5066 12.8781 17.6172 12.8037 17.7102 12.71C17.8039 12.617 17.8783 12.5064 17.9291 12.3846C17.9798 12.2627 18.006 12.132 18.006 12C18.006 11.868 17.9798 11.7373 17.9291 11.6154C17.8783 11.4936 17.8039 11.383 17.7102 11.29Z"
+          />
+          
+
+        </svg>
+        
+
+      </span>
+    </a>
+    
+
+  </div>
+  
+
+</div>
+`;
+
+exports[`Back to Top Component renders correctly 1`] = `
+<div>
+  <div
+    class="ct-back-to-top "
+    data-component-name="back-to-top"
+    data-scrollspy=""
+    data-scrollspy-offset="400"
+  >
+    
+  
+
+  
+    <a
+      _keys="data-skip-to-target"
+      class="ct-button ct-theme-light  ct-button--link ct-button--regular   ct-back-to-top__button"
+      data-component-name="button"
+      data-skip-to-target=""
+      href="#top"
+      role="button"
+    >
+      <span
+        class="ct-text-icon__text"
+      >
+        <span
+          class="ct-visually-hidden"
+        >
+          Return focus to the top of the page
+        </span>
+        <svg
+          aria-hidden="true"
+          class="ct-icon"
+          height="24"
+          role="img"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          
+
+          <path
+            d="M17.7102 11.29L12.7102 6.29C12.6151 6.19896 12.5029 6.1276 12.3802 6.08C12.1367 5.97999 11.8636 5.97999 11.6202 6.08C11.4974 6.1276 11.3853 6.19896 11.2902 6.29L6.29019 11.29C6.19695 11.3832 6.12299 11.4939 6.07253 11.6158C6.02207 11.7376 5.99609 11.8681 5.99609 12C5.99609 12.2663 6.10188 12.5217 6.29019 12.71C6.47849 12.8983 6.73388 13.0041 7.00019 13.0041C7.26649 13.0041 7.52188 12.8983 7.71019 12.71L11.0002 9.41V17C11.0002 17.2652 11.1055 17.5196 11.2931 17.7071C11.4806 17.8946 11.735 18 12.0002 18C12.2654 18 12.5198 17.8946 12.7073 17.7071C12.8948 17.5196 13.0002 17.2652 13.0002 17V9.41L16.2902 12.71C16.3831 12.8037 16.4937 12.8781 16.6156 12.9289C16.7375 12.9797 16.8682 13.0058 17.0002 13.0058C17.1322 13.0058 17.2629 12.9797 17.3848 12.9289C17.5066 12.8781 17.6172 12.8037 17.7102 12.71C17.8039 12.617 17.8783 12.5064 17.9291 12.3846C17.9798 12.2627 18.006 12.132 18.006 12C18.006 11.868 17.9798 11.7373 17.9291 11.6154C17.8783 11.4936 17.8039 11.383 17.7102 11.29Z"
+          />
+          
+
+        </svg>
+        
+
+      </span>
+    </a>
+    
+
+  </div>
+  
+
+</div>
+`;

package/components/02-molecules/back-to-top/back-to-top.scss

@@ -0,0 +1,39 @@
+//
+// CivicTheme Back to Top component styles.
+//
+
+.ct-back-to-top {
+  $root: &;
+
+  @include ct-print-hide();
+
+  & {
+    position: fixed;
+    right: var(--ct-back-to-top-space-right);
+    bottom: var(--ct-back-to-top-space-bottom);
+  }
+
+  #{$root}__button {
+    &,
+    &:focus-visible,
+    &:active,
+    &:visited,
+    &:hover {
+      display: inline-block;
+      border-radius: ct-particle(12);
+      padding: ct-spacing();
+      background-color: var(--ct-back-to-top-background-color);
+      border-color: var(--ct-back-to-top-border-color);
+      color: var(--ct-back-to-top-color);
+      line-height: 0;
+      outline-color: var(--ct-back-to-top-outline-color);
+      outline-offset: var(--ct-button-outline-offset);
+      outline-width: var(--ct-button-outline-width);
+      appearance: none;
+    }
+
+    &:focus-visible {
+      outline-style: solid;
+    }
+  }
+}

package/components/02-molecules/back-to-top/back-to-top.stories.js

@@ -0,0 +1,26 @@
+/**
+ * CivicTheme Back to Top component stories.
+ */
+
+import Component from './back-to-top.stories.twig';
+
+const meta = {
+  title: 'Molecules/Back To Top',
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+export default meta;
+
+export const BackToTop = {
+  parameters: {
+    layout: 'fullscreen',
+    storyDocs: 'Back To Top button appears when the bottom of the red rectangle reaches the top of the page.',
+    storyDocsSize: 'medium',
+  },
+  args: {},
+};

package/components/02-molecules/back-to-top/back-to-top.stories.scss

@@ -0,0 +1,20 @@
+//
+// CivicTheme Back to Top component story styles.
+//
+
+.story-container__page-content {
+  &.story-ct-back-to-top {
+    height: 2000px;
+
+    &::before {
+      box-shadow: 0 0 ct-particle(0.125) ct-particle(0.125) #f00 inset;
+      height: 400px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: block;
+      content: '';
+    }
+  }
+}

package/components/02-molecules/back-to-top/back-to-top.stories.twig

@@ -0,0 +1,6 @@
+<a id="top"></a>
+<div class="story-container">
+  <div class="story-container__page-content story-ct-back-to-top">
+    {% include './back-to-top.twig' %}
+  </div>
+</div>