feat(live-code): styling

WestpacGEL · Oct 19, 2023 · 203ade3 · 203ade3
1 parent aede2c1
commit 203ade3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/apps/site/TO_DO.md b/apps/site/TO_DO.md
@@ -29,16 +29,16 @@ const GEL_COLORS = {
 
 #### code tab
 
-1. [] Package info table used in intro section
-2. [] Update Live code block to look like current gel site
-   - [] Update Show code text to Show live code
-3. [] Props table
+1. [ ] Package info table used in intro section
+2. [x] Update Live code block to look like current gel site
+   - [x] Update Show code text to Show live code
+3. [ ] Props table
 
 ### /articles
 
 1. [x] Create content blocks and integrate with keystatic
 
 ### General
 
-1. [] Fix list component styling, changing line height breaks current list component
-2. [] Update component slugs to match current GEL navigation grouping
+1. [ ] Fix list component styling, changing line height breaks current list component
+2. [ ] Update component slugs to match current GEL navigation grouping
diff --git a/...ontent-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/...ontent-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { List } from '@westpac/ui';
-import { BREAKPOINTS } from '@westpac/ui/tailwind';
 import { MouseEventHandler, useCallback } from 'react';
 
 import { ArrowDownRightIcon } from '@/components/icons';

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
@@ -1,4 +1,4 @@
-import { AlertIcon } from '@westpac/ui/icon';
+import { AlertIcon, ArrowRightIcon } from '@westpac/ui/icon';
 import copy from 'clipboard-copy';
 import { themes } from 'prism-react-renderer';
 import { KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react';
@@ -57,14 +57,14 @@ export function LiveCode({ showCode = false, className }: LiveCodeProps) {
         )}
         <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"
+            className="typography-body-10 flex items-center gap-1 border-l border-l-border p-3 transition-opacity hover:opacity-100"
             ref={liveCodeToggleButton}
             onClick={() => toggleIsCodeVisible(state => !state)}
             aria-controls={codeId}
           >
             <>
-              <BracketIcon width="14px" />
-              {isCodeVisible ? 'Hide code' : 'Show code'}
+              {isCodeVisible ? 'Hide live code' : 'Show live code'}
+              <ArrowRightIcon color="primary" className={styles.arrowIcon({})} />
             </>
           </button>
         </div>

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
@@ -2,21 +2,24 @@ 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',
+    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',
-    buttonWrapper: 'absolute right-0 top-0 flex items-center justify-center rounded bg-white/50',
-    codeWrapper: 'relative -mx-4 border-t border-muted-50',
+    buttonWrapper: '-mx-6 -mb-6 flex items-center justify-end ',
+    codeWrapper: 'relative -mx-6 border-t border-muted-50',
+    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: {
     isCodeVisible: {
       true: {
         codeWrapper: 'hidden',
+        arrowIcon: '-rotate-90',
       },
       false: {
         codeWrapper: 'block',
+        arrowIcon: 'rotate-90',
       },
     },
   },