Figrure caption variants and text inline rights backdrops

Gemfile

@@ -34,3 +34,7 @@ gem 'capybara-chromedriver-logger', git: 'https://github.com/codevise/capybara-c
 
 # See https://github.com/charkost/prosopite/pull/79
 gem 'prosopite', git: 'https://github.com/tf/prosopite', branch: 'location-backtrace-cleaner'
+
+# See https://github.com/rack/rackup/issues/22
+# Remove once https://github.com/puma/puma/pull/3532 is merged
+gem 'rackup', '1.0.0', require: false

entry_types/scrolled/config/locales/new/caption_settings.de.yml

@@ -0,0 +1,14 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_element_text_inline_file_rights_attributes:
+        showTextInlineFileRightsBackdrop:
+          label: "Abblendung hinter Rechteangabe"
+          inline_help: "Lesbarkeit des Texts auf unruhigen Hintergründen sicherstellen."
+          inline_help_disabled: "Steht nur zur Verfügung, wenn Rechteangaben am Element angezeigt werden."
+      common_content_element_attributes:
+        captionVariant:
+          label: Beschriftungsvariante
+          inline_help: Ändere die Darstellung der Beschriftung unterhalb des Element.
+          inline_help_disabled: Füge eine Beschriftung unterhalb des Elements hinzu, um zwischen Varianten zu wählen.
+          blank: "(Standard)"

entry_types/scrolled/config/locales/new/caption_settings.en.yml

@@ -0,0 +1,14 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_element_text_inline_file_rights_attributes:
+        showTextInlineFileRightsBackdrop:
+          label: "Backdrop behind inline file rights"
+          inline_help: "Improve readability on busy backgrounds."
+          inline_help_disabled: "Only available when rights texts are displayed at the element."
+      common_content_element_attributes:
+        captionVariant:
+          label: Caption Variant
+          inline_help: Switch between different looks of the caption below the element.
+          inline_help_disabled: Add a caption below the element to switch between different looks.
+          blank: "(Default)"

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

@@ -2915,13 +2915,13 @@ describe('ScrolledEntry', () => {
       );
       const contentElement = entry.contentElements.get(5);
 
-      const [values, translationKeys] = entry.getContentElementVariants({contentElement});
+      const [values, texts] = entry.getContentElementVariants({contentElement});
 
       expect(values).toEqual([]);
-      expect(translationKeys).toEqual([]);
+      expect(texts).toEqual([]);
     });
 
