DOP-4653: add permalink colors for dark vs light mode

src/components/Permalink.js

@@ -1,16 +1,17 @@
 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 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';
 import useHashAnchor from '../hooks/use-hash-anchor';
 
-const tooltipStyle = LeafyCSS` 
+const tooltipStyle = css`
   padding: 2px 8px;
   font-size: ${theme.fontSize.xsmall};
 
@@ -19,12 +20,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;
@@ -42,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}`;
 
@@ -57,14 +53,13 @@ const Permalink = ({ id, description, buffer }) => {
   return (
     <>
       <a
-        className="headerlink"
+        className={cx('headerlink', headingStyle(copied))}
         ref={setHeadingNode}
-        css={headingStyle(copied)}
         href={`#${id}`}
         title={'Permalink to this ' + description}
         onClick={handleClick}
       >
-        <LinkIcon src={withPrefix('assets/link.svg')} width={10} height={10} />
+        <Icon glyph={'Link'} size={12} fill={darkMode ? palette.gray.light1 : palette.gray.base} />
         <Tooltip
           className={cx(tooltipStyle)}
           triggerEvent="click"

tests/unit/Heading.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import Heading from '../../src/components/Heading';
 
 // data for this component
@@ -9,3 +10,12 @@ it('renders correctly', () => {
   const tree = render(<Heading nodeData={mockData} sectionDepth={3} />);
   expect(tree.asFragment()).toMatchSnapshot();
 });
+
+it('renders correctly in dark mode', () => {
+  const tree = render(
+    <LeafyGreenProvider darkMode={true}>
+      <Heading nodeData={mockData} sectionDepth={3} />
+    </LeafyGreenProvider>
+  );
+  expect(tree.asFragment()).toMatchSnapshot();
+});

tests/unit/__snapshots__/Heading.test.js.snap

@@ -23,12 +23,10 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-2 {
-  border-radius: 0!important;
-  display: initial!important;
-  margin: initial!important;
+  color: #889397;
 }
 
-.emotion-4 {
+.emotion-3 {
   margin-top: -175px;
   position: absolute;
   padding-bottom: 2px;
@@ -44,15 +42,98 @@ exports[`renders correctly 1`] = `
       href="#create-an-administrative-username-and-password"
       title="Permalink to this heading"
     >
-      <img
-        class="emotion-2 emotion-3"
-        height="10"
-        src="/assets/link.svg"
-        width="10"
-      />
+      <svg
+        aria-label="Link Icon"
+        class="emotion-2"
+        fill="none"
+        height="12"
+        role="img"
+        viewBox="0 0 16 16"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.039 9.953a3.596 3.596 0 0 1-.327-.38l1.45-1.445a1.553 1.553 0 0 0 2.496.423l2.885-2.87a1.57 1.57 0 0 0 .01-2.213 1.553 1.553 0 0 0-2.203-.01l-.379.377A.995.995 0 0 1 8.56 3.83a1.005 1.005 0 0 1 .006-1.418l.38-.377a3.542 3.542 0 0 1 5.024.023 3.58 3.58 0 0 1-.022 5.047l-2.884 2.871a3.542 3.542 0 0 1-5.025-.022Z"
+          fill="currentColor"
+        />
+        <path
+          d="M9.961 6.047c.12.12.228.248.327.38l-1.45 1.445a1.553 1.553 0 0 0-2.496-.423l-2.885 2.87a1.57 1.57 0 0 0-.01 2.213 1.553 1.553 0 0 0 2.203.01l.379-.377a.995.995 0 0 1 1.411.006 1.005 1.005 0 0 1-.006 1.418l-.38.377a3.542 3.542 0 0 1-5.024-.023 3.58 3.58 0 0 1 .022-5.047l2.884-2.871a3.542 3.542 0 0 1 5.025.022Z"
+          fill="currentColor"
+        />
+      </svg>
     </a>
     <div
-      class="emotion-4 emotion-5"
+      class="emotion-3 emotion-4"
+      id="create-an-administrative-username-and-password"
+    />
+  </h3>
+</DocumentFragment>
+`;
+
+exports[`renders correctly in dark mode 1`] = `
+<DocumentFragment>
+  .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 {
+  margin-top: -175px;
+  position: absolute;
+  padding-bottom: 2px;
+}
+
+<h3
+    class="contains-headerlink emotion-0"
+    weight="medium"
+  >
+    Create an administrative username and password
+    <a
+      class="headerlink emotion-1"
+      href="#create-an-administrative-username-and-password"
+      title="Permalink to this heading"
+    >
+      <svg
+        aria-label="Link Icon"
+        class="emotion-2"
+        fill="none"
+        height="12"
+        role="img"
+        viewBox="0 0 16 16"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.039 9.953a3.596 3.596 0 0 1-.327-.38l1.45-1.445a1.553 1.553 0 0 0 2.496.423l2.885-2.87a1.57 1.57 0 0 0 .01-2.213 1.553 1.553 0 0 0-2.203-.01l-.379.377A.995.995 0 0 1 8.56 3.83a1.005 1.005 0 0 1 .006-1.418l.38-.377a3.542 3.542 0 0 1 5.024.023 3.58 3.58 0 0 1-.022 5.047l-2.884 2.871a3.542 3.542 0 0 1-5.025-.022Z"
+          fill="currentColor"
+        />
+        <path
+          d="M9.961 6.047c.12.12.228.248.327.38l-1.45 1.445a1.553 1.553 0 0 0-2.496-.423l-2.885 2.87a1.57 1.57 0 0 0-.01 2.213 1.553 1.553 0 0 0 2.203.01l.379-.377a.995.995 0 0 1 1.411.006 1.005 1.005 0 0 1-.006 1.418l-.38.377a3.542 3.542 0 0 1-5.024-.023 3.58 3.58 0 0 1 .022-5.047l2.884-2.871a3.542 3.542 0 0 1 5.025.022Z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+    <div
+      class="emotion-3 emotion-4"
       id="create-an-administrative-username-and-password"
     />
   </h3>