@simple-reporting/base 1.0.2 → 1.0.4

package/livingdocs/020.Text/030.paragraph-strong/paragraph-strong.html

@@ -0,0 +1,8 @@
+<p class="srl-grid srl-paragraph-strong srl-linkable">
+  <span
+    class="srl-grid__inner srl-paragraph-strong__text"
+    doc-editable="transformable-text"
+  >
+    Lorem ipsum dolor sit amet?
+  </span>
+</p>

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

@@ -1,11 +1,40 @@
 @use 'srl';
+@use "sass:map";
+@use "assets/scss/margins";
+@use "spacing-variations";
+
+$quote-open: map.get(srl.$meta, quote, quote-open);
+$quote-close: map.get(srl.$meta, quote, quote-close);
+
 
 .srl-quote {
+  align-items: center;
   @include srl.spacer-margin-top(400);
 }
 
 .srl-quote__quote {
   @include srl.typography-quote();
+
+  &:before {
+    content: "#{$quote-open}";
+
+    .srl-hide-quote-characters & {
+      content: "";
+    }
+  }
+
+  &:after {
+    content: "#{$quote-close}";
+
+    .srl-hide-quote-characters & {
+      content: "";
+    }
+  }
+}
+
+.srl-quote__cite {
+  display: block;
+  @include srl.spacer-margin-top(200);
 }
 
 .srl-quote__name {

package/livingdocs/020.Text/060.quote-with-portrait/scss/pdf.scss

@@ -1,4 +1,10 @@
 @use 'srl';
+@use "assets/scss/margins";
+@use "spacing-variations";
+
+.srl-quote--with-image {
+  flex-direction: row;
+}
 
 .srl-quote--with-image.srl-wide-width {
   justify-content: space-between;
@@ -6,11 +12,13 @@
 
 .srl-quote__figure {
   .srl-quote--with-image & {
+    margin-left: srl.grid-calculate-pdf-col-start(3);
     margin-right: srl.grid-get-gutter-column-gap();
-    @include srl.grid-pdf-flex-col(2);
+    width: srl.grid-calculate-pdf-col-span-minus-one-gutter(2);
   }
 
   .srl-quote--with-image.srl-wide-width & {
+    margin-left: 0;
     margin-right: 0;
     @include srl.grid-pdf-flex-col(2);
   }
@@ -18,7 +26,7 @@
 
 .srl-quote__text {
   .srl-quote--with-image & {
-    @include srl.grid-pdf-flex-col(4);
+    width: srl.grid-calculate-pdf-col-span-minus-one-gutter(4);
   }
 
   .srl-quote--with-image.srl-wide-width & {

package/livingdocs/020.Text/080.footnote-item/scss/general.scss

@@ -1,8 +1,6 @@
 @use 'srl';
 @use "sass:map";
 
-$number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width));
-
 .srl-footnote:not(.srl-grid),
 .srl-footnote__item {
   display: flex;
@@ -10,19 +8,9 @@ $number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width));
   @include srl.typography-footnote-text();
 }
 
-.srl-footnote__key,
-.srl-footnote__number {
-  width: $number-width;
-}
-
 .srl-footnote__key {
   font-size: 60%;
   font-variant-numeric: tabular-nums;
   line-height: 1; // prevents normal text from getting too much height
   vertical-align: super;
 }
-
-.srl-footnote__text,
-.srl-footnote__text {
-  width: calc(100% - #{$number-width});
-}

package/livingdocs/020.Text/080.footnote-item/scss/pdf.scss

@@ -0,0 +1,14 @@
+@use 'srl';
+@use 'sass:map';
+
+$number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width-pdf));
+
+.srl-footnote__key,
+.srl-footnote__number {
+  width: $number-width;
+}
+
+.srl-footnote__text,
+.srl-footnote__text {
+  width: calc(100% - #{$number-width});
+}

package/livingdocs/020.Text/080.footnote-item/scss/web.scss

@@ -0,0 +1,14 @@
+@use 'srl';
+@use 'sass:map';
+
+$number-width: srl.system-size-unit(map.get(srl.$meta, footnote, number-width));
+
+.srl-footnote__key,
+.srl-footnote__number {
+  width: $number-width;
+}
+
+.srl-footnote__text,
+.srl-footnote__text {
+  width: calc(100% - #{$number-width});
+}

package/livingdocs/030.Lists/010.unordered-list/ld-conf.json

@@ -1,10 +1,14 @@
 {
   "name": "unordered-list",
   "label": "List (unordered)",
-  "properties": ["pdf-spacer"],
+  "properties": [
+    "pdf-spacer"
+  ],
   "directives": {
     "list": {
-      "allowedChildren": ["list-item"],
+      "allowedChildren": [
+        "list-item"
+      ],
       "defaultComponents": {
         "paragraph": "list-item"
       },

package/livingdocs/030.Lists/040.list-item/scss/general.scss

@@ -2,7 +2,7 @@
 @use "sass:map";
 
 $marker-width: srl.system-size-unit(map.get(srl.$meta, list, marker-width));
-$unordered-marker: "-";
+$unordered-marker: "–";
 $ordered-marker-after: ".";
 $alphanumeric-marker-after: ")";
 
@@ -11,8 +11,6 @@ $alphanumeric-marker-after: ")";
   @include srl.typography-list();
 
   &:before {
-    width: $marker-width;
-
     .srl-list-group--ul & {
       content: "#{$unordered-marker}";
     }
@@ -28,8 +26,4 @@ $alphanumeric-marker-after: ")";
       content: counter(alphanumeric-list, lower-alpha) $alphanumeric-marker-after;
     }
   }
-}
-
-.srl-list-group__item-text {
-  width: calc(100% -  #{$marker-width});
 }

package/livingdocs/030.Lists/040.list-item/scss/pdf.scss

@@ -0,0 +1,14 @@
+@use 'srl';
+@use "sass:map";
+
+$marker-width: srl.system-size-unit(map.get(srl.$meta, list, marker-width-pdf));
+
+.srl-list-group__item {
+  &:before {
+    width: $marker-width;
+  }
+}
+
+.srl-list-group__item-text {
+  width: calc(100% -  #{$marker-width});
+}

package/livingdocs/030.Lists/040.list-item/scss/web.scss

@@ -0,0 +1,14 @@
+@use 'srl';
+@use "sass:map";
+
+$marker-width: srl.system-size-unit(map.get(srl.$meta, list, marker-width));
+
+.srl-list-group__item {
+  &:before {
+    width: $marker-width;
+  }
+}
+
+.srl-list-group__item-text {
+  width: calc(100% -  #{$marker-width});
+}

package/livingdocs/040.Media/010.table/scss/general.scss

@@ -3,6 +3,7 @@
 
 $table-border-regular: map.get(srl.$meta, table, border, regular);
 $table-border-bold: map.get(srl.$meta, table, border, bold);
+
 @include srl.system-add-root-style(srl-table-border-regular-width, srl.system-size-unit(map.get($table-border-regular, width)));
 @include srl.system-add-root-style(srl-table-border-regular-width, srl.system-size-unit(map.get($table-border-regular, media, print, width)), print);
 @include srl.system-add-root-style(srl-table-border-bold-width, srl.system-size-unit(map.get($table-border-bold, width)));
@@ -71,19 +72,13 @@ td {
   /*
   Paddings
   */
-  &[class*="nolinetop"],
-  &[class*="nolinebottom"],
-  &[class*="nolineleft"],
-  &[class*="nolineright"] {
-    padding: 0;
-  }
 
   /*
   Borders
   */
   &[class*="head"] {
     border-bottom: (
-            var(--srl-table-border-regular-width)
+            var(--srl-table-border-bold-width)
             map.get($table-border-bold, style)
             srl.colors-get(map.get($table-border-bold, color))
     );
@@ -99,7 +94,7 @@ td {
 
   &[class*="blinetop"] {
     border-top: (
-            var(--srl-table-border-regular-width)
+            var(--srl-table-border-bold-width)
             map.get($table-border-bold, style)
             srl.colors-get(map.get($table-border-bold, color))
     );
@@ -129,7 +124,7 @@ td {
 
   &[class*="blinebottom"] {
     border-bottom: (
-            var(--srl-table-border-regular-width)
+            var(--srl-table-border-bold-width)
             map.get($table-border-bold, style)
             srl.colors-get(map.get($table-border-bold, color))
     );
@@ -157,7 +152,7 @@ td {
 
   &[class*="blineleft"] {
     border-left: (
-            var(--srl-table-border-regular-width)
+            var(--srl-table-border-bold-width)
             map.get($table-border-bold, style)
             srl.colors-get(map.get($table-border-bold, color))
     );
@@ -181,7 +176,7 @@ td {
 
   &[class*="blineright"] {
     border-right: (
-            var(--srl-table-border-regular-width)
+            var(--srl-table-border-bold-width)
             map.get($table-border-bold, style)
             srl.colors-get(map.get($table-border-bold, color))
     );
@@ -198,13 +193,13 @@ td {
   /*
   Indents
   */
-  &[class*="_ind"] {
+  &[class*="ind"] {
     &:first-child {
       padding-left: srl.spacer-get(200);
     }
   }
 
-  &[class*="_ind_ind"] {
+  &[class*="ind_ind"] {
     &:first-child {
       padding-left: srl.spacer-get(300);
     }
@@ -325,4 +320,9 @@ td {
       }
     }
   }
+}
+
+.note-link {
+  color: srl.colors-primary-1000();
+  text-decoration: none;
 }

package/livingdocs/040.Media/010.table/scss/pdf.scss

@@ -1,8 +1,35 @@
 @use 'srl';
 @use 'sass:map';
 
+.srl-table__container > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.srl-table-container {
+  @include srl.grid-pdf-flex-col(6);
+
+  .srl-wide-width & {
+    @include srl.grid-pdf-flex-col(8);
+  }
+}
+
+tr {
+  &[class*="pagebreak"] {
+    break-after: always;
+  }
+}
+
 th,
 td {
+  padding: (
+          srl.spacer-get(map.get(srl.$meta, table, padding, regular-pdf, top))
+          srl.spacer-get(map.get(srl.$meta, table, padding, regular-pdf, right))
+          srl.spacer-get(map.get(srl.$meta, table, padding, regular-pdf, bottom))
+          srl.spacer-get(map.get(srl.$meta, table, padding, regular-pdf, left))
+  );
+
   /*
   PDF only Font Sizes
   */

package/livingdocs/040.Media/020.image/image.html

@@ -1,13 +1,9 @@
 <figure class="srl-image">
-  <div
-    class="srl-image__alt-text"
-    doc-editable="alt-tag"
-    doc-optional
-    data-alt-text-source="alt"
-  >
-    Write the alt text here (optional, but recommended)
-  </div>
   <div class="srl-grid srl-grid--media">
+    <div class="srl-image__alt-text" doc-editable="alt-tag" doc-toggle="show-alt-text"
+          data-alt-text-source="alt">
+      Write the alt text here (optional, but recommended)
+    </div>
     <div
       class="srl-grid__inner srl-image__image-container srl-image__image-container--desktop"
     >

package/livingdocs/040.Media/020.image/ld-conf.json

@@ -3,6 +3,11 @@
   "label": "Image",
   "properties": ["width-all", "pdf-spacer"],
   "directives": {
+    "show-alt-text": {
+      "type": "toggle",
+      "label": "Show alt text",
+      "default": false
+    },
     "show-mobile-image": {
       "type": "toggle",
       "label": "Show mobile image",

package/livingdocs/040.Media/020.image/scss/editor.scss

@@ -1 +1,8 @@
-@use "web";
+@use "srl";
+@use "web";
+@use "assets/scss/placeholders";
+
+.srl-image__alt-text{
+  @include srl.typography-caption();
+  @extend %srl-regular-width;
+}

package/livingdocs/040.Media/020.image/scss/general.scss

@@ -11,7 +11,10 @@
   }
 }
 
+.srl-image__caption {
+  @include srl.spacer-margin-top(100);
+}
+
 .srl-image__caption-text {
   @include srl.typography-caption();
-  @extend %srl-regular-width;
 }

package/livingdocs/040.Media/020.image/scss/pdf.scss

@@ -23,4 +23,8 @@ $page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
     width: 210mm;
     min-width: 210mm;
   }
+}
+
+.srl-image__caption-text {
+  @include srl.grid-pdf-flex-col(6);
 }

package/livingdocs/040.Media/020.image/scss/web.scss

@@ -1 +1,20 @@
 @use "srl";
+@use "assets/scss/placeholders";
+
+.srl-image__caption-text {
+  @extend %srl-regular-width;
+}
+
+.srl-image__image-container--desktop {
+  display: none;
+
+  @include srl.grid-media-up(tablet-pt) {
+    display: block;
+  }
+}
+
+.srl-image__image-container--mobile {
+  @include srl.grid-media-up(tablet-pt) {
+    display: none;
+  }
+}

package/livingdocs/040.Media/030.video/scss/editor.scss

@@ -1 +1,6 @@
-@use "web";
+@use "web";
+
+.srl-video__thumbnail {
+  max-width: 192px;
+  max-height: 108px;
+}

package/livingdocs/040.Media/030.video/scss/general.scss

@@ -1,5 +1,17 @@
 @use 'srl';
 
-.srl-video {
-  @include srl.spacer-margin-top(400);
+.srl-video__video-link-container {
+  @include srl.spacer-margin-top(100);
 }
+
+.srl-video__video-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-decoration: none;
+  @include srl.typography-video-link();
+}
+
+.srl-video__video-link-text {
+  padding-left: srl.spacer-get(100);
+}

package/livingdocs/040.Media/030.video/scss/pdf.scss

@@ -0,0 +1,31 @@
+@use 'srl';
+@use 'sass:map';
+
+$page-margin-right: srl.system-size-unit(map.get(srl.$meta, pdf, margin, right));
+$page-margin-left: srl.system-size-unit(map.get(srl.$meta, pdf, margin, left));
+
+.srl-grid--media {
+  .srl-full-width & {
+    max-width: 210mm;
+    margin-left: calc(#{$page-margin-left} * -1);
+    margin-right: calc(#{$page-margin-right} * -1);
+  }
+}
+
+.srl-video__thumbnail {
+  @include srl.grid-pdf-flex-col(6);
+
+  .srl-wide-width & {
+    @include srl.grid-pdf-flex-col(8);
+  }
+
+  .srl-full-width & {
+    width: 210mm;
+    min-width: 210mm;
+  }
+}
+
+.srl-video__video-link-container {
+  @include srl.grid-pdf-flex-col(6);
+}
+

package/livingdocs/040.Media/030.video/scss/web.scss

@@ -7,6 +7,89 @@
   }
 }
 
-.srl-image__caption-text {
+.srl-video__inner {
+  position: relative;
+}
+
+.srl-video__video-container {
+  position: relative;
+  height: 0;
+  padding-bottom: 56.25%;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.srl-video__thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.srl-video__play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
+
+.srl-video__play-button {
+  width: 48px;
+  height: 48px;
+  background-color: srl.colors-white-1000();
+  cursor: pointer;
+  padding: 0;
+  border-radius: 50%;
+  transition: background-color 0.3s ease;
+  -webkit-appearance: none;
+  border: 1px solid srl.colors-green-1000();
+  color: srl.colors-green-1000();
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0s;
+  }
+
+  &:hover {
+    background-color: srl.colors-green-1000();
+    border-color: srl.colors-green-1000();
+    color: srl.colors-white-1000();
+  }
+
+  &:focus {
+    background-color: srl.colors-umbra-1000();
+    border-color: srl.colors-umbra-1000();
+    color: srl.colors-white-1000();
+  }
+}
+
+.srl-video__play-button-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.svg-play {
+  line-height: 0;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin-right: -2px;
+
+  .srl-video__video-link-container & {
+    width: 15px;
+    height: 15px;
+    margin-right: 0;
+  }
+}
+
+.srl-video__video-link-container {
   @extend %srl-regular-width;
 }

package/livingdocs/040.Media/030.video/video.html

@@ -1,43 +1,26 @@
-<div class="srl-video">
-  <div class="srl-grid srl-video__inner">
-    <div class="srl-video__thumbnail-container">
-      <div class="srl-video__thumbnail" doc-image="background"></div>
+<div class="srl-video" data-autoload="video">
+  <div class="srl-grid srl-grid--media">
+    <div class="srl-grid__inner srl-video__inner">
+      <div class="srl-video__video-container" doc-html="free-html"  data-remove-from-pdf="complete"></div>
+      <img class="srl-video__thumbnail" doc-image="video-thumbnail"></img>
       <div class="srl-video__play" data-remove-from-pdf="complete">
-        <button class="srl-button srl-button--round" type="button">
-          <div class="srl-button__inner">
-            <svg
-              class="svg svg-play"
-              viewBox="0 0 14 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M1.27735 0.583975C1.12392 0.481689 0.92665 0.472153 0.764071 0.559163C0.601492 0.646172 0.5 0.815602 0.5 1V17C0.5 17.1844 0.601492 17.3538 0.764071 17.4408C0.92665 17.5278 1.12392 17.5183 1.27735 17.416L13.2774 9.41603C13.4164 9.32329 13.5 9.16718 13.5 9C13.5 8.83282 13.4164 8.67671 13.2774 8.58397L1.27735 0.583975Z"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
+        <button class="srl-video__play-button" type="button">
+          <div class="srl-video__play-button-inner">
+            <svg class="svg svg-play" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5 3L19 12L5 21V3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </div>
         </button>
       </div>
     </div>
-    <div
-      doc-html="free-html"
-      class="srl-video__video-container"
-      data-remove-from-pdf="complete"
-    >
-      <div class="iframe-placeholder"></div>
-    </div>
+  </div>
+  <div class="srl-grid">
     <div
       class="srl-video__video-link-container"
       data-remove-from-web="complete"
       doc-toggle="showVideoLink"
     >
       <a class="srl-video__video-link" doc-link="href" target="_blank">
-        <span class="srl-video__video-link-text" doc-editable="link">
-          Link to the video in your report
-        </span>
         <span class="srl-video__video-link-icon">
           <svg
             class="svg svg-play"
@@ -53,6 +36,9 @@
             />
           </svg>
         </span>
+        <span class="srl-video__video-link-text" doc-editable="link">
+          Link to the video in your report
+        </span>
       </a>
     </div>
   </div>

package/livingdocs/090.Signatures/010.signature-container/scss/pdf.scss

@@ -0,0 +1,7 @@
+@use 'srl';
+@use 'sass:map';
+
+.srl-signature__content {
+  display: flex;
+  column-gap: srl.grid-get-gutter-column-gap();
+}

package/livingdocs/090.Signatures/020.signature-item/ld-conf.json

@@ -3,6 +3,12 @@
   "label": "Signature item",
   "allowedParents": ["signature-container"],
   "directives": {
+    "signature-item-name": {
+      "plainText": true
+    },
+    "signature-item-position": {
+      "plainText": true
+    },
     "image": {
       "imageRatios": ["1:1", "4:3", "16:9"],
       "allowOriginalRatio": true

package/livingdocs/090.Signatures/020.signature-item/scss/pdf.scss

@@ -0,0 +1,5 @@
+@use 'srl';
+
+.srl-signature__item {
+  max-width: calc(50% - (#{srl.grid-get-gutter-column-gap()} / 2));
+}