Fix/SW-1563 accessibility
* fix(SW-1563): Added new IconButton component to the design system and removed Icon variant inside the Button component * fix(SW-1563): Added buttons around clickable images and changed to design system components * fix(SW-1563): Renamed variants to match Figma * fix(SW-1563): Renamed AriaButton to ButtonRAC Approved-by: Michael Zetterberg Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
@@ -0,0 +1,126 @@
|
||||
.fullViewContainer {
|
||||
background-color: var(--UI-Text-High-contrast);
|
||||
height: 100%;
|
||||
padding: var(--Spacing-x3) var(--Spacing-x2);
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
place-content: center;
|
||||
gap: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: var(--Space-x2);
|
||||
right: var(--Space-x2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imageCount {
|
||||
background-color: var(--Overlay-90);
|
||||
padding: var(--Space-x025) var(--Space-x05);
|
||||
border-radius: var(--Corner-radius-Small);
|
||||
color: var(--Text-Inverted);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 25rem;
|
||||
margin-bottom: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: var(--Text-Inverted);
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--Spacing-x5));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.navigationButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width: 1366px) {
|
||||
.fullViewContainer {
|
||||
padding: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
height: 100%;
|
||||
max-height: 560px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: var(--Spacing-x-one-and-half);
|
||||
right: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.fullViewContainer {
|
||||
margin-top: 0;
|
||||
padding: var(--Spacing-x5);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 70%;
|
||||
max-width: 1454px;
|
||||
max-height: 700px;
|
||||
}
|
||||
|
||||
.navigationButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--Component-Button-Inverted-Fill-Default);
|
||||
color: var(--Component-Button-Inverted-On-fill-Default);
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-width: 0;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 8px 1px #0000001a;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--Component-Button-Inverted-Fill-Hover);
|
||||
color: var(--Component-Button-Inverted-On-fill-Hover);
|
||||
}
|
||||
}
|
||||
|
||||
.fullViewNextButton {
|
||||
right: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.fullViewPrevButton {
|
||||
left: var(--Spacing-x5);
|
||||
}
|
||||
}
|
||||
126
apps/scandic-web/components/Lightbox/FullView/index.tsx
Normal file
126
apps/scandic-web/components/Lightbox/FullView/index.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client"
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion"
|
||||
import { useState } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { IconButton } from "@scandic-hotels/design-system/IconButton"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import Image from "@/components/Image"
|
||||
|
||||
import styles from "./fullView.module.css"
|
||||
|
||||
import type { FullViewProps } from "@/types/components/lightbox/lightbox"
|
||||
|
||||
export default function FullView({
|
||||
image,
|
||||
onClose,
|
||||
onNext,
|
||||
onPrev,
|
||||
currentIndex,
|
||||
totalImages,
|
||||
hideLabel,
|
||||
}: FullViewProps) {
|
||||
const intl = useIntl()
|
||||
const [animateLeft, setAnimateLeft] = useState(true)
|
||||
|
||||
function handleSwipe(offset: number) {
|
||||
if (offset > 30) onPrev()
|
||||
if (offset < -30) onNext()
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
setAnimateLeft(true)
|
||||
onNext()
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
setAnimateLeft(false)
|
||||
onPrev()
|
||||
}
|
||||
|
||||
const variants = {
|
||||
initial: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? 300 : -300,
|
||||
}),
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? -300 : 300,
|
||||
}),
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.fullViewContainer}>
|
||||
<IconButton
|
||||
theme="Inverted"
|
||||
style="Muted"
|
||||
className={styles.closeButton}
|
||||
onPress={onClose}
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: "Close",
|
||||
})}
|
||||
>
|
||||
<MaterialIcon icon="close" color="CurrentColor" size={24} />
|
||||
</IconButton>
|
||||
<div className={styles.header}>
|
||||
<Typography variant="Tag/sm">
|
||||
<span className={styles.imageCount}>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${currentIndex + 1} / ${totalImages}`}
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.imageContainer}>
|
||||
<AnimatePresence initial={false} custom={animateLeft}>
|
||||
<motion.div
|
||||
key={image.src}
|
||||
custom={animateLeft}
|
||||
variants={variants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.3 }}
|
||||
className={styles.imageWrapper}
|
||||
drag="x"
|
||||
onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
|
||||
>
|
||||
<Image
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="(min-width: 1500px) 1500px, 100vw"
|
||||
src={image.src}
|
||||
className={styles.image}
|
||||
/>
|
||||
|
||||
{image.caption && !hideLabel ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.footer}>{image.caption}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
<MaterialIcon
|
||||
icon="arrow_back"
|
||||
color="CurrentColor"
|
||||
className={styles.leftTransformIcon}
|
||||
/>
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
|
||||
onClick={handleNext}
|
||||
>
|
||||
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
|
||||
</motion.button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user