From af0011cc79390a7343106c07f16886a3b59ac38a Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Wed, 3 Jul 2024 18:33:47 -0400 Subject: [PATCH 1/5] :sparkles: DOP-4791 introduces new next/prev button --- src/components/InternalPageNav.js | 107 ++++++++++++++++++++---------- 1 file changed, 71 insertions(+), 36 deletions(-) diff --git a/src/components/InternalPageNav.js b/src/components/InternalPageNav.js index 77900d46a..336284b5a 100644 --- a/src/components/InternalPageNav.js +++ b/src/components/InternalPageNav.js @@ -1,14 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from '@emotion/styled'; +import Button from '@leafygreen-ui/button'; +import { Body } from '@leafygreen-ui/typography'; +import Icon, { glyphs } from '@leafygreen-ui/icon'; import { css, cx } from '@leafygreen-ui/emotion'; import { palette } from '@leafygreen-ui/palette'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { theme } from '../theme/docsTheme'; import { getPageTitle } from '../utils/get-page-title'; import Link from './Link'; -const StyledContainer = styled.div` +const styledContainer = css` padding-top: 2em; padding-bottom: 2.5em; width: 100%; @@ -21,55 +22,89 @@ const StyledContainer = styled.div` } `; -const arrowStyling = css` - line-height: 28px; - align-content: center; - color: var(--arrow-color); +const commonTextStyles = css` + font-size: ${theme.fontSize.small}; + line-height: 20px; `; -const titleSpanStyling = css` - line-height: 28px; - --hover-text-decoration-color: var(--underline-color) !important; +const commonNextPrevTextStyling = css` + ${commonTextStyles} + font-weight: 500; `; -const LinkContentContainer = styled.div` +const nextTextStyling = css` + ${commonNextPrevTextStyling} + text-align: end; +`; + +const prevTextStyling = css` + ${commonNextPrevTextStyling} + text-align: start; +`; + +const nextPrevTitleTextStyling = css` + ${commonTextStyles} + color: ${palette.gray.base}; +`; + +const commonLinkContentContainer = css` + align-items: center; display: flex; - column-gap: ${theme.size.tiny}; + column-gap: 14px; +`; + +const nextLinkContainer = css` + ${commonLinkContentContainer} + flex-direction: row-reverse; `; +const prevLinkContainer = css` + ${commonLinkContentContainer} + flex-direction: row; +`; + +const NextPrevLink = ({ icon, direction, pageTitle }) => { + const isNext = direction?.toLowerCase() === 'next'; + const isPrev = direction?.toLowerCase() === 'back'; + + return ( +
+ +
+ {direction} + {pageTitle} +
+
+ ); +}; + const InternalPageNav = ({ slug, slugTitleMapping, toctreeOrder }) => { - const { darkMode } = useDarkMode(); const slugIndex = toctreeOrder.indexOf(slug); const prevSlug = slugIndex > 0 ? toctreeOrder[slugIndex - 1] : null; const nextSlug = slugIndex < toctreeOrder.length - 1 ? toctreeOrder[slugIndex + 1] : null; return ( - +
{prevSlug && ( - - - ←  - - {getPageTitle(prevSlug, slugTitleMapping)} - - - + + + )} {nextSlug && ( - - - - {getPageTitle(nextSlug, slugTitleMapping)} - -  → - - + + + )} - +
); }; From fffc22af98f28f38176621bcaeadeb822a745733 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Wed, 3 Jul 2024 18:47:06 -0400 Subject: [PATCH 2/5] :camera_flash: DOP-4791 updates snapshots --- .../InternalPageNav.test.js.snap | 857 +++++++++++++++--- 1 file changed, 723 insertions(+), 134 deletions(-) diff --git a/tests/unit/__snapshots__/InternalPageNav.test.js.snap b/tests/unit/__snapshots__/InternalPageNav.test.js.snap index c8eee546b..9e8f2cc05 100644 --- a/tests/unit/__snapshots__/InternalPageNav.test.js.snap +++ b/tests/unit/__snapshots__/InternalPageNav.test.js.snap @@ -23,24 +23,7 @@ exports[`renders a page with next and previous links correctly 1`] = ` } } -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-column-gap: 4px; - column-gap: 4px; -} - -.emotion-4 { - line-height: 28px; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; - color: var(--arrow-color); -} - -.emotion-5 { +.emotion-1 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -53,16 +36,14 @@ exports[`renders a page with next and previous links correctly 1`] = ` line-height: 13px; color: #016BF8; font-weight: inherit; - line-height: 28px; - --hover-text-decoration-color: var(--underline-color)!important; } -.emotion-5>code { +.emotion-1>code { color: #016BF8; } -.emotion-5:focus, -.emotion-5:hover { +.emotion-1:focus, +.emotion-1:hover { text-decoration-line: underline; -webkit-transition: text-decoration 150ms ease-in-out; transition: text-decoration 150ms ease-in-out; @@ -70,51 +51,313 @@ exports[`renders a page with next and previous links correctly 1`] = ` text-decoration-thickness: 2px; } -.emotion-5:focus { +.emotion-1:focus { text-decoration-color: #016BF8; outline: none; } -.emotion-5:hover { +.emotion-1:hover { text-decoration-color: #E8EDEB; } +.emotion-2 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-column-gap: 14px; + column-gap: 14px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-3 { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + padding: 0; + margin: 0; + background-color: transparent; + border: 1px solid transparent; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + z-index: 0; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + border-radius: 6px; + background-color: #F9FBFA; + border-color: #889397; + color: #001E2B; + font-size: 13px; + line-height: 20px; + font-weight: 500; + height: 48px; + font-size: 18px; + line-height: 24px; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + outline: none; +} + +.emotion-3:active, +.emotion-3[data-active="true"], +.emotion-3:focus, +.emotion-3:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + color: #001E2B; +} + +.emotion-3:hover, +.emotion-3[data-hover="true"], +.emotion-3:active, +.emotion-3[data-active="true"] { + color: #001E2B; + background-color: #FFFFFF; + box-shadow: 0 0 0 3px #E8EDEB; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + background-color: #FFFFFF; + box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; +} + +.emotion-4 { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 5px; +} + +.emotion-5 { + display: grid; + grid-auto-flow: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + width: 100%; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 0; + -webkit-transition: all 150 ease-in-out; + transition: all 150 ease-in-out; + padding: 0 15px; + gap: 8px; +} + +.emotion-6 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 13px; + line-height: 20px; + color: #001E2B; + font-weight: 400; + font-size: 13px; + line-height: 20px; + font-weight: 500; + text-align: start; +} + +.emotion-6 strong, +.emotion-6 b { + font-weight: 700; +} + +.emotion-7 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 13px; + line-height: 20px; + color: #001E2B; + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: #889397; +} + +.emotion-7 strong, +.emotion-7 b { + font-weight: 700; +} + +.emotion-9 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-column-gap: 14px; + column-gap: 14px; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.emotion-13 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 13px; + line-height: 20px; + color: #001E2B; + font-weight: 400; + font-size: 13px; + line-height: 20px; + font-weight: 500; + text-align: end; +} + +.emotion-13 strong, +.emotion-13 b { + font-weight: 700; +} +
-
- - ←  - - - MongoDB C#/.NET Driver - -
-
+
+
+ + + +
+ +
+

+ Back +

+

+ MongoDB C#/.NET Driver +

+
+
+ + - - Java MongoDB Driver - - -  → - -
+ +
+

+ Next +

+

+ Java MongoDB Driver +

+
+
+ `; @@ -142,24 +385,7 @@ exports[`renders a page with no next link correctly 1`] = ` } } -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-column-gap: 4px; - column-gap: 4px; -} - -.emotion-4 { - line-height: 28px; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; - color: var(--arrow-color); -} - -.emotion-5 { +.emotion-1 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -172,16 +398,14 @@ exports[`renders a page with no next link correctly 1`] = ` line-height: 13px; color: #016BF8; font-weight: inherit; - line-height: 28px; - --hover-text-decoration-color: var(--underline-color)!important; } -.emotion-5>code { +.emotion-1>code { color: #016BF8; } -.emotion-5:focus, -.emotion-5:hover { +.emotion-1:focus, +.emotion-1:hover { text-decoration-line: underline; -webkit-transition: text-decoration 150ms ease-in-out; transition: text-decoration 150ms ease-in-out; @@ -189,35 +413,227 @@ exports[`renders a page with no next link correctly 1`] = ` text-decoration-thickness: 2px; } -.emotion-5:focus { +.emotion-1:focus { text-decoration-color: #016BF8; outline: none; } -.emotion-5:hover { +.emotion-1:hover { text-decoration-color: #E8EDEB; } +.emotion-2 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-column-gap: 14px; + column-gap: 14px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-3 { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + padding: 0; + margin: 0; + background-color: transparent; + border: 1px solid transparent; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + z-index: 0; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + border-radius: 6px; + background-color: #F9FBFA; + border-color: #889397; + color: #001E2B; + font-size: 13px; + line-height: 20px; + font-weight: 500; + height: 48px; + font-size: 18px; + line-height: 24px; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + outline: none; +} + +.emotion-3:active, +.emotion-3[data-active="true"], +.emotion-3:focus, +.emotion-3:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + color: #001E2B; +} + +.emotion-3:hover, +.emotion-3[data-hover="true"], +.emotion-3:active, +.emotion-3[data-active="true"] { + color: #001E2B; + background-color: #FFFFFF; + box-shadow: 0 0 0 3px #E8EDEB; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + background-color: #FFFFFF; + box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; +} + +.emotion-4 { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 5px; +} + +.emotion-5 { + display: grid; + grid-auto-flow: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + width: 100%; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 0; + -webkit-transition: all 150 ease-in-out; + transition: all 150 ease-in-out; + padding: 0 15px; + gap: 8px; +} + +.emotion-6 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 13px; + line-height: 20px; + color: #001E2B; + font-weight: 400; + font-size: 13px; + line-height: 20px; + font-weight: 500; + text-align: start; +} + +.emotion-6 strong, +.emotion-6 b { + font-weight: 700; +} + +.emotion-7 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 13px; + line-height: 20px; + color: #001E2B; + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: #889397; +} + +.emotion-7 strong, +.emotion-7 b { + font-weight: 700; +} +
-
- - ←  - - - MongoDB Go Driver - -
+ +
+

+ Back +

+

+ MongoDB Go Driver +

+
+
+ `; @@ -245,16 +661,7 @@ exports[`renders a page with no previous link correctly 1`] = ` } } -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-column-gap: 4px; - column-gap: 4px; -} - -.emotion-4 { +.emotion-1 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -267,16 +674,14 @@ exports[`renders a page with no previous link correctly 1`] = ` line-height: 13px; color: #016BF8; font-weight: inherit; - line-height: 28px; - --hover-text-decoration-color: var(--underline-color)!important; } -.emotion-4>code { +.emotion-1>code { color: #016BF8; } -.emotion-4:focus, -.emotion-4:hover { +.emotion-1:focus, +.emotion-1:hover { text-decoration-line: underline; -webkit-transition: text-decoration 150ms ease-in-out; transition: text-decoration 150ms ease-in-out; @@ -284,43 +689,227 @@ exports[`renders a page with no previous link correctly 1`] = ` text-decoration-thickness: 2px; } -.emotion-4:focus { +.emotion-1:focus { text-decoration-color: #016BF8; outline: none; } -.emotion-4:hover { +.emotion-1:hover { text-decoration-color: #E8EDEB; } +.emotion-2 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-column-gap: 14px; + column-gap: 14px; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.emotion-3 { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + padding: 0; + margin: 0; + background-color: transparent; + border: 1px solid transparent; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; + position: relative; + -webkit-text-decoration: none; + text-decoration: none; + cursor: pointer; + z-index: 0; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + border-radius: 6px; + background-color: #F9FBFA; + border-color: #889397; + color: #001E2B; + font-size: 13px; + line-height: 20px; + font-weight: 500; + height: 48px; + font-size: 18px; + line-height: 24px; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + outline: none; +} + +.emotion-3:active, +.emotion-3[data-active="true"], +.emotion-3:focus, +.emotion-3:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + color: #001E2B; +} + +.emotion-3:hover, +.emotion-3[data-hover="true"], +.emotion-3:active, +.emotion-3[data-active="true"] { + color: #001E2B; + background-color: #FFFFFF; + box-shadow: 0 0 0 3px #E8EDEB; +} + +.emotion-3:focus-visible, +.emotion-3[data-focus="true"] { + background-color: #FFFFFF; + box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC; +} + +.emotion-4 { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 5px; +} + .emotion-5 { - line-height: 28px; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; - color: var(--arrow-color); + display: grid; + grid-auto-flow: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + width: 100%; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 0; + -webkit-transition: all 150 ease-in-out; + transition: all 150 ease-in-out; + padding: 0 15px; + gap: 8px; +} + +.emotion-6 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 13px; + line-height: 20px; + color: #001E2B; + font-weight: 400; + font-size: 13px; + line-height: 20px; + font-weight: 500; + text-align: end; +} + +.emotion-6 strong, +.emotion-6 b { + font-weight: 700; +} + +.emotion-7 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 13px; + line-height: 20px; + color: #001E2B; + font-weight: 400; + font-size: 13px; + line-height: 20px; + color: #889397; +} + +.emotion-7 strong, +.emotion-7 b { + font-weight: 700; }
-
- - MongoDB Go Driver - - -  → - -
+ +
+

+ Next +

+

+ MongoDB Go Driver +

+
+
+ `; From 7d014459f6feb35206aea0538a03df0578bba734 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Fri, 5 Jul 2024 14:35:17 -0400 Subject: [PATCH 3/5] :ok_hand: DOP-4791 applies correct spacing between next/prev component and content --- src/components/InternalPageNav.js | 1 + tests/unit/__snapshots__/InternalPageNav.test.js.snap | 3 +++ 2 files changed, 4 insertions(+) diff --git a/src/components/InternalPageNav.js b/src/components/InternalPageNav.js index 336284b5a..77b7fb7d5 100644 --- a/src/components/InternalPageNav.js +++ b/src/components/InternalPageNav.js @@ -16,6 +16,7 @@ const styledContainer = css` display: flex; justify-content: space-between; column-gap: ${theme.size.default}; + margin-top: 88px; @media print { display: none; diff --git a/tests/unit/__snapshots__/InternalPageNav.test.js.snap b/tests/unit/__snapshots__/InternalPageNav.test.js.snap index 9e8f2cc05..16645f53b 100644 --- a/tests/unit/__snapshots__/InternalPageNav.test.js.snap +++ b/tests/unit/__snapshots__/InternalPageNav.test.js.snap @@ -15,6 +15,7 @@ exports[`renders a page with next and previous links correctly 1`] = ` justify-content: space-between; -webkit-column-gap: 16px; column-gap: 16px; + margin-top: 88px; } @media print { @@ -377,6 +378,7 @@ exports[`renders a page with no next link correctly 1`] = ` justify-content: space-between; -webkit-column-gap: 16px; column-gap: 16px; + margin-top: 88px; } @media print { @@ -653,6 +655,7 @@ exports[`renders a page with no previous link correctly 1`] = ` justify-content: space-between; -webkit-column-gap: 16px; column-gap: 16px; + margin-top: 88px; } @media print { From 4ad6405ffe1ffaf56d62f63102bd3fa4ba7c9dff Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 8 Jul 2024 16:29:15 -0400 Subject: [PATCH 4/5] :lipstick: DOP-4791 removes padding-top and addes stacking for mobile designs --- src/components/InternalPageNav.js | 13 +- .../InternalPageNav.test.js.snap | 131 +++++++++++------- 2 files changed, 88 insertions(+), 56 deletions(-) diff --git a/src/components/InternalPageNav.js b/src/components/InternalPageNav.js index 77b7fb7d5..c58aeddb4 100644 --- a/src/components/InternalPageNav.js +++ b/src/components/InternalPageNav.js @@ -10,7 +10,6 @@ import { getPageTitle } from '../utils/get-page-title'; import Link from './Link'; const styledContainer = css` - padding-top: 2em; padding-bottom: 2.5em; width: 100%; display: flex; @@ -18,6 +17,12 @@ const styledContainer = css` column-gap: ${theme.size.default}; margin-top: 88px; + @media ${theme.screenSize.upToSmall} { + flex-direction: column-reverse; + row-gap: 64px; + margin-top: 66px; + } + @media print { display: none; } @@ -34,12 +39,10 @@ const commonNextPrevTextStyling = css` `; const nextTextStyling = css` - ${commonNextPrevTextStyling} text-align: end; `; const prevTextStyling = css` - ${commonNextPrevTextStyling} text-align: start; `; @@ -73,8 +76,8 @@ const NextPrevLink = ({ icon, direction, pageTitle }) => { -
- {direction} +
+ {direction} {pageTitle}
diff --git a/tests/unit/__snapshots__/InternalPageNav.test.js.snap b/tests/unit/__snapshots__/InternalPageNav.test.js.snap index 16645f53b..73e2d9778 100644 --- a/tests/unit/__snapshots__/InternalPageNav.test.js.snap +++ b/tests/unit/__snapshots__/InternalPageNav.test.js.snap @@ -3,7 +3,6 @@ exports[`renders a page with next and previous links correctly 1`] = ` .emotion-0 { - padding-top: 2em; padding-bottom: 2.5em; width: 100%; display: -webkit-box; @@ -18,6 +17,16 @@ exports[`renders a page with next and previous links correctly 1`] = ` margin-top: 88px; } +@media only screen and (max-width: 480px) { + .emotion-0 { + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + row-gap: 64px; + margin-top: 66px; + } +} + @media print { .emotion-0 { display: none; @@ -183,6 +192,10 @@ exports[`renders a page with next and previous links correctly 1`] = ` } .emotion-6 { + text-align: start; +} + +.emotion-7 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -193,15 +206,14 @@ exports[`renders a page with next and previous links correctly 1`] = ` font-size: 13px; line-height: 20px; font-weight: 500; - text-align: start; } -.emotion-6 strong, -.emotion-6 b { +.emotion-7 strong, +.emotion-7 b { font-weight: 700; } -.emotion-7 { +.emotion-8 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -214,12 +226,12 @@ exports[`renders a page with next and previous links correctly 1`] = ` color: #889397; } -.emotion-7 strong, -.emotion-7 b { +.emotion-8 strong, +.emotion-8 b { font-weight: 700; } -.emotion-9 { +.emotion-10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -235,25 +247,10 @@ exports[`renders a page with next and previous links correctly 1`] = ` flex-direction: row-reverse; } -.emotion-13 { - margin: unset; - font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; - color: #001E2B; - font-size: 13px; - line-height: 20px; - color: #001E2B; - font-weight: 400; - font-size: 13px; - line-height: 20px; - font-weight: 500; +.emotion-14 { text-align: end; } -.emotion-13 strong, -.emotion-13 b { - font-weight: 700; -} -
@@ -294,14 +291,16 @@ exports[`renders a page with next and previous links correctly 1`] = `
-
+

Back

MongoDB C#/.NET Driver

@@ -314,7 +313,7 @@ exports[`renders a page with next and previous links correctly 1`] = ` title="Next Section" >
-
+

Next

Java MongoDB Driver

@@ -366,7 +367,6 @@ exports[`renders a page with next and previous links correctly 1`] = ` exports[`renders a page with no next link correctly 1`] = ` .emotion-0 { - padding-top: 2em; padding-bottom: 2.5em; width: 100%; display: -webkit-box; @@ -381,6 +381,16 @@ exports[`renders a page with no next link correctly 1`] = ` margin-top: 88px; } +@media only screen and (max-width: 480px) { + .emotion-0 { + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + row-gap: 64px; + margin-top: 66px; + } +} + @media print { .emotion-0 { display: none; @@ -546,6 +556,10 @@ exports[`renders a page with no next link correctly 1`] = ` } .emotion-6 { + text-align: start; +} + +.emotion-7 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -556,15 +570,14 @@ exports[`renders a page with no next link correctly 1`] = ` font-size: 13px; line-height: 20px; font-weight: 500; - text-align: start; } -.emotion-6 strong, -.emotion-6 b { +.emotion-7 strong, +.emotion-7 b { font-weight: 700; } -.emotion-7 { +.emotion-8 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -577,8 +590,8 @@ exports[`renders a page with no next link correctly 1`] = ` color: #889397; } -.emotion-7 strong, -.emotion-7 b { +.emotion-8 strong, +.emotion-8 b { font-weight: 700; } @@ -622,14 +635,16 @@ exports[`renders a page with no next link correctly 1`] = `
-
+

Back

MongoDB Go Driver

@@ -643,7 +658,6 @@ exports[`renders a page with no next link correctly 1`] = ` exports[`renders a page with no previous link correctly 1`] = ` .emotion-0 { - padding-top: 2em; padding-bottom: 2.5em; width: 100%; display: -webkit-box; @@ -658,6 +672,16 @@ exports[`renders a page with no previous link correctly 1`] = ` margin-top: 88px; } +@media only screen and (max-width: 480px) { + .emotion-0 { + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + row-gap: 64px; + margin-top: 66px; + } +} + @media print { .emotion-0 { display: none; @@ -823,6 +847,10 @@ exports[`renders a page with no previous link correctly 1`] = ` } .emotion-6 { + text-align: end; +} + +.emotion-7 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -833,15 +861,14 @@ exports[`renders a page with no previous link correctly 1`] = ` font-size: 13px; line-height: 20px; font-weight: 500; - text-align: end; } -.emotion-6 strong, -.emotion-6 b { +.emotion-7 strong, +.emotion-7 b { font-weight: 700; } -.emotion-7 { +.emotion-8 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -854,8 +881,8 @@ exports[`renders a page with no previous link correctly 1`] = ` color: #889397; } -.emotion-7 strong, -.emotion-7 b { +.emotion-8 strong, +.emotion-8 b { font-weight: 700; } @@ -899,14 +926,16 @@ exports[`renders a page with no previous link correctly 1`] = `
-
+

Next

MongoDB Go Driver

From 4b86bfbc2e6526b0803a142639ad4b1aba3b7b22 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Tue, 9 Jul 2024 12:05:19 -0400 Subject: [PATCH 5/5] :ok_hand: DOP-4791 made changes to the naming of the style variables to match team's patterns --- src/components/InternalPageNav.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/InternalPageNav.js b/src/components/InternalPageNav.js index c58aeddb4..6f61121f4 100644 --- a/src/components/InternalPageNav.js +++ b/src/components/InternalPageNav.js @@ -9,7 +9,7 @@ import { theme } from '../theme/docsTheme'; import { getPageTitle } from '../utils/get-page-title'; import Link from './Link'; -const styledContainer = css` +const containerStyling = css` padding-bottom: 2.5em; width: 100%; display: flex; @@ -33,7 +33,7 @@ const commonTextStyles = css` line-height: 20px; `; -const commonNextPrevTextStyling = css` +const nextPrevTextStyling = css` ${commonTextStyles} font-weight: 500; `; @@ -51,19 +51,19 @@ const nextPrevTitleTextStyling = css` color: ${palette.gray.base}; `; -const commonLinkContentContainer = css` +const commonLinkContentContainerStyling = css` align-items: center; display: flex; column-gap: 14px; `; -const nextLinkContainer = css` - ${commonLinkContentContainer} +const nextLinkContainerStyling = css` + ${commonLinkContentContainerStyling} flex-direction: row-reverse; `; -const prevLinkContainer = css` - ${commonLinkContentContainer} +const prevLinkContainerStyling = css` + ${commonLinkContentContainerStyling} flex-direction: row; `; @@ -72,12 +72,12 @@ const NextPrevLink = ({ icon, direction, pageTitle }) => { const isPrev = direction?.toLowerCase() === 'back'; return ( -
+
- {direction} + {direction} {pageTitle}
@@ -89,7 +89,7 @@ const InternalPageNav = ({ slug, slugTitleMapping, toctreeOrder }) => { const prevSlug = slugIndex > 0 ? toctreeOrder[slugIndex - 1] : null; const nextSlug = slugIndex < toctreeOrder.length - 1 ? toctreeOrder[slugIndex + 1] : null; return ( -
+
{prevSlug && (