From a34d190cd4546fd725eef86db9846248c7e6cca6 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenjishiromajp@gmail.com>
Date: Thu, 19 Oct 2023 12:06:50 +1000
Subject: [PATCH] fix

---
 .../live-code/live-code.component.tsx         | 27 ++++------
 .../components/live-code/live-code.styles.ts  | 51 +++++++++++++++++++
 .../accordion/accordion.stories.tsx           |  2 +-
 3 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 apps/site/src/components/code/components/live-code/live-code.styles.ts

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
index baf912fd0..37b6f3898 100644
--- 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
@@ -1,12 +1,12 @@
 import { AlertIcon } from '@westpac/ui/icon';
 import copy from 'clipboard-copy';
-import { clsx } from 'clsx';
 import { themes } from 'prism-react-renderer';
-import { ComponentType, Context, KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react';
+import { KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react';
 import { LiveContext, LiveEditor, LivePreview } from 'react-live';
 
 import { BracketIcon } from '../../../icons/bracket-icon';
 
+import { styles as liveCodeStyles } from './live-code.styles';
 import { LiveCodeProps } from './live-code.types';
 
 export function LiveCode({ showCode = false, className }: LiveCodeProps) {
@@ -17,6 +17,8 @@ export function LiveCode({ showCode = false, className }: LiveCodeProps) {
   const [localCopy, setLocalCopy] = useState<string>(live.code);
   const [isCodeVisible, toggleIsCodeVisible] = useState(showCode);
 
+  const styles = liveCodeStyles({ isCodeVisible, className });
+
   const copyLiveCode = useCallback(() => {
     copy(localCopy);
   }, [localCopy]);
@@ -43,17 +45,17 @@ export function LiveCode({ showCode = false, className }: LiveCodeProps) {
   );
 
   return (
-    <div className={clsx('max-w-5xl overflow-hidden rounded-md border border-muted-50 bg-white p-4 pb-0', className)}>
-      <div className="relative -mx-4 -mt-4 border-muted-50 p-4">
+    <div className={styles.base({})}>
+      <div className={styles.displayWrapper({})}>
         {live.error ? (
-          <div className="flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90">
+          <div className={styles.error({})}>
             <AlertIcon />
             {live.error}
           </div>
         ) : (
           <LivePreview aria-label="Rendered code snippet example" />
         )}
-        <div className="absolute right-0 top-0 flex items-center justify-center rounded bg-white/50">
+        <div className={styles.buttonWrapper({})}>
           <button
             className="typography-body-10 flex items-center gap-1 p-1 pr-2 opacity-50 transition-opacity hover:opacity-100"
             ref={liveCodeToggleButton}
@@ -61,21 +63,14 @@ export function LiveCode({ showCode = false, className }: LiveCodeProps) {
             aria-controls={codeId}
           >
             <>
-              <BracketIcon />
+              <BracketIcon width="14px" />
               {isCodeVisible ? 'Hide code' : 'Show code'}
             </>
           </button>
         </div>
       </div>
-      <div
-        id={codeId}
-        className={clsx({ hidden: !isCodeVisible, block: isCodeVisible }, 'relative -mx-4 border-t border-muted-50')}
-        onKeyDown={onLiveEditorContainerKeyDown}
-      >
-        <button
-          onClick={copyLiveCode}
-          className="typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100"
-        >
+      <div id={codeId} className={styles.codeWrapper({})} onKeyDown={onLiveEditorContainerKeyDown}>
+        <button onClick={copyLiveCode} className={styles.copyCodeButton({})}>
           Copy code
         </button>
         <LiveEditor
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
new file mode 100644
index 000000000..ecc827c63
--- /dev/null
+++ b/apps/site/src/components/code/components/live-code/live-code.styles.ts
@@ -0,0 +1,51 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'max-w-5xl overflow-hidden rounded-md border border-muted-50 bg-white p-4 pb-0',
+      displayWrapper: 'relative -mx-4 -mt-4 border-muted-50 p-4',
+      error: 'flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90',
+      buttonWrapper: 'absolute right-0 top-0 flex items-center justify-center rounded bg-white/50',
+      codeWrapper: 'relative -mx-4 border-t border-muted-50',
+      copyCodeButton:
+        'typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100',
+    },
+    variants: {
+      isCodeVisible: {
+        true: {
+          codeWrapper: 'hidden',
+        },
+        false: {
+          codeWrapper: 'block',
+        },
+      },
+      type: {
+        inline: {
+          base: 'items-baseline text-link',
+          iconBefore: 'self-center',
+          iconAfter: 'self-center',
+        },
+        standalone: {
+          base: 'items-center text-text',
+        },
+      },
+      underline: {
+        true: '',
+      },
+      isFocusVisible: {
+        true: { base: 'focus-outline' },
+        false: { base: 'outline-none' },
+      },
+    },
+    compoundSlots: [
+      {
+        slots: ['base'],
+        type: 'inline',
+        underline: true,
+        className: 'underline hover:no-underline',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);
diff --git a/packages/ui/src/components/accordion/accordion.stories.tsx b/packages/ui/src/components/accordion/accordion.stories.tsx
index 75c7ffbb0..a1700acd6 100644
--- a/packages/ui/src/components/accordion/accordion.stories.tsx
+++ b/packages/ui/src/components/accordion/accordion.stories.tsx
@@ -79,7 +79,7 @@ export const LegoLook: Story = {
 /**
  * > Controlled example
  */
-export const ControlledLook: Story = {
+export const Controlled: Story = {
   args: {
     look: 'lego',
     rounded: false,