-    it('selects typography rules based on content element type name', () => {
+    it('selects property scopes based on content element type name', () => {
       editor.contentElementTypes.register('someElement', {});
 
       const entry = factories.entry(
@@ -3046,6 +3046,129 @@ describe('ScrolledEntry', () => {
     });
   });
 
+  describe('getComponentVariants', () => {
+    it('returns empty arrays by default', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed()
+        }
+      );
+
+      const [values, texts] = entry.getComponentVariants({name: 'figureCaption'});
+
+      expect(values).toEqual([]);
+      expect(texts).toEqual([]);
+    });
+
+    it('selects property scopes based on name', () => {
+      const entry = factories.entry(
+        ScrolledEntry,
+        {},
+        {
+          entryTypeSeed: normalizeSeed({
+            themeOptions: {
+              properties: {
+                'figureCaption-blue': {
+                  surface_color: 'blue'
+                },
+                'figureCaption-green': {
+                  surface_color: 'green'
+                }
+              }
+            }
+          })
+        }
+      );
+
+      const [values] = entry.getComponentVariants({name: 'figureCaption'});
+
+      expect(values).toEqual(['blue', 'green']);
+    });
+
+    describe('with shared translations', () => {
+      const commonPrefix = 'pageflow_scrolled.editor.component_variants'
+
+      useFakeTranslations({
+        [`${commonPrefix}.figureCaption-blue`]: 'Blue',
+        [`${commonPrefix}.figureCaption-green`]: 'Green'
+      });
+
+      it('returns translated display names', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {
+            metadata: {theme_name: 'custom'}
+          },
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  'figureCaption-blue': {
+                    surface_color: 'blue'
+                  },
+                  'figureCaption-green': {
+                    surface_color: 'green'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const [, texts] = entry.getComponentVariants({name: 'figureCaption'});
+
+        expect(texts).toEqual([
+          'Blue',
+          'Green'
+        ]);
+      });
+    });
+
+    describe('with theme specific translations', () => {
+      const commonPrefix = 'pageflow_scrolled.editor.component_variants'
+      const themePrefix = `pageflow_scrolled.editor.themes.custom`
+
+      useFakeTranslations({
+        [`${commonPrefix}.figureCaption-blue`]: 'Blue',
+        [`${commonPrefix}.figureCaption-green`]: 'Green',
+        [`${themePrefix}.component_variants.figureCaption-blue`]: 'Custom Blue',
+        [`${themePrefix}.component_variants.figureCaption-green`]: 'Custom Green'
+      });
+
+      it('prefers theme specific translations', () => {
+        const entry = factories.entry(
+          ScrolledEntry,
+          {
+            metadata: {theme_name: 'custom'}
+          },
+          {
+            entryTypeSeed: normalizeSeed({
+              themeOptions: {
+                properties: {
+                  'figureCaption-blue': {
+                    surface_color: 'blue'
+                  },
+                  'figureCaption-green': {
+                    surface_color: 'green'
+                  }
+                }
+              }
+            })
+          }
+        );
+
+        const [, texts] = entry.getComponentVariants({name: 'figureCaption'});
+
+        expect(texts).toEqual([
+          'Custom Blue',
+          'Custom Green'
+        ]);
+      });
+    });
+  });
+
   describe('supportsSectionWidths', () => {
     it('returns false by default', () => {
       const entry = factories.entry(

entry_types/scrolled/package/spec/frontend/ContentElementFigure-spec.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect'
+
+import {renderInContentElement} from 'support';
+
+import {ContentElementFigure} from 'frontend/ContentElementFigure';
+
+describe('ContentElementFigure', () => {
+  it('just renders children by default', () => {
+    const {queryByTestId} =
+      renderInContentElement(
+        <ContentElementFigure configuration={{}}><div data-testid="content" /></ContentElementFigure>,
+        {
+          seed: {}
+        }
+      );
+
+    expect(queryByTestId('content')).not.toBeNull();
+  });
+
+  it('applies variant scope', () => {
+    const configuration = {
+      caption: [{
+        type: 'paragraph',
+        children: [{ text: 'Some caption text' }],
+      }],
+      captionVariant: 'invert'
+    };
+
+    const {container} =
+      renderInContentElement(
+        <ContentElementFigure configuration={configuration} />,
+        {
+          seed: {}
+        }
+      );
+
+    expect(container.querySelector('figcaption')).toHaveClass('scope-figureCaption-invert');
+  });
+
+  it('sets hasCaption to true in transient state on mount', () => {
+    const configuration = {
+      caption: [{
+        type: 'paragraph',
+        children: [{ text: 'Some caption text' }],
+      }],
+      captionVariant: 'invert'
+    };
+    const setTransientState = jest.fn();
+
+    renderInContentElement(
+      <ContentElementFigure configuration={configuration} />,
+      {
+        seed: {},
+        editorState: {isEditable: true, setTransientState}
+      }
+    );
+
+    expect(setTransientState).toHaveBeenCalledWith({hasCaption: true})
+  });
+
+  it('sets hasCaption to false in transient state on unmount', () => {
+    const configuration = {
+      caption: [{
+        type: 'paragraph',
+        children: [{ text: 'Some caption text' }],
+      }],
+      captionVariant: 'invert'
+    };
+    const setTransientState = jest.fn();
+
+    const {unmount} = renderInContentElement(
+      <ContentElementFigure configuration={configuration} />,
+      {
+        seed: {},
+        editorState: {isEditable: true, setTransientState}
+      }
+    );
+    unmount();
+
+    expect(setTransientState).toHaveBeenCalledWith({hasCaption: false})
+  });
+
+  it('does not render transient state component outside of editor', () => {
+    const configuration = {
+      caption: [{
+        type: 'paragraph',
+        children: [{ text: 'Some caption text' }],
+      }],
+      captionVariant: 'invert'
+    };
+    const setTransientState = jest.fn();
+
+    renderInContentElement(
+      <ContentElementFigure configuration={configuration} />,
+      {
+        seed: {},
+        editorState: {isEditable: false, setTransientState}
+      }
+    );
+
+    expect(setTransientState).not.toHaveBeenCalled();
+  });
+});

entry_types/scrolled/package/spec/frontend/Figure-spec.js

@@ -39,4 +39,17 @@ describe('Figure', () => {
     expect(queryByRole('figure')).toHaveTextContent('Some caption text');
     expect(queryByTestId('content')).not.toBeNull();
   });
+
+  it('applies variant scope', () => {
+    const value = [{
+      type: 'paragraph',
+      children: [{ text: 'Some caption text' }],
+    }];
+    const {container} =
+      renderInEntry(<Figure caption={value} variant="invert"><div data-testid="content" /></Figure>, {
+        seed: {}
+      });
+
+    expect(container.querySelector('figcaption')).toHaveClass('scope-figureCaption-invert');
+  });
 });

entry_types/scrolled/package/spec/frontend/InlineFileRights-spec.js

@@ -45,10 +45,14 @@ describe('InlineFileRights', () => {
 
   it('passes props to widget', () => {
     api.widgetTypes.register('inlineFileRightsWithProps', {
-      component: function ({children, context, playerControlsFadedOut, playerControlsStandAlone}) {
+      component: function ({
+        children,
+        context, playerControlsFadedOut, playerControlsStandAlone,
+        configuration
+      }) {
         return (
           <div>
-            {context} {playerControlsFadedOut.toString()} {playerControlsStandAlone.toString()}
+            {context} {playerControlsFadedOut.toString()} {playerControlsStandAlone.toString()} {configuration.some}
           </div>
         )
       }
@@ -64,6 +68,7 @@ describe('InlineFileRights', () => {
     const {container} = renderInEntry(
       <InlineFileRights items={[{file}]}
                         context="playerControls"
+                        configuration={{some: 'customOption'}}
                         playerControlsFadedOut={false}
                         playerControlsStandAlone={true} />,
       {
@@ -73,7 +78,7 @@ describe('InlineFileRights', () => {
       }
     );
 
-    expect(container).toHaveTextContent('playerControls false true');
+    expect(container).toHaveTextContent('playerControls false true customOption');
   });
 
   it('renders items for rights', () => {