RubyGems - playbook_ui - Versions diffs - 14.13.0.pre.alpha.rails8compatible6232 → 14.13.0.pre.rc.0 - Mend

playbook_ui 14.13.0.pre.alpha.rails8compatible6232 → 14.13.0.pre.rc.0

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 (213) hide show

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx DELETED Viewed

@@ -1,69 +0,0 @@
-import React, { useState } from "react"
-import { useForm } from "react-hook-form"
-import { Button, Checkbox, Flex, Body } from "playbook-ui"
-const CheckboxReactHook = () => {
-  const { register, handleSubmit } = useForm({
-    defaultValues: {
-      Small: false,
-      Medium: false,
-      Large: false,
-    },
-  })
-  const [submittedData, setSubmittedData] = useState({
-    Small: false,
-    Medium: false,
-    Large: false,
-  })
-  const onSubmit = (data) => {
-    setSubmittedData(data)
-  }
-  return (
-    <Flex orientation="row">
-      <Flex align="start"
-          orientation="column"
-          paddingRight="lg"
-      >
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Checkbox padding="xs"
-              text="Small"
-              {...register("Small")}
-          />
-          <br />
-          <Checkbox padding="xs"
-              text="Medium"
-              {...register("Medium")}
-          />
-          <br />
-          <Checkbox padding="xs"
-              text="Large"
-              {...register("Large")}
-          />
-          <br />
-          <Button htmlType="submit"
-              marginTop="sm"
-              text="submit"
-          />
-        </form>
-      </Flex>
-      <Flex align="start"
-          orientation="column"
-      >
-        <Body padding="xs"
-            text={`Small: ${submittedData.Small ? "true" : "false"}`}
-        />
-        <Body padding="xs"
-            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
-        />
-        <Body padding="xs"
-            text={`Large: ${submittedData.Large ? "true" : "false"}`}
-        />
-      </Flex>
-    </Flex>
-  )
-}
-export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md DELETED Viewed

	@@ -1 +0,0 @@
1	- You can pass react hook props to the checkbox kit.

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

@@ -1,4 +0,0 @@
-.pb_copy_button_kit {
-  width: fit-content;
-  height: fit-content;
-}

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

@@ -1,92 +0,0 @@
-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.html.erb DELETED Viewed

@@ -1,15 +0,0 @@
-<%= pb_content_tag do %>
-    <%= pb_rails("button", props: { icon: "copy" }) do %>
-      <%= object.text %>
-    <% end %>
-  <% if object.id %>
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "##{object.id}",
-      position: object.tooltip_position,
-      tooltip_id: "#{object.id}_tooltip",
-      trigger_method: "click"
-    }) do %>
-        <%= object.tooltip_text %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb DELETED Viewed

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-module Playbook
-  module PbCopyButton
-    class CopyButton < ::Playbook::KitBase
-      prop :text
-      prop :tooltip_position,
-           type: Playbook::Props::Enum,
-           values: %w[top right bottom left],
-           default: "top"
-      prop :tooltip_text, type: Playbook::Props::String,
-                          default: "Copied!"
-      prop :value
-      prop :from
-      def classname
-        generate_classname("pb_copy_button_kit")
-      end
-      def data
-        Hash(values[:data]).merge(
-          "copy-value": value,
-          "from": from
-        )
-      end
-    end
-  end
-end

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

@@ -1,64 +0,0 @@
-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.html.erb DELETED Viewed

	@@ -1,2 +0,0 @@
1	- <%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", 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." } ) %>
2	- <%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

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

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

@@ -1,5 +0,0 @@
-<%= 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 DELETED Viewed

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

	@@ -1 +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 DELETED Viewed

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

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

@@ -1,47 +0,0 @@
-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_draggable/docs/_draggable_multiple_containers_rails.html.erb DELETED Viewed

@@ -1,99 +0,0 @@
-<% 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 DELETED Viewed

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

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

@@ -1,61 +0,0 @@
-<% 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("table/table_body", props: {draggable_container: true}) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) 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 DELETED Viewed

@@ -1,4 +0,0 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
-- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
-- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.