feat: copy button

paradigmxyz · Oct 3, 2023 · 29eff9e · 29eff9e
1 parent 54b5cf8
commit 29eff9e
Show file tree

Hide file tree

Showing 10 changed files with 321 additions and 34 deletions.
diff --git a/src/design-system/_playground/index.tsx b/src/design-system/_playground/index.tsx
@@ -427,6 +427,20 @@ function DesignSystem() {
                     Button
                   </Button>
                 </Box>
+                <Box display="flex" gap="8px">
+                  <Button height="18px" width="fit">
+                    Button
+                  </Button>
+                  <Button variant="stroked invert" height="18px" width="fit">
+                    Button
+                  </Button>
+                  <Button variant="tint green" height="18px" width="fit">
+                    Button
+                  </Button>
+                  <Button variant="ghost primary" height="18px" width="fit">
+                    Button
+                  </Button>
+                </Box>
               </Stack>
               <Stack gap="16px">
                 <Text weight="medium" size="18px">
@@ -596,6 +610,176 @@ function DesignSystem() {
                     variant="ghost red"
                   />
                 </Box>
+                <Box display="flex" gap="8px">
+                  <Button.Symbol height="18px" symbol="trash" />
+                  <Button.Symbol
+                    height="18px"
+                    symbol="trash"
+                    variant="stroked invert"
+                  />
+                  <Button.Symbol
+                    height="18px"
+                    symbol="trash"
+                    variant="tint green"
+                  />
+                  <Button.Symbol
+                    height="18px"
+                    symbol="trash"
+                    variant="ghost red"
+                  />
+                </Box>
+              </Stack>
+              <Stack gap="16px">
+                <Text weight="medium" size="18px">
+                  Disabled
+                </Text>
+                <Box display="flex" gap="8px">
+                  <Button.Symbol disabled symbol="trash" />
+                  <Button.Symbol
+                    disabled
+                    symbol="trash"
+                    variant="stroked invert"
+                  />
+                  <Button.Symbol disabled symbol="trash" variant="tint green" />
+                  <Button.Symbol
+                    disabled
+                    symbol="trash"
+                    variant="ghost primary"
+                  />
+                </Box>
+              </Stack>
+            </Stack>
+          </Box>
+          <Box
+            backgroundColor="surface/primary/elevated"
+            margin="-24px"
+            borderRadius="12px"
+            padding="24px"
+          >
+            <Stack gap="24px">
+              <Text weight="medium" size="22px">
+                Button.Copy
+              </Text>
+              <Stack gap="16px">
+                <Text weight="medium" size="18px">
+                  Solid
+                </Text>
+                <Box display="flex" gap="8px">
+                  <Button.Copy text="Hello" />
+                  <Button.Copy text="Hello" variant="solid primary" />
+                  <Button.Copy text="Hello" variant="solid fill" />
+                  <Button.Copy text="Hello" variant="solid blue" />
+                  <Button.Copy text="Hello" variant="solid green" />
+                  <Button.Copy text="Hello" variant="solid red" />
+                </Box>
+              </Stack>
+              <Stack gap="16px">
+                <Text weight="medium" size="18px">
+                  Stroked
+                </Text>
+                <Box display="flex" gap="8px">
+                  <Button.Copy text="Hello" variant="stroked fill" />
+                  <Button.Copy text="Hello" variant="stroked invert" />
+                  <Button.Copy text="Hello" variant="stroked blue" />
+                  <Button.Copy text="Hello" variant="stroked green" />
+                  <Button.Copy text="Hello" variant="stroked red" />
+                </Box>
+              </Stack>
+              <Stack gap="16px">
+                <Text weight="medium" size="18px">
+                  Tint
+                </Text>
+                <Box display="flex" gap="8px">
+                  <Button.Copy text="Hello" variant="tint blue" />
+                  <Button.Copy text="Hello" variant="tint green" />
+                  <Button.Copy text="Hello" variant="tint red" />
+                </Box>
+              </Stack>
+              <Stack gap="16px">
+                <Text weight="medium" size="18px">
+                  Ghost
+                </Text>
+                <Box display="flex" gap="8px">
+                  <Button.Copy text="Hello" variant="ghost primary" />
+                  <Button.Copy text="Hello" variant="ghost blue" />
+                  <Button.Copy text="Hello" variant="ghost green" />
+                  <Button.Copy text="Hello" variant="ghost red" />
+                </Box>
+              </Stack>
+              <Stack gap="16px">
+                <Text weight="medium" size="18px">
+                  Height
+                </Text>
+                <Box display="flex" gap="8px">
+                  <Button.Copy height="44px" text="Hello" />
+                  <Button.Copy
+                    height="44px"
+                    text="Hello"
+                    variant="stroked invert"
+                  />
+                  <Button.Copy
+                    height="44px"
+                    text="Hello"
+                    variant="tint green"
+                  />
+                  <Button.Copy height="44px" text="Hello" variant="ghost red" />
+                </Box>
+                <Box display="flex" gap="8px">
+                  <Button.Copy height="36px" text="Hello" />
+                  <Button.Copy
+                    height="36px"
+                    text="Hello"
+                    variant="stroked invert"
+                  />
+                  <Button.Copy
+                    height="36px"
+                    text="Hello"
+                    variant="tint green"
+                  />
+                  <Button.Copy height="36px" text="Hello" variant="ghost red" />
+                </Box>
+                <Box display="flex" gap="8px">
+                  <Button.Copy height="24px" text="Hello" />
+                  <Button.Copy
+                    height="24px"
+                    text="Hello"
+                    variant="stroked invert"
+                  />
+                  <Button.Copy
+                    height="24px"
+                    text="Hello"
+                    variant="tint green"
+                  />
+                  <Button.Copy height="24px" text="Hello" variant="ghost red" />
+                </Box>
+                <Box display="flex" gap="8px">
+                  <Button.Copy height="20px" text="Hello" />
+                  <Button.Copy
+                    height="20px"
+                    text="Hello"
+                    variant="stroked invert"
+                  />
+                  <Button.Copy
+                    height="20px"
+                    text="Hello"
+                    variant="tint green"
+                  />
+                  <Button.Copy height="20px" text="Hello" variant="ghost red" />
+                </Box>
+                <Box display="flex" gap="8px">
+                  <Button.Copy height="18px" text="Hello" />
+                  <Button.Copy
+                    height="18px"
+                    text="Hello"
+                    variant="stroked invert"
+                  />
+                  <Button.Copy
+                    height="18px"
+                    text="Hello"
+                    variant="tint green"
+                  />
+                  <Button.Copy height="18px" text="Hello" variant="ghost red" />
+                </Box>
               </Stack>
               <Stack gap="16px">
                 <Text weight="medium" size="18px">
@@ -1077,7 +1261,7 @@ function DesignSystem() {
               <Text>
                 This is some <Text color="surface/blue">inline text</Text>.
               </Text>
-              <Text.Truncated size="32px">
+              <Text.Truncated size="22px">
                 0xabcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789abcdefABCDEF0123456789
               </Text.Truncated>
             </Stack>

diff --git a/src/design-system/components/Button.css.ts b/src/design-system/components/Button.css.ts
@@ -1,6 +1,7 @@
 import { styleVariants } from '@vanilla-extract/css'
 
 export const buttonHeight = {
+  '18px': 18,
   '20px': 20,
   '24px': 24,
   '36px': 36,

diff --git a/src/design-system/components/Button.tsx b/src/design-system/components/Button.tsx
@@ -8,6 +8,7 @@ import {
   type ButtonVariant,
   buttonHeightStyles,
 } from './Button.css'
+import { ButtonCopy } from './ButtonCopy'
 import { ButtonSymbol } from './ButtonSymbol'
 import { ButtonText } from './ButtonText'
 
@@ -16,31 +17,23 @@ export type ButtonRootProps = {
   className?: ClassValue
   disabled?: boolean
   height?: ButtonHeight
+  onClick?: MouseEventHandler<HTMLButtonElement>
   width?: 'fit' | 'full'
   variant?: ButtonVariant
 } & (
-  | {
-      as: 'button'
-      href?: never
-      onClick?: MouseEventHandler<HTMLButtonElement>
-      type?: 'button' | 'submit'
-    }
   | {
       as?: 'button'
       href?: never
-      onClick?: MouseEventHandler<HTMLButtonElement>
       type: 'button' | 'submit'
     }
   | {
       as?: 'div'
       href?: never
-      onClick?: MouseEventHandler<HTMLDivElement>
       type?: never
     }
   | {
       as?: 'a'
       href: string
-      onClick?: never
       type?: never
     }
 )
@@ -178,5 +171,6 @@ export const ButtonRoot = forwardRef<HTMLDivElement, ButtonRootProps>(
 
 export const Button = Object.assign(ButtonText, {
   Root: ButtonRoot,
+  Copy: ButtonCopy,
   Symbol: ButtonSymbol,
 })
diff --git a/src/design-system/components/ButtonCopy.tsx b/src/design-system/components/ButtonCopy.tsx
@@ -0,0 +1,74 @@
+import { forwardRef, useEffect, useState } from 'react'
+
+import type { UnionOmit } from '~/utils/types'
+
+import { ButtonRoot, type ButtonRootProps } from './Button'
+import type { ButtonHeight } from './Button.css'
+import { symbolStylesForHeight, symbolStylesForVariant } from './ButtonSymbol'
+import { widthForHeight } from './ButtonSymbol.css'
+import { SFSymbol, type SFSymbolProps } from './SFSymbol'
+
+type ButtonCopyProps = UnionOmit<
+  ButtonRootProps,
+  'children' | 'width' | 'onClick'
+> & {
+  text: string
+}
+
+export const checkmarkStylesForHeight = {
+  '18px': {
+    size: '9px',
+  },
+  '20px': {
+    size: '9px',
+  },
+  '24px': {
+    size: '11px',
+  },
+  '36px': {
+    size: '12px',
+  },
+  '44px': {
+    size: '15px',
+  },
+} satisfies Record<ButtonHeight, { size: SFSymbolProps['size'] }>
+
+export const ButtonCopy = forwardRef<HTMLDivElement, ButtonCopyProps>(
+  (props: ButtonCopyProps, ref) => {
+    const { height = '36px', variant = 'solid invert', text } = props
+
+    const [copied, setCopied] = useState(false)
+    useEffect(() => {
+      if (copied) {
+        navigator.clipboard.writeText((text || '').replace(/^"|"$/g, ''))
+        setTimeout(() => setCopied(false), 1000)
+      }
+    }, [copied, text])
+
+    return (
+      <ButtonRoot
+        ref={ref}
+        {...props}
+        className={[widthForHeight[height], props.className]}
+        onClick={(e) => {
+          e.preventDefault()
+          setCopied(true)
+        }}
+      >
+        {copied ? (
+          <SFSymbol
+            symbol="checkmark"
+            {...checkmarkStylesForHeight[height]}
+            {...symbolStylesForVariant[variant]}
+          />
+        ) : (
+          <SFSymbol
+            symbol="doc.on.doc"
+            {...symbolStylesForHeight[height]}
+            {...symbolStylesForVariant[variant]}
+          />
+        )}
+      </ButtonRoot>
+    )
+  },
+)
diff --git a/src/design-system/components/ButtonSymbol.tsx b/src/design-system/components/ButtonSymbol.tsx
@@ -14,7 +14,10 @@ type ButtonSymbolProps = UnionOmit<ButtonRootProps, 'children'> & {
   symbolProps?: Partial<SFSymbolProps>
 }
 
-const symbolStylesForHeight = {
+export const symbolStylesForHeight = {
+  '18px': {
+    size: '11px',
+  },
   '20px': {
     size: '11px',
   },
@@ -29,7 +32,7 @@ const symbolStylesForHeight = {
   },
 } satisfies Record<ButtonHeight, { size: SFSymbolProps['size'] }>
 
-const symbolStylesForVariant = {
+export const symbolStylesForVariant = {
   'ghost primary': {},
   'ghost blue': {
     color: 'surface/blue',

diff --git a/src/design-system/components/ButtonText.tsx b/src/design-system/components/ButtonText.tsx
@@ -9,6 +9,9 @@ import { Text, type TextProps } from './Text'
 type ButtonTextProps = ButtonRootProps
 
 const stylesForHeight = {
+  '18px': {
+    paddingHorizontal: '6px',
+  },
   '20px': {
     paddingHorizontal: '6px',
   },
@@ -24,6 +27,9 @@ const stylesForHeight = {
 } satisfies Record<ButtonHeight, BoxStyles>
 
 const textStylesForHeight = {
+  '18px': {
+    size: '11px',
+  },
   '20px': {
     size: '11px',
   },