Merged in fix/ref-errors-typography (pull request #2240)

fix: rendering errors when applying components to children that are already applying to children

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/components/DatePicker/Range/Desktop.tsx

@@ -5,6 +5,7 @@ import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
@@ -12,7 +13,6 @@ import { dt } from "@/lib/dt"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"
@@ -123,9 +123,9 @@ export default function DatePickerRangeDesktop({
         MonthCaption(props) {
           return (
             <div className={props.className}>
-              <Subtitle asChild type="two">
-                {props.children}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <h3>{props.children}</h3>
+              </Typography>
             </div>
           )
         },

apps/scandic-web/components/DatePicker/Range/Mobile.tsx

@@ -3,13 +3,13 @@ import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"
@@ -86,9 +86,9 @@ export default function DatePickerRangeMobile({
           MonthCaption(props) {
             return (
               <div className={props.className}>
-                <Subtitle asChild type="two">
-                  {props.children}
-                </Subtitle>
+                <Typography variant="Title/Subtitle/md">
+                  <h3>{props.children}</h3>
+                </Typography>
               </div>
             )
           },

apps/scandic-web/components/Header/TopMenu/index.tsx

@@ -8,7 +8,6 @@ import { getHeader } from "@/lib/trpc/memoizedRequests"
 import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
@@ -47,13 +46,11 @@ export default async function TopMenu() {
         <div className={styles.options}>
           <LanguageSwitcher type="desktopHeader" />
 
-          <Caption type="regular" color="textMediumContrast" asChild>
-            <HeaderLink href={findMyBookingUrl} iconName={IconName.Search}>
-              {intl.formatMessage({
-                defaultMessage: "Find booking",
-              })}
-            </HeaderLink>
-          </Caption>
+          <HeaderLink href={findMyBookingUrl} iconName={IconName.Search}>
+            {intl.formatMessage({
+              defaultMessage: "Find booking",
+            })}
+          </HeaderLink>
         </div>
       </div>
     </div>