style: fix glossary item (#890)

| [![PR App][icn]][demo] | Fix RM-9861 |
| :--------------------: | :---------: |

## 🧰 Changes

I changed the name of `GlossaryItem` to `Glossary`, but we never load
`@readme/mdx`'s css in the main app. This caused the glossary tooltip to
be unstyled.

I poked at getting rmdx's styles loaded, but ran into some issues with
codemirror. So for now, I'm relying on the old styling to still be
available, blheh.

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

__tests__/Glossary.test.tsx

@@ -8,7 +8,7 @@ test('should output a glossary item if the term exists', () => {
   const definition = 'This is a definition';
   const { container } = render(<Glossary terms={[{ term, definition }]}>acme</Glossary>);
 
-  const trigger = container.querySelector('.Glossary-trigger');
+  const trigger = container.querySelector('.GlossaryItem-trigger');
   expect(trigger).toHaveTextContent(term);
   if (trigger) {
     fireEvent.mouseEnter(trigger);
@@ -22,7 +22,7 @@ test('should be case insensitive', () => {
   const definition = 'This is a definition';
   const { container } = render(<Glossary terms={[{ term, definition }]}>acme</Glossary>);
 
-  const trigger = container.querySelector('.Glossary-trigger');
+  const trigger = container.querySelector('.GlossaryItem-trigger');
   expect(trigger).toHaveTextContent('acme');
   if (trigger) {
     fireEvent.mouseEnter(trigger);
@@ -35,6 +35,6 @@ test('should output the term if the definition does not exist', () => {
   const term = 'something';
   const { container } = render(<Glossary terms={[]}>{term}</Glossary>);
 
-  expect(container.querySelector('.Glossary-trigger')).not.toBeInTheDocument();
+  expect(container.querySelector('.GlossaryItem-trigger')).not.toBeInTheDocument();
   expect(container.querySelector('span')).toHaveTextContent(term);
 });

components/Glossary/index.tsx

@@ -17,14 +17,14 @@ const Glossary = ({ children, term: termProp, terms }: Props) => {
   return (
     <Tooltip
       content={
-        <div className="Glossary-tooltip-content">
-          <strong className="Glossary-term">{foundTerm.term}</strong> - {foundTerm.definition}
+        <div className="GlossaryItem-tooltip-content">
+          <strong className="GlossaryItem-term">{foundTerm.term}</strong> - {foundTerm.definition}
         </div>
       }
       offset={[-5, 5]}
       placement="bottom-start"
     >
-      <span className="Glossary-trigger">{term}</span>
+      <span className="GlossaryItem-trigger">{term}</span>
     </Tooltip>
   );
 };

components/Glossary/style.scss

@@ -1,4 +1,4 @@
-.Glossary {
+.GlossaryItem {
   &-trigger {
     border-bottom: 1px solid #737c83;
     border-style: dotted;

package.json

@@ -105,6 +105,7 @@
     "prettier": "^3.2.5",
     "puppeteer": "^19.8.3",
     "react-router-dom": "^6.22.3",
+    "sass": "^1.77.2",
     "sass-loader": "^13.2.2",
     "semantic-release": "^22.0.12",
     "stream-browserify": "^3.0.0",