playbook_ui 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2

data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb

@@ -1,12 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data.merge(initials: object.initials),
-    class: object.classname,
-    aria: object.aria) do %>
-  <%= content_tag(:div,
-      data: { initials: object.initials },
-      class: "avatar_wrapper") do %>
-       <%= pb_rails("image", props: { url: object.image_url }) if object.image_url.present? %>
-      <% end %>
-       <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
-<% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -1,17 +0,0 @@
-<%= content_tag(:label, aria: object.aria,
-                        id: object.id,
-                        data: object.data,
-                        class: object.classname) do %>  
-  <% if object.children %>
-    <%= capture(&object.children) %>
-   <% else %>            
-    <%= object.input %>
-  <% end %>
-    <span class="pb_checkbox_checkmark">
-      <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
-      <%= pb_rails("icon", props: { icon: "minus" , id: "indeterminate_icon", classname: "indeterminate_icon hidden", fixed_width: true}) %>
-    </span>
-    <span class="pb_checkbox_label">
-      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
-    </span>
-<% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -1,51 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import Checkbox from './_checkbox'
-
-const testId = 'checkbox1',
-  kitClass = 'pb_checkbox_kit'
-
-test('returns namespaced class name', () => {
-  render(
-    <Checkbox
-        data={{ testid: testId }}
-        name="checkbox-name"
-        text="Checkbox"
-        value="check-box value"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(kitClass)
-})
-
-test('returns dark class name', () => {
-  render(
-    <Checkbox
-        dark
-        data={{ testid: testId }}
-        name="checkbox-name"
-        text="Checkbox"
-        value="check-box value"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} dark`)
-})
-
-test('returns checked class name', () => {
-  render(
-    <Checkbox
-        checked
-        data={{ testid: testId }}
-        name="checkbox-name"
-        text="Checkbox"
-        value="check-box value"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass}_checked`)
-})

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -1,77 +0,0 @@
-<%= pb_rails("table", props: { disable_hover: true, size: "md" }) do %>
-  <thead>
-    <tr>
-      <th>
-        <%= pb_rails("checkbox" , props: {
-            text: "Select ",
-            value: "checkbox-value",
-            name: "main",
-            indeterminate: true,
-            id: "test-indeterminate-js"
-        }) %>
-        </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <%= pb_rails("checkbox" , props: {
-          text: "Item 1",
-          value: "checkbox-value",
-          checked: true,
-          name: "checkbox-name",
-          classname: "check-js"
-        }) %>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <%= pb_rails("checkbox" , props: {
-          text: "Item 2",
-          value: "checkbox-value",
-          checked: false,
-          name: "checkbox-name",
-          classname: "check-js"
-        }) %>
-      </td>
-    </tr>
-  </tbody>
-<% end %>
-
-
-<script>
-  const indeterminateCheckbox = document.querySelector("#test-indeterminate-js");
-  const checkboxes = document.querySelectorAll(".check-js");
-  const allEqual = arr => arr.every( v => v === arr[0] );
-
-  // Add click handlers
-  checkboxes.forEach((checkBox) => { checkBox.onclick = () => { updateState() } });
-
-  indeterminateCheckbox.onclick = (e) => {
-    checkboxes.forEach((checkBox) => {
-      checkBox.firstElementChild.checked = e.target.checked;
-    });
-  }
-
-  function updateState() {
-    const checkboxStates = [];
-    const indeterminateIcon = indeterminateCheckbox.querySelector("#indeterminate_icon");
-    const checkIcon = indeterminateCheckbox.querySelector("#check_icon");
-    const main = indeterminateCheckbox.querySelector("#main");
-
-    // Check select state
-    checkboxes.forEach((checkBox) => {
-      checkboxStates.push(checkBox.firstElementChild.checked);
-    });
-
-    if (allEqual(checkboxStates)) {
-      main.checked = checkboxStates[0];
-      indeterminateIcon.classList.remove("hidden");
-      checkIcon.classList.add("hidden");
-      } else {
-      main.checked = true;
-      indeterminateIcon.classList.add("hidden");
-      checkIcon.classList.remove("hidden");
-    }
-  }
-</script>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-import { Checkbox, Table } from '../..'
-
-const CheckboxIndeterminate = (props) => {
-  const [checkboxes, setCheckboxes] = useState([false, false])
-  const [isIndeterminate, toggleIndeterminate] = useState(false)
-
-  const toggleAll = (event) => {
-    if (event) {
-      const checked = event.currentTarget.checked
-      const updatedCheckboxes = checkboxes[0] === checkboxes[1] ? [!checkboxes[0], !checkboxes[1]] : [checked, checked]
-      setCheckboxes(updatedCheckboxes)
-      toggleIndeterminate(false)
-    }
-  }
-
-  const updateCheckbox = (event) => {
-    if (event){
-      const updatedCheckboxes = event.currentTarget.name === 'checkbox-one' ? [!checkboxes[0], checkboxes[1]] : [checkboxes[0], !checkboxes[1]]
-      setCheckboxes(updatedCheckboxes)
-      toggleIndeterminate(updatedCheckboxes[0] !== updatedCheckboxes[1])
-    }
-  }
-
-  return (
-    <div>
-      <Table
-          disableHover
-          size="sm"
-          {...props}
-      >
-        <thead>
-          <tr>
-            <th>
-              <Checkbox
-                  {...props}
-                  checked={isIndeterminate ? true : checkboxes[0]}
-                  indeterminate={isIndeterminate}
-                  name="checkbox-name"
-                  onChange={(e) => toggleAll(e)}
-                  text={checkboxes[0] === true ? 'Deselect All' : 'Select All'}
-                  value="check-box value"
-              />
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <Checkbox
-                  {...props}
-                  checked={checkboxes[0]}
-                  name="checkbox-one"
-                  onChange={(e) => updateCheckbox(e)}
-                  text="Cookies"
-                  value="check-box value"
-              />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <Checkbox
-                  {...props}
-                  checked={checkboxes[1]}
-                  name="checkbox-two"
-                  onChange={(e) => updateCheckbox(e)}
-                  text="Donuts"
-                  value="check-box value"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    </div>
-  )
-}
-
-export default CheckboxIndeterminate

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -1,43 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id) do %>
-      <% if object.children %>
-        <div class="input_wrapper">
-          <%= capture(&object.children) %>
-      <% else %>
-        <div class="input_wrapper">
-          <%= pb_rails("text_input", props: {
-            aria: object.input_aria,
-            autocomplete: false,
-            dark: object.dark,
-            data: object.input_data,
-            disabled: object.disable_input,
-            error: object.error,
-            id: object.picker_id,
-            label: object.hide_label ? nil : object.label,
-            name: object.name,
-            placeholder: object.placeholder,
-            required: object.required,
-          }) %>
-        <% end %>
-        <% if !object.hide_icon %>
-          <div
-              class="<%= object.icon_wrapper_class %>"
-              id="cal-icon-<%= object.picker_id %>"
-          >
-            <%= pb_rails("icon", props: { 
-              classname: "cal_icon",
-              icon: "calendar-alt"
-            }) %>
-          </div>
-        <% end %>
-      </div>
-
-      <%= javascript_tag do %>
-      window.addEventListener("DOMContentLoaded", () => {
-          datePickerHelper(<%= object.date_picker_config %>)
-      })
-      <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb

