Split appearance

app/assets/stylesheets/pageflow/ui/input/color_input.scss

@@ -1,6 +1,5 @@
 .color_input {
   .color_picker-field {
-    color: var(--placeholder-color, transparent);
     box-sizing: border-box;
     width: 100%;
   }

entry_types/scrolled/config/locales/de.yml

@@ -1208,12 +1208,13 @@ de:
         motif_area_info_text: Markiere den wichtigsten Teil des Hintergrunds, der beim Erreichen des Abschnitts sichtbar und nicht von anderen Elementen überdeckt sein soll.
         attributes:
           appearance:
-            inline_help: Diese Einstellung legt fest wie die scrollenden Vordergrund-Ebene vom Hintergrund abgehoben werden soll. Bei der Einstellung "Karte" wird der Vordergrund mit einer Fläche mit abgerundeten Ecken hinterlegt, bei "Schatten" mit einem hellen oder dunklen Farbverlauf.
+            inline_help: Legt fest, wie der Vordergrund vom Hintergrund abgehoben wird. "Schatten" fügt einen Farbverlauf hinter dem Text hinzu. "Karte" platziert den Inhalt auf einer abgerundeten Fläche. "Split" bedeckt die halbe Viewport-Breite mit einem Overlay für den Inhalt.
             label: Abblendung
             values:
               cards: Karte
               shadow: Schatten
               transparent: Keine
+              split: Split
           atmoAudioFileId:
             inline_help: Wähle eine Audio-Datei, die im Hintergrund abgespielt werden soll. Wenn diese Atmo auch in nachfolgenden Abschnitten nahtlos weiterspielen soll, wähle für diese Abschnitte die selbe Atmo aus.
             label: Atmo-Audio
@@ -1272,8 +1273,19 @@ de:
               coverViewport: Viewport überdecken
               coverSection: Abschnitt überdecken
           cardSurfaceColor:
+            inline_help: Hintergrundfarbe der Karte. Verwende eine teiltransparente Farbe, um den Hintergrund durchscheinen zu lassen und Hintergrundunschärfe zu aktivieren.
             label: Kartenhintergrundfarbe
             auto: "(Automatisch)"
+            auto_color: "Automatische Farbe"
+          splitOverlayColor:
+            inline_help: Farbe des Overlays hinter dem Inhalt.
+            label: Overlay-Farbe
+            auto: "(Automatisch)"
+            auto_color: "Automatische Farbe"
+          overlayBackdropBlur:
+            inline_help: Stärke der Unschärfe, die auf den Hintergrund hinter dem Overlay angewendet wird.
+            label: Hintergrundunschärfe
+            inline_help_disabled: Nur verfügbar, wenn die Overlay-Farbe Transparenz hat.
           sectionPaddings:
             label: Innenabstände oben/unten
         tabs:

entry_types/scrolled/config/locales/en.yml

@@ -1192,12 +1192,13 @@ en:
         motif_area_info_text: Mark the most important part of the backdrop that should be visible and unobstructed when reaching the section.
         attributes:
           appearance:
-            inline_help: This setting controls how the scrolling foreground should get dimmed to increase contrast from the background. The option "Cards" adds a box with rounded corners to the foreground, with "Shadow" you can add a light or dark shadow to increase readability.
+            inline_help: Controls how the foreground is visually separated from the background. "Shadow" adds a gradient behind text. "Cards" places content on a rounded box. "Split" covers half the viewport width with an overlay for the content.
             label: Text-Background
             values:
               cards: Card
               shadow: Shadow
               transparent: Transparent
+              split: Split
           atmoAudioFileId:
             inline_help: Choose an audio file, that shall be played in the background. If you want this audio to continue playing on following sections, just choose the same file again there.
             label: Atmo Audio
@@ -1256,8 +1257,19 @@ en:
               coverViewport: Cover viewport
               coverSection: Cover section
           cardSurfaceColor:
+            inline_help: Background color of the card. Use a translucent color to let the backdrop shine through and enable background blur.
             label: Cards background color
             auto: "(Auto)"
+            auto_color: "Auto color"
+          splitOverlayColor:
+            inline_help: Color of the overlay behind the content.
+            label: Overlay color
+            auto: "(Auto)"
+            auto_color: "Auto color"
+          overlayBackdropBlur:
+            inline_help: Amount of blur applied to the backdrop behind the overlay.
+            label: Background blur
+            inline_help_disabled: Only available when overlay color has transparency.
           sectionPaddings:
             label: "Top/bottom padding"
         tabs:

entry_types/scrolled/package/spec/contentElements/heading/Heading-spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {Heading} from 'contentElements/heading/Heading';
+
+import {renderInContentElement} from 'pageflow-scrolled/testHelpers';
+import {contentElementWidths} from 'pageflow-scrolled/frontend';
+
+import styles from 'contentElements/heading/Heading.module.css';
+
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Heading', () => {
+  function renderHeading({configuration, width, sectionProps} = {}) {
+    return renderInContentElement(
+      <Heading
+        configuration={{
+          value: [{type: 'heading', children: [{text: 'Test'}]}],
+          ...configuration
+        }}
+        contentElementId={5}
+        contentElementWidth={width || contentElementWidths.md}
+        sectionProps={{sectionIndex: 1, ...sectionProps}}
+      />, {
+        editorState: {isEditable: false}
+      }
+    );
+  }
+
+  it('centers heading with width lg when constrainContentWidth is set', () => {
+    const {container} = renderHeading({
+      width: contentElementWidths.lg,
+      sectionProps: {constrainContentWidth: true}
+    });
+
+    expect(container.querySelector('header')).toHaveClass(styles.centerConstrained);
+  });
+
+  it('does not center heading with width xl when constrainContentWidth is set', () => {
+    const {container} = renderHeading({
+      width: contentElementWidths.xl,
+      sectionProps: {constrainContentWidth: true}
+    });
+
+    expect(container.querySelector('header')).not.toHaveClass(styles.centerConstrained);
+  });
+});

