CopyText docs + preview

@stellar/design-system-website/docs/components/buttons/copy-text.mdx

@@ -0,0 +1,19 @@
+---
+slug: /copy-text
+---
+
+# Copy text
+
+<ComponentDescription componentName="CopyText" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="CopyText">
+  <CopyText textToCopy="Text to copy">Copy text</CopyText>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="CopyText" />

@stellar/design-system-website/src/componentPreview/copyTextPreview.tsx

@@ -0,0 +1,5 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const copyTextPreview: ComponentPreview = {
+  options: [],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -14,6 +14,7 @@ import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
 import { buttonPresetPreview } from "@site/src/componentPreview/buttonPresetPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { checkboxPreview } from "@site/src/componentPreview/checkboxPreview";
+import { copyTextPreview } from "@site/src/componentPreview/copyTextPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
 import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview";
 import { inputPreview } from "@site/src/componentPreview/inputPreview";
@@ -42,6 +43,7 @@ const previews: { [key: string]: ComponentPreview } = {
   ButtonPreset: buttonPresetPreview,
   Caption: captionPreview,
   Checkbox: checkboxPreview,
+  CopyText: copyTextPreview,
   Heading: headingPreview,
   IconButton: iconButtonPreview,
   Input: inputPreview,

@stellar/design-system/src/components/ButtonPreset/index.tsx

@@ -5,7 +5,7 @@ import { Icon } from "../../icons";
 export interface ButtonPresetProps {
   /** Button preset */
   preset: "copy" | "download";
-  /** Button variant */
+  /** Button variant @defaultValue `default` */
   variant?: "default" | "highlight";
   /** Button label */
   label?: string;

@stellar/design-system/src/components/CopyText/index.tsx

@@ -1,24 +1,44 @@
 import React, { useState } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Tooltip } from "../Tooltip";
-import { FloaterPlacement } from "../Floater";
 import "./styles.scss";
 
-interface CopyTextProps {
+/** */
+export interface CopyTextProps {
+  /** Text to copy */
   textToCopy: string;
+  /** Label/text to display when copy action is done @defaultValue Copied */
   doneLabel?: string;
-  tooltipPlacement?: FloaterPlacement;
+  /** Position of the tooltip @defaultValue `bottom` */
+  tooltipPlacement?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "right-start"
+    | "right-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "left-start"
+    | "left-end";
+  /** Title text to show on hover @defaultValue Copy */
   title?: string;
-  children: React.ReactElement | string;
+  /** Copy click element */
+  children: React.ReactElement;
 }
 
+/**
+ * Use `CopyText` component to copy a string. Done action label can be displayed in a tooltip, by default it will replace component’s label inline. We’re using [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) to handle the copy part.
+ */
 export const CopyText: React.FC<CopyTextProps> = ({
   textToCopy,
   doneLabel = "Copied",
   tooltipPlacement = "bottom",
   title = "Copy",
   children,
-}) => {
+}: CopyTextProps) => {
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
   const handleCopyDone = () => {

@stellar/design-system/src/components/IconButton/index.tsx

@@ -7,7 +7,7 @@ export interface IconButtonProps {
   icon: React.ReactNode;
   /** Alternative text to show on hover */
   altText: string;
-  /** Variant of the button */
+  /** Variant of the button @defaultValue `default` */
   variant?: "default" | "error" | "success" | "warning" | "highlight";
   /** Button label */
   label?: string;