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': major
+---
+
+[Syntax Highlighter] Create a new library, @twilio-paste/syntax-highlighter

.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,8 @@
   "Checkbox": "@twilio-paste/core/checkbox",
   "CheckboxDisclaimer": "@twilio-paste/core/checkbox",
   "CheckboxGroup": "@twilio-paste/core/checkbox",
+  "CodeBlock": "@twilio-paste/core/code-block",
+  "CodeBlockGroup": "@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.`);