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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/Icons/AccountCircle.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function AccountCircleIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
fill="none"
height="41"
viewBox="0 0 40 41"
width="40"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M7.1 31.75C9.2 30.2833 11.2833 29.1583 13.35 28.375C15.4167 27.5917 17.6333 27.2 20 27.2C22.3667 27.2 24.5917 27.5917 26.675 28.375C28.7583 29.1583 30.85 30.2833 32.95 31.75C34.4167 29.95 35.4583 28.1333 36.075 26.3C36.6917 24.4667 37 22.5333 37 20.5C37 15.6667 35.375 11.625 32.125 8.375C28.875 5.125 24.8333 3.5 20 3.5C15.1667 3.5 11.125 5.125 7.875 8.375C4.625 11.625 3 15.6667 3 20.5C3 22.5333 3.31667 24.4667 3.95 26.3C4.58333 28.1333 5.63333 29.95 7.1 31.75ZM19.9907 22C18.0636 22 16.4417 21.3386 15.125 20.0157C13.8083 18.6928 13.15 17.0678 13.15 15.1407C13.15 13.2136 13.8114 11.5917 15.1343 10.275C16.4572 8.95833 18.0822 8.3 20.0093 8.3C21.9364 8.3 23.5583 8.96143 24.875 10.2843C26.1917 11.6072 26.85 13.2322 26.85 15.1593C26.85 17.0864 26.1886 18.7083 24.8657 20.025C23.5428 21.3417 21.9178 22 19.9907 22ZM20.0234 40.5C17.2745 40.5 14.6833 39.975 12.25 38.925C9.81667 37.875 7.69167 36.4417 5.875 34.625C4.05833 32.8083 2.625 30.6872 1.575 28.2617C0.525 25.8362 0 23.2445 0 20.4867C0 17.7289 0.525 15.1417 1.575 12.725C2.625 10.3083 4.05833 8.19167 5.875 6.375C7.69167 4.55833 9.81277 3.125 12.2383 2.075C14.6638 1.025 17.2555 0.5 20.0133 0.5C22.7711 0.5 25.3583 1.025 27.775 2.075C30.1917 3.125 32.3083 4.55833 34.125 6.375C35.9417 8.19167 37.375 10.3089 38.425 12.7266C39.475 15.1443 40 17.7277 40 20.4766C40 23.2255 39.475 25.8167 38.425 28.25C37.375 30.6833 35.9417 32.8083 34.125 34.625C32.3083 36.4417 30.1911 37.875 27.7734 38.925C25.3557 39.975 22.7723 40.5 20.0234 40.5ZM20 37.5C21.8333 37.5 23.625 37.2333 25.375 36.7C27.125 36.1667 28.85 35.2333 30.55 33.9C28.85 32.7 27.1167 31.7833 25.35 31.15C23.5833 30.5167 21.8 30.2 20 30.2C18.2 30.2 16.4167 30.5167 14.65 31.15C12.8833 31.7833 11.15 32.7 9.45 33.9C11.15 35.2333 12.875 36.1667 14.625 36.7C16.375 37.2333 18.1667 37.5 20 37.5ZM20 19C21.1333 19 22.0583 18.6417 22.775 17.925C23.4917 17.2083 23.85 16.2833 23.85 15.15C23.85 14.0167 23.4917 13.0917 22.775 12.375C22.0583 11.6583 21.1333 11.3 20 11.3C18.8667 11.3 17.9417 11.6583 17.225 12.375C16.5083 13.0917 16.15 14.0167 16.15 15.15C16.15 16.2833 16.5083 17.2083 17.225 17.925C17.9417 18.6417 18.8667 19 20 19Z"
fill="#1C1B1F"
/>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ArrowRight({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
fill="none"
height="25"
viewBox="0 0 24 25"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
height="25"
id="mask0_4176_4181"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="24"
x="0"
y="0"
>
<rect y="0.632812" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4176_4181)">
<path
d="M16.15 13.5703H5.1875C4.92917 13.5703 4.70833 13.4786 4.525 13.2953C4.34167 13.112 4.25 12.8911 4.25 12.6328C4.25 12.3745 4.34167 12.1536 4.525 11.9703C4.70833 11.787 4.92917 11.6953 5.1875 11.6953H16.15L11.325 6.8703C11.1333 6.67863 11.0396 6.4578 11.0438 6.2078C11.0479 5.9578 11.1458 5.73697 11.3375 5.5453C11.5292 5.36197 11.75 5.26822 12 5.26405C12.25 5.25988 12.4708 5.35363 12.6625 5.5453L19.0875 11.9703C19.1792 12.062 19.2479 12.164 19.2937 12.2765C19.3396 12.389 19.3625 12.5078 19.3625 12.6328C19.3625 12.7578 19.3396 12.8765 19.2937 12.989C19.2479 13.1016 19.1792 13.2036 19.0875 13.2953L12.6625 19.7203C12.4792 19.9036 12.2604 19.9953 12.0062 19.9953C11.7521 19.9953 11.5292 19.9036 11.3375 19.7203C11.1458 19.5286 11.05 19.3057 11.05 19.0516C11.05 18.7974 11.1458 18.5745 11.3375 18.3828L16.15 13.5703Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

42
components/Icons/Calendar.tsx
View File

@@ -1,14 +1,40 @@
import Image from "@/components/Image"
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CalendarIcon({ height = 20, width = 20 }: IconProps) {
export default function CalendarIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<Image
alt="Calendar Icon"
height={height}
src="/_static/icons/calendar_month.svg"
width={width}
/>
<svg
className={classNames}
fill="none"
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
height="20"
id="mask0_1572_4288"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="20"
x="0"
y="0"
>
<rect width="20" height="20" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_1572_4288)">
<path
d="M4.5 18C4.0875 18 3.73437 17.8507 3.44062 17.5521C3.14687 17.2535 3 16.9028 3 16.5V5.5C3 5.09722 3.14687 4.74653 3.44062 4.44792C3.73437 4.14931 4.0875 4 4.5 4H6V2.75C6 2.5375 6.07145 2.35937 6.21435 2.21562C6.35727 2.07187 6.53435 2 6.7456 2C6.95687 2 7.13542 2.07187 7.28125 2.21562C7.42708 2.35937 7.5 2.5375 7.5 2.75V4H12.5V2.75C12.5 2.5375 12.5715 2.35937 12.7144 2.21562C12.8573 2.07187 13.0344 2 13.2456 2C13.4569 2 13.6354 2.07187 13.7812 2.21562C13.9271 2.35937 14 2.5375 14 2.75V4H15.5C15.9125 4 16.2656 4.14931 16.5594 4.44792C16.8531 4.74653 17 5.09722 17 5.5V16.5C17 16.9028 16.8531 17.2535 16.5594 17.5521C16.2656 17.8507 15.9125 18 15.5 18H4.5ZM4.5 16.5H15.5V9H4.5V16.5ZM4.5 7.5H15.5V5.5H4.5V7.5ZM10.0044 12C9.79313 12 9.61458 11.9285 9.46875 11.7856C9.32292 11.6427 9.25 11.4656 9.25 11.2544C9.25 11.0431 9.32145 10.8646 9.46435 10.7188C9.60727 10.5729 9.78435 10.5 9.9956 10.5C10.2069 10.5 10.3854 10.5715 10.5312 10.7144C10.6771 10.8573 10.75 11.0344 10.75 11.2456C10.75 11.4569 10.6785 11.6354 10.5356 11.7812C10.3927 11.9271 10.2156 12 10.0044 12ZM6.7544 12C6.54313 12 6.36458 11.9285 6.21875 11.7856C6.07292 11.6427 6 11.4656 6 11.2544C6 11.0431 6.07145 10.8646 6.21435 10.7188C6.35727 10.5729 6.53435 10.5 6.7456 10.5C6.95687 10.5 7.13542 10.5715 7.28125 10.7144C7.42708 10.8573 7.5 11.0344 7.5 11.2456C7.5 11.4569 7.42855 11.6354 7.28565 11.7812C7.14273 11.9271 6.96565 12 6.7544 12ZM13.2544 12C13.0431 12 12.8646 11.9285 12.7188 11.7856C12.5729 11.6427 12.5 11.4656 12.5 11.2544C12.5 11.0431 12.5715 10.8646 12.7144 10.7188C12.8573 10.5729 13.0344 10.5 13.2456 10.5C13.4569 10.5 13.6354 10.5715 13.7812 10.7144C13.9271 10.8573 14 11.0344 14 11.2456C14 11.4569 13.9285 11.6354 13.7856 11.7812C13.6427 11.9271 13.4656 12 13.2544 12ZM10.0044 15C9.79313 15 9.61458 14.9285 9.46875 14.7856C9.32292 14.6427 9.25 14.4656 9.25 14.2544C9.25 14.0431 9.32145 13.8646 9.46435 13.7188C9.60727 13.5729 9.78435 13.5 9.9956 13.5C10.2069 13.5 10.3854 13.5715 10.5312 13.7144C10.6771 13.8573 10.75 14.0344 10.75 14.2456C10.75 14.4569 10.6785 14.6354 10.5356 14.7812C10.3927 14.9271 10.2156 15 10.0044 15ZM6.7544 15C6.54313 15 6.36458 14.9285 6.21875 14.7856C6.07292 14.6427 6 14.4656 6 14.2544C6 14.0431 6.07145 13.8646 6.21435 13.7188C6.35727 13.5729 6.53435 13.5 6.7456 13.5C6.95687 13.5 7.13542 13.5715 7.28125 13.7144C7.42708 13.8573 7.5 14.0344 7.5 14.2456C7.5 14.4569 7.42855 14.6354 7.28565 14.7812C7.14273 14.9271 6.96565 15 6.7544 15ZM13.2544 15C13.0431 15 12.8646 14.9285 12.7188 14.7856C12.5729 14.6427 12.5 14.4656 12.5 14.2544C12.5 14.0431 12.5715 13.8646 12.7144 13.7188C12.8573 13.5729 13.0344 13.5 13.2456 13.5C13.4569 13.5 13.6354 13.5715 13.7812 13.7144C13.9271 13.8573 14 14.0344 14 14.2456C14 14.4569 13.9285 14.6354 13.7856 14.7812C13.6427 14.9271 13.4656 15 13.2544 15Z"
fill="#1C1B1F"
/>
</g>
</svg>
)
}

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

