fix(SW-391): fixed issues with sidepeek functionality inside teaser cards

This commit is contained in:
Erik Tiekstra
2024-11-04 11:15:25 +01:00
parent 038ae1256f
commit dabdd597e2
5 changed files with 26 additions and 6 deletions

View File

@@ -41,7 +41,7 @@ function SidePeek({
if (isSSR) { if (isSSR) {
return ( return (
<div> <div className={styles.visuallyHidden}>
<h2>{title}</h2> <h2>{title}</h2>
{children} {children}
</div> </div>

View File

@@ -21,6 +21,12 @@
} }
} }
.visuallyHidden {
position: absolute;
opacity: 0;
visibility: hidden;
}
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -40,7 +46,7 @@
height: 100vh; height: 100vh;
background-color: var(--Base-Background-Primary-Normal); background-color: var(--Base-Background-Primary-Normal);
z-index: var(--sidepeek-z-index); z-index: var(--sidepeek-z-index);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.85); outline: none;
} }
.modal[data-entering] { .modal[data-entering] {

View File

@@ -21,7 +21,7 @@ export default function TeaserCardSidepeek({
const { heading, content, primary_button, secondary_button } = sidePeekContent const { heading, content, primary_button, secondary_button } = sidePeekContent
return ( return (
<> <div>
<Button <Button
onPress={() => setSidePeekIsOpen(true)} onPress={() => setSidePeekIsOpen(true)}
theme="base" theme="base"
@@ -77,6 +77,6 @@ export default function TeaserCardSidepeek({
)} )}
</div> </div>
</SidePeek> </SidePeek>
</> </div>
) )
} }

View File

@@ -95,7 +95,6 @@ export default function useStickyPosition({
}, 100) }, 100)
resizeObserver = new ResizeObserver(debouncedResizeHandler) resizeObserver = new ResizeObserver(debouncedResizeHandler)
console.log("Initialized ResizeObserver")
} }
resizeObserver.observe(document.body) resizeObserver.observe(document.body)

View File

@@ -91,7 +91,22 @@ export const teaserCardBlockSchema = z.object({
has_secondary_button: z.boolean().default(false), has_secondary_button: z.boolean().default(false),
secondary_button: buttonSchema, secondary_button: buttonSchema,
}) })
.optional(), .optional()
.transform((data) => {
if (!data) {
return undefined
}
return {
...data,
primary_button: data.has_primary_button
? data.primary_button
: undefined,
secondary_button: data.has_secondary_button
? data.secondary_button
: undefined,
}
}),
system: systemSchema, system: systemSchema,
}) })