refactor: Code Block

- Code Block tests
nl-design-system · Dec 18, 2024 · 8be1ad5 · 8be1ad5
1 parent 7f10fee
commit 8be1ad5
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/packages/components-react/code-block-react/src/code-block.test.tsx b/packages/components-react/code-block-react/src/code-block.test.tsx
@@ -29,6 +29,45 @@ describe('Code Block', () => {
     expect(codeBlock).toHaveClass('nl-code-block', extraClassName);
   });
 
+  it('renders an element with class names "nl-code-block" and "nl-code-block--overflow" when told to overflow', () => {
+    const { container } = render(<CodeBlock overflow="overflow">{testCode}</CodeBlock>);
+    const codeBlock = container.querySelector('pre:only-child');
+
+    expect(codeBlock).toHaveClass('nl-code-block', 'nl-code-block--overflow');
+  });
+
+  it('renders an element with class names "nl-code-block" and "nl-code-block--nowrap" when told not to wrap', () => {
+    const { container } = render(<CodeBlock overflow="nowrap">{testCode}</CodeBlock>);
+    const codeBlock = container.querySelector('pre:only-child');
+
+    expect(codeBlock).toHaveClass('nl-code-block', 'nl-code-block--nowrap');
+  });
+
+  it('renders an element with `tabindex="0" when passed `overflow="overfow"`', () => {
+    const { container } = render(<CodeBlock overflow="overflow">{testCode}</CodeBlock>);
+    const codeBlock = container.querySelector('pre:only-child');
+
+    expect(codeBlock).toHaveAttribute('tabindex', '0');
+  });
+
+  it('allows the tabindex to be overriden even when told to overflow', () => {
+    const { container } = render(
+      <CodeBlock overflow="overflow" tabIndex={undefined}>
+        {testCode}
+      </CodeBlock>,
+    );
+    const codeBlock = container.querySelector('pre:only-child');
+
+    expect(codeBlock).not.toHaveAttribute('tabindex');
+  });
+
+  it('renders an element with only class name "nl-code-block" when told to wrap and when no extra class name is passed', () => {
+    const { container } = render(<CodeBlock overflow="wrap">{testCode}</CodeBlock>);
+    const codeBlock = container.querySelector('pre:only-child');
+
+    expect(codeBlock).toHaveClass('nl-code-block', { exact: true });
+  });
+
   it('renders an HTML pre element that contains an HTML code element', () => {
     const { container } = render(<CodeBlock>{testCode}</CodeBlock>);
     const codeBlock = container.querySelector('pre:only-child');

diff --git a/packages/components-react/code-block-react/src/code-block.tsx b/packages/components-react/code-block-react/src/code-block.tsx
@@ -3,22 +3,25 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 export interface CodeBlockProps extends HTMLAttributes<HTMLPreElement> {
-  line?: 'wrap' | 'nowrap' | 'overflow';
+  overflow?: 'wrap' | 'nowrap' | 'overflow';
 }
 
 export const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(function CodeBlock(props, forwardedRef) {
-  const { children, className, line = 'wrap', ...restProps } = props;
+  const { children, className, overflow = 'wrap', ...restProps } = props;
+  const tabIndex = overflow === 'overflow' ? 0 : undefined;
 
   return (
     <pre
       dir="ltr"
       translate="no"
-      tabIndex={line === 'overflow' ? 0 : undefined}
+      tabIndex={tabIndex}
       {...restProps}
       className={clsx(
         'nl-code-block',
-        line === 'nowrap' && 'nl-code-block--nowrap',
-        line === 'overflow' && 'nl-code-block--overflow',
+        {
+          ['nl-code-block--nowrap']: overflow === 'nowrap',
+          ['nl-code-block--overflow']: overflow === 'overflow',
+        },
         className,
       )}
       ref={forwardedRef}

diff --git a/packages/storybook-test/stories/code-block/code-block.stories.tsx b/packages/storybook-test/stories/code-block/code-block.stories.tsx
@@ -69,7 +69,6 @@ const meta = {
   },
   component: CodeBlock,
   decorators: [ExampleBodyTextDecorator],
-
   parameters: {
     docs: {
       description: {
@@ -154,7 +153,6 @@ export const Default: Story = {
   args: {
     children: `import { Code } from '@nl-design-system/code-react';`,
   },
-  decorators: [ExampleBodyTextDecorator],
   globals: {
     dir: 'ltr',
     lang: 'nl',
@@ -185,9 +183,8 @@ export const LineOverflow: Story = {
   name: 'Code Block met 1 regel ECMAScript, met mogelijk een scrollbalk',
   args: {
     children: `import { Code } from '@nl-design-system/code-react';`,
-    line: 'overflow',
+    overflow: 'overflow',
   },
-  decorators: [ExampleBodyTextDecorator],
   globals: {
     dir: 'ltr',
     lang: 'nl',
@@ -277,7 +274,7 @@ export const LangeRegelLineOverflow: Story = {
   name: 'Code Block met 1 extra lange regel, die kan scrollen',
   args: {
     ...LangeRegel.args,
-    line: 'overflow',
+    overflow: 'overflow',
   },
   globals: {
     dir: 'ltr',
@@ -300,15 +297,14 @@ export const LangeRegelLineNowrap: Story = {
   name: 'Code Block met 1 extra lange regel zonder line-wrap, die kan scrollen door een container element',
   args: {
     ...LangeRegel.args,
-    line: 'nowrap',
+    overflow: 'nowrap',
   },
   decorators: [
     (Story) => (
-      <div tabIndex={0} style={{ overflow: 'auto' }}>
-        {Story()}
+      <div tabIndex={0} style={{ overflowInline: 'auto' }}>
+        <Story />
       </div>
     ),
-    ...meta.decorators,
   ],
   globals: {
     dir: 'ltr',
@@ -360,7 +356,7 @@ export const FallbackFont: Story = {
     children: `De Code Block moet visueel onderscheidbaar zijn.`,
     style: {
       '--nl-code-block-font-family': '""',
-    } as CSSProperties,
+    },
   },
   globals: {
     dir: 'ltr',
@@ -464,7 +460,7 @@ var answer = numberA * numberB;`,
     (Story) => (
       <>
         <Paragraph>في المثال التالي سوف نحسب 7 مرات 6</Paragraph>
-        {Story()}
+        <Story />
       </>
     ),
   ],