Merge pull request #431 from omnifed/429-docs-update-iconbutton-to-us…

…e-live-preview chore: Add live preview to icon button documentation
omnifed · Sep 3, 2024 · 83135af · 83135af
2 parents 1d7a78e + 1f5db01
commit 83135af
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 102 deletions.
diff --git a/docs/app/react/icon-button/components/live-preview.tsx b/docs/app/react/icon-button/components/live-preview.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import CodeBuilder from '@/app/components/code-builder/code-builder'
+import { builder } from '@/app/components/code-builder/helpers'
+import { useCodeBuilder } from '@/app/context/code-builder'
+import { ThumbsUp } from '@cerberus-design/icons'
+import { IconButton } from '@cerberus-design/react'
+
+const fallbackAria = 'Like something'
+
+const api = {
+  palette: builder.Enum('palette', ['action', 'secondaryAction', 'danger']),
+  usage: builder.Enum('usage', ['filled', 'outlined', 'text']),
+  size: builder.Enum('size', ['sm', 'lg']),
+  tooltipPosition: builder.Enum('tooltipPosition', [
+    'top',
+    'right',
+    'bottom',
+    'left',
+  ]),
+  ariaLabel: builder.Text('ariaLabel', fallbackAria),
+  text: builder.Text('name', 'Button'),
+  disabled: builder.Boolean('disabled', false),
+}
+
+export function LivePlayground() {
+  return (
+    <CodeBuilder api={api}>
+      <IconButtonPreview />
+    </CodeBuilder>
+  )
+}
+
+export function LivePlaygroundWithCode() {
+  return (
+    <CodeBuilder
+      api={api}
+      code={`import { IconButton, type IconButtonProps } from '@cerberus-design/react'
+
+type MyIconButtonProps = IconButtonProps
+
+export function MyButton(props: MyIconButtonProps) {
+  return (
+    <IconButton
+      ariaLabel={{ariaLabel}}
+      disabled={{disabled}}
+      palette={{palette}}
+      tooltipPosition={{tooltipPosition}}
+      size={{size}}
+      usage={{usage}}
+    >
+      <ThumbsUp />
+    </IconButton>
+  )
+}`}
+    >
+      <IconButtonPreview />
+    </CodeBuilder>
+  )
+}
+
+export function IconButtonPreview() {
+  const { selectedProps } = useCodeBuilder()
+  const aria = selectedProps.ariaLabel as string
+  switch (selectedProps.palette) {
+    case 'secondaryAction':
+      return (
+        <IconButton
+          ariaLabel={aria ?? fallbackAria}
+          palette="secondaryAction"
+          {...selectedProps}
+        >
+          <ThumbsUp />
+        </IconButton>
+      )
+    case 'danger':
+      return (
+        <IconButton
+          ariaLabel={aria ?? fallbackAria}
+          palette="danger"
+          {...selectedProps}
+        >
+          <ThumbsUp />
+        </IconButton>
+      )
+
+    default:
+      return (
+        <IconButton ariaLabel={aria ?? fallbackAria} {...selectedProps}>
+          <ThumbsUp />
+        </IconButton>
+      )
+  }
+}
diff --git a/docs/app/react/icon-button/dev.mdx b/docs/app/react/icon-button/dev.mdx
@@ -6,13 +6,9 @@ recipe: 'iconButton.ts'
 
 import CodePreview from '@/app/components/CodePreview'
 import {
-  BasicIconButtonPreview,
-  OutlinedIconButtonPreview,
-  DangerIconButtonPreview,
-  TextIconButtonPreview,
-  IconButtonSizesPreview,
   CustomIconButtonPreview,
 } from '@/app/react/icon-button/components/icon-button-preview'