@@ -0,0 +1,36 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CheckIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
fill="none"
height="25"
viewBox="0 0 24 25"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
height="25"
id="mask0_1333_19690"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="24"
x="0"
y="0"
>
<rect y="0.629639" width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_1333_19690)">
<path
d="M9.99967 16.6738L6.35547 13.0296L7.39967 11.9854L9.99967 14.5854L16.5997 7.98535L17.6439 9.02955L9.99967 16.6738Z"
fill="#4D001B"
/>
</g>
</svg>
)
}

41
components/Icons/CheckCircle.tsx
View File

@@ -1,17 +1,40 @@
import Image from "@/components/Image"
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function CheckCircleIcon({
height = 20,
width = 20,
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<Image
alt="Check Circle Icon"
height={height}
src="/_static/icons/check_circle.svg"
width={width}
/>
<svg
className={classNames}
fill="none"
height="32"
viewBox="0 0 32 32"
width="32"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
height="32"
id="mask0_2991_3013"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="33"
x="0"
y="0"
>
<rect x="0.5" width="32" height="32" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_2991_3013)">
<path
d="M14.6667 18.4333L11.8148 15.5814C11.5716 15.3383 11.2778 15.2167 10.9333 15.2167C10.5889 15.2167 10.2944 15.3389 10.05 15.5833C9.80556 15.8278 9.68333 16.1222 9.68333 16.4667C9.68333 16.8111 9.8036 17.1036 10.0441 17.3441L13.7833 21.0833C14.0348 21.3389 14.3283 21.4667 14.6636 21.4667C14.999 21.4667 15.2944 21.3389 15.55 21.0833L22.95 13.6833C23.1944 13.4389 23.3167 13.1444 23.3167 12.8C23.3167 12.4556 23.1944 12.1611 22.95 11.9167C22.7056 11.6722 22.4111 11.55 22.0667 11.55C21.7222 11.55 21.4292 11.6708 21.1877 11.9123L14.6667 18.4333ZM16.5 29C14.7021 29 13.0125 28.6582 11.4312 27.9746C9.84986 27.2909 8.47433 26.3632 7.3046 25.1912C6.13487 24.0193 5.20833 22.6435 4.525 21.0638C3.84167 19.484 3.5 17.7961 3.5 16C3.5 14.2021 3.84181 12.5125 4.52543 10.9312C5.20906 9.34986 6.13683 7.97433 7.30877 6.8046C8.4807 5.63487 9.85652 4.70833 11.4362 4.025C13.016 3.34167 14.7039 3 16.5 3C18.2979 3 19.9875 3.34181 21.5688 4.02543C23.1501 4.70906 24.5257 5.63683 25.6954 6.80877C26.8651 7.9807 27.7917 9.35652 28.475 10.9362C29.1583 12.516 29.5 14.2039 29.5 16C29.5 17.7979 29.1582 19.4875 28.4746 21.0688C27.7909 22.6501 26.8632 24.0257 25.6912 25.1954C24.5193 26.3651 23.1435 27.2917 21.5638 27.975C19.984 28.6583 18.2961 29 16.5 29Z"
fill="#33800A"
/>
</g>
</svg>
)
}

