playbook_ui 14.12.0.pre.alpha.PBNTR720railscarddraggable5649 → 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,18 +1,19 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarBadgeComponentOverlay = () => {
+const AvatarBadgeComponentOverlay = (props) => {
     return (
         <div>
             <Avatar
                 componentOverlay={{
                     component: "badge",
                     placement: "bottom-right",
-                    text: "12"
+                    text: "12",
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="sm"
+                {...props}
             />
 
             <Avatar
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="md"
+                {...props}
+
             />
 
             <Avatar
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="lg"
+                {...props}
+
             />
 
             <Avatar
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            /> 
+                {...props}
+            />
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarCircleIconComponentOverlay = () => {
+const AvatarCircleIconComponentOverlay = (props) => {
     return (
         <div>
         <Avatar
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="sm"
+            {...props}
         />
 
         <Avatar
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="md"
+            {...props}
         />
 
         <Avatar
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="lg"
+            {...props}
         />
 
         <Avatar
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="xl"
-        /> 
+            {...props}
+        />
     </div>
     )
 }

data/app/pb_kits/playbook/pb_button/button.rb

@@ -65,7 +65,7 @@ module Playbook
       end
 
       def tag
-        link ? "a" : "button"
+        link && !disabled ? "a" : "button"
       end
 
       def valid_emoji(icon)

data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss

@@ -0,0 +1,3 @@
+.pb_copy_button_kit {
+
+}

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -0,0 +1,92 @@
+
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Button from '../pb_button/_button'
+import Tooltip from '../pb_tooltip/_tooltip'
+
+type CopyButtonProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  from?: string,
+  text?: string,
+  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
+  tooltipText?: string,
+  value?: string,
+}
+
+const CopyButton = (props: CopyButtonProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    from = '',
+    id,
+    text= 'Copy',
+    tooltipPlacement= 'bottom',
+    tooltipText = 'Copied!',
+    value = '',
+  } = props
+
+  const [copied, setCopied] = useState(false)
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
+
+  const copy = () => {
+    if (!from && !value) {
+      return
+    }
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else if (from) {
+      const copyElement = document.getElementById(from);
+      let copyText = copyElement?.innerText
+
+      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
+        copyText = copyElement.value;
+      }
+
+      if (copyText) {
+        navigator.clipboard.writeText(copyText)
+      }
+    }
+
+    setCopied(true)
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000);
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Tooltip 
+          forceOpenTooltip={copied}
+          placement={tooltipPlacement}
+          showTooltip={false}
+          text={tooltipText}
+      >
+        <Button
+            icon='copy'
+            onClick={copy}
+        >
+          { text }
+        </Button>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default CopyButton

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { CopyButton } from 'playbook-ui'
+import { ensureAccessible, renderKit, render, fireEvent, screen } from '../utilities/test-utils'
+
+const props = {
+  data: { testid: 'default', value: 'copy' }
+}
+
+test('returns namespaced class name', () => {
+  const kit = renderKit(CopyButton, props)
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_copy_button_kit')
+})
+
+it('should be accessible', async () => {
+  ensureAccessible(CopyButton, props)
+})
+
+// It's difficult to actually use navigator.clipboard.readText, so we mock
+it('copies the value to clipboard and pastes it into an input', async () => {
+  Object.defineProperty(global, 'navigator', {
+    value: {
+      clipboard: {
+        writeText: jest.fn().mockResolvedValueOnce(undefined),
+      },
+    },
+    writable: true,
+  })
+
+  render(<CopyButton {...props} />)
+
+  const copyButton = screen.getByTestId('default')
+  fireEvent.click(copyButton)
+
+  await navigator.clipboard.writeText('copy')
+
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
+})
+
+test('passes text and tooltip props to button', () => {
+  render(
+      <CopyButton
+          data={{ testid: 'text-test' }}
+          text={"text"}
+          tooltipPlacement="right"
+          tooltipText="Text copied!"
+          value="copy"
+      />
+  )
+
+  const content = screen.getByText("text")
+  expect(content).toHaveTextContent("text")
+
+  const kit = screen.getByTestId('text-test')
+  const button = kit.querySelector('.pb_button_kit_primary_inline_enabled')
+  expect(button).toBeInTheDocument()
+
+  fireEvent.click(button)
+  const tooltipContent = screen.getByText("Text copied!")
+  expect(tooltipContent).toHaveTextContent("Text copied!")
+
+  const tooltip = kit.querySelector('.pb_tooltip_kit')
+  expect(tooltip).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { CopyButton, Textarea } from 'playbook-ui'
+
+const CopyButtonDefault = (props) => (
+  <div>
+    <CopyButton
+        {...props}
+        text="Copy Text"
+        tooltipPlacement="right"
+        tooltipText="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."
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+)
+
+export default CopyButtonDefault

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
+
+const CopyButtonFrom = (props) => {
+  const [text, setText] = useState("Copy this text input text")
+
+  const handleChange = (event) => {
+    setText(event.target.value);
+  }
+
+  return (<div>
+    <Body id="body">Copy this body text!</Body>
+    <CopyButton
+        {...props}
+        from="body"
+        marginBottom="sm"
+        text="Copy Body text"
+        tooltipPlacement="right"
+        tooltipText="Body text copied!"
+    />
+
+    <TextInput
+        {...props}
+        id="textinput"
+        onChange={handleChange}
+        value={text}
+    />
+    <CopyButton
+        {...props}
+        from="textinput"
+        marginBottom="sm"
+        text="Copy Text Input"
+        tooltipPlacement="right"
+        tooltipText="Text input copied!"
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+  )
+}
+
+export default CopyButtonFrom

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md

@@ -0,0 +1 @@
+Provide an element's ID as the `from` parameter, and its text will be copied. If the element is an input, its `value` will be copied; otherwise, the `innerText` will be used. Additionally, if a `value` prop is provided, it will override the content from the `from` element and be copied instead.

data/app/pb_kits/playbook/pb_copy_button/docs/example.yml

@@ -0,0 +1,8 @@
+examples:
+  
+  
+  react:
+  - copy_button_default: Default
+  - copy_button_from: Copy From
+  
+  

data/app/pb_kits/playbook/pb_copy_button/docs/index.js

@@ -0,0 +1,2 @@
+export { default as CopyButtonDefault } from './_copy_button_default.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx'

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -14,6 +14,7 @@ type PbDateProps = {
   alignment?: "left" | "center" | "right";
   aria?: { [key: string]: string };
   className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     aria = {},
     alignment = "left",
     className,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -56,7 +58,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
   );
 
   return (
-    <div 
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -93,7 +95,9 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
           </>
         : size == "md" || size == "lg"
           ? (
-            <Title size={4}
+            <Title
+                dark={dark}
+                size={4}
                 tag="h4"
             >
               {showIcon && (
@@ -127,6 +131,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <>
                 {showIcon && (
                   <Caption className="pb_icon_kit_container"
+                      dark={dark}
                       tag="span"
                   >
                     <Icon fixedWidth
@@ -138,15 +143,20 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
                 {showDayOfWeek && (
                   <>
-                    <Caption tag="div">{weekday}</Caption>
+                    <Caption dark={dark}
+                        tag="div">
+                        {weekday}
+                    </Caption>
                     <Caption color="light"
+                        dark={dark}
                         tag="div"
                         text=" • "
                     />
                   </>
                 )}
 
-                <Caption tag="span">
+                <Caption dark={dark}
+                    tag="span">
                   {month} {day}
                   {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -18,7 +18,7 @@ const DateDefault = (props) => {
             value={"2012-08-03"}
             {...props}
         />
-        <Caption>{"(Hyphenated Date)"}</Caption>
+        <Caption {...props}>{"(Hyphenated Date)"}</Caption>
       </div>
 
       <br />
@@ -56,6 +56,7 @@ const DateDefault = (props) => {
         <Title
             size={4}
             text={"(Hyphenated Date)"}
+            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -4,7 +4,8 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (
     <>
-      <Caption size="xs"
+      <Caption {...props}
+          size="xs"
           text="Basic unstyled example"
       />
       <FormattedDate
@@ -15,10 +16,14 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption size="xs"
+      <Caption {...props}
+
+          size="xs"
           text="Example with wrapping typography kit"
       />
-      <Title size={1}>
+      <Title {...props}
+          size={1}
+      >
         <FormattedDate
             unstyled
             value={new Date('25 Dec 1995')}
@@ -28,10 +33,13 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption size="xs"
+      <Caption {...props}
+          size="xs"
           text="Example with icon + subcaption"
       />
-      <Caption size="xs">
+      <Caption {...props}
+          size="xs"
+      >
         <FormattedDate
             showDayOfWeek
             showIcon

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb

@@ -0,0 +1,193 @@
+<% content_for :helper_methods do %>
+  <% def badge_properties(container)
+    case container
+    when "To Do"
+      { text: "queue", variant: "warning" }
+    when "In Progress"
+      { text: "progress", variant: "primary" }
+    else
+      { text: "done", variant: "success" }
+    end
+  end %>
+<% end %>
+
+<% containers = [
+  "To Do",
+  "In Progress",
+  "Done"
+] %>
+
+<% items_data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+] %>
+
+<%= pb_rails("draggable", props: { initial_items: items_data }) do %>
+  <%= pb_rails("flex", props: { justify_content: "center" }) do %>
+    <% containers.each do |container| %>
+        <%= pb_rails("draggable/draggable_container", props: {
+            container: container,
+            width: "xs",
+            height: "xs",
+            padding: "sm",
+            data: { container: container }
+        }) do %>
+            <%= pb_rails("caption", props: { text_align: "center" }) do %><%= container %><% end %>
+            <%= pb_rails("flex", props: {align_items: "stretch", orientation: "column"}) do %>
+                <% items_data.select { |item| item[:container] == container }.each do |item| %>
+                    <%= pb_rails("draggable/draggable_item", props: {
+                        container: container,
+                        drag_id: item[:id]
+                    }) do %>
+                        <%= pb_rails("card", props: { margin_bottom: "sm", padding: "sm"}) do %>
+                            <%= pb_rails("flex", props: { justify: "between" }) do %>
+                                <%= pb_rails("flex/flex_item") do %>
+                                    <%= pb_rails("flex") do %>
+                                        <%= pb_rails("avatar", props: {
+                                            image_url: item[:assignee_img],
+                                            name: item[:assignee_name],
+                                            size: "xxs"
+                                        }) %>
+                                        <%= pb_rails("title", props: {
+                                            padding_left: "xs",
+                                            size: 4,
+                                            text: item[:title]
+                                        }) %>
+                                    <% end %>
+                                <% end %>
+                                <%= pb_rails("badge", props: {
+                                    margin_left: "sm",
+                                    rounded: true,
+                                    text: badge_properties(container)[:text],
+                                    variant: badge_properties(container)[:variant],
+                                      data: {
+                                        pb_status_badge: true,
+                                        pb_tag_type: "badge"
+                                      }
+                                }) %>
+                            <% end %>
+                            <%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
+                        <% end %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  const initBadgeUpdates = function() {
+    const updateBadge = function(container) {
+      switch (container) {
+        case 'To Do':
+          return { text: 'queue', variant: 'warning' };
+        case 'In Progress':
+          return { text: 'progress', variant: 'primary' };
+        case 'Done':
+          return { text: 'done', variant: 'success' };
+        default:
+          return { text: 'queue', variant: 'warning' };
+      }
+    };
+
+    let draggedElement = null;
+    let startContainer = null;
+
+    document.querySelectorAll('.pb_draggable_item').forEach(function(item) {
+      item.addEventListener('dragstart', function(event) {
+        draggedElement = event.target;
+        startContainer = draggedElement.closest('.pb_draggable_container');
+      });
+    });
+
+    document.querySelectorAll('.pb_draggable_container').forEach(function(container) {
+      container.addEventListener('drop', function(event) {
+        event.preventDefault();
+
+        if (draggedElement) {
+          setTimeout(function() {
+            const currentContainer = container;
+
+            if (currentContainer && startContainer && currentContainer !== startContainer) {
+              const containerData = currentContainer.getAttribute('data-container');
+              const badge = draggedElement.querySelector('[data-pb-status-badge]');
+
+              if (badge && containerData) {
+                const newProperties = updateBadge(containerData);
+                const span = badge.querySelector('span');
+
+                if (span) {
+                  span.textContent = newProperties.text;
+                }
+
+                badge.classList.forEach(function(className) {
+                  if (className.includes('pb_badge_kit_') || className === 'ml_sm') {
+                    badge.classList.remove(className);
+                  }
+                });
+
+                badge.className = `pb_badge_kit_${newProperties.variant}_rounded ml_sm`;
+              }
+            }
+
+            draggedElement = null;
+            startContainer = null;
+          }, 50);
+        }
+      });
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBadgeUpdates);
+  } else {
+    initBadgeUpdates();
+  }
+</script>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md

@@ -0,0 +1 @@
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.