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:
@@ -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 = {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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()
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user