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

2
apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/index.tsx
View File

@@ -1,4 +1,4 @@
import Divider from "@/components/TempDesignSystem/Divider"
import { Divider } from "@scandic-hotels/design-system/Divider"
import ExpiringPoints from "./ExpiringPoints"
import Points from "./Points"

3
apps/scandic-web/components/Blocks/DynamicContent/Overview/index.tsx
View File

@@ -1,3 +1,5 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { env } from "@/env/server"
import { getProfile } from "@/lib/trpc/memoizedRequests"
@@ -6,7 +8,6 @@ import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCa
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Divider from "@/components/TempDesignSystem/Divider"
import Hero from "./Friend/Hero"
import MembershipNumber from "./Friend/MembershipNumber"

3
apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx
View File

@@ -1,9 +1,10 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { getProfile } from "@/lib/trpc/memoizedRequests"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Divider from "@/components/TempDesignSystem/Divider"
import Friend from "../../Overview/Friend"
import Hero from "../../Overview/Friend/Hero"

7
apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
View File

@@ -1,9 +1,9 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ButtonLink from "@/components/ButtonLink"
import Image from "@/components/Image"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -47,7 +47,7 @@ export default async function HotelListingItem({
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={styles.captions}>
<span>{hotel.address.streetAddress}</span>
<Divider variant="vertical" color="Border/Divider/Default" />
<Divider variant="vertical" />
<span>
{intl.formatMessage(
{
@@ -71,8 +71,7 @@ export default async function HotelListingItem({
<>
<Divider
className={styles.ctaDivider}
variant="horizontal"
color="borderDividerSubtle"
color="Border/Divider/Subtle"
/>
<ButtonLink
variant="Primary"

8
apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -4,13 +4,13 @@ import { Button } from "react-aria-components"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import useLang from "@/hooks/useLang"
import styles from "./button.module.css"
@@ -112,8 +112,8 @@ export default function MobileToggleButton({
</span>
</Typography>
</span>
{/* Divider can't be a div */}
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
{/* Button can't contain HR elements */}
<Divider color="Border/Divider/Subtle" variant="vertical" />
<span className={styles.block}>
<Typography variant={"Body/Supporting text (caption)/smBold"}>
<span className={styles.blockLabel}>{totalNightsMsg}</span>
@@ -185,7 +185,7 @@ export function MobileToggleButtonSkeleton() {
</Typography>
<SkeletonShimmer display={"block"} height="20px" width="11ch" />
</span>
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<Divider color="Border/Divider/Subtle" variant="vertical" />
<span className={styles.block}>
<Typography variant="Body/Supporting text (caption)/smBold">
<span className={styles.blockLabel}>

5
apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/CityListingItemSkeleton.tsx
View File

@@ -1,7 +1,8 @@
"use client"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import ExperienceListSkeleton from "../../ExperienceList/ExperienceListSkeleton"
@@ -23,7 +24,7 @@ export default function CityListingItemSkeleton() {
<SkeletonShimmer height="20px" width="40%" />
</div>
<Divider variant="horizontal" color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<div className={styles.ctaWrapper}>
<SkeletonShimmer height="45px" width="100px" />

5
apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx
View File

@@ -3,9 +3,10 @@
import Link from "next/link"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -47,7 +48,7 @@ export default function CityListingItem({ city }: CityListingItemProps) {
) : null}
<Body>{city.preamble}</Body>
<Divider variant="horizontal" color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<div className={styles.ctaWrapper}>
<Button

8
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
View File

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef } from "react"
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,7 +14,6 @@ import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hote
import ButtonLink from "@/components/ButtonLink"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -102,11 +102,7 @@ export default function HotelListItem(data: DestinationPagesHotelData) {
</ButtonRAC>
</Typography>
<span>
<Divider
className={styles.divider}
variant="vertical"
color="Border/Divider/Default"
/>
<Divider variant="vertical" />
</span>
<span>
{intl.formatMessage(

5
apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/index.tsx
View File

@@ -1,5 +1,6 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import Accordion from "@/components/TempDesignSystem/Accordion"
import Divider from "@/components/TempDesignSystem/Divider"
import Destination from "./Destination"
@@ -27,7 +28,7 @@ export function DestinationsList({ destinations }: DestinationsListProps) {
) : null
)}
</Accordion>
<Divider color="subtle" className={styles.divider} />
<Divider className={styles.divider} />
<Accordion className={styles.accordion}>
{accordionRight.map((data) =>
data.numberOfHotels > 0 ? (

5
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/HotelListingItemSkeleton.tsx
View File

@@ -1,7 +1,8 @@
"use client"
import { Divider } from "@scandic-hotels/design-system/Divider"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./hotelListingItem.module.css"
@@ -31,7 +32,7 @@ export default function HotelListingItemSkeleton() {
))}
</ul>
<SkeletonShimmer height="40px" width="100px" />
<Divider variant="horizontal" color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<div className={styles.ctaWrapper}>
<SkeletonShimmer height="45px" width="150px" />
</div>

6
apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx
View File

@@ -5,6 +5,7 @@ import { useParams } from "next/navigation"
import { useEffect, useState } from "react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
@@ -15,7 +16,6 @@ import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hote
import ButtonLink from "@/components/ButtonLink"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -85,7 +85,7 @@ export default function HotelListingItem(data: DestinationPagesHotelData) {
{address}
</NextLink>
</Typography>
<Divider variant="vertical" color="beige" />
<Divider variant="vertical" />
</>
) : null}
<p>
@@ -143,7 +143,7 @@ export default function HotelListingItem(data: DestinationPagesHotelData) {
)}
{url && (
<>
<Divider variant="horizontal" color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<div className={styles.ctaWrapper}>
<ButtonLink

4
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/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 SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n"
@@ -36,7 +36,7 @@ export default async function AboutTheHotelSidePeek({
socials={socials}
ecoLabels={ecoLabels}
/>
<Divider color="baseSurfaceSubtleHover" />
<Divider />
{descriptions.descriptions ? (
<Typography variant="Body/Lead text">

4
apps/scandic-web/components/ContentType/HotelSubpage/AccessibilitySubpage/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 HeroHeader from "../HeroHeader"
@@ -48,7 +48,7 @@ export default async function AccessibilitySubpage({
</h1>
</Typography>
<Divider color="baseSurfaceSubtleHover" className={styles.divider} />
<Divider className={styles.divider} />
<main className={styles.mainContent}>
{elevatorPitch ? (

4
apps/scandic-web/components/ContentType/HotelSubpage/MeetingsSubpage/index.tsx
View File

@@ -1,11 +1,11 @@
import { safeTry } from "@scandic-hotels/common/utils/safeTry"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getMeetingRooms } from "@/lib/trpc/memoizedRequests"
import { meetingPackageDestinationByHotelId } from "@/components/MeetingPackageWidget/utils"
import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
@@ -62,7 +62,7 @@ export default async function MeetingsSubpage({
/>
) : null}
</aside>
<Divider color="baseSurfaceSubtleHover" className={styles.divider} />
<Divider className={styles.divider} />
<main className={styles.mainContent}>
{elevatorPitch ? (
<div className={styles.intro}>

4
apps/scandic-web/components/ContentType/HotelSubpage/ParkingSubpage/index.tsx
View File

@@ -1,7 +1,7 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ParkingInformation from "@/components/ParkingInformation"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import HeroHeader from "../HeroHeader"
@@ -44,7 +44,7 @@ export default async function ParkingSubpage({
contactInformation={hotel.contactInformation}
/>
</aside>
<Divider color="baseSurfaceSubtleHover" className={styles.divider} />
<Divider className={styles.divider} />
<main className={styles.mainContent}>
{elevatorPitch ? (
<div className={styles.intro}>

4
apps/scandic-web/components/ContentType/HotelSubpage/RestaurantSubpage/index.tsx
View File

@@ -1,7 +1,7 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ButtonLink from "@/components/ButtonLink"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import HeroHeader from "../HeroHeader"
@@ -41,7 +41,7 @@ export default async function RestaurantSubpage({
hotelAddress={hotelAddress}
/>
</aside>
<Divider color="baseSurfaceSubtleHover" className={styles.divider} />
<Divider className={styles.divider} />
<main className={styles.mainContent}>
{elevatorPitch ? (
<div className={styles.intro}>

4
apps/scandic-web/components/ContentType/HotelSubpage/WellnessSubpage/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 HeroHeader from "../HeroHeader"
@@ -46,7 +46,7 @@ export default async function WellnessSubpage({
healthFacilities={hotel.healthFacilities}
/>
</aside>
<Divider color="baseSurfaceSubtleHover" className={styles.divider} />
<Divider className={styles.divider} />
<main className={styles.mainContent}>
{elevatorPitch ? (
<div className={styles.intro}>

5
apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -2,12 +2,13 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { logout } from "@/constants/routes/handleAuth"
import { trpc } from "@/lib/trpc/client"
import useDropdownStore from "@/stores/main-menu"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import useLang from "@/hooks/useLang"
@@ -50,7 +51,7 @@ function List({ children }: { children: ReactNode }) {
return (
<>
<div className={styles.dividerWrapper}>
<Divider color="subtle" />
<Divider />
</div>
<ul className={styles.dropdownWrapper}>
<ul className={styles.dropdownLinks}>{children}</ul>

7
apps/scandic-web/components/DatePicker/Range/Desktop.tsx
View File

@@ -4,6 +4,7 @@ import { useState } from "react"
import { DayPicker } from "react-day-picker"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -11,7 +12,6 @@ import { Lang } from "@/constants/languages"
import { dt } from "@/lib/dt"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
@@ -100,7 +100,10 @@ export default function DatePickerRangeDesktop({
Footer(props) {
return (
<>
<Divider className={styles.divider} color="primaryLightSubtle" />
<Divider
className={styles.divider}
color="Border/Divider/Subtle"
/>
<footer className={props.className}>
<Button
intent="tertiary"

7
apps/scandic-web/components/DatePicker/Single/Desktop.tsx
View File

@@ -4,13 +4,13 @@ import { useState } from "react"
import { DayPicker } from "react-day-picker"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Lang } from "@/constants/languages"
import { dt } from "@/lib/dt"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
@@ -101,7 +101,10 @@ export default function DatePickerSingleDesktop({
Footer(props) {
return (
<>
<Divider className={styles.divider} color="primaryLightSubtle" />
<Divider
className={styles.divider}
color="Border/Divider/Subtle"
/>
<footer className={props.className}>
<Button
intent="tertiary"

5
apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx
View File

@@ -1,10 +1,11 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
import { removeMultipleSlashes } from "@/utils/url"
import ImageContainer from "../ImageContainer"
import Divider from "../TempDesignSystem/Divider"
import Table from "../TempDesignSystem/Table"
import BiroScript from "../TempDesignSystem/Text/BiroScript"
import Body from "../TempDesignSystem/Text/Body"
@@ -204,7 +205,7 @@ export const renderOptions: RenderOptions = {
},
[RTETypeEnum.hr]: () => {
return <Divider />
return <Divider color="burgundy" />
},
[RTETypeEnum.li]: (

4
apps/scandic-web/components/DestinationFilterAndSort/index.tsx
View File

@@ -10,12 +10,12 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { useDestinationDataStore } from "@/stores/destination-data"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -165,7 +165,7 @@ export default function DestinationFilterAndSort({
</header>
<div className={styles.content}>
<Sort sortItems={sortItems} />
<Divider color="subtle" className={styles.divider} />
<Divider className={styles.divider} />
<Filter filters={filters} />
</div>
{pendingCount === 0 && (

8
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/index.tsx
View File

@@ -4,11 +4,11 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { useDebounceValue } from "usehooks-ts"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { trpc } from "@/lib/trpc/client"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -166,7 +166,7 @@ export default function SearchList({
</Body>
{typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
<>
<Divider className={styles.noResultsDivider} color="beige" />
<Divider className={styles.noResultsDivider} />
<Footnote
className={styles.text}
color="uiTextPlaceholder"
@@ -182,7 +182,7 @@ export default function SearchList({
locations={typeFilteredSearchHistory}
/>
<Divider className={styles.divider} color="beige" />
<Divider className={styles.divider} />
<ClearSearchButton
getItemProps={getItemProps}
handleClearSearchHistory={handleClearSearchHistory}
@@ -210,7 +210,7 @@ export default function SearchList({
highlightedIndex={highlightedIndex}
locations={typeFilteredSearchHistory}
/>
<Divider className={styles.divider} color="beige" />
<Divider className={styles.divider} />
<ClearSearchButton
getItemProps={getItemProps}
handleClearSearchHistory={handleClearSearchHistory}

4
apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
View File

@@ -2,12 +2,12 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Select } from "@scandic-hotels/design-system/Select"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getLocalizedLanguageOptions } from "@/constants/languages"
import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
@@ -91,7 +91,7 @@ export default function FormContent() {
name="language"
/>
</section>
<Divider className={styles.divider} color="subtle" />
<Divider className={styles.divider} />
<section className={styles.password}>
<header>
<Typography variant="Body/Paragraph/mdBold">

4
apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx
View File

@@ -1,9 +1,9 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import AdultSelector from "../AdultSelector"
@@ -72,7 +72,7 @@ export function GuestsRoom({
</Button>
)}
</section>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
</div>
)
}

6
apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx
View File

@@ -3,12 +3,12 @@
import FocusLock from "react-focus-lock"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { logout } from "@/constants/routes/handleAuth"
import { trpc } from "@/lib/trpc/client"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -71,11 +71,11 @@ export default function MyPagesMenuContent({
<ul className={styles.groups}>
<li>
<Divider color="subtle" className={styles.divider} />
<Divider className={styles.divider} />
<PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
<Divider color="subtle" className={styles.divider} />
<Divider className={styles.divider} />
<SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
</li>
</ul>

4
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
View File

@@ -2,13 +2,13 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import BookingCodeChip from "@/components/BookingCodeChip"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import PriceDetails from "../../PriceDetails"
@@ -28,7 +28,7 @@ export default function TotalPrice() {
return (
<>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<div className={styles.price}>
<div className={styles.entry}>
<Typography variant="Body/Paragraph/mdBold">

5
apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
View File

@@ -1,5 +1,7 @@
import { notFound } from "next/navigation"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
@@ -9,7 +11,6 @@ import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
@@ -74,7 +75,7 @@ export default async function BookingConfirmation({
mainRoom={room}
/>
<PaymentDetails />
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<HotelDetails hotel={hotel} />
{hotel.specialAlerts.map((alert) => (
<div key={alert.id}>

4
apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx
View File

@@ -5,6 +5,7 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,7 +14,6 @@ import { PaymentMethodEnum } from "@/constants/booking"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
@@ -102,7 +102,7 @@ export default function ConfirmBooking({
</div>
</Modal>
</div>
<Divider color="subtle" />
<Divider />
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({

4
apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
View File

@@ -9,10 +9,10 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -168,7 +168,7 @@ export default function PriceChangeSummary({
</div>
))}
</div>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
</Fragment>
)
})}

11
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
View File

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { dt } from "@/lib/dt"
@@ -13,7 +14,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -126,7 +126,7 @@ export default function SummaryUI({
color="CurrentColor"
/>
</header>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
{rooms.map(({ room }, idx) => {
const roomNumber = idx + 1
const adults = room.adults
@@ -353,7 +353,7 @@ export default function SummaryUI({
nights={nights}
/>
</div>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
</Fragment>
)
})}
@@ -422,7 +422,10 @@ export default function SummaryUI({
isBreakfastIncluded={isAllBreakfastIncluded}
alignCenter
/>
<Divider className={styles.bottomDivider} color="primaryLightSubtle" />
<Divider
className={styles.bottomDivider}
color="Border/Divider/Subtle"
/>
</div>
{showSignupPromo && roomOneMemberPrice && !isMember ? (
<SignupPromoDesktop

5
apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
View File

@@ -1,7 +1,8 @@
import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"
import Divider from "@/components/TempDesignSystem/Divider"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -103,7 +104,7 @@ export default function HotelPriceCard({
// Handle undefined scenarios
productTypePrices.localPrice.pricePerNight && (
<>
<Divider color="subtle" className={styles.divider} />
<Divider className={styles.divider} />
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextMediumContrast">

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

@@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from "next/navigation"
import { memo } from "react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -15,7 +16,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
import BookingCodeChip from "@/components/BookingCodeChip"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
@@ -133,7 +133,7 @@ function HotelCard({
</address>
<div>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
</div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>

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>

4
apps/scandic-web/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
View File

@@ -13,12 +13,12 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Select from "@/components/TempDesignSystem/Select"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -156,7 +156,7 @@ export default function FilterAndSortModal({
/>
</div>
<div className={styles.divider}>
<Divider color="subtle" />
<Divider />
</div>
<div className={styles.filters}>
<HotelFilter filters={filters} />

6
apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -1,10 +1,10 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -71,7 +71,7 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
/>
</div>
</div>
<Divider color="subtle" variant="vertical" />
<Divider variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
{sortedFacilities?.map((facility) => (
@@ -131,7 +131,7 @@ export function HotelInfoCardSkeleton() {
</Typography>
</div>
</div>
<Divider color="subtle" variant="vertical" />
<Divider variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
<Typography

11
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
View File

@@ -4,6 +4,7 @@ import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { dt } from "@/lib/dt"
@@ -12,7 +13,6 @@ import { useRatesStore } from "@/stores/select-rate"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -101,7 +101,7 @@ export default function Summary({
/>
</ButtonRAC>
</header>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
{rooms.map((room, idx) => {
if (!room) {
return null
@@ -287,7 +287,7 @@ export default function Summary({
</div>
))}
</div>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
</Fragment>
)
})}
@@ -355,7 +355,10 @@ export default function Summary({
)}
</div>
</div>
<Divider className={styles.bottomDivider} color="primaryLightSubtle" />
<Divider
className={styles.bottomDivider}
color="Border/Divider/Subtle"
/>
</div>
{!isMember && memberPrice ? (
<SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />

4
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
View File

@@ -3,12 +3,12 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@/lib/trpc/client"
import { useRatesStore } from "@/stores/select-rate"
import Divider from "@/components/TempDesignSystem/Divider"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import useLang from "@/hooks/useLang"
@@ -75,7 +75,7 @@ export default function Form({ close }: { close: () => void }) {
<form onSubmit={methods.handleSubmit(onSubmit)}>
<Checkboxes />
<div className={styles.footer}>
<Divider color="borderDividerSubtle" className={styles.divider} />
<Divider color="Border/Divider/Subtle" className={styles.divider} />
<div className={styles.buttonContainer}>
<Typography variant="Body/Supporting text (caption)/smBold">
<Button variant="Tertiary" size="Small" type="submit">

6
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx
View File

@@ -2,11 +2,11 @@
import { useSession } from "next-auth/react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useRatesStore } from "@/stores/select-rate"
import Divider from "@/components/TempDesignSystem/Divider"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import { isValidClientSession } from "@/utils/clientSession"
@@ -66,14 +66,14 @@ export default function BreakfastMessage({
return (
<div className={styles.message}>
<Divider className={styles.divider} color="borderDividerSubtle" />
<Divider className={styles.divider} color="Border/Divider/Subtle" />
<Typography
variant={"Body/Supporting text (caption)/smRegular"}
className={styles.breakfastMessage}
>
<p>{breakfastMessage}</p>
</Typography>
<Divider className={styles.divider} color="borderDividerSubtle" />
<Divider className={styles.divider} color="Border/Divider/Subtle" />
</div>
)
}

5
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
View File

@@ -2,11 +2,12 @@
import { useSession } from "next-auth/react"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { dt } from "@/lib/dt"
import { useRatesStore } from "@/stores/select-rate"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import { isValidClientSession } from "@/utils/clientSession"
@@ -62,7 +63,7 @@ export default function Rates({
<Code {...sharedProps} code={code} />
<Campaign {...sharedProps} campaign={campaign} />
<Redemptions {...sharedProps} redemptions={redemptions} />
{showDivider ? <Divider color="borderDividerSubtle" /> : null}
{showDivider ? <Divider color="Border/Divider/Subtle" /> : null}
{isFetchingAdditionalRate ? (
<>
<SkeletonShimmer height="100px" />

14
apps/scandic-web/components/JsonToHtml/renderOptions.tsx
View File

@@ -1,5 +1,6 @@
import { cx } from "class-variance-authority"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -8,7 +9,6 @@ import Link from "@/components/TempDesignSystem/Link"
import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
import ImageContainer from "../ImageContainer"
import Divider from "../TempDesignSystem/Divider"
import Table from "../TempDesignSystem/Table"
import {
hasAvailableParagraphFormat,
@@ -87,7 +87,7 @@ export const renderOptions: RenderOptions = {
return (
<Link
key={node.uid}
className={cx(styles.link, className)}
className={className}
{...props}
href={node.attrs.url}
target={node.attrs.target ?? "_blank"}
@@ -244,7 +244,7 @@ export const renderOptions: RenderOptions = {
},
[RTETypeEnum.hr]: () => {
return <Divider className={styles.divider} />
return <Divider className={styles.divider} color="burgundy" />
},
[RTETypeEnum.li]: (
@@ -348,7 +348,7 @@ export const renderOptions: RenderOptions = {
}
return (
<span className={cx(styles.span, propsClassName)} {...props}>
<span className={propsClassName} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</span>
)
@@ -416,7 +416,7 @@ export const renderOptions: RenderOptions = {
return (
<Link
key={node.uid}
className={cx(styles.link, className)}
className={className}
href={node.attrs.href}
textDecoration="underline"
target="_blank"
@@ -466,7 +466,7 @@ export const renderOptions: RenderOptions = {
return (
<Link
key={node.uid}
className={cx(styles.link, className)}
className={className}
{...props}
href={entry.node.url}
textDecoration="underline"
@@ -818,7 +818,7 @@ export const renderOptions: RenderOptions = {
}
return (
<Typography key={id} variant="Body/Paragraph/mdRegular">
<span className={cx(styles.span, propsClassName)} {...props}>
<span className={propsClassName} {...props}>
{children}
</span>
</Typography>

4
apps/scandic-web/components/MyPages/Profile/index.tsx
View File

@@ -1,3 +1,4 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -10,7 +11,6 @@ import ButtonLink from "@/components/ButtonLink"
import CommunicationSlot from "@/components/MyPages/Profile/Communication"
import CreditCardSlot from "@/components/MyPages/Profile/CreditCards"
import Header from "@/components/Profile/Header"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isValidCountry } from "@/utils/countries"
@@ -178,7 +178,7 @@ export default async function Profile() {
<ChangeNameDisclaimer />
<Divider color="burgundy" opacity={8} />
<Divider />
<CreditCardSlot />
{/* <MembershipCardSlot /> */}
<CommunicationSlot />

6
apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx
View File

@@ -1,9 +1,9 @@
import { Fragment } from "react"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import styles from "./sidebar.module.css"
@@ -16,11 +16,11 @@ export default function SidebarNavigationSkeleton() {
<Typography variant="Title/Subtitle/md">
<SkeletonShimmer width="10ch" />
</Typography>
<Divider color="beige" />
<Divider />
<ul className={styles.list}>
{skeletonWidths.map((width, index) => (
<Fragment key={index}>
{index === 4 && <Divider color="beige" />}
{index === 4 && <Divider />}
<li>
<Link href="" size="regular" variant="sidebar">
<SkeletonShimmer width={width} />

6
apps/scandic-web/components/MyPages/Sidebar/index.tsx
View File

@@ -1,3 +1,4 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { logout } from "@/constants/routes/handleAuth"
@@ -5,7 +6,6 @@ import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
import { SASLevelUpgradeCheck } from "@/components/MyPages/SASLevelUpgradeCheck"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
@@ -45,7 +45,7 @@ async function PrimaryLinks() {
return (
<>
<Divider color="beige" />
<Divider />
<ul className={styles.list}>
{nav?.primaryLinks.map((link) => (
<li key={link.href}>
@@ -74,7 +74,7 @@ async function SecondaryLinks() {
return (
<>
<Divider color="beige" />
<Divider />
<ul className={styles.list}>
{nav?.secondaryLinks.map((link) => (
<li key={link.href}>

5
apps/scandic-web/components/OpeningHours/AlternateOpeningHours/index.tsx
View File

@@ -2,10 +2,9 @@
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 { getGroupedOpeningHours } from "../utils"
import styles from "../openingHours.module.css"
@@ -35,7 +34,7 @@ export default function AlternateOpeningHours({
return (
<>
<Divider color="Border/Divider/Default" />
<Divider />
<Typography variant="Body/Paragraph/mdBold">
<h5 className={styles.heading}>
{intl.formatMessage(

4
apps/scandic-web/components/OpeningHours/index.tsx
View File

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "../TempDesignSystem/Divider"
import AlternateOpeningHours from "./AlternateOpeningHours"
import { getGroupedOpeningHours } from "./utils"
@@ -31,7 +31,7 @@ export default function OpeningHours({
<Typography variant="Title/Overline/sm">
<h5 className={styles.heading}>{heading ?? openingHours.name}</h5>
</Typography>
<Divider color="Border/Divider/Default" />
<Divider />
<Typography variant="Body/Paragraph/mdRegular">
<div className={styles.text}>

6
apps/scandic-web/components/ParkingInformation/index.tsx
View File

@@ -2,11 +2,11 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ButtonLink from "@/components/ButtonLink"
import Divider from "@/components/TempDesignSystem/Divider"
import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices"
@@ -53,7 +53,7 @@ export default function ParkingInformation({
{intl.formatMessage({ defaultMessage: "Weekday prices" })}
</h6>
</Typography>
<Divider color="baseSurfaceSubtleHover" />
<Divider />
{parking.pricing.localCurrency ? (
<ParkingPrices
currency={parking.pricing.localCurrency.currency}
@@ -68,7 +68,7 @@ export default function ParkingInformation({
{intl.formatMessage({ defaultMessage: "Weekend prices" })}
</h6>
</Typography>
<Divider color="baseSurfaceSubtleHover" />
<Divider />
{parking.pricing.localCurrency ? (
<ParkingPrices
currency={parking.pricing.localCurrency.currency}

4
apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx
View File

@@ -2,11 +2,11 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { IconName } from "@/components/Icons/iconName"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./sidePeekAccordion.module.css"
@@ -33,7 +33,7 @@ export default function CheckInCheckOutAccordionItem({
{intl.formatMessage({ defaultMessage: "Hours" })}
</h4>
</Typography>
<Divider color="Border/Divider/Default" />
<Divider />
<Typography variant="Body/Paragraph/mdRegular">
<div>
<p>

5
apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
View File

@@ -1,7 +1,8 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Image from "@/components/Image"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { formatPrice } from "@/utils/numberFormatting"
@@ -46,7 +47,7 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
{ancillary.points && (
<>
<div>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
</div>
<Body textAlign="right" color="uiTextHighContrast">
{intl.formatMessage(

7
apps/scandic-web/components/TempDesignSystem/Divider/divider.ts
View File

@@ -1,7 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { dividerVariants } from "./variants"
export interface DividerProps
extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
VariantProps<typeof dividerVariants> {}

13
apps/scandic-web/components/TempDesignSystem/Divider/index.tsx
View File

@@ -1,13 +0,0 @@
import { dividerVariants } from "./variants"
import type { DividerProps } from "./divider"
export default function Divider({
className,
color,
opacity,
variant,
}: DividerProps) {
const classNames = dividerVariants({ className, color, opacity, variant })
return <hr className={classNames} />
}

34
apps/scandic-web/components/TempDesignSystem/Divider/variants.ts
View File

@@ -1,34 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./divider.module.css"
export const dividerVariants = cva(styles.divider, {
variants: {
color: {
baseSurfaceSubtleNormal: styles.baseSurfaceSubtleNormal,
beige: styles.beige,
burgundy: styles.burgundy,
pale: styles.pale,
peach: styles.peach,
primaryLightSubtle: styles.primaryLightSubtle,
subtle: styles.subtle,
white: styles.white,
baseSurfaceSubtleHover: styles.baseSurfaceSubtleHover,
"Border/Divider/Default": styles["Border-Divider-Default"],
borderDividerSubtle: styles.borderDividerSubtle,
},
opacity: {
100: styles.opacity100,
8: styles.opacity8,
},
variant: {
horizontal: styles.horizontal,
vertical: styles.vertical,
},
},
defaultVariants: {
color: "burgundy",
opacity: 100,
variant: "horizontal",
},
})

9
apps/scandic-web/components/TempDesignSystem/Form/RadioCard/index.tsx
View File

@@ -3,11 +3,10 @@
import { cx } from "class-variance-authority"
import { useFormContext } from "react-hook-form"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./radioCard.module.css"
import type { RadioCardProps } from "./types"
@@ -76,11 +75,7 @@ export default function RadioCard({
</Typography>
{description || descriptionSecondary ? (
<Divider
className={styles.divider}
variant="horizontal"
color="subtle"
/>
<Divider className={styles.divider} />
) : null}
{description ? (

4
apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
View File

@@ -2,11 +2,11 @@
import { useState } 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 Image from "@/components/Image"
import Divider from "../Divider"
import ShowMoreButton from "../ShowMoreButton"
import Body from "../Text/Body"
import Caption from "../Text/Caption"
@@ -102,7 +102,7 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
</div>
))}
</div>
<Divider color="baseSurfaceSubtleNormal" />
<Divider color="Border/Divider/Subtle" />
<div className={styles.rowItem}>
<div className={styles.capacity}>
<Caption color="uiTextMediumContrast">

17
packages/design-system/lib/components/Divider/Divider.stories.tsx Normal file
View File

@@ -0,0 +1,17 @@
import type { Meta, StoryObj } from '@storybook/react'
import { Divider } from './Divider'
const meta: Meta<typeof Divider> = {
title: 'Components/Divider',
component: Divider,
argTypes: {},
}
export default meta
type Story = StoryObj<typeof Divider>
export const Default: Story = {
args: {},
}

8
packages/design-system/lib/components/Divider/Divider.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { dividerVariants } from './variants'
import type { DividerProps } from './types'
export function Divider({ className, color, variant }: DividerProps) {
const classNames = dividerVariants({ className, color, variant })
return <hr className={classNames} />
}

30
apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css → packages/design-system/lib/components/Divider/divider.module.css
View File

@@ -25,42 +25,14 @@
background-color: var(--Primary-Light-On-Surface-Divider);
}
.beige {
background-color: var(--Scandic-Beige-20);
}
.white {
background-color: var(--UI-Opacity-White-100);
}
.subtle {
background-color: var(--Base-Border-Subtle);
}
.primaryLightSubtle {
background-color: var(--Primary-Light-On-Surface-Divider-subtle);
}
.baseSurfaceSubtleNormal {
background-color: var(--Base-Surface-Subtle-Normal);
}
.borderDividerSubtle {
.Border-Divider-Subtle {
background-color: var(--Border-Divider-Subtle);
}
.opacity100 {
opacity: 1;
}
.opacity8 {
opacity: 0.08;
}
.baseSurfaceSubtleHover {
background-color: var(--Base-Surface-Subtle-Hover);
}
.Border-Divider-Default {
background-color: var(--Border-Divider-Default);
}

1
packages/design-system/lib/components/Divider/index.ts Normal file
View File

@@ -0,0 +1 @@
export { Divider } from './Divider'

7
packages/design-system/lib/components/Divider/types.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { VariantProps } from 'class-variance-authority'
import type { dividerVariants } from './variants'
export interface DividerProps
extends Omit<React.HTMLAttributes<HTMLHRElement>, 'color'>,
VariantProps<typeof dividerVariants> {}

24
packages/design-system/lib/components/Divider/variants.ts Normal file
View File

@@ -0,0 +1,24 @@
import { cva } from 'class-variance-authority'
import styles from './divider.module.css'
export const dividerVariants = cva(styles.divider, {
variants: {
color: {
burgundy: styles.burgundy,
pale: styles.pale,
peach: styles.peach,
white: styles.white,
'Border/Divider/Default': styles['Border-Divider-Default'],
'Border/Divider/Subtle': styles['Border-Divider-Subtle'],
},
variant: {
horizontal: styles.horizontal,
vertical: styles.vertical,
},
},
defaultVariants: {
color: 'Border/Divider/Default',
variant: 'horizontal',
},
})

1
packages/design-system/package.json
View File

@@ -9,6 +9,7 @@
"./ChipButton": "./dist/components/ChipButton/index.js",
"./ChipLink": "./dist/components/ChipLink/index.js",
"./Chips": "./dist/components/Chips/index.js",
"./Divider": "./dist/components/Divider/index.js",
"./Select": "./dist/components/Select/index.js",
"./Typography": "./dist/components/Typography/index.js",
"./RegularRateCard": "./dist/components/RateCard/Regular/index.js",