fix/SW-2247 enter details fixes

* fix(SW-2247): Removed accordion like special requests block and changed button variant

* fix(SW-2247): Added additional info for bedtype selection

Approved-by: Tobias Johansson
Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/EnterDetails/Section/index.tsx

@@ -2,8 +2,8 @@
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { useRoomContext } from "@/contexts/Details/Room"
 
 import styles from "./section.module.css"
@@ -15,6 +15,7 @@ export default function Section({
   children,
   header,
   label,
+  additionalInfo,
   step,
   disabled,
 }: React.PropsWithChildren<SectionProps>) {
@@ -49,21 +50,21 @@ export default function Section({
 
   return (
     <div
-      className={`${styles.accordion} ${disabled ? styles.disabled : ""}`}
+      className={`${styles.section} ${disabled ? styles.disabled : ""}`}
       data-step={step}
     >
       <header className={styles.header}>
-        <Footnote
-          className={styles.title}
-          asChild
-          textTransform="uppercase"
-          type="label"
-        >
-          <h2>{header}</h2>
-        </Footnote>
-        <Subtitle className={styles.selection} type="two">
-          {title}
-        </Subtitle>
+        <Typography variant="Title/Overline/sm">
+          <h2 className={styles.heading}>{header}</h2>
+        </Typography>
+        <Typography variant="Title/Subtitle/md">
+          <p className={styles.subheading}>{title}</p>
+        </Typography>
+        {additionalInfo ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.additionalInfo}>{additionalInfo}</p>
+          </Typography>
+        ) : null}
       </header>
       <div className={styles.content}>
         <div className={styles.contentWrapper}>{children}</div>