Merged in fix/SW-1655-tripadvisor-icon-map (pull request #2695)

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

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);

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"

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"

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"

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"

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);

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'
 

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;
-}

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 && (
-        <div className={styles.tripAdvisor}>
-          <Chip className={styles.tripAdvisor}>
-            <TripadvisorIcon color="Icon/Interactive/Default" />
-            {rating.tripAdvisor}
-          </Chip>
-        </div>
+        <TripAdvisorChip
+          rating={rating.tripAdvisor}
+          variant={position === 'top' ? 'small' : 'default'}
+        />
       )}
     </div>
   )

packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx

@@ -14,6 +14,12 @@ const meta: Meta<typeof TripAdvisorChip> = {
         step: 0.1,
       },
     },
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'small'],
+    },
   },
 }
 
@@ -24,5 +30,13 @@ type Story = StoryObj<typeof TripAdvisorChip>
 export const PrimaryDefault: Story = {
   args: {
     rating: 4.5,
+    variant: 'default',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    rating: 4.5,
+    variant: 'small',
   },
 }

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<typeof container>
 
-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
-    <div className={styles.container}>
-      <div className={styles.tripAdvisor}>
-        <TripadvisorIcon color="Icon/Interactive/Default" />
-        <Caption color="burgundy">{rating}</Caption>
+    <div className={container({ variant })}>
+      <div className={chip({ variant })}>
+        <TripadvisorIcon size={16} color="Icon/Interactive/Default" />
+        <Typography variant="Tag/sm">
+          <p>{rating}</p>
+        </Typography>
       </div>
     </div>
   )

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;
+}

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;
+}

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"