Skip to content

Commit

Permalink
V3 customer case list styling (#860)
Browse files Browse the repository at this point in the history
* Add listblock to shared studio

* Add listBlock to ui

* Update src/components/customerCases/customerCase/sections/list/ListBlock.tsx

Co-authored-by: anemne <[email protected]>

* Remove todo

Co-authored-by: anemne <[email protected]>

---------

Co-authored-by: anemne <[email protected]>
  • Loading branch information
idamand and anemne authored Nov 5, 2024
1 parent b6d8f9b commit 15a49e3
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { CustomerCaseSection as CustomerCaseSectionObject } from "studioShared/lib/interfaces/customerCases";

import ImageSection from "./image/ImageSection";
import ListBlock from "./list/ListBlock";
import QuoteBlock from "./quote/QuoteBlock";
import ResultsBlock from "./results/ResultsBlock";
import RichTextSection from "./richText/RichTextSection";
Expand All @@ -22,5 +23,7 @@ export function CustomerCaseSection({
return <ImageSection section={section} />;
case "resultsBlock":
return <ResultsBlock section={section} />;
case "listBlock":
return <ListBlock section={section} />;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Text from "src/components/text/Text";
import { ListBlock as ListBlockObject } from "studioShared/lib/interfaces/listBlock";

import styles from "./listBlock.module.css";

export interface ListBlockProps {
section: ListBlockObject;
}

export default function ListBlock({ section }: ListBlockProps) {
return (
section.description && (
<div className={styles.wrapper}>
<div className={styles.listwrapper}>
<Text type="h4">{section.description}</Text>
<div className={styles.tagwrapper}>
{section.list?.map((listItem) => (
<Text
type="labelRegular"
key={listItem._key}
className={styles.tag}
>
{listItem.text}
</Text>
))}
</div>
</div>
</div>
)
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}

.listwrapper {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
max-width: 960px;
}

.tagwrapper {
display: flex;
align-items: flex-start;
align-content: flex-start;
gap: 0.5rem 0.5rem;
align-self: stretch;
flex-wrap: wrap;
}

.tag {
display: flex;
height: 2.4375rem;
padding: 0.375rem 0.75rem;
align-items: center;
gap: 0.5rem;
border-radius: 0.25rem;
border: 1px solid #0e0f0f;
}
8 changes: 7 additions & 1 deletion src/components/text/text.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,14 @@
font-weight: 600;
}

.h4 {
font-size: 1.5rem;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 1.8rem */
}

/* TODO: add font variables */
/* .h4 */
/* .h5 */
/* .h6 */

Expand Down
4 changes: 3 additions & 1 deletion studioShared/lib/interfaces/customerCases.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { IImage } from "studio/lib/interfaces/media";

import { ImageBlock } from "./imageBlock";
import { ListBlock } from "./listBlock";
import { QuoteBlock } from "./quoteBlock";
import { ResultsBlock } from "./resultsBlock";
import { RichTextBlock } from "./richTextBlock";
Expand Down Expand Up @@ -34,7 +35,8 @@ export type BaseCustomerCaseSection = RichTextBlock | ImageBlock | QuoteBlock;
export type CustomerCaseSection =
| BaseCustomerCaseSection
| SplitSection
| ResultsBlock;
| ResultsBlock
| ListBlock;

export interface CustomerCase extends CustomerCaseBase {
projectInfo: CustomerCaseProjectInfo;
Expand Down
11 changes: 11 additions & 0 deletions studioShared/lib/interfaces/listBlock.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
interface ListItem {
_key: string;
text: string;
}

export interface ListBlock {
_key: string;
_type: "listBlock";
description?: string;
list: ListItem[];
}
13 changes: 7 additions & 6 deletions studioShared/lib/queries/customerCases.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,6 @@ export const BASE_SECTIONS_FRAGMENT = groq`
},
fullWidth
},
_type == "listBlock" => {
"description": ${translatedFieldFragment("description")},
"list": list[] {
"text": ${translatedFieldFragment("text")},
},
},
_type == "quoteBlock" => {
"quote": ${translatedFieldFragment("quote")},
"author": ${translatedFieldFragment("author")},
Expand Down Expand Up @@ -83,6 +77,13 @@ export const CUSTOMER_CASE_QUERY = groq`
"description": ${translatedFieldFragment("description")},
}
},
_type == "listBlock" => {
"description": ${translatedFieldFragment("description")},
"list": list[] {
_key,
"text": ${translatedFieldFragment("text")},
},
},
${BASE_SECTIONS_FRAGMENT}
},
"featuredCases": featuredCases[] -> {
Expand Down
2 changes: 2 additions & 0 deletions studioShared/schemas/documents/customerCase.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ 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 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";
Expand All @@ -18,6 +19,7 @@ export const customerCaseSections = [
...baseCustomerCaseSections,
splitSection,
resultsBlock,
listBlock,
];

const customerCase = defineType({
Expand Down
8 changes: 1 addition & 7 deletions studioShared/schemas/objects/sections.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import imageBlock from "./imageBlock";
import listBlock from "./listBlock";
import quoteBlock from "./quoteBlock";
import richTextBlock from "./richTextBlock";

export const baseCustomerCaseSections = [
richTextBlock,
imageBlock,
listBlock,
quoteBlock,
];
export const baseCustomerCaseSections = [richTextBlock, imageBlock, quoteBlock];

0 comments on commit 15a49e3

Please sign in to comment.