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

feat(SW-350): Update design for booking widget

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-02 15:51:37 +02:00
parent d58c77493a
commit 04406d3865
6 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/BookingWidget/bookingWidget.module.css
View File

@@ -1,4 +1,4 @@
@media screen and (max-width: 766px) { @media screen and (max-width: 767px) {
.container { .container {
background-color: var(--UI-Input-Controls-Surface-Normal); background-color: var(--UI-Input-Controls-Surface-Normal);
bottom: -100%; bottom: -100%;
@@ -36,7 +36,7 @@
} }
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.container { .container {
display: block; display: block;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);

8
components/BookingWidget/index.tsx
View File

@@ -2,17 +2,13 @@ import { getLocations } from "@/lib/trpc/memoizedRequests"
import BookingWidgetClient from "./Client" import BookingWidgetClient from "./Client"
import type { BookingWidgetType } from "@/types/components/bookingWidget" import type { BookingWidgetProps } from "@/types/components/bookingWidget"
export function preload() { export function preload() {
void getLocations() void getLocations()
} }
export default async function BookingWidget({ export default async function BookingWidget({ type }: BookingWidgetProps) {
type,
}: {
type: BookingWidgetType
}) {
const locations = await getLocations() const locations = await getLocations()
if (!locations || "error" in locations) { if (!locations || "error" in locations) {

4
components/Forms/BookingWidget/FormContent/formContent.module.css
View File

@@ -29,7 +29,7 @@
height: var(--Spacing-x3); height: var(--Spacing-x3);
} }
@media screen and (max-width: 766px) { @media screen and (max-width: 767px) {
.input { .input {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
@@ -59,7 +59,7 @@
} }
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.input { .input {
display: flex; display: flex;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);

4
components/Forms/BookingWidget/form.module.css
View File

@@ -12,7 +12,7 @@
width: 100%; width: 100%;
} }
@media screen and (max-width: 766px) { @media screen and (max-width: 767px) {
.form { .form {
align-self: flex-start; align-self: flex-start;
} }
@@ -24,7 +24,7 @@
} }
} }
@media screen and (min-width: 767px) { @media screen and (min-width: 768px) {
.section { .section {
display: flex; display: flex;
padding: var(--Spacing-x1) var(--Spacing-x5); padding: var(--Spacing-x1) var(--Spacing-x5);

6
types/components/bookingWidget/index.ts
View File

@@ -8,9 +8,13 @@ export type BookingWidgetSchema = z.output<typeof bookingWidgetSchema>
export type BookingWidgetType = "default" | "full" export type BookingWidgetType = "default" | "full"
export interface BookingWidgetProps {
type?: BookingWidgetType
}
export interface BookingWidgetClientProps { export interface BookingWidgetClientProps {
locations: Locations locations: Locations
type: BookingWidgetType type?: BookingWidgetType
} }
export interface BookingWidgetToggleButtonProps { export interface BookingWidgetToggleButtonProps {

3
types/components/form/bookingwidget.ts
View File

@@ -1,8 +1,9 @@
import type { BookingWidgetType } from "@/types/components/bookingWidget"
import type { Location, Locations } from "@/types/trpc/routers/hotel/locations" import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
export interface BookingWidgetFormProps { export interface BookingWidgetFormProps {
locations: Locations locations: Locations
type: "default" | "full" type?: BookingWidgetType
} }
export interface BookingWidgetFormContentProps { export interface BookingWidgetFormContentProps {