Merged in feat/BOOK-529-update-GLA-design-mystay (pull request #3230)

Feat/BOOK-529 update GLA design mystay

* feat(BOOK-529): update gla design on my stay

* feat(BOOK-529): open gla modal if error

* feat(BOOK-529): add inline accordion to storybook

* feat(529): move errormessage below message

* feat(529): update infomodal

* feat(BOOK-529): update infomodal

* feat(BOOK-529): hide guarantee info for adding ancillaries if prepaid

* feat(BOOK-529): update width on info dialog

* feat(BOOK-529): fix alignment

* feat(BOOK-529): check if member price

* feat(BOOK-529): refactor msg

* feat(BOOK-529): refactor terms and conditions to own component

* feat(BOOK-529): clean up confirmation step


Approved-by: Christel Westerberg

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

@@ -12,7 +12,7 @@ const meta: Meta<typeof Accordion> = {
   argTypes: {
     type: {
       control: 'select',
-      options: ['card', 'sidepeek'],
+      options: ['card', 'sidepeek', 'inline'],
     },
   },
 }
@@ -137,3 +137,22 @@ export const WithSubtitle: Story = {
     </Accordion>
   ),
 }
+
+export const Inline: Story = {
+  args: {
+    type: 'inline',
+  },
+  render: () => (
+    <Accordion type="inline">
+      <AccordionItem title="Read more about our rooms">
+        <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>
+    </Accordion>
+  ),
+}

packages/design-system/lib/components/Accordion/AccordionItem/accordionItem.module.css

@@ -18,6 +18,19 @@
     }
   }
 
+  &.inline {
+    list-style: none;
+    padding: var(--Space-x15);
+    background-color: var(--Surface-Primary-Default);
+    .content {
+      padding: var(--Space-x1) 0 0 0;
+    }
+
+    .summary:hover {
+      background-color: transparent;
+    }
+  }
+
   .summary:hover {
     background-color: var(--Surface-Primary-Hover);
   }

packages/design-system/lib/components/Accordion/AccordionItem/index.tsx

@@ -93,6 +93,10 @@ export default function AccordionItem({
             <Typography variant="Title/Subtitle/md">
               <p className={styles.title}>{title}</p>
             </Typography>
+          ) : type === 'inline' ? (
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p className={styles.title}>{title}</p>
+            </Typography>
           ) : (
             <div className={styles.title}>
               {subtitle || showAsSubtitle ? (

packages/design-system/lib/components/Accordion/AccordionItem/variants.ts

@@ -7,6 +7,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
     type: {
       card: styles.card,
       sidepeek: styles.sidepeek,
+      inline: styles.inline,
     },
   },
   defaultVariants: {

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

@@ -7,6 +7,7 @@ export const accordionVariants = cva(styles.accordion, {
     type: {
       card: styles.card,
       sidepeek: styles.sidepeek,
+      inline: styles.inline,
     },
   },
   defaultVariants: {