Merged in feat/sw-3145-move-iconchip-to-design-system (pull request #2588)

feat(SW-3145): Move IconChip to design-system

* Move IconChip to design-system


Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Anton Gunnarsson
2025-08-01 14:21:05 +00:00
parent 630cc12215
commit 7a3ee76206
9 changed files with 10 additions and 12 deletions

View File

@@ -1,13 +1,12 @@
import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
import IconChip from "@scandic-hotels/design-system/IconChip"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import FilledDiscountIcon from "@scandic-hotels/design-system/Icons/FilledDiscountIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import IconChip from "../TempDesignSystem/IconChip"
import styles from "./bookingCodeChip.module.css"
type BaseBookingCodeChipProps = {

View File

@@ -1,13 +1,12 @@
"use client"
import { useIntl } from "react-intl"
import IconChip from "@scandic-hotels/design-system/IconChip"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import IconChip from "@/components/TempDesignSystem/IconChip"
import styles from "./bookingCode.module.css"
export default function BookingCode() {

View File

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import IconChip from "@scandic-hotels/design-system/IconChip"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
@@ -15,7 +16,6 @@ import { changeOrCancelDateFormat } from "@/constants/dateFormats"
import { IconForFeatureCode } from "@/components/HotelReservation/utils"
import Image from "@/components/Image"
import Modal from "@/components/Modal"
import IconChip from "@/components/TempDesignSystem/IconChip"
import useRateTitles from "@/hooks/booking/useRateTitles"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

View File

@@ -1,13 +1,12 @@
"use client"
import { useIntl } from "react-intl"
import IconChip from "@scandic-hotels/design-system/IconChip"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import IconChip from "@/components/TempDesignSystem/IconChip"
export default function BookingCode() {
const intl = useIntl()

View File

@@ -1,6 +1,7 @@
import { useIntl } from "react-intl"
import { dt } from "@scandic-hotels/common/dt"
import IconChip from "@scandic-hotels/design-system/IconChip"
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -15,7 +16,6 @@ import { sumPackages } from "@/components/HotelReservation/utils"
import ImageGallery from "@/components/ImageGallery"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import IconChip from "@/components/TempDesignSystem/IconChip"
import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
import useLang from "@/hooks/useLang"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

View File

@@ -1,22 +0,0 @@
.chip {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border-radius: var(--Corner-radius-sm);
}
.blue {
background-color: var(--Scandic-Blue-00);
color: var(--UI-Semantic-Information);
}
.green {
background-color: var(--Scandic-Green-00);
color: var(--UI-Semantic-Success);
}
.red {
background-color: var(--Scandic-Red-00);
color: var(--UI-Semantic-Error);
}

View File

@@ -1,26 +0,0 @@
import { iconChipVariants } from "./variants"
interface IconChipProps {
color: "blue" | "green" | "red" | null | undefined
icon: React.ReactNode
children: React.ReactNode
className?: string
}
export default function IconChip({
color,
icon,
className,
children,
}: IconChipProps) {
const classNames = iconChipVariants({
color: color,
className: className,
})
return (
<div className={classNames}>
{icon}
{children}
</div>
)
}

View File

@@ -1,13 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./iconChip.module.css"
export const iconChipVariants = cva(styles.chip, {
variants: {
color: {
blue: styles.blue,
green: styles.green,
red: styles.red,
},
},
})