From 690752f3feffb657bb388fcda3fa85de248cf099 Mon Sep 17 00:00:00 2001 From: Seung Park Date: Thu, 25 Aug 2022 13:10:18 -0400 Subject: [PATCH] DOP-3185: update icon sizing (#675) * DOP-2583: type now uses the typography component (#662) * update LG card to v6 * update jest snapshots * attempt 1 * continuing * fix package lock merge conflicts * more fixes * comment deletion * cleaning up more comments * tweak * MARGINAL MARGINS * address typography in cards. TODO: update links styling * remove log * update header component for PLP * more cleanup of margins, breadcrumbs, general code quality * let leafygreen color text in callouts * cleeeeanup * bump sidenav, fix various things, confused why on this page is wonkus * tidying up side nav and contents * update package-lock * Revert "DOP-3167: dangling punctuation after Link (#661)" This reverts commit ee2e40cb0ab2da04486fc77d8e1d543019bedc8c. * fix intro text color on guides landing * updated with seungs comments * minor fix for admonition margins * fixes from allison's feedback * updated with graces feedback * fix button on guides and remove redundant margins on plp * missed css fix * DOP-2578: update cards to use new typography (#673) * update cards+driver tiles to use typography. TODO: chapters * overwrite new card attributes with existing styling * minor. wrap line on card * address feedback w card * update operation and quiz choice components * tiles have no link inside card * remove border radius overwrite for guides. uniform font for tiles * font size on sidenav in landing, unsquish internal nav * DOP-2577: update LG/tabs to v8 (post typography update) (#674) update tabs to v8. tested with PLP and hidden tabs * increase line height on products list Co-authored-by: Seung Park Co-authored-by: Seung Park * update icon size * determine icon size based on plp or landing * minor. reduce margin on icon+description * update card tests Co-authored-by: Allison Reinheimer Moore Co-authored-by: Seung Park --- src/components/Card/index.js | 43 ++---- tests/unit/__snapshots__/Card.test.js.snap | 6 + .../unit/__snapshots__/CardGroup.test.js.snap | 122 +++++++----------- tests/unit/__snapshots__/CardRef.test.js.snap | 8 +- 4 files changed, 72 insertions(+), 107 deletions(-) diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 723638a88..6640f1f7f 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -23,7 +23,14 @@ const StyledCard = styled(LeafyGreenCard)` `; const CardIcon = styled('img')` + width: ${theme.size.large}; +`; + +const CompactIcon = styled('img')` width: ${theme.size.medium}; + @media ${theme.screenSize.upToSmall} { + width: 20px; + } `; const H4 = styled(Body)` @@ -43,30 +50,11 @@ const CompactCard = styled(StyledCard)` padding: ${theme.size.large} ${theme.size.medium}; `; -const CompactIcon = styled('img')` - margin: auto; - width: ${theme.size.medium}; - @media ${theme.screenSize.upToSmall} { - width: 20px; - } -`; - -const CompactIconCircle = styled('div')` - display: flex; - flex-shrink: 0 !important; - height: 48px; - width: 48px; - @media ${theme.screenSize.upToSmall} { - height: 40px; - width: 40px; - } -`; - const CompactTextWrapper = styled('div')` display: flex; flex-direction: column; height: 100%; - margin-left: ${theme.size.medium}; + margin-left: ${theme.size.small}; @media ${theme.screenSize.upToSmall} { margin-left: ${theme.size.default}; } @@ -89,23 +77,19 @@ const onCardClick = (url) => { const Card = ({ isCompact, isExtraCompact, + page, nodeData: { children, options: { cta, headline, icon, 'icon-alt': iconAlt, tag, url }, }, }) => { const Card = isCompact || isExtraCompact ? CompactCard : StyledCard; - const Icon = isCompact ? CompactIcon : CardIcon; + const template = page?.options?.template; + const Icon = ['landing', 'product-landing'].includes(template) ? CardIcon : CompactIcon; + return ( onCardClick(url) : undefined}> - {icon && ( - {children}} - > - - - )} + {icon && } {children}} @@ -142,6 +126,7 @@ Card.propTypes = { url: PropTypes.string, }), }).isRequired, + page: PropTypes.object, }; export default Card; diff --git a/tests/unit/__snapshots__/Card.test.js.snap b/tests/unit/__snapshots__/Card.test.js.snap index 8432959c5..eb519f43f 100644 --- a/tests/unit/__snapshots__/Card.test.js.snap +++ b/tests/unit/__snapshots__/Card.test.js.snap @@ -56,6 +56,12 @@ exports[`renders correctly 1`] = ` width: 24px; } +@media only screen and (max-width: 480px) { + .emotion-3 { + width: 20px; + } +} + .emotion-6 { -webkit-align-items: center; -webkit-box-align: center; diff --git a/tests/unit/__snapshots__/CardGroup.test.js.snap b/tests/unit/__snapshots__/CardGroup.test.js.snap index e2dbc09a5..496a9782e 100644 --- a/tests/unit/__snapshots__/CardGroup.test.js.snap +++ b/tests/unit/__snapshots__/CardGroup.test.js.snap @@ -97,36 +97,16 @@ exports[`renders correctly 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-shrink: 0!important; - -ms-flex-negative: 0!important; - flex-shrink: 0!important; - height: 48px; - width: 48px; -} - -@media only screen and (max-width: 480px) { - .emotion-5 { - height: 40px; - width: 40px; - } -} - -.emotion-7 { - margin: auto; width: 24px; } @media only screen and (max-width: 480px) { - .emotion-7 { + .emotion-5 { width: 20px; } } -.emotion-9 { +.emotion-7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -135,24 +115,24 @@ exports[`renders correctly 1`] = ` -ms-flex-direction: column; flex-direction: column; height: 100%; - margin-left: 24px; + margin-left: 8px; } @media only screen and (max-width: 480px) { - .emotion-9 { + .emotion-7 { margin-left: 16px; } } -.emotion-9 p { +.emotion-7 p { line-height: 24px; } -.emotion-11 { +.emotion-9 { margin-bottom: 16px; } -.emotion-13 { +.emotion-11 { margin: unset; font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -162,16 +142,16 @@ exports[`renders correctly 1`] = ` font-weight: 400; } -.emotion-13 strong, -.emotion-13 b { +.emotion-11 strong, +.emotion-11 b { font-weight: 700; } -.emotion-14 a { +.emotion-12 a { line-height: unset; } -.emotion-17 { +.emotion-15 { font-size: 13px; line-height: 20px; font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif; @@ -193,15 +173,15 @@ exports[`renders correctly 1`] = ` text-decoration: none!important; } -.emotion-17:focus { +.emotion-15:focus { outline: none; } -.emotion-18 { +.emotion-16 { position: relative; } -.emotion-18::after { +.emotion-16::after { content: ''; position: absolute; width: 100%; @@ -211,15 +191,15 @@ exports[`renders correctly 1`] = ` border-radius: 2px; } -.constant-classname:focus .emotion-18::after { +.constant-classname:focus .emotion-16::after { background-color: #0498EC; } -.constant-classname:hover .emotion-18::after { +.constant-classname:hover .emotion-16::after { background-color: #E8EDEB; } -.emotion-36 { +.emotion-32 { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -235,34 +215,30 @@ exports[`renders correctly 1`] = `
-
- MongoDB Atlas icon -
+ src="/images/icons/atlas.svg" + />

Use Compass to connect to your Atlas cluster

Read Atlas docs @@ -273,41 +249,37 @@ exports[`renders correctly 1`] = `

-
- MongoDB University icon -
+ src="/images/icons/university.svg" + />

Learn MongoDB Basics with MongoDB University

Learn MongoDB Basics

- MongoDB Server icon -
+ src="/images/icons/server.svg" + />

Access more in-depth examples of querying data

Read Server docs diff --git a/tests/unit/__snapshots__/CardRef.test.js.snap b/tests/unit/__snapshots__/CardRef.test.js.snap index c42709442..096f739b3 100644 --- a/tests/unit/__snapshots__/CardRef.test.js.snap +++ b/tests/unit/__snapshots__/CardRef.test.js.snap @@ -81,6 +81,12 @@ exports[`card correctly with and without url 1`] = ` width: 24px; } +@media only screen and (max-width: 480px) { + .emotion-5 { + width: 20px; + } +} + .emotion-7 { display: -webkit-box; display: -webkit-flex; @@ -90,7 +96,7 @@ exports[`card correctly with and without url 1`] = ` -ms-flex-direction: column; flex-direction: column; height: 100%; - margin-left: 24px; + margin-left: 8px; } @media only screen and (max-width: 480px) {