feat: allow starting linenumbers from set value

pages/code-view/with-line-numbers.page.tsx

@@ -12,6 +12,8 @@ export default function CodeViewPage() {
       <SpaceBetween direction="vertical" size="l">
         <CodeView lineNumbers={true} content={`# Hello World`} />
         <CodeView lineNumbers={true} content={`# Hello World\n\nThis is Cloudscape.`} />
+        <CodeView lineNumbers={true} lineNumbersStart={5} content={`# Hello World\n\nThis is Cloudscape.`} />
+        <CodeView lineNumbers={true} lineNumbersStart={-1} content={`# Hello World\n\nThis is Cloudscape.`} />
       </SpaceBetween>
     </ScreenshotArea>
   );

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -38,6 +38,14 @@ Defaults to \`false\`.
       "optional": true,
       "type": "boolean",
     },
+    {
+      "description": "Controls the number the line numbers start counting from.
+Defaults to \`1\`.
+",
+      "name": "lineNumbersStart",
+      "optional": true,
+      "type": "number",
+    },
   ],
   "regions": [
     {

src/code-view/__tests__/code-view.test.tsx

@@ -29,6 +29,18 @@ describe("CodeView", () => {
     expect(wrapper!.findByClassName(styles["line-numbers"])!.getElement()).toHaveTextContent("123");
   });
 
+  test("correctly renders line numbers when lineNumbersStart is set", () => {
+    render(<CodeView content={`Hello\nWorld\n!`} lineNumbers={true} lineNumbersStart={4}></CodeView>);
+    const wrapper = createWrapper()!.findCodeView();
+    expect(wrapper!.findByClassName(styles["line-numbers"])!.getElement()).toHaveTextContent("456");
+  });
+
+  test("correctly renders line numbers when lineNumbersStart is set to a negative value", () => {
+    render(<CodeView content={`Hello\nWorld\n!`} lineNumbers={true} lineNumbersStart={-1}></CodeView>);
+    const wrapper = createWrapper()!.findCodeView();
+    expect(wrapper!.findByClassName(styles["line-numbers"])!.getElement()).toHaveTextContent("-101");
+  });
+
   test("correctly renders aria-label", () => {
     render(<CodeView content={`Hello\nWorld\n!`} ariaLabel="Code snippet"></CodeView>);
     const wrapper = createWrapper()!.findCodeView();

src/code-view/interfaces.ts

@@ -24,6 +24,13 @@ export interface CodeViewProps {
    */
   lineNumbers?: boolean;
 
+  /**
+   * Controls the number the line numbers start counting from.
+   *
+   * Defaults to `1`.
+   */
+  lineNumbersStart?: number;
+
   /**
    * An optional slot to display a button to enable users to perform actions, such as copy or download the code snippet.
    *

src/code-view/internal.tsx

@@ -10,8 +10,8 @@ import styles from "./styles.css.js";
 
 const ACE_CLASSES = { light: "ace-cloud_editor", dark: "ace-cloud_editor_dark" };
 
-function getLineNumbers(content: string) {
-  return content.split("\n").map((_, n) => n + 1);
+function getLineNumbers(content: string, lineNumbersStart = 1) {
+  return content.split("\n").map((_, n) => lineNumbersStart + n);
 }
 
 type InternalCodeViewProps = CodeViewProps & InternalBaseComponentProps;
@@ -20,6 +20,7 @@ export function InternalCodeView({
   content,
   actions,
   lineNumbers,
+  lineNumbersStart,
   highlight,
   ariaLabel,
   ariaLabelledby,
@@ -46,7 +47,7 @@ export function InternalCodeView({
         <Box color="text-status-inactive" fontSize="body-m">
           {lineNumbers && (
             <div className={styles["line-numbers"]} aria-hidden={true}>
-              {getLineNumbers(content).map((number) => (
+              {getLineNumbers(content, lineNumbersStart).map((number) => (
                 <span key={number}>{number}</span>
               ))}
             </div>