@simple-reporting/base 1.0.1 → 1.0.3

package/README.md

@@ -21,3 +21,17 @@ Run dev server:
 Build all required files.
 
 > npm run build
+
+## Important CLI commands
+
+| Command                                                  | Description                                                                    |
+|----------------------------------------------------------|--------------------------------------------------------------------------------|
+| `npm install`                                            | Installs all packages listed in `package.json`                                 |
+| `npm run dev`                                            | Starts the development environment including SCSS and JS watcher (Live Reload) |
+| `npm run build`                                          | Generates all CSS and JS files and ZIP packages in `.output`                   |
+| `npx @simple-reporting/base create component`            | Creates a component                                                            |
+| `npx @simple-reporting/base add components`              | Adds predefined components                                                     |
+| `npx @simple-reporting/base remove components`           | Removes one or more components                                                 |
+| `npx @simple-reporting/base add groups`                  | Adds predefined groups and their components                                    |
+| `npx @simple-reporting/base remove groups`               | Removes one or more groups                                                     |
+

package/dev/package.json

@@ -19,7 +19,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.1",
+    "@simple-reporting/base": "^1.0.3",
     "axios": "^1.9.0",
     "chalk": "^5.4.1",
     "exceljs": "^4.4.0",

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

@@ -83,7 +83,7 @@ td {
   */
   &[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 +99,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 +129,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 +157,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 +181,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))
     );

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

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-reporting/base",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Manage srl templates, build and publish",
   "bin": {
     "srl": "cli.js"

package/scripts/components.js

@@ -354,8 +354,8 @@ async function writeComponent(group, name) {
     await mkdirSync(join(folders.ld, group, name, 'scss'));
     await writeFileSync(
       join(folders.ld, group, name, `${name}.html`),
-      `<p class="srl-${name} srl-article__grid srl-article__grid--content">
-  <span class="srl-article__grid--inner" doc-editable="text">
+      `<p class="srl-grid srl-${name} srl-linkable">
+  <span class="srl-grid__inner srl-${name}__text" doc-editable="paragraph">
     Editable Text
   </span>
 </p>

package/srl/scss/typography/functions.scss

@@ -34,6 +34,13 @@
   @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-weight, unset);
 }
 
+@function get-font-color($typo) {
+  @if not map.has-key(variables.$typography, $typo) {
+    @error "Invalid typo for typography specified! Choose one of #{map.keys(variables.$typography)}";
+  }
+  @return var(--#{variables.$variable-prefix}typo-#{$typo}-font-color, unset);
+}
+
 @function get-letter-spacing($typo) {
   @return var(
     --#{variables.$variable-prefix}typo-#{$typo}-letter-spacing,

package/srl/scss/typography/mixins.scss

@@ -2,6 +2,7 @@
 @use 'functions';
 @use '../system';
 @use '../grid';
+@use '../colors';
 @use 'sass:map';
 @use 'sass:string';
 
@@ -25,6 +26,10 @@
   }
   font-weight: functions.get-font-weight($typo);
 
+  @if map.has-key($map, color) {
+    color: functions.get-font-color($typo);
+  }
+
   @if map.has-key($map, letter-spacing) {
     letter-spacing: functions.get-letter-spacing($typo);
   }
@@ -87,6 +92,13 @@
       map.get($defaults, font-weight)
     );
 
+    @if (map.has-key($map, color)) {
+      @include system.add-root-style(
+                      #{variables.$variable-prefix}typo-#{$typo}-font-color,
+                      colors.get(map.get($defaults, color))
+      );
+    }
+
     @if (map.has-key($map, letter-spacing)) {
       @include system.add-root-style(
         #{variables.$variable-prefix}typo-#{$typo}-letter-spacing,
@@ -269,6 +281,10 @@
   --#{variables.$variable-prefix}typo-#{$typo}-font-weight: #{$value};
 }
 
+@mixin set-font-color($typo, $value) {
+  --#{variables.$variable-prefix}typo-#{$typo}-font-color: #{$value};
+}
+
 @mixin set-letter-spacing($typo, $value) {
   --#{variables.$variable-prefix}typo-#{$typo}-letter-spacing: #{$value};
 }