Merged in fix/SW-1631-rate-terms-modal (pull request #1699)
fix(SW-1631): add rate terms modal * fix(SW-1631): add rate terms modal Approved-by: Simon.Emanuelsson
This commit is contained in:
Arvid Norlin
174
packages/design-system/lib/components/RateCard/Modal/index.tsx
Normal file
174
packages/design-system/lib/components/RateCard/Modal/index.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
import { type PropsWithChildren, useEffect, useState } from 'react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
Modal as AriaModal,
|
||||
ModalOverlay,
|
||||
} from 'react-aria-components'
|
||||
|
||||
import {
|
||||
type AnimationState,
|
||||
AnimationStateEnum,
|
||||
type InnerModalProps,
|
||||
type ModalProps,
|
||||
} from './modal'
|
||||
import { fade, slideInOut } from './motionVariants'
|
||||
|
||||
import styles from './modal.module.css'
|
||||
import { Typography } from '../../Typography'
|
||||
import { MaterialIcon } from '../../Icons'
|
||||
|
||||
const MotionOverlay = motion(ModalOverlay)
|
||||
const MotionModal = motion(AriaModal)
|
||||
|
||||
function InnerModal({
|
||||
animation,
|
||||
onAnimationComplete = () => undefined,
|
||||
setAnimation,
|
||||
onToggle,
|
||||
isOpen,
|
||||
children,
|
||||
title,
|
||||
subtitle,
|
||||
hideHeader,
|
||||
}: PropsWithChildren<InnerModalProps>) {
|
||||
function modalStateHandler(newAnimationState: AnimationState) {
|
||||
setAnimation((currentAnimationState) =>
|
||||
newAnimationState === AnimationStateEnum.hidden &&
|
||||
currentAnimationState === AnimationStateEnum.hidden
|
||||
? AnimationStateEnum.unmounted
|
||||
: currentAnimationState
|
||||
)
|
||||
if (newAnimationState === AnimationStateEnum.visible) {
|
||||
onAnimationComplete()
|
||||
}
|
||||
}
|
||||
|
||||
function onOpenChange(state: boolean) {
|
||||
onToggle!(state)
|
||||
}
|
||||
|
||||
return (
|
||||
<MotionOverlay
|
||||
animate={animation}
|
||||
className={styles.overlay}
|
||||
initial={'hidden'}
|
||||
isDismissable
|
||||
isExiting={animation === AnimationStateEnum.hidden}
|
||||
onAnimationComplete={modalStateHandler}
|
||||
variants={fade}
|
||||
isOpen={isOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<MotionModal
|
||||
className={styles.modal}
|
||||
variants={slideInOut}
|
||||
animate={animation}
|
||||
initial={'hidden'}
|
||||
>
|
||||
<Dialog className={styles.dialog}>
|
||||
{({ close }) => (
|
||||
<>
|
||||
{!hideHeader && (
|
||||
<header className={styles.header}>
|
||||
<div>
|
||||
{title && (
|
||||
<Typography variant="Title/Subtitle/lg">
|
||||
<p>{title}</p>
|
||||
</Typography>
|
||||
)}
|
||||
{subtitle && (
|
||||
<Typography variant="Body/Lead text">
|
||||
<span>{subtitle}</span>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={close}
|
||||
type="button"
|
||||
className={styles.close}
|
||||
>
|
||||
<MaterialIcon icon="close" color="Icon/Feedback/Neutral" />
|
||||
</button>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<section className={styles.content}>{children}</section>
|
||||
</>
|
||||
)}
|
||||
</Dialog>
|
||||
</MotionModal>
|
||||
</MotionOverlay>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Modal({
|
||||
onAnimationComplete = () => undefined,
|
||||
trigger,
|
||||
isOpen,
|
||||
onToggle,
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
withActions = false,
|
||||
hideHeader = false,
|
||||
}: PropsWithChildren<ModalProps>) {
|
||||
const [animation, setAnimation] = useState<AnimationState>(
|
||||
AnimationStateEnum.visible
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof isOpen === 'boolean') {
|
||||
setAnimation(
|
||||
isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
|
||||
)
|
||||
}
|
||||
if (isOpen === undefined) {
|
||||
setAnimation(AnimationStateEnum.unmounted)
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
if (!trigger) {
|
||||
return (
|
||||
<InnerModal
|
||||
onAnimationComplete={onAnimationComplete}
|
||||
animation={animation}
|
||||
setAnimation={setAnimation}
|
||||
onToggle={onToggle}
|
||||
isOpen={isOpen}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
withActions={withActions}
|
||||
hideHeader={hideHeader}
|
||||
>
|
||||
{children}
|
||||
</InnerModal>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogTrigger
|
||||
onOpenChange={(isOpen) =>
|
||||
setAnimation(
|
||||
isOpen ? AnimationStateEnum.visible : AnimationStateEnum.hidden
|
||||
)
|
||||
}
|
||||
>
|
||||
{trigger}
|
||||
<InnerModal
|
||||
onAnimationComplete={onAnimationComplete}
|
||||
animation={animation}
|
||||
setAnimation={setAnimation}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
withActions={withActions}
|
||||
>
|
||||
{children}
|
||||
</InnerModal>
|
||||
</DialogTrigger>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
:root {
|
||||
--max-width-navigation: 89.5rem;
|
||||
|
||||
--max-width-spacing: calc(var(--Space-x2) * 2);
|
||||
--max-width-page: min(
|
||||
calc(100dvw - var(--max-width-spacing)),
|
||||
var(--max-width-navigation)
|
||||
);
|
||||
}
|
||||
.overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
height: var(--visual-viewport-height);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: var(--Neutral-0);
|
||||
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
|
||||
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* For removing focus outline when modal opens first time */
|
||||
outline: 0 none;
|
||||
|
||||
/* for supporting animations within content */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 100dvh;
|
||||
}
|
||||
|
||||
.header {
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--Space-x3);
|
||||
justify-content: space-between;
|
||||
min-height: min-content;
|
||||
position: relative;
|
||||
padding: var(--Space-x3) var(--Space-x3) 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* align-items: center; */
|
||||
gap: var(--Space-x2);
|
||||
overflow: auto;
|
||||
padding: var(--Space-x3);
|
||||
}
|
||||
|
||||
.close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
:root {
|
||||
--max-width-spacing: calc(var(--Space-x3) * 2);
|
||||
}
|
||||
.overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
width: auto;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
max-width: var(--max-width-page);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
max-height: 90dvh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
:root {
|
||||
--max-width-spacing: calc(var(--Space-x5) * 2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { Dispatch, SetStateAction } from 'react'
|
||||
|
||||
export enum AnimationStateEnum {
|
||||
unmounted = 'unmounted',
|
||||
hidden = 'hidden',
|
||||
visible = 'visible',
|
||||
}
|
||||
|
||||
export type AnimationState = keyof typeof AnimationStateEnum
|
||||
|
||||
export type ModalProps = {
|
||||
onAnimationComplete?: VoidFunction
|
||||
title?: string
|
||||
subtitle?: string
|
||||
withActions?: boolean
|
||||
hideHeader?: boolean
|
||||
} & (
|
||||
| { trigger: JSX.Element; isOpen?: never; onToggle?: never }
|
||||
| {
|
||||
trigger?: never
|
||||
isOpen: boolean
|
||||
onToggle: (open: boolean) => void
|
||||
}
|
||||
)
|
||||
|
||||
export type InnerModalProps = Omit<ModalProps, 'trigger'> & {
|
||||
animation: AnimationState
|
||||
setAnimation: Dispatch<SetStateAction<AnimationState>>
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
export const fade = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
transition: { duration: 0.4, ease: 'easeInOut' },
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { duration: 0.4, ease: 'easeInOut' },
|
||||
},
|
||||
}
|
||||
|
||||
export const slideInOut = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 32,
|
||||
transition: { duration: 0.4, ease: 'easeInOut' },
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.4, ease: 'easeInOut' },
|
||||
},
|
||||
}
|
||||
|
||||
export const slideFromTop = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: -32,
|
||||
transition: { duration: 0.4, ease: 'easeInOut' },
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.4, ease: 'easeInOut' },
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user