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