scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feat/SW-185-implement-footer-navigation

Browse Source 
# Conflicts:
#	app/[lang]/(live)/layout.tsx
#	components/Icons/get-icon-by-icon-name.ts
#	types/components/icon.ts
This commit is contained in:
Pontus Dreij
2024-08-21 14:21:57 +02:00
parent 9d416f593d 855713565e
commit 11c2fe8475
87 changed files with 2056 additions and 10893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/Icons/CloseLarge.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CloseLargeIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_1756_2612"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_1756_2612)">
<path
d="M12 13.5422L6.34057 19.2016C6.12719 19.415 5.87017 19.5193 5.5695 19.5144C5.26882 19.5096 5.0118 19.4004 4.79842 19.1871C4.59474 18.9737 4.49532 18.7191 4.50017 18.4233C4.50502 18.1274 4.60928 17.8777 4.81297 17.674L10.4578 12L4.81297 6.32606C4.60928 6.12237 4.50744 5.87262 4.50744 5.5768C4.50744 5.28098 4.60928 5.02638 4.81297 4.813C5.01665 4.59961 5.26882 4.4905 5.5695 4.48565C5.87017 4.4808 6.12719 4.58507 6.34057 4.79845L12 10.4579L17.6594 4.79845C17.8728 4.58507 18.1298 4.4808 18.4305 4.48565C18.7312 4.4905 18.9882 4.59961 19.2016 4.813C19.4053 5.02638 19.5047 5.28098 19.4998 5.5768C19.495 5.87262 19.3907 6.12237 19.187 6.32606L13.5422 12L19.187 17.674C19.3907 17.8777 19.4926 18.1274 19.4926 18.4233C19.4926 18.7191 19.3907 18.9737 19.187 19.1871C18.9834 19.4004 18.7312 19.5096 18.4305 19.5144C18.1298 19.5193 17.8728 19.415 17.6594 19.2016L12 13.5422Z"
fill="#57514E"
/>
</g>
</svg>
)
}

40
components/Icons/CrossCircle.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CrossCircleIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_1756_2637"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_1756_2637)">
<path
d="M12 13.3L14.9 16.2C15.075 16.375 15.2917 16.4625 15.55 16.4625C15.8083 16.4625 16.025 16.375 16.2 16.2C16.375 16.025 16.4625 15.8083 16.4625 15.55C16.4625 15.2917 16.375 15.075 16.2 14.9L13.3 12L16.2 9.1C16.375 8.925 16.4625 8.70833 16.4625 8.45C16.4625 8.19167 16.375 7.975 16.2 7.8C16.025 7.625 15.8083 7.5375 15.55 7.5375C15.2917 7.5375 15.075 7.625 14.9 7.8L12 10.7L9.1 7.8C8.925 7.625 8.70833 7.5375 8.45 7.5375C8.19167 7.5375 7.975 7.625 7.8 7.8C7.625 7.975 7.5375 8.19167 7.5375 8.45C7.5375 8.70833 7.625 8.925 7.8 9.1L10.7 12L7.8 14.9C7.625 15.075 7.5375 15.2917 7.5375 15.55C7.5375 15.8083 7.625 16.025 7.8 16.2C7.975 16.375 8.19167 16.4625 8.45 16.4625C8.70833 16.4625 8.925 16.375 9.1 16.2L12 13.3ZM12 21.75C10.6516 21.75 9.38434 21.4936 8.19838 20.9809C7.01239 20.4682 5.98075 19.7724 5.10345 18.8934C4.22615 18.0145 3.53125 16.9826 3.01875 15.7978C2.50625 14.613 2.25 13.3471 2.25 12C2.25 10.6516 2.50636 9.38434 3.01908 8.19838C3.53179 7.01239 4.22762 5.98075 5.10658 5.10345C5.98553 4.22615 7.01739 3.53125 8.20218 3.01875C9.38698 2.50625 10.6529 2.25 12 2.25C13.3484 2.25 14.6157 2.50636 15.8016 3.01908C16.9876 3.53179 18.0193 4.22762 18.8966 5.10658C19.7739 5.98553 20.4688 7.01739 20.9813 8.20217C21.4938 9.38697 21.75 10.6529 21.75 12C21.75 13.3484 21.4936 14.6157 20.9809 15.8016C20.4682 16.9876 19.7724 18.0193 18.8934 18.8966C18.0145 19.7739 16.9826 20.4688 15.7978 20.9813C14.613 21.4938 13.3471 21.75 12 21.75Z"
fill="white"
/>
</g>
</svg>
)
}