+import { LivePlaygroundWithCode } from '@/app/react/icon-button/components/live-preview'
 
 ```ts
 import { IconButton } from '@cerberus-design/react'
@@ -22,95 +18,7 @@ import { IconButton } from '@cerberus-design/react'
 
 The IconButton API is similar to the [Button](./button), but with the addition of an `ariaLabel` prop.
 
-### Default
-
-<CodePreview preview={<BasicIconButtonPreview />}>
-```tsx title="icon-button.tsx"
-import { IconButton } from '@cerberus-design/react'
-import { ThumbsUp } from '@cerberus/icons'
-
-function BasicIconButtonPreview() {
-  return (
-    <IconButton ariaLabel="Like something">
-      <ThumbsUp size={24} />
-    </IconButton>
-  )
-}
-```
-</CodePreview>
-
-### Outlined
-
-<CodePreview preview={<OutlinedIconButtonPreview />}>
-```tsx title="icon-button.tsx"
-import { IconButton } from '@cerberus-design/react'
-import { ThumbsUp } from '@cerberus/icons'
-
-function OutlinedIconButtonPreview() {
-  return (
-    <IconButton ariaLabel="Like something" usage="outlined">
-      <ThumbsUp size={16} />
-    </IconButton>
-  )
-}
-```
-</CodePreview>
-
-### Danger
-
-<CodePreview preview={<DangerIconButtonPreview />}>
-```tsx title="icon-button.tsx"
-import { IconButton } from '@cerberus-design/react'
-import { Close } from '@cerberus/icons'
-
-function DangerIconButtonPreview() {
-  return (
-    <IconButton ariaLabel="Close something" palette="danger" usage="filled">
-      <Close size={24} />
-    </IconButton>
-  )
-}
-```
-</CodePreview>
-
-### Text
-
-<CodePreview preview={<TextIconButtonPreview />}>
-```tsx title="icon-button.tsx"
-import { IconButton } from '@cerberus-design/react'
-import { ThumbsUp } from '@cerberus/icons'
-
-function TextIconButtonPreview() {
-  return (
-    <IconButton ariaLabel="Like something" usage="text">
-      <ThumbsUp size={24} />
-    </IconButton>
-  )
-}
-```
-</CodePreview>
-
-### Sizes
-
-<CodePreview preview={<IconButtonSizesPreview />}>
-```tsx title="icon-button.tsx"
-import { IconButton } from '@cerberus-design/react'
-import { ThumbsUp, ThumbsDown } from '@cerberus/icons'
-
-function IconButtonSizesPreview() {
-  return (
-    <div className={hstack()}>
-      <IconButton ariaLabel="Like something" size="sm">
-        <ThumbsUp />
-      </IconButton>
-      <IconButton ariaLabel="Dislike something">
-        <ThumbsDown size={24} />
-      </IconButton>
-    </div>
-  )
-}
-```
-</CodePreview>
+<LivePlaygroundWithCode />
 
 ## Customization
 
@@ -153,8 +61,7 @@ function CustomIconButtonPreview() {
 ```ts showLineNumbers=false
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   ariaLabel: string
-  palette?: 'action' | 'danger'
-  shape?: 'circle'
+  palette?: 'action' | 'secondaryAction' | 'danger'
   size?: 'sm' | 'lg'
   tooltipPosition?: 'top' | 'right' | 'bottom' | 'left'
   usage?: 'filled' | 'text' | 'outlined'
@@ -172,6 +79,5 @@ The `IconButton` component accepts the following props:
 | ariaLabel |    "Icon Button"     | The accessible label for the button. |
 | palette     | `action`   | The color palette of the button. |
 | usage | `text`    | The style treatment of the button.    |
-| shape | `circle`    | The shape of the button.               |
 | size | `lg`    | The size of the button.               |
 | tooltipPosition | `top`    | The position of the tooltip.               |
diff --git a/docs/app/react/icon-button/overview.mdx b/docs/app/react/icon-button/overview.mdx
@@ -12,6 +12,7 @@ import {
   DangerIconButtonPreview,
   TextIconButtonPreview
 } from '@/app/react/icon-button/components/icon-button-preview'
+import { LivePlayground } from '@/app/react/icon-button/components/live-preview'
 
 <OverviewList rules={[
   'Icon buttons must use an icon with a clear meaning',
@@ -21,10 +22,7 @@ import {
 
 ## Example
 
-<CodePreview preview={<BasicIconButtonPreview />} />
-<CodePreview preview={<OutlinedIconButtonPreview />} />
-<CodePreview preview={<DangerIconButtonPreview />} />
-<CodePreview preview={<TextIconButtonPreview />} />
+<LivePlayground />
 
 ## Resources
 

diff --git a/packages/panda-preset/src/globalCss.ts b/packages/panda-preset/src/globalCss.ts
@@ -144,7 +144,7 @@ export const globalCss: GlobalStyleObject = defineGlobalStyles({
   },
 
   _highlight: {
-    backgroundColor: 'var(--cerberus-colors-info-border-initial)',
+    backgroundColor: 'var(--cerberus-colors-info-surface-initial)',
     color: 'var(--cerberus-colors-info-text-initial)',
   },