From fbc5ff5a107e61e9a4270aaa31bcb81eff8ed412 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Wed, 15 Jan 2025 15:03:55 +0100 Subject: [PATCH] Update external links stories to use new configuration layout REDMINE-20852, REDMINE-20896 --- .../scrolled/package/spec/support/stories.js | 11 ++ .../externalLinkList/stories.js | 155 ++++++++++++++---- 2 files changed, 130 insertions(+), 36 deletions(-) diff --git a/entry_types/scrolled/package/spec/support/stories.js b/entry_types/scrolled/package/spec/support/stories.js index cb64853a7..264fbe043 100644 --- a/entry_types/scrolled/package/spec/support/stories.js +++ b/entry_types/scrolled/package/spec/support/stories.js @@ -450,6 +450,17 @@ export function examplePositionedElement({sectionId, position, width, caption, c } } +export function editableTextValue(text) { + return [ + { + type: 'paragraph', + children: [ + {text} + ] + } + ]; +} + // This method is only used in specs of this file. I could not find // anouth way to stub the missing seed.json file. export function stubSeedFixture(seed) { diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js index 650d32402..5dc713e73 100644 --- a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js +++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js @@ -11,6 +11,7 @@ import { } from './linkWidths'; import { + editableTextValue, exampleHeading, filePermaId, normalizeAndMergeFixture, @@ -21,39 +22,58 @@ import {storiesOf} from '@storybook/react'; storiesOfContentElement(module, { typeName: 'externalLinkList', baseConfiguration: { + itemTexts: { + 1: { + title: editableTextValue('PageflowIO'), + description: editableTextValue('This is description') + }, + 2: { + title: editableTextValue('pageflowio'), + description: editableTextValue('This is pageflowio link') + }, + 3: { + title: editableTextValue('PageflowIo'), + description: editableTextValue('This is another pageflowio link') + }, + 4: { + title: editableTextValue('PageflowIo'), + description: editableTextValue('This is another pageflowio link') + }, + }, + itemLinks: { + 1: { + href: 'https://www.pageflow.io/', + openInNewTab: false + }, + 2: { + href: 'https://www.pageflow.io/', + openInNewTab: true + }, + 3: { + href: 'https://www.pageflow.io/', + openInNewTab: false + }, + 4: { + href: 'https://www.pageflow.io/', + openInNewTab: false + } + }, links: [ { id: '1', - title: 'PageflowIO', - url: 'https://www.pageflow.io/', - thumbnail: filePermaId('imageFiles', 'turtle'), - description: 'This is description', - open_in_new_tab: '0', - thumbnailCropPosition: {x: 0, y: 50} + thumbnail: filePermaId('imageFiles', 'turtle') }, { id: '2', - title: 'pageflowio', - url: 'https://www.pageflow.io/', - thumbnail: '', - description: 'This is pageflowio link', - open_in_new_tab: '1' + thumbnail: '' }, { id: '3', - title: 'PageflowIo', - url: 'https://www.pageflow.io/', - thumbnail: filePermaId('imageFiles', 'turtle'), - description: 'This is another pageflowio link', - open_in_new_tab: '0' + thumbnail: filePermaId('imageFiles', 'turtle') }, { id: '4', - title: 'PageflowIo', - url: 'https://www.pageflow.io/', - thumbnail: filePermaId('imageFiles', 'turtle'), - description: 'This is another pageflowio link', - open_in_new_tab: '0' + thumbnail: filePermaId('imageFiles', 'turtle') } ] }, @@ -117,20 +137,67 @@ storiesOfContentElement(module, { { name: 'Without link urls', configuration: { + itemTexts: { + 1: { + title: editableTextValue('Static Teaser'), + description: editableTextValue('This is description') + }, + 2: { + title: editableTextValue('Other item'), + description: editableTextValue('This is other description') + } + }, + itemLinks: {}, links: [ { id: '1', - title: 'Static Teaser', thumbnail: filePermaId('imageFiles', 'turtle'), - description: 'This is description' }, { - id: '2', - title: 'Other item', - description: 'This is pageflowio link' + id: '2' } ] }, + }, + { + name: 'With legacy external links', + configuration: { + links: [ + { + id: '1', + title: 'PageflowIO', + url: 'https://www.pageflow.io/', + thumbnail: filePermaId('imageFiles', 'turtle'), + description: 'This is description', + open_in_new_tab: '0', + thumbnailCropPosition: {x: 0, y: 50} + }, + { + id: '2', + title: 'pageflowio', + url: 'https://www.pageflow.io/', + thumbnail: '', + description: 'This is pageflowio link', + open_in_new_tab: '1' + }, + { + id: '3', + title: 'PageflowIo', + url: 'https://www.pageflow.io/', + thumbnail: filePermaId('imageFiles', 'turtle'), + description: 'This is another pageflowio link', + open_in_new_tab: '0' + }, + { + id: '4', + title: 'PageflowIo', + url: 'https://www.pageflow.io/', + thumbnail: filePermaId('imageFiles', 'turtle'), + description: 'This is another pageflowio link', + open_in_new_tab: '0' + } + ] + } } ], inlineFileRights: true @@ -225,7 +292,7 @@ function exampleContentElements(sectionId, layout, textPosition) { textPosition, width, linkWidth, - links: links({ + ...links({ count: linkCount({layout, textPosition, width, linkWidth}) }) } @@ -244,13 +311,29 @@ function range(start, end) { } function links({count}) { - return Array.from({length: count}, (_, index) => ( - { - id: `${index + 1}`, - title: `Link ${index + 1}`, - url: 'https://www.pageflow.io/', - thumbnail: filePermaId('imageFiles', 'turtle'), - description: 'This is the description' - } - )); + return { + itemTexts: Object.fromEntries(Array.from({length: count}, (_, index) => + [ + index + 1, + { + title: editableTextValue(`Link ${index + 1}`), + description: editableTextValue('This is the description') + } + ] + )), + itemLinks: Object.fromEntries(Array.from({length: count}, (_, index) => + [ + index + 1, + { + href: 'https://www.pageflow.io/', + } + ] + )), + links: Array.from({length: count}, (_, index) => ( + { + id: `${index + 1}`, + thumbnail: filePermaId('imageFiles', 'turtle'), + } + )) + }; }