36
components/Icons/Sauna.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function SaunaIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_83_359"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_83_359)">
<path
d="M4 22C3.45 22 2.97917 21.8042 2.5875 21.4125C2.19583 21.0208 2 20.55 2 20V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V20C22 20.55 21.8042 21.0208 21.4125 21.4125C21.0208 21.8042 20.55 22 20 22H4ZM4 16V20H6V18H5V16H4ZM4 14H5C5 13.7167 5.09583 13.4792 5.2875 13.2875C5.47917 13.0958 5.71667 13 6 13V10.5C6 10.0833 6.14583 9.72917 6.4375 9.4375C6.72917 9.14583 7.08333 9 7.5 9H9.5C9.91667 9 10.2708 9.14583 10.5625 9.4375C10.8542 9.72917 11 10.0833 11 10.5V13C11.2833 13 11.5208 13.0958 11.7125 13.2875C11.9042 13.4792 12 13.7167 12 14H20V4H4V14ZM6.5 16.5H10.5V14.5H6.5V16.5ZM8.5 8C8.08333 8 7.72917 7.85417 7.4375 7.5625C7.14583 7.27083 7 6.91667 7 6.5C7 6.08333 7.14583 5.72917 7.4375 5.4375C7.72917 5.14583 8.08333 5 8.5 5C8.91667 5 9.27083 5.14583 9.5625 5.4375C9.85417 5.72917 10 6.08333 10 6.5C10 6.91667 9.85417 7.27083 9.5625 7.5625C9.27083 7.85417 8.91667 8 8.5 8ZM8 20H9V18H8V20ZM11 20H20V16H12V18H11V20ZM12.25 10C12.2833 9.78333 12.3042 9.62083 12.3125 9.5125C12.3208 9.40417 12.325 9.29167 12.325 9.175C12.325 8.99167 12.2875 8.81667 12.2125 8.65C12.1375 8.48333 11.9833 8.25833 11.75 7.975C11.5 7.65833 11.3125 7.34167 11.1875 7.025C11.0625 6.70833 11 6.38333 11 6.05C11 5.91667 11.0083 5.77917 11.025 5.6375L11.1 5H12.6C12.5667 5.18333 12.5417 5.35417 12.525 5.5125C12.5083 5.67083 12.5 5.85 12.5 6.05C12.5 6.23333 12.5375 6.4125 12.6125 6.5875C12.6875 6.7625 12.8167 6.95 13 7.15C13.3 7.51667 13.5167 7.8625 13.65 8.1875C13.7833 8.5125 13.85 8.84167 13.85 9.175C13.85 9.35833 13.8417 9.50833 13.825 9.625C13.8083 9.74167 13.7833 9.86667 13.75 10H12.25ZM14.75 10C14.7833 9.78333 14.8042 9.62083 14.8125 9.5125C14.8208 9.40417 14.825 9.29167 14.825 9.175C14.825 8.99167 14.7875 8.81667 14.7125 8.65C14.6375 8.48333 14.4833 8.25833 14.25 7.975C14 7.65833 13.8125 7.34167 13.6875 7.025C13.5625 6.70833 13.5 6.38333 13.5 6.05C13.5 5.91667 13.5083 5.77917 13.525 5.6375L13.6 5H15.1C15.0667 5.18333 15.0417 5.35417 15.025 5.5125C15.0083 5.67083 15 5.85 15 6.05C15 6.23333 15.0375 6.4125 15.1125 6.5875C15.1875 6.7625 15.3167 6.95 15.5 7.15C15.8 7.51667 16.0167 7.8625 16.15 8.1875C16.2833 8.5125 16.35 8.84167 16.35 9.175C16.35 9.35833 16.3417 9.50833 16.325 9.625C16.3083 9.74167 16.2833 9.86667 16.25 10H14.75ZM17.3 10C17.3333 9.78333 17.3542 9.62083 17.3625 9.5125C17.3708 9.40417 17.375 9.29167 17.375 9.175C17.375 8.99167 17.3375 8.81667 17.2625 8.65C17.1875 8.48333 17.0333 8.25833 16.8 7.975C16.55 7.65833 16.3625 7.34167 16.2375 7.025C16.1125 6.70833 16.05 6.38333 16.05 6.05C16.05 5.91667 16.0583 5.77917 16.075 5.6375L16.15 5H17.65C17.6167 5.18333 17.5917 5.35417 17.575 5.5125C17.5583 5.67083 17.55 5.85 17.55 6.05C17.55 6.23333 17.5875 6.4125 17.6625 6.5875C17.7375 6.7625 17.8667 6.95 18.05 7.15C18.35 7.51667 18.5667 7.8625 18.7 8.1875C18.8333 8.5125 18.9 8.84167 18.9 9.175C18.9 9.35833 18.8917 9.50833 18.875 9.625C18.8583 9.74167 18.8333 9.86667 18.8 10H17.3Z"
fill="#26201E"
/>
</g>
</svg>
)
}

