From 5f8d77e54ac738198cc3bb2b083be84b02bb712d Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Tue, 26 Aug 2025 13:08:28 +0000 Subject: [PATCH] Merged in fix/SW-1655-tripadvisor-icon-map (pull request #2695) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(SW-1655): update design tripadvisor on hotel map card * fix(SW-1655): update design tripadvisor on hotel map card * fix(SW-1655): update radius * fix(SW-1655): use tripadvisor chip, create different variants * fix(SW-1655): update variants, storybook, and global css Approved-by: Joakim Jäderberg --- apps/partner-sas/app/[lang]/layout.tsx | 1 + apps/partner-sas/globals.css | 17 -------- apps/scandic-web/app/[lang]/(live)/layout.tsx | 1 + .../app/[lang]/(no-layout)/layout.tsx | 1 + .../app/[lang]/(partner)/layout.tsx | 1 + .../scandic-web/app/[lang]/webview/layout.tsx | 1 + apps/scandic-web/app/globals.css | 17 -------- packages/design-system/.storybook/preview.tsx | 1 + .../hotelCardDialogImage.module.css | 12 ------ .../HotelCard/HotelCardDialogImage/index.tsx | 14 +++---- .../TripdAdvisorChip.stories.tsx | 14 +++++++ .../lib/components/TripAdvisorChip/index.tsx | 42 +++++++++++++++---- .../tripAdvisorChip.module.css | 15 +++++-- packages/design-system/lib/normalize.css | 20 +++++++++ packages/design-system/package.json | 13 +++--- 15 files changed, 98 insertions(+), 72 deletions(-) create mode 100644 packages/design-system/lib/normalize.css diff --git a/apps/partner-sas/app/[lang]/layout.tsx b/apps/partner-sas/app/[lang]/layout.tsx index a4197abd4..e797fdc6d 100644 --- a/apps/partner-sas/app/[lang]/layout.tsx +++ b/apps/partner-sas/app/[lang]/layout.tsx @@ -1,5 +1,6 @@ import "@scandic-hotels/design-system/fonts.css" import "@scandic-hotels/design-system/style.css" +import "@scandic-hotels/design-system/normalize.css" import "@scandic-hotels/design-system/design-system-new-deprecated.css" import "../../globals.css" diff --git a/apps/partner-sas/globals.css b/apps/partner-sas/globals.css index 72e6af58e..494728be1 100644 --- a/apps/partner-sas/globals.css +++ b/apps/partner-sas/globals.css @@ -43,15 +43,8 @@ } } -* { - margin: 0; - box-sizing: border-box; -} - html, body { - margin: 0; - padding: 0; scroll-behavior: smooth; } @@ -67,10 +60,6 @@ body.overflow-hidden { overflow: hidden; } -.root { - isolation: isolate; -} - /* From Tailwind */ .sr-only { position: absolute; @@ -84,12 +73,6 @@ body.overflow-hidden { border-width: 0; } -ul { - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; -} - @media screen and (min-width: 768px) { :root { --max-width-single-spacing: var(--Layout-Tablet-Margin-Margin-min); diff --git a/apps/scandic-web/app/[lang]/(live)/layout.tsx b/apps/scandic-web/app/[lang]/(live)/layout.tsx index 02b2b5fbc..6e2aff631 100644 --- a/apps/scandic-web/app/[lang]/(live)/layout.tsx +++ b/apps/scandic-web/app/[lang]/(live)/layout.tsx @@ -1,4 +1,5 @@ import "@scandic-hotels/design-system/fonts.css" +import "@scandic-hotels/design-system/normalize.css" import "@/app/globals.css" import "@scandic-hotels/design-system/design-system-new-deprecated.css" import "@scandic-hotels/design-system/style.css" diff --git a/apps/scandic-web/app/[lang]/(no-layout)/layout.tsx b/apps/scandic-web/app/[lang]/(no-layout)/layout.tsx index fbc138f23..1129a1112 100644 --- a/apps/scandic-web/app/[lang]/(no-layout)/layout.tsx +++ b/apps/scandic-web/app/[lang]/(no-layout)/layout.tsx @@ -1,4 +1,5 @@ import "@scandic-hotels/design-system/fonts.css" +import "@scandic-hotels/design-system/normalize.css" import "@/app/globals.css" import "@scandic-hotels/design-system/design-system-new-deprecated.css" import "@scandic-hotels/design-system/style.css" diff --git a/apps/scandic-web/app/[lang]/(partner)/layout.tsx b/apps/scandic-web/app/[lang]/(partner)/layout.tsx index 050dd4eae..7ea3e0b89 100644 --- a/apps/scandic-web/app/[lang]/(partner)/layout.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/layout.tsx @@ -1,4 +1,5 @@ import "@scandic-hotels/design-system/fonts.css" +import "@scandic-hotels/design-system/normalize.css" import "@/app/globals.css" import "@scandic-hotels/design-system/design-system-new-deprecated.css" import "@scandic-hotels/design-system/style.css" diff --git a/apps/scandic-web/app/[lang]/webview/layout.tsx b/apps/scandic-web/app/[lang]/webview/layout.tsx index dc7b8ec7a..c45097808 100644 --- a/apps/scandic-web/app/[lang]/webview/layout.tsx +++ b/apps/scandic-web/app/[lang]/webview/layout.tsx @@ -1,4 +1,5 @@ import "@scandic-hotels/design-system/fonts.css" +import "@scandic-hotels/design-system/normalize.css" import "@/app/globals.css" import "@scandic-hotels/design-system/style.css" import "@scandic-hotels/design-system/design-system-new-deprecated.css" diff --git a/apps/scandic-web/app/globals.css b/apps/scandic-web/app/globals.css index 72e6af58e..494728be1 100644 --- a/apps/scandic-web/app/globals.css +++ b/apps/scandic-web/app/globals.css @@ -43,15 +43,8 @@ } } -* { - margin: 0; - box-sizing: border-box; -} - html, body { - margin: 0; - padding: 0; scroll-behavior: smooth; } @@ -67,10 +60,6 @@ body.overflow-hidden { overflow: hidden; } -.root { - isolation: isolate; -} - /* From Tailwind */ .sr-only { position: absolute; @@ -84,12 +73,6 @@ body.overflow-hidden { border-width: 0; } -ul { - padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; -} - @media screen and (min-width: 768px) { :root { --max-width-single-spacing: var(--Layout-Tablet-Margin-Margin-min); diff --git a/packages/design-system/.storybook/preview.tsx b/packages/design-system/.storybook/preview.tsx index ea5ca867d..9e32e3ffe 100644 --- a/packages/design-system/.storybook/preview.tsx +++ b/packages/design-system/.storybook/preview.tsx @@ -4,6 +4,7 @@ import type { Preview, ReactRenderer } from '@storybook/nextjs-vite' import { reactIntl } from './reactIntl' import '../lib/fonts.css' +import '../lib/normalize.css' import '../lib/style.css' import '../lib/design-system-new-deprecated.css' diff --git a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css index 711ab7fda..603b574d8 100644 --- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css +++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/hotelCardDialogImage.module.css @@ -32,15 +32,3 @@ .imageContainer img { object-fit: cover; } - -.imageContainer .tripAdvisor { - position: absolute; - left: 7px; - top: 7px; - border-radius: 2px; -} - -.imageContainer.top .tripAdvisor { - left: 4px; - top: 4px; -} diff --git a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx index 0efe5da68..e84ed04e5 100644 --- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx +++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx @@ -1,9 +1,7 @@ -import TripadvisorIcon from '@scandic-hotels/design-system/Icons/TripadvisorIcon' import Image from '@scandic-hotels/design-system/Image' -import Chip from '@scandic-hotels/design-system/Chip' - import { hotelCardDialogImageVariants } from './variants' +import { TripAdvisorChip } from '@scandic-hotels/design-system/TripAdvisorChip' import styles from './hotelCardDialogImage.module.css' @@ -39,12 +37,10 @@ export function HotelCardDialogImage({ /> )} {rating?.tripAdvisor && ( -
- - - {rating.tripAdvisor} - -
+ )} ) diff --git a/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx b/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx index 2570a8e82..bebf96515 100644 --- a/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx +++ b/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx @@ -14,6 +14,12 @@ const meta: Meta = { step: 0.1, }, }, + variant: { + control: { + type: 'select', + }, + options: ['default', 'small'], + }, }, } @@ -24,5 +30,13 @@ type Story = StoryObj export const PrimaryDefault: Story = { args: { rating: 4.5, + variant: 'default', + }, +} + +export const Small: Story = { + args: { + rating: 4.5, + variant: 'small', }, } diff --git a/packages/design-system/lib/components/TripAdvisorChip/index.tsx b/packages/design-system/lib/components/TripAdvisorChip/index.tsx index 2ee64a94e..878d56c94 100644 --- a/packages/design-system/lib/components/TripAdvisorChip/index.tsx +++ b/packages/design-system/lib/components/TripAdvisorChip/index.tsx @@ -1,19 +1,45 @@ -import Caption from '@scandic-hotels/design-system/Caption' +import { cva, type VariantProps } from 'class-variance-authority' import TripadvisorIcon from '@scandic-hotels/design-system/Icons/TripadvisorIcon' - import styles from './tripAdvisorChip.module.css' +import { Typography } from '@scandic-hotels/design-system/Typography' + +const container = cva(styles.container, { + variants: { + variant: { + default: null, + small: styles.containerSmall, + }, + }, + defaultVariants: { + variant: 'default', + }, +}) + +const chip = cva(styles.tripAdvisor, { + variants: { + variant: { + default: null, + small: styles.tripAdvisorSmall, + }, + }, + defaultVariants: { + variant: 'default', + }, +}) type TripAdvisorProps = { rating: number -} +} & VariantProps -export function TripAdvisorChip({ rating }: TripAdvisorProps) { +export function TripAdvisorChip({ rating, variant }: TripAdvisorProps) { return ( // Wrapping the chip in a transparent container with some padding to increase the touch target -
-
- - {rating} +
+
+ + +

{rating}

+
) diff --git a/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css b/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css index 6d90c22d1..e02f7b609 100644 --- a/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css +++ b/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css @@ -2,14 +2,23 @@ position: absolute; left: 0; top: 0; - padding: var(--Spacing-x2); + padding: var(--Space-x2); +} + +.containerSmall { + padding: var(--Space-x05); } .tripAdvisor { display: flex; align-items: center; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); background-color: var(--Base-Surface-Primary-light-Normal); - padding: var(--Spacing-x-quarter) var(--Spacing-x1); + padding: var(--Space-x05) var(--Space-x1); border-radius: var(--Corner-radius-sm); } + +.tripAdvisorSmall { + padding: 0 var(--Space-x05) 0 3px; + border-radius: 2px; +} diff --git a/packages/design-system/lib/normalize.css b/packages/design-system/lib/normalize.css new file mode 100644 index 000000000..649645591 --- /dev/null +++ b/packages/design-system/lib/normalize.css @@ -0,0 +1,20 @@ +* { + margin: 0; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +.root { + isolation: isolate; +} + +ul { + padding-inline-start: 0; + margin-block-start: 0; + margin-block-end: 0; +} diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 68d7362dd..14f4d31ae 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -155,19 +155,20 @@ "./TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx", "./Typography": "./lib/components/Typography/index.tsx", "./JsonToHtml": "./lib/components/JsonToHtml/JsonToHtml.tsx", - "./design-system-new-deprecated.css": "./lib/design-system-new-deprecated.css", - "./style.css": "./lib/style.css", "./base.css": "./lib/base.css", - "./globals.css": "./lib/globals.css", - "./impl.css": "./lib/impl.css", - "./fonts.css": "./lib/fonts.css", + "./design-system-new-deprecated.css": "./lib/design-system-new-deprecated.css", "./downtown-camper.css": "./lib/styles/downtown-camper.css", + "./fonts.css": "./lib/fonts.css", + "./globals.css": "./lib/globals.css", "./grand-hotel.css": "./lib/styles/grand-hotel.css", "./haymarket.css": "./lib/styles/haymarket.css", "./hotel-norge.css": "./lib/styles/hotel-norge.css", + "./impl.css": "./lib/impl.css", "./marski.css": "./lib/styles/marski.css", + "./normalize.css": "./lib/normalize.css", "./scandic-go.css": "./lib/styles/scandic-go.css", - "./scandic.css": "./lib/styles/scandic.css" + "./scandic.css": "./lib/styles/scandic.css", + "./style.css": "./lib/style.css" }, "files": [ "dist"