feat(code-block): create Code Block Package

Co-authored-by: Shadi <TheSisb@users.noreply.github.com>
Co-authored-by: gloriliale <77117846+gloriliale@users.noreply.github.com>
Co-authored-by: Lee White <leewhite128@gmail.com>

.changeset/great-tools-cry.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/code-block': major
+'@twilio-paste/core': minor
+---
+
+[Code Block] create a new CodeBlock component, which allows you to display readable blocks of code 🎉

.changeset/lucky-balloons-joke.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/syntax-highlighter-library': major
+---
+
+[Syntax Highlighter] Create a new library, @twilio-paste/syntax-highlighter-library

.changeset/tall-falcons-occur.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/button': patch
+'@twilio-paste/core': patch
+---
+
+[Button] support <Button as='a' variant='inverse'>

.codesandbox/ci.json

@@ -20,6 +20,7 @@
     "/packages/paste-core/components/chat-log",
     "/packages/paste-core/components/checkbox",
     "/packages/paste-libraries/clipboard-copy",
+    "/packages/paste-core/components/code-block",
     "/packages/paste-color-contrast-utils",
     "/packages/paste-core/components/combobox",
     "/packages/paste-core/primitives/combobox",
@@ -65,6 +66,7 @@
     "/packages/paste-style-props",
     "/packages/paste-libraries/styling",
     "/packages/paste-core/components/switch",
+    "/packages/paste-libraries/syntax-highlighter",
     "/packages/paste-core/components/table",
     "/packages/paste-core/components/tabs",
     "/packages/paste-core/primitives/tabs",

@types/react-syntax-highlighter/index.d.ts

@@ -0,0 +1,9 @@
+declare module 'react-syntax-highlighter/dist/esm/languages/prism/shell-session' {
+  const language: any;
+  export default language;
+}
+
+declare module 'react-syntax-highlighter/dist/esm/styles/prism/night-owl' {
+  const style: { [key: string]: React.CSSProperties };
+  export default style;
+}

cypress/integration/sitemap-vrt/constants.ts

@@ -15,6 +15,7 @@ export const SITEMAP = [
   '/components/breadcrumb/',
   '/components/badge/',
   '/components/callout/',
+  '/components/code-block/',
   '/components/card/',
   '/components/chat-log/',
   '/components/checkbox/',

packages/paste-codemods/tools/.cache/mappings.json

@@ -38,6 +38,12 @@
   "Checkbox": "@twilio-paste/core/checkbox",
   "CheckboxDisclaimer": "@twilio-paste/core/checkbox",
   "CheckboxGroup": "@twilio-paste/core/checkbox",
+  "CodeBlock": "@twilio-paste/core/code-block",
+  "CodeBlockHeader": "@twilio-paste/core/code-block",
+  "CodeBlockTab": "@twilio-paste/core/code-block",
+  "CodeBlockTabList": "@twilio-paste/core/code-block",
+  "CodeBlockTabPanel": "@twilio-paste/core/code-block",
+  "CodeBlockWrapper": "@twilio-paste/core/code-block",
   "Combobox": "@twilio-paste/core/combobox",
   "ComboboxInputWrapper": "@twilio-paste/core/combobox",
   "ComboboxListbox": "@twilio-paste/core/combobox",

packages/paste-core/components/button/__tests__/button.test.tsx

@@ -78,13 +78,6 @@ describe('Button', () => {
           </Button>
         )
       ).toThrow();
-      expect(() =>
-        render(
-          <Button as="a" href="#" variant="inverse">
-            Go to Paste
-          </Button>
-        )
-      ).toThrow();
       spy.mockRestore();
     });
 

packages/paste-core/components/button/src/index.tsx

