Merge pull request #2186 from tf/position-side

Content element position "side"

entry_types/scrolled/config/locales/de.yml

@@ -115,20 +115,13 @@ de:
               Position, um das Element vollständig betrachten zu
               können. Kleineren Elementen kann so mehr Gewicht
               verliehen werden.
-            sticky: |-
-              Beim Scrollen begleitend neben dem Text
-              stehenbleiben. In der Mobil-Darstellung werden Sticky
-              Elemente automatisch im Text verankert. Sticky-Elemente
-              funktionieren besonders gut bei Desktop-Darstellung in
-              Kombination mit langen Textpassagen.
           label: Position
           values:
             full: Volle Breite
             inline: Im Textfluss
             left: Links eingerückt
             right: Rechts eingerückt
             standAlone: Stand-Alone
-            sticky: Sticky
             wide: Breit
         typographyVariant:
           blank: "(Standard)"

entry_types/scrolled/config/locales/en.yml

@@ -110,19 +110,13 @@ en:
               scrolling. This gives the reader a stable position to
               fully view the element. Smaller elements can be given
               more weight that way.
-            sticky: |-
-              Place beside the text while scrolling. In mobile view,
-              sticky elements are automatically turned into inline
-              elements. Sticky elements work particularly well in
-              desktop view in combination with long text passages.
           label: Position
           values:
             full: Full Width
             inline: Inline
             left: Floated left
             right: Floated right
             standAlone: Stand alone
-            sticky: Sticky
             wide: Wide
         typographyVariant:
           blank: "(Default)"

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

@@ -0,0 +1,19 @@
+de:
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        position:
+          values:
+            sticky: Neben dem Text (Sticky)
+            side: Neben dem Text
+          item_inline_help_texts:
+            sticky: |-
+              Beim Scrollen begleitend neben dem Text
+              stehenbleiben. In der Mobil-Darstellung werden Elemente
+              automatisch im Text verankert. Sticky-Elemente
+              funktionieren besonders gut bei Desktop-Darstellung in
+              Kombination mit langen Textpassagen.
+            side: |-
+              In einer zweiten Spalte neben dem Text positionieren. In
+              der Mobil-Darstellung werden Elemente automatisch im
+              Text verankert.

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

@@ -0,0 +1,18 @@
+en:
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        position:
+          values:
+            sticky: Alongside (sticky)
+            side: Alongside
+          item_inline_help_texts:
+            sticky: |-
+              Place alongside the text and keep in a fixed posiiton while
+              scrolling. In mobile view, elements are automatically
+              turned into inline elements. Sticky elements work
+              particularly well in desktop view in combination with
+              long text passages.
+            side: |-
+              Place alongside the text. In mobile view, elements are
+              automatically turned into inline elements.

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

@@ -30,7 +30,7 @@ describe('ContentElement', () => {
       const contentElement = entry.contentElements.get(5);
 
       expect(contentElement.getAvailablePositions()).toEqual(
-        ['inline', 'sticky', 'standAlone', 'backdrop']
+        ['inline', 'side', 'sticky', 'standAlone', 'backdrop']
       );
     });
 
@@ -52,7 +52,7 @@ describe('ContentElement', () => {
       const contentElement = entry.contentElements.get(5);
 
       expect(contentElement.getAvailablePositions()).toEqual(
-        ['inline', 'sticky', 'standAlone', 'backdrop']
+        ['inline', 'side', 'sticky', 'standAlone', 'backdrop']
       );
     });
 

entry_types/scrolled/package/spec/entryState/structure-spec.js

