scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move divider to design system

Browse Source 
remove not used variants and duplicate colors
This commit is contained in:
Christian Andolf
2025-06-12 15:56:33 +02:00
parent 2dd07eb6b8
commit 9551a629fa
71 changed files with 231 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx
View File

@@ -1,9 +1,9 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { formatPrice } from "@/utils/numberFormatting"
import PriceRow from "./PriceRow"
@@ -42,7 +42,7 @@ export default function PriceSummary({
})}
</h2>
</Typography>
<Divider color="subtle" />
<Divider />
{items.map((item) => (
<Fragment key={item.title}>
@@ -68,7 +68,7 @@ export default function PriceSummary({
})}`}
/>
)}
<Divider color="subtle" />
<Divider />
</Fragment>
))}

12
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx
View File

@@ -1,6 +1,7 @@
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import {
@@ -9,7 +10,6 @@ import {
useAddAncillaryStore,
} from "@/stores/my-stay/add-ancillary-flow"
import Divider from "@/components/TempDesignSystem/Divider"
import { formatPrice } from "@/utils/numberFormatting"
import PriceSummary from "./PriceSummary"
@@ -210,7 +210,7 @@ export default function PriceDetails({
)}
</p>
</Typography>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
</>
) : null}
{hasTotalPrice && (
@@ -224,13 +224,11 @@ export default function PriceDetails({
</p>
</Typography>
)}
{hasTotalPoints && hasTotalPrice && (
<Divider variant="vertical" color="subtle" />
)}
{hasTotalPoints && hasTotalPrice && <Divider variant="vertical" />}
{hasTotalPoints && (
<div>
<div>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
</div>
<Typography variant="Body/Paragraph/mdBold">
<p>
@@ -248,7 +246,7 @@ export default function PriceDetails({
)}
</div>
</div>
<Divider color="subtle" />
<Divider />
{isPriceDetailsOpen && currentStep === AncillaryStepEnum.confirmation && (
<PriceSummary
totalPrice={totalPrice}

8
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
View File

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { PaymentMethodEnum } from "@/constants/booking"
@@ -28,7 +29,6 @@ import {
} from "@/components/HotelReservation/MyStay/utils/ancillaries"
import LoadingSpinner from "@/components/LoadingSpinner"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import { toast } from "@/components/TempDesignSystem/Toasts"
import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
import useLang from "@/hooks/useLang"
@@ -385,7 +385,7 @@ export default function AddAncillaryFlowModal({
</Typography>
{selectedAncillary.points && (
<div className={styles.pointsDivider}>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage(
@@ -471,7 +471,7 @@ function BreakfastPriceList() {
{breakfastData.nrOfPayingChildren > 0 && (
<>
<div className={styles.divider}>
<Divider variant="vertical" color="baseSurfaceSubtleNormal" />
<Divider variant="vertical" color="Border/Divider/Subtle" />
</div>
<Typography variant="Body/Paragraph/mdBold">
@@ -492,7 +492,7 @@ function BreakfastPriceList() {
{breakfastData.nrOfFreeChildren > 0 && (
<>
<div className={styles.divider}>
<Divider variant="vertical" color="baseSurfaceSubtleNormal" />
<Divider variant="vertical" color="Border/Divider/Subtle" />
</div>
<Typography variant="Body/Paragraph/mdBold">

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -1,11 +1,11 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"
@@ -174,7 +174,7 @@ export function AddedAncillaries({
</div>
</div>
<Divider color="baseSurfaceSubtleHover" />
<Divider />
<div className={styles.footer}>
<div className={styles.comment}>

6
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/index.tsx
View File

@@ -1,6 +1,6 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import styles from "./specification.module.css"
@@ -146,7 +146,7 @@ export default async function Specification({
{/****** Ancillaries ********/}
{booking.ancillaries.map((ancillary) => (
<>
<Divider color="subtle" />
<Divider />
<div>
<div className={styles.quantifyingHeader}>
<Typography variant="Body/Supporting text (caption)/smBold">
@@ -197,7 +197,7 @@ export default async function Specification({
{/****** Breakfast ********/}
{displayBreakfastPrice && (
<>
<Divider color="subtle" />
<Divider />
<div>
<div className={styles.quantifyingHeader}>
<Typography variant="Body/Supporting text (caption)/smBold">

4
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/index.tsx
View File

@@ -1,6 +1,6 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import styles from "./total.module.css"
@@ -48,7 +48,7 @@ export default async function Total({ booking, currency }: TotalProps) {
</div>
</Typography>
<Divider color="subtle" />
<Divider />
<dl className={styles.dl}>
<Typography>
<dt>

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx
View File

@@ -1,13 +1,14 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { dt } from "@/lib/dt"
import { trpc } from "@/lib/trpc/client"
import { useMyStayStore } from "@/stores/my-stay"
import Modal from "@/components/HotelReservation/MyStay/Modal"
import PriceContainer from "@/components/HotelReservation/MyStay/ReferenceCard/PriceContainer"
import Divider from "@/components/TempDesignSystem/Divider"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
@@ -148,7 +149,7 @@ export default function Confirmation({
striked
/>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<PriceAndDate
checkInDate={newCheckIn}

4
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
View File

@@ -3,6 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { PaymentMethodEnum } from "@/constants/booking"
@@ -16,7 +17,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import LoadingSpinner from "@/components/LoadingSpinner"
import Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import { toast } from "@/components/TempDesignSystem/Toasts"
@@ -182,7 +182,7 @@ export default function Form() {
</span>
</Typography>
</div>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
<Typography variant="Title/Subtitle/md">
<span className={styles.baseTextHighContrast}>
{formatPrice(intl, 0, currencyCode)}

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Reference/index.tsx
View File

@@ -1,12 +1,11 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./reference.module.css"
export default function Reference() {
@@ -43,7 +42,7 @@ export default function Reference() {
</p>
</Typography>
</div>
<Divider color="subtle" />
<Divider />
</>
)
}

4
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { useGuaranteePaymentFailedToast } from "@/hooks/booking/useGuaranteePaymentFailedToast"
import TotalPrice from "../Rooms/TotalPrice"
@@ -29,7 +29,7 @@ export function ReferenceCard() {
<Room />
<Cancellations />
<GuaranteeInfo />
<Divider color="subtle" />
<Divider />
<div className={styles.row}>
<Typography variant="Body/Lead text">

4
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -11,7 +12,6 @@ import { dt } from "@/lib/dt"
import { IconForFeatureCode } from "@/components/HotelReservation/utils"
import Image from "@/components/Image"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import IconChip from "@/components/TempDesignSystem/IconChip"
import useRateTitles from "@/hooks/booking/useRateTitles"
import useLang from "@/hooks/useLang"
@@ -315,7 +315,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
</Typography>
</div>
)}
<Divider color="subtle" />
<Divider />
<div className={styles.row}>
<Typography variant="Body/Lead text">
<p>