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

Merged in refactor/design-system-divider (pull request #2354)

Browse Source 
refactor: move divider to design system

Approved-by: Arvid Norlin
This commit is contained in:
Christian Andolf
2025-06-13 09:38:10 +00:00
parent e645b15c6e 9551a629fa
commit c545ed2fe2
71 changed files with 231 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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(

66
apps/scandic-web/components/TempDesignSystem/Divider/divider.module.css
View File

@@ -1,66 +0,0 @@
.divider {
pointer-events: none;
border: 0;
}
.horizontal {
height: 1px;
width: 100%;
}
.vertical {
height: 100%;
width: 1px;
}
.burgundy {
background-color: var(--Scandic-Brand-Burgundy);
}
.pale {
background-color: var(--Primary-Dark-On-Surface-Text);
}
.peach {
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 {
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);
}

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">