Merge pull request #396 from WestpacGEL/394-update-mdoc-code-block-to…

…-allow-option-of-putting-html-with-no-white-block-being-rendered-behind fixes #394 allow html with no white background
WestpacGEL · Nov 28, 2023 · 1285827 · 1285827
2 parents a75df84 + d2a71f8
commit 1285827
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/apps/site/src/components/code/components/live-code/live-code.component.tsx b/apps/site/src/components/code/components/live-code/live-code.component.tsx
@@ -3,6 +3,7 @@ import copy from 'clipboard-copy';
 import { themes } from 'prism-react-renderer';
 import { KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react';
 import { LiveContext, LiveEditor, LivePreview } from 'react-live';
+import { VariantProps } from 'tailwind-variants';
 
 import { styles as liveCodeStyles } from './live-code.styles';
 import { LiveCodeProps } from './live-code.types';
@@ -15,7 +16,10 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }:
   const [localCopy, setLocalCopy] = useState<string>(live.code);
   const [isCodeVisible, toggleIsCodeVisible] = useState(showCode);
 
-  const styles = liveCodeStyles({ isCodeVisible });
+  const styles = liveCodeStyles({
+    isCodeVisible,
+    language: live.language as VariantProps<typeof liveCodeStyles>['language'],
+  });
 
   const copyLiveCode = useCallback(() => {
     copy(localCopy);
@@ -56,7 +60,7 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }:
         {enableLiveCode && (
           <div className={styles.buttonWrapper({})}>
             <button
-              className="typography-body-10 flex items-center gap-1 border-l border-l-border p-3 transition-opacity hover:opacity-100"
+              className="typography-body-10 border-l-border flex items-center gap-1 border-l p-3 transition-opacity hover:opacity-100"
               ref={liveCodeToggleButton}
               onClick={() => toggleIsCodeVisible(state => !state)}
               aria-controls={codeId}

diff --git a/apps/site/src/components/code/components/live-code/live-code.styles.ts b/apps/site/src/components/code/components/live-code/live-code.styles.ts
@@ -3,15 +3,21 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     base: 'max-w-5xl overflow-hidden bg-white p-6 pb-0',
-    displayWrapper: 'relative -mx-6 -mt-6 border-muted-50 p-6',
-    error: 'flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90',
+    displayWrapper: 'border-muted-50 relative -mx-6 -mt-6 p-6',
+    error: 'bg-danger-10 text-danger-90 flex gap-2 rounded-md p-2',
     buttonWrapper: '-mx-6 -mb-6 flex items-center justify-end ',
-    codeWrapper: 'relative -mx-6 border-t border-muted-50',
+    codeWrapper: 'border-muted-50 relative -mx-6 border-t',
     arrowIcon: 'transition-transform',
     copyCodeButton:
       'typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100',
   },
   variants: {
+    language: {
+      html: {
+        base: 'bg-transparent',
+        displayWrapper: 'p-0',
+      },
+    },
     isCodeVisible: {
       true: {
         codeWrapper: 'block',