diff --git a/src/Components/Publishing/EditorialFeature/Components/Vanguard2019/__tests__/__snapshots__/index.test.tsx.snap b/src/Components/Publishing/EditorialFeature/Components/Vanguard2019/__tests__/__snapshots__/index.test.tsx.snap index 104a218257..d08270dca5 100644 --- a/src/Components/Publishing/EditorialFeature/Components/Vanguard2019/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/Components/Publishing/EditorialFeature/Components/Vanguard2019/__tests__/__snapshots__/index.test.tsx.snap @@ -1021,15 +1021,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Victoria Sin by Bernice Mulenga. Courtesy of the artist.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Victoria Sin by Bernice Mulenga. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -1111,16 +1117,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Monira Al Qadiri by Raisa Hagiu. Courtesy of the artist.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Monira Al Qadiri by Raisa Hagiu. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -1543,16 +1557,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Diedrick Brackens by Alex Hodor-Lee. Courtesy of VARIOUS SMALL FIRES, Los Angeles.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Diedrick Brackens by Alex Hodor-Lee. Courtesy of VARIOUS SMALL FIRES, Los Angeles.

", + } } - } - /> + /> +
@@ -1975,16 +1997,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Dineo Seshee Bopape by Maksym Bilousov. Courtesy of PinchukArtCentre.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Dineo Seshee Bopape by Maksym Bilousov. Courtesy of PinchukArtCentre.

", + } } - } - /> + /> +
@@ -2406,15 +2436,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Installation view of Solo Exhibition: Main Prize winner of the Future Generation Art Prize 2017, PinchukArtCentre Kiev, Ukraine. Photo by Maksym Bilousov. Courtesy of PinchukArtCentre.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Installation view of Solo Exhibition: Main Prize winner of the Future Generation Art Prize 2017, PinchukArtCentre Kiev, Ukraine. Photo by Maksym Bilousov. Courtesy of PinchukArtCentre.

", + } } - } - /> + /> +
@@ -2457,7 +2493,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Martine Gutierrez, Self Portrait. Courtesy of the artist.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Martine Gutierrez, Self Portrait. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -2810,16 +2851,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Genesis Belanger in her New York studio by Alex John Beck for Artsy.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Genesis Belanger in her New York studio by Alex John Beck for Artsy.

", + } } - } - /> + /> +
@@ -3241,15 +3290,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Genesis Belanger, Full Embrace, 2018. Photo by Pauline Shapiro. Courtesy of the artist and Perrotin.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Genesis Belanger, Full Embrace, 2018. Photo by Pauline Shapiro. Courtesy of the artist and Perrotin.

", + } } - } - /> + /> +
@@ -3292,7 +3347,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Tao Hui by Mark Poucher. Courtesy of Esther Schipper, Berlin.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Tao Hui by Mark Poucher. Courtesy of Esther Schipper, Berlin.

", + } } - } - /> + /> +
@@ -3645,16 +3705,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Jordan Nassar by Alexander J. Rotondo. Courtesy of the artist and Anat Egbi, Los Angeles.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Jordan Nassar by Alexander J. Rotondo. Courtesy of the artist and Anat Egbi, Los Angeles.

", + } } - } - /> + /> +
@@ -4077,16 +4145,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Geng Xue by Shen Siyuan. Courtesy of Eli Klein Gallery.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Geng Xue by Shen Siyuan. Courtesy of Eli Klein Gallery.

", + } } - } - /> + /> +
@@ -4509,16 +4585,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Meriem Bennani by Sunny Shokrae. Courtesy of Clearing.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Meriem Bennani by Sunny Shokrae. Courtesy of Clearing.

", + } } - } - /> + /> +
@@ -4940,15 +5024,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Installation view of Meriem Bennani, “Party on the CAPS,” at the Centre d’Art Contemporain, 2018. Courtesy of the artist and Clearing.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Installation view of Meriem Bennani, “Party on the CAPS,” at the Centre d’Art Contemporain, 2018. Courtesy of the artist and Clearing.

", + } } - } - /> + /> +
@@ -4991,7 +5081,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Manuel Solano by Claudia Lozano. Courtesy of the artist and Peres Projects, Berlin.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Manuel Solano by Claudia Lozano. Courtesy of the artist and Peres Projects, Berlin.

", + } } - } - /> + /> +
@@ -5343,15 +5438,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Manuel Solano, The hottie from Starbucks, 2019. Photo by Matthias Kolb. Courtesy of Peres Projects, Berlin.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Manuel Solano, The hottie from Starbucks, 2019. Photo by Matthias Kolb. Courtesy of Peres Projects, Berlin.

", + } } - } - /> + /> +
@@ -5394,7 +5495,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
Lauren Halsey by Rafael Hernandez. Courtesy of David Kordansky Gallery, Los Angeles.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Lauren Halsey by Rafael Hernandez. Courtesy of David Kordansky Gallery, Los Angeles.

", + } } - } - /> + /> +
@@ -5747,16 +5853,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Derek Fordjour in his New York studio by Alex John Beck for Artsy.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Derek Fordjour in his New York studio by Alex John Beck for Artsy.

", + } } - } - /> + /> +
@@ -6179,16 +6293,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Alia Farid by Djinane AlSuwayeh. Courtesy of the artist.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Alia Farid by Djinane AlSuwayeh. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -6610,15 +6732,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Alia Farid, Vault, 2019, at the PinchukArtCentre in Kiev, Ukraine. Photo by Maksym Bilousov. Courtesy of the PinchukArtCentre.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Alia Farid, Vault, 2019, at the PinchukArtCentre in Kiev, Ukraine. Photo by Maksym Bilousov. Courtesy of the PinchukArtCentre.

", + } } - } - /> + /> +
@@ -6661,7 +6789,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Gala Porras-Kim by Weston Wells. Courtesy of the artist and Weston Wells.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Gala Porras-Kim by Weston Wells. Courtesy of the artist and Weston Wells.

", + } } - } - /> + /> +
@@ -7013,15 +7146,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Gala Porras-Kim, 11 Mesoamerican Multiple Perspectives, 2019. Photo by Ruben Diaz. Courtesy of the artist; Commonwealth and Council, Los Angeles; and LABOR, Mexico City.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Gala Porras-Kim, 11 Mesoamerican Multiple Perspectives, 2019. Photo by Ruben Diaz. Courtesy of the artist; Commonwealth and Council, Los Angeles; and LABOR, Mexico City.

", + } } - } - /> + /> +
@@ -7064,7 +7203,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
Jonathan Lyndon Chase by Coke O’Neal. Courtesy of Kohn Gallery, Los Angeles.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Jonathan Lyndon Chase by Coke O’Neal. Courtesy of Kohn Gallery, Los Angeles.

", + } } - } - /> + /> +
@@ -7417,16 +7561,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Elle Pérez by Bryson Rand. Courtesy of the artist and 47 Canal, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Elle Pérez by Bryson Rand. Courtesy of the artist and 47 Canal, New York.

", + } } - } - /> + /> +
@@ -7848,15 +8000,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Elle Pérez, Jóse Gabriel, 2019. Courtesy of the artist and 47 Canal, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Elle Pérez, Jóse Gabriel, 2019. Courtesy of the artist and 47 Canal, New York.

", + } } - } - /> + /> +
@@ -7899,7 +8057,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Suki Seokyeong Kang by Kim Young Hoon. Courtesy of Kukje Gallery.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Suki Seokyeong Kang by Kim Young Hoon. Courtesy of Kukje Gallery.

", + } } - } - /> + /> +
@@ -8252,16 +8415,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Evelyn Taocheng Wang. © Evelyn Taocheng Wang. Courtesy of the artist; Carlos/Ishikawa, London; and Galerie Fons Welters, Amsterdam.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Evelyn Taocheng Wang. © Evelyn Taocheng Wang. Courtesy of the artist; Carlos/Ishikawa, London; and Galerie Fons Welters, Amsterdam.

", + } } - } - /> + /> +
@@ -8683,15 +8854,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Evelyn Taocheng Wang, Winter, 2017. © Evelyn Taocheng Wang. Courtesy of the artist; Carlos/Ishikawa, London; and Galerie Fons Welters, Amsterdam.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Evelyn Taocheng Wang, Winter, 2017. © Evelyn Taocheng Wang. Courtesy of the artist; Carlos/Ishikawa, London; and Galerie Fons Welters, Amsterdam.

", + } } - } - /> + /> +
@@ -8734,7 +8911,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Jill Mulleady. Courtesy of the artist.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Jill Mulleady. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -9086,15 +9268,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Jill Mulleady, Riot on the Holodeck, 2018. Courtesy of the artist and Freedman Fitzpatrick Los Angeles/Paris.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Jill Mulleady, Riot on the Holodeck, 2018. Courtesy of the artist and Freedman Fitzpatrick Los Angeles/Paris.

", + } } - } - /> + /> +
@@ -9137,7 +9325,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
@@ -9575,15 +9762,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Michael Armitage by George Darrell. Courtesy of White Cube.

", - } - } - /> + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Michael Armitage by George Darrell. Courtesy of White Cube.

", + } + } + /> +
@@ -9665,16 +9858,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Ebony G. Patterson by Monique “Mogi” Gilpin. Courtesy of the artist and Monique Meloche Gallery, Chicago.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Ebony G. Patterson by Monique “Mogi” Gilpin. Courtesy of the artist and Monique Meloche Gallery, Chicago.

", + } } - } - /> + /> +
@@ -10097,16 +10298,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Lawrence Abu Hamdan by Miro Kuzmanovic. Courtesy of Maureen Paley, London.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Lawrence Abu Hamdan by Miro Kuzmanovic. Courtesy of Maureen Paley, London.

", + } } - } - /> + /> +
@@ -10528,15 +10737,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Lawrence Abu Hamdan, Walled Unwalled, 2018. © Lawrence Abu Hamdan. Courtesy of Maureen Paley, London.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Lawrence Abu Hamdan, Walled Unwalled, 2018. © Lawrence Abu Hamdan. Courtesy of Maureen Paley, London.

", + } } - } - /> + /> +
@@ -10579,7 +10794,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Korakrit Arunanondchai in his New York studio by Lelanie Foster for Artsy.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Korakrit Arunanondchai in his New York studio by Lelanie Foster for Artsy.

", + } } - } - /> + /> +
@@ -10931,15 +11151,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Korakrit Arunanondchai, history painting (if they cannot see the happiness, at least they'll see the light), 2017. Image © Korakrit Arunanondchai 2019. Courtesy of the artist; Carlos / Ishikawa, London; Clearing, New York; and Bangkok City City, Bangkok.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Korakrit Arunanondchai, history painting (if they cannot see the happiness, at least they'll see the light), 2017. Image © Korakrit Arunanondchai 2019. Courtesy of the artist; Carlos / Ishikawa, London; Clearing, New York; and Bangkok City City, Bangkok.

", + } } - } - /> + /> +
@@ -10982,7 +11208,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
Bárbara Wagner & Benjamin de Burca by Chico Barros. Courtesy of Fortes D’Aloia & Gabriel.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Bárbara Wagner & Benjamin de Burca by Chico Barros. Courtesy of Fortes D’Aloia & Gabriel.

", + } } - } - /> + /> +
@@ -11335,16 +11566,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Charlotte Prodger by Emile Holba. Courtesy of Hollybush Gardens, London.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Charlotte Prodger by Emile Holba. Courtesy of Hollybush Gardens, London.

", + } } - } - /> + /> +
@@ -11766,15 +12005,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Installation view of Charlotte Prodger, SaF05, at the Venice Biennale, 2019. Photo by Cristiano Corte. Courtesy of the artist; Koppe Astner, Glasgow; and Hollybush Gardens, London.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Installation view of Charlotte Prodger, SaF05, at the Venice Biennale, 2019. Photo by Cristiano Corte. Courtesy of the artist; Koppe Astner, Glasgow; and Hollybush Gardens, London.

", + } } - } - /> + /> +
@@ -11817,7 +12062,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Jeffrey Gibson in his Hudson, New York studio by Alex John Beck for Artsy.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Jeffrey Gibson in his Hudson, New York studio by Alex John Beck for Artsy.

", + } } - } - /> + /> +
@@ -12170,16 +12420,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Hao Liang. Courtesy of Gagosian.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Hao Liang. Courtesy of Gagosian.

", + } } - } - /> + /> +
@@ -12601,15 +12859,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Detail of Hao Liang, Day and Night (panel II) , 2017-2018. Courtesy of Gagosian.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Detail of Hao Liang, Day and Night (panel II) , 2017-2018. Courtesy of Gagosian.

", + } } - } - /> + /> +
@@ -12652,7 +12916,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Jacolby Satterwhite by Benjamin Erik Ackermann for PIN-UP, 2017. Courtesy of Mitchell-Innes & Nash.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Jacolby Satterwhite by Benjamin Erik Ackermann for PIN-UP, 2017. Courtesy of Mitchell-Innes & Nash.

", + } } - } - /> + /> +
@@ -13005,16 +13274,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Melike Kara by Diana Pfammatter. Courtesy of Peres Projects, Berlin.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Melike Kara by Diana Pfammatter. Courtesy of Peres Projects, Berlin.

", + } } - } - /> + /> +
@@ -13436,15 +13713,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Melike Kara, secret whispers, 2018. Photo by Alessandro Wang. Courtesy of the artist and Peres Projects, Berlin.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Melike Kara, secret whispers, 2018. Photo by Alessandro Wang. Courtesy of the artist and Peres Projects, Berlin.

", + } } - } - /> + /> +
@@ -13487,7 +13770,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Cui Jie. Courtesy of Pilar Corrias Gallery.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Cui Jie. Courtesy of Pilar Corrias Gallery.

", + } } - } - /> + /> +
@@ -13840,16 +14128,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Firelei Báez by Lia Clay. Courtesy of the artist and James Cohan, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Firelei Báez by Lia Clay. Courtesy of the artist and James Cohan, New York.

", + } } - } - /> + /> +
@@ -14272,16 +14568,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Forensic Architecture team. Courtesy of Forensic Architecture.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Forensic Architecture team. Courtesy of Forensic Architecture.