@@ -88,8 +88,8 @@ const handlePropValidation = ({
     if (variant === 'link' || variant === 'inverse_link') {
       throw new Error(`[Paste: Button] Using Button component as an Anchor. Use the Paste Anchor component instead.`);
     }
-    if (variant !== 'primary' && variant !== 'secondary' && variant !== 'reset') {
-      throw new Error(`[Paste: Button] <Button as="a"> only works with the following variants: primary or secondary.`);
+    if (variant !== 'primary' && variant !== 'secondary' && variant !== 'reset' && variant !== 'inverse') {
+      throw new Error(`[Paste: Button] <Button as="a"> only works with the following variants: primary and secondary.`);
     }
     if (disabled || loading) {
       throw new Error(`[Paste: Button] <Button as="a"> cannot be disabled or loading.`);

packages/paste-core/components/code-block/__tests__/customization.spec.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import {CustomizationProvider} from '@twilio-paste/customization';
+import {render, screen} from '@testing-library/react';
+
+import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src';
+
+const jsCode = `(num) => num + 1`;
+
+const CustomizationWrapper: React.FC = ({children}) => (
+  <CustomizationProvider
+    baseTheme="default"
+    theme={TestTheme}
+    elements={{
+      CODE_BLOCK_CONTENT: {width: 'size50'},
+      CODE_BLOCK_COPY_BUTTON: {backgroundColor: 'colorBackgroundErrorWeakest'},
+      CODE_BLOCK_EXTERNAL_LINK: {backgroundColor: 'colorBackgroundErrorWeakest'},
+      CODE_BLOCK_HEADER: {borderTopRightRadius: 'borderRadius30'},
+      CODE_BLOCK_TAB_LIST: {columnGap: 'space0'},
+      CODE_BLOCK_TAB_PANEL: {borderBottomRightRadius: 'borderRadius30'},
+      CODE_BLOCK_TAB: {borderRadius: 'borderRadius0'},
+      CODE_BLOCK_WRAPPER: {width: 'size50'},
+      CODE_BLOCK: {width: 'size50'},
+    }}
+  >
+    {children}
+  </CustomizationProvider>
+);
+
+const CustomizationMyWrapper: React.FC = ({children}) => (
+  <CustomizationProvider
+    baseTheme="default"
+    theme={TestTheme}
+    elements={{
+      MY_CODE_BLOCK_CONTENT: {width: 'size50'},
+      MY_CODE_BLOCK_COPY_BUTTON: {backgroundColor: 'colorBackgroundErrorWeakest'},
+      MY_CODE_BLOCK_EXTERNAL_LINK: {backgroundColor: 'colorBackgroundErrorWeakest'},
+      MY_CODE_BLOCK_HEADER: {borderTopRightRadius: 'borderRadius30'},
+      MY_CODE_BLOCK_TAB_LIST: {columnGap: 'space0'},
+      MY_CODE_BLOCK_TAB_PANEL: {borderBottomRightRadius: 'borderRadius30'},
+      MY_CODE_BLOCK_TAB: {borderRadius: 'borderRadius0'},
+      MY_CODE_BLOCK_WRAPPER: {width: 'size50'},
+      MY_CODE_BLOCK: {width: 'size50'},
+    }}
+  >
+    {children}
+  </CustomizationProvider>
+);
+
+describe('Customization', () => {
+  describe('CodeBlock', () => {
+    it('should set a default element data attribute', () => {
+      render(
+        <CodeBlockWrapper>
+          <CodeBlockHeader>My code block</CodeBlockHeader>
+          <CodeBlockTabList>
+            <CodeBlockTab>JavaScript</CodeBlockTab>
+          </CodeBlockTabList>
+          <CodeBlockTabPanel>
+            <CodeBlock language="javascript" code={jsCode} data-testid="code-block" externalLink="www.google.com" />
+          </CodeBlockTabPanel>
+        </CodeBlockWrapper>,
+        {
+          wrapper: CustomizationWrapper,
+        }
+      );
+
+      const codeBlock = screen.getByTestId('code-block');
+      const content = codeBlock.querySelector('pre')?.parentElement;
+      const heading = screen.getByRole('heading', {name: 'My code block'});
+      const wrapper = heading.parentElement;
+      const tabList = screen.getByRole('tablist');
+      const tab = screen.getByRole('tab', {name: 'JavaScript'});
+      const tabPanel = codeBlock.parentElement;
+      const copyButton = screen.getByRole('button', {name: 'Copy code block'});
+      const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
+
+      expect(wrapper?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_WRAPPER');
+      expect(content?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_CONTENT');
+      expect(tabList.getAttribute('data-paste-element')).toBe('CODE_BLOCK_TAB_LIST');
+      expect(tab.getAttribute('data-paste-element')).toBe('CODE_BLOCK_TAB');
+      expect(tabPanel?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_TAB_PANEL');
+      expect(codeBlock.getAttribute('data-paste-element')).toBe('CODE_BLOCK');
+      expect(heading.getAttribute('data-paste-element')).toBe('CODE_BLOCK_HEADER');
+      expect(copyButton.getAttribute('data-paste-element')).toBe('CODE_BLOCK_COPY_BUTTON');
+      expect(externalLink.getAttribute('data-paste-element')).toBe('CODE_BLOCK_EXTERNAL_LINK');
+    });
+
+    it('should set a custom element data attribute', () => {
+      render(
+        <CodeBlockWrapper data-testid="wrapper" element="MY_CODE_BLOCK_WRAPPER">
+          <CodeBlockHeader element="MY_CODE_BLOCK_HEADER">My code block</CodeBlockHeader>
+          <CodeBlockTabList element="MY_CODE_BLOCK_TAB_LIST">
+            <CodeBlockTab element="MY_CODE_BLOCK_TAB">JavaScript</CodeBlockTab>
+          </CodeBlockTabList>
+          <CodeBlockTabPanel element="MY_CODE_BLOCK_TAB_PANEL">
+            <CodeBlock
+              language="javascript"
+              code={jsCode}
+              data-testid="code-block"
+              externalLink="www.google.com"
+              element="MY_CODE_BLOCK"
+            />
+          </CodeBlockTabPanel>
+        </CodeBlockWrapper>,
+        {
+          wrapper: CustomizationMyWrapper,
+        }
+      );
+
+      const codeBlock = screen.getByTestId('code-block');
+      const content = codeBlock.querySelector('pre')?.parentElement;
+      const heading = screen.getByRole('heading', {name: 'My code block'});
+      const wrapper = heading.parentElement;
+      const tabList = screen.getByRole('tablist');
+      const tab = screen.getByRole('tab', {name: 'JavaScript'});
+      const tabPanel = codeBlock.parentElement;
+      const copyButton = screen.getByRole('button', {name: 'Copy code block'});
+      const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
+
+      expect(wrapper?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_WRAPPER');
+      expect(content?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_CONTENT');
+      expect(tabList.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_TAB_LIST');
+      expect(tab.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_TAB');
+      expect(tabPanel?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_TAB_PANEL');
+      expect(codeBlock.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK');
+      expect(heading.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_HEADER');
+      expect(copyButton.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_COPY_BUTTON');
+      expect(externalLink.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_EXTERNAL_LINK');
+    });
+
+    it('should add custom styles to the component', () => {
+      render(
+        <CodeBlockWrapper>
+          <CodeBlockHeader>My code block</CodeBlockHeader>
+          <CodeBlockTabList>
+            <CodeBlockTab>JavaScript</CodeBlockTab>
+          </CodeBlockTabList>
+          <CodeBlockTabPanel>
+            <CodeBlock language="javascript" code={jsCode} data-testid="code-block" externalLink="www.google.com" />
+          </CodeBlockTabPanel>
+        </CodeBlockWrapper>,
+        {
+          wrapper: CustomizationWrapper,
+        }
+      );
+
+      const codeBlock = screen.getByTestId('code-block');
+      const content = codeBlock.querySelector('pre')?.parentElement;
+      const heading = screen.getByRole('heading', {name: 'My code block'});
+      const wrapper = heading.parentElement;
+      const tabList = screen.getByRole('tablist');
+      const tab = screen.getByRole('tab', {name: 'JavaScript'});
+      const tabPanel = codeBlock.parentElement;
+      const copyButton = screen.getByRole('button', {name: 'Copy code block'});
+      const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
+
+      expect(codeBlock).toHaveStyleRule('width', '31.5rem');
+      expect(content).toHaveStyleRule('width', '31.5rem');
+      expect(wrapper).toHaveStyleRule('width', '31.5rem');
+      expect(heading).toHaveStyleRule('border-top-right-radius', '8px');
+      expect(tabList).toHaveStyleRule('column-gap', '0');
+      expect(tab).toHaveStyleRule('border-radius', '0');
+      expect(tabPanel).toHaveStyleRule('border-bottom-right-radius', '8px');
+      expect(copyButton).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
+      expect(externalLink).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
+    });
+
+    it('should set custom styles with custom element names', () => {
+      render(
+        <CodeBlockWrapper data-testid="wrapper" element="MY_CODE_BLOCK_WRAPPER">
+          <CodeBlockHeader element="MY_CODE_BLOCK_HEADER">My code block</CodeBlockHeader>
+          <CodeBlockTabList element="MY_CODE_BLOCK_TAB_LIST">
+            <CodeBlockTab element="MY_CODE_BLOCK_TAB">JavaScript</CodeBlockTab>
+          </CodeBlockTabList>
+          <CodeBlockTabPanel element="MY_CODE_BLOCK_TAB_PANEL">
+            <CodeBlock
+              language="javascript"
+              code={jsCode}
+              data-testid="code-block"
+              externalLink="www.google.com"
+              element="MY_CODE_BLOCK"
+            />
+          </CodeBlockTabPanel>
+        </CodeBlockWrapper>,
+        {
+          wrapper: CustomizationMyWrapper,
+        }
+      );
+
+      const codeBlock = screen.getByTestId('code-block');
+      const content = codeBlock.querySelector('pre')?.parentElement;
+      const heading = screen.getByRole('heading', {name: 'My code block'});
+      const wrapper = heading.parentElement;
+      const tabList = screen.getByRole('tablist');
+      const tab = screen.getByRole('tab', {name: 'JavaScript'});
+      const tabPanel = codeBlock.parentElement;
+      const copyButton = screen.getByRole('button', {name: 'Copy code block'});
+      const externalLink = screen.getByRole('link', {name: 'Open code block in new page'});
+
+      expect(codeBlock).toHaveStyleRule('width', '31.5rem');
+      expect(content).toHaveStyleRule('width', '31.5rem');
+      expect(wrapper).toHaveStyleRule('width', '31.5rem');
+      expect(heading).toHaveStyleRule('border-top-right-radius', '8px');
+      expect(tabList).toHaveStyleRule('column-gap', '0');
+      expect(tab).toHaveStyleRule('border-radius', '0');
+      expect(tabPanel).toHaveStyleRule('border-bottom-right-radius', '8px');
+      expect(copyButton).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
+      expect(externalLink).toHaveStyleRule('background-color', 'rgb(254, 236, 236)');
+    });
+  });
+});