Use LeafyGreen Code component #162
Conversation
There was a problem hiding this comment.
Nice work! Please merge in Snooty's master branch in order to run our test suite on this PR. I also noticed a problem in the staging link. Code blocks are getting cut off! I think this is because the LeafyGreen component is set to display: inline-block.
To see the whole code block, the user must scroll the entire container over.
I think wrapping the component in a display: block container may fix this!
| import ReactDOMServer from 'react-dom/server'; | ||
| import PropTypes from 'prop-types'; | ||
| import Highlight from 'react-highlight'; |
There was a problem hiding this comment.
Since we're no longer using react-highlight, it can be removed from our dependencies in package.json.
src/components/Code.js
Outdated
| import { isBrowser } from '../utils/is-browser'; | ||
| import { useContext } from 'react'; |
There was a problem hiding this comment.
[nit] You can import useContext on line 1:
import React, { useContext } from 'react';| import Highlight from 'react-highlight'; | ||
| import { reportAnalytics } from '../utils/report-analytics'; | ||
| import 'highlight.js/styles/a11y-light.css'; | ||
| import codeStyle from '../styles/code.module.css'; |
There was a problem hiding this comment.
code.module.css can also be deleted since we're not using it anymore.
src/components/Code.js
Outdated
| const doc = new DOMParser().parseFromString(input, 'text/html'); | ||
| return doc.documentElement.textContent; | ||
| }; | ||
| let supported_langs = [ |
There was a problem hiding this comment.
[nit] Let's call this const leafyGreenSupportedLangs to 1) adhere to JS camelCase conventions, 2) clarify exactly which entity supports these languages, and 3) use a const.
tahiya-mongo
force-pushed
the
DOCSPLAT-871
branch
from
7ba8b7f
to
2791824
Compare
* Use LeafyGreen Code component * Removed unnecessary dependencies * Enabled horizontsl scrolling of the codeblock * Updated to include the new added copy button * Use LeafyGreen Code component * Removed unnecessary dependencies * Enabled horizontsl scrolling of the codeblock * Updated to include the new added copy button * Updated code test snapshot * Switched from mount() to shallow() in Code.test.js * Removed src/styles/code.module.css * Added TODO comment to Code.js Co-authored-by: tahiya-mongo <tahiya.chowdhury@mongodb.com>
Jira: https://jira.mongodb.org/browse/DOP-871
Staging: https://docs-mongodbcom-staging.corp.mongodb.com/master/guides/tahiya.chowdhury/DOCSPLAT-871/server/drivers