@@ -88,6 +88,16 @@ const contentElementsSeed = [
     id: 4,
     permaId: 1004,
     sectionId: 2,
+    typeName: 'image',
+    configuration: {
+      position: 'side',
+      imageId: 4
+    }
+  },
+  {
+    id: 5,
+    permaId: 1005,
+    sectionId: 2,
     typeName: 'textBlock',
     configuration: {
       children: 'Some more text'
@@ -435,6 +445,16 @@ describe('useSectionForegroundContentElements', () => {
       {
         id: 4,
         permaId: 1004,
+        type: 'image',
+        position: 'side',
+        width: 0,
+        props: {
+          imageId: 4
+        }
+      },
+      {
+        id: 5,
+        permaId: 1005,
         type: 'textBlock',
         position: 'inline',
         width: 0,

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

@@ -122,6 +122,24 @@ describe('Layout', () => {
         );
       });
 
+      it('creates new group for side elements', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'side'},
+          {id: 3, type: 'probe', position: 'side'},
+          {id: 4, type: 'probe', position: 'inline'}
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, {position}) => <div>{position} {children}</div>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual(
+          '[inline 1 ][side 2 3 inline 4 ]'
+        );
+      });
+
       it('places inline elements with custom margin in separate box in same group', () => {
         const items = [
           {id: 1, type: 'probe', position: 'inline'},
@@ -139,6 +157,22 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('[inline normal 1 inline custom 2 inline normal 3 ]');
       });
 
+      it('places side elements with and without custom margin in separate groups', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'side'},
+          {id: 2, type: 'probeWithCustomMargin', position: 'side'}
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, {position, customMargin}) =>
+              <div>{position} {customMargin ? 'custom' : 'normal'} {children}</div>
+            }
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[side normal 1 ][side custom 2 ]');
+      });
+
       it('places sticky elements with and without custom margin in separate groups', () => {
         const items = [
           {id: 1, type: 'probe', position: 'sticky'},
@@ -199,6 +233,23 @@ describe('Layout', () => {
         });
       });
 
+      it('continues inline box after being interrupted by side box', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline'},
+          {id: 3, type: 'probe', position: 'side'},
+          {id: 4, type: 'probe', position: 'side'},
+          {id: 5, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <Box {...boxProps}>{children}</Box>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[( 1 2 |][( 3 4 )| 5 )]');
+      });
+
       it('continues inline box after being interrupted by sticky box', () => {
         const items = [
           {id: 1, type: 'probe', position: 'inline'},
@@ -233,6 +284,23 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('[( 1 2 |][( 3 4 )| 5 )]');
       });
 
+      it('continues inline box in new group after side box', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'side'},
+          {id: 3, type: 'probe', position: 'inline'},
+          {id: 4, type: 'probe', position: 'side'},
+          {id: 5, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <Box {...boxProps}>{children}</Box>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[( 1 |][( 2 )| 3 |][( 4 )| 5 )]');
+      });
+
       it('continues inline box in new group after sticky box', () => {
         const items = [
           {id: 1, type: 'probe', position: 'inline'},
@@ -282,6 +350,22 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('[( 1 2 )][( 3 )][( 4 )]');
       });
 
+      it('does not continue inline box after being interrupted by side and full box', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'side'},
+          {id: 3, type: 'probe', position: 'inline', width: 3},
+          {id: 4, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <Box {...boxProps}>{children}</Box>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[( 1 )][( 2 )][( 3 )][( 4 )]');
+      });
+
       it('does not continue inline box after being interrupted by sticky and full box', () => {
         const items = [
           {id: 1, type: 'probe', position: 'inline'},
@@ -298,6 +382,22 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('[( 1 )][( 2 )][( 3 )][( 4 )]');
       });
 
+      it('does not continue inline box after being interrupted by full and side box', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probe', position: 'inline', width: 3},
+          {id: 3, type: 'probe', position: 'side'},
+          {id: 4, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <Box {...boxProps}>{children}</Box>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[( 1 )][( 2 )][( 3 )( 4 )]');
+      });
+
       it('does not continue inline box after being interrupted by full and sticky box', () => {
         const items = [
           {id: 1, type: 'probe', position: 'inline'},
@@ -329,6 +429,21 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('[( 1 )( 2 )( 3 )]');
       });
 
+      it('continues inline box after being interrupted by side custom margin box', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probeWithCustomMargin', position: 'side'},
+          {id: 3, type: 'probe', position: 'inline'},
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, boxProps) => <Box {...boxProps}>{children}</Box>}
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('[( 1 |][( 2 )| 3 )]');
+      });
+
       it('continues inline box after being interrupted by sticky custom margin box', () => {
         const items = [
           {id: 1, type: 'probe', position: 'inline'},
@@ -344,6 +459,37 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('[( 1 |][( 2 )| 3 )]');
       });
 
+      it('inlines side elements of different width at different breakpoints ', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'side'},
+          {id: 2, type: 'probe', position: 'side', width: 1},
+          {id: 3, type: 'probe', position: 'side', width: 2}
+        ];
+        viewportWidth = 1000;
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, {position}) => <div>{position} {children}</div>}
+          </Layout>,
+          {
+            seed: {
+              themeOptions: {
+                properties: {
+                  root: {
+                    twoColumnStickyBreakpoint: '950px',
+                    twoColumnStickyLgBreakpoint: '1024px',
+                    twoColumnStickyXlBreakpoint: '1180px'
+                  }
+                }
+              }
+            }
+          }
+        );
+
+        expect(container.textContent).toEqual(
+          '[side 1 inline 2 ][inline 3 ]'
+        );
+      });
+
       it('inlines sticky elements of different width at different breakpoints ', () => {
         const items = [
           {id: 1, type: 'probe', position: 'sticky'},
@@ -375,6 +521,39 @@ describe('Layout', () => {
         );
       });
 
+      it('decreases size when inlining wide side elements', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'side', width: -2},
+          {id: 2, type: 'probe', position: 'side', width: -1},
+          {id: 3, type: 'probe', position: 'side'},
+          {id: 4, type: 'probe', position: 'side', width: 1},
+          {id: 5, type: 'probe', position: 'side', width: 2}
+        ];
+        viewportWidth = 500;
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, {position, width}) => <div>{position} {widthName(width)} {children}</div>}
+          </Layout>,
+          {
+            seed: {
+              themeOptions: {
+                properties: {
+                  root: {
+                    twoColumnStickyBreakpoint: '950px',
+                    twoColumnStickyLgBreakpoint: '1024px',
+                    twoColumnStickyXlBreakpoint: '1180px'
+                  }
+                }
+              }
+            }
+          }
+        );
+
+        expect(container.textContent).toEqual(
+          '[inline xs 1 ][inline sm 2 ][inline md 3 4 ][inline lg 5 ]'
+        );
+      });
+
       it('decreases size when inlining wide sticky elements', () => {
         const items = [
           {id: 1, type: 'probe', position: 'sticky', width: -2},

entry_types/scrolled/package/src/contentElements/counter/editor.js

@@ -6,7 +6,7 @@ import pictogram from './pictogram.svg';
 editor.contentElementTypes.register('counter', {
   category: 'data',
   pictogram,
-  supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+  supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
 
   defaultConfig: {

entry_types/scrolled/package/src/contentElements/dataWrapperChart/editor.js

@@ -8,7 +8,7 @@ import pictogram from './pictogram.svg';
 editor.contentElementTypes.register('dataWrapperChart', {
   category: 'data',
   pictogram,
-  supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+  supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
   supportedWidthRange: ['xxs', 'full'],
 
   configurationEditor({entry}) {