@contentful/f36-copybutton 4.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2018-present Contentful GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.mdx

@@ -0,0 +1,51 @@
+---
+title: 'CopyButton'
+type: 'component'
+status: 'stable'
+section: 'buttonComponents'
+slug: /components/copy-button/
+github: 'https://github.com/contentful/forma-36/tree/forma-v4/packages/components/copybutton'
+typescript: ./src/CopyButton.tsx
+---
+
+The `CopyButton` is a styled button that copies text into the user's clipboard.
+
+`CopyButton` can be used in combination with text inputs where the input value should be easy to copy. In such cases it is best to position the `CopyButton` at the end of the input.
+
+## Import
+
+```js static=true
+import { CopyButton } from '@contentful/f36-components';
+```
+
+## Examples
+
+### Basic
+
+```jsx file=examples/CopyButtonExample.tsx
+
+```
+
+### Changing the tooltip
+
+You can modify tooltip text and its placement by using the following properties: `tooltipCopiedText`, `tooltipText` and `tooltipProps`.
+
+To read more about all possible values of `tooltipProps` object, refer to [Tooltip](../components/tooltip) documentation.
+
+```jsx file=examples/CopyButtonModifiedTooltipsExample.tsx
+
+```
+
+### Using with `TextInput`
+
+```jsx file=examples/CopyButtonWithInputExample.tsx
+
+```
+
+## Accessibility
+
+You can pass a custom `aria-label` through the `label` prop.
+
+## Props (API reference)
+
+<Props of="CopyButton" storybookPath="/story/components-copybutton--default" />

package/dist/main.js

