feat: comment updates

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 (
     <section
-      className={`${styles.paymentSection} ${allRoomsComplete && !isSubmitting ? "" : styles.disabled}`}
+      className={cx(styles.paymentSection, {
+        [styles.disabled]: !allRoomsComplete || isSubmitting,
+      })}
     >
       <header>
         <Title level="h2" as="h4">

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}

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);
-}
+}

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',

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>
   )

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;
   }