diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts index ac98d5f32..dee0ae5c8 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/data.ts @@ -1,9 +1,9 @@ // import { REWARD_IDS } from "@scandic-hotels/trpc/types/rewards" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" +import { IllustrationByIconName } from "@scandic-hotels/design-system/Icons/IllustrationByIconName" import { REWARD_IDS, type RewardId } from "@scandic-hotels/trpc/types/rewards" -import { IconName } from "@/components/Icons/iconName" -import { IllustrationByIconName } from "@/components/Icons/IllustrationByIconName" import { isValidRewardId } from "@/utils/rewards" import type { IconProps } from "@scandic-hotels/design-system/Icons" diff --git a/apps/scandic-web/components/Blocks/Essentials/index.tsx b/apps/scandic-web/components/Blocks/Essentials/index.tsx index 4d6a91926..29433e6ba 100644 --- a/apps/scandic-web/components/Blocks/Essentials/index.tsx +++ b/apps/scandic-web/components/Blocks/Essentials/index.tsx @@ -1,9 +1,8 @@ import { cx } from "class-variance-authority" +import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect" import { Typography } from "@scandic-hotels/design-system/Typography" -import IconByCSSelect from "@/components/Icons/IconByCSSelect" - import styles from "./essentials.module.css" import type { EssentialsBlock } from "@scandic-hotels/trpc/types/campaignPage" diff --git a/apps/scandic-web/components/Blocks/UspGrid/index.tsx b/apps/scandic-web/components/Blocks/UspGrid/index.tsx index 4122dc8a9..dc2d15832 100644 --- a/apps/scandic-web/components/Blocks/UspGrid/index.tsx +++ b/apps/scandic-web/components/Blocks/UspGrid/index.tsx @@ -1,4 +1,5 @@ -import { IconByIconName } from "@/components/Icons/IconByIconName" +import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName" + import JsonToHtml from "@/components/JsonToHtml" import { renderOptions } from "./renderOptions" diff --git a/apps/scandic-web/components/Blocks/UspGrid/utils.ts b/apps/scandic-web/components/Blocks/UspGrid/utils.ts index 23ce34479..a880107d6 100644 --- a/apps/scandic-web/components/Blocks/UspGrid/utils.ts +++ b/apps/scandic-web/components/Blocks/UspGrid/utils.ts @@ -1,4 +1,4 @@ -import { IconName } from "@/components/Icons/iconName" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import type { UspIcon } from "@/types/components/blocks/uspGrid" diff --git a/apps/scandic-web/components/ContentType/HotelPage/data.tsx b/apps/scandic-web/components/ContentType/HotelPage/data.tsx index 2845d859f..6d1a622d6 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/data.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/data.tsx @@ -1,8 +1,7 @@ +import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { FacilityEnum } from "@scandic-hotels/trpc/enums/facilities" -import { IconByIconName } from "@/components/Icons/IconByIconName" -import { IconName } from "@/components/Icons/iconName" - import type { IconProps, NucleoIconProps, diff --git a/apps/scandic-web/components/Footer/Details/SocialLink/index.tsx b/apps/scandic-web/components/Footer/Details/SocialLink/index.tsx index 7940c9b24..998c64daf 100644 --- a/apps/scandic-web/components/Footer/Details/SocialLink/index.tsx +++ b/apps/scandic-web/components/Footer/Details/SocialLink/index.tsx @@ -1,11 +1,13 @@ "use client" -import { IconByIconName } from "@/components/Icons/IconByIconName" +import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName" + import { trackSocialMediaClick } from "@/utils/tracking" +import type { IconName } from "@scandic-hotels/design-system/Icons/iconName" + import type { SocialIconsProps } from "@/types/components/footer/socialIcons" import type { SocialLinkProps } from "@/types/components/footer/socialLink" -import type { IconName } from "@/components/Icons/iconName" function SocialIcon({ iconName }: SocialIconsProps) { const SocialIcon = ( diff --git a/apps/scandic-web/components/Header/HeaderLink/index.tsx b/apps/scandic-web/components/Header/HeaderLink/index.tsx index 44d71b6b6..bced2bf34 100644 --- a/apps/scandic-web/components/Header/HeaderLink/index.tsx +++ b/apps/scandic-web/components/Header/HeaderLink/index.tsx @@ -2,10 +2,9 @@ import Link from "next/link" +import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName" import { Typography } from "@scandic-hotels/design-system/Typography" -import { IconByIconName } from "@/components/Icons/IconByIconName" - import styles from "./headerLink.module.css" import type { HeaderLinkProps } from "@/types/components/header/headerLink" diff --git a/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx b/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx index be4de2b28..34985eb8c 100644 --- a/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx +++ b/apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx @@ -6,11 +6,11 @@ import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { customerService } from "@/constants/webHrefs" import useDropdownStore from "@/stores/main-menu" -import { IconName } from "@/components/Icons/iconName" import LanguageSwitcher from "@/components/LanguageSwitcher" import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Header/TopLink/index.tsx b/apps/scandic-web/components/Header/TopLink/index.tsx index a8a6c0e1d..5d85fb48d 100644 --- a/apps/scandic-web/components/Header/TopLink/index.tsx +++ b/apps/scandic-web/components/Header/TopLink/index.tsx @@ -1,4 +1,4 @@ -import { IconName } from "@/components/Icons/iconName" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import HeaderLink from "../HeaderLink" diff --git a/apps/scandic-web/components/Header/TopMenu/index.tsx b/apps/scandic-web/components/Header/TopMenu/index.tsx index b54d05f9f..8a406118a 100644 --- a/apps/scandic-web/components/Header/TopMenu/index.tsx +++ b/apps/scandic-web/components/Header/TopMenu/index.tsx @@ -1,9 +1,9 @@ import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import { getHeader } from "@/lib/trpc/memoizedRequests" -import { IconName } from "@/components/Icons/iconName" import LanguageSwitcher from "@/components/LanguageSwitcher" import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" diff --git a/apps/scandic-web/components/Icons/IconByCSSelect.tsx b/apps/scandic-web/components/Icons/IconByCSSelect.tsx deleted file mode 100644 index 1d2107e09..000000000 --- a/apps/scandic-web/components/Icons/IconByCSSelect.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import BouquetIcon from "@scandic-hotels/design-system/Icons/BouquetIcon" -import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon" -import { - MaterialIcon, - type MaterialIconProps, -} from "@scandic-hotels/design-system/Icons/MaterialIcon" -import PalmTreeIcon from "@scandic-hotels/design-system/Icons/PalmTreeIcon" - -import type { IconProps } from "@scandic-hotels/design-system/Icons" - -interface IconByCSSelectProps extends IconProps { - identifier: string -} - -export default function IconByCSSelect({ - identifier, - color = "CurrentColor", - size = 24, - ...props -}: IconByCSSelectProps) { - switch (identifier) { - // These are custom icons - case "discount-2-2": - return - case "bouquet": - return - case "palm_tree": - return - - // These are all Material Icons - case "electric_car": - case "golf_course": - case "museum": - case "spa": - case "airplane_ticket": - case "apartment": - case "attractions": - case "award_star": - case "beach_access": - case "box": - case "deck": - case "directions_run": - case "directions_subway": - case "downhill_skiing": - case "emoji_transportation": - case "exercise": - case "family_restroom": - case "festival": - case "forest": - case "garage": - case "hiking": - case "houseboat": - case "kayaking": - case "landscape": - case "location_city": - case "location_on": - case "loyalty": - case "music_note": - case "night_shelter": - case "nightlife": - case "pedal_bike": - case "pets": - case "pool": - case "recommend": - case "redeem": - case "restaurant": - case "sauna": - case "sell": - case "shopping_bag": - case "sports_handball": - case "sports_tennis": - case "theater_comedy": - case "things_to_do": - case "tram": - case "transit_ticket": - case "travel": - case "travel_luggage_and_bags": - case "favorite": - return ( - - ) - default: - return ( - - ) - } -} diff --git a/apps/scandic-web/components/Icons/IllustrationByIconName.ts b/apps/scandic-web/components/Icons/IllustrationByIconName.ts deleted file mode 100644 index fea7f623a..000000000 --- a/apps/scandic-web/components/Icons/IllustrationByIconName.ts +++ /dev/null @@ -1,48 +0,0 @@ -import BedIcon from "@scandic-hotels/design-system/Icons/BedIcon" -import CoinIcon from "@scandic-hotels/design-system/Icons/CoinIcon" -import CroissantCoffeeEggIcon from "@scandic-hotels/design-system/Icons/CroissantCoffeeEggIcon" -import CutleryOneIcon from "@scandic-hotels/design-system/Icons/CutleryOneIcon" -import CutleryTwoIcon from "@scandic-hotels/design-system/Icons/CutleryTwoIcon" -import GiftOpenIcon from "@scandic-hotels/design-system/Icons/GiftOpenIcon" -import HandKeyIcon from "@scandic-hotels/design-system/Icons/HandKeyIcon" -import HotelNightIcon from "@scandic-hotels/design-system/Icons/HotelNightIcon" -import KidsIcon from "@scandic-hotels/design-system/Icons/KidsIcon" -import KidsMocktailIcon from "@scandic-hotels/design-system/Icons/KidsMocktailIcon" -import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon" -import MoneyHandIcon from "@scandic-hotels/design-system/Icons/MoneyHandIcon" -import VoucherIcon from "@scandic-hotels/design-system/Icons/VoucherIcon" - -import { IconName } from "./iconName" - -export function IllustrationByIconName(iconName: IconName | null) { - switch (iconName) { - case IconName.Kids: - return KidsIcon - case IconName.KidsMocktail: - return KidsMocktailIcon - case IconName.MagicWand: - return MagicWandIcon - case IconName.MoneyHand: - return MoneyHandIcon - case IconName.HandKey: - return HandKeyIcon - case IconName.HotelNight: - return HotelNightIcon - case IconName.GiftOpen: - return GiftOpenIcon - case IconName.CutleryOne: - return CutleryOneIcon - case IconName.CutleryTwo: - return CutleryTwoIcon - case IconName.CroissantCoffeeEgg: - return CroissantCoffeeEggIcon - case IconName.Coin: - return CoinIcon - case IconName.Bed: - return BedIcon - case IconName.Voucher: - return VoucherIcon - default: - return null - } -} diff --git a/apps/scandic-web/components/Icons/iconName.ts b/apps/scandic-web/components/Icons/iconName.ts deleted file mode 100644 index 25718e4be..000000000 --- a/apps/scandic-web/components/Icons/iconName.ts +++ /dev/null @@ -1,181 +0,0 @@ -export enum IconName { - Accesories = "Accesories", - Accessibility = "Accessibility", - AccountCircle = "AccountCircle", - Air = "Air", - AirConAirCooling = "AirConAirCooling", - AirConditioningInRoom = "AirConditioningInRoom", - Airplane = "Airplane", - ArmChair = "ArmChair", - ArrowLeft = "ArrowLeft", - ArrowLeftSmall = "ArrowLeftSmall", - ArrowFrom = "ArrowFrom", - ArrowRight = "ArrowRight", - ArrowRightSmall = "ArrowRightSmall", - ArrowTo = "ArrowTo", - AwardStar = "AwardStar", - Bar = "Bar", - BathroomCabinet = "BathroomCabinet", - Beach = "Beach", - BeautySalon = "BeautySalon", - Bed = "Bed", - Bike = "Bike", - Bouquet = "Bouquet", - Bowling = "Bowling", - Business = "Business", - BusinessCentre = "BusinessCentre", - Calendar = "Calendar", - Camera = "Camera", - CashFree = "CashFree", - Cellphone = "Cellphone", - Check = "Check", - CheckCircle = "CheckCircle", - ChevronDown = "ChevronDown", - ChevronDownSmall = "ChevronDownSmall", - ChevronLeft = "ChevronLeft", - ChevronLeftSmall = "ChevronLeftSmall", - ChevronRight = "ChevronRight", - ChevronRightSmall = "ChevronRightSmall", - ChevronUp = "ChevronUp", - ChevronUpSmall = "ChevronUpSmall", - Chips = "Chips", - City = "City", - Close = "Close", - CloseLarge = "CloseLarge", - CoffeeAlt = "CoffeeAlt", - CoffeeInReceptionAtCharge = "CoffeeInReceptionAtCharge", - CoffeeShop = "CoffeeShop", - Coin = "Coin", - ComplimentaryColdRefreshments = "ComplimentaryColdRefreshments", - Concierge = "Concierge", - ConferenceRoom = "ConferenceRoom", - ConvenienceStore24h = "ConvenienceStore24h", - ConventionCentre = "ConventionCentre", - CroissantCoffeeEgg = "CroissantCoffeeEgg", - CrossCircle = "CrossCircle", - CrossCircleOutline = "CrossCircleOutline", - Cultural = "Cultural", - CutleryOne = "CutleryOne", - CutleryTwo = "CutleryTwo", - Deck = "Deck", - Desk = "Desk", - Diamond = "Diamond", - Dining = "Dining", - DirectDial = "DirectDial", - Directions = "Directions", - DoorOpen = "DoorOpen", - Dresser = "Dresser", - ElectricBike = "ElectricBike", - ElectricCar = "ElectricCar", - Elevator = "Elevator", - Email = "Email", - ExternalLink = "ExternalLink", - ExtraFamilyFriendly = "ExtraFamilyFriendly", - EyeHide = "EyeHide", - EyeShow = "EyeShow", - Facebook = "Facebook", - Fan = "Fan", - Fax = "Fax", - Fitness = "Fitness", - FoodDrinks247 = "FoodDrinks247", - Footstool = "Footstool", - Gallery = "Gallery", - Gaming = "Gaming", - Garage = "Garage", - Gift = "Gift", - GiftOpen = "GiftOpen", - Globe = "Globe", - Golf = "Golf", - Guard = "Guard", - Hairdresser = "Hairdresser", - HairdryerInRoomAllScandic = "HairdryerInRoomAllScandic", - HandKey = "HandKey", - Hanger = "Hanger", - HangerAlt = "HangerAlt", - Heat = "Heat", - Heart = "Heart", - Hiking = "Hiking", - HotelNight = "HotelNight", - House = "House", - Houseboat = "Houseboat", - IceMachine = "IceMachine", - Image = "Image", - InfoCircle = "InfoCircle", - Instagram = "Instagram", - Ironing = "Ironing", - Jacuzzi = "Jaccuzzi", - Kayaking = "Kayaking", - Kettle = "Kettle", - Kids = "Kids", - KidsMocktail = "KidsMocktail", - Landscape = "Landscape", - Lamp = "Lamp", - LaptopSafe = "LaptopSafe", - LaundryMachine = "LaundryMachine", - Link = "Link", - LocalBar = "LocalBar", - Location = "Location", - Lock = "Lock", - Breakfast = "Breakfast", - Luggage = "Luggage", - LuggageLockers = "LuggageLockers", - MagicWand = "MagicWand", - Map = "Map", - Massage = "Massage", - Minibar = "Minibar", - Minus = "Minus", - MoneyHand = "MoneyHand", - Museum = "Museum", - Nature = "Nature", - Nightlife = "Nightlife", - NightShelter = "NightShelter", - NonSmoking = "NonSmoking", - NoSmoking = "NoSmoking", - OpenInNew = "OpenInNew", - OpenInNewSmall = "OpenInNewSmall", - OutdoorFurniture = "OutdoorFurniture", - PalmTree = "Palmtree", - Parking = "Parking", - ParkingOutdoor = "ParkingOutdoor", - Person = "Person", - Pets = "Pets", - Phone = "Phone", - Plus = "Plus", - PlusCircle = "PlusCircle", - Popcorn = "Popcorn", - PriceTag = "PriceTag", - RecordPlayer = "RecordPlayer", - Restaurant = "Restaurant", - RoomService = "RoomService", - SafetyBox = "SafetyBox", - Sauna = "Sauna", - Search = "Search", - Service = "Service", - Shopping = "Shopping", - Skateboarding = "Skateboarding", - Skiing = "Skiing", - Smoking = "Smoking", - Snowflake = "Snowflake", - Spa = "Spa", - Sports = "Sports", - Star = "Star", - StarFilled = "StarFilled", - Street = "Street", - Swim = "Swim", - Theatre = "Theatre", - Swipe = "Swipe", - Thermostat = "Thermostat", - Toilet = "Toilet", - Ticket = "Ticket", - Train = "Train", - Tripadvisor = "Tripadvisor", - Tshirt = "Tshirt", - TshirtWash = "TshirtWash", - TvCasting = "TvCasting", - TVRemote = "TVRemote", - Voucher = "Voucher", - WarningTriangle = "WarningTriangle", - Wheelchair = "Wheelchair", - Wifi = "Wifi", - Kitchen = "Kitchen", -} diff --git a/apps/scandic-web/components/Maps/Markers/Poi/index.tsx b/apps/scandic-web/components/Maps/Markers/Poi/index.tsx index 37d3fe1aa..b73ad7de2 100644 --- a/apps/scandic-web/components/Maps/Markers/Poi/index.tsx +++ b/apps/scandic-web/components/Maps/Markers/Poi/index.tsx @@ -1,4 +1,4 @@ -import { IconByIconName } from "@/components/Icons/IconByIconName" +import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName" import { getIconByPoiGroupAndCategory } from "../utils" import { poiVariants } from "./variants" diff --git a/apps/scandic-web/components/Maps/Markers/utils.ts b/apps/scandic-web/components/Maps/Markers/utils.ts index 121c24b78..f02746f82 100644 --- a/apps/scandic-web/components/Maps/Markers/utils.ts +++ b/apps/scandic-web/components/Maps/Markers/utils.ts @@ -1,7 +1,6 @@ +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { PointOfInterestGroupEnum } from "@scandic-hotels/trpc/enums/pointOfInterest" -import { IconName } from "@/components/Icons/iconName" - export function getIconByPoiGroupAndCategory( group: PointOfInterestGroupEnum, category?: string diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx index dfdc51dd0..7aacfe7d2 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx @@ -2,10 +2,10 @@ import { useIntl } from "react-intl" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { Typography } from "@scandic-hotels/design-system/Typography" import ButtonLink from "@/components/ButtonLink" -import { IconName } from "@/components/Icons/iconName" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" import styles from "./sidePeekAccordion.module.css" diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx index 70543b960..44a3e55e1 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx @@ -3,10 +3,10 @@ import { useIntl } from "react-intl" import { isDefined } from "@scandic-hotels/common/utils/isDefined" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { Typography } from "@scandic-hotels/design-system/Typography" import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType" -import { IconName } from "@/components/Icons/iconName" import OpeningHours from "@/components/OpeningHours" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx index 74b63d522..55ca44769 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx @@ -3,9 +3,9 @@ import { useIntl } from "react-intl" import { Divider } from "@scandic-hotels/design-system/Divider" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { Typography } from "@scandic-hotels/design-system/Typography" -import { IconName } from "@/components/Icons/iconName" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" import styles from "./sidePeekAccordion.module.css" diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx index 514b3223c..f50847fcf 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx +++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx @@ -2,10 +2,10 @@ import { useIntl } from "react-intl" +import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { Typography } from "@scandic-hotels/design-system/Typography" import ButtonLink from "@/components/ButtonLink" -import { IconName } from "@/components/Icons/iconName" import ParkingInformation from "@/components/ParkingInformation" import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" diff --git a/apps/scandic-web/components/TabFilters/index.tsx b/apps/scandic-web/components/TabFilters/index.tsx index b16d93792..e52b96733 100644 --- a/apps/scandic-web/components/TabFilters/index.tsx +++ b/apps/scandic-web/components/TabFilters/index.tsx @@ -3,11 +3,10 @@ import { cx } from "class-variance-authority" import { ChipButton } from "@scandic-hotels/design-system/ChipButton" +import IconByCSSelect from "@scandic-hotels/design-system/Icons/IconByCSSelect" import useScrollShadows from "@/hooks/useScrollShadows" -import IconByCSSelect from "../Icons/IconByCSSelect" - import styles from "./tabFilters.module.css" interface Filter { diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts index 73889c9aa..128344876 100644 --- a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts +++ b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts @@ -1,7 +1,7 @@ +import type { IconName } from "@scandic-hotels/design-system/Icons/iconName" import type { VariantProps } from "class-variance-authority" import type { ReactNode } from "react" -import type { IconName } from "@/components/Icons/iconName" import type { accordionItemVariants } from "./variants" export interface AccordionItemProps diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx index 27474392b..052581e52 100644 --- a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx @@ -3,10 +3,10 @@ import { useRef } from "react" import Body from "@scandic-hotels/design-system/Body" +import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Subtitle from "@scandic-hotels/design-system/Subtitle" -import { IconByIconName } from "@/components/Icons/IconByIconName" import { trackAccordionClick } from "@/utils/tracking" import { accordionItemVariants } from "./variants" diff --git a/apps/scandic-web/types/components/footer/socialIcons.ts b/apps/scandic-web/types/components/footer/socialIcons.ts index b528d1037..35a453dc4 100644 --- a/apps/scandic-web/types/components/footer/socialIcons.ts +++ b/apps/scandic-web/types/components/footer/socialIcons.ts @@ -1,4 +1,4 @@ -import type { IconName } from "@/components/Icons/iconName" +import type { IconName } from "@scandic-hotels/design-system/Icons/iconName" export type SocialIconsProps = { iconName: IconName diff --git a/apps/scandic-web/types/components/header/headerLink.ts b/apps/scandic-web/types/components/header/headerLink.ts index 4370d048d..af68208bd 100644 --- a/apps/scandic-web/types/components/header/headerLink.ts +++ b/apps/scandic-web/types/components/header/headerLink.ts @@ -1,7 +1,6 @@ +import type { IconName } from "@scandic-hotels/design-system/Icons/iconName" import type { LinkProps } from "next/link" -import type { IconName } from "@/components/Icons/iconName" - export interface HeaderLinkProps extends React.PropsWithChildren { href: LinkProps["href"] iconName: IconName | null diff --git a/packages/design-system/lib/components/Icons/IconByCSSelect.tsx b/packages/design-system/lib/components/Icons/IconByCSSelect.tsx new file mode 100644 index 000000000..6fbc8a328 --- /dev/null +++ b/packages/design-system/lib/components/Icons/IconByCSSelect.tsx @@ -0,0 +1,89 @@ +import BouquetIcon from './Nucleo/Benefits/bouquet' +import DiscountIcon from './Nucleo/Benefits/discount-2-2' +import { MaterialIcon, type MaterialIconProps } from './MaterialIcon' +import PalmTreeIcon from './Nucleo/Experiences/palm-tree-2' + +import type { IconProps } from './icon' + +interface IconByCSSelectProps extends IconProps { + identifier: string +} + +export default function IconByCSSelect({ + identifier, + color = 'CurrentColor', + size = 24, + ...props +}: IconByCSSelectProps) { + switch (identifier) { + // These are custom icons + case 'discount-2-2': + return + case 'bouquet': + return + case 'palm_tree': + return + + // These are all Material Icons + case 'electric_car': + case 'golf_course': + case 'museum': + case 'spa': + case 'airplane_ticket': + case 'apartment': + case 'attractions': + case 'award_star': + case 'beach_access': + case 'box': + case 'deck': + case 'directions_run': + case 'directions_subway': + case 'downhill_skiing': + case 'emoji_transportation': + case 'exercise': + case 'family_restroom': + case 'festival': + case 'forest': + case 'garage': + case 'hiking': + case 'houseboat': + case 'kayaking': + case 'landscape': + case 'location_city': + case 'location_on': + case 'loyalty': + case 'music_note': + case 'night_shelter': + case 'nightlife': + case 'pedal_bike': + case 'pets': + case 'pool': + case 'recommend': + case 'redeem': + case 'restaurant': + case 'sauna': + case 'sell': + case 'shopping_bag': + case 'sports_handball': + case 'sports_tennis': + case 'theater_comedy': + case 'things_to_do': + case 'tram': + case 'transit_ticket': + case 'travel': + case 'travel_luggage_and_bags': + case 'favorite': + return ( + + ) + default: + return ( + + ) + } +} diff --git a/apps/scandic-web/components/Icons/IconByIconName.tsx b/packages/design-system/lib/components/Icons/IconByIconName.tsx similarity index 88% rename from apps/scandic-web/components/Icons/IconByIconName.tsx rename to packages/design-system/lib/components/Icons/IconByIconName.tsx index d32e908f8..8eca2e7c5 100644 --- a/apps/scandic-web/components/Icons/IconByIconName.tsx +++ b/packages/design-system/lib/components/Icons/IconByIconName.tsx @@ -1,36 +1,30 @@ -import BathroomCabinetIcon from "@scandic-hotels/design-system/Icons/BathroomCabinetIcon" -import BouquetIcon from "@scandic-hotels/design-system/Icons/BouquetIcon" -import BowlingPinsIcon from "@scandic-hotels/design-system/Icons/BowlingPinsIcon" -import ChipsIcon from "@scandic-hotels/design-system/Icons/ChipsIcon" -import ConferenceRoomIcon from "@scandic-hotels/design-system/Icons/ConferenceRoomIcon" -import DoorIcon from "@scandic-hotels/design-system/Icons/DoorIcon" -import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon" -import FootStoolIcon from "@scandic-hotels/design-system/Icons/FootStoolIcon" -import HairdresserIcon from "@scandic-hotels/design-system/Icons/HairdresserIcon" -import HairdryerIcon from "@scandic-hotels/design-system/Icons/HairdryerIcon" -import IceMachineIcon from "@scandic-hotels/design-system/Icons/IceMachineIcon" -import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon" -import MassageIcon from "@scandic-hotels/design-system/Icons/MassageIcon" -import { - MaterialIcon, - type MaterialIconSetIconProps, -} from "@scandic-hotels/design-system/Icons/MaterialIcon" -import PalmTreeIcon from "@scandic-hotels/design-system/Icons/PalmTreeIcon" -import PopcornIcon from "@scandic-hotels/design-system/Icons/PopcornIcon" -import RecordPlayerIcon from "@scandic-hotels/design-system/Icons/RecordPlayerIcon" -import RoadIcon from "@scandic-hotels/design-system/Icons/RoadIcon" -import SafetyBoxIcon from "@scandic-hotels/design-system/Icons/SafetyBoxIcon" -import ToiletIcon from "@scandic-hotels/design-system/Icons/ToiletIcon" -import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon" -import UserPoliceIcon from "@scandic-hotels/design-system/Icons/UserPoliceIcon" +import BathroomCabinetIcon from './Nucleo/Amenities_Facilities/bathroom-cabinet-2' +import BouquetIcon from './Nucleo/Benefits/bouquet' +import BowlingPinsIcon from './Nucleo/Experiences/bowling-pins' +import ChipsIcon from './Nucleo/Food/chips-3' +import ConferenceRoomIcon from './Nucleo/Amenities_Facilities/conference-room' +import DoorIcon from './Nucleo/Amenities_Facilities/door-2' +import FacebookIcon from './Customised/Socials/Facebook' +import FootStoolIcon from './Customised/Amenities_Facilities/FootStool' +import HairdresserIcon from './Nucleo/Amenities_Facilities/hairdresser-1' +import HairdryerIcon from './Customised/Amenities_Facilities/Hairdryer' +import IceMachineIcon from './Customised/Amenities_Facilities/IceMachine' +import InstagramIcon from './Customised/Socials/Instagram' +import MassageIcon from './Customised/Amenities_Facilities/Massage' +import { MaterialIcon, type MaterialIconSetIconProps } from './MaterialIcon' +import PalmTreeIcon from './Nucleo/Experiences/palm-tree-2' +import PopcornIcon from './Nucleo/Food/popcorn-2' +import RecordPlayerIcon from './Nucleo/Amenities_Facilities/record-player-3' +import RoadIcon from './Customised/Amenities_Facilities/Road' +import SafetyBoxIcon from './Customised/Amenities_Facilities/SafetyBox' +import ToiletIcon from './Nucleo/Amenities_Facilities/toilet-2' +import TripadvisorIcon from './Customised/Socials/Tripadvisor' +import UserPoliceIcon from './Nucleo/Amenities_Facilities/user-police-2' -import { IconName } from "./iconName" +import { IconName } from './iconName' -import type { - IconProps, - NucleoIconProps, -} from "@scandic-hotels/design-system/Icons" -import type { JSX } from "react" +import type { IconProps, NucleoIconProps } from './icon' +import type { JSX } from 'react' interface IconByIconNameProps { iconName: IconName | null diff --git a/packages/design-system/lib/components/Icons/IllustrationByIconName.ts b/packages/design-system/lib/components/Icons/IllustrationByIconName.ts new file mode 100644 index 000000000..e72a57ae9 --- /dev/null +++ b/packages/design-system/lib/components/Icons/IllustrationByIconName.ts @@ -0,0 +1,48 @@ +import BedIcon from './Illustrations/Bed' +import CoinIcon from './Illustrations/Coin' +import CroissantCoffeeEggIcon from './Illustrations/CroissantCoffeeEgg' +import CutleryOneIcon from './Illustrations/CutleryOne' +import CutleryTwoIcon from './Illustrations/CutleryTwo' +import GiftOpenIcon from './Illustrations/GiftOpen' +import HandKeyIcon from './Illustrations/HandKey' +import HotelNightIcon from './Illustrations/HotelNight' +import KidsIcon from './Illustrations/Kids' +import KidsMocktailIcon from './Illustrations/KidsMocktail' +import MagicWandIcon from './Illustrations/MagicWand' +import MoneyHandIcon from './Illustrations/MoneyHand' +import VoucherIcon from './Illustrations/Voucher' + +import { IconName } from './iconName' + +export function IllustrationByIconName(iconName: IconName | null) { + switch (iconName) { + case IconName.Kids: + return KidsIcon + case IconName.KidsMocktail: + return KidsMocktailIcon + case IconName.MagicWand: + return MagicWandIcon + case IconName.MoneyHand: + return MoneyHandIcon + case IconName.HandKey: + return HandKeyIcon + case IconName.HotelNight: + return HotelNightIcon + case IconName.GiftOpen: + return GiftOpenIcon + case IconName.CutleryOne: + return CutleryOneIcon + case IconName.CutleryTwo: + return CutleryTwoIcon + case IconName.CroissantCoffeeEgg: + return CroissantCoffeeEggIcon + case IconName.Coin: + return CoinIcon + case IconName.Bed: + return BedIcon + case IconName.Voucher: + return VoucherIcon + default: + return null + } +} diff --git a/packages/design-system/lib/components/Icons/iconName.ts b/packages/design-system/lib/components/Icons/iconName.ts new file mode 100644 index 000000000..695ece883 --- /dev/null +++ b/packages/design-system/lib/components/Icons/iconName.ts @@ -0,0 +1,181 @@ +export enum IconName { + Accesories = 'Accesories', + Accessibility = 'Accessibility', + AccountCircle = 'AccountCircle', + Air = 'Air', + AirConAirCooling = 'AirConAirCooling', + AirConditioningInRoom = 'AirConditioningInRoom', + Airplane = 'Airplane', + ArmChair = 'ArmChair', + ArrowLeft = 'ArrowLeft', + ArrowLeftSmall = 'ArrowLeftSmall', + ArrowFrom = 'ArrowFrom', + ArrowRight = 'ArrowRight', + ArrowRightSmall = 'ArrowRightSmall', + ArrowTo = 'ArrowTo', + AwardStar = 'AwardStar', + Bar = 'Bar', + BathroomCabinet = 'BathroomCabinet', + Beach = 'Beach', + BeautySalon = 'BeautySalon', + Bed = 'Bed', + Bike = 'Bike', + Bouquet = 'Bouquet', + Bowling = 'Bowling', + Business = 'Business', + BusinessCentre = 'BusinessCentre', + Calendar = 'Calendar', + Camera = 'Camera', + CashFree = 'CashFree', + Cellphone = 'Cellphone', + Check = 'Check', + CheckCircle = 'CheckCircle', + ChevronDown = 'ChevronDown', + ChevronDownSmall = 'ChevronDownSmall', + ChevronLeft = 'ChevronLeft', + ChevronLeftSmall = 'ChevronLeftSmall', + ChevronRight = 'ChevronRight', + ChevronRightSmall = 'ChevronRightSmall', + ChevronUp = 'ChevronUp', + ChevronUpSmall = 'ChevronUpSmall', + Chips = 'Chips', + City = 'City', + Close = 'Close', + CloseLarge = 'CloseLarge', + CoffeeAlt = 'CoffeeAlt', + CoffeeInReceptionAtCharge = 'CoffeeInReceptionAtCharge', + CoffeeShop = 'CoffeeShop', + Coin = 'Coin', + ComplimentaryColdRefreshments = 'ComplimentaryColdRefreshments', + Concierge = 'Concierge', + ConferenceRoom = 'ConferenceRoom', + ConvenienceStore24h = 'ConvenienceStore24h', + ConventionCentre = 'ConventionCentre', + CroissantCoffeeEgg = 'CroissantCoffeeEgg', + CrossCircle = 'CrossCircle', + CrossCircleOutline = 'CrossCircleOutline', + Cultural = 'Cultural', + CutleryOne = 'CutleryOne', + CutleryTwo = 'CutleryTwo', + Deck = 'Deck', + Desk = 'Desk', + Diamond = 'Diamond', + Dining = 'Dining', + DirectDial = 'DirectDial', + Directions = 'Directions', + DoorOpen = 'DoorOpen', + Dresser = 'Dresser', + ElectricBike = 'ElectricBike', + ElectricCar = 'ElectricCar', + Elevator = 'Elevator', + Email = 'Email', + ExternalLink = 'ExternalLink', + ExtraFamilyFriendly = 'ExtraFamilyFriendly', + EyeHide = 'EyeHide', + EyeShow = 'EyeShow', + Facebook = 'Facebook', + Fan = 'Fan', + Fax = 'Fax', + Fitness = 'Fitness', + FoodDrinks247 = 'FoodDrinks247', + Footstool = 'Footstool', + Gallery = 'Gallery', + Gaming = 'Gaming', + Garage = 'Garage', + Gift = 'Gift', + GiftOpen = 'GiftOpen', + Globe = 'Globe', + Golf = 'Golf', + Guard = 'Guard', + Hairdresser = 'Hairdresser', + HairdryerInRoomAllScandic = 'HairdryerInRoomAllScandic', + HandKey = 'HandKey', + Hanger = 'Hanger', + HangerAlt = 'HangerAlt', + Heat = 'Heat', + Heart = 'Heart', + Hiking = 'Hiking', + HotelNight = 'HotelNight', + House = 'House', + Houseboat = 'Houseboat', + IceMachine = 'IceMachine', + Image = 'Image', + InfoCircle = 'InfoCircle', + Instagram = 'Instagram', + Ironing = 'Ironing', + Jacuzzi = 'Jaccuzzi', + Kayaking = 'Kayaking', + Kettle = 'Kettle', + Kids = 'Kids', + KidsMocktail = 'KidsMocktail', + Landscape = 'Landscape', + Lamp = 'Lamp', + LaptopSafe = 'LaptopSafe', + LaundryMachine = 'LaundryMachine', + Link = 'Link', + LocalBar = 'LocalBar', + Location = 'Location', + Lock = 'Lock', + Breakfast = 'Breakfast', + Luggage = 'Luggage', + LuggageLockers = 'LuggageLockers', + MagicWand = 'MagicWand', + Map = 'Map', + Massage = 'Massage', + Minibar = 'Minibar', + Minus = 'Minus', + MoneyHand = 'MoneyHand', + Museum = 'Museum', + Nature = 'Nature', + Nightlife = 'Nightlife', + NightShelter = 'NightShelter', + NonSmoking = 'NonSmoking', + NoSmoking = 'NoSmoking', + OpenInNew = 'OpenInNew', + OpenInNewSmall = 'OpenInNewSmall', + OutdoorFurniture = 'OutdoorFurniture', + PalmTree = 'Palmtree', + Parking = 'Parking', + ParkingOutdoor = 'ParkingOutdoor', + Person = 'Person', + Pets = 'Pets', + Phone = 'Phone', + Plus = 'Plus', + PlusCircle = 'PlusCircle', + Popcorn = 'Popcorn', + PriceTag = 'PriceTag', + RecordPlayer = 'RecordPlayer', + Restaurant = 'Restaurant', + RoomService = 'RoomService', + SafetyBox = 'SafetyBox', + Sauna = 'Sauna', + Search = 'Search', + Service = 'Service', + Shopping = 'Shopping', + Skateboarding = 'Skateboarding', + Skiing = 'Skiing', + Smoking = 'Smoking', + Snowflake = 'Snowflake', + Spa = 'Spa', + Sports = 'Sports', + Star = 'Star', + StarFilled = 'StarFilled', + Street = 'Street', + Swim = 'Swim', + Theatre = 'Theatre', + Swipe = 'Swipe', + Thermostat = 'Thermostat', + Toilet = 'Toilet', + Ticket = 'Ticket', + Train = 'Train', + Tripadvisor = 'Tripadvisor', + Tshirt = 'Tshirt', + TshirtWash = 'TshirtWash', + TvCasting = 'TvCasting', + TVRemote = 'TVRemote', + Voucher = 'Voucher', + WarningTriangle = 'WarningTriangle', + Wheelchair = 'Wheelchair', + Wifi = 'Wifi', + Kitchen = 'Kitchen', +} diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 75ffb4c39..a13d024a9 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -39,6 +39,10 @@ "./NoRateAvailableCard": "./dist/components/RateCard/NoRateAvailable/index.js", "./IconButton": "./dist/components/IconButton/index.js", "./Icons": "./dist/components/Icons/index.js", + "./Icons/IconByCSSelect": "./dist/components/Icons/IconByCSSelect.js", + "./Icons/IconByIconName": "./dist/components/Icons/IconByIconName.js", + "./Icons/IllustrationByIconName": "./dist/components/Icons/IllustrationByIconName.js", + "./Icons/iconName": "./dist/components/Icons/iconName.js", "./Icons/BathroomCabinetIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.js", "./Icons/BedHotelIcon": "./dist/components/Icons/Customised/Amenities_Facilities/BedHotel.js", "./Icons/BedIcon": "./dist/components/Icons/Illustrations/Bed.js",