Scroller mode and full width for teaser lists

entry_types/scrolled/config/locales/new/ext-link-options.de.yml

@@ -1,4 +1,7 @@
 de:
+  pageflow:
+    teaser_list_scroller:
+      feature_name: "Teaser List Scroller"
   pageflow_scrolled:
     editor:
       aspect_ratios:
@@ -13,6 +16,11 @@ de:
       content_elements:
         externalLinkList:
           attributes:
+            enableScroller:
+              label: "Layout-Verhalten"
+              values:
+                never: "In mehrere Zeilen umbrechen"
+                always: "Horizontal scrollen"
             thumbnailAspectRatio:
               label: "Thumbnail Seitenverhältnis"
               inline_help: |-

entry_types/scrolled/config/locales/new/ext-link-options.en.yml

@@ -1,4 +1,7 @@
 en:
+  pageflow:
+    teaser_list_scroller:
+      feature_name: "Teaser List Scroller"
   pageflow_scrolled:
     editor:
       aspect_ratios:
@@ -13,6 +16,11 @@ en:
       content_elements:
         externalLinkList:
           attributes:
+            enableScroller:
+              label: "Layout behavior"
+              values:
+                never: "Wrap into multiple lines"
+                always: "Scroll horizontally"
             thumbnailAspectRatio:
               label: "Thumbnail aspect ratio"
               inline_help: |-

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -51,6 +51,7 @@ def configure(config)
         c.features.register('custom_palette_colors')
         c.features.register('decoration_effects')
         c.features.register('backdrop_size')
+        c.features.register('teaser_list_scroller')
 
         c.additional_frontend_seed_data.register(
           'frontendVersion',

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

@@ -54,6 +54,16 @@ describe('Layout', () => {
         }
       });
 
+      frontend.contentElementTypes.register('probeWithCustomMarginFunction', {
+        customMargin({configuration}) { return configuration.useCustomMargin; },
+
+        component: function Probe({contentElementId}) {
+          return (
+            <div>{contentElementId} </div>
+          );
+        }
+      });
+
       frontend.contentElementTypes.register('probeWithCustomMarginProp', {
         customMargin: true,
 
@@ -144,6 +154,23 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('[inline normal 1 inline custom 2 inline normal 3 ]');
       });
 
+      it('supports function for custom margin option', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probeWithCustomMarginFunction', position: 'inline', props: {useCustomMargin: true}},
+          {id: 3, type: 'probeWithCustomMarginFunction', position: 'inline', props: {useCustomMargin: false}}
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'left'}} items={items}>
+            {(children, {position, customMargin}) =>
+              <div>{position} {customMargin ? 'custom' : 'normal'} {children}</div>
+            }
+          </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'},
@@ -699,6 +726,23 @@ describe('Layout', () => {
         expect(container.textContent).toEqual('normal 1 custom 2 normal 3 ');
       });
 
