fix(SW-3081): Removed color option from hotel logos to avoid wrong colors

Approved-by: Matilda Landström

apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx

@@ -52,11 +52,7 @@ export default function LinkEmploymentErrorPage() {
             </span>
           </ButtonLink>
           <div className={styles.logoContainer}>
-            <ScandicLogoIcon
-              color="Icon/Interactive/Accent"
-              height="20px"
-              width="94px"
-            />
+            <ScandicLogoIcon height="20px" width="94px" />
           </div>
         </nav>
 

apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx

@@ -32,11 +32,7 @@ export function LogoLink() {
         defaultMessage: "Back to scandichotels.com",
       })}
     >
-      <ScandicLogoIcon
-        width="103px"
-        height="22px"
-        color="Icon/Interactive/Accent"
-      />
+      <ScandicLogoIcon width="103px" height="22px" />
     </NextLink>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx

@@ -119,7 +119,7 @@ export async function Receipt({ refId }: { refId: string }) {
     return (
       <main className={styles.main}>
         <div>
-          <ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
+          <ScandicLogoIcon width="89px" height="19px" />
           <div className={styles.addresses}>
             <div>
               <Typography variant="Body/Supporting text (caption)/smRegular">

packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx

@@ -1,17 +1,15 @@
 import type { LogoProps } from '../icon'
-import { iconVariants } from '../variants'
 
 export default function DowntownCamperIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 123,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="123"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 123 30"
       fill="none"

packages/design-system/lib/components/Icons/Logos/GrandHotelOslo.tsx

@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function GrandHotelOsloLogoIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 69,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="69"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 69 30"
       fill="none"

packages/design-system/lib/components/Icons/Logos/Haymarket.tsx

@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function HaymarketIcon({
-  className,
-  color,
+  className = '',
   height = 26,
+  width = 100,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="100"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 100 26"
       fill="none"

packages/design-system/lib/components/Icons/Logos/HotelNorge.tsx

@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function HotelNorgeIcon({
-  className,
-  color,
+  className = '',
   height = 24,
+  width = 117,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="117"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 117 24"
       fill="none"

packages/design-system/lib/components/Icons/Logos/Marski.tsx

@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function MarskiLogoIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 92,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="92"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 92 30"
       fill="none"

packages/design-system/lib/components/Icons/Logos/ScandicGoLogo.tsx

@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function ScandicGoLogoIcon({
-  className,
-  color,
+  className = '',
   height = 18,
+  width = 90,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="90"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 90 18"
       fill="none"

packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx

@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function ScandicLogoIcon({
-  className,
-  color,
+  className = '',
   height = 14,
+  width = 58,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="58"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 58 14"
       fill="none"

packages/design-system/lib/components/Icons/Logos/TheDock.tsx

@@ -1,18 +1,15 @@
 import type { LogoProps } from '../icon'
-import { iconVariants } from '../variants'
 
 export default function TheDockIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 128,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
-
   return (
     <svg
-      className={classNames}
-      width="128"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 128 30"
       fill="none"

packages/design-system/lib/components/Icons/Logos/index.tsx

@@ -51,6 +51,6 @@ export default function HotelLogoIcon({
     case SignatureHotelEnum.TheDock:
       return <TheDockIcon height={height} />
     default:
-      return <ScandicLogoIcon height={height} color="Icon/Interactive/Accent" />
+      return <ScandicLogoIcon height={height} />
   }
 }

packages/design-system/lib/components/Icons/icon.ts

@@ -15,8 +15,7 @@ export interface IllustrationProps
 }
 
 export interface LogoProps
-  extends Omit<React.SVGAttributes<HTMLOrSVGElement>, 'color'>,
-    VariantProps<typeof iconVariants> {
+  extends Omit<React.SVGAttributes<HTMLOrSVGElement>, 'color'> {
   width?: string | number
   height?: string | number
 }