40
components/Icons/WarningTriangle.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function WarningTriangleIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
id="mask0_1756_2606"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="24"
height="24"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_1756_2606)">
<path
d="M2.95563 20.775C2.7768 20.775 2.61564 20.7315 2.47216 20.6444C2.32869 20.5573 2.2171 20.4425 2.13738 20.3C2.05405 20.1583 2.0103 20.0063 2.00613 19.8438C2.00196 19.6813 2.04571 19.5208 2.13738 19.3625L11.1874 3.75001C11.279 3.59167 11.3986 3.47501 11.546 3.40001C11.6934 3.32501 11.8447 3.28751 11.9999 3.28751C12.155 3.28751 12.3063 3.32501 12.4538 3.40001C12.6012 3.47501 12.7207 3.59167 12.8124 3.75001L21.8624 19.3625C21.954 19.5208 21.9978 19.6813 21.9936 19.8438C21.9895 20.0063 21.9457 20.1583 21.8624 20.3C21.779 20.4417 21.6663 20.5563 21.524 20.6438C21.3818 20.7313 21.2237 20.775 21.0499 20.775H2.95563ZM11.9973 17.875C12.2657 17.875 12.4915 17.7842 12.6749 17.6026C12.8582 17.4211 12.9499 17.1961 12.9499 16.9276C12.9499 16.6592 12.8591 16.4333 12.6775 16.25C12.4959 16.0667 12.2709 15.975 12.0025 15.975C11.7341 15.975 11.5082 16.0658 11.3249 16.2474C11.1415 16.4289 11.0499 16.6539 11.0499 16.9224C11.0499 17.1908 11.1407 17.4167 11.3223 17.6C11.5038 17.7833 11.7288 17.875 11.9973 17.875ZM12.0124 15C12.2707 15 12.4915 14.9083 12.6749 14.725C12.8582 14.5417 12.9499 14.3208 12.9499 14.0625V11.0125C12.9499 10.7542 12.8582 10.5333 12.6749 10.35C12.4915 10.1667 12.2707 10.075 12.0124 10.075C11.754 10.075 11.5332 10.1667 11.3499 10.35C11.1665 10.5333 11.0749 10.7542 11.0749 11.0125V14.0625C11.0749 14.3208 11.1665 14.5417 11.3499 14.725C11.5332 14.9083 11.754 15 12.0124 15Z"
fill="white"
/>
</g>
</svg>
)
}

12
components/Icons/get-icon-by-icon-name.ts
View File

@@ -17,8 +17,10 @@ import {
ChevronDownIcon,
ChevronRightIcon,
CloseIcon,
CloseLarge,
CoffeeIcon,
ConciergeIcon,
CrossCircle,
DoorOpenIcon,
ElectricBikeIcon,
EmailIcon,
@@ -36,7 +38,9 @@ import {
PhoneIcon,
PlusCircleIcon,
RestaurantIcon,
SaunaIcon,
TshirtWashIcon,
WarningTriangle,
WifiIcon,
} from "."
@@ -62,6 +66,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
return CellphoneIcon
case IconName.Check:
return CheckIcon
case IconName.CrossCircle:
return CrossCircle
case IconName.CheckCircle:
return CheckCircleIcon
case IconName.ChevronDown:
@@ -70,6 +76,8 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
return ChevronRightIcon
case IconName.Close:
return CloseIcon
case IconName.CloseLarge:
return CloseLarge
case IconName.Coffee:
return CoffeeIcon
case IconName.Concierge:
@@ -114,8 +122,12 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
return RestaurantIcon
case IconName.Tripadvisor:
return TripAdvisorIcon
case IconName.Sauna:
return SaunaIcon
case IconName.TshirtWash:
return TshirtWashIcon
case IconName.WarningTriangle:
return WarningTriangle
case IconName.Wifi:
return WifiIcon
default:

2
components/Icons/icon.module.css
View File

@@ -44,5 +44,5 @@
.white,
.white * {
fill: var(--Scandic-Opacity-White-100);
fill: var(--UI-Opacity-White-100);
}

4
components/Icons/index.tsx
View File

@@ -11,9 +11,11 @@ export { default as CheckCircleIcon } from "./CheckCircle"
export { default as ChevronDownIcon } from "./ChevronDown"
export { default as ChevronRightIcon } from "./ChevronRight"
export { default as CloseIcon } from "./Close"
export { default as CloseLarge } from "./CloseLarge"
export { default as CoffeeIcon } from "./Coffee"
export { default as ConciergeIcon } from "./Concierge"
export { default as CreditCard } from "./CreditCard"
export { default as CrossCircle } from "./CrossCircle"
export { default as Delete } from "./Delete"
export { default as DoorOpenIcon } from "./DoorOpen"
export { default as ElectricBikeIcon } from "./ElectricBike"
@@ -32,6 +34,8 @@ export { default as PetsIcon } from "./Pets"
export { default as PhoneIcon } from "./Phone"
export { default as PlusCircleIcon } from "./PlusCircle"
export { default as RestaurantIcon } from "./Restaurant"
export { default as SaunaIcon } from "./Sauna"
export { default as ScandicLogoIcon } from "./ScandicLogo"
export { default as TshirtWashIcon } from "./TshirtWash"
export { default as WarningTriangle } from "./WarningTriangle"
export { default as WifiIcon } from "./Wifi"