feat(typography)!: recolor CodeBlock and migrate to prism-react-renderer v2

docs/migration.md

@@ -222,6 +222,12 @@ consider additional positioning prop support on a case-by-case basis.
 
 #### @zendeskgarden/react-typography
 
+- `CodeBlock`: The `language` set has been reduced from 32 to 12, for a
+  significant decrease in bundle size. If you encounter any essential languages
+  that are missing, please [create an
+  issue](https://github.com/zendeskgarden/react-components/issues). Garden will
+  evaluate incorporating any business-critical
+  [languages](https://prismjs.com/#supported-languages).
 - The following React component types have changed:
   - `Span.Icon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
   - `Span.StartIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`

packages/typography/demo/stories/data.ts

@@ -10,24 +10,6 @@ import { IListItem } from './types';
 export const BLOCKQUOTE_CHILDREN = ['Blockquote one', 'Blockquote two', 'Blockquote three'];
 
 export const CODE_BLOCK_CHILDREN = {
-  bash: `
-#!/bin/sh
-
-# Exports.
-
-export ZSH="$HOME/.oh-my-zsh"
-
-# Aliases.
-
-alias ..="cd .."
-
-# Tools.
-
-if [ -f $(brew --prefix nvm)/nvm.sh ]; then
-    mkdir -p $HOME/.nvm
-    export NVM_DIR="$HOME/.nvm"
-    source $(brew --prefix nvm)/nvm.sh
-fi`,
   css: `
 button,
 .button,
@@ -94,6 +76,14 @@ button,
 +important new additions
 +to this document.
 `,
+  graphql: `query HeroNameAndFriends($episode: Episode) {
+  hero(episode: $episode) {
+    name
+    friends {
+      name
+    }
+  }
+}`,
   javascript: `
 Prism.languages.markup = {
   comment: /<!--[\\s\\S]*?-->/,
@@ -177,6 +167,13 @@ Prism.languages.markup = {
       "updated_at": "2018-01-01T10:20:30Z"
     }
   ]
+}`,
+  jsx: `function getGreeting(user) {
+  if (user) {
+    return <h1>Hello, {formatName(user)}</h1>;
+  }
+
+  return <h1>Hello, stranger</h1>;
 }`,
   markdown: `
 # Title 1
@@ -431,7 +428,20 @@ export const execute = async (args: IGitHubPagesArgs): Promise<string | undefine
   }
 
   return retVal;
