From cc30fcf884add3a11dc9f7331a5f90cbdd0c1bf3 Mon Sep 17 00:00:00 2001 From: Ane Date: Wed, 11 Dec 2024 15:27:02 +0100 Subject: [PATCH 1/3] adjust image section --- .../ImageSectionComponent.stories.tsx | 37 --------------- .../imageSection/ImageSectionComponent.tsx | 2 - .../imageSectionComponent.module.css | 46 ++++++++++++------- studio/lib/interfaces/pages.ts | 1 - studio/schemas/documents/pageBuilder.ts | 9 ++-- 5 files changed, 32 insertions(+), 63 deletions(-) delete mode 100644 src/components/sections/imageSection/ImageSectionComponent.stories.tsx diff --git a/src/components/sections/imageSection/ImageSectionComponent.stories.tsx b/src/components/sections/imageSection/ImageSectionComponent.stories.tsx deleted file mode 100644 index dc1a20dcf..000000000 --- a/src/components/sections/imageSection/ImageSectionComponent.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; - -import placeholder from "src/stories/assets/image-placeholder.png"; - -import ImageSectionComponent from "./ImageSectionComponent"; - -const meta: Meta = { - title: "Components/Sections/Image", - component: ImageSectionComponent, - parameters: { - a11y: { - element: "img", - config: {}, - options: {}, - manual: false, - }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - section: { - _key: "2052ec0aea39", - _type: "imageSection", - basicTitle: "Awesome title", - image: { - _key: "2052ec0aea39", - _type: "image", - alt: "placeholder alt", - src: placeholder, - }, - }, - }, -}; diff --git a/src/components/sections/imageSection/ImageSectionComponent.tsx b/src/components/sections/imageSection/ImageSectionComponent.tsx index 5ec999504..6cda21ed9 100644 --- a/src/components/sections/imageSection/ImageSectionComponent.tsx +++ b/src/components/sections/imageSection/ImageSectionComponent.tsx @@ -1,6 +1,5 @@ "use client"; import { SanityImage } from "src/components/image/SanityImage"; -import Text from "src/components/text/Text"; import { ImageSection } from "studio/lib/interfaces/pages"; import styles from "./imageSectionComponent.module.css"; @@ -8,7 +7,6 @@ import styles from "./imageSectionComponent.module.css"; const ImageSectionComponent = ({ section }: { section: ImageSection }) => { return (
- {section.basicTitle} {section.image && (
diff --git a/src/components/sections/imageSection/imageSectionComponent.module.css b/src/components/sections/imageSection/imageSectionComponent.module.css index 88cd026c2..8e68f5747 100644 --- a/src/components/sections/imageSection/imageSectionComponent.module.css +++ b/src/components/sections/imageSection/imageSectionComponent.module.css @@ -1,27 +1,39 @@ .article { - width: 100%; - max-width: 1000px; + --container-padding: 0.375rem; + max-width: var(--max-content-width-large); + padding: var(--container-padding); display: flex; - margin: auto; - padding: 5rem 1rem; flex-direction: column; - gap: 1.5rem; + justify-self: center; +} - @media (min-width: 640px) { - padding: 5rem 2rem; - justify-content: center; - gap: 1.5rem; +.image { + flex-shrink: 1; + max-width: 46rem; + padding: var(--padding-l) var(--container-padding); + + @media (max-width: 834px) { + padding: var(--padding-l) var(--container-padding); + max-width: 43.24219rem; } - @media (min-width: 1024px) { - padding: 5rem; + @media (max-width: 425px) { + padding: var(--padding-l) var(--container-padding); + max-width: 22.375rem; } } -.image { - max-width: 100%; - max-height: 25rem; - border-radius: 0.75rem; - overflow: hidden; - margin: auto; +.image img { + max-width: var(--max-content-width-large); + width: 100%; + height: 100%; + display: block; + + @media (max-width: 834px) { + max-width: var(--max-content-width-medium); + } + + @media (max-width: 425px) { + max-width: var(--max-content-width-small); + } } diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 5202444ac..cc9202037 100644 --- a/studio/lib/interfaces/pages.ts +++ b/studio/lib/interfaces/pages.ts @@ -65,7 +65,6 @@ export interface TestimonialsSection { export interface ImageSection { _type: "imageSection"; _key: string; - basicTitle: string; image: IImage; } diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index f3a712b8d..85d459f6c 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -3,8 +3,6 @@ import { defineField, defineType } from "sanity"; import { isInternationalizedString } from "studio/lib/interfaces/global"; import { titleID } from "studio/schemas/fields/text"; import article from "studio/schemas/objects/sections/article"; -import callout from "studio/schemas/objects/sections/callout"; -import callToAction from "studio/schemas/objects/sections/callToAction"; import { compensationCalculator } from "studio/schemas/objects/sections/compensation-calculator"; import contactBox from "studio/schemas/objects/sections/contact-box"; import { customerCasesEntry } from "studio/schemas/objects/sections/customerCasesEntry"; @@ -16,7 +14,6 @@ import imageSection from "studio/schemas/objects/sections/image"; import imageSplitSection from "studio/schemas/objects/sections/imagesplit"; import { jobs } from "studio/schemas/objects/sections/jobs"; import logoSalad from "studio/schemas/objects/sections/logoSalad"; -import testimonals from "studio/schemas/objects/sections/testimonials"; import seo from "studio/schemas/objects/seo"; import { titleSlug } from "studio/schemas/schemaTypes/slug"; import { firstTranslation } from "studio/utils/i18n"; @@ -49,9 +46,9 @@ const pageBuilder = defineType({ hero, logoSalad, article, - callout, - callToAction, - testimonals, + // callout, + // callToAction, + // testimonals, imageSplitSection, imageSection, grid, From bb35d2a16b930f520cdc5ac0137d99ce80fc19a1 Mon Sep 17 00:00:00 2001 From: Ane Date: Wed, 11 Dec 2024 15:36:33 +0100 Subject: [PATCH 2/3] reduce padding horisontally --- .../sections/imageSection/imageSectionComponent.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/sections/imageSection/imageSectionComponent.module.css b/src/components/sections/imageSection/imageSectionComponent.module.css index 9b289f50d..86dfd689c 100644 --- a/src/components/sections/imageSection/imageSectionComponent.module.css +++ b/src/components/sections/imageSection/imageSectionComponent.module.css @@ -9,15 +9,15 @@ .image { flex-shrink: 1; max-width: 46rem; - padding: var(--padding-l) var(--container-padding); + padding: var(--padding-l) 0rem; @media (max-width: 834px) { - padding: var(--padding-l) var(--container-padding); + padding: var(--padding-l) 0rem; max-width: 43.24219rem; } @media (max-width: 425px) { - padding: var(--padding-l) var(--container-padding); + padding: var(--padding-l) 0rem; max-width: 22.375rem; } } From 7d630f69fa9bf2f4a29885354c2a8c51ead26157 Mon Sep 17 00:00:00 2001 From: Ane Date: Wed, 11 Dec 2024 17:04:55 +0100 Subject: [PATCH 3/3] add translations in alt text and remove title from sanity schema --- .../ImageSectionComponentPreview.tsx | 4 +-- studio/lib/queries/pages.ts | 12 ++++++++ studio/schemas/documents/pageBuilder.ts | 3 +- studio/schemas/objects/sections/hero.ts | 4 +-- studio/schemas/objects/sections/image.ts | 28 +++++++++++++------ studio/utils/i18n.ts | 2 +- .../schemas/fields/customerCaseProjectInfo.ts | 12 ++++---- 7 files changed, 44 insertions(+), 21 deletions(-) diff --git a/src/components/sections/imageSection/ImageSectionComponentPreview.tsx b/src/components/sections/imageSection/ImageSectionComponentPreview.tsx index d2aa97c14..6d9d34af7 100644 --- a/src/components/sections/imageSection/ImageSectionComponentPreview.tsx +++ b/src/components/sections/imageSection/ImageSectionComponentPreview.tsx @@ -18,7 +18,7 @@ export default function ImageSectionComponentPreview({ { initial: initialData }, ); - const testimonialsSection = newData + const imageSection = newData ? (newData.sections.find( (section, index) => section._type === "imageSection" && index === sectionIndex, @@ -30,7 +30,7 @@ export default function ImageSectionComponentPreview({ return ( - + ); } diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index 69766a785..ea376df46 100644 --- a/studio/lib/queries/pages.ts +++ b/studio/lib/queries/pages.ts @@ -3,6 +3,14 @@ import { groq } from "next-sanity"; import { LANGUAGE_FIELD_FRAGMENT, TRANSLATED_LINK_FRAGMENT } from "./i18n"; import { translatedFieldFragment } from "./utils/i18n"; +const INTERNATIONALIZED_IMAGE_FRAGMENT = groq` + asset, + "metadata": asset -> metadata { + lqip + }, + "alt": ${translatedFieldFragment("alt")} +`; + const SECTIONS_FRAGMENT = groq` sections[]{ ..., @@ -36,6 +44,10 @@ const SECTIONS_FRAGMENT = groq` ..., ${TRANSLATED_LINK_FRAGMENT} } + }, + _type == "imageSection" => { + ..., + "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}}, }, _type == "ctaSection" => { ..., diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index 85d459f6c..76ebecc45 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -8,7 +8,6 @@ import contactBox from "studio/schemas/objects/sections/contact-box"; import { customerCasesEntry } from "studio/schemas/objects/sections/customerCasesEntry"; import { employeeHighlightSection } from "studio/schemas/objects/sections/employeeHighlight"; import { employees } from "studio/schemas/objects/sections/employees"; -import grid from "studio/schemas/objects/sections/grid"; import hero from "studio/schemas/objects/sections/hero"; import imageSection from "studio/schemas/objects/sections/image"; import imageSplitSection from "studio/schemas/objects/sections/imagesplit"; @@ -51,7 +50,7 @@ const pageBuilder = defineType({ // testimonals, imageSplitSection, imageSection, - grid, + // grid, employees, customerCasesEntry, contactBox, diff --git a/studio/schemas/objects/sections/hero.ts b/studio/schemas/objects/sections/hero.ts index 696437ced..6bf5cd4e2 100644 --- a/studio/schemas/objects/sections/hero.ts +++ b/studio/schemas/objects/sections/hero.ts @@ -1,6 +1,6 @@ import { defineField } from "sanity"; -import { allTranslation } from "studio/utils/i18n"; +import { allTranslations } from "studio/utils/i18n"; export const heroID = "hero"; @@ -75,7 +75,7 @@ export const hero = defineField({ prepare(selection) { const { title } = selection; return { - title: allTranslation(title) ?? undefined, + title: allTranslations(title) ?? undefined, subtitle: "Hero Section", }; }, diff --git a/studio/schemas/objects/sections/image.ts b/studio/schemas/objects/sections/image.ts index 8b9b60f22..978039a2e 100644 --- a/studio/schemas/objects/sections/image.ts +++ b/studio/schemas/objects/sections/image.ts @@ -1,7 +1,8 @@ import { defineField } from "sanity"; -import image from "studio/schemas/fields/media"; -import { title } from "studio/schemas/fields/text"; +import { isInternationalizedString } from "studio/lib/interfaces/global"; +import { internationalizedImage } from "studio/schemas/fields/media"; +import { allTranslations } from "studio/utils/i18n"; export const imageID = "imageSection"; @@ -10,22 +11,31 @@ export const imageSection = defineField({ title: "Image", type: "object", fields: [ - title, defineField({ - ...image, + ...internationalizedImage, description: "Upload a featured image for the section.", validation: (rule) => rule.required(), }), ], preview: { select: { - title: "basicTitle", + image: "image", + fullWidth: "fullWidth", }, - prepare(selection) { - const { title } = selection; + prepare: ({ image, fullWidth }) => { + const imageAlt = image.alt; + if (!isInternationalizedString(imageAlt)) { + throw new TypeError( + `Expected image 'alt' to be InternationalizedString, was ${typeof image.alt}`, + ); + } return { - title: title, - subtitle: "Image", + title: + imageAlt !== undefined + ? (allTranslations(imageAlt) ?? undefined) + : undefined, + subtitle: fullWidth ? "Full Width" : undefined, + media: image, }; }, }, diff --git a/studio/utils/i18n.ts b/studio/utils/i18n.ts index ca202ab3b..726a7f79f 100644 --- a/studio/utils/i18n.ts +++ b/studio/utils/i18n.ts @@ -9,7 +9,7 @@ export function firstTranslation( return internationalizedValue[0].value; } -export function allTranslation( +export function allTranslations( internationalizedValue: InternationalizedValue, ): string | null { if (internationalizedValue.length === 0) { diff --git a/studioShared/schemas/fields/customerCaseProjectInfo.ts b/studioShared/schemas/fields/customerCaseProjectInfo.ts index 83d806058..512c380fd 100644 --- a/studioShared/schemas/fields/customerCaseProjectInfo.ts +++ b/studioShared/schemas/fields/customerCaseProjectInfo.ts @@ -2,7 +2,7 @@ import { UlistIcon } from "@sanity/icons"; import { defineField } from "sanity"; import { isInternationalizedString } from "studio/lib/interfaces/global"; -import { allTranslation } from "studio/utils/i18n"; +import { allTranslations } from "studio/utils/i18n"; export const customerCaseProjectInfo = defineField({ name: "projectInfo", @@ -45,7 +45,7 @@ export const customerCaseProjectInfo = defineField({ ); } return { - title: allTranslation(customerSector) ?? undefined, + title: allTranslations(customerSector) ?? undefined, }; }, }, @@ -127,7 +127,8 @@ export const customerCaseProjectInfo = defineField({ ); } return { - title: allTranslation(design) ?? "No translation available", + title: + allTranslations(design) ?? "No translation available", }; }, }, @@ -160,7 +161,8 @@ export const customerCaseProjectInfo = defineField({ } return { title: - allTranslation(development) ?? "No translation available", + allTranslations(development) ?? + "No translation available", }; }, }, @@ -193,7 +195,7 @@ export const customerCaseProjectInfo = defineField({ } return { title: - allTranslation(projectManagement) ?? + allTranslations(projectManagement) ?? "No translation available", }; },