@simple-reporting/base 0.0.1

package/livingdocs/Text/footnote/print.scss

@@ -0,0 +1,36 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+$gap: map.get(nswow.$grid-gutter, print, gap);
+$column-gap: map.get(nswow.$grid-gutter, print, column-gap);
+@if not $column-gap {
+  $column-gap: $gap;
+}
+@if not $column-gap {
+  $column-gap: 0;
+}
+
+.srl-footnote {
+  > span {
+    position: relative;
+  }
+
+  &__number {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: nswow.system-size-unit($numberSize, in);
+  }
+
+  &__text {
+    display: block;
+    color: nswow.colors-primary();
+
+    &:not(:first-child) {
+      margin-left: nswow.system-size-unit($numberSize + $column-gap, in);
+    }
+  }
+}

package/livingdocs/Text/footnote/web.scss

@@ -0,0 +1,27 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+.srl-footnote {
+  > span {
+    display: flex;
+    flex-wrap: nowrap;
+    @each $breakpoint, $gutter in nswow.$grid-gutter {
+      $gap: map.get($gutter, gap);
+      $column-gap: map.get($gutter, column-gap);
+      @if not $column-gap {
+        $column-gap: $gap;
+      }
+      @if $column-gap {
+        @include nswow.grid-media($breakpoint) {
+          column-gap: nswow.system-size-unit($column-gap);
+        }
+      }
+    }
+  }
+
+  &__number {
+    flex: 0 0 nswow.system-size-unit($numberSize);
+  }
+}

package/livingdocs/Text/footnote/word.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Text/lead/general.scss

@@ -0,0 +1,9 @@
+@use 'nswow';
+
+.srl-lead {
+  color: nswow.colors-shade-800();
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-headline1(true);
+}

package/livingdocs/Text/lead/lead.html

@@ -0,0 +1,23 @@
+<script type="ld-conf">
+  {
+  	"name": "lead",
+  	"label": "Lead",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-lead.min.svg",
+  	"properties": [
+      "web-width",
+      "pdf-width"
+    ],
+  	"directives": {
+  		"text": {
+  			"recommendedMaxLength": 325
+  		}
+  	}
+  }
+</script>
+<p class="srl-lead srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner" doc-editable="text">
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste sapiente,
+    magni incidunt aut hic ut sint, repellendus nesciunt alias sequi, vero
+    voluptatem! Similique laborum natus eum ullam, rem officiis dolores.
+  </span>
+</p>

package/livingdocs/Text/paragraph/general.scss

@@ -0,0 +1,9 @@
+@use 'nswow';
+
+.srl-paragraph {
+  color: nswow.colors-shade-800();
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-copy1(true);
+}

package/livingdocs/Text/paragraph/paragraph.html

@@ -0,0 +1,24 @@
+<script type="ld-conf">
+  {
+    "name": "paragraph",
+    "label": "Paragraph",
+    "iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-paragraph.min.svg",
+    "properties": [
+      "web-width",
+      "pdf-width"
+    ]
+  }
+</script>
+<p class="srl-paragraph srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner" doc-editable="text">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet.
+  </span>
+</p>

package/livingdocs/Text/quote/general.scss

@@ -0,0 +1,43 @@
+@use 'nswow';
+
+.srl-quote {
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+
+  &__container {
+    padding: nswow.system-size-unit(20);
+    background-color: nswow.colors-secondary-light();
+  }
+
+  &__text {
+    color: nswow.colors-shade-800();
+    @include nswow.typography-blockquote();
+  }
+
+  &:not(.hide-quote-characters) {
+    .srl-quote__text {
+      &:before {
+        content: '\301E';
+      }
+      &:after {
+        content: '\301D';
+      }
+    }
+  }
+
+  &__cite {
+    margin-top: nswow.system-size-unit(20);
+  }
+
+  &__author {
+    font-weight: 700;
+    color: nswow.colors-shade-800();
+    @include nswow.typography-copy3(true);
+  }
+
+  &__function {
+    color: nswow.colors-shade-800();
+    @include nswow.typography-copy3(true);
+  }
+}

package/livingdocs/Text/quote/properties.json

