fix(SW-391): fixed issues with sidepeek functionality inside teaser cards
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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] {
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user