Merged in feat/LOY-316-Level-Progress-Card (pull request #2739)

Feat/LOY-316 Level Progress Card

* feat(LOY-315): Add MembershipOverviewCard

* refactor(LOY-315): abstract sasbooststatus

* feat(LOY-316): build out LevelProgressCard skeleton & variant styling

* feat(LOY-316): Add HighesMembershipCard

* feat(LOY-316): ProgressBarCard base

* refactor(LOY-315): highest level card misc fixes

* feat(LOY-316): Add progress component to design system

* fix(LOY-316): type check

* refactor(LOY-316): calculate currentEarnings correctly

* fix(LOY-316): sas icon showing when not boosted

* fix(LOY-316): css module

* refactor(LOY-316): Restructure components

* feat(LOY-316): Add marker pin 📍

* fix(LOY-316): strict equality checks

* fix(LOY-316): code review fixes

* chore(LOY-316): conditionally hide old section under flag

* feat(LOY-316): Add level progress card to my points page

* chore(LOY-316): marker label container height


Approved-by: Matilda Landström

packages/design-system/lib/components/Icons/IllustrationByIconName.ts

@@ -10,6 +10,7 @@ import KidsIcon from './Illustrations/Kids'
 import KidsMocktailIcon from './Illustrations/KidsMocktail'
 import MagicWandIcon from './Illustrations/MagicWand'
 import MoneyHandIcon from './Illustrations/MoneyHand'
+import TrophyIcon from './Illustrations/Trophy'
 import VoucherIcon from './Illustrations/Voucher'
 
 import { IconName } from './iconName'
@@ -40,6 +41,8 @@ export function IllustrationByIconName(iconName: IconName | null) {
       return CoinIcon
     case IconName.Bed:
       return BedIcon
+    case IconName.Trophy:
+      return TrophyIcon
     case IconName.Voucher:
       return VoucherIcon
     default:

packages/design-system/lib/components/Icons/iconName.ts

@@ -169,6 +169,7 @@ export enum IconName {
   Ticket = 'Ticket',
   Train = 'Train',
   Tripadvisor = 'Tripadvisor',
+  Trophy = 'Trophy',
   Tshirt = 'Tshirt',
   TshirtWash = 'TshirtWash',
   TvCasting = 'TvCasting',

packages/design-system/lib/components/Progress/Progress.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { Progress } from './index'
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  parameters: {
+    backgrounds: { disable: true },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'The current progress value (0-100)',
+    },
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible label for the progress bar',
+    },
+  },
+  args: {
+    'aria-label': 'Loading progress',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Progress>
+
+export const Default: Story = {
+  args: {
+    value: 65,
+  },
+}
+
+export const LowProgress: Story = {
+  args: {
+    value: 15,
+  },
+}
+
+export const HighProgress: Story = {
+  args: {
+    value: 90,
+  },
+}
+
+export const Complete: Story = {
+  args: {
+    value: 100,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    value: 0,
+  },
+}

packages/design-system/lib/components/Progress/index.tsx

@@ -0,0 +1,30 @@
+import { ProgressBar } from 'react-aria-components'
+import { cx } from 'class-variance-authority'
+import styles from './progress.module.css'
+import { ProgressProps } from './types'
+
+export function Progress({
+  value,
+  minValue = 0,
+  maxValue = 100,
+  'aria-label': ariaLabel,
+  className,
+}: ProgressProps) {
+  return (
+    <ProgressBar
+      value={value}
+      minValue={minValue}
+      maxValue={maxValue}
+      aria-label={ariaLabel}
+      className={cx(styles.progress, className)}
+    >
+      {({ percentage }) => (
+        <>
+          <div className={styles.track}>
+            <div className={styles.fill} style={{ width: `${percentage}%` }} />
+          </div>
+        </>
+      )}
+    </ProgressBar>
+  )
+}

packages/design-system/lib/components/Progress/progress.module.css

@@ -0,0 +1,19 @@
+.progress {
+  width: 100%;
+}
+
+.track {
+  height: var(--Space-x2);
+  border-radius: var(--Corner-radius-md);
+  padding: var(--Space-x05);
+  background: var(--Surface-Secondary-Default);
+  position: relative;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  border-radius: var(--Corner-radius-md);
+  transition: width 0.3s ease;
+}

packages/design-system/lib/components/Progress/types.ts

@@ -0,0 +1,7 @@
+export interface ProgressProps {
+  value: number
+  minValue?: number
+  maxValue?: number
+  'aria-label'?: string
+  className?: string
+}

packages/design-system/lib/components/Progress/variants.ts

@@ -0,0 +1,10 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './progress.module.css'
+
+export const config = {
+  variants: {},
+  defaultVariants: {},
+} as const
+
+export const variants = cva(styles.progress, config)

packages/design-system/package.json

@@ -121,6 +121,7 @@
     "./Icons/ToiletIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/toilet-2.tsx",
     "./Icons/TowelIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Towel.tsx",
     "./Icons/TripadvisorIcon": "./lib/components/Icons/Customised/Socials/Tripadvisor.tsx",
+    "./Icons/TrophyIcon": "./lib/components/Icons/Illustrations/Trophy.tsx",
     "./Icons/UserPoliceIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/user-police-2.tsx",
     "./Icons/ViewIcon": "./lib/components/Icons/Customised/Amenities_Facilities/View.tsx",
     "./Icons/VoucherIcon": "./lib/components/Icons/Illustrations/Voucher.tsx",
@@ -152,6 +153,7 @@
     "./Payment/PaymentMethodIcon": "./lib/components/Payment/PaymentMethodIcon.tsx",
     "./PointsRateCard": "./lib/components/RateCard/Points/index.tsx",
     "./Preamble": "./lib/components/Preamble/index.tsx",
+    "./Progress": "./lib/components/Progress/index.tsx",
     "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
     "./Select": "./lib/components/Select/index.tsx",
     "./SidePeek": "./lib/components/SidePeek/index.tsx",