+      it('supports function for custom margin option', () => {
+        const items = [
+          {id: 1, type: 'probe', position: 'inline'},
+          {id: 2, type: 'probeWithCustomMarginFunction', position: 'inline', props: {useCustomMargin: true}},
+          {id: 3, type: 'probeWithCustomMarginFunction', position: 'inline', props: {useCustomMargin: false}}
+        ];
+        const {container} = renderInEntry(
+          <Layout sectionProps={{layout: 'center'}} items={items}>
+            {(children, {customMargin}) =>
+              <div>{customMargin ? 'custom' : 'normal'} {children}</div>
+            }
+          </Layout>
+        );
+
+        expect(container.textContent).toEqual('normal 1 custom 2 normal 3 ');
+      });
+
       describe('customMargin prop passed to content element', () => {
         it('is true if rendered inline with custom margin', () => {
           const items = [

entry_types/scrolled/package/src/contentElements/externalLinkList/editor/index.js

@@ -1,4 +1,5 @@
 import {editor} from 'pageflow-scrolled/editor';
+import {features} from 'pageflow/frontend';
 import {SelectInputView, SliderInputView, SeparatorView, CheckBoxInputView} from 'pageflow/ui';
 
 import {SidebarRouter} from './SidebarRouter';
@@ -21,7 +22,7 @@ editor.contentElementTypes.register('externalLinkList', {
   pictogram,
   category: 'tilesAndLinks',
   supportedPositions: ['inline', 'standAlone'],
-  supportedWidthRange: ['m', 'xl'],
+  supportedWidthRange: ['m', 'full'],
 
   defaultConfig: {
     thumbnailAspectRatio: 'square'
@@ -56,6 +57,13 @@ editor.contentElementTypes.register('externalLinkList', {
       this.view(SeparatorView);
       this.group('ContentElementPosition');
       this.view(SeparatorView);
+
+      if (features.isEnabled('teaser_list_scroller')) {
+        this.input('enableScroller', SelectInputView, {
+          values: ['never', 'always']
+        });
+      }
+
       this.input('linkWidth', SliderInputView, {
         displayText: value => [
           'XS', 'S', 'M', 'L', 'XL', 'XXL'
@@ -68,8 +76,16 @@ editor.contentElementTypes.register('externalLinkList', {
       });
       this.input('linkAlignment', SelectInputView, {
         values: ['spaceEvenly', 'left', 'right', 'center'],
-        visibleBinding: 'textPosition',
-        visible: textPosition => textPosition !== 'right'
+        visibleBinding: ['textPosition', 'enableScroller'],
+        visible: ([textPosition, enableScroller]) =>
+          textPosition !== 'right' && enableScroller !== 'always',
+      });
+      this.input('linkAlignment', SelectInputView, {
+        values: ['left'],
+        disabled: true,
+        visibleBinding: ['textPosition', 'enableScroller'],
+        visible: ([textPosition, enableScroller]) =>
+          textPosition !== 'right' && enableScroller === 'always',
       });
       this.input('thumbnailSize', SelectInputView, {
         values: ['small', 'medium', 'large'],

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js

@@ -103,6 +103,7 @@ export function ExternalLink({id, configuration, ...props}) {
       <Link isEnabled={!configuration.displayButtons}
             isEditable={isEditable}
             actionButtonVisible={props.selected}
+            actionButtonPortal={true}
             href={href}
             openInNewTab={openInNewTab}
             onChange={handleLinkChange}>
@@ -178,8 +179,7 @@ function Link({isEnabled, isEditable, ...props}) {
   if ((isEnabled && props.href) || isEditable) {
     return (
       <EditableLink {...props}
-                    actionButtonVisible={props.actionButtonVisible}
-                    linkPreviewPosition="above" />
+                    actionButtonVisible={props.actionButtonVisible} />
     );
   }
   else {

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css

@@ -9,7 +9,6 @@
   position: relative;
   margin: 0;
   padding: 0;
-  transition: transform 0.3s;
 }
 
 .item > a {
@@ -35,10 +34,11 @@
 }
 
 .textPosition-below .cardWrapper,
-.textPosition-right .cardWrapper{
+.textPosition-right .cardWrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
+  transition: transform 0.3s;
 }
 
 .card {
@@ -70,11 +70,11 @@
   composes: textPosition-none;
 }
 
-.link.textPosition-below:not(.outlined):hover {
+.link.textPosition-below:not(.outlined):hover .cardWrapper {
   transform: scale(var(--theme-external-links-card-hover-scale, 1.05));
 }
 
-.link.textPosition-right:not(.outlined):hover {
+.link.textPosition-right:not(.outlined):hover .cardWrapper {
   transform: scale(var(--theme-external-links-card-hover-scale, 1.02));
 }
 

entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLinkList.js

@@ -1,13 +1,17 @@
 import React, {useState} from 'react';
 import classNames from 'classnames';
 import {
+  LinkTooltipProvider,
   useContentElementEditorCommandSubscription,
   useContentElementEditorState,
   useContentElementLifecycle,
   useDarkBackground,
-  contentElementWidthName
+  useTheme,
+  contentElementWidthName,
+  contentElementWidths
 } from 'pageflow-scrolled/frontend';
 import {ExternalLink} from './ExternalLink';
+import {Scroller} from './Scroller';
 import styles from './ExternalLinkList.module.css';
 
 import textPositionBelowStyles from './textPositons/below.module.css';
@@ -26,6 +30,7 @@ export function ExternalLinkList(props) {
   const linkList = props.configuration.links || [];
   const {shouldLoad} = useContentElementLifecycle();
   const darkBackground = useDarkBackground();
+  const theme = useTheme();
 
   const {setTransientState, isSelected} = useContentElementEditorState();
   const [selectedItemId, setSelectedItemId] = useState();
@@ -72,42 +77,61 @@ export function ExternalLinkList(props) {
                              textPositionRightStyles :
                              textPositionBelowStyles;
 
+  const scrollerEnabled = props.configuration.enableScroller === 'always';
+  const fullWidth = props.contentElementWidth === contentElementWidths.full;
+  const linkAlignment = scrollerEnabled ? 'left' : props.configuration.linkAlignment;
+
   return (
-    <div className={styles.container}>
-      <ul className={classNames(
-            styles.list,
-            styles[`textPosition-${textPosition}`],
+    <div className={classNames({[styles.contentMargin]: props.customMargin || fullWidth},
+                               styles[`scrollButtons-${theme.options.teasersScrollButtons}`])}>
+      <Scroller enabled={scrollerEnabled}>
+        {({scrollerRef, handleScroll}) =>
+          <div className={classNames(styles.container, {[styles.fullContainer]: fullWidth})}>
+            <LinkTooltipProvider align="center">
+              <ul ref={scrollerRef}
+                  className={classNames(
+                    styles.list,
+                    styles[`textPosition-${textPosition}`],
+                    styles[`layout-${layout}`],
+                    {[styles.full]: fullWidth},
+                    {[styles.scroller]: scrollerEnabled},
 
-            props.configuration.variant &&
-            `scope-externalLinkList-${props.configuration.variant}`,
+                    props.configuration.variant &&
+                    `scope-externalLinkList-${props.configuration.variant}`,
 
-            textPositionStyles.list,
-            textPositionStyles[`layout-${layout}`],
-            textPositionStyles[`width-${contentElementWidthName(props.configuration.width)}`],
-            textPositionStyles[`linkWidth-${linkWidth}`],
-            textPositionStyles[`linkAlignment-${props.configuration.linkAlignment}`],
-            textPositionStyles[`textPosition-${textPosition}`]
-          )}
-          style={{'--overlay-opacity': (props.configuration.overlayOpacity || 70) / 100,
-                  '--thumbnail-aspect-ratio': `var(--theme-aspect-ratio-${props.configuration.thumbnailAspectRatio || 'wide'})`}}
-          onClick={handleListClick}>
-        {linkList.map((link, index) =>
-          <ExternalLink {...link}
-                        key={link.id}
-                        configuration={props.configuration}
-                        thumbnailAspectRatio={props.configuration.thumbnailAspectRatio}
-                        thumbnailSize={props.configuration.thumbnailSize || 'small'}
-                        thumbnailFit={props.configuration.thumbnailFit || 'cover'}
-                        textPosition={props.configuration.textPosition || 'below'}
-                        textSize={props.configuration.textSize || 'small'}
-                        darkBackground={darkBackground}
-                        loadImages={shouldLoad}
-                        outlined={isSelected}
-                        highlighted={highlightedIndex === index}
-                        selected={link.id === selectedItemId && isSelected}
-                        onClick={event => handleItemClick(event, link.id)} />
-        )}
-      </ul>
+                    textPositionStyles.list,
+                    textPositionStyles[`layout-${layout}`],
+                    textPositionStyles[`width-${contentElementWidthName(props.contentElementWidth)}`],
+                    textPositionStyles[`linkWidth-${fullWidth ? 'full-' : ''}${linkWidth}`],
+                    textPositionStyles[`linkAlignment-${linkAlignment}`],
+                    textPositionStyles[`textPosition-${textPosition}`],
+                    {[textPositionStyles.scroller]: scrollerEnabled}
+                  )}
+                  style={{'--overlay-opacity': (props.configuration.overlayOpacity || 70) / 100,
+                          '--thumbnail-aspect-ratio': `var(--theme-aspect-ratio-${props.configuration.thumbnailAspectRatio || 'wide'})`}}
+                  onScroll={handleScroll}
+                  onClick={handleListClick}>
+                {linkList.map((link, index) =>
+                  <ExternalLink {...link}
+                                key={link.id}
+                                configuration={props.configuration}
+                                thumbnailAspectRatio={props.configuration.thumbnailAspectRatio}
+                                thumbnailSize={props.configuration.thumbnailSize || 'small'}
+                                thumbnailFit={props.configuration.thumbnailFit || 'cover'}
+                                textPosition={props.configuration.textPosition || 'below'}
+                                textSize={props.configuration.textSize || 'small'}
+                                darkBackground={darkBackground}
+                                loadImages={shouldLoad}
+                                outlined={isSelected}
+                                highlighted={highlightedIndex === index}
+                                selected={link.id === selectedItemId && isSelected}
+                                onClick={event => handleItemClick(event, link.id)} />
+                )}
+              </ul>
+            </LinkTooltipProvider>
+          </div>
+        }
+      </Scroller>
     </div>
   );
 }