LG-4749: Code loading skeleton

.changeset/chatty-ears-exercise.md

@@ -1,6 +1,7 @@
 ---
 '@leafygreen-ui/code': major
 ---
+
 ## What's new?
 
 ### `panel`
@@ -49,6 +50,20 @@ e.g.
 </Code>
 ```
 
+### `isLoading`
+Adds a new prop, `isLoading`. This prop determines whether or not the loading skeleton will be rendered in place of the code block. If `true`, the language switcher and copy button will be disabled in the top panel.
+
+e.g.
+
+```js
+<Code
+  language="javascript"
+  isLoading
+>
+  {snippet}
+</Code>
+```
+
 
 ### `chromeTitle`
 
@@ -64,15 +79,17 @@ e.g.
 **After**:
 ```js
 <Code 
-  panel={
-    <Panel
-      title="Title"
-    />
-  }
+  panel={<Panel title="Title" />}
 >
  {snippet}
 </Code>
 ```
+
+## What's changed?
+
+The `className` prop is no longer applied to the `<pre>` tag. Instead it is applied to the parent `<div>` wrapper.
+
+
 ## Deprecated
 
 The following props have been marked as `deprecated`:
@@ -88,16 +105,15 @@ Moving forward these props should be passed to the new sub-component, `<Panel />
 **Before**:
 ```js
 <Code
-  language={}
-  showLineNumbers={}
+  language="javascript"
+  showLineNumbers
   onCopy={() => {}}
-  darkMode={}
-  customActionButtons={}
-  showCustomActionButtons={}
-  chromeTitle={}
-  languageOptions={}
-  onChange={}
-  copyable={}
+  darkMode={true}
+  onChange={() => {}}
+  languageOptions={[]}
+  showCustomActionButtons
+  customActionButtons={[]}
+  chromeTitle='Title'
 >
   {snippet}
 </Code>
@@ -107,7 +123,7 @@ Moving forward these props should be passed to the new sub-component, `<Panel />
 ```js
 <Code
   language="javascript"
-  showLineNumbers={true}
+  showLineNumbers
   onCopy={() => {}}
   darkMode={true}
   // NEW PANEL PROP

packages/code/package.json

@@ -32,6 +32,7 @@
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/select": "workspace:^",
+    "@leafygreen-ui/skeleton-loader": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
     "@leafygreen-ui/tooltip": "workspace:^",
     "@leafygreen-ui/typography": "workspace:^",

packages/code/src/Code.stories.tsx

@@ -7,6 +7,7 @@ import {
   type StoryType,
 } from '@lg-tools/storybook-utils';
 
+import { css } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import LeafygreenProvider from '@leafygreen-ui/leafygreen-provider';
@@ -83,7 +84,7 @@ const meta: StoryMetaType<typeof Code> = {
       ],
     },
     generate: {
-      storyNames: ['WithPanel', 'WithoutPanel'],
+      storyNames: ['WithPanel', 'WithoutPanel', 'Loading'],
     },
   },
   args: {
@@ -94,6 +95,7 @@ const meta: StoryMetaType<typeof Code> = {
     chromeTitle: '',
   },
   argTypes: {
+    isLoading: { control: 'boolean' },
     copyable: { control: 'boolean' },
     expandable: { control: 'boolean' },
     showLineNumbers: { control: 'boolean' },
@@ -132,6 +134,9 @@ export const LiveExample: StoryType<typeof Code, FontSizeProps> = ({
     <Code
       {...(args as CodeProps)}
       highlightLines={highlightLines ? [6, [10, 15]] : undefined}
+      className={css`
+        width: 100%;
+      `}
     >
       {jsSnippet}
     </Code>
@@ -318,3 +323,31 @@ WithoutPanel.parameters = {
     ],
   },
 };
+
+export const Loading = () => {};
+Loading.parameters = {
+  controls: {
+    exclude: /.*/g,
+  },
+  generate: {
+    combineArgs: {
+      darkMode: [false, true],
+      expandable: [true, false],
+      panel: [
+        undefined,
+        <Panel
+          title="Title"
+          showCustomActionButtons
+          customActionButtons={customActionButtons}
+          languageOptions={languageOptions}
+          onChange={() => {}}
+          key={7}
+        />,
+      ],
+    },
+    args: {
+      language: languageOptions[0].displayName,
+      isLoading: true,
+    },
+  },
+};