diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index cfbd31848..6a17fb09c 100644 --- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx @@ -2,6 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod" import { usePathname, useRouter, useSearchParams } from "next/navigation" +import { cx } from "class-variance-authority" import { useCallback, useEffect, useState } from "react" import { Label } from "react-aria-components" import { FormProvider, useForm } from "react-hook-form" @@ -480,7 +481,9 @@ export default function PaymentClient({ return (
diff --git a/packages/design-system/lib/components/Button/Button.tsx b/packages/design-system/lib/components/Button/Button.tsx index 12f859764..96fcaf6be 100644 --- a/packages/design-system/lib/components/Button/Button.tsx +++ b/packages/design-system/lib/components/Button/Button.tsx @@ -24,24 +24,20 @@ export function Button({ className, }) - let loadingType: LoadingProps['type'] = 'White' - if (variant === 'Secondary') { - if (color === 'Inverted') { - loadingType = 'White' - } else { - loadingType = 'Dark' - } - } else { - if (color === 'Inverted') { - loadingType = 'Dark' - } else { - loadingType = 'White' - } - } - return ( <ButtonRAC {...props} className={classNames}> - {({ isPending }) => { + {({ isPending, isHovered }) => { + let loadingType: LoadingProps['type'] = 'White' + if (variant === 'Secondary') { + if (isHovered || color !== 'Inverted') { + loadingType = 'Dark' + } + } else { + if (color === 'Inverted') { + loadingType = 'Dark' + } + } + return ( <> {children} diff --git a/packages/design-system/lib/components/Button/button.module.css b/packages/design-system/lib/components/Button/button.module.css index e008f3c6d..1e364edc1 100644 --- a/packages/design-system/lib/components/Button/button.module.css +++ b/packages/design-system/lib/components/Button/button.module.css @@ -8,9 +8,14 @@ justify-content: center; gap: var(--Space-x05); - &:disabled { + &:disabled, + &[data-disabled] { cursor: unset; } + + &[data-pending] { + cursor: progress; + } } .size-large { @@ -172,4 +177,4 @@ display: flex; align-items: center; margin-left: var(--Space-x1); -} \ No newline at end of file +} diff --git a/packages/design-system/lib/components/Loading/Loading.stories.tsx b/packages/design-system/lib/components/Loading/Loading.stories.tsx index 242b85b38..31b63ee78 100644 --- a/packages/design-system/lib/components/Loading/Loading.stories.tsx +++ b/packages/design-system/lib/components/Loading/Loading.stories.tsx @@ -3,13 +3,15 @@ import 'react-material-symbols/rounded' import type { Meta, StoryObj } from '@storybook/react' import { Loading } from './Loading' +import { config } from './variants' const meta: Meta<typeof Loading> = { title: 'Components/Loading', component: Loading, argTypes: { type: { - control: 'text', + control: 'select', + options: Object.keys(config.variants.type), }, size: { control: 'number', diff --git a/packages/design-system/lib/components/Loading/Loading.tsx b/packages/design-system/lib/components/Loading/Loading.tsx index 169118ebf..dee430237 100644 --- a/packages/design-system/lib/components/Loading/Loading.tsx +++ b/packages/design-system/lib/components/Loading/Loading.tsx @@ -1,35 +1,40 @@ -import styles from './loading.module.css' import { VariantProps } from 'class-variance-authority' import { variants } from './variants' import { ProgressBar } from 'react-aria-components' export interface LoadingProps extends VariantProps<typeof variants> { + ariaLabel?: string size?: number } -export function Loading({ type, size = 20 }: LoadingProps) { +export function Loading({ + ariaLabel = 'Loading', + size = 20, + type, +}: LoadingProps) { const classNames = variants({ type, }) return ( - <ProgressBar isIndeterminate className={classNames}> + <ProgressBar aria-label={ariaLabel} isIndeterminate className={classNames}> <svg + className={classNames} xmlns="http://www.w3.org/2000/svg" - width={size} - height={size} - viewBox="0 0 20 21" fill="none" + height={size} + viewBox="0 0 20 20" + width={size} > - <circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" /> - <circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" /> - <circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" /> - <circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" /> - <circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" /> - <circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" /> - <circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" /> - <circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" /> + <circle cx="50%" cy="8.6955%" r="8.6955%" /> + <circle cx="80.435%" cy="21.73915%" r="8.6955%" /> + <circle cx="91.3045%" cy="50%" r="8.6955%" /> + <circle cx="80.435%" cy="78.261%" r="8.6955%" /> + <circle cx="50%" cy="91.3045%" r="8.6955%" /> + <circle cx="19.5652%" cy="78.261%" r="8.6955%" /> + <circle cx="8.6955%" cy="50%" r="8.6955%" /> + <circle cx="19.5652%" cy="21.73915%" r="8.6955%" /> </svg> </ProgressBar> ) diff --git a/packages/design-system/lib/components/Loading/loading.module.css b/packages/design-system/lib/components/Loading/loading.module.css index e95810064..0cc388538 100644 --- a/packages/design-system/lib/components/Loading/loading.module.css +++ b/packages/design-system/lib/components/Loading/loading.module.css @@ -1,50 +1,57 @@ .loading { display: flex; align-items: center; -} -.dot { - animation: pulse 0.8s linear infinite; - transform-origin: center; -} + & circle { + animation: pulse 0.8s linear infinite; -.dark .dot { - fill: var(--Icon-Interactive-Default); -} + &:nth-child(1) { + animation-delay: -0.7s; + } -.white .dot { - fill: var(--Icon-Inverted); -} + &:nth-child(2) { + animation-delay: -0.6s; + } -.dot:nth-child(1) { - animation-delay: -0.7s; -} -.dot:nth-child(2) { - animation-delay: -0.6s; -} -.dot:nth-child(3) { - animation-delay: -0.5s; -} -.dot:nth-child(4) { - animation-delay: -0.4s; -} -.dot:nth-child(5) { - animation-delay: -0.3s; -} -.dot:nth-child(6) { - animation-delay: -0.2s; -} -.dot:nth-child(7) { - animation-delay: -0.1s; -} -.dot:nth-child(8) { - animation-delay: 0s; + &:nth-child(3) { + animation-delay: -0.5s; + } + + &:nth-child(4) { + animation-delay: -0.4s; + } + + &:nth-child(5) { + animation-delay: -0.3s; + } + + &:nth-child(6) { + animation-delay: -0.2s; + } + + &:nth-child(7) { + animation-delay: -0.1s; + } + + &:nth-child(8) { + animation-delay: 0s; + } + } + + &.dark circle { + fill: var(--Icon-Interactive-Default); + } + + &.white circle { + fill: var(--Icon-Inverted); + } } @keyframes pulse { 0% { opacity: 1; } + 100% { opacity: 0; }