foundry-component-library 0.1.13 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/OfficesTeaser/index.tsx +1 -1
- package/lib/components/case/Content/Numbers/styles.module.scss +1 -1
- package/lib/components/case/Content/ThreeColumns/Center.tsx +49 -0
- package/lib/components/case/Content/ThreeColumns/Left.tsx +48 -0
- package/lib/components/case/Content/ThreeColumns/Right.tsx +49 -0
- package/lib/components/case/Content/ThreeColumns/index.tsx +38 -0
- package/lib/components/case/Content/Video.tsx +8 -2
- package/lib/components/case/Content/index.tsx +10 -0
- package/lib/components/case/Content/styles.module.scss +9 -1
- package/lib/components/single/Content/styles.module.scss +0 -1
- package/lib/queries/getCaseBySlug.ts +85 -0
- package/lib/types/index.ts +33 -3
- package/package.json +1 -1
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import styles from "../styles.module.scss";
|
|
2
|
+
import Video from "../Video";
|
|
3
|
+
import { ColumnOption, NextImage } from "../../../../types";
|
|
4
|
+
|
|
5
|
+
const Center = ({
|
|
6
|
+
section,
|
|
7
|
+
Image,
|
|
8
|
+
}: {
|
|
9
|
+
section: ColumnOption;
|
|
10
|
+
Image: NextImage;
|
|
11
|
+
}) => {
|
|
12
|
+
if (!section) return null;
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div className={styles.columnContent}>
|
|
16
|
+
{/* case */}
|
|
17
|
+
{section.fieldGroupName ===
|
|
18
|
+
"Case_Case_Content_Threecolumns_Center_Text" && (
|
|
19
|
+
<div
|
|
20
|
+
className={styles.text}
|
|
21
|
+
dangerouslySetInnerHTML={{ __html: section.text }}
|
|
22
|
+
/>
|
|
23
|
+
)}
|
|
24
|
+
{section.fieldGroupName ===
|
|
25
|
+
"Case_Case_Content_Threecolumns_Center_Image" &&
|
|
26
|
+
section.image && (
|
|
27
|
+
<>
|
|
28
|
+
<Image
|
|
29
|
+
className={styles.image}
|
|
30
|
+
src={section.image.sourceUrl}
|
|
31
|
+
alt={section.caption ? section.caption : "foundry digital agency"}
|
|
32
|
+
layout="intrinsic"
|
|
33
|
+
width={600}
|
|
34
|
+
height={600}
|
|
35
|
+
/>
|
|
36
|
+
{section.caption && (
|
|
37
|
+
<div className={styles.caption}>{section.caption}</div>
|
|
38
|
+
)}
|
|
39
|
+
</>
|
|
40
|
+
)}
|
|
41
|
+
{section.fieldGroupName ===
|
|
42
|
+
"Case_Case_Content_Threecolumns_Center_Video" && (
|
|
43
|
+
<Video section={section} defaultRatio="150%" />
|
|
44
|
+
)}
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default Center;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import styles from "../styles.module.scss";
|
|
2
|
+
import Video from "../Video";
|
|
3
|
+
import { ColumnOption, NextImage } from "../../../../types";
|
|
4
|
+
|
|
5
|
+
const Left = ({
|
|
6
|
+
section,
|
|
7
|
+
Image,
|
|
8
|
+
}: {
|
|
9
|
+
section: ColumnOption;
|
|
10
|
+
Image: NextImage;
|
|
11
|
+
}) => {
|
|
12
|
+
if (!section) return null;
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div className={styles.columnContent}>
|
|
16
|
+
{/* case */}
|
|
17
|
+
{section.fieldGroupName ===
|
|
18
|
+
"Case_Case_Content_Threecolumns_Left_Text" && (
|
|
19
|
+
<div
|
|
20
|
+
className={styles.text}
|
|
21
|
+
dangerouslySetInnerHTML={{ __html: section.text }}
|
|
22
|
+
/>
|
|
23
|
+
)}
|
|
24
|
+
{section.fieldGroupName === "Case_Case_Content_Threecolumns_Left_Image" &&
|
|
25
|
+
section.image && (
|
|
26
|
+
<>
|
|
27
|
+
<Image
|
|
28
|
+
className={styles.image}
|
|
29
|
+
src={section.image.sourceUrl}
|
|
30
|
+
alt={section.caption ? section.caption : "foundry digital agency"}
|
|
31
|
+
layout="intrinsic"
|
|
32
|
+
width={600}
|
|
33
|
+
height={600}
|
|
34
|
+
/>
|
|
35
|
+
{section.caption && (
|
|
36
|
+
<div className={styles.caption}>{section.caption}</div>
|
|
37
|
+
)}
|
|
38
|
+
</>
|
|
39
|
+
)}
|
|
40
|
+
{section.fieldGroupName ===
|
|
41
|
+
"Case_Case_Content_Threecolumns_Left_Video" && (
|
|
42
|
+
<Video section={section} defaultRatio="150%" />
|
|
43
|
+
)}
|
|
44
|
+
</div>
|
|
45
|
+
);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export default Left;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import styles from "../styles.module.scss";
|
|
2
|
+
import Video from "../Video";
|
|
3
|
+
import { ColumnOption, NextImage } from "../../../../types";
|
|
4
|
+
|
|
5
|
+
const Right = ({
|
|
6
|
+
section,
|
|
7
|
+
Image,
|
|
8
|
+
}: {
|
|
9
|
+
section: ColumnOption;
|
|
10
|
+
Image: NextImage;
|
|
11
|
+
}) => {
|
|
12
|
+
if (!section) return null;
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div className={styles.columnContent}>
|
|
16
|
+
{/* case */}
|
|
17
|
+
{section.fieldGroupName ===
|
|
18
|
+
"Case_Case_Content_Threecolumns_Right_Text" && (
|
|
19
|
+
<div
|
|
20
|
+
className={`${styles.text}`}
|
|
21
|
+
dangerouslySetInnerHTML={{ __html: section.text }}
|
|
22
|
+
/>
|
|
23
|
+
)}
|
|
24
|
+
{section.fieldGroupName ===
|
|
25
|
+
"Case_Case_Content_Threecolumns_Right_Image" &&
|
|
26
|
+
section.image && (
|
|
27
|
+
<>
|
|
28
|
+
<Image
|
|
29
|
+
className={styles.image}
|
|
30
|
+
src={section.image.sourceUrl}
|
|
31
|
+
alt={section.caption ? section.caption : "foundry digital agency"}
|
|
32
|
+
layout="intrinsic"
|
|
33
|
+
width={600}
|
|
34
|
+
height={600}
|
|
35
|
+
/>
|
|
36
|
+
{section.caption && (
|
|
37
|
+
<div className={styles.caption}>{section.caption}</div>
|
|
38
|
+
)}
|
|
39
|
+
</>
|
|
40
|
+
)}
|
|
41
|
+
{section.fieldGroupName ===
|
|
42
|
+
"Case_Case_Content_Threecolumns_Right_Video" && (
|
|
43
|
+
<Video section={section} defaultRatio="150%" />
|
|
44
|
+
)}
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default Right;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import styles from "../styles.module.scss";
|
|
2
|
+
import Container from "../../../Container";
|
|
3
|
+
import { type ThreeColumns, NextImage } from "../../../../types";
|
|
4
|
+
import Left from "./Left";
|
|
5
|
+
import Center from "./Center";
|
|
6
|
+
import Right from "./Right";
|
|
7
|
+
|
|
8
|
+
function ThreeColumns({
|
|
9
|
+
section,
|
|
10
|
+
Image,
|
|
11
|
+
}: {
|
|
12
|
+
section: ThreeColumns;
|
|
13
|
+
Image: NextImage;
|
|
14
|
+
}) {
|
|
15
|
+
return (
|
|
16
|
+
<section className={styles.section}>
|
|
17
|
+
<Container>
|
|
18
|
+
<div className={styles.threeColumns}>
|
|
19
|
+
<div className={styles.column}>
|
|
20
|
+
{section.left && <Left section={section.left[0]} Image={Image} />}
|
|
21
|
+
</div>
|
|
22
|
+
<div className={styles.column}>
|
|
23
|
+
{section.center && (
|
|
24
|
+
<Center section={section.center[0]} Image={Image} />
|
|
25
|
+
)}
|
|
26
|
+
</div>
|
|
27
|
+
<div className={styles.column}>
|
|
28
|
+
{section.right && (
|
|
29
|
+
<Right section={section.right[0]} Image={Image} />
|
|
30
|
+
)}
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</Container>
|
|
34
|
+
</section>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export default ThreeColumns;
|
|
@@ -5,7 +5,13 @@ import styles from "./styles.module.scss";
|
|
|
5
5
|
import { useOnScreen } from "../../../hooks/useOnScreen";
|
|
6
6
|
import { type Video } from "../../../types";
|
|
7
7
|
|
|
8
|
-
function Video({
|
|
8
|
+
function Video({
|
|
9
|
+
section,
|
|
10
|
+
defaultRatio = "56.25%",
|
|
11
|
+
}: {
|
|
12
|
+
section: Video;
|
|
13
|
+
defaultRatio?: string;
|
|
14
|
+
}) {
|
|
9
15
|
const sectionRef = useRef(null);
|
|
10
16
|
const onScreen = useOnScreen(sectionRef, "1000px");
|
|
11
17
|
const [playing, setPlaying] = useState(false);
|
|
@@ -50,7 +56,7 @@ function Video({ section }: { section: Video }) {
|
|
|
50
56
|
backgroundImage: section.poster
|
|
51
57
|
? `url(${section.poster.sourceUrl})`
|
|
52
58
|
: "none",
|
|
53
|
-
paddingTop: section.ratio ? section.ratio :
|
|
59
|
+
paddingTop: section.ratio ? section.ratio : defaultRatio,
|
|
54
60
|
}}
|
|
55
61
|
>
|
|
56
62
|
<div>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import FullWidthImage from "./FullWidthImage";
|
|
2
2
|
import CenterColumn from "./CenterColumn";
|
|
3
3
|
import TwoColumns from "./TwoColumns";
|
|
4
|
+
import ThreeColumns from "./ThreeColumns";
|
|
4
5
|
import Video from "./Video";
|
|
5
6
|
import Container from "../../Container";
|
|
6
7
|
import styles from "./styles.module.scss";
|
|
@@ -64,6 +65,15 @@ function CaseContent({
|
|
|
64
65
|
/>
|
|
65
66
|
);
|
|
66
67
|
}
|
|
68
|
+
if (section.fieldGroupName === "Case_Case_Content_Threecolumns") {
|
|
69
|
+
return (
|
|
70
|
+
<ThreeColumns
|
|
71
|
+
key={section.fieldGroupName + i}
|
|
72
|
+
section={section}
|
|
73
|
+
Image={Image}
|
|
74
|
+
/>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
67
77
|
if (section.fieldGroupName === "Case_Case_Content_Video") {
|
|
68
78
|
return (
|
|
69
79
|
<section
|
|
@@ -66,6 +66,15 @@
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
.threeColumns {
|
|
70
|
+
display: flex;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
|
|
73
|
+
@media #{$QUERY-sm} {
|
|
74
|
+
display: block;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
69
78
|
.column {
|
|
70
79
|
width: 600px;
|
|
71
80
|
max-width: calc(50% - 20px);
|
|
@@ -93,7 +102,6 @@
|
|
|
93
102
|
max-width: 100%;
|
|
94
103
|
margin: 0 auto;
|
|
95
104
|
position: relative;
|
|
96
|
-
background-color: #eee;
|
|
97
105
|
background-position: center;
|
|
98
106
|
background-repeat: no-repeat;
|
|
99
107
|
|
|
@@ -51,6 +51,22 @@ export default async function getCaseBySlug({
|
|
|
51
51
|
sourceUrl
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
+
relatedCases {
|
|
55
|
+
__typename
|
|
56
|
+
... on Case {
|
|
57
|
+
id
|
|
58
|
+
title
|
|
59
|
+
uri
|
|
60
|
+
case {
|
|
61
|
+
thumbnailImage{
|
|
62
|
+
sourceUrl
|
|
63
|
+
}
|
|
64
|
+
mainImage {
|
|
65
|
+
sourceUrl
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
54
70
|
content {
|
|
55
71
|
... on Case_Case_Content_Quote {
|
|
56
72
|
fieldGroupName
|
|
@@ -141,6 +157,75 @@ export default async function getCaseBySlug({
|
|
|
141
157
|
}
|
|
142
158
|
}
|
|
143
159
|
}
|
|
160
|
+
... on Case_Case_Content_Threecolumns {
|
|
161
|
+
fieldGroupName
|
|
162
|
+
left {
|
|
163
|
+
... on Case_Case_Content_Threecolumns_Left_Image {
|
|
164
|
+
fieldGroupName
|
|
165
|
+
image {
|
|
166
|
+
sourceUrl
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
... on Case_Case_Content_Threecolumns_Left_Text {
|
|
170
|
+
fieldGroupName
|
|
171
|
+
text
|
|
172
|
+
}
|
|
173
|
+
... on Case_Case_Content_Threecolumns_Left_Video {
|
|
174
|
+
fieldGroupName
|
|
175
|
+
autoplay
|
|
176
|
+
poster {
|
|
177
|
+
sourceUrl
|
|
178
|
+
}
|
|
179
|
+
caption
|
|
180
|
+
video
|
|
181
|
+
ratio
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
center {
|
|
185
|
+
... on Case_Case_Content_Threecolumns_Center_Image {
|
|
186
|
+
fieldGroupName
|
|
187
|
+
image {
|
|
188
|
+
sourceUrl
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
... on Case_Case_Content_Threecolumns_Center_Text {
|
|
192
|
+
fieldGroupName
|
|
193
|
+
text
|
|
194
|
+
}
|
|
195
|
+
... on Case_Case_Content_Threecolumns_Center_Video {
|
|
196
|
+
fieldGroupName
|
|
197
|
+
autoplay
|
|
198
|
+
poster {
|
|
199
|
+
sourceUrl
|
|
200
|
+
}
|
|
201
|
+
caption
|
|
202
|
+
video
|
|
203
|
+
ratio
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
right {
|
|
207
|
+
... on Case_Case_Content_Threecolumns_Right_Image {
|
|
208
|
+
fieldGroupName
|
|
209
|
+
image {
|
|
210
|
+
sourceUrl
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
... on Case_Case_Content_Threecolumns_Right_Text {
|
|
214
|
+
fieldGroupName
|
|
215
|
+
text
|
|
216
|
+
}
|
|
217
|
+
... on Case_Case_Content_Threecolumns_Right_Video {
|
|
218
|
+
fieldGroupName
|
|
219
|
+
autoplay
|
|
220
|
+
poster {
|
|
221
|
+
sourceUrl
|
|
222
|
+
}
|
|
223
|
+
caption
|
|
224
|
+
video
|
|
225
|
+
ratio
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
144
229
|
}
|
|
145
230
|
}
|
|
146
231
|
}
|
package/lib/types/index.ts
CHANGED
|
@@ -34,7 +34,10 @@ type ColumnImage = {
|
|
|
34
34
|
| "Post_Customfieldsposts_Content_Twocolumns_Left_Image"
|
|
35
35
|
| "Post_Customfieldsposts_Content_Twocolumns_Right_Image"
|
|
36
36
|
| "Case_Case_Content_Twocolumns_Left_Image"
|
|
37
|
-
| "Case_Case_Content_Twocolumns_Right_Image"
|
|
37
|
+
| "Case_Case_Content_Twocolumns_Right_Image"
|
|
38
|
+
| "Case_Case_Content_Threecolumns_Left_Image"
|
|
39
|
+
| "Case_Case_Content_Threecolumns_Center_Image"
|
|
40
|
+
| "Case_Case_Content_Threecolumns_Right_Image";
|
|
38
41
|
image: { sourceUrl: string };
|
|
39
42
|
caption?: string;
|
|
40
43
|
};
|
|
@@ -44,7 +47,10 @@ type ColumnText = {
|
|
|
44
47
|
| "Post_Customfieldsposts_Content_Twocolumns_Left_Text"
|
|
45
48
|
| "Post_Customfieldsposts_Content_Twocolumns_Right_Text"
|
|
46
49
|
| "Case_Case_Content_Twocolumns_Left_Text"
|
|
47
|
-
| "Case_Case_Content_Twocolumns_Right_Text"
|
|
50
|
+
| "Case_Case_Content_Twocolumns_Right_Text"
|
|
51
|
+
| "Case_Case_Content_Threecolumns_Left_Text"
|
|
52
|
+
| "Case_Case_Content_Threecolumns_Center_Text"
|
|
53
|
+
| "Case_Case_Content_Threecolumns_Right_Text";
|
|
48
54
|
text: string;
|
|
49
55
|
};
|
|
50
56
|
|
|
@@ -74,6 +80,13 @@ export type TwoColumns = {
|
|
|
74
80
|
right?: ColumnOption[];
|
|
75
81
|
};
|
|
76
82
|
|
|
83
|
+
export type ThreeColumns = {
|
|
84
|
+
fieldGroupName: "Case_Case_Content_Threecolumns";
|
|
85
|
+
left?: ColumnOption[];
|
|
86
|
+
center?: ColumnOption[];
|
|
87
|
+
right?: ColumnOption[];
|
|
88
|
+
};
|
|
89
|
+
|
|
77
90
|
export type Video = {
|
|
78
91
|
fieldGroupName:
|
|
79
92
|
| "Post_Customfieldsposts_Content_Video"
|
|
@@ -81,7 +94,10 @@ export type Video = {
|
|
|
81
94
|
| "Post_Customfieldsposts_Content_Twocolumns_Left_Video"
|
|
82
95
|
| "Post_Customfieldsposts_Content_Twocolumns_Right_Video"
|
|
83
96
|
| "Case_Case_Content_Twocolumns_Left_Video"
|
|
84
|
-
| "Case_Case_Content_Twocolumns_Right_Video"
|
|
97
|
+
| "Case_Case_Content_Twocolumns_Right_Video"
|
|
98
|
+
| "Case_Case_Content_Threecolumns_Left_Video"
|
|
99
|
+
| "Case_Case_Content_Threecolumns_Center_Video"
|
|
100
|
+
| "Case_Case_Content_Threecolumns_Right_Video";
|
|
85
101
|
autoplay: boolean;
|
|
86
102
|
poster: { sourceUrl: string };
|
|
87
103
|
caption: string;
|
|
@@ -124,6 +140,7 @@ export type Content = (
|
|
|
124
140
|
| FullWidthImage
|
|
125
141
|
| CenterColumn
|
|
126
142
|
| TwoColumns
|
|
143
|
+
| ThreeColumns
|
|
127
144
|
| Video
|
|
128
145
|
| Results
|
|
129
146
|
| Numbers
|
|
@@ -227,6 +244,19 @@ export type Case = {
|
|
|
227
244
|
featured?: boolean;
|
|
228
245
|
service?: string[];
|
|
229
246
|
industry?: string[];
|
|
247
|
+
relatedCases?: {
|
|
248
|
+
id: string;
|
|
249
|
+
title: string;
|
|
250
|
+
uri: string;
|
|
251
|
+
case: {
|
|
252
|
+
thumbnailImage?: {
|
|
253
|
+
sourceUrl: string;
|
|
254
|
+
};
|
|
255
|
+
mainImage?: {
|
|
256
|
+
sourceUrl: string;
|
|
257
|
+
};
|
|
258
|
+
};
|
|
259
|
+
}[];
|
|
230
260
|
thumbnailVideo?: {
|
|
231
261
|
mediaItemUrl: string;
|
|
232
262
|
};
|