<%= pb_rails("copy_button", props: { id: "default-copy-button", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Click the icon above to copy and paste here" }) %>

<%= pb_rails("copy_button", props: {
  text: "Copy Text",
  tooltip_position: "right",
  tooltip_text: "Text copied!",
  value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook's 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease.",
  variant: "button",
}) %>

<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button", variant: "button" }) %>
<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button", variant: "button" }) %>
<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

<%= pb_rails("body", props: { cursor: "pointer", data: { "external-copy-from": "hookbody"} }) do %>
  <span id="hookbody">I'm a custom copy hook! Click this body to copy this text!</span>
<% end %>

<%= pb_rails("tooltip", props: {
  trigger_element_selector: "#hookbody",
  tooltip_id: "hookbody_tooltip",
  position: 'top',
  trigger_method: "click"
}) do %>
  Copied!
<% end %>

<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Paste here" }) %>