Merged in feat-StaticChip-component (pull request #3401)

feat: create new StaticChip component

* feat: create new StaticChip componeny

* refactor: remove deprecated Chip

* fix: update type

* refactor: remove div


Approved-by: Erik Tiekstra

apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -1,7 +1,7 @@
 import { Lock } from "react-feather"
 
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
@@ -46,13 +46,13 @@ export default async function NextLevelRewardsBlock({
       <Grids.Stackable columns={2}>
         {nextLevelRewards.rewards.map((reward) => (
           <article key={reward.reward_id} className={styles.card}>
-            <Chip>
+            <ChipStatic lowerCase>
               <Lock height={16} />
               {intl.formatMessage({
                 id: "rewards.nextLevel.levelUpToUnlock",
                 defaultMessage: "Level up to unlock",
               })}
-            </Chip>
+            </ChipStatic>
             <div className={styles.textContainer}>
               <Typography
                 variant="Body/Paragraph/mdRegular"

apps/scandic-web/components/ContentCard/index.tsx

@@ -4,7 +4,7 @@ import { cx } from "class-variance-authority"
 import NextLink from "next/link"
 import { useIntl } from "react-intl"
 
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -47,7 +47,14 @@ export function ContentCard({
           dimensions={image.dimensions}
         />
         {promoText ? (
-          <Chip className={styles.promoTag}>{promoText}</Chip>
+          <ChipStatic
+            color="Neutral"
+            size="sm"
+            lowerCase
+            className={styles.promoTag}
+          >
+            {promoText}
+          </ChipStatic>
         ) : null}
       </div>
       <div className={styles.content}>

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/index.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 
 import { mapExperiencesToListData } from "./utils"
 
@@ -25,10 +25,10 @@ export default function ExperienceList({ experiences }: ExperienceListProps) {
     <ul className={styles.experienceList}>
       {experienceList.map(({ Icon, name }) => (
         <li key={name}>
-          <Chip variant="tag">
+          <ChipStatic>
             <Icon size={20} color="Icon/Interactive/Default" />
             {name}
-          </Chip>
+          </ChipStatic>
         </li>
       ))}
     </ul>

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx

@@ -1,8 +1,7 @@
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./dialogImage.module.css"
 
@@ -34,12 +33,10 @@ export default function DialogImage({
       )}
       {rating ? (
         <div className={styles.tripAdvisor}>
-          <Chip className={styles.tripAdvisor}>
+          <ChipStatic color="Neutral" size="sm" className={styles.tripAdvisor}>
             <TripadvisorIcon color="Icon/Interactive/Default" />
-            <Typography variant="Tag/sm">
-              <span>{rating}</span>
-            </Typography>
-          </Chip>
+            {rating}
+          </ChipStatic>
         </div>
       ) : null}
     </div>