Skip to content

Commit 86e986c

Browse files
michaelyu0123ericeoeur
michaelyu0123
and
ericeoeur
authored
PWA-2463: Header - Logo dimensions overlap with main content (#3659)
* PWA-2463: Header - Logo dimensions overlap with main content - Updated css and image component to set height and width as style variables to be used in css. * PWA-2463: Header - Logo dimensions overlap with main content - Updated anchor link cypress test for changes * PWA-2463: Header - Logo dimensions overlap with main content - Fixed footer component to have correct dimensions * PWA-2463: Header - Logo dimensions overlap with main content - Updated test snapshots - Ran prettier * PWA-2463: Header - Logo dimensions overlap with main content - Updated test snapshots * PWA-2463: Header - Logo dimensions overlap with main content - Ran prettier Co-authored-by: Eric Oeur <[email protected]>
1 parent 7318c37 commit 86e986c

File tree

55 files changed

+335
-11
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+335
-11
lines changed

‎packages/venia-ui/lib/RootComponents/Category/__tests__/__snapshots__/categoryContent.shimmer.spec.js.snap

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ Array [
143143
className="image placeholder"
144144
loading="eager"
145145
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
146+
style={Object {}}
146147
/>
147148
<img
148149
alt="Placeholder for gallery item image"
@@ -151,6 +152,7 @@ Array [
151152
onError={[Function]}
152153
onLoad={[Function]}
153154
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
155+
style={Object {}}
154156
/>
155157
</div>
156158
</div>
@@ -192,6 +194,7 @@ Array [
192194
className="image placeholder"
193195
loading="eager"
194196
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
197+
style={Object {}}
195198
/>
196199
<img
197200
alt="Placeholder for gallery item image"
@@ -200,6 +203,7 @@ Array [
200203
onError={[Function]}
201204
onLoad={[Function]}
202205
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
206+
style={Object {}}
203207
/>
204208
</div>
205209
</div>
@@ -241,6 +245,7 @@ Array [
241245
className="image placeholder"
242246
loading="eager"
243247
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
248+
style={Object {}}
244249
/>
245250
<img
246251
alt="Placeholder for gallery item image"
@@ -249,6 +254,7 @@ Array [
249254
onError={[Function]}
250255
onLoad={[Function]}
251256
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
257+
style={Object {}}
252258
/>
253259
</div>
254260
</div>
@@ -290,6 +296,7 @@ Array [
290296
className="image placeholder"
291297
loading="eager"
292298
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
299+
style={Object {}}
293300
/>
294301
<img
295302
alt="Placeholder for gallery item image"
@@ -298,6 +305,7 @@ Array [
298305
onError={[Function]}
299306
onLoad={[Function]}
300307
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
308+
style={Object {}}
301309
/>
302310
</div>
303311
</div>
@@ -339,6 +347,7 @@ Array [
339347
className="image placeholder"
340348
loading="eager"
341349
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
350+
style={Object {}}
342351
/>
343352
<img
344353
alt="Placeholder for gallery item image"
@@ -347,6 +356,7 @@ Array [
347356
onError={[Function]}
348357
onLoad={[Function]}
349358
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
359+
style={Object {}}
350360
/>
351361
</div>
352362
</div>
@@ -388,6 +398,7 @@ Array [
388398
className="image placeholder"
389399
loading="eager"
390400
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
401+
style={Object {}}
391402
/>
392403
<img
393404
alt="Placeholder for gallery item image"
@@ -396,6 +407,7 @@ Array [
396407
onError={[Function]}
397408
onLoad={[Function]}
398409
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
410+
style={Object {}}
399411
/>
400412
</div>
401413
</div>

‎packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/__tests__/__snapshots__/productForm.spec.js.snap

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,11 @@ exports[`renders form errors 1`] = `
9090
className="image placeholder"
9191
loading="eager"
9292
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
93+
style={
94+
Object {
95+
"--width": "240px",
96+
}
97+
}
9398
width={240}
9499
/>
95100
<img
@@ -109,6 +114,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
109114
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
110115
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
111116
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
117+
style={
118+
Object {
119+
"--height": "300px",
120+
"--width": "240px",
121+
}
122+
}
112123
width={240}
113124
/>
114125
</div>
@@ -436,6 +447,11 @@ exports[`renders form with data 1`] = `
436447
className="image placeholder"
437448
loading="eager"
438449
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
450+
style={
451+
Object {
452+
"--width": "240px",
453+
}
454+
}
439455
width={240}
440456
/>
441457
<img
@@ -455,6 +471,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
455471
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
456472
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
457473
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
474+
style={
475+
Object {
476+
"--height": "300px",
477+
"--width": "240px",
478+
}
479+
}
458480
width={240}
459481
/>
460482
</div>

‎packages/venia-ui/lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/itemsReview.spec.js.snap

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ exports[`Snapshot test 1`] = `
2121
className="undefined undefined"
2222
loading="eager"
2323
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
24+
style={
25+
Object {
26+
"--width": "100px",
27+
}
28+
}
2429
width={100}
2530
/>
2631
<img
@@ -40,6 +45,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
4045
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
4146
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
4247
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
48+
style={
49+
Object {
50+
"--height": "125px",
51+
"--width": "100px",
52+
}
53+
}
4354
width={100}
4455
/>
4556
</div>
@@ -85,6 +96,11 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
8596
className="undefined undefined"
8697
loading="eager"
8798
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
99+
style={
100+
Object {
101+
"--width": "100px",
102+
}
103+
}
88104
width={100}
89105
/>
90106
<img
@@ -104,6 +120,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
104120
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
105121
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
106122
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
123+
style={
124+
Object {
125+
"--height": "125px",
126+
"--width": "100px",
127+
}
128+
}
107129
width={100}
108130
/>
109131
</div>
@@ -149,6 +171,11 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
149171
className="undefined undefined"
150172
loading="eager"
151173
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
174+
style={
175+
Object {
176+
"--width": "100px",
177+
}
178+
}
152179
width={100}
153180
/>
154181
<img
@@ -168,6 +195,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
168195
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
169196
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
170197
https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
198+
style={
199+
Object {
200+
"--height": "125px",
201+
"--width": "100px",
202+
}
203+
}
171204
width={100}
172205
/>
173206
</div>

‎packages/venia-ui/lib/components/Footer/__tests__/__snapshots__/footer.spec.js.snap

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,11 +205,17 @@ exports[`footer renders copyright 1`] = `
205205
foo
206206
</p>
207207
<a
208-
className="logo"
208+
className="logoContainer"
209209
href="/"
210210
onClick={[Function]}
211211
>
212-
<i />
212+
<i
213+
classes={
214+
Object {
215+
"logo": "logo",
216+
}
217+
}
218+
/>
213219
</a>
214220
</div>
215221
</footer>

‎packages/venia-ui/lib/components/Footer/footer.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Newsletter from '../Newsletter';
1010
import { useStyle } from '../../classify';
1111
import defaultClasses from './footer.module.css';
1212
import { DEFAULT_LINKS, LOREM_IPSUM } from './sampleData';
13+
import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
1314

1415
const Footer = props => {
1516
const { links } = props;
@@ -105,8 +106,8 @@ const Footer = props => {
105106
</li>
106107
</ul>
107108
<p className={classes.copyright}>{copyrightText || null}</p>
108-
<Link className={classes.logo} to="/">
109-
<Logo />
109+
<Link to={resourceUrl('/')} className={classes.logoContainer}>
110+
<Logo classes={{ logo: classes.logo }} />
110111
</Link>
111112
</div>
112113
</footer>

‎packages/venia-ui/lib/components/Footer/footer.module.css

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,12 +129,17 @@
129129
text-align: center;
130130
}
131131

132-
.logo {
132+
.logoContainer {
133133
grid-area: a;
134134
}
135135

136+
.logo {
137+
height: var(--height);
138+
width: var(--width);
139+
}
140+
136141
@media (max-width: 960px) {
137-
.logo {
142+
.logoContainer {
138143
margin-top: 2.5rem;
139144
}
140145
}

‎packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ exports[`renders if \`items\` is an array of objects 1`] = `
2323
height={375}
2424
loading="eager"
2525
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
26+
style={
27+
Object {
28+
"--height": "375px",
29+
"--width": "100px",
30+
}
31+
}
2632
width={100}
2733
/>
2834
<img
@@ -42,6 +48,11 @@ exports[`renders if \`items\` is an array of objects 1`] = `
4248
/test/product/1.png 1280w,
4349
/test/product/1.png 1600w,
4450
/test/product/1.png 2560w"
51+
style={
52+
Object {
53+
"--width": "100px",
54+
}
55+
}
4556
width={100}
4657
/>
4758
</div>
@@ -108,6 +119,12 @@ exports[`renders if \`items\` is an array of objects 1`] = `
108119
height={375}
109120
loading="eager"
110121
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
122+
style={
123+
Object {
124+
"--height": "375px",
125+
"--width": "100px",
126+
}
127+
}
111128
width={100}
112129
/>
113130
<img
@@ -127,6 +144,11 @@ exports[`renders if \`items\` is an array of objects 1`] = `
127144
/test/product/2.png 1280w,
128145
/test/product/2.png 1600w,
129146
/test/product/2.png 2560w"
147+
style={
148+
Object {
149+
"--width": "100px",
150+
}
151+
}
130152
width={100}
131153
/>
132154
</div>

‎packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ exports[`renders a placeholder item while awaiting item 1`] = `
1818
className="image placeholder_layoutOnly"
1919
loading="eager"
2020
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
21+
style={
22+
Object {
23+
"--width": "100px",
24+
}
25+
}
2126
width={100}
2227
/>
2328
<img
@@ -27,6 +32,7 @@ exports[`renders a placeholder item while awaiting item 1`] = `
2732
onError={[MockFunction]}
2833
onLoad={[MockFunction]}
2934
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
35+
style={Object {}}
3036
/>
3137
</div>
3238
</div>
@@ -73,6 +79,12 @@ exports[`renders correctly with valid item data 1`] = `
7379
height={375}
7480
loading="eager"
7581
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
82+
style={
83+
Object {
84+
"--height": "375px",
85+
"--width": "100px",
86+
}
87+
}
7688
width={100}
7789
/>
7890
<img
@@ -92,6 +104,11 @@ exports[`renders correctly with valid item data 1`] = `
92104
/media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=1280&height=1600&fit=cover 1280w,
93105
/media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=1600&height=2000&fit=cover 1600w,
94106
/media/catalog/product/foo/bar/pic.png?auto=webp&format=png&width=2560&height=3200&fit=cover 2560w"
107+
style={
108+
Object {
109+
"--width": "100px",
110+
}
111+
}
95112
width={100}
96113
/>
97114
</div>

‎packages/venia-ui/lib/components/Header/header.module.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@
7575
}
7676

7777
.logo {
78-
composes: h-full from global;
78+
height: var(--height);
79+
width: var(--width);
7980
}
8081

8182
.primaryActions {
@@ -90,7 +91,6 @@
9091
.logoContainer {
9192
composes: col-start-2 from global;
9293
composes: justify-self-center from global;
93-
composes: my-4 from global;
9494
}
9595

9696
/* Large screen styles */

0 commit comments

Comments
 (0)