feat: add mobile design to accordions

2024-11-11 10:15:47 +01:00
parent 66b2dc0c78
commit ee6aa8d188
9 changed files with 164 additions and 86 deletions
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { useEnterDetailsStore } from "@/stores/enter-details"

 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

@@ -72,9 +71,10 @@ export default function SectionAccordion({
        </div>
      </div>
      <div className={styles.main}>
-        <header className={styles.headerContainer}>
-          <div>
+        <header>
+          <button onClick={onModify} className={styles.modifyButton}>
            <Footnote
+              className={styles.title}
              asChild
              textTransform="uppercase"
              type="label"
@@ -83,26 +83,17 @@ export default function SectionAccordion({
              <h2>{header}</h2>
            </Footnote>
            <Subtitle
-              type="two"
              className={styles.selection}
+              type="two"
              color="uiTextHighContrast"
            >
              {title}
            </Subtitle>
-          </div>
-          {isComplete && !isOpen && (
-            <Button
-              onClick={onModify}
-              theme="base"
-              size="small"
-              variant="icon"
-              intent="text"
-              wrapping
-            >
-              {intl.formatMessage({ id: "Modify" })}{" "}
-              <ChevronDownIcon color="burgundy" width={20} height={20} />
-            </Button>
-          )}
+
+            {isComplete && !isOpen && (
+              <ChevronDownIcon className={styles.button} color="burgundy" />
+            )}
+          </button>
        </header>
        <div className={styles.content}>{children}</div>
      </div>
--- a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
@@ -2,25 +2,33 @@
  position: relative;
  display: flex;
  flex-direction: row;
-  gap: var(--Spacing-x3);
-
+  gap: var(--Spacing-x-one-and-half);
  padding-top: var(--Spacing-x3);
 }

-.wrapper:not(:last-child)::after {
-  position: absolute;
-  left: 12px;
-  bottom: 0;
-  top: var(--Spacing-x5);
-  height: 100%;
-  content: "";
-  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-}
-
 .wrapper:last-child .main {
  border-bottom: none;
 }

+.modifyButton {
+  display: grid;
+  grid-template-areas: "title button" "selection button";
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  width: 100%;
+}
+
+.title {
+  grid-area: title;
+  text-align: start;
+}
+
+.button {
+  grid-area: button;
+  justify-self: flex-end;
+}
+
 .main {
  display: grid;
  gap: var(--Spacing-x3);
@@ -31,21 +39,14 @@
  grid-template-rows: 2em 0fr;
 }

-.headerContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .selection {
  font-weight: 450;
  font-size: var(--typography-Title-4-fontSize);
+  grid-area: selection;
 }

 .iconWrapper {
  position: relative;
-  top: var(--Spacing-x1);
-  z-index: 1;
 }

 .circle {
@@ -78,3 +79,23 @@
 .content {
  overflow: hidden;
 }
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    gap: var(--Spacing-x3);
+  }
+
+  .iconWrapper {
+    top: var(--Spacing-x1);
+  }
+
+  .wrapper:not(:last-child)::after {
+    position: absolute;
+    left: 12px;
+    bottom: 0;
+    top: var(--Spacing-x7);
+    height: 100%;
+    content: "";
+    border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+}
--- a/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"

 import useSidePeekStore from "@/stores/sidepeek"

+import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"

 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
@@ -28,6 +29,7 @@ export default function ToggleSidePeek({
      wrapping
    >
      {intl.formatMessage({ id: "See room details" })}{" "}
+      <ChevronRight height="14" />
    </Button>
  )
 }
--- a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
@@ -33,26 +33,25 @@ export default function SelectedRoom({
      </div>
      <div className={styles.main}>
        <div className={styles.headerContainer}>
-          <div>
-            <Footnote
-              asChild
-              textTransform="uppercase"
-              type="label"
-              color="uiTextHighContrast"
-            >
-              <h2>{intl.formatMessage({ id: "Your room" })}</h2>
-            </Footnote>
-            <Subtitle
-              type="two"
-              className={styles.selection}
-              color="uiTextHighContrast"
-            >
-              {room.roomType}{" "}
-              <span className={styles.rate}>{`(${rateDescription})`}</span>
-            </Subtitle>
-          </div>
-
+          <Footnote
+            className={styles.title}
+            asChild
+            textTransform="uppercase"
+            type="label"
+            color="uiTextHighContrast"
+          >
+            <h2>{intl.formatMessage({ id: "Your room" })}</h2>
+          </Footnote>
+          <Subtitle
+            type="two"
+            className={styles.description}
+            color="uiTextHighContrast"
+          >
+            {room.roomType}{" "}
+            <span className={styles.rate}>{rateDescription}</span>
+          </Subtitle>
          <Link
+            className={styles.button}
            color="burgundy"
            href={selectRateUrl}
            size="small"
--- a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css
@@ -2,43 +2,42 @@
  position: relative;
  display: flex;
  flex-direction: row;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x-one-and-half);
  padding-top: var(--Spacing-x3);
 }

-.wrapper::after {
-  position: absolute;
-  left: 12px;
-  bottom: 0;
-  top: var(--Spacing-x5);
-  height: 100%;
-  content: "";
-  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-}
-
 .main {
-  display: grid;
  width: 100%;
  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
  padding-bottom: var(--Spacing-x3);
-  grid-template-rows: 2em 0fr;
 }

 .headerContainer {
-  display: flex;
+  display: grid;
  justify-content: space-between;
  align-items: center;
+  grid-template-areas:
+    "title button"
+    "description button";
 }

-.selection {
+.title {
+  grid-area: title;
+}
+
+.description {
  font-weight: 450;
  font-size: var(--typography-Title-4-fontSize);
+  grid-area: description;
+}
+
+.button {
+  grid-area: button;
+  justify-self: flex-end;
 }

 .iconWrapper {
  position: relative;
-  top: var(--Spacing-x1);
-  z-index: 1;
 }

 .circle {
@@ -57,9 +56,41 @@

 .rate {
  color: var(--UI-Text-Placeholder);
+  display: block;
 }

 .details {
  display: flex;
  justify-content: flex-start;
 }
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    gap: var(--Spacing-x3);
+  }
+
+  .iconWrapper {
+    top: var(--Spacing-x1);
+  }
+
+  .rate {
+    display: inline;
+  }
+
+  .rate::before {
+    content: "(";
+  }
+  .rate::after {
+    content: ")";
+  }
+
+  .wrapper:not(:last-child)::after {
+    position: absolute;
+    left: 12px;
+    bottom: 0;
+    top: var(--Spacing-x7);
+    height: 100%;
+    content: "";
+    border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+}
--- a/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css
+++ b/components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css
@@ -19,7 +19,7 @@
  transition: 0.5s ease-in-out;
 }

-.priceDetails {
+.priceDetailsButton {
  display: block;
  border: none;
  background: none;
@@ -28,6 +28,7 @@
  transition:
    opacity 0.5s ease-in-out,
    padding 0.5s ease-in-out;
+  cursor: pointer;
 }

 .wrapper[data-open="true"] {
@@ -38,12 +39,12 @@
  grid-template-columns: 0fr 1fr;
 }

-.wrapper[data-open="true"] .priceDetails {
+.wrapper[data-open="true"] .priceDetailsButton {
  opacity: 0;
  padding: 0;
 }

 .content,
-.priceDetails {
+.priceDetailsButton {
  overflow: hidden;
 }
--- a/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx
@@ -8,7 +8,6 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { formatNumber } from "@/utils/format"

 import styles from "./bottomSheet.module.css"

@@ -30,14 +29,14 @@ export function SummaryBottomSheet({ children }: PropsWithChildren) {
        <button
          data-open={isSummaryOpen}
          onClick={toggleSummaryOpen}
-          className={styles.priceDetails}
+          className={styles.priceDetailsButton}
        >
          <Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
          <Subtitle>
            {intl.formatMessage(
              { id: "{amount} {currency}" },
              {
-                amount: formatNumber(totalPrice.local.price),
+                amount: intl.formatNumber(totalPrice.local.price),
                currency: totalPrice.local.currency,
              }
            )}
--- a/components/HotelReservation/EnterDetails/Summary/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/index.tsx
@@ -1,12 +1,14 @@
 "use client"

 import { useEffect, useState } from "react"
+import { ChevronDown } from "react-feather"
 import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"
 import { useEnterDetailsStore } from "@/stores/enter-details"

-import { ArrowRightIcon, CloseIcon } from "@/components/Icons"
+import { ArrowRightIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -116,18 +118,25 @@ export default function Summary({
    })
  }, [room.localPrice, room.euroPrice, setTotalPrice])

-  const showToggleButton = true
-
  return (
    <section className={styles.summary}>
-      <header>
-        <Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
+      <header className={styles.header}>
+        <Subtitle className={styles.title} type="two">
+          {intl.formatMessage({ id: "Summary" })}
+        </Subtitle>
        <Body className={styles.date} color="baseTextMediumContrast">
          {dt(fromDate).locale(lang).format("ddd, D MMM")}
          <ArrowRightIcon color="peach80" height={15} width={15} />
          {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
        </Body>
-        {showToggleButton ? <CloseIcon onClick={toggleSummaryOpen} /> : null}
+        <Button
+          intent="text"
+          size="small"
+          className={styles.chevronButton}
+          onClick={toggleSummaryOpen}
+        >
+          <ChevronDown height="20" width="20" />
+        </Button>
      </header>
      <Divider color="primaryLightSubtle" />
      <div className={styles.addOns}>
--- a/components/HotelReservation/EnterDetails/Summary/summary.module.css
+++ b/components/HotelReservation/EnterDetails/Summary/summary.module.css
@@ -7,11 +7,28 @@
  height: 100%;
 }

+.header {
+  display: grid;
+  grid-template-areas: "title button" "date button";
+}
+
+.title {
+  grid-area: title;
+}
+
+.chevronButton {
+  grid-area: button;
+  justify-self: end;
+  align-items: center;
+  margin-right: calc(0px - var(--Spacing-x2));
+}
+
 .date {
  align-items: center;
  display: flex;
  gap: var(--Spacing-x1);
  justify-content: flex-start;
+  grid-area: date;
 }

 .link {
@@ -47,4 +64,12 @@
  .bottomDivider {
    display: block;
  }
+
+  .header {
+    display: block;
+  }
+
+  .chevronButton {
+    display: none;
+  }
 }