From a74017861704f4c0fef2618a868baa37df5535a3 Mon Sep 17 00:00:00 2001 From: Seung Park Date: Mon, 10 Jun 2024 14:43:20 -0400 Subject: [PATCH 1/3] use lg icon instead of link svg --- src/components/Permalink.js | 18 +- tests/unit/__snapshots__/Heading.test.js.snap | 33 ++- .../unit/__snapshots__/Procedure.test.js.snap | 215 +++++++++++++----- tests/unit/__snapshots__/Section.test.js.snap | 33 ++- tests/unit/__snapshots__/Target.test.js.snap | 61 +++-- 5 files changed, 237 insertions(+), 123 deletions(-) diff --git a/src/components/Permalink.js b/src/components/Permalink.js index 083b5822c..ba1ad3f1b 100644 --- a/src/components/Permalink.js +++ b/src/components/Permalink.js @@ -1,16 +1,15 @@ import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; -import { withPrefix } from 'gatsby'; import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import { cx, css as LeafyCSS } from '@leafygreen-ui/emotion'; +import { cx, css } from '@leafygreen-ui/emotion'; import Tooltip from '@leafygreen-ui/tooltip'; +import Icon from '@leafygreen-ui/icon'; import { isBrowser } from '../utils/is-browser'; import { theme } from '../theme/docsTheme'; import useCopyClipboard from '../hooks/useCopyClipboard'; import useHashAnchor from '../hooks/use-hash-anchor'; -const tooltipStyle = LeafyCSS` +const tooltipStyle = css` padding: 2px 8px; font-size: ${theme.fontSize.xsmall}; @@ -19,12 +18,6 @@ const tooltipStyle = LeafyCSS` } `; -const LinkIcon = styled.img` - border-radius: 0 !important; - display: initial !important; - margin: initial !important; -`; - const HeaderBuffer = styled.div` margin-top: ${({ bufferSpace }) => bufferSpace}; position: absolute; @@ -57,14 +50,13 @@ const Permalink = ({ id, description, buffer }) => { return ( <> - + - + + + +
diff --git a/tests/unit/__snapshots__/Procedure.test.js.snap b/tests/unit/__snapshots__/Procedure.test.js.snap index ceec583d9..3b38936fe 100644 --- a/tests/unit/__snapshots__/Procedure.test.js.snap +++ b/tests/unit/__snapshots__/Procedure.test.js.snap @@ -331,18 +331,16 @@ exports[`renders steps nested in include nodes 1`] = ` } .emotion-11 { - border-radius: 0!important; - display: initial!important; - margin: initial!important; + color: #89979B; } -.emotion-13 { +.emotion-12 { margin-top: -175px; position: absolute; padding-bottom: 2px; } -.emotion-15 { +.emotion-14 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -353,8 +351,8 @@ exports[`renders steps nested in include nodes 1`] = ` margin-bottom: 16px; } -.emotion-15 strong, -.emotion-15 b { +.emotion-14 strong, +.emotion-14 b { font-weight: 700; } @@ -390,20 +388,33 @@ exports[`renders steps nested in include nodes 1`] = ` href="#step-1" title="Permalink to this heading" > - + + + +

Content for step 1

@@ -438,20 +449,33 @@ exports[`renders steps nested in include nodes 1`] = ` href="#step-2" title="Permalink to this heading" > - + + + +

Content for step 2

@@ -486,20 +510,33 @@ exports[`renders steps nested in include nodes 1`] = ` href="#step-3" title="Permalink to this heading" > - + + + +

Content for step 3

@@ -534,20 +571,33 @@ exports[`renders steps nested in include nodes 1`] = ` href="#step-4" title="Permalink to this heading" > - + + + +

Content for step 4

@@ -582,20 +632,33 @@ exports[`renders steps nested in include nodes 1`] = ` href="#step-5" title="Permalink to this heading" > - + + + +

Content for step 5

@@ -630,20 +693,33 @@ exports[`renders steps nested in include nodes 1`] = ` href="#step-6" title="Permalink to this heading" > - + + + +

Content for step 6

@@ -678,20 +754,33 @@ exports[`renders steps nested in include nodes 1`] = ` href="#step-7" title="Permalink to this heading" > - + + + +

Content for step 7

diff --git a/tests/unit/__snapshots__/Section.test.js.snap b/tests/unit/__snapshots__/Section.test.js.snap index 1a1c62a55..749c07689 100644 --- a/tests/unit/__snapshots__/Section.test.js.snap +++ b/tests/unit/__snapshots__/Section.test.js.snap @@ -26,12 +26,10 @@ exports[`renders correctly 1`] = ` } .emotion-2 { - border-radius: 0!important; - display: initial!important; - margin: initial!important; + color: #89979B; } -.emotion-4 { +.emotion-3 { margin-top: -175px; position: absolute; padding-bottom: 2px; @@ -48,15 +46,28 @@ exports[`renders correctly 1`] = ` href="#" title="Permalink to this heading" > - + + + +
diff --git a/tests/unit/__snapshots__/Target.test.js.snap b/tests/unit/__snapshots__/Target.test.js.snap index bdba47784..a859a3276 100644 --- a/tests/unit/__snapshots__/Target.test.js.snap +++ b/tests/unit/__snapshots__/Target.test.js.snap @@ -47,18 +47,16 @@ a .emotion-0 { } .emotion-2 { - border-radius: 0!important; - display: initial!important; - margin: initial!important; + color: #89979B; } -.emotion-4 { +.emotion-3 { margin-top: -150px; position: absolute; padding-bottom: 2px; } -.emotion-6 { +.emotion-5 { margin: unset; font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; color: #001E2B; @@ -69,12 +67,12 @@ a .emotion-0 { margin-bottom: 16px; } -.emotion-6 strong, -.emotion-6 b { +.emotion-5 strong, +.emotion-5 b { font-weight: 700; } -.emotion-7 { +.emotion-6 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -89,12 +87,12 @@ a .emotion-0 { font-weight: var(--font-weight); } -.emotion-7>code { +.emotion-6>code { color: var(--color); } -.emotion-7:focus, -.emotion-7:hover { +.emotion-6:focus, +.emotion-6:hover { text-decoration-line: underline; -webkit-transition: text-decoration 150ms ease-in-out; transition: text-decoration 150ms ease-in-out; @@ -102,12 +100,12 @@ a .emotion-0 { text-decoration-thickness: 2px; } -.emotion-7:focus { +.emotion-6:focus { text-decoration-color: var(--focus-text-decoration-color); outline: none; } -.emotion-7:hover { +.emotion-6:hover { text-decoration-color: var(--hover-text-decoration-color); } @@ -125,27 +123,40 @@ a .emotion-0 { href="#std-option-mongos.--config" title="Permalink to this definition" > - + + + +

Specifies a configuration file for runtime configuration options. The configuration file is the preferred method for runtime configuration of @@ -158,7 +169,7 @@ configuration file is the preferred method for runtime configuration of . The options are equivalent to the command-line configuration options. See @@ -168,11 +179,11 @@ configuration options. See more information.

Ensure the configuration file uses ASCII encoding. The From 19adbe9f8ef8d56fe268a54549707e01031481a0 Mon Sep 17 00:00:00 2001 From: Seung Park Date: Mon, 10 Jun 2024 15:38:14 -0400 Subject: [PATCH 2/3] address comments from Design team. add diff for dark/light modes --- src/components/Permalink.js | 7 +- tests/unit/Heading.test.js | 10 +++ tests/unit/__snapshots__/Heading.test.js.snap | 72 ++++++++++++++++++- .../unit/__snapshots__/Procedure.test.js.snap | 2 +- tests/unit/__snapshots__/Section.test.js.snap | 2 +- tests/unit/__snapshots__/Target.test.js.snap | 2 +- 6 files changed, 89 insertions(+), 6 deletions(-) diff --git a/src/components/Permalink.js b/src/components/Permalink.js index ba1ad3f1b..7a70c4a71 100644 --- a/src/components/Permalink.js +++ b/src/components/Permalink.js @@ -2,8 +2,10 @@ import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { cx, css } from '@leafygreen-ui/emotion'; -import Tooltip from '@leafygreen-ui/tooltip'; import Icon from '@leafygreen-ui/icon'; +import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; +import { palette } from '@leafygreen-ui/palette'; +import Tooltip from '@leafygreen-ui/tooltip'; import { isBrowser } from '../utils/is-browser'; import { theme } from '../theme/docsTheme'; import useCopyClipboard from '../hooks/useCopyClipboard'; @@ -35,6 +37,7 @@ const headingStyle = (copied) => css` const Permalink = ({ id, description, buffer }) => { const [copied, setCopied] = useState(false); const [headingNode, setHeadingNode] = useState(null); + const { darkMode } = useDarkMode(); const url = isBrowser ? window.location.href.split('#')[0] + '#' + id : ''; const bufferSpace = buffer || `-${theme.header.navbarScrollOffset}`; @@ -56,7 +59,7 @@ const Permalink = ({ id, description, buffer }) => { title={'Permalink to this ' + description} onClick={handleClick} > - + { const tree = render(); expect(tree.asFragment()).toMatchSnapshot(); }); + +it('renders correctly in dark mode', () => { + const tree = render( + + + + ); + expect(tree.asFragment()).toMatchSnapshot(); +}); diff --git a/tests/unit/__snapshots__/Heading.test.js.snap b/tests/unit/__snapshots__/Heading.test.js.snap index 89f1d8496..469d8f6d3 100644 --- a/tests/unit/__snapshots__/Heading.test.js.snap +++ b/tests/unit/__snapshots__/Heading.test.js.snap @@ -23,7 +23,77 @@ exports[`renders correctly 1`] = ` } .emotion-2 { - color: #89979B; + color: #889397; +} + +.emotion-3 { + margin-top: -175px; + position: absolute; + padding-bottom: 2px; +} + +

+ Create an administrative username and password + + + + + + +
+

+ +`; + +exports[`renders correctly in dark mode 1`] = ` + + .emotion-0 { + margin: unset; + font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #001E2B; + font-size: 18px; + line-height: 24px; + font-weight: 700; + color: #E8EDEB; + margin-top: 24px; + margin-bottom: 8px; +} + +.emotion-1 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 0 10px; + visibility: hidden; +} + +.emotion-2 { + color: #C1C7C6; } .emotion-3 { diff --git a/tests/unit/__snapshots__/Procedure.test.js.snap b/tests/unit/__snapshots__/Procedure.test.js.snap index 3b38936fe..ee0ec8ec8 100644 --- a/tests/unit/__snapshots__/Procedure.test.js.snap +++ b/tests/unit/__snapshots__/Procedure.test.js.snap @@ -331,7 +331,7 @@ exports[`renders steps nested in include nodes 1`] = ` } .emotion-11 { - color: #89979B; + color: #889397; } .emotion-12 { diff --git a/tests/unit/__snapshots__/Section.test.js.snap b/tests/unit/__snapshots__/Section.test.js.snap index 749c07689..d462cadfd 100644 --- a/tests/unit/__snapshots__/Section.test.js.snap +++ b/tests/unit/__snapshots__/Section.test.js.snap @@ -26,7 +26,7 @@ exports[`renders correctly 1`] = ` } .emotion-2 { - color: #89979B; + color: #889397; } .emotion-3 { diff --git a/tests/unit/__snapshots__/Target.test.js.snap b/tests/unit/__snapshots__/Target.test.js.snap index a859a3276..46f592438 100644 --- a/tests/unit/__snapshots__/Target.test.js.snap +++ b/tests/unit/__snapshots__/Target.test.js.snap @@ -47,7 +47,7 @@ a .emotion-0 { } .emotion-2 { - color: #89979B; + color: #889397; } .emotion-3 { From 4491250fdbca85349c77114e4c9ea4e05e3537c8 Mon Sep 17 00:00:00 2001 From: Seung Park Date: Tue, 11 Jun 2024 12:29:20 -0400 Subject: [PATCH 3/3] minor fix - middle align permalink --- src/components/Permalink.js | 12 +++++++++++- tests/unit/__snapshots__/Heading.test.js.snap | 4 ++++ tests/unit/__snapshots__/Procedure.test.js.snap | 2 ++ tests/unit/__snapshots__/Section.test.js.snap | 2 ++ tests/unit/__snapshots__/Target.test.js.snap | 2 ++ 5 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/Permalink.js b/src/components/Permalink.js index 7a70c4a71..32de97c72 100644 --- a/src/components/Permalink.js +++ b/src/components/Permalink.js @@ -34,6 +34,11 @@ const headingStyle = (copied) => css` visibility: hidden; `; +const iconStyling = css` + vertical-align: middle; + margin-top: -2px; +`; + const Permalink = ({ id, description, buffer }) => { const [copied, setCopied] = useState(false); const [headingNode, setHeadingNode] = useState(null); @@ -59,7 +64,12 @@ const Permalink = ({ id, description, buffer }) => { title={'Permalink to this ' + description} onClick={handleClick} > - +