@@ -1,16 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-    <div class="pb_date_range_inline_wrapper">
-      <% if object.icon == true %>
-        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
-      <% end %>
-
-      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.start_date_display }) %>
-
-      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, size: object.size, classname: "pb_date_range_inline_arrow"}) }) %>
-
-      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
-    </div>
-<% end %>

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbFileUpload
-    class FileUpload
-      include Playbook::Props
-
-      partial "pb_file_upload/file_upload"
-    end
-  end
-end

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb

@@ -1,10 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <% if object.emphasis == "city" %>
-		<%= render partial:"pb_home_address_street/city_emphasis.html.erb", locals: {object: object}%>
-	<% elsif object.emphasis == "street" %>
-		<%= render partial:"pb_home_address_street/street_emphasis.html.erb", locals: {object: object} %>
-	<% end %>
-<% end %>

data/app/pb_kits/playbook/pb_icon_value/_icon_value.html.erb

@@ -1,10 +0,0 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id) do %>
-    <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-      <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
-      <%= object.text %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_layout/_body.html.erb

@@ -1,6 +0,0 @@
-<%= content_tag(object.tag, 
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= capture(&object.children) %>
-<% end %>

data/app/pb_kits/playbook/pb_layout/_column.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-                id: object.id,
-                data: object.data,
-                class: object.classname,
-  ) do %>
-    <%= capture(&object.children) %>
-<% end %>

data/app/pb_kits/playbook/pb_layout/_footer.html.erb

@@ -1,6 +0,0 @@
-<%= content_tag(object.tag, 
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= capture(&object.children) %>
-<% end %>

data/app/pb_kits/playbook/pb_layout/_header.html.erb

@@ -1,6 +0,0 @@
-<%= content_tag(object.tag, 
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= capture(&object.children) %>
-<% end %>

data/app/pb_kits/playbook/pb_person/_person.html.erb

@@ -1,14 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-      <%= pb_rails("body", props: { 
-        tag: "span", 
-        classname: "pb_person_first", 
-        children: -> { object.first_name 
-      } }) %>
-      <%= pb_rails("title", props: { 
-        text: object.last_name, 
-        size: 4 }) if object.last_name %>
-<% end %>

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -1,11 +0,0 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id) do %>
-    <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
-      <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
-        <%= capture(&object.children) %>
-      </div>
-    </div>
-<% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -1,13 +0,0 @@
-<%= content_tag(:li,
-  id: object.id,
-  data: object.data,
-  class: object.classname) do %>
-    <div class="box">
-      <div class="circle">
-        <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
-      </div>
-      <div class="content">
-        <%= capture(&object.children) %>
-      <div>
-    </div>
-<% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.html.erb

@@ -1 +0,0 @@
-<%= react_component('RichTextEditor', object.rich_text_options) %>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb

@@ -1,11 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-      <%= pb_rails("list") do %>
-        <% object.items.each do |item| %>
-          <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
-        <% end %>
-      <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_toggle/_toggle.html.erb

@@ -1,15 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    class: object.classname) do %>
-
-    <label class="pb_toggle_wrapper">
-      <% if object.children %>
-        <%= capture(&object.children) %>
-      <% else %>
-        <%= object.input %>
-      <% end %>
-      <div class="pb_toggle_control"></div>
-    </label>
-<% end %>