41
components/Icons/ChevronDown.tsx
View File

@@ -1,17 +1,40 @@
import Image from "@/components/Image"
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ChevronDownIcon({
height = 20,
width = 20,
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<Image
alt="Chevron Down Icon"
height={height}
src="/_static/icons/chevron-down.svg"
width={width}
/>
<svg
className={classNames}
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
height="24"
id="mask0_553_6963"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="24"
x="0"
y="0"
>
<rect width="24" height="24" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_553_6963)">
<path
d="M12 15.3746L6 9.37461L7.4 7.97461L12 12.5746L16.6 7.97461L18 9.37461L12 15.3746Z"
fill="#757575"
/>
</g>
</svg>
)
}

43
components/Icons/ChevronRight.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ChevronRightIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
fill="none"
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g id="chevron_right_small">
<mask
id="mask0_4140_3161"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect id="Bounding box" width="20" height="20" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4140_3161)">
<path
id="Vector"
d="M10.5417 10.0001L7.3125 6.77095C7.16667 6.62512 7.09375 6.4463 7.09375 6.23449C7.09375 6.02269 7.16667 5.84039 7.3125 5.68762C7.45833 5.53484 7.63889 5.45671 7.85417 5.45324C8.06944 5.44977 8.25347 5.52442 8.40625 5.6772L12.1771 9.44803C12.2535 9.52442 12.3108 9.60949 12.349 9.70324C12.3872 9.79699 12.4063 9.89595 12.4063 10.0001C12.4063 10.1043 12.3872 10.2032 12.349 10.297C12.3108 10.3907 12.2535 10.4758 12.1771 10.5522L8.40625 14.323C8.25347 14.4758 8.06944 14.5505 7.85417 14.547C7.63889 14.5435 7.45833 14.4654 7.3125 14.3126C7.16667 14.1598 7.09375 13.9775 7.09375 13.7657C7.09375 13.5539 7.16667 13.3751 7.3125 13.2293L10.5417 10.0001Z"
fill="#8F4350"
/>
</g>
</g>
</svg>
)
}

