Merged in fix/3697-prettier-configs (pull request #3396)

fix(SW-3691): Setup one prettier config for whole repo * Setup prettierrc in root and remove other configs Approved-by: Joakim Jäderberg Approved-by: Linus Flood
2026-01-07 12:45:50 +00:00
parent 932413412b
commit d0546926a9
500 changed files with 18367 additions and 18419 deletions
--- a/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx
+++ b/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx
@@ -1,106 +1,106 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"

-import { Theme } from '@scandic-hotels/common/utils/theme'
-import { InfoCard } from './InfoCard.tsx'
-import { infoCardConfig } from './variants.ts'
+import { Theme } from "@scandic-hotels/common/utils/theme"
+import { InfoCard } from "./InfoCard.tsx"
+import { infoCardConfig } from "./variants.ts"

 const DEFAULT_ARGS = {
  topTitle: "Here's to your health!",
-  heading: 'Gym & Wellness',
+  heading: "Gym & Wellness",
  primaryButton: {
-    href: '#',
-    text: 'Primary button',
+    href: "#",
+    text: "Primary button",
  },
  secondaryButton: {
-    href: '#',
-    text: 'Secondary button',
+    href: "#",
+    text: "Secondary button",
  },
  bodyText:
-    'Our gym is open 24/7 and offers state-of-the-art equipment to help you stay fit during your stay.',
+    "Our gym is open 24/7 and offers state-of-the-art equipment to help you stay fit during your stay.",
 }

 const meta: Meta<typeof InfoCard> = {
-  title: 'Product Components/InfoCard',
+  title: "Product Components/InfoCard",
  component: InfoCard,
  argTypes: {
    topTitle: {
-      control: 'text',
+      control: "text",
      table: {
-        type: { summary: 'string' },
+        type: { summary: "string" },
      },
    },
    topTitleAngled: {
-      control: 'boolean',
+      control: "boolean",
      description:
-        'Whether the top title should be angled. Only applies when `hotelTheme` is set to `Theme.scandic`.',
-      type: 'boolean',
+        "Whether the top title should be angled. Only applies when `hotelTheme` is set to `Theme.scandic`.",
+      type: "boolean",
    },
    heading: {
-      control: 'text',
+      control: "text",
      table: {
-        type: { summary: 'string' },
+        type: { summary: "string" },
      },
    },
    bodyText: {
-      control: 'text',
+      control: "text",
      table: {
-        type: { summary: 'string' },
+        type: { summary: "string" },
      },
    },
    theme: {
-      control: 'select',
+      control: "select",
      options: Object.keys(infoCardConfig.variants.theme),
      table: {
        type: {
-          summary: Object.keys(infoCardConfig.variants.theme).join(' | '),
+          summary: Object.keys(infoCardConfig.variants.theme).join(" | "),
        },
      },
    },
    height: {
-      control: 'select',
+      control: "select",
      options: Object.keys(infoCardConfig.variants.height),
      table: {
        type: {
-          summary: Object.keys(infoCardConfig.variants.height).join(' | '),
+          summary: Object.keys(infoCardConfig.variants.height).join(" | "),
        },
      },
    },
    hotelTheme: {
-      control: 'select',
+      control: "select",
      options: Object.keys(infoCardConfig.variants.hotelTheme),
      description:
-        'The hotel theme to adjust button colors for better contrast.',
+        "The hotel theme to adjust button colors for better contrast.",
      table: {
-        type: { summary: 'Theme', detail: Object.values(Theme).join(' | ') },
+        type: { summary: "Theme", detail: Object.values(Theme).join(" | ") },
      },
    },
    backgroundImage: {
-      control: 'object',
+      control: "object",
      table: {
        type: {
-          summary: 'InfoCardBackgroundImage',
+          summary: "InfoCardBackgroundImage",
          detail:
-            '{ src: string, alt?: string, focalPoint?: { x: number, y: number }, dimensions?: { width: number, height: number, aspectRatio?: number } }',
+            "{ src: string, alt?: string, focalPoint?: { x: number, y: number }, dimensions?: { width: number, height: number, aspectRatio?: number } }",
        },
      },
    },
    primaryButton: {
-      control: 'object',
+      control: "object",
      table: {
        type: {
-          summary: 'InfoCardButton',
+          summary: "InfoCardButton",
          detail:
-            '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
+            "{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }",
        },
      },
    },
    secondaryButton: {
-      control: 'object',
+      control: "object",
      table: {
        type: {
-          summary: 'InfoCardButton',
+          summary: "InfoCardButton",
          detail:
-            '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
+            "{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }",
        },
      },
    },
@@ -108,26 +108,26 @@ const meta: Meta<typeof InfoCard> = {
  args: { ...DEFAULT_ARGS },
  decorators: [
    (Story, context) => {
-      if (context.name.toLowerCase().indexOf('all themes') >= 0) {
+      if (context.name.toLowerCase().indexOf("all themes") >= 0) {
        return (
          <div
            className={context.args.hotelTheme!}
-            style={{ display: 'grid', gap: '1rem' }}
+            style={{ display: "grid", gap: "1rem" }}
          >
            {Object.keys(infoCardConfig.variants.theme).map((theme) => {
              console.log(theme)
              const args = {
                ...context.args,
                backgroundImage:
-                  theme === 'Image'
+                  theme === "Image"
                    ? {
-                        src: './img/img1.jpg',
-                        alt: 'Image alt text',
+                        src: "./img/img1.jpg",
+                        alt: "Image alt text",
                      }
                    : undefined,
              }
              return (
-                <div style={{ display: 'grid', gap: '0.5rem' }}>
+                <div style={{ display: "grid", gap: "0.5rem" }}>
                  <h3>{theme}</h3>
                  <InfoCard
                    {...args}
@@ -141,7 +141,7 @@ const meta: Meta<typeof InfoCard> = {
      }

      return (
-        <div style={{ display: 'flex' }}>
+        <div style={{ display: "flex" }}>
          <Story />
        </div>
      )
@@ -162,35 +162,35 @@ export const Default: Story = {
 export const Primary_1: Story = {
  args: {
    ...meta.args,
-    theme: 'Primary 1',
+    theme: "Primary 1",
  },
 }

 export const Primary_2: Story = {
  args: {
    ...meta.args,
-    theme: 'Primary 2',
+    theme: "Primary 2",
  },
 }

 export const Primary_3: Story = {
  args: {
    ...meta.args,
-    theme: 'Primary 3',
+    theme: "Primary 3",
  },
 }

 export const Accent: Story = {
  args: {
    ...meta.args,
-    theme: 'Accent',
+    theme: "Accent",
  },
 }

 export const White: Story = {
  args: {
    ...meta.args,
-    theme: 'White',
+    theme: "White",
  },
 }

@@ -198,10 +198,10 @@ export const Image: Story = {
  args: {
    ...meta.args,
    backgroundImage: {
-      src: './img/img1.jpg',
-      alt: 'Image alt text',
+      src: "./img/img1.jpg",
+      alt: "Image alt text",
    },
-    theme: 'Image',
+    theme: "Image",
  },
 }

--- a/packages/design-system/lib/components/InfoCard/InfoCard.tsx
+++ b/packages/design-system/lib/components/InfoCard/InfoCard.tsx
@@ -1,15 +1,15 @@
-import ButtonLink from '../ButtonLink'
-import Image from '../Image'
-import { Typography } from '../Typography'
+import ButtonLink from "../ButtonLink"
+import Image from "../Image"
+import { Typography } from "../Typography"

-import { getButtonProps } from './utils'
+import { getButtonProps } from "./utils"

-import { infoCardVariants } from './variants'
+import { infoCardVariants } from "./variants"

-import styles from './infoCard.module.css'
+import styles from "./infoCard.module.css"

-import ImageFallback from '../ImageFallback'
-import type { InfoCardProps } from './types'
+import ImageFallback from "../ImageFallback"
+import type { InfoCardProps } from "./types"

 export function InfoCard({
  primaryButton,
@@ -35,13 +35,13 @@ export function InfoCard({

  return (
    <div className={classNames}>
-      {theme === 'Image' ? (
+      {theme === "Image" ? (
        <div className={styles.backgroundImageWrapper}>
          {backgroundImage ? (
            <Image
              src={backgroundImage.src}
              className={styles.backgroundImage}
-              alt={backgroundImage.alt ?? ''}
+              alt={backgroundImage.alt ?? ""}
              fill
              sizes="(min-width: 1367px) 700px, 900px"
              focalPoint={backgroundImage.focalPoint}
--- a/packages/design-system/lib/components/InfoCard/index.tsx
+++ b/packages/design-system/lib/components/InfoCard/index.tsx
@@ -1,2 +1,2 @@
-export { InfoCard } from './InfoCard'
-export type { InfoCardProps } from './types'
+export { InfoCard } from "./InfoCard"
+export type { InfoCardProps } from "./types"
--- a/packages/design-system/lib/components/InfoCard/infoCard.module.css
+++ b/packages/design-system/lib/components/InfoCard/infoCard.module.css
@@ -91,7 +91,7 @@
  z-index: -1;

  &::after {
-    content: '';
+    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
--- a/packages/design-system/lib/components/InfoCard/types.ts
+++ b/packages/design-system/lib/components/InfoCard/types.ts
@@ -1,7 +1,7 @@
-import type { VariantProps } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"

-import { MouseEventHandler } from 'react'
-import type { infoCardVariants } from './variants'
+import { MouseEventHandler } from "react"
+import type { infoCardVariants } from "./variants"

 export type InfoCardBackgroundImage = {
  src: string
@@ -19,7 +19,8 @@ export type InfoCardButton = {
 }

 export interface InfoCardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof infoCardVariants> {
  topTitle?: string | null
  heading?: string | null
--- a/packages/design-system/lib/components/InfoCard/utils.ts
+++ b/packages/design-system/lib/components/InfoCard/utils.ts
@@ -1,32 +1,32 @@
-import type { VariantProps } from 'class-variance-authority'
+import type { VariantProps } from "class-variance-authority"

-import { Theme } from '@scandic-hotels/common/utils/theme'
-import type { variants as buttonVariants } from '../Button/variants'
-import type { infoCardVariants } from './variants'
+import { Theme } from "@scandic-hotels/common/utils/theme"
+import type { variants as buttonVariants } from "../Button/variants"
+import type { infoCardVariants } from "./variants"

 type ButtonVariants = VariantProps<typeof buttonVariants>
 type InfoCardButtonProps = {
  primaryButton: {
-    variant: ButtonVariants['variant']
-    color: ButtonVariants['color']
+    variant: ButtonVariants["variant"]
+    color: ButtonVariants["color"]
  }
  secondaryButton: {
-    variant: ButtonVariants['variant']
-    color: ButtonVariants['color']
+    variant: ButtonVariants["variant"]
+    color: ButtonVariants["color"]
  }
 }

-const PRIMARY = { variant: 'Primary', color: 'Primary' } as const
-const PRIMARY_INVERTED = { variant: 'Primary', color: 'Inverted' } as const
-const SECONDARY = { variant: 'Secondary', color: 'Primary' } as const
-const SECONDARY_INVERTED = { variant: 'Secondary', color: 'Inverted' } as const
-const TERTIARY = { variant: 'Tertiary', color: 'Primary' } as const
+const PRIMARY = { variant: "Primary", color: "Primary" } as const
+const PRIMARY_INVERTED = { variant: "Primary", color: "Inverted" } as const
+const SECONDARY = { variant: "Secondary", color: "Primary" } as const
+const SECONDARY_INVERTED = { variant: "Secondary", color: "Inverted" } as const
+const TERTIARY = { variant: "Tertiary", color: "Primary" } as const

 // Determine button variant and color based on card theme and hotel theme.
 // This is done to avoid low contrast issues and conflicting colors in
 // certain combinations and according to design guidelines.
 export function getButtonProps(
-  cardTheme: VariantProps<typeof infoCardVariants>['theme'],
+  cardTheme: VariantProps<typeof infoCardVariants>["theme"],
  hotelTheme: Theme | null = Theme.scandic
 ): InfoCardButtonProps {
  let buttonProps: InfoCardButtonProps = {
@@ -35,7 +35,7 @@ export function getButtonProps(
  }

  // Image theme always uses inverted buttons, regardless of hotel theme
-  if (cardTheme === 'Image') {
+  if (cardTheme === "Image") {
    return {
      primaryButton: PRIMARY_INVERTED,
      secondaryButton: SECONDARY_INVERTED,
@@ -44,7 +44,7 @@ export function getButtonProps(

  switch (hotelTheme) {
    case Theme.scandic:
-      if (cardTheme === 'Primary 2' || cardTheme === 'Primary 3') {
+      if (cardTheme === "Primary 2" || cardTheme === "Primary 3") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
@@ -53,10 +53,10 @@ export function getButtonProps(
      break
    case Theme.downtownCamper:
      if (
-        cardTheme === 'Primary 1' ||
-        cardTheme === 'Primary 2' ||
-        cardTheme === 'Primary 3' ||
-        cardTheme === 'Accent'
+        cardTheme === "Primary 1" ||
+        cardTheme === "Primary 2" ||
+        cardTheme === "Primary 3" ||
+        cardTheme === "Accent"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
@@ -65,15 +65,15 @@ export function getButtonProps(
      }
      break
    case Theme.haymarket:
-      if (cardTheme === 'Primary 1' || cardTheme === 'White') {
+      if (cardTheme === "Primary 1" || cardTheme === "White") {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
      } else if (
-        cardTheme === 'Primary 2' ||
-        cardTheme === 'Primary 3' ||
-        cardTheme === 'Accent'
+        cardTheme === "Primary 2" ||
+        cardTheme === "Primary 3" ||
+        cardTheme === "Accent"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
@@ -82,7 +82,7 @@ export function getButtonProps(
      }
      break
    case Theme.scandicGo:
-      if (cardTheme === 'Primary 1' || cardTheme === 'Primary 2') {
+      if (cardTheme === "Primary 1" || cardTheme === "Primary 2") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
@@ -91,16 +91,16 @@ export function getButtonProps(
      break
    case Theme.grandHotel:
      if (
-        cardTheme === 'Primary 2' ||
-        cardTheme === 'Primary 3' ||
-        cardTheme === 'Accent' ||
-        cardTheme === 'White'
+        cardTheme === "Primary 2" ||
+        cardTheme === "Primary 3" ||
+        cardTheme === "Accent" ||
+        cardTheme === "White"
      ) {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
-      } else if (cardTheme === 'Primary 1') {
+      } else if (cardTheme === "Primary 1") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
@@ -109,9 +109,9 @@ export function getButtonProps(
      break
    case Theme.hotelNorge:
      if (
-        cardTheme === 'Primary 1' ||
-        cardTheme === 'Primary 2' ||
-        cardTheme === 'Primary 3'
+        cardTheme === "Primary 1" ||
+        cardTheme === "Primary 2" ||
+        cardTheme === "Primary 3"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
@@ -120,20 +120,20 @@ export function getButtonProps(
      }
      break
    case Theme.marski:
-      if (cardTheme === 'Primary 1') {
+      if (cardTheme === "Primary 1") {
        buttonProps = {
          primaryButton: TERTIARY,
          secondaryButton: SECONDARY_INVERTED,
        }
-      } else if (cardTheme === 'White') {
+      } else if (cardTheme === "White") {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
      } else if (
-        cardTheme === 'Primary 2' ||
-        cardTheme === 'Primary 3' ||
-        cardTheme === 'Accent'
+        cardTheme === "Primary 2" ||
+        cardTheme === "Primary 3" ||
+        cardTheme === "Accent"
      ) {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
@@ -143,15 +143,15 @@ export function getButtonProps(
      break
    case Theme.theDock:
      if (
-        cardTheme === 'Primary 1' ||
-        cardTheme === 'Accent' ||
-        cardTheme === 'White'
+        cardTheme === "Primary 1" ||
+        cardTheme === "Accent" ||
+        cardTheme === "White"
      ) {
        buttonProps = {
          primaryButton: PRIMARY,
          secondaryButton: SECONDARY,
        }
-      } else if (cardTheme === 'Primary 2' || cardTheme === 'Primary 3') {
+      } else if (cardTheme === "Primary 2" || cardTheme === "Primary 3") {
        buttonProps = {
          primaryButton: PRIMARY_INVERTED,
          secondaryButton: SECONDARY_INVERTED,
--- a/packages/design-system/lib/components/InfoCard/variants.ts
+++ b/packages/design-system/lib/components/InfoCard/variants.ts
@@ -1,36 +1,36 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority"

-import { DEFAULT_THEME, Theme } from '@scandic-hotels/common/utils/theme'
-import styles from './infoCard.module.css'
+import { DEFAULT_THEME, Theme } from "@scandic-hotels/common/utils/theme"
+import styles from "./infoCard.module.css"

 const variantKeys = {
  theme: {
-    'Primary 1': 'Primary 1',
-    'Primary 2': 'Primary 2',
-    'Primary 3': 'Primary 3',
-    Accent: 'Accent',
-    Image: 'Image',
-    White: 'White',
+    "Primary 1": "Primary 1",
+    "Primary 2": "Primary 2",
+    "Primary 3": "Primary 3",
+    Accent: "Accent",
+    Image: "Image",
+    White: "White",
  },
  height: {
-    fixed: 'fixed',
-    dynamic: 'dynamic',
+    fixed: "fixed",
+    dynamic: "dynamic",
  },
 } as const

 export const infoCardConfig = {
  variants: {
    theme: {
-      [variantKeys.theme['Primary 1']]: styles['theme-primary-1'],
-      [variantKeys.theme['Primary 2']]: styles['theme-primary-2'],
-      [variantKeys.theme['Primary 3']]: styles['theme-primary-3'],
-      [variantKeys.theme['Accent']]: styles['theme-accent'],
-      [variantKeys.theme['Image']]: styles['theme-image'],
-      [variantKeys.theme['White']]: styles['theme-white'],
+      [variantKeys.theme["Primary 1"]]: styles["theme-primary-1"],
+      [variantKeys.theme["Primary 2"]]: styles["theme-primary-2"],
+      [variantKeys.theme["Primary 3"]]: styles["theme-primary-3"],
+      [variantKeys.theme["Accent"]]: styles["theme-accent"],
+      [variantKeys.theme["Image"]]: styles["theme-image"],
+      [variantKeys.theme["White"]]: styles["theme-white"],
    },
    height: {
-      [variantKeys.height.fixed]: styles['height-fixed'],
-      [variantKeys.height.dynamic]: styles['height-dynamic'],
+      [variantKeys.height.fixed]: styles["height-fixed"],
+      [variantKeys.height.dynamic]: styles["height-dynamic"],
    },
    // Only Theme.scandic can be used with the Angled variant.
    // The topTitleAngled variant will be applied using the compoundVariants.
@@ -56,11 +56,11 @@ export const infoCardConfig = {
    {
      hotelTheme: Theme.scandic,
      topTitleAngled: true,
-      class: styles['top-title-angled'],
+      class: styles["top-title-angled"],
    },
  ],
  defaultVariants: {
-    theme: variantKeys.theme['Primary 1'],
+    theme: variantKeys.theme["Primary 1"],
    height: variantKeys.height.fixed,
    topTitleAngled: false,
    hotelTheme: DEFAULT_THEME,