@@ -0,0 +1,123 @@
+var $2mOCL$emotion = require("emotion");
+var $2mOCL$react = require("react");
+var $2mOCL$reactcopytoclipboard = require("react-copy-to-clipboard");
+var $2mOCL$contentfulf36icons = require("@contentful/f36-icons");
+var $2mOCL$contentfulf36tooltip = require("@contentful/f36-tooltip");
+var $2mOCL$contentfulf36tokens = require("@contentful/f36-tokens");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "CopyButton", () => $7cfc52ec8d291deb$export$4f2558dd25106ae2);
+
+
+
+
+
+
+
+const $a21422a7510521de$export$ffd58b7f6f099a57 = ({ size: size  })=>{
+    const buttonSize = size === 'small' ? '32px' : '40px';
+    return {
+        wrapper: /*#__PURE__*/ $2mOCL$emotion.css({
+            display: 'inline-block',
+            height: buttonSize,
+            position: 'relative',
+            width: buttonSize
+        }),
+        copyButton: /*#__PURE__*/ $2mOCL$emotion.css({
+            alignItems: 'center',
+            background: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).colorWhite,
+            border: `1px solid ${($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray300}`,
+            display: 'inline-flex',
+            height: '100%',
+            justifyContent: 'center',
+            outline: 'none',
+            padding: 0,
+            transition: `background ${($parcel$interopDefault($2mOCL$contentfulf36tokens)).transitionDurationShort} ${($parcel$interopDefault($2mOCL$contentfulf36tokens)).transitionEasingDefault}`,
+            width: '100%',
+            '&:hover': {
+                backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray100,
+                cursor: 'pointer'
+            },
+            '&:active': {
+                backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray200,
+                cursor: 'pointer'
+            },
+            '&:focus': {
+                boxShadow: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).glowMuted
+            }
+        }),
+        copyButtonDisabled: /*#__PURE__*/ $2mOCL$emotion.css({
+            cursor: 'not-allowed',
+            backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray100,
+            '&:hover': {
+                cursor: 'not-allowed',
+                backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray100
+            },
+            '&:focus': {
+                borderColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray300,
+                boxShadow: 'none'
+            },
+            '&:active, &:active:hover': {
+                borderColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray300,
+                boxShadow: 'none'
+            }
+        })
+    };
+};
+
+
+function $7cfc52ec8d291deb$var$_CopyButton(props, ref) {
+    const { onCopy: onCopy , value: value , className: className , testId: testId = 'cf-ui-copy-button' , tooltipText: tooltipText = 'Copy to clipboard' , tooltipCopiedText: tooltipCopiedText = 'Copied!' , tooltipProps: tooltipProps , isDisabled: isDisabled = false , size: size = 'medium' , ...otherProps } = props;
+    const styles = $a21422a7510521de$export$ffd58b7f6f099a57({
+        size: size
+    });
+    const [copied, setCopied] = $2mOCL$react.useState(false);
+    const button = $2mOCL$react.useRef(null);
+    const handleOnCopy = $2mOCL$react.useCallback((e)=>{
+        if (onCopy) onCopy(e);
+        setCopied(true);
+        setTimeout(()=>{
+            setCopied(false);
+            if (button.current) button.current.blur();
+        }, 1000);
+    }, [
+        onCopy
+    ]);
+    return(/*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement("div", {
+        ref: ref,
+        "data-test-id": testId,
+        className: $2mOCL$emotion.cx(styles.wrapper, className),
+        ...otherProps
+    }, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement(($parcel$interopDefault($2mOCL$reactcopytoclipboard)), {
+        text: value,
+        onCopy: handleOnCopy
+    }, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement($2mOCL$contentfulf36tooltip.Tooltip, {
+        content: copied ? tooltipCopiedText : tooltipText,
+        ...tooltipProps,
+        isDisabled: isDisabled
+    }, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement("button", {
+        type: "button",
+        ref: button,
+        className: $2mOCL$emotion.cx(styles.copyButton, {
+            [styles.copyButtonDisabled]: isDisabled
+        }),
+        "aria-label": `Copy ${value} to clipboard`,
+        disabled: isDisabled,
+        "aria-live": "assertive"
+    }, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement($2mOCL$contentfulf36icons.CopyIcon, {
+        variant: "muted",
+        size: size === 'small' ? 'tiny' : 'small'
+    }))))));
+}
+const $7cfc52ec8d291deb$export$4f2558dd25106ae2 = /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).forwardRef($7cfc52ec8d291deb$var$_CopyButton);
+
+
+
+
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport type { TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n  /**\n   * Function that gets called when the button is clicked\n   */\n  onCopy?: (string) => void;\n  /**\n   * Text to be shown when the button is clicked\n   * @default Copied!\n   */\n  tooltipCopiedText?: string;\n  /**\n   * Text to be shown when button is hovered or focused\n   * @default Copy to clipboard\n   */\n  tooltipText?: string;\n  /**\n   * Props that are passed to the tooltip component\n   */\n  tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n  /**\n   * Value that will be copied to clipboard when the button is clicked\n   */\n  value: string;\n  /**\n   * Label to be used on aria-label for the button\n   * @default Copy {value} to clipboard\n   */\n  label?: string;\n  /**\n   * Allows to disable the copy button, when true the tooltip would not be shown\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Allows setting size of the copy button to small\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n  props: ExpandProps<CopyButtonProps>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    onCopy,\n    value,\n    className,\n    testId = 'cf-ui-copy-button',\n    tooltipText = 'Copy to clipboard',\n    tooltipCopiedText = 'Copied!',\n    tooltipProps,\n    isDisabled = false,\n    size = 'medium',\n    ...otherProps\n  } = props;\n  const styles = getStyles({ size });\n\n  const [copied, setCopied] = useState(false);\n  const button = useRef<HTMLButtonElement | null>(null);\n  const handleOnCopy = useCallback(\n    (e: string) => {\n      if (onCopy) {\n        onCopy(e);\n      }\n\n      setCopied(true);\n\n      setTimeout(() => {\n        setCopied(false);\n        if (button.current) {\n          button.current.blur();\n        }\n      }, 1000);\n    },\n    [onCopy],\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-test-id={testId}\n      className={cx(styles.wrapper, className)}\n      {...otherProps}\n    >\n      <CopyToClipboard text={value} onCopy={handleOnCopy}>\n        <Tooltip\n          content={copied ? tooltipCopiedText : tooltipText}\n          {...tooltipProps}\n          isDisabled={isDisabled}\n        >\n          <button\n            type=\"button\"\n            ref={button}\n            className={cx(styles.copyButton, {\n              [styles.copyButtonDisabled]: isDisabled,\n            })}\n            aria-label={`Copy ${value} to clipboard`}\n            disabled={isDisabled}\n            aria-live=\"assertive\"\n          >\n            <CopyIcon\n              variant=\"muted\"\n              size={size === 'small' ? 'tiny' : 'small'}\n            />\n          </button>\n        </Tooltip>\n      </CopyToClipboard>\n    </div>\n  );\n}\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n  const buttonSize = size === 'small' ? '32px' : '40px';\n\n  return {\n    wrapper: css({\n      display: 'inline-block',\n      height: buttonSize,\n      position: 'relative',\n      width: buttonSize,\n    }),\n    copyButton: css({\n      alignItems: 'center',\n      background: tokens.colorWhite,\n      border: `1px solid ${tokens.gray300}`,\n      display: 'inline-flex',\n      height: '100%',\n      justifyContent: 'center',\n      outline: 'none',\n      padding: 0,\n      transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      width: '100%',\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n        cursor: 'pointer',\n      },\n      '&:active': {\n        backgroundColor: tokens.gray200,\n        cursor: 'pointer',\n      },\n      '&:focus': {\n        boxShadow: tokens.glowMuted,\n      },\n    }),\n    copyButtonDisabled: css({\n      cursor: 'not-allowed',\n      backgroundColor: tokens.gray100,\n\n      '&:hover': {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.gray100,\n      },\n\n      '&:focus': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n\n      '&:active, &:active:hover': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n    }),\n  };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -0,0 +1,116 @@
+import {cx as $dnnsg$cx, css as $dnnsg$css} from "emotion";
+import $dnnsg$react, {useState as $dnnsg$useState, useRef as $dnnsg$useRef, useCallback as $dnnsg$useCallback} from "react";
+import $dnnsg$reactcopytoclipboard from "react-copy-to-clipboard";
+import {CopyIcon as $dnnsg$CopyIcon} from "@contentful/f36-icons";
+import {Tooltip as $dnnsg$Tooltip} from "@contentful/f36-tooltip";
+import $dnnsg$contentfulf36tokens from "@contentful/f36-tokens";
+
+
+
+
+
+
+
+
+const $c5d0896db030b9aa$export$ffd58b7f6f099a57 = ({ size: size  })=>{
+    const buttonSize = size === 'small' ? '32px' : '40px';
+    return {
+        wrapper: /*#__PURE__*/ $dnnsg$css({
+            display: 'inline-block',
+            height: buttonSize,
+            position: 'relative',
+            width: buttonSize
+        }),
+        copyButton: /*#__PURE__*/ $dnnsg$css({
+            alignItems: 'center',
+            background: $dnnsg$contentfulf36tokens.colorWhite,
+            border: `1px solid ${$dnnsg$contentfulf36tokens.gray300}`,
+            display: 'inline-flex',
+            height: '100%',
+            justifyContent: 'center',
+            outline: 'none',
+            padding: 0,
+            transition: `background ${$dnnsg$contentfulf36tokens.transitionDurationShort} ${$dnnsg$contentfulf36tokens.transitionEasingDefault}`,
+            width: '100%',
+            '&:hover': {
+                backgroundColor: $dnnsg$contentfulf36tokens.gray100,
+                cursor: 'pointer'
+            },
+            '&:active': {
+                backgroundColor: $dnnsg$contentfulf36tokens.gray200,
+                cursor: 'pointer'
+            },
+            '&:focus': {
+                boxShadow: $dnnsg$contentfulf36tokens.glowMuted
+            }
+        }),
+        copyButtonDisabled: /*#__PURE__*/ $dnnsg$css({
+            cursor: 'not-allowed',
+            backgroundColor: $dnnsg$contentfulf36tokens.gray100,
+            '&:hover': {
+                cursor: 'not-allowed',
+                backgroundColor: $dnnsg$contentfulf36tokens.gray100
+            },
+            '&:focus': {
+                borderColor: $dnnsg$contentfulf36tokens.gray300,
+                boxShadow: 'none'
+            },
+            '&:active, &:active:hover': {
+                borderColor: $dnnsg$contentfulf36tokens.gray300,
+                boxShadow: 'none'
+            }
+        })
+    };
+};
+
+
+function $b6698237aa721326$var$_CopyButton(props, ref) {
+    const { onCopy: onCopy , value: value , className: className , testId: testId = 'cf-ui-copy-button' , tooltipText: tooltipText = 'Copy to clipboard' , tooltipCopiedText: tooltipCopiedText = 'Copied!' , tooltipProps: tooltipProps , isDisabled: isDisabled = false , size: size = 'medium' , ...otherProps } = props;
+    const styles = $c5d0896db030b9aa$export$ffd58b7f6f099a57({
+        size: size
+    });
+    const [copied, setCopied] = $dnnsg$useState(false);
+    const button = $dnnsg$useRef(null);
+    const handleOnCopy = $dnnsg$useCallback((e)=>{
+        if (onCopy) onCopy(e);
+        setCopied(true);
+        setTimeout(()=>{
+            setCopied(false);
+            if (button.current) button.current.blur();
+        }, 1000);
+    }, [
+        onCopy
+    ]);
+    return(/*#__PURE__*/ $dnnsg$react.createElement("div", {
+        ref: ref,
+        "data-test-id": testId,
+        className: $dnnsg$cx(styles.wrapper, className),
+        ...otherProps
+    }, /*#__PURE__*/ $dnnsg$react.createElement($dnnsg$reactcopytoclipboard, {
+        text: value,
+        onCopy: handleOnCopy
+    }, /*#__PURE__*/ $dnnsg$react.createElement($dnnsg$Tooltip, {
+        content: copied ? tooltipCopiedText : tooltipText,
+        ...tooltipProps,
+        isDisabled: isDisabled
+    }, /*#__PURE__*/ $dnnsg$react.createElement("button", {
+        type: "button",
+        ref: button,
+        className: $dnnsg$cx(styles.copyButton, {
+            [styles.copyButtonDisabled]: isDisabled
+        }),
+        "aria-label": `Copy ${value} to clipboard`,
+        disabled: isDisabled,
+        "aria-live": "assertive"
+    }, /*#__PURE__*/ $dnnsg$react.createElement($dnnsg$CopyIcon, {
+        variant: "muted",
+        size: size === 'small' ? 'tiny' : 'small'
+    }))))));
+}
+const $b6698237aa721326$export$4f2558dd25106ae2 = /*#__PURE__*/ $dnnsg$react.forwardRef($b6698237aa721326$var$_CopyButton);
+
+
+
+
+export {$b6698237aa721326$export$4f2558dd25106ae2 as CopyButton};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport type { TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n  /**\n   * Function that gets called when the button is clicked\n   */\n  onCopy?: (string) => void;\n  /**\n   * Text to be shown when the button is clicked\n   * @default Copied!\n   */\n  tooltipCopiedText?: string;\n  /**\n   * Text to be shown when button is hovered or focused\n   * @default Copy to clipboard\n   */\n  tooltipText?: string;\n  /**\n   * Props that are passed to the tooltip component\n   */\n  tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n  /**\n   * Value that will be copied to clipboard when the button is clicked\n   */\n  value: string;\n  /**\n   * Label to be used on aria-label for the button\n   * @default Copy {value} to clipboard\n   */\n  label?: string;\n  /**\n   * Allows to disable the copy button, when true the tooltip would not be shown\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Allows setting size of the copy button to small\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n  props: ExpandProps<CopyButtonProps>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    onCopy,\n    value,\n    className,\n    testId = 'cf-ui-copy-button',\n    tooltipText = 'Copy to clipboard',\n    tooltipCopiedText = 'Copied!',\n    tooltipProps,\n    isDisabled = false,\n    size = 'medium',\n    ...otherProps\n  } = props;\n  const styles = getStyles({ size });\n\n  const [copied, setCopied] = useState(false);\n  const button = useRef<HTMLButtonElement | null>(null);\n  const handleOnCopy = useCallback(\n    (e: string) => {\n      if (onCopy) {\n        onCopy(e);\n      }\n\n      setCopied(true);\n\n      setTimeout(() => {\n        setCopied(false);\n        if (button.current) {\n          button.current.blur();\n        }\n      }, 1000);\n    },\n    [onCopy],\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-test-id={testId}\n      className={cx(styles.wrapper, className)}\n      {...otherProps}\n    >\n      <CopyToClipboard text={value} onCopy={handleOnCopy}>\n        <Tooltip\n          content={copied ? tooltipCopiedText : tooltipText}\n          {...tooltipProps}\n          isDisabled={isDisabled}\n        >\n          <button\n            type=\"button\"\n            ref={button}\n            className={cx(styles.copyButton, {\n              [styles.copyButtonDisabled]: isDisabled,\n            })}\n            aria-label={`Copy ${value} to clipboard`}\n            disabled={isDisabled}\n            aria-live=\"assertive\"\n          >\n            <CopyIcon\n              variant=\"muted\"\n              size={size === 'small' ? 'tiny' : 'small'}\n            />\n          </button>\n        </Tooltip>\n      </CopyToClipboard>\n    </div>\n  );\n}\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n  const buttonSize = size === 'small' ? '32px' : '40px';\n\n  return {\n    wrapper: css({\n      display: 'inline-block',\n      height: buttonSize,\n      position: 'relative',\n      width: buttonSize,\n    }),\n    copyButton: css({\n      alignItems: 'center',\n      background: tokens.colorWhite,\n      border: `1px solid ${tokens.gray300}`,\n      display: 'inline-flex',\n      height: '100%',\n      justifyContent: 'center',\n      outline: 'none',\n      padding: 0,\n      transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      width: '100%',\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n        cursor: 'pointer',\n      },\n      '&:active': {\n        backgroundColor: tokens.gray200,\n        cursor: 'pointer',\n      },\n      '&:focus': {\n        boxShadow: tokens.glowMuted,\n      },\n    }),\n    copyButtonDisabled: css({\n      cursor: 'not-allowed',\n      backgroundColor: tokens.gray100,\n\n      '&:hover': {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.gray100,\n      },\n\n      '&:focus': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n\n      '&:active, &:active:hover': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n    }),\n  };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { CommonProps } from "@contentful/f36-core";
+import { TooltipProps } from "@contentful/f36-tooltip";
+export interface CopyButtonProps extends CommonProps {
+    /**
+     * Function that gets called when the button is clicked
+     */
+    onCopy?: (string: any) => void;
+    /**
+     * Text to be shown when the button is clicked
+     * @default Copied!
+     */
+    tooltipCopiedText?: string;
+    /**
+     * Text to be shown when button is hovered or focused
+     * @default Copy to clipboard
+     */
+    tooltipText?: string;
+    /**
+     * Props that are passed to the tooltip component
+     */
+    tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;
+    /**
+     * Value that will be copied to clipboard when the button is clicked
+     */
+    value: string;
+    /**
+     * Label to be used on aria-label for the button
+     * @default Copy {value} to clipboard
+     */
+    label?: string;
+    /**
+     * Allows to disable the copy button, when true the tooltip would not be shown
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Allows setting size of the copy button to small
+     * @default medium
+     */
+    size?: 'small' | 'medium';
+}
+export const CopyButton: React.ForwardRefExoticComponent<{
+    onCopy?: (string: any) => void;
+    tooltipCopiedText?: string;
+    tooltipText?: string;
+    tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;
+    value: string;
+    label?: string;
+    isDisabled?: boolean;
+    size?: 'small' | 'medium';
+    className?: string;
+    testId?: string;
+    style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;ACSA,gCAAiC,SAAQ,WAAW;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AA0ED,OAAO,MAAM;8BA5GU,IAAI;wBAKL,MAAM;kBAKZ,MAAM;mBAIL,KAAK,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC;WAIlD,MAAM;YAKL,MAAM;iBAKD,OAAO;WAKb,OAAO,GAAG,QAAQ;;;;wCA2E4B,CAAC","sources":["packages/components/copybutton/src/src/CopyButton.styles.ts","packages/components/copybutton/src/src/CopyButton.tsx","packages/components/copybutton/src/src/index.ts","packages/components/copybutton/src/index.ts"],"sourcesContent":[null,null,null,"export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@contentful/f36-copybutton",
+  "version": "4.0.0",
+  "description": "Forma 36: CopyButton component",
+  "scripts": {
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@contentful/f36-core": "^4.0.0",
+    "@contentful/f36-icons": "^4.0.0",
+    "@contentful/f36-tokens": "^4.0.0",
+    "@contentful/f36-tooltip": "^4.0.0",
+    "emotion": "^10.0.17",
+    "react-copy-to-clipboard": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "01d931c77410619d05cd00dbb3b5acc5d8ae2cdf"
+}