entry_types/scrolled/package/spec/editor/models/ScrolledEntry/getUsedSectionBackgroundColors-spec.js

@@ -50,6 +50,29 @@ describe('ScrolledEntry', () => {
       expect(colors).toEqual(['#400', '#500', '#040']);
     });
 
+    it('includes splitOverlayColor of split sections', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            sections: [
+              {
+                configuration: {
+                  appearance: 'split',
+                  splitOverlayColor: '#600'
+                }
+              }
+            ]
+          })
+        }
+      );
+
+      const colors = entry.getUsedSectionBackgroundColors();
+
+      expect(colors).toEqual(['#600']);
+    });
+
     it('ignores blank colors', () => {
       const entry = factories.entry(
         ScrolledEntry,

entry_types/scrolled/package/spec/frontend/features/constrainContentWidth-spec.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import {renderEntry, usePageObjects} from 'support/pageObjects';
+import '@testing-library/jest-dom/extend-expect';
+
+import {api} from 'frontend/api';
+
+import {useMotifAreaState} from 'frontend/v1/useMotifAreaState';
+jest.mock('frontend/v1/useMotifAreaState');
+
+describe('constrainContentWidth', () => {
+  usePageObjects();
+
+  beforeEach(() => {
+    api.contentElementTypes.register('probe', {
+      component: function Probe({sectionProps}) {
+        return (
+          <div data-testid="probe"
+               data-constrain-content-width={sectionProps.constrainContentWidth ? 'true' : 'false'} />
+        );
+      }
+    });
+  });
+
+  it('applies class for split appearance', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6, configuration: {
+          appearance: 'split'
+        }}],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).hasConstrainedContentWidth()).toBe(true);
+  });
+
+  it('does not apply class for shadow appearance', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6, configuration: {
+          appearance: 'shadow'
+        }}],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).hasConstrainedContentWidth()).toBe(false);
+  });
+
+  it('applies class for split appearance with center layout', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6, configuration: {
+          appearance: 'split',
+          layout: 'center'
+        }}],
+        contentElements: [{sectionId: 5, typeName: 'withTestId',
+                           configuration: {testId: 1}}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).hasConstrainedContentWidth()).toBe(true);
+  });
+
+  it('does not apply class when content is padded', () => {
+    useMotifAreaState.mockContentPadded();
+
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6, configuration: {
+          appearance: 'split'
+        }}],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).hasConstrainedContentWidth()).toBe(false);
+  });
+
+  it('passes constrainContentWidth to content elements via sectionProps', () => {
+    const {getByTestId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6, configuration: {
+          appearance: 'split'
+        }}],
+        contentElements: [{sectionId: 5, typeName: 'probe'}]
+      }
+    });
+
+    expect(getByTestId('probe')).toHaveAttribute('data-constrain-content-width', 'true');
+  });
+
+  it('does not pass constrainContentWidth for shadow appearance', () => {
+    const {getByTestId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6, configuration: {
+          appearance: 'shadow'
+        }}],
+        contentElements: [{sectionId: 5, typeName: 'probe'}]
+      }
+    });
+
+    expect(getByTestId('probe')).toHaveAttribute('data-constrain-content-width', 'false');
+  });
+});

