From 2602bbc8cee93cafac31e15d8c0737dd8f4d61cf Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 7 Jun 2024 10:44:31 +0200
Subject: [PATCH] Add external links variant with transparent cards

Remove spacing around card text. Skip transform on hover.

REDMINE-20744
---
 .../scrolled/package/spec/support/stories.js  | 11 +++--
 .../frontend/ExternalLink.module.css          | 24 ++++++-----
 .../externalLinkList/stories.js               | 42 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/entry_types/scrolled/package/spec/support/stories.js b/entry_types/scrolled/package/spec/support/stories.js
index 120dd82c2e..cb64853a74 100644
--- a/entry_types/scrolled/package/spec/support/stories.js
+++ b/entry_types/scrolled/package/spec/support/stories.js
@@ -181,13 +181,18 @@ function variantsExampleStories({typeName, baseConfiguration, variants}) {
     typeName,
     name: 'Variants',
     examples: variants.map(({
-      name, permaId, configuration, themeOptions, sectionConfiguration
+      name, permaId, configuration, themeOptions, sectionConfiguration, inlineFileRightsWidgetTypeName
     }) => ({
       name: name,
       permaId,
       contentElementConfiguration: {...baseConfiguration, ...configuration},
       themeOptions,
-      sectionConfiguration
+      sectionConfiguration,
+      inlineFileRightsFor: inlineFileRightsWidgetTypeName ? ['audioFiles', 'imageFiles', 'videoFiles'] : [],
+      widgets: inlineFileRightsWidgetTypeName ? [{
+        role: 'inlineFileRights',
+        typeName: inlineFileRightsWidgetTypeName
+      }] : []
     }))
   });
 }
@@ -324,7 +329,7 @@ function exampleStoryGroup({
       widgets: examples[index].widgets,
       themeOptions: examples[index].themeOptions,
       consentVendors,
-      inlineFileRightsFor,
+      inlineFileRightsFor: inlineFileRightsFor || examples[index].inlineFileRightsFor,
       contentElementConsentVendors: consentVendors &&
                                     contentElements
                                       .filter(({id}) => id)
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
index da92eddafc..26fce8addf 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -27,7 +27,7 @@
 }
 
 .link_item:hover {
-  transform: scale(1.05);
+  transform: scale(var(--theme-external-links-card-hover-scale, 1.05));
 }
 
 .link_item:hover .link_title {
@@ -43,16 +43,20 @@
 }
 
 .background {
+  --padding-inline: var(--theme-external-links-card-padding-inline, 15px);
   flex: 1;
-  color: darkContentTextColor;
-  --content-text-color: darkContentTextColor;
-  background-color: lightContentSurfaceColor;
-  padding-left: 5px;
-  padding-right: 5px;
+  color: var(--theme-external-links-card-text-color, darkContentTextColor);
+  --content-text-color: var(--theme-external-links-card-text-color, darkContentTextColor);
+  background-color: var(--theme-external-links-card-surface-color, lightContentSurfaceColor);
+  padding-left: min(var(--padding-inline), 5px);
+  padding-right: min(var(--padding-inline), 5px);
 }
 
 .details {
-  padding: 15px 15px 20px;
+  padding-top: 15px;
+  padding-bottom: 20px;
+  padding-left: calc(var(--padding-inline) - 5px);
+  padding-right: calc(var(--padding-inline) - 5px);
 }
 
 .details:first-child {
@@ -60,9 +64,9 @@
 }
 
 .invert > .background {
-  background-color: darkContentSurfaceColor;
-  color: lightContentTextColor;
-  --content-text-color: lightContentTextColor;
+  background-color: var(--theme-external-links-card-surface-color, darkContentSurfaceColor);
+  color: var(--theme-external-links-card-text-color, lightContentTextColor);
+  --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
 }
 
 .details > .link_title {
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
index fe2d13daf0..3f510de980 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
@@ -38,5 +38,45 @@ storiesOfContentElement(module, {
         open_in_new_tab: '0'
       }
     ]
-  }
+  },
+  variants: [
+    {
+      name: 'With inverted content colors',
+      configuration: {
+        variant: 'cards-inverted'
+      },
+      themeOptions: {
+        properties: {
+          'externalLinkList-cards-inverted': {
+            darkContentSurfaceColor: 'var(--root-light-content-surface-color)',
+            lightContentSurfaceColor: 'var(--root-dark-content-surface-color)',
+            darkContentTextColor: 'var(--root-light-content-text-color)',
+            lightContentTextColor: 'var(--root-dark-content-text-color)'
+          }
+        }
+      }
+    },
+    {
+      name: 'With transparent background',
+      configuration: {
+        variant: 'cards-inverted'
+      },
+      sectionConfiguration: {
+        backdrop: {
+          image: filePermaId('imageFiles', 'turtle')
+        }
+      },
+      inlineFileRightsWidgetTypeName: 'textInlineFileRights',
+      themeOptions: {
+        properties: {
+          'externalLinkList-cards-inverted': {
+            externalLinksCardSurfaceColor: 'transparent',
+            externalLinksCardTextColor: 'var(--content-text-color)',
+            externalLinksCardPaddingInline: '0'
+          }
+        }
+      }
+    }
+  ],
+  inlineFileRights: true
 });