Terminal numbers (#7557)

* move code block line numbers to css

* update tests for line numbers in css

---------

Co-authored-by: Jacob Logan <lognjc@amazon.com>

Author: jacoblogan

src/components/MDXComponents/MDXCode.tsx

@@ -67,7 +67,7 @@ export const MDXCode = ({
   return (
     <Highlight theme={theme} code={code} language={language}>
       {({ style, tokens, getLineProps, getTokenProps }) => (
-        <View data-testid={testId}>
+        <View data-testid={testId} className={'code-block'}>
           <View className="pre-container">
             {shouldShowHeader ? (
               <Flex className="pre-header" data-testid={testHeaderId}>

src/components/MDXComponents/TokenList.tsx

@@ -1,6 +1,7 @@
 import type { Token } from 'prism-react-renderer';
 import type { TokenListProps } from './types';
 import { MDXHighlightedCopyCodeButton } from './MDXHighlightedCopyCodeButton';
+import classNames from 'classnames';
 
 type ProcessedToken = {
   line: Token[];
@@ -135,12 +136,11 @@ export const TokenList = ({
         {...getLineProps({ line: token.line })}
         className={`token-line${shouldHighlight ? ' line-highlight' : ''}`}
       >
-        {showLineNumbers && (
-          <span className="line-number">{token.lineNumber}</span>
-        )}
-        {token.line.map((token, key) => (
-          <span key={key} {...getTokenProps({ token })} />
-        ))}
+        <div className={classNames({ 'show-line-numbers': showLineNumbers })}>
+          {token.line.map((token, key) => (
+            <span key={key} {...getTokenProps({ token })} />
+          ))}
+        </div>
       </div>
     ) : null;
   }

src/components/MDXComponents/__tests__/MDXCode.test.tsx

@@ -44,6 +44,15 @@ describe('MDXCode', () => {
     expect(titleElement.className).toContain('pre-title');
   });
 
+  it('should reset the code-block css counter', async () => {
+    // line numbers have been moved to css, so here we are looking for the class that has "counter-reset: code-block;"
+    // line number css can be found in `/src/styles/code.scss`
+    const { container } = render(
+      <MDXCode testId={testId} codeString={codeString}></MDXCode>
+    );
+    expect(container.querySelector('.code-block')).toBeInTheDocument();
+  });
+
   it('should show a copy button for supported languages', async () => {
     render(<MDXCode codeString={codeString}></MDXCode>);
     const copyButton = await screen.findByRole('button', { name: /Copy/i });
@@ -70,17 +79,20 @@ describe('MDXCode', () => {
   });
 
   it('should show line numbers by default', async () => {
+    // Line numbers have been moved to css so we are just looking for the needed class name
     const codeString = 'test code';
-    render(<MDXCode codeString={codeString}></MDXCode>);
-    const number = screen.queryByText('1');
-    expect(number).toBeInTheDocument();
+    const { container } = render(<MDXCode codeString={codeString}></MDXCode>);
+    expect(container.querySelector('.show-line-numbers')).toBeInTheDocument();
   });
 
   it('should not have line numbers if showLineNumbers is false', async () => {
     const codeString = 'test code';
-    render(<MDXCode showLineNumbers={false} codeString={codeString}></MDXCode>);
-    const number = screen.queryByText('1');
-    expect(number).not.toBeInTheDocument();
+    const { container } = render(
+      <MDXCode showLineNumbers={false} codeString={codeString}></MDXCode>
+    );
+    expect(
+      container.querySelector('.show-line-numbers')
+    ).not.toBeInTheDocument();
   });
 
   it('should have highlighted line when //highlight-next-line is used', async () => {

src/styles/code.scss

@@ -109,6 +109,7 @@ code:not([class]) {
     background-color: var(--amplify-colors-primary-40);
     z-index: 1;
     height: 100%;
+    top: 0;
   }
   @include darkMode {
     &:before {
@@ -120,7 +121,13 @@ code:not([class]) {
   }
 }
 
-.line-number {
+.code-block {
+  counter-reset: code-block;
+}
+
+.show-line-numbers:before {
+  counter-increment: code-block;
+  content: counter(code-block);
   z-index: 1;
   position: relative;
   color: var(--code-theme-comment);
@@ -195,4 +202,4 @@ code:not([class]) {
     --code-copy-focus-background-color: var(--amplify-colors-neutral-20);
     --code-copy-focus-box-shadow: var(--amplify-colors-neutral-100);
   }
-}
+}