@@ -0,0 +1,7 @@
+{
+  "hide-quote-characters": {
+    "label": "Hide quote characters before and after",
+    "type": "option",
+    "value": "hide-quote-characters"
+  }
+}

package/livingdocs/Text/quote/quote.html

@@ -0,0 +1,29 @@
+<script type="ld-conf">
+  {
+  	"name": "quote",
+  	"label": "Quote",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-quote.min.svg",
+  	"properties": [
+      "web-width",
+      "pdf-width",
+  		"hide-quote-characters"
+  	]
+  }
+</script>
+<blockquote class="srl-quote srl-article__grid srl-article__grid--indent">
+  <div class="srl-quote__row srl-article__grid--inner">
+    <div class="srl-quote__container">
+      <p class="lc-linkable srl-quote__text" doc-editable="text">
+        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      </p>
+      <cite class="srl-quote__cite">
+        <span class="srl-quote__author" doc-editable="author" doc-optional
+          >Max Mustermann</span
+        >
+        <span class="srl-quote__function" doc-editable="job" doc-optional
+          >Tätigkeit</span
+        >
+      </cite>
+    </div>
+  </div>
+</blockquote>

package/livingdocs/Text/quote-with-portrait/general.scss

@@ -0,0 +1,81 @@
+@use 'nswow';
+
+.srl-quote-width-portrait {
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+
+  &__container {
+    padding: nswow.system-size-unit(20);
+    background-color: nswow.colors-secondary-light();
+    @include nswow.grid-row();
+  }
+
+  &__image {
+    @include nswow.grid-col(12, phone);
+    @include nswow.grid-col(4, portrait);
+    @include nswow.grid-col(4, landscape);
+    @include nswow.grid-col(4, desktop);
+    @include nswow.grid-col(4, print);
+
+    &-figure {
+      text-align: center;
+    }
+    &-img {
+      max-width: 100%;
+    }
+  }
+
+  &__text {
+    @include nswow.grid-col(12, phone);
+    @include nswow.grid-col(8, portrait);
+    @include nswow.grid-col(8, landscape);
+    @include nswow.grid-col(8, desktop);
+    @include nswow.grid-col(8, print);
+  }
+
+  &.round-portrait {
+    .srl-quote-width-portrait__image-img {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+
+  &__text {
+    color: nswow.colors-shade-800();
+
+    @include nswow.typography-blockquote();
+
+    @include nswow.grid-col(12, phone);
+    @include nswow.grid-col(8, portrait);
+    @include nswow.grid-col(8, landscape);
+    @include nswow.grid-col(8, desktop);
+    @include nswow.grid-col(8, print);
+  }
+
+  &:not(.hide-quote-characters) {
+    .srl-quote-width-portrait__text {
+      &:before {
+        content: '\301E';
+      }
+      &:after {
+        content: '\301D';
+      }
+    }
+  }
+
+  &__cite {
+    margin-top: nswow.system-size-unit(20);
+  }
+
+  &__author {
+    font-weight: 700;
+    color: nswow.colors-shade-800();
+    @include nswow.typography-copy3(true);
+  }
+
+  &__function {
+    color: nswow.colors-shade-800();
+    @include nswow.typography-copy3(true);
+  }
+}

package/livingdocs/Text/quote-with-portrait/properties.json

@@ -0,0 +1,12 @@
+{
+  "round-portrait": {
+    "label": "Round portrait",
+    "type": "option",
+    "value": "round-portrait"
+  },
+  "hide-quote-characters": {
+    "label": "Hide quote characters before and after",
+    "type": "option",
+    "value": "hide-quote-characters"
+  }
+}

package/livingdocs/Text/quote-with-portrait/quote-with-portrait.html

@@ -0,0 +1,49 @@
+<script type="ld-conf">
+  {
+  	"name": "quote-with-portrait",
+  	"label": "Quote with image",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-quote-image.min.svg",
+  	"properties": [
+      "web-width",
+      "pdf-width",
+  		"round-portrait",
+  		"hide-quote-characters"
+  	],
+  	"directives": {
+  		"image": {
+  			"imageRatios": ["1:1"],
+  			"allowOriginalRatio": false
+  		}
+  	}
+  }
+</script>
+<blockquote
+  class="srl-quote-with-portrait srl-article__grid srl-article__grid--content"
+>
+  <div class="srl-quote-width-portrait__container srl-article__grid--inner">
+    <div class="srl-quote-width-portrait__image">
+      <figure class="srl-quote-with-portrait__image-figure">
+        <img class="srl-quote-with-portrait__image-img" doc-image="image" />
+      </figure>
+    </div>
+    <div class="srl-quote-with-portrait__text">
+      <p class="lc-linkable srl-quote-with-portrait__quote" doc-editable="text">
+        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
+      </p>
+      <cite class="srl-quote-with-portrait__cite">
+        <span
+          class="srl-quote-with-portrait__author"
+          doc-editable="author"
+          doc-optional
+          >Max Mustermann</span
+        >
+        <span
+          class="srl-quote-with-portrait__function"
+          doc-editable="job"
+          doc-optional
+          >Tätigkeit</span
+        >
+      </cite>
+    </div>
+  </div>
+</blockquote>

package/livingdocs/Titles/title-h1/general.scss

@@ -0,0 +1,10 @@
+@use 'nswow';
+
+.srl-title-h1 {
+  color: nswow.colors-shade-800();
+
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-headline1(true);
+}

package/livingdocs/Titles/title-h1/title-h1.html

@@ -0,0 +1,16 @@
+<script type="ld-conf">
+  {
+  	"name": "title-h1",
+  	"label": "Title (h1)",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-h1.min.svg",
+    "properties": [
+      "web-width",
+      "pdf-width"
+    ]
+  }
+</script>
+<h1 class="srl-title-h1 srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner" doc-editable="text">
+    Title h1 Lorem ipsum dolor sit amet
+  </span>
+</h1>

package/livingdocs/Titles/title-h2/app.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Titles/title-h2/general.scss

@@ -0,0 +1,13 @@
+@use 'nswow';
+@use 'nswow/grid';
+
+$numberSize: 50;
+
+.srl-title-h2 {
+  color: nswow.colors-shade-800();
+
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-headline2(true);
+}

package/livingdocs/Titles/title-h2/ldd.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Titles/title-h2/pdf.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Titles/title-h2/print.scss

@@ -0,0 +1,36 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+$gap: map.get(nswow.$grid-gutter, print, gap);
+$column-gap: map.get(nswow.$grid-gutter, print, column-gap);
+@if not $column-gap {
+  $column-gap: $gap;
+}
+@if not $column-gap {
+  $column-gap: 0;
+}
+
+.srl-title-h2 {
+  > span {
+    position: relative;
+  }
+
+  &__number {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: nswow.system-size-unit($numberSize, in);
+  }
+
+  &__text {
+    display: block;
+    color: nswow.colors-primary();
+
+    &:not(:first-child) {
+      margin-left: nswow.system-size-unit($numberSize + $column-gap, in);
+    }
+  }
+}

package/livingdocs/Titles/title-h2/title-h2.html

@@ -0,0 +1,26 @@
+<script type="ld-conf">
+  {
+  	"name": "title-h2",
+  	"label": "Title (h2)",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-h2.min.svg",
+    "properties": [
+      "web-width",
+      "pdf-width"
+    ],
+  	"directives": {
+  		"number": {
+  			"recommendedMaxLength": 2
+  		}
+  	}
+  }
+</script>
+<h2 class="srl-title-h2 srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner">
+    <span class="srl-title-h2__number" doc-optional doc-editable="number">
+      1
+    </span>
+    <span class="srl-title-h2__text" doc-editable="text">
+      Title h2 Lorem ipsum dolor sit amet
+    </span>
+  </span>
+</h2>

package/livingdocs/Titles/title-h2/web.scss

@@ -0,0 +1,27 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+.srl-title-h2 {
+  > span {
+    display: flex;
+    flex-wrap: nowrap;
+    @each $breakpoint, $gutter in nswow.$grid-gutter {
+      $gap: map.get($gutter, gap);
+      $column-gap: map.get($gutter, column-gap);
+      @if not $column-gap {
+        $column-gap: $gap;
+      }
+      @if $column-gap {
+        @include nswow.grid-media($breakpoint) {
+          column-gap: nswow.system-size-unit($column-gap);
+        }
+      }
+    }
+  }
+
+  &__number {
+    flex: 0 0 nswow.system-size-unit($numberSize);
+  }
+}

package/livingdocs/Titles/title-h2/word.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Titles/title-h3/app.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Titles/title-h3/general.scss

@@ -0,0 +1,13 @@
+@use 'nswow';
+@use 'nswow/grid';
+
+$numberSize: 50;
+
+.srl-title-h3 {
+  color: nswow.colors-shade-800();
+
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-headline3(true);
+}

package/livingdocs/Titles/title-h3/ldd.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Titles/title-h3/pdf.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Titles/title-h3/print.scss

@@ -0,0 +1,34 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+$gap: map.get(nswow.$grid-gutter, print, gap);
+$column-gap: map.get(nswow.$grid-gutter, print, column-gap);
+@if not $column-gap {
+  $column-gap: $gap;
+}
+@if not $column-gap {
+  $column-gap: 0;
+}
+
+.srl-title-h3 {
+  > span {
+    position: relative;
+  }
+
+  &__number {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: nswow.system-size-unit($numberSize, in);
+  }
+
+  &__text {
+    display: block;
+    &:not(:first-child) {
+      margin-left: nswow.system-size-unit($numberSize + $column-gap, in);
+    }
+  }
+}

package/livingdocs/Titles/title-h3/title-h3.html

@@ -0,0 +1,26 @@
+<script type="ld-conf">
+  {
+  	"name": "title-h3",
+  	"label": "Title (h3)",
+  	"iconUrl": "https://mms-xbrl.s3.eu-central-1.amazonaws.com/design/svg/editor/icon-h3.min.svg",
+    "properties": [
+      "web-width",
+      "pdf-width"
+    ],
+  	"directives": {
+  		"number": {
+  			"recommendedMaxLength": 4
+  		}
+  	}
+  }
+</script>
+<h3 class="srl-title-h3 srl-article__grid srl-article__grid--indent">
+  <span class="srl-article__grid--inner">
+    <span class="srl-title-h3__number" doc-optional doc-editable="number">
+      1.1
+    </span>
+    <span class="srl-title-h3__text" doc-editable="text">
+      Title h3 Lorem ipsum dolor sit amet
+    </span>
+  </span>
+</h3>

package/livingdocs/Titles/title-h3/web.scss

@@ -0,0 +1,27 @@
+@use 'nswow';
+@use 'sass:map';
+
+$numberSize: 50;
+
+.srl-title-h3 {
+  > span {
+    display: flex;
+    flex-wrap: nowrap;
+    @each $breakpoint, $gutter in nswow.$grid-gutter {
+      $gap: map.get($gutter, gap);
+      $column-gap: map.get($gutter, column-gap);
+      @if not $column-gap {
+        $column-gap: $gap;
+      }
+      @if $column-gap {
+        @include nswow.grid-media($breakpoint) {
+          column-gap: nswow.system-size-unit($column-gap);
+        }
+      }
+    }
+  }
+
+  &__number {
+    flex: 0 0 nswow.system-size-unit($numberSize);
+  }
+}

package/livingdocs/Titles/title-h3/word.scss

@@ -0,0 +1 @@
+@use 'print';

package/livingdocs/Titles/title-h4/app.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Titles/title-h4/general.scss

@@ -0,0 +1,13 @@
+@use 'nswow';
+@use 'nswow/grid';
+
+$numberSize: 50;
+
+.srl-title-h4 {
+  color: nswow.colors-shade-800();
+
+  break-before: auto;
+  break-inside: avoid;
+  break-after: auto;
+  @include nswow.typography-headline4(true);
+}

package/livingdocs/Titles/title-h4/ldd.scss

@@ -0,0 +1 @@
+@use 'web';

package/livingdocs/Titles/title-h4/pdf.scss

@@ -0,0 +1 @@
+@use 'print';