Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V3 update text block formatting #888

Merged
merged 2 commits into from
Nov 22, 2024
Merged

V3 update text block formatting #888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97c94b6
Wip update text block formatting
idamand Nov 21, 2024
1a172c3
Style textblock and remove framed from textblocktype
idamand Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
3 changes: 0 additions & 3 deletions src/components/customerCases/customerCase/sections/CustomerCaseSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -14,8 +13,6 @@ export function CustomerCaseSection({
switch (section._type) {
case "splitSection":
return <SplitSection section={section} />;
case "textBlock":
return <TextSection section={section} />;
case "imageBlock":
return <ImageSection section={section} />;
case "resultsBlock":
Expand Down
3 changes: 3 additions & 0 deletions src/components/customerCases/customerCase/sections/splitSection/SplitSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -18,6 +19,8 @@ function SplitSectionSection({
switch (section._type) {
case "emptySection":
return <div className={styles.emptySection}></div>;
case "textBlock":
return <TextSection section={section} />;
}
return <CustomerCaseSection section={section} />;
}
Expand Down
16 changes: 12 additions & 4 deletions src/components/customerCases/customerCase/sections/text/TextSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,26 @@ export default function TextSection({ section }: TextSectionProps) {
<div className={styles.wrapper}>
<div
className={
styles.content +
(section.textBlockType === "framed" ? ` ${styles.highlighted}` : "")
styles.content /* +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
styles.content /* +
styles.content

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh never mind! I guess this is for the frame/highlighted issue?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! I noted in the description why it was commented out and that it can be removed or added back in at a later date so we have the history and reasoning available for later!

(section.textBlockType === "framed" ? ` ${styles.framed}` : "") */
}
>
<div className={styles.innerContent}>
<div>
{section.sectionTitle && (
<Text className={styles.header} type={"h5"}>
<Text className={styles.title} type={"h4"}>
{section.sectionTitle}
</Text>
)}
<Text>{section.text}</Text>
<Text
type={
section.textBlockType === "highlighted"
? "bodyXl"
: "bodyNormal"
}
>
{section.text}
</Text>
</div>
<div className={styles.link}>
{section.url && (
Expand Down
18 changes: 10 additions & 8 deletions src/components/customerCases/customerCase/sections/text/textSection.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -21,20 +21,22 @@
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;
text-decoration: none;
color: var(--primary-black-darker);
}

.title {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
font-weight: 450;
line-height: 2rem;
}
6 changes: 4 additions & 2 deletions src/components/text/text.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
5 changes: 1 addition & 4 deletions studioShared/lib/interfaces/customerCases.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -29,10 +28,8 @@ export interface CustomerCaseBase {
image: IImage;
}

export type BaseCustomerCaseSection = TextBlock | ImageBlock;

export type CustomerCaseSection =
| BaseCustomerCaseSection
| ImageBlock
| SplitSection
| ResultsBlock
| ListBlock;
Expand Down
5 changes: 3 additions & 2 deletions studioShared/lib/interfaces/splitSection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
12 changes: 8 additions & 4 deletions studioShared/lib/queries/customerCases.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")},
Expand Down Expand Up @@ -61,8 +62,8 @@ export const CUSTOMER_CASE_QUERY = groq`
"sections": sections[] {
_key,
_type,
_type == "emptySection" => {},
${BASE_SECTIONS_FRAGMENT}

${SPLIT_SECTIONS_FRAGMENT}
}
},
_type == "resultsBlock" => {
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions studioShared/schemas/documents/customerCase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 3 additions & 2 deletions studioShared/schemas/objects/splitSection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion studioShared/schemas/objects/textBlock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down