Merged in feat/profile-consent-feature-branch (pull request #2900)

feat(LOY-268): Feature branch for profiling consent work * feat: Add feature branch for profile and consent work * Merged in feat/LOY-268-profile-consent-banner-comp (pull request #2908) Feat/LOY-358 profile consent banner component * feat: Add feature branch for profile and consent work * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component Approved-by: Chuma Mcphoy (We Ahead) * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): minor fixes * fix(LOY-347): replace old spa icon * fix(LOY-347): re-add env vars * fix(LOY-347): File renaming and cleanup * chore(LOY-347): Update readme * fix(LOY-347): use correct space var * fix(LOY-347): Add TODO comment for adding link to accordion Approved-by: Matilda Landström * Merged in fix/LOY-386-profiling-consent-modal-contentstack (pull request #2930) Fix(LOY-386): profiling consent modal contentstack * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): minor fixes * fix(LOY-347): replace old spa icon * fix(LOY-347): re-add env vars * fix(LOY-347): File renaming and cleanup * fix(LOY-386): Use contentstack content for profile consent modal * fix(LOY-386): beneift cards schema transform * chore(LOY-386): remove usememo * fix(LOY-386): fix modalcontent check * fix(LOY-386): remove uneeded vars Approved-by: Matilda Landström * Merged in feat/LOY-412-profiling-consent-in-signup (pull request #2976) Feat(LOY-412): profiling consent in signup * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Ico… * Merged in fix/lokalise-ids (pull request #3013) fix: add ids to translations in Profiling Consent * fix: add ids to translations Approved-by: Erik Tiekstra Approved-by: Chuma Mcphoy (We Ahead) * Merged in LOY-436-my-pages-profiling-consent (pull request #3011) LOY-436: Profiling Consent on My Profile, no api Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-418-profiling-consent-ui-text-update (pull request #3080) Feat/LOY-418: Profiling consent ui and text update * chore(LOY-418): update /consent buttons * chore(LOY-418): update legal texts Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-268-profiling-consent-api (pull request #3088) Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-413-Signup-API-Profiling-Consent (pull request #3105) Feat/LOY-413 Signup API Profiling Consent * feat(LOY-413): signup profiling consent * chore(LOY-413): remove todo * fix(LOY-413): only pass in profilingConsent if true * fix(LOY-413): proper spread of profilingConsent in signup input Approved-by: Christel Westerberg * Merged in fix/LOY-413-use-v2-for-signup-call (pull request #3112) fix(LOY-413): use v2 endpoint for profile POST in signup * fix(LOY-413): use v2 endpoint for profile POST in signup Approved-by: Erik Tiekstra * Merged in feat/LOY-268-profiling-consent-improvements (pull request #3094) Feat/LOY-268: Profiling consent improvements * Merged in feat/profile-consent-contentstack (pull request #2921) Feat(LOY-389): Profile consent in Contentstack * feat(LOY-268): create banner * feat(LOY-268): Create personalization banner component * chore(LOY-348): add profiling consent as CS entry * chore(LOY-348): add banner as dynamic content Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-347-Profile-consent-modal-phase-1 (pull request #2901) Feat(LOY-347): Profiling Consent Modal (phase 1) * feat(LOY-347): Profile Consent Modal base functionality * feat(LOY-347): Add Icon * feat(LOY-347): Add Benefit Cards to Profile consent modal * feat(LOY-347): Add accordion to profile consent modal * fix(LOY-347): scroll behaviour * Fix(LOY-347): fade in/out animations of profile consent modal * fix(LOY-347): White Ellipsis Around Icons * feat(LOY-347): Implement ability to open modal from banner * fix(LOY-347): min… * Merged in fix/update-graphql (pull request #3130) fix: update graphql * fix: update graphql Approved-by: Chuma Mcphoy (We Ahead) * Merged in feat/LOY-414-prof-consent-tracking (pull request #3127) Feat/LOY-414 profile consent tracking + credit card ui update * chore(LOY-414): create track link function * chore(LOY-414): add cta tracking * chore(LOY-414): add profileConsent to userInfo datalayer * chore(LOY-414): update credit card ui * chore(LOY-414): update tracking specs * chore(LOY-414): add pageView tracking to modal Approved-by: Chuma Mcphoy (We Ahead) * fix: remove old flag * Merged in fix/LOY-268-prof-consent-button-fix (pull request #3162) fix(LOY-268): add button as link * fix(LOY-268): add button as link Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
2025-11-14 13:28:56 +00:00
parent 9260cc0f81
commit 494bfe10f3
79 changed files with 9332 additions and 268 deletions
--- a/packages/design-system/lib/components/Accordion/Accordion.stories.tsx
+++ b/packages/design-system/lib/components/Accordion/Accordion.stories.tsx
@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import Accordion from './index'
+import AccordionItem from './AccordionItem/index'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { IconName } from '../Icons/iconName'
+import { Typography } from '../Typography'
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['card', 'sidepeek'],
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  args: {
+    type: 'card',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem title="General Information">
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            All rooms feature comfortable beds, modern amenities, and
+            complimentary Wi-Fi. Check-in is available from 3 PM and check-out
+            is at 12 PM.
+          </p>
+        </Typography>
+      </AccordionItem>
+      <AccordionItem title="Breakfast & Dining">
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Our breakfast buffet is served daily from 6:30 AM to 10:00 AM. We
+            offer a wide selection of hot and cold dishes, including vegetarian
+            and gluten-free options.
+          </p>
+        </Typography>
+      </AccordionItem>
+      <AccordionItem title="Parking & Transportation">
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            On-site parking is available for guests at a daily rate. The hotel
+            is conveniently located near public transportation, with the nearest
+            metro station just a 5-minute walk away.
+          </p>
+        </Typography>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const WithIcons: Story = {
+  args: {
+    type: 'card',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem title="Hotel Facilities" iconName={IconName.House}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Our hotel features a fitness center, business lounge, and 24-hour
+            reception. Guests also have access to our rooftop terrace with
+            panoramic city views.
+          </p>
+        </Typography>
+      </AccordionItem>
+      <AccordionItem title="Wellness & Spa" iconName={IconName.Spa}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Relax and unwind in our wellness area featuring a sauna, steam room,
+            and massage treatments. Advanced booking is recommended for spa
+            services.
+          </p>
+        </Typography>
+      </AccordionItem>
+      <AccordionItem
+        title="Conference Rooms"
+        icon={
+          <MaterialIcon
+            icon="meeting_room"
+            color="Icon/Interactive/Default"
+            size={24}
+          />
+        }
+      >
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            We offer flexible meeting spaces for 10 to 200 people, equipped with
+            modern AV technology and high-speed internet. Catering packages are
+            available upon request.
+          </p>
+        </Typography>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
+
+export const WithSubtitle: Story = {
+  args: {
+    type: 'card',
+  },
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem title="Standard Room" subtitle="From €120/night">
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Comfortable room with queen-size bed, work desk, and private
+            bathroom. Perfect for solo travelers or couples.
+          </p>
+        </Typography>
+      </AccordionItem>
+      <AccordionItem title="Family Suite" subtitle="From €180/night">
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            Spacious suite with separate sleeping areas, ideal for families.
+            Includes one double bed and two single beds, plus a sofa bed.
+          </p>
+        </Typography>
+      </AccordionItem>
+      <AccordionItem title="Premium with Subtitle Style" showAsSubtitle>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            This item uses the showAsSubtitle prop to render the title with
+            subtitle typography styling, without an actual subtitle.
+          </p>
+        </Typography>
+      </AccordionItem>
+    </Accordion>
+  ),
+}
--- a/packages/design-system/lib/components/Accordion/AccordionItem/index.tsx
+++ b/packages/design-system/lib/components/Accordion/AccordionItem/index.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { type ReactNode, useRef } from 'react'
+import { type ReactNode, useEffect, useRef } from 'react'

 import { IconByIconName } from '../../Icons/IconByIconName'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
@@ -23,6 +23,7 @@ export interface AccordionItemProps
  subtitle?: string
  showAsSubtitle?: boolean
  onOpen?: () => void
+  openedOnRender?: boolean
 }

 export default function AccordionItem({
@@ -36,6 +37,7 @@ export default function AccordionItem({
  subtitle,
  showAsSubtitle = false,
  onOpen,
+  openedOnRender = false,
 }: AccordionItemProps) {
  const contentRef = useRef<HTMLDivElement>(null)
  const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -72,6 +74,14 @@ export default function AccordionItem({
    }
  }

+  useEffect(() => {
+    if (openedOnRender && detailsRef.current) {
+      requestAnimationFrame(() => {
+        detailsRef.current!.open = true
+      })
+    }
+  }, [openedOnRender])
+
  const TitleLevel = titleLevel

  return (