RubyGems - playbook_ui - Versions diffs - 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.PBNTR5596029 - Mend

playbook_ui 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.PBNTR5596029

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

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

@@ -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.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<%= 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" }) %>
+<%= 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" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

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

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

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

data/app/pb_kits/playbook/pb_copy_button/index.js ADDED Viewed

@@ -0,0 +1,47 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+export default class PbCopyButton extends PbEnhancedElement {
+  static get selector() {
+    return '.pb_copy_button_kit'
+  }
+  connect() {
+    this.handleClick = this.handleClick.bind(this)
+    this.button = this.element.querySelector('button')
+    if (this.button) {
+      this.button.addEventListener('click', this.handleClick)
+    }
+  }
+  disconnect() {
+    if (this.button) {
+      this.button.removeEventListener('click', this.handleClick)
+    }
+  }
+  handleClick() {
+    const fromId = this.element.getAttribute('data-from')
+    if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      if (fromElement) {
+        let contentToCopy = ''
+        if (fromElement.tagName.toLowerCase() === 'input') {
+          contentToCopy = fromElement.value
+        } else {
+          contentToCopy = fromElement.innerText
+        }
+        navigator.clipboard.writeText(contentToCopy)
+          .catch(err => console.error('Failed to copy text', err))
+        return
+      }
+    }
+    const textToCopy = this.element.getAttribute('data-copy-value')
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+        .catch(err => console.error('Failed to copy text', err))
+    } else {
+      console.warn('No data-copy-value attribute found or data-from element')
+    }
+  }
+}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,99 @@
+<% 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",
+          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 %>
+                <% end %>
+                <%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

	@@ -0,0 +1 @@
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.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb CHANGED Viewed

@@ -7,8 +7,7 @@
 <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
   <%= pb_rails("draggable/draggable_container") do %>
     <% initial_items.each do |item| %>
-      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
           <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
             <%= pb_rails("flex", props:{gap: "xs"}) do %>
               <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
@@ -32,7 +31,6 @@
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md CHANGED Viewed

@@ -0,0 +1,7 @@
+For a simplified version of the Draggable API for the Card kit, you can do the following:
+Use the `draggable` kit and manage state as shown.
+`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
+The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb ADDED Viewed

@@ -0,0 +1,61 @@
+<% initial_items = [
+  {
+    id: "1",
+    title: "Task 1",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "2",
+    title: "Task 2",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "3",
+    title: "Task 3",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "4",
+    title: "Task 4",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "5",
+    title: "Task 5",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  }
+] %>
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("table", props: { size: "sm", responsive:"none" }) do %>
+    <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "id"}) %>
+        <%= pb_rails("table/table_header", props: { text: "name"}) %>
+        <%= pb_rails("table/table_header", props: { text: "task number"}) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
+          <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
+          <%= pb_rails("table/table_cell") do %>
+            <%= pb_rails("flex", props:{align:"center"}) do %>
+              <%= pb_rails("avatar", props: {size: "xs", image_url: item[:assignee_img]}) %>
+              <%= pb_rails("body", props: {text: item[:assignee_name], padding_left:"sm"}) %>
+            <% end %>
+          <% end %>
+          <%= pb_rails("table/table_cell", props: { text: item[:title]}) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx ADDED Viewed

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+// Initial items to be dragged
+const data = [
+    {
+        id: "1",
+        task: "Task 1",
+        assignee_name: "Terry Miles",
+        assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+      },
+      {
+        id: "2",
+        task: "Task 2",
+        assignee_name: "Sophia Miles",
+        assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+      },
+      {
+        id: "3",
+        task: "Task 3",
+        assignee_name: "Alice Jones",
+        assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+      },
+      {
+        id: "4",
+        task: "Task 4",
+        assignee_name: "Mike James",
+        assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+      },
+      {
+        id: "5",
+        task: "Task 5",
+        assignee_name: "James Guy",
+        assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+      }
+];
+const DraggableWithTableReact = (props) => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Table
+            responsive="none"
+            size="sm"
+            {...props}
+        >
+          <Table.Head>
+            <Table.Row>
+              <Table.Header>{"id"}</Table.Header>
+              <Table.Header>{"name"}</Table.Header>
+              <Table.Header>{"task number"}</Table.Header>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body draggableContainer>
+            {initialState.map(({ id, task, assignee_name, assignee_img }) => (
+              <Table.Row
+                  dragId={id}
+                  draggableItem
+                  key={id}
+              >
+                <Table.Cell>{id}</Table.Cell>
+                <Table.Cell>
+                  <Flex align="center">
+                    <Avatar
+                        imageUrl={assignee_img}
+                        size="xs"
+                    />
+                    <Body
+                        paddingLeft="xxs"
+                        text={assignee_name}
+                    />
+                  </Flex>
+                </Table.Cell>
+                <Table.Cell>{task}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+    </DraggableProvider>
+    </>
+  );
+};
+export default DraggableWithTableReact;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md ADDED Viewed

@@ -0,0 +1,5 @@
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
+- Wrap the Table with the `DraggableProvider` and manage state as shown.
+- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
+- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.

data/app/pb_kits/playbook/pb_draggable/docs/example.yml CHANGED Viewed

@@ -1,18 +1,17 @@
 examples:
   react:
   - draggable_default: Default
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_with_table_react: Draggable with Table
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
   - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
+  - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers_rails: Dragging Across Multiple Containers

data/app/pb_kits/playbook/pb_draggable/docs/index.js CHANGED Viewed

@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
+export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb CHANGED Viewed

@@ -1,3 +1,3 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(object.tag) do %>
     <%= content.presence %>
-  <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb CHANGED Viewed

@@ -3,6 +3,11 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
+      prop :tag, type: Playbook::Props::String,
+                 default: "div"
+      prop :container, type: Playbook::Props::String,
+                       default: ""
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end

data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, {
+<%= pb_content_tag(object.tag, {
 id: "item_#{object.drag_id}",
 draggable: true
 }) do %>

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb CHANGED Viewed

@@ -5,6 +5,10 @@ module Playbook
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
+      prop :tag, type: Playbook::Props::String,
+                 default: "div"
+      prop :container, type: Playbook::Props::String,
+                       default: ""
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)