foundry-component-library 0.1.11 → 0.1.12

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.
Files changed (15) hide show
  1. package/lib/components/Capabilities/Item.tsx +7 -1
  2. package/lib/components/CaseStudyTeaser/index.tsx +5 -1
  3. package/lib/components/HubsAccordion/Hub.tsx +7 -1
  4. package/lib/components/case/Other/index.tsx +33 -25
  5. package/lib/components/cases/Items/More.tsx +5 -3
  6. package/lib/components/cases/Items/index.tsx +13 -11
  7. package/lib/components/single/Other/index.tsx +29 -21
  8. package/lib/queries/getCases.ts +3 -0
  9. package/lib/queries/getCasesPage.ts +3 -0
  10. package/lib/queries/getHomePage.ts +6 -0
  11. package/lib/queries/getHubBySlug.ts +6 -0
  12. package/lib/queries/getHubs.ts +6 -0
  13. package/lib/queries/getHubsPage.ts +3 -0
  14. package/lib/types/index.ts +3 -0
  15. package/package.json +1 -1
package/lib/components/Capabilities/Item.tsx CHANGED
@@ -104,6 +104,8 @@ const Item = ({
104
104
  >
105
105
  {Link &&
106
106
  cases.map((item) => {
107
+ const { thumbnailImage, mainImage } = item.case;
108
+
107
109
  return (
108
110
  <Link
109
111
  href={item.uri}
@@ -115,7 +117,11 @@ const Item = ({
115
117
  <div className={styles.caseImage}>
116
118
  {Image && (
117
119
  <Image
118
- src={item.case?.mainImage?.sourceUrl || ""}
120
+ src={
121
+ thumbnailImage?.sourceUrl ||
122
+ mainImage?.sourceUrl ||
123
+ ""
124
+ }
119
125
  alt={item.title}
120
126
  fill
121
127
  />
package/lib/components/CaseStudyTeaser/index.tsx CHANGED
@@ -45,11 +45,15 @@ const CaseStudyTeaser = ({
45
45
  }}
46
46
  >
47
47
  {cases.map((el) => {
48
+ const { thumbnailImage, mainImage } = el.case;
49
+
48
50
  return (
49
51
  <div key={el.id} className={styles.case}>
50
52
  <Image
51
53
  className={styles.image}
52
- src={el.case?.mainImage?.sourceUrl || ""}
54
+ src={
55
+ thumbnailImage?.sourceUrl || mainImage?.sourceUrl || ""
56
+ }
53
57
  alt={el.title}
54
58
  fill
55
59
  />
package/lib/components/HubsAccordion/Hub.tsx CHANGED
@@ -88,6 +88,8 @@ const Hub = ({
88
88
  }}
89
89
  >
90
90
  {customFields.relatedWork.map((item) => {
91
+ const { thumbnailImage, mainImage } = item.case;
92
+
91
93
  return (
92
94
  <Link
93
95
  href={item.uri}
@@ -98,7 +100,11 @@ const Hub = ({
98
100
  >
99
101
  <div className={styles.caseImage}>
100
102
  <Image
101
- src={item.case?.mainImage?.sourceUrl || ""}
103
+ src={
104
+ thumbnailImage?.sourceUrl ||
105
+ mainImage?.sourceUrl ||
106
+ ""
107
+ }
102
108
  alt={item.title}
103
109
  fill
104
110
  />
package/lib/components/case/Other/index.tsx CHANGED
@@ -40,33 +40,41 @@ function Other({
40
40
  onMouseLeave={handleMouseUp}
41
41
  style={dragStyle as React.CSSProperties}
42
42
  >
43
- {cases.map((item) => (
44
- <div key={item.id} className={styles.case}>
45
- <Link href={item.uri}>
46
- <div className={styles.image}>
47
- {item.case.mainImage && (
48
- <Image
49
- className={styles.image}
50
- src={item.case.mainImage.sourceUrl}
51
- alt={item.title || ""}
52
- width={308}
53
- height={220}
54
- />
55
- )}
56
- </div>
57
- <div className={styles.texts}>
58
- <div>
59
- <div className={styles.title}>{item.title}</div>
60
- {item.case.excerpt && <div>{item.case.excerpt}</div>}
43
+ {cases.map((item) => {
44
+ const { thumbnailImage, mainImage } = item.case;
45
+
46
+ return (
47
+ <div key={item.id} className={styles.case}>
48
+ <Link href={item.uri}>
49
+ <div className={styles.image}>
50
+ {item.case.mainImage && (
51
+ <Image
52
+ className={styles.image}
53
+ src={
54
+ thumbnailImage?.sourceUrl ||
55
+ mainImage?.sourceUrl ||
56
+ ""
57
+ }
58
+ alt={item.title || ""}
59
+ width={308}
60
+ height={220}
61
+ />
62
+ )}
61
63
  </div>
62
- <div className={styles.more}>
63
- {translate("See More")}
64
- <Arrow />
64
+ <div className={styles.texts}>
65
+ <div>
66
+ <div className={styles.title}>{item.title}</div>
67
+ {item.case.excerpt && <div>{item.case.excerpt}</div>}
68
+ </div>
69
+ <div className={styles.more}>
70
+ {translate("See More")}
71
+ <Arrow />
72
+ </div>
65
73
  </div>
66
- </div>
67
- </Link>
68
- </div>
69
- ))}
74
+ </Link>
75
+ </div>
76
+ );
77
+ })}
70
78
  </div>
71
79
  <div className={styles.buttonWrapper}>
72
80
  <Link className={styles.button} href="/cases">
package/lib/components/cases/Items/More.tsx CHANGED
@@ -56,7 +56,7 @@ const More = ({
56
56
  <>
57
57
  {cases.map((item) => {
58
58
  if (!item.case) return null;
59
- const { thumbnailVideo, mainImage } = item.case;
59
+ const { thumbnailVideo, thumbnailImage, mainImage } = item.case;
60
60
 
61
61
  return (
62
62
  <div key={item.id} className={styles.case}>
@@ -64,11 +64,13 @@ const More = ({
64
64
  {thumbnailVideo && (
65
65
  <Video url={thumbnailVideo.mediaItemUrl} Image={Image} />
66
66
  )}
67
- {!thumbnailVideo && mainImage && mainImage.sourceUrl && (
67
+ {!thumbnailVideo && (mainImage || thumbnailImage) && (
68
68
  <div className={styles.imageWrapper}>
69
69
  <Image
70
70
  className={styles.image}
71
- src={mainImage.sourceUrl}
71
+ src={
72
+ thumbnailImage?.sourceUrl || mainImage?.sourceUrl || ""
73
+ }
72
74
  alt={item.title || ""}
73
75
  width={720}
74
76
  height={490}
package/lib/components/cases/Items/index.tsx CHANGED
@@ -79,7 +79,7 @@ function Cases({
79
79
  <div className={styles.wrapper}>
80
80
  {cases.map((item) => {
81
81
  if (!item.case) return null;
82
- const { thumbnailVideo, mainImage } = item.case;
82
+ const { thumbnailVideo, mainImage, thumbnailImage } = item.case;
83
83
 
84
84
  return (
85
85
  <div key={item.id} className={styles.case}>
@@ -91,17 +91,19 @@ function Cases({
91
91
  Image={Image}
92
92
  />
93
93
  )}
94
- {!thumbnailVideo && mainImage && (
94
+ {!thumbnailVideo && (thumbnailImage || mainImage) && (
95
95
  <div className={styles.imageWrapper}>
96
- {mainImage.sourceUrl && (
97
- <Image
98
- className={styles.image}
99
- src={mainImage.sourceUrl}
100
- alt={item.title || ""}
101
- width={720}
102
- height={490}
103
- />
104
- )}
96
+ <Image
97
+ className={styles.image}
98
+ src={
99
+ thumbnailImage?.sourceUrl ||
100
+ mainImage?.sourceUrl ||
101
+ ""
102
+ }
103
+ alt={item.title || ""}
104
+ width={720}
105
+ height={490}
106
+ />
105
107
  </div>
106
108
  )}
107
109
  <div className={styles.texts}>
package/lib/components/single/Other/index.tsx CHANGED
@@ -25,27 +25,35 @@ function Other({
25
25
  </div>
26
26
  </div>
27
27
  <div className={styles.cases}>
28
- {cases.map((item) => (
29
- <div key={item.id} className={styles.case}>
30
- <Link href={item.uri}>
31
- <div className={styles.image}>
32
- {item.case.mainImage && (
33
- <Image
34
- className={styles.image}
35
- src={item.case.mainImage.sourceUrl}
36
- alt={item.title || ""}
37
- width={400}
38
- height={490}
39
- />
40
- )}
41
- </div>
42
- <div className={styles.texts}>
43
- <div>{item.title}</div>
44
- <Arrow />
45
- </div>
46
- </Link>
47
- </div>
48
- ))}
28
+ {cases.map((item) => {
29
+ const { thumbnailImage, mainImage } = item.case;
30
+
31
+ return (
32
+ <div key={item.id} className={styles.case}>
33
+ <Link href={item.uri}>
34
+ <div className={styles.image}>
35
+ {item.case.mainImage && (
36
+ <Image
37
+ className={styles.image}
38
+ src={
39
+ thumbnailImage?.sourceUrl ||
40
+ mainImage?.sourceUrl ||
41
+ ""
42
+ }
43
+ alt={item.title || ""}
44
+ width={400}
45
+ height={490}
46
+ />
47
+ )}
48
+ </div>
49
+ <div className={styles.texts}>
50
+ <div>{item.title}</div>
51
+ <Arrow />
52
+ </div>
53
+ </Link>
54
+ </div>
55
+ );
56
+ })}
49
57
  </div>
50
58
  </div>
51
59
  </Container>
package/lib/queries/getCases.ts CHANGED
@@ -70,6 +70,9 @@ export default async function getCases({
70
70
  thumbnailVideo{
71
71
  mediaItemUrl
72
72
  }
73
+ thumbnailImage {
74
+ sourceUrl
75
+ }
73
76
  mainImage {
74
77
  sourceUrl
75
78
  }
package/lib/queries/getCasesPage.ts CHANGED
@@ -137,6 +137,9 @@ export default async function getCasesPage({
137
137
  thumbnailVideo{
138
138
  mediaItemUrl
139
139
  }
140
+ thumbnailImage {
141
+ sourceUrl
142
+ }
140
143
  mainImage {
141
144
  sourceUrl
142
145
  }
package/lib/queries/getHomePage.ts CHANGED
@@ -29,6 +29,9 @@ type HomePage = {
29
29
  title: string;
30
30
  case: {
31
31
  caption: string;
32
+ thumbnailImage: {
33
+ sourceUrl: string;
34
+ };
32
35
  mainImage: {
33
36
  sourceUrl: string;
34
37
  };
@@ -146,6 +149,9 @@ export default async function getHomePage({
146
149
  title
147
150
  case {
148
151
  caption
152
+ thumbnailImage {
153
+ sourceUrl
154
+ }
149
155
  mainImage {
150
156
  sourceUrl
151
157
  }
package/lib/queries/getHubBySlug.ts CHANGED
@@ -50,6 +50,9 @@ export default async function getCaseBySlug({
50
50
  title
51
51
  uri
52
52
  case {
53
+ thumbnailImage {
54
+ sourceUrl
55
+ }
53
56
  mainImage {
54
57
  sourceUrl
55
58
  }
@@ -64,6 +67,9 @@ export default async function getCaseBySlug({
64
67
  title
65
68
  uri
66
69
  case {
70
+ thumbnailImage {
71
+ sourceUrl
72
+ }
67
73
  mainImage {
68
74
  sourceUrl
69
75
  }
package/lib/queries/getHubs.ts CHANGED
@@ -56,6 +56,9 @@ export default async function getCases(): Promise<{
56
56
  title
57
57
  uri
58
58
  case {
59
+ thumbnailImage {
60
+ sourceUrl
61
+ }
59
62
  mainImage {
60
63
  sourceUrl
61
64
  }
@@ -70,6 +73,9 @@ export default async function getCases(): Promise<{
70
73
  title
71
74
  uri
72
75
  case {
76
+ thumbnailImage {
77
+ sourceUrl
78
+ }
73
79
  mainImage {
74
80
  sourceUrl
75
81
  }
package/lib/queries/getHubsPage.ts CHANGED
@@ -145,6 +145,9 @@ export default async function getCasesPage(
145
145
  title
146
146
  uri
147
147
  case {
148
+ thumbnailImage {
149
+ sourceUrl
150
+ }
148
151
  mainImage {
149
152
  sourceUrl
150
153
  }
package/lib/types/index.ts CHANGED
@@ -230,6 +230,9 @@ export type Case = {
230
230
  thumbnailVideo?: {
231
231
  mediaItemUrl: string;
232
232
  };
233
+ thumbnailImage?: {
234
+ sourceUrl: string;
235
+ };
233
236
  mainImage?: {
234
237
  sourceUrl: string;
235
238
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "foundry-component-library",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",