Merge pull request #2182 from tf/info-table

Add info table content element
codevise · Dec 4, 2024 · 8293c22 · 8293c22
2 parents 59534cf + 1268139
commit 8293c22
Show file tree

Hide file tree

Showing 27 changed files with 2,136 additions and 12 deletions.
diff --git a/entry_types/scrolled/config/locales/new/info_table.de.yml b/entry_types/scrolled/config/locales/new/info_table.de.yml
@@ -0,0 +1,50 @@
+de:
+  pageflow:
+    info_table_content_element:
+      feature_name: Info-Tabelle Element
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        infoTable:
+          description: Zweispaltige Tabelle mit Name/Wert-Paaren.
+          name: Info-Tabelle
+          tabs:
+            general: Info-Tabelle
+          help_texts:
+            shortcuts: |-
+              <dl class="shortcuts">
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Füge eine neue Tabellenzeile hinzu.
+                  </span>
+                </dt>
+                <dd>
+                  Tabellenzeile einfügen
+                </dd>
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Shift</kbd> + <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Füge eine neue Zeile innerhalb einer Tabellenzelle ein.
+                  </span>
+                </dt>
+                <dd>
+                  Zeilenumbruch einfügen
+                </dd>
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Alt</kbd> + <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Füge potentielle Zeilenumbruchspunkte in lange Worte ein,
+                    um Silbentrennung zu ermöglichen.
+                  </span>
+                </dt>
+                <dd>
+                  Bedingten Trennstrich einfügen
+                </dd>
+              </dl>
diff --git a/entry_types/scrolled/config/locales/new/info_table.en.yml b/entry_types/scrolled/config/locales/new/info_table.en.yml
@@ -0,0 +1,50 @@
+en:
+  pageflow:
+    info_table_content_element:
+      feature_name: Info table element
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        infoTable:
+          description: Two-column table for label value pairs.
+          name: Info Table
+          tabs:
+            general: Info Table
+          help_texts:
+            shortcuts: |-
+              <dl class="shortcuts">
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Add a new row to the table..
+                  </span>
+                </dt>
+                <dd>
+                  Insert table row
+                </dd>
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Shift</kbd> + <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Insert a new line without beginning a new paragraph.
+                  </span>
+                </dt>
+                <dd>
+                  Insert soft break/new line
+                </dd>
+                <dt>
+                  <span class="shortcut">
+                    <kbd>Alt</kbd> + <kbd>Enter</kbd>
+                  </span>
+                  <span class="inline_help">
+                    Specify potential line break points within long words
+                    to control hyphenation.
+                  </span>
+                </dt>
+                <dd>
+                  Insert soft hyphen
+                </dd>
+              </dl>
diff --git a/entry_types/scrolled/doc/creating_themes/custom_typography.md b/entry_types/scrolled/doc/creating_themes/custom_typography.md
@@ -88,6 +88,9 @@ The following rule names are supported:
 | `hotspot_tooltip_title` | Applies to the title in hotspot tooltips. |
 | `hotspot_tooltip_description` | Applies to the description text in hotspot tooltips. |
 | `hotspot_tooltip_link` | Applies to link buttons in hotspot tooltips. |
+| `info_table_label` | Applies to first column of info tables. |
+| `info_table_value` | Applies to second column of info tables. |
+
 
 ### Responsive Breakpoints
 

diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
@@ -41,6 +41,7 @@ def configure(config)
         c.features.register('scrolled_entry_fragment_caching')
         c.features.register('backdrop_content_elements')
         c.features.register('external_links_options')
+        c.features.register('info_table_content_element')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',

diff --git a/entry_types/scrolled/package/spec/frontend/EditableTable-spec.js b/entry_types/scrolled/package/spec/frontend/EditableTable-spec.js
@@ -0,0 +1,149 @@
+import React from 'react';
+
+import {EditableTable} from 'frontend';
+
+import {render, screen} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'
+
+describe('EditableTable', () => {
+  it('renders class name on table', () => {
+    render(<EditableTable value={[]}
+                          className="some-class" />);
+
+    expect(screen.getByRole('table')).toHaveClass('some-class');
+  });
+
+  it('renders table with label and value typography classes on cells', () => {
+    const value = [
+      {
+        type: 'row',
+        children: [
+          {
+            type: 'label',
+            children: [
+              {text: 'Name'}
+            ]
+          },
+          {
+            type: 'value',
+            children: [
+              {text: 'Jane'}
+            ]
+          }
+        ]
+      }
+    ];
+
+    render(<EditableTable value={value}
+                          labelScaleCategory="infoTableLabel"
+                          valueScaleCategory="infoTableValue" />);
+
+    expect(
+      screen.getByRole('cell', {name: 'Name'}).querySelector('.typography-infoTableLabel')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('cell', {name: 'Jane'}).querySelector('.typography-infoTableValue')
+    ).toBeInTheDocument();
+  });
+
+  it('renders links', () => {
+    const value = [{
+      type: 'row',
+      children: [
+        {
+          type: 'label',
+          children: [
+            {text: ''}
+          ]
+        },
+        {
+          type: 'value',
+          children: [
+            {text: 'Find more '},
+            {
+              type: 'link',
+              href: 'https://example.com',
+              children: [
+                {text: 'here'}
+              ]
+            },
+            {text: '.'}
+          ]
+        }
+      ]
+    }];
+
+    const {getByRole} = render(<EditableTable value={value} />);
+
+    expect(getByRole('link')).toHaveTextContent('here')
+    expect(getByRole('link')).toHaveAttribute('href', 'https://example.com')
+    expect(getByRole('link')).toHaveClass('typography-contentLink')
+    expect(getByRole('link')).not.toHaveAttribute('target')
+    expect(getByRole('link')).not.toHaveAttribute('rel')
+  });
+
+  it('supports rendering links with target blank', () => {
+    const value = [{
+      type: 'row',
+      children: [
+        {
+          type: 'label',
+          children: [
+            {text: ''}
+          ]
+        },
+        {
+          type: 'value',
+          children: [
+            {text: 'Find more '},
+            {
+              type: 'link',
+              href: 'https://example.com',
+              openInNewTab: true,
+              children: [
+                {text: 'here'}
+              ]
+            },
+            {text: '.'}
+          ]
+        }
+      ]
+    }];
+
+    const {getByRole} = render(<EditableTable value={value} />);
+
+    expect(getByRole('link')).toHaveTextContent('here')
+    expect(getByRole('link')).toHaveAttribute('target', '_blank')
+    expect(getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer')
+  });
+
+  it('supports text formatting', () => {
+    const value = [{
+      type: 'row',
+      children: [
+        {
+          type: 'label',
+          children: [
+            {text: ''}
+          ]
+        },
+        {
+          type: 'value',
+          children: [
+            {text: 'x', bold: true},
+            {text: '3', sup: true},
+            {text: ' and '},
+            {text: 'CO'},
+            {text: '2', sub: true}
+          ]
+        }
+      ]
+    }];
+
+    const {container} = render(<EditableTable value={value} />);
+
+    expect(container.querySelector('strong')).toHaveTextContent('x')
+    expect(container.querySelector('sup')).toHaveTextContent('3')
+    expect(container.querySelector('sub')).toHaveTextContent('2')
+  });
+});