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

Merged in feat/BOOK-61-refactor-hotel-page-css-variables (pull request #3014)

Browse Source 
Feat/BOOK-61 refactor hotel page css variables

* feat(BOOK-61): Breadcrumbs

* feat(BOOK-61): intro section

* feat(BOOK-61): show more button

* feat(BOOK-61): rooms section

* feat(BOOK-61): sidepeeks

* feat(BOOK-61): deprecated old Link component

* feat(BOOK-61): added new TextLink component to the design-system

* feat(BOOK-61): replaced deprecated links with new TextLink component

* feat(BOOK-61): miscellaneous changes


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-10-29 09:15:03 +00:00
parent bfe5c5f8bb
commit 333636c81a
122 changed files with 782 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Breadcrumb.tsx
View File

@@ -1,6 +1,6 @@
import { cx } from "class-variance-authority"
import Link from "next/link"
import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"
import { Breadcrumb as BreadcrumbRAC } from "react-aria-components"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -16,7 +16,7 @@ export function Breadcrumb({
...props
}: BreadcrumbProps) {
return (
<AriaBreadcrumb className={cx(styles.listItem, className)} {...props}>
<BreadcrumbRAC className={cx(styles.listItem, className)} {...props}>
{href ? (
<>
<Typography variant="Label/xsRegular">
@@ -28,12 +28,12 @@ export function Breadcrumb({
icon="chevron_right"
size={20}
aria-hidden="true"
color="Icon/Interactive/Secondary"
color="CurrentColor"
/>
</>
) : (
children
)}
</AriaBreadcrumb>
</BreadcrumbRAC>
)
}

84
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css
View File

@@ -1,7 +1,8 @@
.breadcrumbs {
padding: var(--Spacing-x4) 0 var(--Spacing-x3);
padding: var(--Space-x4) 0 var(--Space-x3);
margin: 0 auto;
width: 100%;
color: var(--Text-Interactive-Secondary);
}
.breadcrumbs.transparent {
@@ -19,7 +20,7 @@
.breadcrumbs .list {
display: flex;
gap: var(--Spacing-x-quarter);
gap: var(--Space-x025);
padding-inline-start: 0;
margin: 0 auto;
}
@@ -43,7 +44,7 @@
.listItem {
align-items: center;
display: flex;
gap: var(--Spacing-x-quarter);
gap: var(--Space-x025);
flex-shrink: 0;
flex-grow: 0;
}
@@ -64,24 +65,31 @@
/* this increases the width of the button for tapping */
padding: 0 5px;
margin: 0 -5px;
color: var(--Base-Text-High-contrast);
color: var(--Text-Interactive-Default);
&.button:not(.lastBreadcrumb) {
cursor: pointer;
&:hover {
color: var(--Text-Interactive-Default-Hover);
}
}
}
.link {
color: var(--Text-Interactive-Secondary);
}
.link:hover,
.button:hover {
color: var(--Text-Interactive-Secondary-Hover);
&:hover {
color: var(--Text-Interactive-Secondary-Hover);
}
}
.dialog {
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x1);
background-color: var(--Surface-Primary-Default);
padding: var(--Space-x1);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
border-radius: var(--Corner-radius-md);
min-width: 169px;
outline: none;
@@ -91,16 +99,16 @@
.dialogLink {
display: block;
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1);
padding: var(--Space-x1);
color: var(--Text-Default);
&:hover,
&:focus {
background-color: var(--Surface-Primary-Hover);
}
}
.dialogLink:focus,
.dialogLink:hover {
background-color: var(--Base-Surface-Primary-light-Hover);
}
.tooltipTrigger {
.lastBreadcrumb {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -109,23 +117,57 @@
.tooltip {
background-color: var(--Surface-UI-Fill-Intense);
padding: var(--Spacing-x-half) var(--Spacing-x1);
padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-sm);
color: var(--Text-Inverted);
outline: none;
}
@media screen and (width <= 767px) {
@media screen and (max-width: 767px) {
.desktop {
display: none;
}
.breadcrumbs.isThemedMobile {
background-color: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Brand-OnPrimary-1-Default);
.link,
.button {
color: var(--Text-Brand-OnPrimary-1-Default);
}
.link:hover,
.button:not(.lastBreadcrumb):hover {
color: var(
--Text-Brand-OnPrimary-1-Default
); /* In need of a different variable for this */
}
}
}
@media screen and (width >= 768px) {
@media screen and (min-width: 768px) {
.mobile {
display: none;
}
.desktop {
display: flex;
}
.breadcrumbs.isThemedDesktop {
background-color: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Brand-OnPrimary-1-Default);
.link,
.button {
color: var(--Text-Brand-OnPrimary-1-Default);
}
.link:hover,
.button:not(.lastBreadcrumb):hover {
color: var(
--Text-Brand-OnPrimary-1-Default
); /* In need of a different variable for this */
}
}
}

18
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/index.tsx
View File

@@ -4,7 +4,7 @@ import { cx } from "class-variance-authority"
import Link from "next/link"
import { useEffect, useState } from "react"
import {
Breadcrumbs as AriaBreadcrumbs,
Breadcrumbs as BreadcrumbsRAC,
Button,
Dialog,
DialogTrigger,
@@ -30,6 +30,7 @@ export default function Breadcrumbs({
breadcrumbs,
color,
size,
isThemed,
}: BreadcrumbsProps) {
const intl = useIntl()
@@ -63,6 +64,7 @@ export default function Breadcrumbs({
const classNames = breadcrumbsVariants({
color,
size,
isThemed,
})
const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
@@ -76,16 +78,12 @@ export default function Breadcrumbs({
})}
className={classNames}
>
<AriaBreadcrumbs className={styles.list}>
<BreadcrumbsRAC className={styles.list}>
<Breadcrumb
href={homeBreadcrumb.href}
aria-label={homeBreadcrumb.title}
>
<MaterialIcon
icon="home"
size={20}
color="Icon/Interactive/Secondary"
/>
<MaterialIcon icon="home" size={20} color="CurrentColor" />
</Breadcrumb>
{/* These breadcrumbs are visible on mobile only */}
@@ -125,7 +123,7 @@ export default function Breadcrumbs({
icon="chevron_right"
size={20}
aria-hidden="true"
color="Icon/Interactive/Secondary"
color="CurrentColor"
/>
</Breadcrumb>
</>
@@ -157,7 +155,7 @@ export default function Breadcrumbs({
<DialogTrigger>
<Typography variant="Label/xsBold">
<Button
className={cx(styles.button, styles.tooltipTrigger)}
className={cx(styles.button, styles.lastBreadcrumb)}
ref={attachRef}
isDisabled={isTooltipDisabled}
>
@@ -176,7 +174,7 @@ export default function Breadcrumbs({
</Popover>
</DialogTrigger>
</Breadcrumb>
</AriaBreadcrumbs>
</BreadcrumbsRAC>
</nav>
)
}

7
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/variants.ts
View File

@@ -16,9 +16,16 @@ export const breadcrumbsVariants = cva(styles.breadcrumbs, {
headerWidth: styles.headerWidth,
contentWidth: styles.contentWidth,
},
isThemed: {
mobileOnly: styles.isThemedMobile,
desktopOnly: styles.isThemedDesktop,
true: [styles.isThemedMobile, styles.isThemedDesktop],
false: "",
},
},
defaultVariants: {
color: "transparent",
size: "pageWidth",
isThemed: false,
},
})

2
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -1,7 +1,7 @@
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/Link"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Title from "@scandic-hotels/design-system/Title"
import { loyaltyCardVariants } from "./variants"

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

@@ -157,7 +157,7 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
</table>
)}
<ShowMoreButton
intent="secondary"
variant="Secondary"
loadMoreData={handleShowMore}
showLess={opened}
/>

66
apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx
View File

@@ -2,30 +2,30 @@
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { showMoreButtonVariants } from "./variants"
import type { ComponentProps } from "react"
import styles from "./showMoreButton.module.css"
import type { ShowMoreButtonProps } from "./showMoreButton"
interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
showLess?: boolean
textShowMore?: string
textShowLess?: string
loadMoreData: () => void
}
export default function ShowMoreButton({
className,
buttonIntent,
intent,
disabled,
variant = "Text",
color = "Primary",
size = "Medium",
typography = "Body/Paragraph/mdBold",
showLess,
textShowMore,
textShowLess,
loadMoreData,
...props
}: ShowMoreButtonProps) {
const intl = useIntl()
const classNames = showMoreButtonVariants({
className,
buttonIntent,
})
if (!textShowMore) {
textShowMore = intl.formatMessage({
@@ -42,25 +42,25 @@ export default function ShowMoreButton({
}
return (
<div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
<Button
className={styles.button}
disabled={disabled}
onClick={loadMoreData}
variant="icon"
type="button"
theme="base"
intent={intent ?? "text"}
fullWidth={intent ? true : false}
size={intent && "small"}
>
<MaterialIcon
icon="keyboard_arrow_down"
className={styles.icon}
color="CurrentColor"
/>
{showLess ? textShowLess : textShowMore}
</Button>
</div>
<Button
variant={variant}
color={color}
size={size}
onPress={loadMoreData}
typography={typography}
{...props}
>
{showLess ? (
<>
<MaterialIcon icon="keyboard_arrow_up" color="CurrentColor" />
<span>{textShowLess}</span>
</>
) : (
<>
<MaterialIcon icon="keyboard_arrow_down" color="CurrentColor" />
<span>{textShowMore}</span>
</>
)}
</Button>
)
}

23
apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.module.css
View File

@@ -1,23 +0,0 @@
.container {
display: flex;
justify-content: center;
}
.table {
display: grid;
justify-content: stretch;
border-top: 1px solid var(--Base-Border-Subtle);
background-color: var(--Base-Surface-Primary-light-Normal);
}
.table .button {
border-radius: 0;
}
.icon {
transition: transform 0.3s;
}
.showLess .icon {
transform: rotate(180deg);
}

15
apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts
View File

@@ -1,15 +0,0 @@
import type { ButtonPropsRAC } from "@scandic-hotels/design-system/OldDSButton"
import type { VariantProps } from "class-variance-authority"
import type { showMoreButtonVariants } from "./variants"
export interface ShowMoreButtonProps
extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
VariantProps<typeof showMoreButtonVariants> {
disabled?: boolean
showLess?: boolean
textShowMore?: string
textShowLess?: string
loadMoreData: () => void
intent?: ButtonPropsRAC["intent"]
}

11
apps/scandic-web/components/TempDesignSystem/ShowMoreButton/variants.ts
View File

@@ -1,11 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./showMoreButton.module.css"
export const showMoreButtonVariants = cva(styles.container, {
variants: {
buttonIntent: {
table: styles.table,
},
},
})