", + } } - } - /> + /> +
@@ -14704,16 +15008,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Tschabalala Self in her studio in New Haven, Connecticut. Photo by Julie Bidwell. Courtesy of Pilar Corrias.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Tschabalala Self in her studio in New Haven, Connecticut. Photo by Julie Bidwell. Courtesy of Pilar Corrias.

", + } } - } - /> + /> +
@@ -15135,15 +15447,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Tschabalala Self, Loosie in the Park , 2019. Courtesy of Pilar Corrias Gallery.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Tschabalala Self, Loosie in the Park , 2019. Courtesy of Pilar Corrias Gallery.

", + } } - } - /> + /> +
@@ -15186,7 +15504,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Harold Ancart. © Harold Ancart. Courtesy of the artist and David Zwirner.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Harold Ancart. © Harold Ancart. Courtesy of the artist and David Zwirner.

", + } } - } - /> + /> +
@@ -15538,15 +15861,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Harold Ancart, Untitled, 2017. © Harold Ancart / SABAM, Brussels. Photo by JSP Art Photography. Courtesy of the artist and David Zwirner.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Harold Ancart, Untitled, 2017. © Harold Ancart / SABAM, Brussels. Photo by JSP Art Photography. Courtesy of the artist and David Zwirner.

", + } } - } - /> + /> +
@@ -15589,7 +15918,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
@@ -16027,15 +16355,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Frank Bowling by Alastair Levy, 2017. © Alastair Levy.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Frank Bowling by Alastair Levy, 2017. © Alastair Levy.

", + } } - } - /> + /> +
@@ -16116,15 +16450,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Frank Bowling, Two Blues, 2018. © Frank Bowling/Artists Rights Society (ARS), New York; DACS, London. Courtesy of Alexander Gray Associates, New York; Hales Gallery, London; and Marc Selwyn Fine Art, Los Angeles.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Frank Bowling, Two Blues, 2018. © Frank Bowling/Artists Rights Society (ARS), New York; DACS, London. Courtesy of Alexander Gray Associates, New York; Hales Gallery, London; and Marc Selwyn Fine Art, Los Angeles.

", + } } - } - /> + /> +
@@ -16167,7 +16507,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
Zilia Sánchez with Lunar blanco, 1964, at Galerie Lelong & Co., New York, 2014. © Zilia Sánchez. Courtesy of Galerie Lelong & Co., New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Zilia Sánchez with Lunar blanco, 1964, at Galerie Lelong & Co., New York, 2014. © Zilia Sánchez. Courtesy of Galerie Lelong & Co., New York.

", + } } - } - /> + /> +
@@ -16520,16 +16865,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Fred Eversley by Elon Schoenholz. Courtesy of David Kordansky Gallery, Los Angeles.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Fred Eversley by Elon Schoenholz. Courtesy of David Kordansky Gallery, Los Angeles.

", + } } - } - /> + /> +
@@ -16952,16 +17305,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Tishan Hsu. Courtesy of the artist and Empty Gallery, Hong Kong.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Tishan Hsu. Courtesy of the artist and Empty Gallery, Hong Kong.

", + } } - } - /> + /> +
@@ -17383,15 +17744,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Tishan Hsu, Boating Scene 1.1.3, 2019. Courtesy of the artist and Empty Gallery, Hong Kong.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Tishan Hsu, Boating Scene 1.1.3, 2019. Courtesy of the artist and Empty Gallery, Hong Kong.

", + } } - } - /> + /> +
@@ -17434,7 +17801,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Howardena Pindell with her work at Garth Greenan Gallery by Alex John Beck for Artsy.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Howardena Pindell with her work at Garth Greenan Gallery by Alex John Beck for Artsy.

", + } } - } - /> + /> +
@@ -17786,15 +18158,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Howardena Pindell, Carnival: Bahia, Brazil, 2017. Courtesy of the artist and Garth Greenan Gallery, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Howardena Pindell, Carnival: Bahia, Brazil, 2017. Courtesy of the artist and Garth Greenan Gallery, New York.

", + } } - } - /> + /> +
@@ -17837,7 +18215,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
Diane Simpson by Isabel Asha Penzlien. Courtesy of the artist and JTT, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Diane Simpson by Isabel Asha Penzlien. Courtesy of the artist and JTT, New York.

", + } } - } - /> + /> +
@@ -18189,15 +18572,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Diane Simpson, Window 4, Window Dressing: Apron VI, 2003/2007. Courtesy of the artist; Corbett vs. Dempsey, Chicago; and JTT, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Diane Simpson, Window 4, Window Dressing: Apron VI, 2003/2007. Courtesy of the artist; Corbett vs. Dempsey, Chicago; and JTT, New York.

", + } } - } - /> + /> +
@@ -18240,7 +18629,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
Lorraine O’Grady by Ross Collab. Courtesy of Alexander Gray Associates, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Lorraine O’Grady by Ross Collab. Courtesy of Alexander Gray Associates, New York.

", + } } - } - /> + /> +
@@ -18592,15 +18986,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Lorraine O’Grady, Rivers, First Draft: The Debauchees ignore the Woman in Red, 1982/2015. Courtesy of Alexander Gray Associates, New York. © Lorraine O’Grady/Artists Rights Society (ARS), New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Lorraine O’Grady, Rivers, First Draft: The Debauchees ignore the Woman in Red, 1982/2015. Courtesy of Alexander Gray Associates, New York. © Lorraine O’Grady/Artists Rights Society (ARS), New York.

", + } } - } - /> + /> +
@@ -18643,7 +19043,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
Teresa Burga by Sebastian Montalvo Gray. Courtesy of 80m2 Livia Benavides, Lima.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Teresa Burga by Sebastian Montalvo Gray. Courtesy of 80m2 Livia Benavides, Lima.

", + } } - } - /> + /> +
@@ -18996,16 +19401,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Siah Armajani by Paula Lobo. Courtesy of Public Art Fund, New York.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Siah Armajani by Paula Lobo. Courtesy of Public Art Fund, New York.

", + } } - } - /> + /> +
@@ -19428,16 +19841,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
McArthur Binion by Pasquate Abbattista. Courtesy of the artist and Lehmann Maupin, New York, Hong Kong, and Seoul.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
McArthur Binion by Pasquate Abbattista. Courtesy of the artist and Lehmann Maupin, New York, Hong Kong, and Seoul.

", + } } - } - /> + /> +
@@ -19859,15 +20280,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
McArthur Binion, Rutabaga: In the Sky, 1978-1979. Courtesy of the artist and Lehmann Maupin, New York, Hong Kong, and Seoul.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
McArthur Binion, Rutabaga: In the Sky, 1978-1979. Courtesy of the artist and Lehmann Maupin, New York, Hong Kong, and Seoul.

", + } } - } - /> + /> +
@@ -19910,7 +20337,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Beatriz González. Courtesy of the artist.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Beatriz González. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -20263,16 +20695,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
Simone Fattal by Kathleen Weaver. Courtesy of Gallery Tanit, Beirut.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Simone Fattal by Kathleen Weaver. Courtesy of Gallery Tanit, Beirut.

", + } } - } - /> + /> +
@@ -20695,16 +21135,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Vivian Suter by Flavio Karrer. Courtesy of Gladstone Gallery, New York and Brussels, and Karma International.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Vivian Suter by Flavio Karrer. Courtesy of Gladstone Gallery, New York and Brussels, and Karma International.

", + } } - } - /> + /> +
@@ -21127,16 +21575,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
+
- - +
-
Henry Taylor by Paul Forney, 2019. © Henry Taylor. Courtesy of the artist and Blum & Poe, Los Angeles/New York/Tokyo.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Henry Taylor by Paul Forney, 2019. © Henry Taylor. Courtesy of the artist and Blum & Poe, Los Angeles/New York/Tokyo.

", + } } - } - /> + /> +
@@ -21558,15 +22014,21 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` className="Caption__CaptionContainer-sc-1c6ztax-0 hViexZ" >
Henry Taylor, Untitled, 2017. © Henry Taylor. Courtesy of the artist and Blum & Poe, Los Angeles/New York/Tokyo.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Henry Taylor, Untitled, 2017. © Henry Taylor. Courtesy of the artist and Blum & Poe, Los Angeles/New York/Tokyo.

", + } } - } - /> + /> +
@@ -21609,7 +22071,6 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = `
-
Anna Maria Maiolino by Lívia Gonzaga Bertuzzi. © Anna Maria Maiolino. Courtesy of Hauser & Wirth.

", + className="sc-bdVaJa Text-sc-18gcpao-0 iFcHqg" + color="black60" + fontFamily="sans" + > +
Anna Maria Maiolino by Lívia Gonzaga Bertuzzi. © Anna Maria Maiolino. Courtesy of Hauser & Wirth.