entry_types/scrolled/package/spec/frontend/features/sectionAppearanceScopeClass-spec.js

@@ -34,4 +34,15 @@ describe('section appearance scope class', () => {
 
     expect(getSectionByPermaId(6).el).toHaveClass('scope-transparentAppearanceSection');
   });
+
+  it('applies scope class for split appearance', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6, configuration: {appearance: 'split'}}],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    expect(getSectionByPermaId(6).el).toHaveClass('scope-splitAppearanceSection');
+  });
 });

entry_types/scrolled/package/spec/frontend/foregroundBoxes/CardBoxWrapper-spec.js

@@ -50,6 +50,84 @@ describe('CardBoxWrapper', () => {
     });
   });
 
+  describe('backdrop blur', () => {
+    it('applies blur class when overlayBackdropBlur is set and color is translucent', () => {
+      const {container} = render(
+        <CardBoxWrapper cardSurfaceColor="#ff000080"
+                        overlayBackdropBlur={50}>
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild).toHaveClass(cardBoxStyles.blur);
+    });
+
+    it('does not apply blur class when color is opaque', () => {
+      const {container} = render(
+        <CardBoxWrapper cardSurfaceColor="#ff0000"
+                        overlayBackdropBlur={50}>
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild).not.toHaveClass(cardBoxStyles.blur);
+    });
+
+    it('does not apply blur when everything is default', () => {
+      const {container} = render(
+        <CardBoxWrapper>
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild).not.toHaveClass(cardBoxStyles.blur);
+    });
+
+    it('applies blur class by default for translucent color', () => {
+      const {container} = render(
+        <CardBoxWrapper cardSurfaceColor="#ff000080">
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild).toHaveClass(cardBoxStyles.blur);
+    });
+
+    it('sets backdrop blur CSS variable by default for translucent color', () => {
+      const {container} = render(
+        <CardBoxWrapper cardSurfaceColor="#ff000080">
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild.style.getPropertyValue('--card-backdrop-blur'))
+        .toBe('blur(10px)');
+    });
+
+    it('does not apply blur class when overlayBackdropBlur is 0', () => {
+      const {container} = render(
+        <CardBoxWrapper cardSurfaceColor="#ff000080"
+                        overlayBackdropBlur={0}>
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild).not.toHaveClass(cardBoxStyles.blur);
+    });
+
+    it('sets backdrop blur CSS variable when color is translucent', () => {
+      const {container} = render(
+        <CardBoxWrapper cardSurfaceColor="#ff000080"
+                        overlayBackdropBlur={50}>
+          Content
+        </CardBoxWrapper>
+      );
+
+      expect(container.firstChild.style.getPropertyValue('--card-backdrop-blur'))
+        .toBe('blur(5px)');
+    });
+  });
+
   describe('cardEnd padding', () => {
     it('does not have cardEndPadding class when lastMarginBottom is set', () => {
       const {container} = render(