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

feat: add scandic icon

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-07-04 14:43:31 +02:00
parent 85232401c8
commit 81034c8f2f
4 changed files with 138 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/HotelReservation/SelectHotel/HotelCard/hotelCard.module.css
View File

@@ -1,15 +1,50 @@
.card {
margin-left: 50px;
margin-top: 50px;
display: grid;
grid-template-columns: 1fr min(480px);
min-height: 270px;
max-width: 850px;
background-color: var(--Base-Surface-Primary-Normal);
border: 1px solid black;
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small);
}
.image {
height: auto;
min-height: 270px;
object-fit: cover;
overflow: hidden;
width: 100%;
}
.information {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2);
}
.title {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
.description {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
}
.labels {
display: flex;
flex-wrap: wrap;
gap: var(--Spacing-x1);
}
.button {
display: flex;
align-items: center;
justify-content: space-between;
}

41
components/HotelReservation/SelectHotel/HotelCard/index.tsx
View File

@@ -1,17 +1,48 @@
import { ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./hotelCard.module.css"
import { LangParams } from "@/types/params"
const chipValues = [
"Free cancellation until 18:00",
"Breakfast included",
"Free WiFi",
"Pay at the hotel",
]
export default function HotelCard() {
return (
<div className={styles.card}>
<Image src="" alt="hotel image" className={styles.image} />
<div className={styles.information}>
<Title as="h5" color="red">
Scandic
</Title>
<Title as="h4">Helsinki Hub</Title>
<div className={styles.title}>
<ScandicLogoIcon color="red" />
<Title as="h4">Helsinki Hub</Title>
</div>
<div className={styles.description}>
<span>Kaisaniemenkatu 7, Helsinki</span>
<span>
Modern urban hotel in a impressive 1920s printing house in Helsinki
city centre.
</span>
</div>
<div className={styles.labels}>
{chipValues.map((value) => (
<Chip key={value}>{value}</Chip>
))}
</div>
<div className={styles.button}>
<Body color="burgundy">
<span>Only 4 rooms left</span>
</Body>
<Button theme="base" intent="primary" size="small">
Book from 1549 SEK/night
</Button>
</div>
</div>
</div>
)

63
components/Icons/ScandicLogo.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon"
export default function ScandicLogoIcon({
className,
color,
...props
}: IconProps) {
const classNames = iconVariants({ className, color })
return (
<svg
className={classNames}
xmlns="http://www.w3.org/2000/svg"
width="56"
height="12"
viewBox="0 0 56 12"
fill="none"
{...props}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.2989 11.7377C15.5103 11.9344 14.7216 12 13.9329 12C11.1068 12 9.2666 10.6886 9.2666 7.60673C9.2666 4.65601 11.1726 3.41016 13.8672 3.41016C14.6559 3.41016 15.4445 3.47573 16.2332 3.60687V5.04944C15.6417 4.98387 15.1816 4.9183 14.6559 4.9183C12.487 4.9183 11.4354 5.57401 11.4354 7.73787C11.4354 9.77058 12.4213 10.4919 14.6559 10.4919C15.2474 10.4919 15.7074 10.4263 16.2332 10.3607V11.7377H16.2989Z"
fill="#CD092F"
/>
<path
d="M45.4126 11.8029H47.5157V3.54086H45.4126V11.8029ZM45.4126 1.90157H47.5157V0H45.4126V1.90157Z"
fill="#CD092F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M43.7049 11.6061C43.3105 11.6717 41.8646 11.934 40.4187 11.934C37.7241 11.934 35.7524 10.6881 35.7524 7.67186C35.7524 4.78672 37.527 3.34414 40.2216 3.34414C40.6159 3.34414 41.2731 3.40971 41.6018 3.40971V0H43.7049C43.7049 0.393429 43.7049 11.4094 43.7049 11.6061ZM41.6675 10.3603V4.98343C41.4046 4.98343 40.9445 4.91786 40.4845 4.91786C38.5785 4.91786 37.8556 5.83586 37.8556 7.73743C37.8556 9.44229 38.5128 10.4914 40.4187 10.4914C40.8131 10.4914 41.2074 10.4259 41.6675 10.3603Z"
fill="#CD092F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M34.3727 11.8033H32.3353V6.36087C32.3353 5.44287 31.9409 4.9183 30.6265 4.9183C29.7063 4.9183 28.7205 5.11501 28.7205 5.11501V11.8033H26.6831V3.80359C26.8146 3.80359 29.4435 3.41016 30.9551 3.41016C32.7953 3.41016 34.4384 3.73801 34.4384 6.22973V11.8033H34.3727Z"
fill="#CD092F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.9744 11.8025C23.5285 11.9336 22.4112 11.9992 21.1625 11.9992C19.0594 11.9992 17.3506 11.6713 17.3506 9.31075C17.3506 7.01575 19.4537 6.88461 21.3597 6.81904C21.8197 6.81904 22.3455 6.81904 22.8713 6.81904C22.8713 5.37646 22.8056 4.85189 20.7024 4.85189C19.6509 4.85189 18.5336 5.04861 17.8764 5.17975V3.67161C18.665 3.47489 19.9138 3.40932 20.8339 3.34375C23.1999 3.34375 24.9744 3.60604 24.9744 6.09775V11.8025ZM22.8713 10.5566V8.19604C22.477 8.19604 21.754 8.19604 21.4911 8.19604C20.2424 8.19604 19.4537 8.26161 19.4537 9.44189C19.4537 10.6222 20.4396 10.6877 21.4254 10.6877C22.0169 10.6222 22.3455 10.6222 22.8713 10.5566Z"
fill="#CD092F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M55.8629 11.7377C55.0742 11.9344 54.2855 12 53.4969 12C50.6708 12 48.8306 10.6886 48.8306 7.60673C48.8306 4.65601 50.7365 3.41016 53.4312 3.41016C54.2198 3.41016 55.0085 3.47573 55.7972 3.60687V5.04944C55.2057 4.98387 54.7456 4.9183 54.2198 4.9183C52.051 4.9183 50.9994 5.57401 50.9994 7.73787C50.9994 9.77058 51.9853 10.4919 54.2198 10.4919C54.8113 10.4919 55.2714 10.4263 55.7972 10.3607V11.7377H55.8629Z"
fill="#CD092F"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.21534 8.52287C8.21534 10.949 6.30938 11.9982 3.4833 11.9982C1.64307 11.9982 0.328613 11.6703 0.131445 11.6047V9.89987C0.788672 10.031 2.16885 10.3589 3.35186 10.3589C4.53487 10.3589 6.04649 10.0966 6.04649 8.78515C6.04649 7.93272 5.38926 7.60487 4.20625 7.27701C3.74619 7.14587 3.28613 7.01472 2.82608 6.88358C1.24873 6.42458 0 5.76887 0 3.93287C0 1.31001 2.10313 0.654297 4.53487 0.654297C5.98076 0.654297 7.16377 0.916583 7.36094 0.982154V2.55587C7.09805 2.4903 5.98076 2.22801 4.73203 2.22801C3.54903 2.22801 2.16885 2.35915 2.16885 3.67058C2.16885 4.65415 2.95752 4.91644 4.07481 5.17873C4.60059 5.37544 5.12637 5.44101 5.65215 5.63773C7.03233 6.03115 8.21534 6.68687 8.21534 8.52287Z"
fill="#CD092F"
/>
</svg>
)
}

1
components/Icons/index.tsx
View File

@@ -27,6 +27,7 @@ export { default as PersonIcon } from "./Person"
export { default as PetsIcon } from "./Pets"
export { default as PhoneIcon } from "./Phone"
export { default as PlusCircleIcon } from "./PlusCircle"
export { default as ScandicLogoIcon } from "./ScandicLogo"
export { default as RestaurantIcon } from "./Restaurant"
export { default as TshirtWashIcon } from "./TshirtWash"
export { default as WifiIcon } from "./Wifi"