@simple-reporting/base 0.1.111 → 1.0.0

package/dev/src/assets/scss/general.scss

@@ -1,17 +1,59 @@
-@use 'nswow';
-@use 'sass:string';
-
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-@page {
-  margin: 0;
-  size: A4;
-}
-
-body {
-  @if nswow.fonts-is-default() {
-    font-family: string.unquote(nswow.fonts-get-default());
-  } @else {
-    font-family: 'Comic Sans MS', sans-serif;
-  }
-}
+@use 'srl';
+@use 'sass:string';
+@use 'sass:map';
+
+$font-weight-bold: map.get(srl.$meta, font, weight, bold);
+
+body {
+  color: srl.colors-black-1000();
+}
+
+/*
+  Images
+*/
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/*
+  Bold styles
+*/
+[class*="bold"],
+strong,
+b {
+    font-weight: #{$font-weight-bold};
+}
+
+/*
+  Subscripts and superscripts
+*/
+.subscript,
+sub,
+.superscript,
+sup {
+  font-size: 60%;
+  font-variant-numeric: tabular-nums;
+  line-height: 0; // prevents normal text from getting too much height
+}
+
+.subscript,
+sub {
+  vertical-align: sub;
+}
+
+.superscript,
+sup {
+  vertical-align: super;
+}
+
+/*
+  Nowrap's
+*/
+span {
+  &[class*="nowrap"],
+  &[class*="key-figure"] {
+    white-space: nowrap;
+  }
+}

package/dev/src/assets/scss/pdf.scss

@@ -1,2 +1,138 @@
-@use 'nswow';
-@use 'print';
+@use 'srl';
+@use 'placeholders';
+@use 'print';
+@use 'sass:map';
+
+$image-quality: map.get(srl.$meta, pdf, image-quality);
+$page-margin-top: srl.system-size-unit(map.get(srl.$meta, pdf, margin, top));
+$page-margin-right: srl.system-size-unit(map.get(srl.$meta, pdf, margin, right));
+$page-margin-bottom: srl.system-size-unit(map.get(srl.$meta, pdf, margin, bottom));
+$page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
+
+/*
+  Basic styles for PDF
+*/
+img {
+  image-rendering: auto;
+  -ro-image-resampling: $image-quality;
+  -ro-pdf-tag-type: "Figure";
+
+  &[alt] {
+    -ro-pdf-tag-alt: attr(alt);
+  }
+}
+
+/*
+  PDF chapter navigation and publication title
+*/
+.srl-publication-title {
+  position: running(publicationTitle);
+  @include srl.typography-pdf-header()
+}
+
+.srl-chapter-navigation {
+  position: running(chapterNavigation);
+}
+
+.srl-chapter-navigation__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  @include srl.typography-pdf-header()
+}
+
+/*
+  Basic layout for PDF
+*/
+@page {
+  margin: (
+          $page-margin-top
+          $page-margin-right
+          $page-margin-bottom
+          $page-margin-left
+  );
+  counter-increment: page 1;
+  -ro-bleed-width: 0mm;
+  -ro-media-size: A4;
+  -ro-crop-size: media;
+  -ro-truncate-margin-after-break: always;
+  -ro-truncate-margin-before-break: always;
+
+  @top-left-corner {
+    content: element(publicationTitle);
+    position: absolute;
+    top: srl.spacer-get(300);
+    left: $page-margin-left;
+  }
+
+  @top-left {
+    content: element(chapterNavigation);
+    position: absolute;
+    top: srl.spacer-get(300);
+    left: srl.grid-calculate-pdf-col-span-plus-one-gutter(2);
+  }
+
+  @top-right-corner {
+    content: counter(page);
+    position: absolute;
+    top: srl.spacer-get(300);
+    right: $page-margin-right;
+    @include srl.typography-pdf-header()
+  }
+}
+
+/*
+  Page breaks for PDF
+*/
+.srl-chapter,
+.srl-article {
+  break-after: always;
+
+  &:last-child {
+    break-after: avoid;
+  }
+}
+
+.srl-pdf-pagebreak {
+  break-after: always;
+}
+
+[class*="category-note-"] {
+  break-after: unset;
+  margin-top: srl.spacer-get(400);
+
+  &:last-child {
+    break-after: always;
+  }
+}
+
+/*
+  Layout
+*/
+.srl-grid {
+  display: flex;
+  justify-content: flex-end;
+
+  .srl-grid {
+    display: block;
+  }
+}
+
+.srl-grid__inner {
+  @include srl.grid-pdf-flex-col(6);
+
+  .srl-wide-width & {
+    @include srl.grid-pdf-flex-col(8);
+  }
+}
+
+.srl-grid__aside {
+  @extend %srl-trim-margins;
+  @include srl.grid-pdf-flex-col(2);
+}
+
+.srl-grid__content {
+  @extend %srl-trim-margins;
+  @include srl.grid-pdf-flex-col(6);
+}

