From fc06d116fd115cd44440dc5ef020346fda1a5c94 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 12 Feb 2024 16:35:24 +0100 Subject: [PATCH 1/5] fix: render loading spinner if no hash --- app/[lang]/(preview)/preview/page.tsx | 6 ++-- components/Current/Aside.tsx | 5 ++- .../Current/Blocks/List/list.module.css | 13 +++---- .../index.tsx | 2 +- .../loading.module.css | 0 components/Current/Section/section.module.css | 2 +- types/components/current/asides/contact.ts | 3 ++ types/requests/asides/contact.ts | 36 ++++++++++--------- 8 files changed, 38 insertions(+), 29 deletions(-) rename components/Current/{LoadingPreview => LoadingSpinner}/index.tsx (90%) rename components/Current/{LoadingPreview => LoadingSpinner}/loading.module.css (100%) create mode 100644 types/components/current/asides/contact.ts diff --git a/app/[lang]/(preview)/preview/page.tsx b/app/[lang]/(preview)/preview/page.tsx index aafb77f2b..8f46d726f 100644 --- a/app/[lang]/(preview)/preview/page.tsx +++ b/app/[lang]/(preview)/preview/page.tsx @@ -4,7 +4,7 @@ import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphq import type { PageArgs, LangParams, UriParams } from "@/types/params" import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage" import ContentstackLivePreview from "@contentstack/live-preview-utils" -import LoadingPreview from "@/components/Current/LoadingPreview" +import LoadingSpinner from "@/components/Current/LoadingSpinner" import ContentPage from "@/components/Current/ContentPage" export default async function CurrentContentPage({ @@ -14,8 +14,8 @@ export default async function CurrentContentPage({ try { ContentstackLivePreview.setConfigFromParams(searchParams) - if (!searchParams.uri) { - return + if (!searchParams.uri || !searchParams["live_preview"]) { + return } const response = await previewRequest( diff --git a/components/Current/Aside.tsx b/components/Current/Aside.tsx index ea16faef9..fc0b3a9c4 100644 --- a/components/Current/Aside.tsx +++ b/components/Current/Aside.tsx @@ -1,4 +1,5 @@ import Puffs from "./Asides/Puffs" +import Contact from "./Asides/Contacts" import { AsideTypenameEnum } from "@/types/requests/utils/typename" import type { AsideProps } from "@/types/components/current/aside" @@ -14,7 +15,9 @@ export default function Aside({ blocks }: AsideProps) { const type = block.__typename switch (type) { case AsideTypenameEnum.CurrentBlocksPageAsideContact: - return null + return block.contact.contactConnection.edges.map((contact) => ( + + )) case AsideTypenameEnum.CurrentBlocksPageAsidePuff: return default: diff --git a/components/Current/Blocks/List/list.module.css b/components/Current/Blocks/List/list.module.css index be9aebcaf..1205278b1 100644 --- a/components/Current/Blocks/List/list.module.css +++ b/components/Current/Blocks/List/list.module.css @@ -1,11 +1,12 @@ .title { - font-family: Helvetica, Arial, sans-serif; + font-family: BrandonText-Bold,Arial,Helvetica,sans-serif; + font-size: 1.375rem; + line-height: 1.1em; + text-transform: uppercase; font-weight: 400; - line-height: normal; - margin-top: 2rem; + color: #483729; margin-bottom: 1rem; - text-decoration: none; - text-transform: none; + margin-top: 2rem; } .ul { @@ -60,6 +61,6 @@ @media screen and (min-width: 950px) { .title { - font-size: 1.375rem; + font-size: 1.625rem; } } \ No newline at end of file diff --git a/components/Current/LoadingPreview/index.tsx b/components/Current/LoadingSpinner/index.tsx similarity index 90% rename from components/Current/LoadingPreview/index.tsx rename to components/Current/LoadingSpinner/index.tsx index a8a20e784..efcd4d5a9 100644 --- a/components/Current/LoadingPreview/index.tsx +++ b/components/Current/LoadingSpinner/index.tsx @@ -1,6 +1,6 @@ import styles from "./loading.module.css" -export default function LoadingPreview() { +export default function LoadingSpinner() { return (
diff --git a/components/Current/LoadingPreview/loading.module.css b/components/Current/LoadingSpinner/loading.module.css similarity index 100% rename from components/Current/LoadingPreview/loading.module.css rename to components/Current/LoadingSpinner/loading.module.css diff --git a/components/Current/Section/section.module.css b/components/Current/Section/section.module.css index ba6517abf..9977054b3 100644 --- a/components/Current/Section/section.module.css +++ b/components/Current/Section/section.module.css @@ -6,7 +6,6 @@ box-sizing: content-box; display: grid; gap: 70px; - grid-template-columns: 2fr 1fr; margin: 0 auto; max-width: 1200px; padding: 20px 10px 5px; @@ -15,6 +14,7 @@ @media screen and (min-width: 740px) { .section { padding: 30px 30px 15px; + grid-template-columns: 2fr 1fr; } } diff --git a/types/components/current/asides/contact.ts b/types/components/current/asides/contact.ts new file mode 100644 index 000000000..1f0ea7b5f --- /dev/null +++ b/types/components/current/asides/contact.ts @@ -0,0 +1,3 @@ +import type { ContactNode } from "@/types/requests/asides/contact" + +export type ContactProps = ContactNode diff --git a/types/requests/asides/contact.ts b/types/requests/asides/contact.ts index 1f4288f8a..a32e8545a 100644 --- a/types/requests/asides/contact.ts +++ b/types/requests/asides/contact.ts @@ -1,23 +1,25 @@ import type { Edges } from "../utils/edges" +export type ContactNode = { + mailing_address: { + city: string + country: string + name: string + street: string + zip: string + } + phone: string + title: string + visiting_address: { + city: string + country: string + street: string + zip: string + } +} + export type Contact = { contact: { - contactConnection: Edges<{ - mailing_address: { - city: string - country: string - name: string - street: string - zip: string - } - phone: string - title: string - visiting_address: { - city: string - country: string - street: string - zip: string - } - }> + contactConnection: Edges } } From c578432a662c9a4f0711c287a83cf5ea406431af Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Tue, 13 Feb 2024 08:29:26 +0100 Subject: [PATCH 2/5] feat: add contacts component --- components/Current/Aside.tsx | 6 +- .../Current/Asides/Contacts/Contact.tsx | 57 +++++++++++++ .../Asides/Contacts/contacts.module.css | 80 +++++++++++++++++++ components/Current/Asides/Contacts/index.tsx | 8 ++ lib/graphql/Fragments/Contact.graphql | 3 + types/components/current/asides/contact.ts | 3 +- types/requests/asides/contact.ts | 3 + 7 files changed, 155 insertions(+), 5 deletions(-) create mode 100644 components/Current/Asides/Contacts/Contact.tsx create mode 100644 components/Current/Asides/Contacts/contacts.module.css create mode 100644 components/Current/Asides/Contacts/index.tsx diff --git a/components/Current/Aside.tsx b/components/Current/Aside.tsx index fc0b3a9c4..5462c5da2 100644 --- a/components/Current/Aside.tsx +++ b/components/Current/Aside.tsx @@ -1,5 +1,5 @@ import Puffs from "./Asides/Puffs" -import Contact from "./Asides/Contacts" +import Contacts from "./Asides/Contacts" import { AsideTypenameEnum } from "@/types/requests/utils/typename" import type { AsideProps } from "@/types/components/current/aside" @@ -15,9 +15,7 @@ export default function Aside({ blocks }: AsideProps) { const type = block.__typename switch (type) { case AsideTypenameEnum.CurrentBlocksPageAsideContact: - return block.contact.contactConnection.edges.map((contact) => ( - - )) + return case AsideTypenameEnum.CurrentBlocksPageAsidePuff: return default: diff --git a/components/Current/Asides/Contacts/Contact.tsx b/components/Current/Asides/Contacts/Contact.tsx new file mode 100644 index 000000000..6adc1f17a --- /dev/null +++ b/components/Current/Asides/Contacts/Contact.tsx @@ -0,0 +1,57 @@ +import styles from "./contacts.module.css" + +import { ContactNode } from "@/types/requests/asides/contact" + +export default function Contact({ + title, + mailing_address, + visiting_address, + phone, +}: ContactNode) { + return ( + + ) +} diff --git a/components/Current/Asides/Contacts/contacts.module.css b/components/Current/Asides/Contacts/contacts.module.css new file mode 100644 index 000000000..7d9f1d5f1 --- /dev/null +++ b/components/Current/Asides/Contacts/contacts.module.css @@ -0,0 +1,80 @@ +.wrapper { + margin-top: 2rem; + } + + .link { + display: inline-block; + transition: 200ms ease; + } + + .link:hover { + text-decoration: none; + transform: scale(1.01); + } + + .image { + height: auto; + object-fit: contain; + object-position: center; + } + + .content { + padding: 20px 0px; + } + + .heading { + font-family: BrandonText-Bold,Arial,Helvetica,sans-serif; + font-size: 1.375rem; + line-height: 1.1em; + text-transform: uppercase; + font-weight: 400; + color: #483729; + margin-bottom: 1rem; + } + + .link:hover .heading { + text-decoration: underline; + } + + .phoneContainer { + display: flex; + gap: 10px; + align-items: center; + } + + .phoneNumberLink { + line-height: 1.1em; + font-family: Helvetica,Arial,sans-serif; + font-weight: 400; + text-transform: none; + font-size: 1.125rem; + color: #00838e; + text-decoration: none; + cursor: pointer; + } + + + .p { + color: #333; + line-height: 1.3; + margin-bottom: 1em; + padding-top: 7px; + text-decoration: none; + } + + .phoneNumberLink:active, + .phoneNumberLink:hover { + outline: 0; + text-decoration: underline; + } + + @media screen and (min-width: 950px) { + .heading { + font-size: 1.625rem; + } + + .phoneNumberLink { + line-height: 1.1em; + font-size: 1.375rem; + } + } \ No newline at end of file diff --git a/components/Current/Asides/Contacts/index.tsx b/components/Current/Asides/Contacts/index.tsx new file mode 100644 index 000000000..76abe48b3 --- /dev/null +++ b/components/Current/Asides/Contacts/index.tsx @@ -0,0 +1,8 @@ +import type { ContactsProps } from "@/types/components/current/asides/contact" +import Contact from "./Contact" + +export default function Contacts({ contacts }: ContactsProps) { + return contacts.map((contact) => ( + + )) +} diff --git a/lib/graphql/Fragments/Contact.graphql b/lib/graphql/Fragments/Contact.graphql index 2f320a1b8..49c4326d7 100644 --- a/lib/graphql/Fragments/Contact.graphql +++ b/lib/graphql/Fragments/Contact.graphql @@ -6,6 +6,9 @@ fragment Contact on ContactBlock { street zip } + system { + uid + } phone title visiting_address { diff --git a/types/components/current/asides/contact.ts b/types/components/current/asides/contact.ts index 1f0ea7b5f..37f06ed0f 100644 --- a/types/components/current/asides/contact.ts +++ b/types/components/current/asides/contact.ts @@ -1,3 +1,4 @@ import type { ContactNode } from "@/types/requests/asides/contact" +import type { Node } from "@/types/requests/utils/edges" -export type ContactProps = ContactNode +export type ContactsProps = { contacts: Node[] } diff --git a/types/requests/asides/contact.ts b/types/requests/asides/contact.ts index a32e8545a..4a33c1457 100644 --- a/types/requests/asides/contact.ts +++ b/types/requests/asides/contact.ts @@ -8,6 +8,9 @@ export type ContactNode = { street: string zip: string } + system: { + uid: string + } phone: string title: string visiting_address: { From 5689e686102a733d78094628ce8f7ffc9093d39e Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Tue, 13 Feb 2024 13:28:30 +0100 Subject: [PATCH 3/5] fix: style components to add responsivity --- .../{Asides => Aside}/Contacts/Contact.tsx | 43 +++++++--- .../Current/Aside/Contacts/contact.module.css | 63 +++++++++++++++ .../{Asides => Aside}/Contacts/index.tsx | 0 .../{Asides => Aside}/Puffs/Puff/index.tsx | 26 +++--- .../Puffs/Puff/puff.module.css | 9 ++- .../Puffs/Puff/renderOptions.tsx | 0 .../Current/{Asides => Aside}/Puffs/index.tsx | 0 components/Current/Aside/aside.module.css | 3 + .../Current/{Aside.tsx => Aside/index.tsx} | 15 +++- .../Asides/Contacts/contacts.module.css | 80 ------------------- components/Current/Blocks/List/ListItem.tsx | 2 + .../Current/Blocks/List/list.module.css | 1 - components/Current/Blocks/blocks.module.css | 11 +++ .../Current/{Blocks.tsx => Blocks/index.tsx} | 12 +-- .../ContentPage/contentPage.module.css | 8 ++ components/Current/ContentPage/index.tsx | 5 +- .../Breadcrumbs/breadcrumbs.module.css | 8 ++ .../Current/Preamble/preamble.module.css | 17 +++- components/Current/Section/section.module.css | 14 ++-- lib/graphql/Fragments/Contact.graphql | 6 +- types/requests/asides/contact.ts | 7 +- 21 files changed, 206 insertions(+), 124 deletions(-) rename components/Current/{Asides => Aside}/Contacts/Contact.tsx (52%) create mode 100644 components/Current/Aside/Contacts/contact.module.css rename components/Current/{Asides => Aside}/Contacts/index.tsx (100%) rename components/Current/{Asides => Aside}/Puffs/Puff/index.tsx (77%) rename components/Current/{Asides => Aside}/Puffs/Puff/puff.module.css (87%) rename components/Current/{Asides => Aside}/Puffs/Puff/renderOptions.tsx (100%) rename components/Current/{Asides => Aside}/Puffs/index.tsx (100%) create mode 100644 components/Current/Aside/aside.module.css rename components/Current/{Aside.tsx => Aside/index.tsx} (67%) delete mode 100644 components/Current/Asides/Contacts/contacts.module.css create mode 100644 components/Current/Blocks/blocks.module.css rename components/Current/{Blocks.tsx => Blocks/index.tsx} (81%) create mode 100644 components/Current/ContentPage/contentPage.module.css diff --git a/components/Current/Asides/Contacts/Contact.tsx b/components/Current/Aside/Contacts/Contact.tsx similarity index 52% rename from components/Current/Asides/Contacts/Contact.tsx rename to components/Current/Aside/Contacts/Contact.tsx index 6adc1f17a..5a4085658 100644 --- a/components/Current/Asides/Contacts/Contact.tsx +++ b/components/Current/Aside/Contacts/Contact.tsx @@ -1,15 +1,19 @@ -import styles from "./contacts.module.css" +import styles from "./contact.module.css" -import { ContactNode } from "@/types/requests/asides/contact" +import { langEnum } from "@/types/lang" +import type { Lang } from "@/types/lang" +import type { ContactNode } from "@/types/requests/asides/contact" export default function Contact({ title, mailing_address, visiting_address, phone, + system: { locale }, }: ContactNode) { + const visitingAddressMessage = getVisitingAddressMessage(locale) return ( -