From 97c94b6de13f46dcc7990b2ecb3f4bb1ecad988b Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Thu, 21 Nov 2024 09:24:34 +0100 Subject: [PATCH 1/2] Wip update text block formatting --- .prettierrc | 1 + .../customerCase/sections/CustomerCaseSection.tsx | 3 --- .../sections/splitSection/SplitSection.tsx | 3 +++ .../customerCase/sections/text/TextSection.tsx | 14 +++++++++++--- .../sections/text/textSection.module.css | 11 +++-------- src/components/text/text.module.css | 6 ++++-- studioShared/lib/interfaces/customerCases.ts | 5 +---- studioShared/lib/interfaces/splitSection.ts | 5 +++-- studioShared/schemas/documents/customerCase.ts | 4 ++-- studioShared/schemas/objects/splitSection.ts | 5 +++-- 10 files changed, 31 insertions(+), 26 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..0967ef424 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{} diff --git a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx index 7f8dcdbbc..28deaa63a 100644 --- a/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx +++ b/src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx @@ -4,7 +4,6 @@ import ImageSection from "./image/ImageSection"; import ListBlock from "./list/ListBlock"; import ResultsBlock from "./results/ResultsBlock"; import SplitSection from "./splitSection/SplitSection"; -import TextSection from "./text/TextSection"; export function CustomerCaseSection({ section, @@ -14,8 +13,6 @@ export function CustomerCaseSection({ switch (section._type) { case "splitSection": return ; - case "textBlock": - return ; case "imageBlock": return ; case "resultsBlock": diff --git a/src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx b/src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx index 9db621502..505ca424e 100644 --- a/src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx +++ b/src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx @@ -1,4 +1,5 @@ import { CustomerCaseSection } from "src/components/customerCases/customerCase/sections/CustomerCaseSection"; +import TextSection from "src/components/customerCases/customerCase/sections/text/TextSection"; import { SplitSection as SplitSectionObject, SplitSectionSection as SplitSectionSectionObject, @@ -18,6 +19,8 @@ function SplitSectionSection({ switch (section._type) { case "emptySection": return
; + case "textBlock": + return ; } return ; } diff --git a/src/components/customerCases/customerCase/sections/text/TextSection.tsx b/src/components/customerCases/customerCase/sections/text/TextSection.tsx index 71a12d26b..aa5abd012 100644 --- a/src/components/customerCases/customerCase/sections/text/TextSection.tsx +++ b/src/components/customerCases/customerCase/sections/text/TextSection.tsx @@ -18,17 +18,25 @@ export default function TextSection({ section }: TextSectionProps) {
{section.sectionTitle && ( - + {section.sectionTitle} )} - {section.text} + + {section.text} +
{section.url && ( diff --git a/src/components/customerCases/customerCase/sections/text/textSection.module.css b/src/components/customerCases/customerCase/sections/text/textSection.module.css index d87e35e6d..5afaa6024 100644 --- a/src/components/customerCases/customerCase/sections/text/textSection.module.css +++ b/src/components/customerCases/customerCase/sections/text/textSection.module.css @@ -2,14 +2,14 @@ display: flex; flex-direction: column; align-items: center; - gap: 2rem; + gap: 0.5rem; } .content { max-width: 960px; } -.content.highlighted { +.content.framed { border: 2px solid var(--primary-yellow-warning); border-radius: 0.25rem; background-color: var(--primary-yellow-warning); @@ -21,17 +21,12 @@ justify-content: space-between; } -.highlighted .innerContent { +.framed .innerContent { background-color: var(--primary-bg); border-radius: 1.25rem; padding: 1rem; height: fit-content; } -.header { - /* TODO: this needs to be changed */ - margin-top: 0px; - margin-bottom: 16px; -} .link { margin-top: 2rem; diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index 82e24402e..53552cee6 100644 --- a/src/components/text/text.module.css +++ b/src/components/text/text.module.css @@ -71,8 +71,10 @@ } .bodyXl { - font-size: 2.125rem; - font-weight: 500; + font-size: 2.5rem; + font-weight: 400; + line-height: 120%; + letter-spacing: 0.025rem; } .bodyBig { diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts index 06a114c05..7d55d4bab 100644 --- a/studioShared/lib/interfaces/customerCases.ts +++ b/studioShared/lib/interfaces/customerCases.ts @@ -4,7 +4,6 @@ import { ImageBlock } from "./imageBlock"; import { ListBlock } from "./listBlock"; import { ResultsBlock } from "./resultsBlock"; import { SplitSection } from "./splitSection"; -import { TextBlock } from "./textBlock"; export interface CustomerCaseProjectInfo { customer: string; @@ -29,10 +28,8 @@ export interface CustomerCaseBase { image: IImage; } -export type BaseCustomerCaseSection = TextBlock | ImageBlock; - export type CustomerCaseSection = - | BaseCustomerCaseSection + | ImageBlock | SplitSection | ResultsBlock | ListBlock; diff --git a/studioShared/lib/interfaces/splitSection.ts b/studioShared/lib/interfaces/splitSection.ts index 82bd0e301..32336243c 100644 --- a/studioShared/lib/interfaces/splitSection.ts +++ b/studioShared/lib/interfaces/splitSection.ts @@ -1,14 +1,15 @@ import { isSanityKeyTypeObject } from "studio/lib/interfaces/global"; import { splitSectionSections } from "studioShared/schemas/objects/splitSection"; -import { BaseCustomerCaseSection } from "./customerCases"; +import { ImageBlock } from "./imageBlock"; +import { TextBlock } from "./textBlock"; export interface EmptySection { _key: string; _type: "emptySection"; } -export type SplitSectionSection = BaseCustomerCaseSection | EmptySection; +export type SplitSectionSection = TextBlock | ImageBlock | EmptySection; export interface SplitSection { _key: string; diff --git a/studioShared/schemas/documents/customerCase.ts b/studioShared/schemas/documents/customerCase.ts index 1f1b8bbec..987a891d9 100644 --- a/studioShared/schemas/documents/customerCase.ts +++ b/studioShared/schemas/documents/customerCase.ts @@ -9,15 +9,15 @@ import { titleSlug } from "studio/schemas/schemaTypes/slug"; import { buildDraftId, buildPublishedId } from "studio/utils/documentUtils"; import { firstTranslation } from "studio/utils/i18n"; import { customerCaseProjectInfo } from "studioShared/schemas/fields/customerCaseProjectInfo"; +import imageBlock from "studioShared/schemas/objects/imageBlock"; import listBlock from "studioShared/schemas/objects/listBlock"; import resultsBlock from "studioShared/schemas/objects/resultsBlock"; -import { baseCustomerCaseSections } from "studioShared/schemas/objects/sections"; import splitSection from "studioShared/schemas/objects/splitSection"; export const customerCaseID = "customerCase"; export const customerCaseSections = [ - ...baseCustomerCaseSections, + imageBlock, splitSection, resultsBlock, listBlock, diff --git a/studioShared/schemas/objects/splitSection.ts b/studioShared/schemas/objects/splitSection.ts index b922c9691..7f843318f 100644 --- a/studioShared/schemas/objects/splitSection.ts +++ b/studioShared/schemas/objects/splitSection.ts @@ -5,9 +5,10 @@ import { humanizeCamelCase } from "studio/utils/stringUtils"; import { isSplitSectionSections } from "studioShared/lib/interfaces/splitSection"; import emptySection from "./emptySection"; -import { baseCustomerCaseSections } from "./sections"; +import imageBlock from "./imageBlock"; +import textBlock from "./textBlock"; -export const splitSectionSections = [...baseCustomerCaseSections, emptySection]; +export const splitSectionSections = [textBlock, imageBlock, emptySection]; const splitSection = defineField({ name: "splitSection", From 1a172c3fdf840accdaf7e80ed000d85998603e2e Mon Sep 17 00:00:00 2001 From: Ida Marie Andreassen Date: Thu, 21 Nov 2024 16:57:18 +0100 Subject: [PATCH 2/2] Style textblock and remove framed from textblocktype --- .../customerCase/sections/text/TextSection.tsx | 6 +++--- .../sections/text/textSection.module.css | 7 +++++++ studioShared/lib/queries/customerCases.ts | 12 ++++++++---- studioShared/schemas/objects/textBlock.ts | 2 +- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/customerCases/customerCase/sections/text/TextSection.tsx b/src/components/customerCases/customerCase/sections/text/TextSection.tsx index aa5abd012..6712fd198 100644 --- a/src/components/customerCases/customerCase/sections/text/TextSection.tsx +++ b/src/components/customerCases/customerCase/sections/text/TextSection.tsx @@ -17,14 +17,14 @@ export default function TextSection({ section }: TextSectionProps) {
{section.sectionTitle && ( - + {section.sectionTitle} )} diff --git a/src/components/customerCases/customerCase/sections/text/textSection.module.css b/src/components/customerCases/customerCase/sections/text/textSection.module.css index 5afaa6024..d61094649 100644 --- a/src/components/customerCases/customerCase/sections/text/textSection.module.css +++ b/src/components/customerCases/customerCase/sections/text/textSection.module.css @@ -33,3 +33,10 @@ text-decoration: none; color: var(--primary-black-darker); } + +.title { + margin-bottom: 0.5rem; + margin-top: 0.5rem; + font-weight: 450; + line-height: 2rem; +} diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts index 7c895a4f4..f7be3db31 100644 --- a/studioShared/lib/queries/customerCases.ts +++ b/studioShared/lib/queries/customerCases.ts @@ -28,7 +28,8 @@ export const CUSTOMER_CASES_QUERY = groq` } `; -export const BASE_SECTIONS_FRAGMENT = groq` +export const SPLIT_SECTIONS_FRAGMENT = groq` + _type == "emptySection" => {}, _type == "textBlock" => { "sectionTitle": ${translatedFieldFragment("sectionTitle")}, "text": ${translatedFieldFragment("text")}, @@ -61,8 +62,8 @@ export const CUSTOMER_CASE_QUERY = groq` "sections": sections[] { _key, _type, - _type == "emptySection" => {}, - ${BASE_SECTIONS_FRAGMENT} + + ${SPLIT_SECTIONS_FRAGMENT} } }, _type == "resultsBlock" => { @@ -85,7 +86,10 @@ export const CUSTOMER_CASE_QUERY = groq` "text": ${translatedFieldFragment("text")}, }, }, - ${BASE_SECTIONS_FRAGMENT} + _type == "imageBlock" => { + "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}}, + fullWidth + }, }, "featuredCases": featuredCases[] -> { ${CUSTOMER_CASE_BASE_FRAGMENT} diff --git a/studioShared/schemas/objects/textBlock.ts b/studioShared/schemas/objects/textBlock.ts index b3cc02950..3c38ce1a9 100644 --- a/studioShared/schemas/objects/textBlock.ts +++ b/studioShared/schemas/objects/textBlock.ts @@ -84,7 +84,7 @@ const textBlock = defineField({ list: [ { title: "Normal", value: "normal" }, { title: "Highlighted", value: "highlighted" }, - { title: "Framed", value: "framed" }, + /* { title: "Framed", value: "framed" }, */ ], layout: "radio", direction: "vertical",