", + } } - } - /> + /> +
@@ -21962,16 +22429,19 @@ exports[`Vanguard2019 Snapshots renders article series snapshot properly 1`] = ` -
+
- - +
-
diff --git a/src/Components/Publishing/EditorialFeature/__tests__/__snapshots__/EditorialFeature.test.tsx.snap b/src/Components/Publishing/EditorialFeature/__tests__/__snapshots__/EditorialFeature.test.tsx.snap index 593946d46d..81867b7253 100644 --- a/src/Components/Publishing/EditorialFeature/__tests__/__snapshots__/EditorialFeature.test.tsx.snap +++ b/src/Components/Publishing/EditorialFeature/__tests__/__snapshots__/EditorialFeature.test.tsx.snap @@ -6746,14 +6746,23 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin-right: auto; } -.c39 { +.c40 { width: 100%; margin-left: auto; margin-right: auto; max-width: 1000px; } -.c50 { +.c39 { + color: black60; + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; +} + +.c51 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -6798,7 +6807,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` line-height: 20px; } -.c52 { +.c53 { font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 500; font-size: 16px; @@ -6806,14 +6815,14 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` padding-bottom: 8px; } -.c55 { +.c56 { font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; } -.c56 { +.c57 { font-family: Unica77LLWebRegular,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 12px; line-height: 16px; @@ -6840,7 +6849,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` padding-top: 20px; } -.c40 { +.c41 { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 22px; line-height: 32px; @@ -6912,27 +6921,14 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` word-break: break-word; } -.c38 > p, -.c38 p, -.c38 .public-DraftEditorPlaceholder-root, -.c38 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c38 > a, .c38 a { - color: #999; + color: inherit; } .c38 > a:hover, .c38 a:hover { - color: black; + color: #000; } .c5 { @@ -6968,7 +6964,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` -ms-interpolation-mode: bicubic; } -.c3 .c67 { +.c3 .c68 { margin: 0 20px; } @@ -7021,13 +7017,13 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` z-index: 10; } -.c42 { +.c43 { position: relative; width: 100%; color: white; } -.c42 a { +.c43 a { color: white; -webkit-text-decoration: none; text-decoration: none; @@ -7037,22 +7033,22 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` background-position: bottom; } -.c42 a:hover { +.c43 a:hover { color: white; opacity: .65; } -.c42 div[class*='ToolTip'] a { +.c43 div[class*='ToolTip'] a { background-image: none; opacity: 1; color: inherit; } -.c42 p, -.c42 ul, -.c42 ol, -.c42 .paragraph, -.c42 div[data-block=true] .public-DraftStyleDefault-block { +.c43 p, +.c43 ul, +.c43 ol, +.c43 .paragraph, +.c43 div[data-block=true] .public-DraftStyleDefault-block { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 23px; line-height: 1.5em; @@ -7063,32 +7059,32 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` font-style: inherit; } -.c42 p:first-child, -.c42 .paragraph:first-child, -.c42 div[data-block=true]:first-child .public-DraftStyleDefault-block { +.c43 p:first-child, +.c43 .paragraph:first-child, +.c43 div[data-block=true]:first-child .public-DraftStyleDefault-block { padding-top: 0; } -.c42 p:last-child, -.c42 .paragraph:last-child, -.c42 div[data-block=true]:last-child .public-DraftStyleDefault-block { +.c43 p:last-child, +.c43 .paragraph:last-child, +.c43 div[data-block=true]:last-child .public-DraftStyleDefault-block { padding-bottom: 0; } -.c42 ul, -.c42 ol { +.c43 ul, +.c43 ol { padding-left: 1em; } -.c42 ul { +.c43 ul { list-style: disc; } -.c42 ol { +.c43 ol { list-style: decimal; } -.c42 li { +.c43 li { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 23px; line-height: 1.5em; @@ -7097,7 +7093,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` padding-bottom: .5em; } -.c42 h1 { +.c43 h1 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 40px; @@ -7110,7 +7106,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` text-align: center; } -.c42 h1::before { +.c43 h1::before { content: ""; width: 8px; height: 8px; @@ -7121,7 +7117,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` right: calc(50% - 4px); } -.c42 h2 { +.c43 h2 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 32px; @@ -7130,15 +7126,15 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin: 0; } -.c42 h2 a { +.c43 h2 a { background-size: 1.25px 1px; } -.c42 h2 .c69 { +.c43 h2 .c70 { background-position: bottom !important; } -.c42 h3 { +.c43 h3 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 19px; @@ -7148,7 +7144,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin: 0; } -.c42 h3 strong { +.c43 h3 strong { font-weight: normal; font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; @@ -7156,11 +7152,11 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` line-height: 1.5em; } -.c42 h3 a { +.c43 h3 a { background-size: 1.25px 1px; } -.c42 blockquote { +.c43 blockquote { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 40px; @@ -7173,11 +7169,11 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` word-break: break-word; } -.c42 .preventLineBreak { +.c43 .preventLineBreak { white-space: nowrap; } -.c42 .content-end { +.c43 .content-end { display: inline-block; content: ""; width: 8px; @@ -7188,14 +7184,14 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin-bottom: 1px; } -.c42 .artist-follow { +.c43 .artist-follow { vertical-align: middle; margin-left: 10px; cursor: pointer; background: none transparent; } -.c42 .artist-follow::before { +.c43 .artist-follow::before { font-family: "artsy-icons"; content: ""; vertical-align: -8.5px; @@ -7203,7 +7199,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` font-size: 32px; } -.c42 .artist-follow::after { +.c43 .artist-follow::after { content: "Follow"; font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 17px; @@ -7212,13 +7208,13 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` text-transform: none; } -.c61 { +.c62 { position: relative; width: 100%; color: #000; } -.c61 a { +.c62 a { color: #000; -webkit-text-decoration: none; text-decoration: none; @@ -7228,22 +7224,22 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` background-position: bottom; } -.c61 a:hover { +.c62 a:hover { color: #000; opacity: .65; } -.c61 div[class*='ToolTip'] a { +.c62 div[class*='ToolTip'] a { background-image: none; opacity: 1; color: inherit; } -.c61 p, -.c61 ul, -.c61 ol, -.c61 .paragraph, -.c61 div[data-block=true] .public-DraftStyleDefault-block { +.c62 p, +.c62 ul, +.c62 ol, +.c62 .paragraph, +.c62 div[data-block=true] .public-DraftStyleDefault-block { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 23px; line-height: 1.5em; @@ -7254,32 +7250,32 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` font-style: inherit; } -.c61 p:first-child, -.c61 .paragraph:first-child, -.c61 div[data-block=true]:first-child .public-DraftStyleDefault-block { +.c62 p:first-child, +.c62 .paragraph:first-child, +.c62 div[data-block=true]:first-child .public-DraftStyleDefault-block { padding-top: 0; } -.c61 p:last-child, -.c61 .paragraph:last-child, -.c61 div[data-block=true]:last-child .public-DraftStyleDefault-block { +.c62 p:last-child, +.c62 .paragraph:last-child, +.c62 div[data-block=true]:last-child .public-DraftStyleDefault-block { padding-bottom: 0; } -.c61 ul, -.c61 ol { +.c62 ul, +.c62 ol { padding-left: 1em; } -.c61 ul { +.c62 ul { list-style: disc; } -.c61 ol { +.c62 ol { list-style: decimal; } -.c61 li { +.c62 li { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 23px; line-height: 1.5em; @@ -7288,7 +7284,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` padding-bottom: .5em; } -.c61 h1 { +.c62 h1 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 40px; @@ -7301,7 +7297,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` text-align: center; } -.c61 h1::before { +.c62 h1::before { content: ""; width: 8px; height: 8px; @@ -7312,7 +7308,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` right: calc(50% - 4px); } -.c61 h2 { +.c62 h2 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 32px; @@ -7321,15 +7317,15 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin: 0; } -.c61 h2 a { +.c62 h2 a { background-size: 1.25px 1px; } -.c61 h2 .c69 { +.c62 h2 .c70 { background-position: bottom !important; } -.c61 h3 { +.c62 h3 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 19px; @@ -7339,7 +7335,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin: 0; } -.c61 h3 strong { +.c62 h3 strong { font-weight: normal; font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; @@ -7347,11 +7343,11 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` line-height: 1.5em; } -.c61 h3 a { +.c62 h3 a { background-size: 1.25px 1px; } -.c61 blockquote { +.c62 blockquote { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 40px; @@ -7364,11 +7360,11 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` word-break: break-word; } -.c61 .preventLineBreak { +.c62 .preventLineBreak { white-space: nowrap; } -.c61 .content-end { +.c62 .content-end { display: inline-block; content: ""; width: 8px; @@ -7379,14 +7375,14 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin-bottom: 1px; } -.c61 .artist-follow { +.c62 .artist-follow { vertical-align: middle; margin-left: 10px; cursor: pointer; background: none transparent; } -.c61 .artist-follow::before { +.c62 .artist-follow::before { font-family: "artsy-icons"; content: ""; vertical-align: -8.5px; @@ -7394,7 +7390,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` font-size: 32px; } -.c61 .artist-follow::after { +.c62 .artist-follow::after { content: "Follow"; font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 17px; @@ -7471,18 +7467,18 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` height: auto; } -.c57 { +.c58 { height: 45px; position: relative; margin-left: 40px; text-align: right; } -.c57 > svg { +.c58 > svg { height: 98%; } -.c49 { +.c50 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7499,19 +7495,19 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` width: 100%; } -.c54 { +.c55 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c45 { +.c46 { position: relative; width: 100%; } -.c47 { +.c48 { position: absolute; bottom: 20px; left: 20px; @@ -7524,53 +7520,53 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` cursor: pointer; } -.c47:hover { +.c48:hover { background: rgba(0,0,0,0.6); color: white; } -.c47:hover path, -.c47:hover polygon { +.c48:hover path, +.c48:hover polygon { fill: white; } -.c59 { +.c60 { height: auto; width: 100%; } -.c63 .c1 { +.c64 .c1 { border-bottom: none; } -.c64 .c41 blockquote { +.c65 .c42 blockquote { padding: 0; } -.c64 .c41 p, -.c64 .c41 .paragraph { +.c65 .c42 p, +.c65 .c42 .paragraph { font-size: 24px; text-indent: 2em; padding: 0; } -.c65 .c41 blockquote { +.c66 .c42 blockquote { padding: 0; } -.c65 .c41 p, -.c65 .c41 .paragraph { +.c66 .c42 p, +.c66 .c42 .paragraph { font-size: 24px; text-indent: 2em; padding: 0; } -.c65 .c41 p:first-child, -.c65 .c41 .paragraph:first-child { +.c66 .c42 p:first-child, +.c66 .c42 .paragraph:first-child { text-indent: 0; } -.c66 .c44 { +.c67 .c45 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -7580,7 +7576,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` flex-direction: row-reverse; } -.c66 .c46 { +.c67 .c47 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -7599,32 +7595,32 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` box-shadow: none; } -.c66 .c46:hover { +.c67 .c47:hover { background-color: #6E1EFF; } -.c66 .c51 { +.c67 .c52 { display: none; } -.c66 .c53 { +.c67 .c54 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } -.c66 .c53 > div { +.c67 .c54 > div { padding: 0; } -.c66 .c58 { +.c67 .c59 { -webkit-flex: 3; -ms-flex: 3; flex: 3; border-right: 6px solid #6E1EFF; } -.c66 .c58 img { +.c67 .c59 img { object-fit: cover; object-position: center; height: 100%; @@ -7648,11 +7644,11 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` background-color: #000; } -.c25 .c68 { +.c25 .c69 { color: #000; } -.c60 .c68 { +.c61 .c69 { color: #000; } @@ -7661,7 +7657,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` position: relative; } -.c62 { +.c63 { padding-left: 10px; padding-right: 10px; padding-top: 40px; @@ -7692,15 +7688,15 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` font-weight: inherit; } -.c12 .c41 p, -.c12 .c41 .paragraph { +.c12 .c42 p, +.c12 .c42 .paragraph { font-size: 24px; text-indent: 2em; padding: 0; } -.c12 .c41 p:first-child, -.c12 .c41 .paragraph:first-child { +.c12 .c42 p:first-child, +.c12 .c42 .paragraph:first-child { text-indent: 0; } @@ -7790,35 +7786,35 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` text-shadow: 0 0 5px black; } -.c43 { +.c44 { padding-left: 0; padding-right: 0; border-bottom: 6px solid; position: relative; } -.c43 .c44 { +.c44 .c45 { width: 70%; max-width: 1000px; margin: 0 auto; color: black; } -.c43 .c44 img { +.c44 .c45 img { width: 100%; } -.c43 .c44 .c51 { +.c44 .c45 .c52 { display: none; } -.c43 .c44 .c53 { +.c44 .c45 .c54 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } -.c43 .c44 .c53 > div { +.c44 .c45 .c54 > div { padding: 0; } @@ -7847,17 +7843,27 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` } @media screen and (min-width:40em) { - .c39 { + .c40 { width: 100%; } } @media screen and (min-width:52em) { - .c39 { + .c40 { width: 70%; } } +@media (min-width:) { + .c39 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media screen and (min-width:40em) { .c14 { -webkit-flex-direction: row; @@ -7879,37 +7885,37 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` } @media screen and (min-width:40em) { - .c52 { + .c53 { font-size: 18px; } } @media screen and (min-width:40em) { - .c52 { + .c53 { line-height: 30px; } } @media screen and (min-width:40em) { - .c55 { + .c56 { font-size: 14px; } } @media screen and (min-width:40em) { - .c55 { + .c56 { line-height: 24px; } } @media screen and (min-width:40em) { - .c56 { + .c57 { font-size: 14px; } } @media screen and (min-width:40em) { - .c56 { + .c57 { line-height: 24px; } } @@ -7936,7 +7942,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` @media (max-width:600px) { .c38 { - padding: 0px; + padding: 0; } } @@ -7949,44 +7955,44 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` font-size: 24px; } - .c3 .c67 { + .c3 .c68 { margin: 0 10px; } } @media (max-width:600px) { - .c42 p, - .c42 ul, - .c42 ol, - .c42 div[data-block=true] .public-DraftStyleDefault-block { + .c43 p, + .c43 ul, + .c43 ol, + .c43 div[data-block=true] .public-DraftStyleDefault-block { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 19px; line-height: 1.5em; -webkit-font-smoothing: antialiased; } - .c42 li { + .c43 li { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 19px; line-height: 1.5em; -webkit-font-smoothing: antialiased; } - .c42 h1 { + .c43 h1 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 34px; line-height: 1.1em; } - .c42 h2 { + .c43 h2 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 32px; line-height: 1.1em; } - .c42 h3 { + .c43 h3 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 16px; @@ -7994,14 +8000,14 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` line-height: 1.5em; } - .c42 h3 strong { + .c43 h3 strong { font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.1em; } - .c42 blockquote { + .c43 blockquote { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 34px; @@ -8009,44 +8015,44 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin: 0; } - .c42 .content-start { + .c43 .content-start { font-size: 55px; } } @media (max-width:600px) { - .c61 p, - .c61 ul, - .c61 ol, - .c61 div[data-block=true] .public-DraftStyleDefault-block { + .c62 p, + .c62 ul, + .c62 ol, + .c62 div[data-block=true] .public-DraftStyleDefault-block { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 19px; line-height: 1.5em; -webkit-font-smoothing: antialiased; } - .c61 li { + .c62 li { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 19px; line-height: 1.5em; -webkit-font-smoothing: antialiased; } - .c61 h1 { + .c62 h1 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 34px; line-height: 1.1em; } - .c61 h2 { + .c62 h2 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 32px; line-height: 1.1em; } - .c61 h3 { + .c62 h3 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 16px; @@ -8054,14 +8060,14 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` line-height: 1.5em; } - .c61 h3 strong { + .c62 h3 strong { font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.1em; } - .c61 blockquote { + .c62 blockquote { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 34px; @@ -8069,7 +8075,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` margin: 0; } - .c61 .content-start { + .c62 .content-start { font-size: 55px; } } @@ -8100,7 +8106,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` } @media (max-width:768px) { - .c66 .c44 { + .c67 .c45 { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; @@ -8108,19 +8114,19 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` } @media (max-width:768px) { - .c66 .c46 { + .c67 .c47 { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } - .c66 .c46 .c48 { + .c67 .c47 .c49 { max-width: 50%; } } @media (max-width:768px) { - .c66 .c58 { + .c67 .c59 { border-right: none; border-bottom: 6px solid #6E1EFF; } @@ -8135,14 +8141,14 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` } @media screen and (min-width:40em) { - .c62 { + .c63 { padding-left: 10px; padding-right: 10px; } } @media screen and (min-width:52em) { - .c62 { + .c63 { padding-left: 55px; padding-right: 55px; } @@ -8218,21 +8224,21 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` } @media screen and (min-width:40em) { - .c43 { + .c44 { padding-left: 0; padding-right: 0; } } @media screen and (min-width:52em) { - .c43 { + .c44 { padding-left: 55px; padding-right: 55px; } } @media (max-width:900px) { - .c43 .c44 { + .c44 .c45 { width: 100%; } } @@ -8601,12 +8607,18 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c38" >
A still from Donald Glover’s “This Is America” video. Courtesy of the artist.

", + className="c39" + color="black60" + fontFamily="sans" + > +
A still from Donald Glover’s “This Is America” video. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -8617,7 +8629,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Donald Glover and Hiro Murai
@@ -8765,7 +8777,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Detail of Amy Sherald, Michelle LaVaughn Robinson Obama, 2018. Courtesy of the National Portrait Gallery, Smithsonian Institution.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Detail of Amy Sherald, Michelle LaVaughn Robinson Obama, 2018. Courtesy of the National Portrait Gallery, Smithsonian Institution.

", + } } - } - /> + /> +
@@ -8924,7 +8942,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Amy Sherald
@@ -9072,7 +9090,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Installation view of teamLab, “Borderless,” 2018, at Mori Building Digital Art Museum, Odaiba, Tokyo. © teamLab. Courtesy of Pace Gallery.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Installation view of teamLab, “Borderless,” 2018, at Mori Building Digital Art Museum, Odaiba, Tokyo. © teamLab. Courtesy of Pace Gallery.

", + } } - } - /> + /> +
@@ -9231,7 +9255,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
teamLab
@@ -9379,7 +9403,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Photo of Nan Goldin during a protest at the Harvard Art Museums. Photo by TW Collins. Courtesy of P.A.I.N. Sackler.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Photo of Nan Goldin during a protest at the Harvard Art Museums. Photo by TW Collins. Courtesy of P.A.I.N. Sackler.

", + } } - } - /> + /> +
@@ -9538,7 +9568,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Nan Goldin
@@ -9686,7 +9716,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Illustrations by Tim O’Brien for Time. Courtesy of Time.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Illustrations by Tim O’Brien for Time. Courtesy of Time.

", + } } - } - /> + /> +
@@ -9845,7 +9881,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
D.W. Pine
@@ -9993,7 +10029,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Portrait of Virgil Abloh at the Louis Vuitton headquarters © Alex Majoli/Magnum Photos. Courtesy of Magnum Photos.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Portrait of Virgil Abloh at the Louis Vuitton headquarters © Alex Majoli/Magnum Photos. Courtesy of Magnum Photos.

", + } } - } - /> + /> +
@@ -10152,7 +10194,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Virgil Abloh
@@ -10300,7 +10342,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Photo by Nicolas McComber via Getty Images.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Photo by Nicolas McComber via Getty Images.

", + } } - } - /> + /> +
@@ -10459,7 +10507,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
James Monsees and Adam Bowen
@@ -10607,7 +10655,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
A demonstration of SenseTime surveillance software identifying details about people and vehicles. Image by REUTERS/Thomas Peter.

", + className="c39" + color="black60" + fontFamily="sans" + > +
A demonstration of SenseTime surveillance software identifying details about people and vehicles. Image by REUTERS/Thomas Peter.

", + } } - } - /> + /> +
@@ -10766,7 +10820,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Chromat’s “Pool Rules” campaign, 2018. Courtesy of Chromat.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Chromat’s “Pool Rules” campaign, 2018. Courtesy of Chromat.

", + } } - } - /> + /> +
@@ -10959,7 +11019,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Becca McCharen-Tran
@@ -11107,7 +11167,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Detail of Artemisia Gentileschi, Judith and Holofernes, ca. 1620. Courtesy of Uffizi Gallery, Florence.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Detail of Artemisia Gentileschi, Judith and Holofernes, ca. 1620. Courtesy of Uffizi Gallery, Florence.

", + } } - } - /> + /> +
@@ -11266,7 +11332,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Tyler Mitchell’s portraits of Beyoncé on the September cover of Vogue, 2018. Courtesy of the artist.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Tyler Mitchell’s portraits of Beyoncé on the September cover of Vogue, 2018. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -11459,7 +11531,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Tyler Mitchell
@@ -11607,7 +11679,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Courtesy of Nike.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Courtesy of Nike.

", + } } - } - /> + /> +
@@ -11766,7 +11844,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Frida Escobedo in the Serpentine Pavilion 2018. Photo by Yui Mok/PA Images via Getty Images.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Frida Escobedo in the Serpentine Pavilion 2018. Photo by Yui Mok/PA Images via Getty Images.

", + } } - } - /> + /> +
@@ -11962,7 +12046,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Frida Escobedo
@@ -12110,7 +12194,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
The Peoples Vote March For The Future, October 20, 2018 in London, United Kingdom. Photo by Richard Baker/In Pictures via Getty Images.

", + className="c39" + color="black60" + fontFamily="sans" + > +
The Peoples Vote March For The Future, October 20, 2018 in London, United Kingdom. Photo by Richard Baker/In Pictures via Getty Images.

", + } } - } - /> + /> +
@@ -12269,7 +12359,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Banksy, Love is in the Bin, 2018. Photo by Ben Stansall/AFP/Getty Images.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Banksy, Love is in the Bin, 2018. Photo by Ben Stansall/AFP/Getty Images.

", + } } - } - /> + /> +
@@ -12465,7 +12561,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Banksy
@@ -12616,7 +12712,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Robin Hammond’s photo for the cover of National Geographic’sRace Issue, 2018. Courtesy of the artist.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Robin Hammond’s photo for the cover of National Geographic’sRace Issue, 2018. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -12775,7 +12877,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Robin Hammond
@@ -12923,7 +13025,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Meryl Streep, Ai-jen Poo, Natalie Portman, Tarana Burke, Michelle Williams, America Ferrera, Jessica Chastain, Amy Poehler, and activist Saru Jayaraman attend 19th Annual Post-Golden Globes Party, 2018. Photo by Frazer Harrison/Getty Images.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Meryl Streep, Ai-jen Poo, Natalie Portman, Tarana Burke, Michelle Williams, America Ferrera, Jessica Chastain, Amy Poehler, and activist Saru Jayaraman attend 19th Annual Post-Golden Globes Party, 2018. Photo by Frazer Harrison/Getty Images.

", + } } - } - /> + /> +
@@ -13082,7 +13190,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
The Women of Time’s Up
@@ -13230,7 +13338,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Icon's 3-D Home and Vulcan Printer. Courtesy of New Story.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Icon's 3-D Home and Vulcan Printer. Courtesy of New Story.

", + } } - } - /> + /> +
@@ -13389,7 +13503,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Still from Marvel Studios’ Black Panther, featuring M’Baku (Winston Duke). Photo by Film Frame. Courtesy of and ©Marvel Studios 2018.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Still from Marvel Studios’ Black Panther, featuring M’Baku (Winston Duke). Photo by Film Frame. Courtesy of and ©Marvel Studios 2018.

", + } } - } - /> + /> +
@@ -13582,7 +13702,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Ruth E. Carter
@@ -13730,7 +13850,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Photo by John Moore/Getty Images.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Photo by John Moore/Getty Images.

", + } } - } - /> + /> +
@@ -13889,7 +14015,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
John Moore
@@ -14037,7 +14163,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Film still from Crazy Rich Asians. © 2018 Warner Bros. Entertainment Inc. and Kimmel Distribution, LLC. Photo courtesy of Warner Bros. Pictures.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Film still from Crazy Rich Asians. © 2018 Warner Bros. Entertainment Inc. and Kimmel Distribution, LLC. Photo courtesy of Warner Bros. Pictures.

", + } } - } - /> + /> +
@@ -14196,7 +14328,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Jon M. Chu
@@ -14344,7 +14476,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Millicent Fawcett, 2018. Photo by Garry Knight, via Flickr.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Millicent Fawcett, 2018. Photo by Garry Knight, via Flickr.

", + } } - } - /> + /> +
@@ -14503,7 +14641,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Portrait of Sean Combs by Kevin Mazur/WireImage.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Portrait of Sean Combs by Kevin Mazur/WireImage.

", + } } - } - /> + /> +
@@ -14696,7 +14840,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Sean Combs
@@ -14844,7 +14988,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Red Antler's branding designs for Burrow on the New York subway. Courtesy of Red Antler.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Red Antler's branding designs for Burrow on the New York subway. Courtesy of Red Antler.

", + } } - } - /> + /> +
@@ -15003,7 +15153,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Emily Heyward, JB Osborne, and Simon Endres
@@ -15151,7 +15301,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Make America Great Again with Spider Martin in Pearl, MS, 2016. Courtesy of Wyatt Gallery/For Freedoms.

", + className="c39" + color="black60" + fontFamily="sans" + > +
Make America Great Again with Spider Martin in Pearl, MS, 2016. Courtesy of Wyatt Gallery/For Freedoms.

", + } } - } - /> + /> +
@@ -15310,7 +15466,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
Hank Willis Thomas and Eric Gottesman
@@ -15458,7 +15614,7 @@ exports[`EditorialFeature EOY_2018_CULTURE Matches snapshot 1`] = ` className="c12" >
p, -.c10 p, -.c10 .public-DraftEditorPlaceholder-root, -.c10 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c10 > a, .c10 a { - color: #999; + color: inherit; } .c10 > a:hover, .c10 a:hover { - color: black; + color: #000; } .c5 { @@ -208,13 +204,13 @@ exports[`News Layout renders the news layout on mobile 1`] = ` height: auto; } -.c12 { +.c13 { position: relative; width: 100%; color: black; } -.c12 a { +.c13 a { color: black; -webkit-text-decoration: none; text-decoration: none; @@ -224,22 +220,22 @@ exports[`News Layout renders the news layout on mobile 1`] = ` background-position: bottom; } -.c12 a:hover { +.c13 a:hover { color: #C2C2C2; opacity: 1; } -.c12 div[class*='ToolTip'] a { +.c13 div[class*='ToolTip'] a { background-image: none; opacity: 1; color: inherit; } -.c12 p, -.c12 ul, -.c12 ol, -.c12 .paragraph, -.c12 div[data-block=true] .public-DraftStyleDefault-block { +.c13 p, +.c13 ul, +.c13 ol, +.c13 .paragraph, +.c13 div[data-block=true] .public-DraftStyleDefault-block { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 23px; line-height: 1.5em; @@ -250,32 +246,32 @@ exports[`News Layout renders the news layout on mobile 1`] = ` font-style: inherit; } -.c12 p:first-child, -.c12 .paragraph:first-child, -.c12 div[data-block=true]:first-child .public-DraftStyleDefault-block { +.c13 p:first-child, +.c13 .paragraph:first-child, +.c13 div[data-block=true]:first-child .public-DraftStyleDefault-block { padding-top: 0; } -.c12 p:last-child, -.c12 .paragraph:last-child, -.c12 div[data-block=true]:last-child .public-DraftStyleDefault-block { +.c13 p:last-child, +.c13 .paragraph:last-child, +.c13 div[data-block=true]:last-child .public-DraftStyleDefault-block { padding-bottom: 0; } -.c12 ul, -.c12 ol { +.c13 ul, +.c13 ol { padding-left: 1em; } -.c12 ul { +.c13 ul { list-style: disc; } -.c12 ol { +.c13 ol { list-style: decimal; } -.c12 li { +.c13 li { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 23px; line-height: 1.5em; @@ -284,7 +280,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` padding-bottom: .5em; } -.c12 h1 { +.c13 h1 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 40px; @@ -297,7 +293,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` text-align: center; } -.c12 h1::before { +.c13 h1::before { content: ""; width: 8px; height: 8px; @@ -308,7 +304,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` right: calc(50% - 4px); } -.c12 h2 { +.c13 h2 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 32px; @@ -317,15 +313,15 @@ exports[`News Layout renders the news layout on mobile 1`] = ` margin: 0; } -.c12 h2 a { +.c13 h2 a { background-size: 1.25px 1px; } -.c12 h2 .c24 { +.c13 h2 .c25 { background-position: bottom !important; } -.c12 h3 { +.c13 h3 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 19px; @@ -335,7 +331,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` margin: 0; } -.c12 h3 strong { +.c13 h3 strong { font-weight: normal; font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; @@ -343,11 +339,11 @@ exports[`News Layout renders the news layout on mobile 1`] = ` line-height: 1.5em; } -.c12 h3 a { +.c13 h3 a { background-size: 1.25px 1px; } -.c12 blockquote { +.c13 blockquote { font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 19px; @@ -364,15 +360,15 @@ exports[`News Layout renders the news layout on mobile 1`] = ` margin: auto; } -.c12 blockquote a { +.c13 blockquote a { background-size: 1.25px 1px; } -.c12 .preventLineBreak { +.c13 .preventLineBreak { white-space: nowrap; } -.c12 .content-end { +.c13 .content-end { display: inline-block; content: ""; width: 8px; @@ -383,14 +379,14 @@ exports[`News Layout renders the news layout on mobile 1`] = ` margin-bottom: 1px; } -.c12 .artist-follow { +.c13 .artist-follow { vertical-align: middle; margin-left: 10px; cursor: pointer; background: none transparent; } -.c12 .artist-follow::before { +.c13 .artist-follow::before { font-family: "artsy-icons"; content: ""; vertical-align: -8.5px; @@ -398,7 +394,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` font-size: 32px; } -.c12 .artist-follow::after { +.c13 .artist-follow::after { content: "Follow"; font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 17px; @@ -411,21 +407,21 @@ exports[`News Layout renders the news layout on mobile 1`] = ` margin-bottom: 20px; } -.c11 { +.c12 { max-width: 660px; margin-bottom: 20px; } -.c13 { +.c14 { max-width: 780px; margin-top: 30px; } -.c0 .c25 { +.c0 .c26 { border-bottom: 1px solid #E5E5E5; } -.c22 { +.c23 { width: 80px; height: 30px; background-color: black; @@ -448,11 +444,11 @@ exports[`News Layout renders the news layout on mobile 1`] = ` line-height: 1em; } -.c22:focus { +.c23:focus { outline: 0; } -.c22:hover { +.c23:hover { color: #E5E5E5; } @@ -466,6 +462,16 @@ exports[`News Layout renders the news layout on mobile 1`] = ` border: 1px solid transparent; } +@media (min-width:) { + .c11 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media screen and (min-width:40em) { .c3 { font-size: 32px; @@ -479,7 +485,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` } @media (max-width:720px) { - .c19 { + .c20 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 12px; @@ -488,13 +494,13 @@ exports[`News Layout renders the news layout on mobile 1`] = ` } @media (max-width:600px) { - .c20 { + .c21 { margin-top: 15px; } } @media (max-width:720px) { - .c7 .c23 { + .c7 .c24 { opacity: 1; } } @@ -507,7 +513,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` @media (max-width:600px) { .c10 { - padding: 0px; + padding: 0; } } @@ -531,38 +537,38 @@ exports[`News Layout renders the news layout on mobile 1`] = ` } @media (max-width:600px) { - .c12 p, - .c12 ul, - .c12 ol, - .c12 div[data-block=true] .public-DraftStyleDefault-block { + .c13 p, + .c13 ul, + .c13 ol, + .c13 div[data-block=true] .public-DraftStyleDefault-block { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 19px; line-height: 1.5em; -webkit-font-smoothing: antialiased; } - .c12 li { + .c13 li { font-family: 'Adobe Garamond W08','adobe-garamond-pro','AGaramondPro-Regular','Times New Roman',Times,serif; font-size: 19px; line-height: 1.5em; -webkit-font-smoothing: antialiased; } - .c12 h1 { + .c13 h1 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 34px; line-height: 1.1em; } - .c12 h2 { + .c13 h2 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 32px; line-height: 1.1em; } - .c12 h3 { + .c13 h3 { font-family: Unica77LLWebRegular,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 16px; @@ -570,14 +576,14 @@ exports[`News Layout renders the news layout on mobile 1`] = ` line-height: 1.5em; } - .c12 h3 strong { + .c13 h3 strong { font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.1em; } - .c12 blockquote { + .c13 blockquote { font-family: Unica77LLWebMedium,Arial,serif; -webkit-font-smoothing: antialiased; font-size: 16px; @@ -585,7 +591,7 @@ exports[`News Layout renders the news layout on mobile 1`] = ` margin: 0 10px; } - .c12 .content-start { + .c13 .content-start { font-size: 55px; } } @@ -598,21 +604,21 @@ exports[`News Layout renders the news layout on mobile 1`] = ` } @media (max-width:720px) { - .c11 { + .c12 { margin: 0 0 15px 0; padding: 0; } } @media (max-width:720px) { - .c13 { + .c14 { margin: 30px 0 0 0; padding: 0px; } } @media (max-width:720px) { - .c22 { + .c23 { bottom: 15px; right: 15px; } @@ -693,12 +699,18 @@ exports[`News Layout renders the news layout on mobile 1`] = ` className="c10" >
Illustration by Tomi Um for Artsy.

", + className="c11" + color="black60" + fontFamily="sans" + > +
Illustration by Tomi Um for Artsy.

", + } } - } - /> + /> +
@@ -706,11 +718,11 @@ exports[`News Layout renders the news layout on mobile 1`] = `
Casey Lesser
Jul 19, 2018 at 1:19pm , via @@ -858,10 +870,10 @@ exports[`News Layout renders the news layout on mobile 1`] = `
@@ -1652,11 +1676,11 @@ exports[`News Layout renders the news layout properly 1`] = `
Casey Lesser
Jul 19, 2018 at 1:19pm , via @@ -1804,10 +1828,10 @@ exports[`News Layout renders the news layout properly 1`] = `
@@ -2629,11 +2665,11 @@ exports[`News Layout with display ads renders the news layout properly with disp
{ +interface ArtworkCaptionProps extends BoxProps { artwork: any color?: string layout?: ArticleLayout @@ -18,7 +18,7 @@ interface ArtworkCaptionProps extends React.HTMLProps { export class ArtworkCaption extends React.Component { static defaultProps = { - color: Color("black30"), + color: "black60", } joinParts(children, key, delimiter = ", ") { @@ -195,7 +195,7 @@ export class ArtworkCaption extends React.Component { renderFullscreenCaption = () => { return ( - + {this.renderArtists()} @@ -209,11 +209,7 @@ export class ArtworkCaption extends React.Component { renderClassicCaption = () => { return ( - + {this.renderArtists()} {this.renderTitleDate()} @@ -229,7 +225,6 @@ export class ArtworkCaption extends React.Component { return ( { } render() { - const { layout, isFullscreenCaption } = this.props + const { layout, isFullscreenCaption, ...rest } = this.props return ( -
+ {isFullscreenCaption ? this.renderFullscreenCaption() : layout === "classic" ? this.renderClassicCaption() : this.renderEditorialCaption()} -
+
) } } -const ArtistNames = styled.span` +const ArtistNames = styled.strong` margin-right: 30px; + color: ${color("black100")}; ` const ArtistName = styled.span` white-space: nowrap; ` -export const StyledArtworkCaption = styled(Sans)<{ - color?: string +export const StyledArtworkCaption = styled(Text).attrs({ + variant: "text", +})<{ layout?: ArticleLayout sectionLayout?: SectionLayout }>` padding: ${props => (props.sectionLayout === "fillwidth" ? "0 10px;" : "0;")}; margin-top: 10px; - display: flex; a { - color: ${props => props.color}; + color: inherit; text-decoration: none; } @@ -292,21 +288,22 @@ export const StyledArtworkCaption = styled(Sans)<{ `}; ` -const StyledClassicCaption = styled(Serif)<{ - className?: string - color?: string -}>` +const StyledClassicCaption = styled(Text).attrs({ + fontFamily: "serif", + variant: "text", + color: "black60", +})` margin-top: 10px; display: block; a { - color: ${props => props.color}; + color: inherit; text-decoration: none; } ${ArtistNames} { margin-right: 0; - font-weight: bold; + color: inherit; &::after { content: ", "; @@ -318,11 +315,10 @@ const StyledClassicCaption = styled(Serif)<{ } ` -const StyledFullscreenCaption = styled(Sans)` - display: flex; - +const StyledFullscreenCaption = styled(Text).attrs({ + variant: "text", +})` a { - color: black; text-decoration: none; } diff --git a/src/Components/Publishing/Sections/Caption.tsx b/src/Components/Publishing/Sections/Caption.tsx index c6e709bfbe..649850eda5 100644 --- a/src/Components/Publishing/Sections/Caption.tsx +++ b/src/Components/Publishing/Sections/Caption.tsx @@ -1,8 +1,8 @@ -import { garamond, unica } from "Assets/Fonts" import { pMedia } from "Components/Helpers" import { ArticleLayout, SectionLayout } from "Components/Publishing/Typings" import React from "react" import styled from "styled-components" +import { Text, color } from "@artsy/palette" interface CaptionProps { caption: string @@ -18,7 +18,7 @@ interface FigcaptionProps { sectionLayout?: SectionLayout } -export const Caption: React.SFC = props => { +export const Caption: React.FC = props => { const { caption, children, color, layout, sectionLayout } = props const child = children || ( @@ -28,7 +28,13 @@ export const Caption: React.SFC = props => { return (
- {child} + + {child} +
) @@ -46,28 +52,20 @@ export const CaptionContainer = styled.div` // includes draft placeholder class for editable text in Writer const Figcaption = styled.div` - padding: ${props => (props.sectionLayout === "fillwidth" ? "0 10px;" : "0;")} + padding: ${props => (props.sectionLayout === "fillwidth" ? "0 10px" : "0")}; width: 100%; word-break: break-word; - & > p, p, - .public-DraftEditorPlaceholder-root, - .public-DraftStyleDefault-block { - ${props => (props.layout === "classic" ? garamond("s15") : unica("s14"))} - color: ${props => - props.color ? props.color : props.layout === "classic" ? "#666" : "#999"}; - margin: 0; - display: inline; - } + & > a, + a { + color: inherit; - & > a, a { - color: #999; &:hover { - color: black; + color: ${color("black100")}; } } ${pMedia.xs` - padding: 0px; + padding: 0; `} ` diff --git a/src/Components/Publishing/Sections/FullscreenViewer/ArtworkCaption.tsx b/src/Components/Publishing/Sections/FullscreenViewer/ArtworkCaption.tsx new file mode 100644 index 0000000000..9379d0132e --- /dev/null +++ b/src/Components/Publishing/Sections/FullscreenViewer/ArtworkCaption.tsx @@ -0,0 +1,44 @@ +import React from "react" +import { Box, BoxProps, Button } from "@artsy/palette" +import { ArtworkCaption as BaseArtworkCaption } from "../ArtworkCaption" + +interface ArtworkCaptionProps extends BoxProps { + section: unknown & { type: "artwork"; slug: string } +} + +export const ArtworkCaption: React.FC = ({ + section, + ...rest +}) => { + return ( + + + + + + ) +} diff --git a/src/Components/Publishing/Sections/FullscreenViewer/Caption.tsx b/src/Components/Publishing/Sections/FullscreenViewer/Caption.tsx index 61d9cb97c7..d0b34a5973 100644 --- a/src/Components/Publishing/Sections/FullscreenViewer/Caption.tsx +++ b/src/Components/Publishing/Sections/FullscreenViewer/Caption.tsx @@ -1,123 +1,83 @@ -import Colors from "Assets/Colors" -import { unica } from "Assets/Fonts" -import { pMedia } from "Components/Helpers" -import PropTypes from "prop-types" +import { Box, Clickable, HTML, Text } from "@artsy/palette" import React from "react" -import styled, { StyledFunction } from "styled-components" -import { ArtworkCaption } from "../ArtworkCaption" +import PropTypes from "prop-types" +import { ArtworkCaption } from "./ArtworkCaption" +import { Media } from "Utils/Responsive" -interface CaptionProps extends React.HTMLProps { - section?: any +interface CaptionProps { + section?: any // TODO: What am I? total: number index: number open: boolean } -interface CaptionOpenProps extends React.HTMLProps { - open: boolean -} - -export const Caption: React.SFC = props => { - const { index, open, section, total } = props - +export const Caption: React.FC = ( + { index, open, section, total }, + context +) => { const isArtwork = section.type === "artwork" - const indexText = `${index} of ${total}` return ( - - - - - - {isArtwork ? ( - - ) : ( -
+ <> + + + + + {open ? "Hide" : "View Caption"} + + + + {index} of {total} + + + + {open && ( + + {isArtwork ? ( + + ) : ( + + )} + )} - - - - {indexText} - + + + + + + + {isArtwork ? ( + + ) : ( + + )} + + + + {index} of {total} + + + + ) } -const CaptionToggle: React.SFC = (props, context) => { - const toggleMessage = props.open ? "Hide" : "View Caption" - - return ( - - {toggleMessage} - - ) -} - -CaptionToggle.contextTypes = { +Caption.contextTypes = { onToggleCaption: PropTypes.func, } - -const StyledCaptionToggle = styled.div` - display: none; - ${pMedia.sm` - ${unica("s14", "medium")} - cursor: pointer; - display: inline-block; - span { - border-bottom: 1px solid black; - } - `}; -` - -const CaptionDiv: StyledFunction = styled.div - -const CaptionText = CaptionDiv` - ${unica("s16", "medium")} - a { - color: black; - } - ${props => pMedia.sm` - ${unica("s14", "medium")} - display: ${props.open ? "block" : "none"}; - margin-top: ${props.open ? "20px" : "0px"}; - `} -` - -const Index = styled.div` - margin-left: 20px; - white-space: nowrap; - ${unica("s16")}; - ${pMedia.sm` - ${unica("s14")} - `}; -` - -const CaptionContainer = styled.div` - display: flex; - justify-content: space-between; - background-color: ${Colors.gray}; - padding: 30px 60px; - - p { - margin: 0; - } - - ${pMedia.sm` - position: absolute; - bottom: 0; - width: 100%; - max-width: 100vh; - padding: 20px; - `}; -` - -const CaptionTextContainer = styled.div` - display: flex; - flex-direction: column; -` diff --git a/src/Components/Publishing/Sections/FullscreenViewer/FullscreenViewer.tsx b/src/Components/Publishing/Sections/FullscreenViewer/FullscreenViewer.tsx index 9de330979b..0ae52e07e9 100644 --- a/src/Components/Publishing/Sections/FullscreenViewer/FullscreenViewer.tsx +++ b/src/Components/Publishing/Sections/FullscreenViewer/FullscreenViewer.tsx @@ -1,10 +1,16 @@ -import { pMedia } from "Components/Helpers" -import Icon from "Components/Icon" +import { + ArrowLeftIcon, + ArrowRightIcon, + Clickable, + CloseIcon, + ModalBase, +} from "@artsy/palette" import { map } from "lodash" import PropTypes from "prop-types" import React, { Component, HTMLProps } from "react" +// TODO: This is the only place this dependency is used. It'd be easy to remove! import Slider, { Settings } from "react-slick" -import styled, { StyledFunction } from "styled-components" +import styled from "styled-components" import { Slide } from "./Slide" interface FullscreenViewerProps extends HTMLProps { @@ -40,12 +46,6 @@ export class FullscreenViewer extends Component< } } - handleKeydown = e => { - if (e.keyCode === 27) { - this.close(e) - } - } - getChildContext() { return { onToggleCaption: this.toggleCaption } } @@ -54,10 +54,6 @@ export class FullscreenViewer extends Component< this.setState({ isCaptionOpen: !this.state.isCaptionOpen }) } - close = e => { - this.props.onClose() - } - renderImageComponents = () => { const images = this.props.images return map(images, (section, i) => { @@ -86,75 +82,66 @@ export class FullscreenViewer extends Component< prevArrow: , initialSlide: this.props.slideIndex, } + return ( -
+ <> {this.props.show && ( - + (this.slider = slider)}> {this.renderImageComponents()} - - - - + + + + + )} -
+ ) } } +const NavArrow = styled(Clickable).attrs({ + display: ["none", "flex"], + px: 3, + py: 6, +})` + position: absolute; + top: 50%; + transform: translateY(-50%); + justify-content: center; + align-items: center; + cursor: pointer; + z-index: 1; +` + const LeftArrow = props => { return ( - - + + ) } const RightArrow = props => { return ( - - + + ) } - -export const FullscreenViewerContainer = styled.div` - width: 100vw; - height: 100vh; - overflow: hidden; - position: fixed; - z-index: 1070; - top: 0; - left: 0; - background-color: white; -` -const Close = styled.div` - position: absolute; - right: 0; - top: 0; - margin: 20px; - cursor: pointer; -` -interface NavArrowProps extends React.HTMLProps { - direction: string -} -const div: StyledFunction = styled.div -const NavArrow = div` - display: flex; - align-items: center; - position: absolute; - height: 100vh; - top: 0; - box-sizing: border-box; - ${props => (props.direction === "left" ? "left: 0px;" : "")}; - ${props => (props.direction === "right" ? "right: 0px;" : "")}; - ${Icon} { - z-index: 10; - cursor: pointer; - padding: 60px; - }; - ${pMedia.sm` - display: none; - `}; -` diff --git a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/Caption.test.tsx b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/Caption.test.tsx index e65bb15d2d..f28d16e6f8 100644 --- a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/Caption.test.tsx +++ b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/Caption.test.tsx @@ -22,13 +22,15 @@ it("renders an image caption properly", () => { it("toggles the caption on mobile to hide", () => { const context = { onToggleCaption: jest.fn() } const caption = mount( - , +
+ +
, { childContextTypes: context, context, } ) - const node = caption.find(".fullscreen-viewer__caption-toggle").at(0) + const node = caption.find("Text").at(0) expect(node.text()).toBe("Hide") node.simulate("click") expect(context.onToggleCaption.mock.calls.length).toBeGreaterThan(0) @@ -37,13 +39,15 @@ it("toggles the caption on mobile to hide", () => { it("toggles the caption on mobile to view", () => { const context = { onToggleCaption: jest.fn() } const caption = mount( - , +
+ +
, { childContextTypes: context, context, } ) - const node = caption.find(".fullscreen-viewer__caption-toggle").at(0) + const node = caption.find("Text").at(0) expect(node.text()).toBe("View Caption") node.simulate("click") expect(context.onToggleCaption.mock.calls.length).toBeGreaterThan(0) diff --git a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/FullscreenViewer.test.tsx b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/FullscreenViewer.test.tsx index 5ea6d96508..47d11f7665 100644 --- a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/FullscreenViewer.test.tsx +++ b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/FullscreenViewer.test.tsx @@ -1,29 +1,14 @@ -import { Images } from "Components/Publishing/Fixtures/Components" -import { mount } from "enzyme" -import "jest-styled-components" import React from "react" -import renderer from "react-test-renderer" -import { - FullscreenViewer, - FullscreenViewerContainer, -} from "../FullscreenViewer" +import { mount } from "enzyme" +import { FullscreenViewer } from "../FullscreenViewer" +import { Images } from "Components/Publishing/Fixtures/Components" it("renders properly", () => { - const onClose = jest.fn() - const viewer = renderer - .create() - .toJSON() - expect(viewer).toMatchSnapshot() -}) - -it("closes the viewer on ESC keydown", () => { - const onClose = jest.fn() - const viewer = mount( - + const wrapper = mount( + {}} /> ) - viewer - .find(FullscreenViewerContainer) - .at(0) - .simulate("keyDown", { keyCode: 27 }) - expect(onClose).toBeCalled() + const html = wrapper.html() + expect(html).toContain("Close") + expect(html).toContain("View Caption") + expect(html).toContain("Guggenheim Museum") }) diff --git a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Caption.test.tsx.snap b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Caption.test.tsx.snap index 1e3e981c21..fa41b3e83a 100644 --- a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Caption.test.tsx.snap +++ b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Caption.test.tsx.snap @@ -1,391 +1,885 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders an artwork caption properly 1`] = ` -.c5 { - font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; - font-weight: 500; - font-size: 14px; - line-height: 24px; -} - -.c7 { - margin-right: 30px; +Array [ + .c0 { + padding: 8px; + background-color: black5; } -.c8 { - white-space: nowrap; +.c4 { + padding-top: 8px; } -.c4 { +.c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } -.c4 a { - color: black; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c4 .title, -.c4 .title a { - font-style: italic; +.c6 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + color: black100; } .c2 { - display: none; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + text-align: left; + font-size: size3; + line-height: body; + font-weight: normal; + text-align: left; + font-family: sans; } .c3 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } -.c3 a { - color: black; +.c12 { + font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 20px; + padding-top: 1px; } -.c9 { - margin-left: 20px; +.c11 { + cursor: pointer; + position: relative; white-space: nowrap; - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; + border: 2px solid; + border-radius: 3px; + border-radius: 3px; + padding-left: 20px; + padding-right: 20px; + height: 41px; + -webkit-transition: 0.25s ease; + transition: 0.25s ease; + background-color: #E5E5E5; + border-color: #E5E5E5; + color: #000; +} + +.c11.loading { + -webkit-transition: none; + transition: none; + background-color: transparent; + color: transparent; + border: 0; + cursor: auto; +} + +.c11.disabled { + background-color: #E5E5E5; + border-color: #E5E5E5; + color: #FFF; + pointer-events: none; } -.c0 { +.c1 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + border: 0; + background-color: transparent; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - background-color: #f8f8f8; - padding: 30px 60px; + width: 100%; } -.c0 p { - margin: 0; +.c9 { + margin-right: 30px; + color: #000; } -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; +.c10 { + white-space: nowrap; } -@media screen and (min-width:40em) { - .c5 { - font-size: 16px; - } +.c7 { + font-size: size4; + line-height: body; + font-weight: normal; + font-family: sans; } -@media screen and (min-width:40em) { - .c5 { - line-height: 26px; - } +.c7 a { + -webkit-text-decoration: none; + text-decoration: none; } -@media (max-width:720px) { - .c4 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } +.c7 .title, +.c7 .title a { + font-style: italic; } -@media (max-width:720px) { - .c6.artist-name { - margin-bottom: 5px; +@media (min-width:) { + .c2 { + font-size: size2; + line-height: body; + font-weight: normal; + text-align: left; + font-family: sans; } } -@media (max-width:720px) { - .c2 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - cursor: pointer; - display: inline-block; +@media (min-width:) { + .c3 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; } +} - .c2 span { - border-bottom: 1px solid black; +@media not all and (pointer:coarse),not all and (-moz-touch-enabled:1) { + .c11:hover { + background-color: #C2C2C2; + border-color: #C2C2C2; + color: #000; } } -@media (max-width:720px) { - .c3 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - display: block; - margin-top: 20px; +@media (min-width:) { + .c7 { + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } } @media (max-width:720px) { - .c9 { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; + .c7 { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } } @media (max-width:720px) { - .c0 { - position: absolute; - bottom: 0; - width: 100%; - max-width: 100vh; - padding: 20px; + .c8.artist-name { + margin-bottom: 5px; } }
- , + .c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.c3 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + color: black100; +} + +.c0 { + position: relative; + z-index: 2; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding-left: 128px; + padding-right: 128px; + padding-top: 16px; + padding-bottom: 16px; + background-color: black5; +} + +.c1 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.c10 { + padding-left: 8px; + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; +} + +.c9 { + font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 20px; + padding-top: 1px; +} + +.c8 { + cursor: pointer; + position: relative; + white-space: nowrap; + border: 2px solid; + border-radius: 3px; + border-radius: 3px; + padding-left: 20px; + padding-right: 20px; + height: 41px; + -webkit-transition: 0.25s ease; + transition: 0.25s ease; + background-color: #E5E5E5; + border-color: #E5E5E5; + color: #000; +} + +.c8.loading { + -webkit-transition: none; + transition: none; + background-color: transparent; + color: transparent; + border: 0; + cursor: auto; +} + +.c8.disabled { + background-color: #E5E5E5; + border-color: #E5E5E5; + color: #FFF; + pointer-events: none; +} + +.c6 { + margin-right: 30px; + color: #000; +} + +.c7 { + white-space: nowrap; +} + +.c4 { + font-size: size4; + line-height: body; + font-weight: normal; + font-family: sans; +} + +.c4 a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 .title, +.c4 .title a { + font-style: italic; +} + +@media (min-width:) { + .c10 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; + } +} + +@media not all and (pointer:coarse),not all and (-moz-touch-enabled:1) { + .c8:hover { + background-color: #C2C2C2; + border-color: #C2C2C2; + color: #000; + } +} + +@media (min-width:) { + .c4 { + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; + } +} + +@media (max-width:720px) { + .c4 { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } +} + +@media (max-width:720px) { + .c5.artist-name { + margin-bottom: 5px; + } +} + +
+
+
+
+
- - Gary Nader - - - . - - - Courtesy of Gary Nader - + + + + Fernando Botero + + + +
+
+
+ + + Nude on the Beach + + + + , + + + 2000 + +
+
+ + Gary Nader + + + . + + + Courtesy of Gary Nader + +
+
+
+
+ 2 + of + 10 +
-
-
- 2 of 10 -
-
+
, +] `; exports[`renders an image caption properly 1`] = ` -.c2 { - display: none; +Array [ + .c0 { + padding: 8px; + background-color: black5; } -.c3 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; +.c4 { + padding-top: 8px; } -.c3 a { - color: black; +.c2 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + text-align: left; + font-size: size3; + line-height: body; + font-weight: normal; + text-align: left; + font-family: sans; } -.c4 { - margin-left: 20px; - white-space: nowrap; - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; +.c3 { + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } -.c0 { +.c1 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + border: 0; + background-color: transparent; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - background-color: #f8f8f8; - padding: 30px 60px; + width: 100%; } -.c0 p { - margin: 0; +.c5 { + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; +} + +.c5 > h1, +.c5 > h2, +.c5 > h3, +.c5 > h4, +.c5 > h5, +.c5 > ul, +.c5 > ol, +.c5 > p, +.c5 > blockquote, +.c5 > pre, +.c5 > hr { + margin: 10px auto; +} + +.c5 > h1:first-child, +.c5 > h2:first-child, +.c5 > h3:first-child, +.c5 > h4:first-child, +.c5 > h5:first-child, +.c5 > ul:first-child, +.c5 > ol:first-child, +.c5 > p:first-child, +.c5 > blockquote:first-child, +.c5 > pre:first-child, +.c5 > hr:first-child { + margin-top: 0; +} + +.c5 > h1:last-child, +.c5 > h2:last-child, +.c5 > h3:last-child, +.c5 > h4:last-child, +.c5 > h5:last-child, +.c5 > ul:last-child, +.c5 > ol:last-child, +.c5 > p:last-child, +.c5 > blockquote:last-child, +.c5 > pre:last-child, +.c5 > hr:last-child { + margin-bottom: 0; +} + +.c5 > hr { + height: 1px; + border: 0; + background-color: #E5E5E5; +} + +@media (min-width:) { + .c2 { + font-size: size2; + line-height: body; + font-weight: normal; + text-align: left; + font-family: sans; + } } -.c1 { +@media (min-width:) { + .c3 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; + } +} + +@media (min-width:) { + .c5 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; + } +} + +
+
+ +
+
Photo by Adam Kuehl for Artsy.

", + } + } + fontFamily="sans" + /> +
+
+
, + .c0 { + position: relative; + z-index: 2; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + padding-left: 128px; + padding-right: 128px; + padding-top: 16px; + padding-bottom: 16px; + background-color: black5; } -@media (max-width:720px) { - .c2 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - cursor: pointer; - display: inline-block; - } - - .c2 span { - border-bottom: 1px solid black; - } +.c1 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } -@media (max-width:720px) { - .c3 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - display: block; - margin-top: 20px; - } +.c3 { + padding-left: 8px; + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } -@media (max-width:720px) { - .c4 { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; +.c2 { + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; +} + +.c2 > h1, +.c2 > h2, +.c2 > h3, +.c2 > h4, +.c2 > h5, +.c2 > ul, +.c2 > ol, +.c2 > p, +.c2 > blockquote, +.c2 > pre, +.c2 > hr { + margin: 10px auto; +} + +.c2 > h1:first-child, +.c2 > h2:first-child, +.c2 > h3:first-child, +.c2 > h4:first-child, +.c2 > h5:first-child, +.c2 > ul:first-child, +.c2 > ol:first-child, +.c2 > p:first-child, +.c2 > blockquote:first-child, +.c2 > pre:first-child, +.c2 > hr:first-child { + margin-top: 0; +} + +.c2 > h1:last-child, +.c2 > h2:last-child, +.c2 > h3:last-child, +.c2 > h4:last-child, +.c2 > h5:last-child, +.c2 > ul:last-child, +.c2 > ol:last-child, +.c2 > p:last-child, +.c2 > blockquote:last-child, +.c2 > pre:last-child, +.c2 > hr:last-child { + margin-bottom: 0; +} + +.c2 > hr { + height: 1px; + border: 0; + background-color: #E5E5E5; +} + +@media (min-width:) { + .c3 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; } } -@media (max-width:720px) { - .c0 { - position: absolute; - bottom: 0; - width: 100%; - max-width: 100vh; - padding: 20px; +@media (min-width:) { + .c2 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; } }
-
- - Hide - -
-
Photo by Adam Kuehl for Artsy.

", + className="c1" + > +
Photo by Adam Kuehl for Artsy.

", + } } - } - /> + fontFamily="sans" + /> +
+
+ 3 + of + 10 +
-
-
- 3 of 10 -
-
+
, +] `; diff --git a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/FullscreenViewer.test.tsx.snap b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/FullscreenViewer.test.tsx.snap deleted file mode 100644 index b02cf5d66e..0000000000 --- a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/FullscreenViewer.test.tsx.snap +++ /dev/null @@ -1,504 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders properly 1`] = ` -.c9 { - font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; - font-weight: 500; - font-size: 14px; - line-height: 24px; -} - -.c17 { - font-family: artsy-icons; - color: gray; - font-size: 24px; - margin: 0 5px; - display: inline-block; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - position: relative; - color: gray; -} - -.c11 { - margin-right: 30px; -} - -.c12 { - white-space: nowrap; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c8 a { - color: black; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c8 .title, -.c8 .title a { - font-style: italic; -} - -.c6 { - display: none; -} - -.c7 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; -} - -.c7 a { - color: black; -} - -.c13 { - margin-left: 20px; - white-space: nowrap; - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - background-color: #f8f8f8; - padding: 30px 60px; -} - -.c4 p { - margin: 0; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c1 { - width: 100vw; - height: 100vh; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; -} - -.c3 { - display: block; - background: url(https://d7hftxdivxxvm.cloudfront.net?resize_to=width&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F0aRUvnVgQKbQk5dj8xcCAg%2Flarger.jpg&width=1200&quality=80) no-repeat center; - background-size: contain; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - margin: 50px 60px; -} - -.c14 { - display: block; - background: url(https://d7hftxdivxxvm.cloudfront.net?resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2Fco8j2xq40ROMyBrJQm_4eQ%252FDafenOilPaintingVillage_AK03.jpg&width=1200&quality=80) no-repeat center; - background-size: contain; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - margin: 50px 60px; -} - -.c15 { - display: block; - background: url(https://d7hftxdivxxvm.cloudfront.net?resize_to=width&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FCpHY-DRr7KW0HGXLslCXHw%2Flarger.jpg&width=1200&quality=80) no-repeat center; - background-size: contain; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - margin: 50px 60px; -} - -.c2 { - min-height: 25px; - padding: 30px 60px 0 60px; - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 40px; - line-height: 1.1em; -} - -.c0 { - width: 100vw; - height: 100vh; - overflow: hidden; - position: fixed; - z-index: 1070; - top: 0; - left: 0; - background-color: white; -} - -.c16 { - position: absolute; - right: 0; - top: 0; - margin: 20px; - cursor: pointer; -} - -@media screen and (min-width:40em) { - .c9 { - font-size: 16px; - } -} - -@media screen and (min-width:40em) { - .c9 { - line-height: 26px; - } -} - -@media (max-width:720px) { - .c8 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } -} - -@media (max-width:720px) { - .c10.artist-name { - margin-bottom: 5px; - } -} - -@media (max-width:720px) { - .c6 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - cursor: pointer; - display: inline-block; - } - - .c6 span { - border-bottom: 1px solid black; - } -} - -@media (max-width:720px) { - .c7 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - display: none; - margin-top: 0px; - } -} - -@media (max-width:720px) { - .c13 { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - } -} - -@media (max-width:720px) { - .c4 { - position: absolute; - bottom: 0; - width: 100%; - max-width: 100vh; - padding: 20px; - } -} - -@media (max-width:720px) { - .c3 { - margin: 20px 0 80px 0; - } -} - -@media (max-width:720px) { - .c14 { - margin: 20px 0 80px 0; - } -} - -@media (max-width:720px) { - .c15 { - margin: 20px 0 80px 0; - } -} - -@media (max-width:720px) { - .c2 { - padding: 20px 60px 0 20px; - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 19px; - line-height: 1.5em; - } -} - -
-
-
-
-
-
- -
-
-
-
-
- - View Caption - -
-
-
-
- -
-
- - - Nude on the Beach - - - - , - - - 2000 - -
-
- - Gary Nader - - - . - - - Courtesy of Gary Nader - -
-
-
-
-
-
-
- 1 of 3 -
-
-
-
-
-
-
- New York City -
-
-
-
-
- - View Caption - -
-
-
Photo by Adam Kuehl for Artsy.

", - } - } - /> -
-
-
- 2 of 3 -
-
-
-
-
-
-
- New York City -
-
-
-
-
- - View Caption - -
-
-
Photo by Adam Kuehl for Artsy. Image courtesy of the Guggenheim Museum.

", - } - } - /> -
-
-
- 3 of 3 -
-
-
-
-
-
-
-  -
-
-
-
-`; diff --git a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Slide.test.tsx.snap b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Slide.test.tsx.snap index a377118398..661818b874 100644 --- a/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Slide.test.tsx.snap +++ b/src/Components/Publishing/Sections/FullscreenViewer/__tests__/__snapshots__/Slide.test.tsx.snap @@ -1,88 +1,154 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders properly 1`] = ` -.c8 { - font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; - font-weight: 500; - font-size: 14px; - line-height: 24px; +.c3 { + padding: 8px; + background-color: black5; } -.c10 { - margin-right: 30px; +.c7 { + position: relative; + z-index: 2; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding-left: 128px; + padding-right: 128px; + padding-top: 16px; + padding-bottom: 16px; + background-color: black5; } -.c11 { - white-space: nowrap; +.c8 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } -.c7 { +.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; } -.c7 a { - color: black; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c7 .title, -.c7 .title a { - font-style: italic; +.c10 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + color: black100; } .c5 { - display: none; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + text-align: left; + font-size: size3; + line-height: body; + font-weight: normal; + text-align: left; + font-family: sans; } .c6 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } -.c6 a { - color: black; +.c17 { + padding-left: 8px; + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } -.c12 { - margin-left: 20px; +.c16 { + font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 20px; + padding-top: 1px; +} + +.c15 { + cursor: pointer; + position: relative; white-space: nowrap; - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 16px; - line-height: 1.1em; + border: 2px solid; + border-radius: 3px; + border-radius: 3px; + padding-left: 20px; + padding-right: 20px; + height: 41px; + -webkit-transition: 0.25s ease; + transition: 0.25s ease; + background-color: #E5E5E5; + border-color: #E5E5E5; + color: #000; } -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - background-color: #f8f8f8; - padding: 30px 60px; +.c15.loading { + -webkit-transition: none; + transition: none; + background-color: transparent; + color: transparent; + border: 0; + cursor: auto; } -.c3 p { - margin: 0; +.c15.disabled { + background-color: #E5E5E5; + border-color: #E5E5E5; + color: #FFF; + pointer-events: none; } .c4 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + border: 0; + background-color: transparent; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + width: 100%; +} + +.c13 { + margin-right: 30px; + color: #000; +} + +.c14 { + white-space: nowrap; +} + +.c11 { + font-size: size4; + line-height: body; + font-weight: normal; + font-family: sans; +} + +.c11 a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c11 .title, +.c11 .title a { + font-style: italic; } .c0 { @@ -117,74 +183,62 @@ exports[`renders properly 1`] = ` line-height: 1.1em; } -@media screen and (min-width:40em) { - .c8 { - font-size: 16px; - } -} - -@media screen and (min-width:40em) { - .c8 { - line-height: 26px; +@media (min-width:) { + .c5 { + font-size: size2; + line-height: body; + font-weight: normal; + text-align: left; + font-family: sans; } } -@media (max-width:720px) { - .c7 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; +@media (min-width:) { + .c6 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; } } -@media (max-width:720px) { - .c9.artist-name { - margin-bottom: 5px; +@media (min-width:) { + .c17 { + font-size: size2; + line-height: body; + font-weight: normal; + font-family: sans; } } -@media (max-width:720px) { - .c5 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - cursor: pointer; - display: inline-block; - } - - .c5 span { - border-bottom: 1px solid black; +@media not all and (pointer:coarse),not all and (-moz-touch-enabled:1) { + .c15:hover { + background-color: #C2C2C2; + border-color: #C2C2C2; + color: #000; } } -@media (max-width:720px) { - .c6 { - font-family: Unica77LLWebMedium,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - display: none; - margin-top: 0px; +@media (min-width:) { + .c11 { + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } } @media (max-width:720px) { - .c12 { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; + .c11 { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } } @media (max-width:720px) { - .c3 { - position: absolute; - bottom: 0; - width: 100%; - max-width: 100vh; - padding: 20px; + .c12.artist-name { + margin-bottom: 5px; } } @@ -221,103 +275,146 @@ exports[`renders properly 1`] = ` src="https://d7hftxdivxxvm.cloudfront.net?resize_to=width&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F0aRUvnVgQKbQk5dj8xcCAg%2Flarger.jpg&width=1200&quality=80" />
-
- +
View Caption - -
+
+
+ of +
+ +
+
+
+
-
+
-
- - - Nude on the Beach - - - - , - - - 2000 - + + Fernando Botero + + +
-
- +
- Gary Nader - - - . - - + + Nude on the Beach + + + + , + + + 2000 + +
+
- Courtesy of Gary Nader - + + Gary Nader + + + . + + + Courtesy of Gary Nader + +
+
-
-
- undefined of undefined +
+ of +
diff --git a/src/Components/Publishing/Sections/__tests__/__snapshots__/Artwork.test.tsx.snap b/src/Components/Publishing/Sections/__tests__/__snapshots__/Artwork.test.tsx.snap index f05dc59855..053aa76935 100644 --- a/src/Components/Publishing/Sections/__tests__/__snapshots__/Artwork.test.tsx.snap +++ b/src/Components/Publishing/Sections/__tests__/__snapshots__/Artwork.test.tsx.snap @@ -1,38 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Artwork snapshots renders properly 1`] = ` -.c8 { - font-family: Unica77LLWebRegular,'Helvetica Neue',Helvetica,Arial,sans-serif; - font-size: 14px; - line-height: 24px; - color: #C2C2C2; +.c7 { + width: 100%; + height: auto; + color: black60; } .c9 { margin-right: 30px; + color: #000; } .c10 { white-space: nowrap; } -.c7 { +.c8 { + color: black60; + font-size: size4; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; padding: 0; margin-top: 10px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } -.c7 a { - color: #C2C2C2; +.c8 a { + color: inherit; -webkit-text-decoration: none; text-decoration: none; } -.c7 .title, -.c7 .title a { +.c8 .title, +.c8 .title a { font-style: italic; } @@ -96,8 +98,18 @@ exports[`Artwork snapshots renders properly 1`] = ` flex-direction: column; } +@media (min-width:) { + .c8 { + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media (max-width:600px) { - .c7 { + .c8 { padding: 0 10px; } } @@ -181,15 +193,18 @@ exports[`Artwork snapshots renders properly 1`] = `
-
+
- - +
+@media (min-width:) { + .c1 { + font-size: size3; + line-height: body; + font-weight: normal; + font-family: serif; + color: black60; + } +} + +
Fernando BoteroNude on the Beach, 2000. Gary Nader", + "__html": "Fernando BoteroNude on the Beach, 2000. Gary Nader", } } /> @@ -52,49 +66,43 @@ exports[`ArtworkCaption snapshot renders a classic caption properly 1`] = ` `; exports[`ArtworkCaption snapshot renders a fullscreen caption properly 1`] = ` -.c1 { - font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; - font-weight: 500; - font-size: 14px; - line-height: 24px; +.c0 { + color: black60; } .c3 { margin-right: 30px; + color: #000; } -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; +.c1 { + font-size: size4; + line-height: body; + font-weight: normal; + font-family: sans; } -.c0 a { - color: black; +.c1 a { -webkit-text-decoration: none; text-decoration: none; } -.c0 .title, -.c0 .title a { +.c1 .title, +.c1 .title a { font-style: italic; } -@media screen and (min-width:40em) { +@media (min-width:) { .c1 { - font-size: 16px; - } -} - -@media screen and (min-width:40em) { - .c1 { - line-height: 26px; + font-size: size3; + line-height: body; + font-weight: normal; + font-family: sans; } } @media (max-width:720px) { - .c0 { + .c1 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -107,27 +115,18 @@ exports[`ArtworkCaption snapshot renders a fullscreen caption properly 1`] = ` } } -
+
- Fernando Botero - +
+
- Fernando Botero - +
p, -.c1 p, -.c1 .public-DraftEditorPlaceholder-root, -.c1 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c1 > a, .c1 a { - color: #999; + color: inherit; } .c1 > a:hover, .c1 a:hover { - color: black; + color: #000; +} + +@media (min-width:) { + .c2 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } } @media (max-width:600px) { @@ -50,7 +56,7 @@ exports[`renders a child even if a caption is provided 1`] = ` @media (max-width:600px) { .c1 { - padding: 0px; + padding: 0; } } @@ -60,14 +66,29 @@ exports[`renders a child even if a caption is provided 1`] = `
-
- Here is a passed child +
+
+ Here is a passed child +
`; exports[`renders a saved caption properly 1`] = ` +.c2 { + color: black60; + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; +} + .c0 { display: -webkit-box; display: -webkit-flex; @@ -86,27 +107,24 @@ exports[`renders a saved caption properly 1`] = ` word-break: break-word; } -.c1 > p, -.c1 p, -.c1 .public-DraftEditorPlaceholder-root, -.c1 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c1 > a, .c1 a { - color: #999; + color: inherit; } .c1 > a:hover, .c1 a:hover { - color: black; + color: #000; +} + +@media (min-width:) { + .c2 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } } @media (max-width:600px) { @@ -117,7 +135,7 @@ exports[`renders a saved caption properly 1`] = ` @media (max-width:600px) { .c1 { - padding: 0px; + padding: 0; } } @@ -128,12 +146,18 @@ exports[`renders a saved caption properly 1`] = ` className="c1" >
This is a saved caption

", + className="c2" + color="black60" + fontFamily="sans" + > +
This is a saved caption

", + } } - } - /> + /> +
`; diff --git a/src/Components/Publishing/Sections/__tests__/__snapshots__/Image.test.tsx.snap b/src/Components/Publishing/Sections/__tests__/__snapshots__/Image.test.tsx.snap index 680eb3bc97..0cd9c03cff 100644 --- a/src/Components/Publishing/Sections/__tests__/__snapshots__/Image.test.tsx.snap +++ b/src/Components/Publishing/Sections/__tests__/__snapshots__/Image.test.tsx.snap @@ -1,6 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Image snapshots renders a long caption properly 1`] = ` +.c7 { + color: black60; + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; +} + .c5 { display: -webkit-box; display: -webkit-flex; @@ -19,27 +28,14 @@ exports[`Image snapshots renders a long caption properly 1`] = ` word-break: break-word; } -.c6 > p, -.c6 p, -.c6 .public-DraftEditorPlaceholder-root, -.c6 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c6 > a, .c6 a { - color: #999; + color: inherit; } .c6 > a:hover, .c6 a:hover { - color: black; + color: #000; } .c4 { @@ -87,6 +83,16 @@ exports[`Image snapshots renders a long caption properly 1`] = ` display: block; } +@media (min-width:) { + .c7 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media (max-width:600px) { .c5 { padding: 0px 10px; @@ -95,7 +101,7 @@ exports[`Image snapshots renders a long caption properly 1`] = ` @media (max-width:600px) { .c6 { - padding: 0px; + padding: 0; } } @@ -180,18 +186,33 @@ exports[`Image snapshots renders a long caption properly 1`] = ` className="c6" >
Photo by Adam Kuehl for Artsy. Image courtesy of the Guggenheim Museum.

", + className="c7" + color="black60" + fontFamily="sans" + > +
Photo by Adam Kuehl for Artsy. Image courtesy of the Guggenheim Museum.

", + } } - } - /> + /> +
`; exports[`Image snapshots renders a react child as caption properly 1`] = ` +.c7 { + color: black60; + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; +} + .c5 { display: -webkit-box; display: -webkit-flex; @@ -210,27 +231,14 @@ exports[`Image snapshots renders a react child as caption properly 1`] = ` word-break: break-word; } -.c6 > p, -.c6 p, -.c6 .public-DraftEditorPlaceholder-root, -.c6 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c6 > a, .c6 a { - color: #999; + color: inherit; } .c6 > a:hover, .c6 a:hover { - color: black; + color: #000; } .c4 { @@ -278,6 +286,16 @@ exports[`Image snapshots renders a react child as caption properly 1`] = ` display: block; } +@media (min-width:) { + .c7 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media (max-width:600px) { .c5 { padding: 0px 10px; @@ -286,7 +304,7 @@ exports[`Image snapshots renders a react child as caption properly 1`] = ` @media (max-width:600px) { .c6 { - padding: 0px; + padding: 0; } } @@ -371,12 +389,18 @@ exports[`Image snapshots renders a react child as caption properly 1`] = ` className="c6" >
Photo by Adam Kuehl for Artsy. Image courtesy of the Guggenheim Museum.

", + className="c7" + color="black60" + fontFamily="sans" + > +
Photo by Adam Kuehl for Artsy. Image courtesy of the Guggenheim Museum.

", + } } - } - /> + /> +
@@ -387,6 +411,15 @@ exports[`Image snapshots renders a react child as caption properly 1`] = ` `; exports[`Image snapshots renders properly 1`] = ` +.c7 { + color: black60; + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; +} + .c5 { display: -webkit-box; display: -webkit-flex; @@ -405,27 +438,14 @@ exports[`Image snapshots renders properly 1`] = ` word-break: break-word; } -.c6 > p, -.c6 p, -.c6 .public-DraftEditorPlaceholder-root, -.c6 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c6 > a, .c6 a { - color: #999; + color: inherit; } .c6 > a:hover, .c6 a:hover { - color: black; + color: #000; } .c4 { @@ -473,6 +493,16 @@ exports[`Image snapshots renders properly 1`] = ` display: block; } +@media (min-width:) { + .c7 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media (max-width:600px) { .c5 { padding: 0px 10px; @@ -481,7 +511,7 @@ exports[`Image snapshots renders properly 1`] = ` @media (max-width:600px) { .c6 { - padding: 0px; + padding: 0; } } @@ -566,12 +596,18 @@ exports[`Image snapshots renders properly 1`] = ` className="c6" >
Photo by Adam Kuehl for Artsy.

", + className="c7" + color="black60" + fontFamily="sans" + > +
Photo by Adam Kuehl for Artsy.

", + } } - } - /> + /> +
diff --git a/src/Components/Publishing/Sections/__tests__/__snapshots__/ImageCollection.test.tsx.snap b/src/Components/Publishing/Sections/__tests__/__snapshots__/ImageCollection.test.tsx.snap index 2b8612f235..4fffde402a 100644 --- a/src/Components/Publishing/Sections/__tests__/__snapshots__/ImageCollection.test.tsx.snap +++ b/src/Components/Publishing/Sections/__tests__/__snapshots__/ImageCollection.test.tsx.snap @@ -1,38 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders a single image properly 1`] = ` -.c10 { - font-family: Unica77LLWebRegular,'Helvetica Neue',Helvetica,Arial,sans-serif; - font-size: 14px; - line-height: 24px; - color: #C2C2C2; +.c9 { + color: black60; + width: 100%; + height: auto; } .c11 { margin-right: 30px; + color: #000; } .c12 { white-space: nowrap; } -.c9 { +.c10 { + color: black60; + font-size: size4; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; padding: 0; margin-top: 10px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } -.c9 a { - color: #C2C2C2; +.c10 a { + color: inherit; -webkit-text-decoration: none; text-decoration: none; } -.c9 .title, -.c9 .title a { +.c10 .title, +.c10 .title a { font-style: italic; } @@ -119,8 +121,18 @@ exports[`renders a single image properly 1`] = ` height: auto; } +@media (min-width:) { + .c10 { + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media (max-width:600px) { - .c9 { + .c10 { padding: 0 10px; } } @@ -229,15 +241,18 @@ exports[`renders a single image properly 1`] = `
-
+
- - +
p, -.c15 p, -.c15 .public-DraftEditorPlaceholder-root, -.c15 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c15 > a, .c15 a { - color: #999; + color: inherit; } .c15 > a:hover, .c15 a:hover { - color: black; + color: #000; } .c0 { @@ -476,19 +489,39 @@ exports[`renders properly 1`] = ` height: auto; } -.c16 { +.c17 { margin-right: 0px; width: 178px; max-width: 100%; } -.c16 img { +.c17 img { max-width: 100%; height: auto; } +@media (min-width:) { + .c16 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + +@media (min-width:) { + .c10 { + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media (max-width:600px) { - .c9 { + .c10 { padding: 0 10px; } } @@ -507,7 +540,7 @@ exports[`renders properly 1`] = ` @media (max-width:600px) { .c15 { - padding: 0px; + padding: 0; } } @@ -542,12 +575,12 @@ exports[`renders properly 1`] = ` } @media (max-width:600px) { - .c16 { + .c17 { margin-bottom: 10px; width: 100%; } - .c16 img { + .c17 img { width: 100%; } } @@ -632,15 +665,18 @@ exports[`renders properly 1`] = `
-
+
- - +
Photo by Adam Kuehl for Artsy.

", + className="c16" + color="black60" + fontFamily="sans" + > +
Photo by Adam Kuehl for Artsy.

", + } } - } - /> + /> +
Photo by Adam Kuehl for Artsy. Image courtesy of the Guggenheim Museum.

", + className="c16" + color="black60" + fontFamily="sans" + > +
Photo by Adam Kuehl for Artsy. Image courtesy of the Guggenheim Museum.

", + } } - } - /> + /> +
diff --git a/src/Components/Publishing/Sections/__tests__/__snapshots__/Sections.test.tsx.snap b/src/Components/Publishing/Sections/__tests__/__snapshots__/Sections.test.tsx.snap index 640624eafa..d928857a44 100644 --- a/src/Components/Publishing/Sections/__tests__/__snapshots__/Sections.test.tsx.snap +++ b/src/Components/Publishing/Sections/__tests__/__snapshots__/Sections.test.tsx.snap @@ -1,11 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Sections snapshots tests renders properly 1`] = ` -.c25 { +.c18 { + color: black60; + width: 264px; + height: 352px; +} + +.c26 { margin: auto; } -.c35 { +.c14 { + color: black60; + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; +} + +.c36 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -19,14 +34,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` display: flex; } -.c18 { - font-family: Unica77LLWebRegular,'Helvetica Neue',Helvetica,Arial,sans-serif; - font-size: 14px; - line-height: 24px; - color: #C2C2C2; -} - -.c26 { +.c27 { font-family: Unica77LLWebRegular,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 10px; line-height: 14px; @@ -34,7 +42,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` margin: 4px; } -.c36 { +.c37 { font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 500; font-size: 16px; @@ -42,28 +50,28 @@ exports[`Sections snapshots tests renders properly 1`] = ` padding-bottom: 8px; } -.c38 { +.c39 { font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; } -.c39 { +.c40 { font-family: Unica77LLWebRegular,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 12px; line-height: 16px; padding-left: 20px; } -.c45 { +.c46 { font-family: Unica77LLWebMedium,'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 500; font-size: 16px; line-height: 26px; } -.c24 { +.c25 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -82,31 +90,34 @@ exports[`Sections snapshots tests renders properly 1`] = ` visibility: hidden; } -.c19 { +.c20 { margin-right: 30px; + color: #000; } -.c20 { +.c21 { white-space: nowrap; } -.c17 { +.c19 { + color: black60; + font-size: size4; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; padding: 0; margin-top: 10px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } -.c17 a { - color: #C2C2C2; +.c19 a { + color: inherit; -webkit-text-decoration: none; text-decoration: none; } -.c17 .title, -.c17 .title a { +.c19 .title, +.c19 .title a { font-style: italic; } @@ -155,12 +166,12 @@ exports[`Sections snapshots tests renders properly 1`] = ` display: block; } -.c16 { +.c17 { -webkit-text-decoration: none; text-decoration: none; } -.c15 { +.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -188,27 +199,14 @@ exports[`Sections snapshots tests renders properly 1`] = ` word-break: break-word; } -.c13 > p, -.c13 p, -.c13 .public-DraftEditorPlaceholder-root, -.c13 .public-DraftStyleDefault-block { - font-family: Unica77LLWebRegular,Arial,serif; - -webkit-font-smoothing: antialiased; - font-size: 14px; - line-height: 1.4em; - color: #999; - margin: 0; - display: inline; -} - .c13 > a, .c13 a { - color: #999; + color: inherit; } .c13 > a:hover, .c13 a:hover { - color: black; + color: #000; } .c5 { @@ -234,68 +232,68 @@ exports[`Sections snapshots tests renders properly 1`] = ` height: auto; } -.c14 { +.c15 { margin-right: 0px; width: 264px; max-width: 100%; } -.c14 img { +.c15 img { max-width: 100%; height: auto; } -.c21 { +.c22 { margin-right: 10px; width: 219px; max-width: 100%; } -.c21 img { +.c22 img { max-width: 100%; height: auto; } -.c22 { +.c23 { margin-right: 0px; width: 219px; max-width: 100%; } -.c22 img { +.c23 img { max-width: 100%; height: auto; } -.c27 { +.c28 { margin-right: 0px; width: 100%; max-width: 100%; } -.c27 img { +.c28 img { max-width: 100%; height: auto; } -.c29 { +.c30 { margin-right: 10px; width: 216px; max-width: 100%; } -.c29 img { +.c30 img { max-width: 100%; height: auto; } -.c30 { +.c31 { margin-right: 0px; width: 222px; max-width: 100%; } -.c30 img { +.c31 img { max-width: 100%; height: auto; } @@ -324,7 +322,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` max-width: 100%; } -.c31 { +.c32 { box-sizing: border-box; margin: auto; margin-bottom: 40px; @@ -332,7 +330,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` max-width: 100%; } -.c42 { +.c43 { box-sizing: border-box; margin: auto; margin-bottom: 40px; @@ -340,7 +338,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` max-width: 100%; } -.c49 { +.c50 { font-family: artsy-icons; color: black; font-size: 24px; @@ -354,7 +352,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` color: black; } -.c44 { +.c45 { color: black; margin-bottom: 20px; -webkit-align-items: center; @@ -368,26 +366,26 @@ exports[`Sections snapshots tests renders properly 1`] = ` color: black; } -.c44 a { +.c45 a { color: black; } -.c46 { +.c47 { margin-right: 20px; } -.c47 { +.c48 { -webkit-text-decoration: none; text-decoration: none; white-space: nowrap; } -.c47 .c48 { +.c48 .c49 { vertical-align: middle; margin: 0; } -.c43 { +.c44 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -397,23 +395,23 @@ exports[`Sections snapshots tests renders properly 1`] = ` flex-direction: column; } -.c28 { +.c29 { width: 100%; height: 1000px; } -.c40 { +.c41 { height: 45px; position: relative; margin-left: 40px; text-align: right; } -.c40 > svg { +.c41 > svg { height: 98%; } -.c34 { +.c35 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -430,19 +428,19 @@ exports[`Sections snapshots tests renders properly 1`] = ` width: 100%; } -.c37 { +.c38 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.c32 { +.c33 { position: relative; width: 100%; } -.c33 { +.c34 { position: absolute; bottom: 20px; left: 20px; @@ -455,17 +453,17 @@ exports[`Sections snapshots tests renders properly 1`] = ` cursor: pointer; } -.c33:hover { +.c34:hover { background: rgba(0,0,0,0.6); color: white; } -.c33:hover path, -.c33:hover polygon { +.c34:hover path, +.c34:hover polygon { fill: white; } -.c41 { +.c42 { height: auto; width: 100%; } @@ -583,7 +581,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` background-size: 1.25px 1px; } -.c2 h2 .c50 { +.c2 h2 .c51 { background-position: bottom !important; } @@ -678,50 +676,70 @@ exports[`Sections snapshots tests renders properly 1`] = ` max-width: 780px; } -.c23 { +.c24 { margin-top: calc(100% - 96%); width: 100%; margin-left: 0; } +@media (min-width:) { + .c14 { + font-size: size2; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media screen and (min-width:40em) { - .c36 { + .c37 { font-size: 18px; } } @media screen and (min-width:40em) { - .c36 { + .c37 { line-height: 30px; } } @media screen and (min-width:40em) { - .c38 { + .c39 { font-size: 14px; } } @media screen and (min-width:40em) { - .c38 { + .c39 { line-height: 24px; } } @media screen and (min-width:40em) { - .c39 { + .c40 { font-size: 14px; } } @media screen and (min-width:40em) { - .c39 { + .c40 { line-height: 24px; } } +@media (min-width:) { + .c19 { + font-size: size3; + line-height: body; + font-weight: normal; + color: black60; + font-family: sans; + } +} + @media (max-width:600px) { - .c17 { + .c19 { padding: 0 10px; } } @@ -740,7 +758,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` @media (max-width:600px) { .c13 { - padding: 0px; + padding: 0; } } @@ -764,67 +782,67 @@ exports[`Sections snapshots tests renders properly 1`] = ` } @media (max-width:600px) { - .c14 { + .c15 { margin-bottom: 10px; width: 100%; } - .c14 img { + .c15 img { width: 100%; } } @media (max-width:600px) { - .c21 { + .c22 { margin-bottom: 10px; width: 100%; } - .c21 img { + .c22 img { width: 100%; } } @media (max-width:600px) { - .c22 { + .c23 { margin-bottom: 10px; width: 100%; } - .c22 img { + .c23 img { width: 100%; } } @media (max-width:600px) { - .c27 { + .c28 { margin-bottom: 10px; width: 100%; } - .c27 img { + .c28 img { width: 100%; } } @media (max-width:600px) { - .c29 { + .c30 { margin-bottom: 10px; width: 100%; } - .c29 img { + .c30 img { width: 100%; } } @media (max-width:600px) { - .c30 { + .c31 { margin-bottom: 10px; width: 100%; } - .c30 img { + .c31 img { width: 100%; } } @@ -866,25 +884,25 @@ exports[`Sections snapshots tests renders properly 1`] = ` } @media (max-width:1280px) { - .c31 { + .c32 { width: 680px; } } @media (max-width:900px) { - .c31 { + .c32 { padding: 0; } } @media (max-width:900px) { - .c42 { + .c43 { padding: 0 20px; } } @media (max-width:720px) { - .c28 { + .c29 { height: 1300px; width: 100%; } @@ -1120,12 +1138,18 @@ exports[`Sections snapshots tests renders properly 1`] = ` className="c13" >
John Elisle, The Star, from the reimagined female Tarot cards. Courtesy of the artist.

", + className="c14" + color="black60" + fontFamily="sans" + > +
John Elisle, The Star, from the reimagined female Tarot cards. Courtesy of the artist.

", + } } - } - /> + /> +
@@ -1209,25 +1233,31 @@ exports[`Sections snapshots tests renders properly 1`] = ` className="c13" >
John Elisle, The Magician, from the reimagined female Tarot cards. Courtesy of the artist.

", + className="c14" + color="black60" + fontFamily="sans" + > +
John Elisle, The Magician, from the reimagined female Tarot cards. Courtesy of the artist.

", + } } - } - /> + /> +
-
+
- - +
Nicolas Conver, Tarot card from Tarot de Marseille, ca. 1760. Via Wikimedia Commons.

", + className="c14" + color="black60" + fontFamily="sans" + > +
Nicolas Conver, Tarot card from Tarot de Marseille, ca. 1760. Via Wikimedia Commons.

", + } } - } - /> + /> +
Nicolas Conver, Queen of Clubs. Tarot card from Tarot de Marseille, ca. 1760. Via Wikimedia Commons.

", + className="c14" + color="black60" + fontFamily="sans" + > +
Nicolas Conver, Queen of Clubs. Tarot card from Tarot de Marseille, ca. 1760. Via Wikimedia Commons.

", + } } - } - /> + /> +
Nicolas Conver, Tarot card from Tarot de Marseille, ca. 1760. Via Wikimedia Commons.

", + className="c14" + color="black60" + fontFamily="sans" + > +
Nicolas Conver, Tarot card from Tarot de Marseille, ca. 1760. Via Wikimedia Commons.

", + } } - } - /> + /> +
Pamela Colman Smith, The Empress, c. 1937. Courtesy of the Beinecke Rare Book & Manuscript Library at Yale University.

", + className="c14" + color="black60" + fontFamily="sans" + > +
Pamela Colman Smith, The Empress, c. 1937. Courtesy of the Beinecke Rare Book & Manuscript Library at Yale University.

", + } } - } - /> + /> +
@@ -1826,7 +1883,7 @@ exports[`Sections snapshots tests renders properly 1`] = ` className="c3" >