-};`
+};`,
+  yaml: `name: PR
+on:
+  pull_request:
+    types: [opened, labeled, unlabeled, synchronize]
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: mheap/github-action-required-labels@v5
+        with:
+          mode: exactly
+          count: 1 # Require exactly 1 label
+          labels: 'PR: Breaking Change :boom:, PR: Bug Fix :bug:, PR: Docs :memo:, PR: Internal :seedling:, PR: New Feature :rocket:'`
 };
 
 export const LIST_ITEMS: IListItem[] = [

packages/typography/package.json

@@ -23,7 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-scrollregion": "^1.0.9",
     "polished": "^4.3.1",
-    "prism-react-renderer": "^1.1.1",
+    "prism-react-renderer": "^2.3.1",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {

packages/typography/src/elements/CodeBlock.spec.tsx

@@ -7,65 +7,79 @@
 
 import React from 'react';
 import { rgba } from 'polished';
-import { render } from 'garden-test-utils';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
+import { render, waitFor } from 'garden-test-utils';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 import { CodeBlock } from './CodeBlock';
 
 describe('CodeBlock', () => {
-  it('passes ref to underlying DOM element', () => {
+  it('passes ref to underlying DOM element', async () => {
     const ref = React.createRef<HTMLPreElement>();
     const { container } = render(<CodeBlock ref={ref} />);
 
-    expect(container.getElementsByTagName('pre')[0]).toBe(ref.current);
+    await waitFor(() => {
+      expect(container.getElementsByTagName('pre')[0]).toBe(ref.current);
+    });
   });
 
-  it('renders the expected element', () => {
+  it('renders the expected element', async () => {
     const { container } = render(<CodeBlock />);
 
-    expect(container.firstChild!.nodeName).toBe('DIV');
-    expect(container.firstChild!.firstChild!.nodeName).toBe('PRE');
+    await waitFor(() => {
+      expect(container.firstChild!.nodeName).toBe('DIV');
+      expect(container.firstChild!.firstChild!.nodeName).toBe('PRE');
+    });
   });
 
-  it('applies container props', () => {
+  it('applies container props', async () => {
     const { container } = render(<CodeBlock containerProps={{ id: 'test' }} />);
 
-    expect(container.firstChild).toHaveAttribute('id', 'test');
+    await waitFor(() => {
+      expect(container.firstChild).toHaveAttribute('id', 'test');
+    });
   });
 
-  it('renders the expected language', () => {
-    const { container } = render(<CodeBlock language="go" />);
+  it('renders the expected language', async () => {
+    const { container } = render(<CodeBlock language="graphql" />);
 
-    expect(container.getElementsByTagName('pre')[0]).toHaveClass('language-go');
+    await waitFor(() => {
+      expect(container.getElementsByTagName('pre')[0]).toHaveClass('language-graphql');
+    });
   });
 
-  it('renders the expected fallback for an invalid language', () => {
+  it('renders the expected fallback for an invalid language', async () => {
     const { container } = render(<CodeBlock language={'swift' as any} />);
 
-    expect(container.getElementsByTagName('pre')[0]).toHaveClass('language-tsx');
+    await waitFor(() => {
+      expect(container.getElementsByTagName('pre')[0]).toHaveClass('language-tsx');
+    });
   });
 
-  it('renders as expected in light mode', () => {
+  it('renders as expected in light mode', async () => {
     const { container } = render(<CodeBlock isLight />);
 
-    expect(container.getElementsByTagName('pre')[0]).toHaveStyleRule(
-      'background-color',
-      PALETTE_V8.grey[100]
-    );
+    await waitFor(() => {
+      expect(container.getElementsByTagName('pre')[0]).toHaveStyleRule(
+        'background-color',
+        PALETTE.grey[100]
+      );
+    });
   });
 
-  it('renders line numbers as expected', () => {
+  it('renders line numbers as expected', async () => {
     const { container } = render(<CodeBlock isNumbered />);
 
-    expect(container.getElementsByTagName('code')[0]).toHaveStyleRule(
-      'content',
-      'counter(linenumber)',
-      {
-        modifier: '&::before'
-      }
-    );
+    await waitFor(() => {
+      expect(container.getElementsByTagName('code')[0]).toHaveStyleRule(
+        'content',
+        'counter(linenumber)',
+        {
+          modifier: '&::before'
+        }
+      );
+    });
   });
 
-  it('renders diff lines as expected', () => {
+  it('renders diff lines as expected', async () => {
     const code = `@@ -1,3 +1,9 @@
 +added line
 -deleted line
@@ -74,40 +88,65 @@ describe('CodeBlock', () => {
     const { container } = render(<CodeBlock language="diff">{code}</CodeBlock>);
     const codeElements = container.getElementsByTagName('code');
 
-    expect(codeElements[0]).toHaveStyleRule('background-color', rgba(PALETTE_V8.royal[400], 0.2));
-    expect(codeElements[1]).toHaveStyleRule('background-color', rgba(PALETTE_V8.lime[400], 0.2));
-    expect(codeElements[2]).toHaveStyleRule('background-color', rgba(PALETTE_V8.crimson[400], 0.2));
-    expect(codeElements[3]).toHaveStyleRule('background-color', rgba(PALETTE_V8.lemon[400], 0.2));
-    expect(codeElements[4]).not.toHaveStyleRule('background-color');
+    await waitFor(() => {
+      expect(codeElements[0]).toHaveStyleRule(
+        'background-color',
+        rgba(PALETTE.royal[600], DEFAULT_THEME.opacity[200])
+      );
+      expect(codeElements[1]).toHaveStyleRule(
+        'background-color',
+        rgba(PALETTE.lime[500], DEFAULT_THEME.opacity[200])
+      );
+      expect(codeElements[2]).toHaveStyleRule(
+        'background-color',
+        rgba(PALETTE.crimson[700], DEFAULT_THEME.opacity[200])
+      );
+      expect(codeElements[3]).toHaveStyleRule(
+        'background-color',
+        rgba(PALETTE.lemon[300], DEFAULT_THEME.opacity[200])
+      );
+      expect(codeElements[4]).not.toHaveStyleRule('background-color');
+    });
   });
 
-  it('highlights lines as expected', () => {
+  it('highlights lines as expected', async () => {
     const code = `one
     two`;
     const { container } = render(<CodeBlock highlightLines={[1]}>{code}</CodeBlock>);
     const codeElements = container.getElementsByTagName('code');
 
-    expect(codeElements[0]).toHaveStyleRule('background-color', rgba(PALETTE_V8.white, 0.1));
-    expect(codeElements[1]).not.toHaveStyleRule('background-color');
+    await waitFor(() => {
+      expect(codeElements[0]).toHaveStyleRule(
+        'background-color',
+        rgba(PALETTE.white, DEFAULT_THEME.opacity[100])
+      );
+      expect(codeElements[1]).not.toHaveStyleRule('background-color');
+    });
   });
 
   describe('size', () => {
-    it('renders small size', () => {
+    it('renders small size', async () => {
       const { container } = render(<CodeBlock size="small" />);
 
-      expect(container.getElementsByTagName('code')[0]).toHaveStyleRule('font-size', '11px');
+      await waitFor(() => {
+        expect(container.getElementsByTagName('code')[0]).toHaveStyleRule('font-size', '11px');
+      });
     });
 
-    it('renders medium size', () => {
+    it('renders medium size', async () => {
       const { container } = render(<CodeBlock size="medium" />);
 
-      expect(container.getElementsByTagName('code')[0]).toHaveStyleRule('font-size', '13px');
+      await waitFor(() => {
+        expect(container.getElementsByTagName('code')[0]).toHaveStyleRule('font-size', '13px');
+      });
     });
 
-    it('renders large size', () => {
+    it('renders large size', async () => {
       const { container } = render(<CodeBlock size="large" />);
 
-      expect(container.getElementsByTagName('code')[0]).toHaveStyleRule('font-size', '17px');
+      await waitFor(() => {
+        expect(container.getElementsByTagName('code')[0]).toHaveStyleRule('font-size', '17px');
+      });
     });
   });
 });