38
components/Icons/Email.tsx
View File

@@ -1,14 +1,36 @@
import Image from "@/components/Image"
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function EmailIcon({ height = 20, width = 20 }: IconProps) {
export default function EmailIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<Image
alt="Email Icon"
height={height}
src="/_static/icons/alternate_email.svg"
width={width}
/>
<svg
className={classNames}
fill="none"
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
height="20"
id="mask0_58_5363"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="20"
x="0"
y="0"
>
<rect width="20" height="20" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_58_5363)">
<path
d="M10.0094 17.5831C8.9638 17.5831 7.98052 17.3858 7.05961 16.991C6.1387 16.5963 5.33232 16.0532 4.64047 15.3617C3.94861 14.6701 3.40523 13.864 3.01032 12.9432C2.61542 12.0224 2.41797 11.0386 2.41797 9.99167C2.41797 8.94475 2.61533 7.96388 3.01005 7.04905C3.40477 6.1342 3.9479 5.33085 4.63943 4.63901C5.33097 3.94714 6.13713 3.40376 7.05791 3.00886C7.97868 2.61396 8.96252 2.4165 10.0094 2.4165C11.0563 2.4165 12.0372 2.6139 12.9521 3.00869C13.8669 3.40348 14.6702 3.94671 15.3621 4.63838C16.054 5.33005 16.5973 6.13317 16.9922 7.04776C17.3871 7.96232 17.5846 8.94634 17.5846 9.99982V11.0575C17.5846 11.7605 17.3373 12.3572 16.8428 12.8475C16.3482 13.3379 15.7483 13.5831 15.0429 13.5831C14.5654 13.5831 14.134 13.449 13.7489 13.1809C13.3637 12.9127 13.0552 12.5682 12.8233 12.1472C12.4793 12.5767 12.0619 12.9234 11.571 13.1873C11.0801 13.4512 10.5568 13.5831 10.0013 13.5831C9.00681 13.5831 8.16097 13.2341 7.46376 12.5359C6.76657 11.8378 6.41797 10.9909 6.41797 9.99511C6.41797 8.99933 6.76703 8.15395 7.46516 7.45896C8.16327 6.76399 9.01021 6.4165 10.006 6.4165C11.0018 6.4165 11.8471 6.7651 12.5421 7.4623C13.2371 8.1595 13.5846 9.00534 13.5846 9.99982V11.0575C13.5846 11.455 13.7288 11.7948 14.0173 12.0768C14.3057 12.3588 14.6476 12.4998 15.0429 12.4998C15.4382 12.4998 15.7801 12.3588 16.0686 12.0768C16.3571 11.7948 16.5013 11.455 16.5013 11.0575V9.99982C16.5013 8.19426 15.8693 6.65954 14.6054 5.39565C13.3416 4.13176 11.8068 3.49982 10.0013 3.49982C8.19573 3.49982 6.661 4.13176 5.39711 5.39565C4.13323 6.65954 3.50128 8.19426 3.50128 9.99982C3.50128 11.8054 4.13323 13.3401 5.39711 14.604C6.661 15.8679 8.19573 16.4998 10.0013 16.4998H14.0013V17.5831H10.0094ZM10.0013 12.4998C10.6957 12.4998 11.286 12.2568 11.7721 11.7707C12.2582 11.2845 12.5013 10.6943 12.5013 9.99982C12.5013 9.30537 12.2582 8.7151 11.7721 8.22898C11.286 7.74287 10.6957 7.49982 10.0013 7.49982C9.30684 7.49982 8.71656 7.74287 8.23045 8.22898C7.74434 8.7151 7.50128 9.30537 7.50128 9.99982C7.50128 10.6943 7.74434 11.2845 8.23045 11.7707C8.71656 12.2568 9.30684 12.4998 10.0013 12.4998Z"
fill="#1C1B1F"
/>
</g>
</svg>
)
}