package/dev/src/assets/scss/placeholders.scss

@@ -0,0 +1,226 @@
+@use "srl/helpers";
+@use "srl";
+
+%srl-trim-margins {
+  @include helpers.trim-margins;
+}
+
+%srl-grid-base {
+  margin-left: auto;
+  margin-right: auto;
+  @include srl.grid-container();
+  @include srl.grid-row();
+}
+
+%srl-grid-reset {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  display: block;
+}
+
+%srl-regular-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(8, tablet-ls);
+  @include srl.grid-offset(2, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(6, desktop);
+  @include srl.grid-offset(3, desktop);
+
+  // Desktop large
+  @include srl.grid-col(6, desktop-large);
+  @include srl.grid-offset(3, desktop-large);
+}
+
+%srl-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(12, tablet-ls);
+  @include srl.grid-offset(0, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(12, desktop);
+  @include srl.grid-offset(0, desktop);
+
+  // Desktop large
+  @include srl.grid-col(12, desktop-large);
+  @include srl.grid-offset(0, desktop-large);
+}
+
+/*
+  Quote without an image wide with
+*/
+%srl-quote-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(10, tablet-ls);
+  @include srl.grid-offset(1, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(8, desktop);
+  @include srl.grid-offset(2, desktop);
+
+  // Desktop large
+  @include srl.grid-col(8, desktop-large);
+  @include srl.grid-offset(2, desktop-large);
+}
+
+/*
+  Quote with an image regular with
+  Just the image
+*/
+%srl-quote-with-image-image-regular-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(3, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(3, tablet-ls);
+  @include srl.grid-offset(2, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(2, desktop);
+  @include srl.grid-offset(3, desktop);
+
+  // Desktop large
+  @include srl.grid-col(2, desktop-large);
+  @include srl.grid-offset(3, desktop-large);
+}
+
+/*
+  Quote with an image regular with
+  Just the text
+*/
+%srl-quote-with-image-text-regular-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(5, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(5, tablet-ls);
+  @include srl.grid-offset(5, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(4, desktop);
+  @include srl.grid-offset(5, desktop);
+
+  // Desktop large
+  @include srl.grid-col(4, desktop-large);
+  @include srl.grid-offset(5, desktop-large);
+}
+
+/*
+  Quote with an image wide with
+  Just the image
+*/
+%srl-quote-with-image-image-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(3, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(3, tablet-ls);
+  @include srl.grid-offset(1, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(2, desktop);
+  @include srl.grid-offset(2, desktop);
+
+  // Desktop large
+  @include srl.grid-col(2, desktop-large);
+  @include srl.grid-offset(2, desktop-large);
+}
+
+/*
+  Quote with an image wide with
+  Just the text
+*/
+%srl-quote-with-image-text-wide-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(5, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(7, tablet-ls);
+  @include srl.grid-offset(4, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(6, desktop);
+  @include srl.grid-offset(4, desktop);
+
+  // Desktop large
+  @include srl.grid-col(6, desktop-large);
+  @include srl.grid-offset(4, desktop-large);
+}
+
+/*
+  Aside width
+*/
+%srl-aside-width {
+  // Mobile
+  @include srl.grid-col(4);
+
+  // Mobile landscape
+  @include srl.grid-col(4, phone-ls);
+
+  // Tablet portrait
+  @include srl.grid-col(8, tablet-pt);
+
+  // Tablet landscape
+  @include srl.grid-col(2, tablet-ls);
+
+  // Desktop
+  @include srl.grid-col(2, desktop);
+  @include srl.grid-offset(1, desktop);
+
+  // Desktop large
+  @include srl.grid-col(2, desktop-large);
+  @include srl.grid-offset(1, desktop-large);
+}

package/dev/src/assets/scss/print.scss

@@ -1 +1 @@
-@use 'nswow';
+@use 'srl';

package/dev/src/assets/scss/web.scss

@@ -1 +1,32 @@
-@use 'nswow';
+@use "srl";
+@use "placeholders";
+
+.srl-grid {
+  @extend %srl-grid-base;
+
+  .srl-grid {
+    @extend %srl-grid-reset;
+  }
+}
+
+.srl-grid__inner {
+  @extend %srl-regular-width;
+
+  .srl-wide-width & {
+    @extend %srl-wide-width;
+  }
+
+  .srl-quote.srl-wide-width & {
+    @extend %srl-quote-wide-width;
+  }
+}
+
+.srl-grid__aside {
+  @extend %srl-trim-margins;
+  @extend %srl-aside-width;
+}
+
+.srl-grid__content {
+  @extend %srl-trim-margins;
+  @extend %srl-regular-width;
+}

package/dev/src/assets/scss/word.scss

@@ -1,2 +1,2 @@
-@use 'nswow';
-@use 'print';
+@use 'srl';
+@use 'print';

package/dev/src/components/BypassLinks.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const pointer = ref<NsWowNavigationItem[]>([
+  {
+    label: t('toMainNavigation'),
+    attributes: {
+      id: 'srl-to-main-navigation'
+    },
+    callback: () => {
+      const elem: HTMLDivElement | null = document.querySelector('#srl-page-navigation')
+      if (elem) {
+        elem.querySelector('button')?.focus()
+      }
+    }
+  },
+  {
+    label: t('toMainContent'),
+    attributes: {
+      id: 'srl-to-main-content'
+    },
+    callback: () => {
+      const elem: HTMLDivElement | null = document.querySelector('#srl-page-main')
+      if (elem) {
+        elem.focus()
+      }
+    }
+  },
+  {
+    label: t('toFooter'),
+    attributes: {
+      id: 'srl-to-footer'
+    },
+    callback: () => {
+      const elem: HTMLDivElement | null = document.querySelector('#srl-page-footer')
+      if (elem) {
+        elem.focus()
+      }
+    }
+  }
+])
+</script>
+
+<template>
+  <nav class="srl-page__keyboardpointer" id="srl-page-keyboardpointer" tabindex="-1">
+    <SrlMenu name="keyboardpointer" :menu="pointer" />
+  </nav>
+</template>
+
+<style lang="scss">
+@use 'srl';
+
+.srl-page__keyboardpointer {
+  overflow: hidden;
+  height: 0;
+
+  &:has(button:focus) {
+    height: auto;
+    @include srl.spacer-padding-block(200);
+  }
+
+  ul {
+    list-style: none;
+    margin: 0 auto;
+    padding: 0 var(--srl-container-padding);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--srl-gutter-column-gap);
+    row-gap: var(--srl-gutter-row-gap);
+    max-width: var(--srl-container-max-width);
+  }
+
+  li {
+    margin: 0 0 0 srl.system-size-unit(-15);
+    padding: 0;
+  }
+
+  button {
+    @include srl.typography-paragraph();
+    padding-block: srl.system-size-unit(5);
+    padding-inline: srl.system-size-unit(15);
+    background-color: transparent;
+    border: 0;
+  }
+}
+</style>