Merged in feat/LOY-423-Nights-Stayed-Progress-for-L6-Members (pull request #3360)

feat(LOY-423): Add progress bar for L6 members showing nights stayed

* feat(LOY-423): Add progress bar for L6 members showing nights stayed

* chore(LOY-423): shorten css selector


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/L6Progress/ProgressSection.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { Progress } from "@scandic-hotels/design-system/Progress"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./l6Progress.module.css"
+
+interface ProgressSectionProps {
+  nightsStayed: number
+  progressValue: number
+  maxNights: number
+  bestFriendLabel: string
+}
+
+export function ProgressSection({
+  nightsStayed,
+  progressValue,
+  maxNights,
+  bestFriendLabel,
+}: ProgressSectionProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.progressSection}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <span className={styles.startLabelText}>
+          {intl.formatMessage({
+            id: "previousStays.nightsStayed",
+            defaultMessage: "Nights stayed",
+          })}
+        </span>
+      </Typography>
+
+      <Divider variant="vertical" className={styles.startDivider} />
+
+      <Typography variant="Title/Subtitle/md">
+        <span className={styles.startValue}>{nightsStayed}</span>
+      </Typography>
+
+      <Progress
+        className={styles.progressBar}
+        value={progressValue}
+        maxValue={maxNights}
+        aria-label={intl.formatMessage(
+          {
+            id: "previousStays.progressAriaLabel",
+            defaultMessage:
+              "{nightsStayed} of {maxNights} nights stayed towards {levelName}",
+          },
+          {
+            nightsStayed,
+            maxNights,
+            levelName: bestFriendLabel,
+          }
+        )}
+      />
+
+      <Typography variant="Title/Subtitle/md">
+        <span className={styles.endValue}>{maxNights}</span>
+      </Typography>
+
+      <Divider variant="vertical" className={styles.endDivider} />
+
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <span className={styles.endLabelText}>{bestFriendLabel}</span>
+      </Typography>
+    </div>
+  )
+}