43
components/Icons/House.tsx
View File

@@ -1,14 +1,41 @@
import Image from "@/components/Image"
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function HouseIcon({ height = 20, width = 20 }: IconProps) {
export default function HouseIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<Image
alt="House Icon"
height={height}
src="/_static/icons/home.svg"
width={width}
/>
<svg
className={classNames}
fill="none"
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g id="home">
<mask
id="mask0_4140_3155"
height="20"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="20"
x="0"
y="0"
>
<rect id="Bounding box" width="20" height="20" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_4140_3155)">
<path
id="Union"
fillRule="evenodd"
clipRule="evenodd"
d="M8.94115 2.45616C9.5571 1.95928 10.4429 1.95928 11.0589 2.45616L18.1933 8.21144C18.5507 8.49973 18.6034 9.01907 18.311 9.37142C18.0186 9.72377 17.4919 9.7757 17.1345 9.48741L16.4095 8.9026V17.0924C16.4095 17.5477 16.0352 17.9168 15.5735 17.9168H4.42596C3.96421 17.9168 3.58989 17.5477 3.58989 17.0924V16.2681V8.90307L2.86551 9.48741C2.50814 9.7757 1.98141 9.72377 1.68901 9.37142C1.39662 9.01907 1.44929 8.49973 1.80666 8.21144L8.94115 2.45616ZM5.17626 7.62337C5.23117 7.73317 5.26202 7.85676 5.26202 7.98746V15.4438C5.26202 15.8991 5.63634 16.2681 6.09808 16.2681H7.07363V11.0476C7.07363 10.1371 7.82227 9.39897 8.74575 9.39897H11.2539C12.1774 9.39897 12.9261 10.1371 12.9261 11.0476V16.2681H13.9013C14.3631 16.2681 14.7374 15.8991 14.7374 15.4438V7.98746C14.7374 7.85663 14.7683 7.73292 14.8233 7.62304L10 3.73213L5.17626 7.62337ZM11.2539 16.2681V11.0476L8.74575 11.0476V16.2681H11.2539Z"
fill="#8F4350"
/>
</g>
</g>
</svg>
)
}

