Add free-styled styling for WYSIWYG tables. DDFFORM-98

danskernesdigitalebibliotek · Dec 19, 2023 · 2250fef · 2250fef
1 parent fba0de5
commit 2250fef
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/src/stories/Library/rich-text/RichText.tsx b/src/stories/Library/rich-text/RichText.tsx
@@ -45,6 +45,26 @@ export const RichText = () => {
         </li>
         <li>Bagginses?</li>
       </ol>
+      <div className="rich-table">
+        <table>
+          <thead>
+            <tr>
+              <th>Entry Header 1</th>
+              <th>Entry Header 2</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Entry First Line 1</td>
+              <td>Entry First Line 2</td>
+            </tr>
+            <tr>
+              <td>Entry Line 1</td>
+              <td>Entry Line 2</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };
diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss
@@ -3,8 +3,6 @@
 // we will target HTML tags instead.
 .rich-text {
   @include typography($typo__rich-text-body);
-
-  // Setting a max-width to increase readability for sentences.
   @include layout-container($layout__max-width--text);
 
   a {
@@ -31,6 +29,7 @@
     position: relative;
     padding-left: $_dash-width + $s-md;
     padding-bottom: $s-lg;
+    box-sizing: border-box;
 
     &::before {
       position: absolute;
@@ -74,4 +73,44 @@
       content: counter(list) ".";
     }
   }
+
+  table {
+    width: 100%;
+
+    // CKEditor also *can* set inline widths and heights.
+    // We want to disable this.
+    &[style] {
+      min-width: 100% !important;
+      height: auto !important;
+    }
+  }
+
+  table,
+  th,
+  td {
+    border-collapse: collapse;
+    border: 0;
+    padding: $s-xs $s-sm;
+    box-sizing: border-box;
+  }
+
+  thead {
+    background-color: $color__global-tertiary-2;
+    color: $color__text-primary-white;
+  }
+
+  tbody {
+    tr {
+      background-color: $color__global-primary;
+    }
+
+    tr:nth-child(2n) {
+      background-color: $color__global-secondary;
+    }
+  }
+
+  th {
+    text-align: left;
+    font-weight: bold;
+  }
 }