38
components/Icons/Phone.tsx
View File

@@ -1,14 +1,36 @@
import Image from "@/components/Image"
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function PhoneIcon({ height = 20, width = 20 }: IconProps) {
export default function PhoneIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color })
return (
<Image
alt="Phone Icon"
height={height}
src="/_static/icons/phone.svg"
width={width}
/>
<svg
className={classNames}
fill="none"
height="20"
viewBox="0 0 21 20"
width="21"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<mask
height="20"
id="mask0_58_5381"
maskUnits="userSpaceOnUse"
style={{ maskType: "alpha" }}
width="21"
x="0"
y="0"
>
<rect x="0.449219" width="20" height="20" fill="#D9D9D9" />
</mask>
<g mask="url(#mask0_58_5381)">
<path
d="M6.20694 18.5831C5.83183 18.5831 5.51476 18.4536 5.25573 18.1946C4.9967 17.9356 4.86719 17.6185 4.86719 17.2434V2.75625C4.86719 2.38114 4.9967 2.06407 5.25573 1.80505C5.51476 1.54602 5.83183 1.4165 6.20694 1.4165H14.6941C15.0692 1.4165 15.3862 1.54602 15.6453 1.80505C15.9043 2.06407 16.0338 2.38114 16.0338 2.75625V17.2434C16.0338 17.6185 15.9043 17.9356 15.6453 18.1946C15.3862 18.4536 15.0692 18.5831 14.6941 18.5831H6.20694ZM5.9505 16.2915V17.2434C5.9505 17.3075 5.97721 17.3663 6.03063 17.4197C6.08406 17.4731 6.14283 17.4998 6.20694 17.4998H14.6941C14.7582 17.4998 14.8169 17.4731 14.8704 17.4197C14.9238 17.3663 14.9505 17.3075 14.9505 17.2434V16.2915H5.9505ZM5.9505 15.2082H14.9505V4.79146H5.9505V15.2082ZM5.9505 3.70817H14.9505V2.75625C14.9505 2.69214 14.9238 2.63337 14.8704 2.57994C14.8169 2.52653 14.7582 2.49982 14.6941 2.49982H6.20694C6.14283 2.49982 6.08406 2.52653 6.03063 2.57994C5.97721 2.63337 5.9505 2.69214 5.9505 2.75625V3.70817Z"
fill="#1C1B1F"
/>
</g>
</svg>
)
}

29
components/Icons/icon.module.css Normal file
View File

@@ -0,0 +1,29 @@
.icon {
height: 20px;
width: 20px;
}
.black,
.black * {
fill: #000;
}
.burgundy,
.burgundy * {
fill: var(--Scandic-Brand-Burgundy);
}
.pale,
.pale * {
fill: var(--Scandic-Brand-Pale-Peach);
}
.peach80,
.peach80 * {
fill: var(--Scandic-Peach-80);
}
.plosa,
.plosa * {
fill: var(--Theme-Primary-Light-On-Surface-Accent);
}

5
components/Icons/index.tsx
View File

@@ -1,5 +1,10 @@
export { default as AccountCircleIcon } from "./AccountCircle"
export { default as ArrowRightIcon } from "./ArrowRight"
export { default as CalendarIcon } from "./Calendar"
export { default as CheckIcon } from "./Check"
export { default as CheckCircleIcon } from "./CheckCircle"
export { default as ChevronDownIcon } from "./ChevronDown"
export { default as ChevronRightIcon } from "./ChevronRight"
export { default as EmailIcon } from "./Email"
export { default as HouseIcon } from "./House"
export { default as PhoneIcon } from "./Phone"

21
components/Icons/variants.ts Normal file
View File

@@ -0,0 +1,21 @@
import { cva } from "class-variance-authority"
import styles from "./icon.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
peach80: styles.peach80,
primaryLightOnSurfaceAccent: styles.plosa,
red: styles.red,
},
},
defaultVariants: {
color: "black",
},
} as const
export const iconVariants = cva(styles.icon, config)