playbook_ui 7.16.0.pre.alpha5 → 7.16.0

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

@@ -1,12 +0,0 @@
-<%= content_tag(:label, aria: object.aria,
-                        id: object.id,
-                        data: object.data,
-                        class: object.classname) do %>
-  <%= content.presence || object.input %>
-  <span class="pb_checkbox_checkmark">
-    <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", 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_date_picker/date_picker.html.erb

@@ -1,42 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id) do %>
-  <div class="input_wrapper">
-    <% if content.present? %>
-      <%= content %>
-    <% else %>
-      <%= 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_home_address_street/home_address_street.html.erb

@@ -1,6 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= render file: object.emphasis_partial, locals: { object: object } %>
-<% 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_image/image.test.js

@@ -1,35 +0,0 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
-
-import Image from './_image'
-
-const props = {
-  alt: 'picture of misty forest',
-  data: { testid: 'avatar' },
-  size: null,
-  url: 'https://unsplash.it/500/400/?image=634',
-}
-
-it('Should be accessible', async () => {
-  ensureAccessible(Image, props)
-})
-
-test('alt attribute', () => {
-  const kit = renderKit(Image, props)
-  expect(kit).toHaveAttribute('alt', props.alt)
-})
-
-test('default classname', () => {
-  const kit = renderKit(Image, props)
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up')
-})
-
-test('size = xs', () => {
-  const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload blur_up')
-})
-
-test('rounded = true', () => {
-  const kit = renderKit(Image, props, { rounded: true })
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up rounded')
-})
-

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

@@ -1,12 +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" }) { 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 %>">
-      <%= content.presence %>
-    </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">
-      <%= content.presence %>
-    <div>
-  </div>
-<% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("rich_text_editor", props: {
-  aria: { label: "rich-textarea" },
-  data: { key: "value", key2: "value2" },
-  name: "textarea-label",
-}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { RichTextEditor } from '../../'
-
-const RichTextEditorAttributes = (props) => (
-  <div>
-    <RichTextEditor
-        aria={{ label: 'rich textarea' }}
-        data={{ key: 'value', key2: 'value2' }}
-        name="name-attribute"
-        {...props}
-    />
-  </div>
-)
-
-export default RichTextEditorAttributes

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

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

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -1,64 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import RichTextEditor from './_rich_text_editor'
-
-const testId = 'richtext-input1',
-  kitClass = 'pb_rich_text_editor_kit'
-
-test('returns namespaced class name', () => {
-  render(
-    <RichTextEditor data={{ testid: testId }} />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(kitClass)
-})
-
-test('returns "Simple" namespaced class name via prop', () => {
-  render(
-    <RichTextEditor
-        data={{ testid: testId }}
-        simple
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} simple`)
-})
-
-test('returns "Focus" namespaced class name via prop', () => {
-  render(
-    <RichTextEditor
-        data={{ testid: testId }}
-        focus
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} focus-editor-targets`)
-})
-
-test('returns "Sticky" namespaced class name via prop', () => {
-  render(
-    <RichTextEditor
-        data={{ testid: testId }}
-        sticky
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} sticky`)
-})
-
-test('returns "Dark" class name', () => {
-  render(
-    <RichTextEditor
-        dark
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`${kitClass} dark`)
-})

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,10 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    class: object.classname) do %>
-  <label class="pb_toggle_wrapper">
-    <%= content.presence || object.input %>
-    <div class="pb_toggle_control"></div>
-  </label>
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,9 +0,0 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname) do %>
-  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
-    <%= content.presence %>
-    <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
-  </div>
-<% end %>

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
-<% end %>

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -1,30 +0,0 @@
-.z_index_1 {
-  z-index: 100;
-}
-.z_index_2 {
-  z-index: 200;
-}
-.z_index_3 {
-  z-index: 300;
-}
-.z_index_4 {
-  z-index: 400;
-}
-.z_index_5 {
-  z-index: 500;
-}
-.z_index_6 {
-  z-index: 600;
-}
-.z_index_7 {
-  z-index: 700;
-}
-.z_index_8 {
-  z-index: 800;
-}
-.z_index_9 {
-  z-index: 900;
-}
-.z_index_10 {
-  z-index: 1000;
-}

data/app/pb_kits/playbook/utilities/accessibility.js

@@ -1,22 +0,0 @@
-/* eslint-disable no-console */
-
-import axe from 'axe-core'
-
-export const runAxe = function(include = '.pb--kit-example', ignore = ['.pb--kit-example :first-child']) {
-  axe
-    .run({
-      include: [include],
-      exclude: [ignore],
-    })
-    .then((results) => {
-      if (results.violations.length) {
-        console.warn('🚨 [axe-core] Accessibility issues found. See below for a list:')
-        console.dir(results.violations)
-      } else {
-        console.log('[axe-core] Yay! 🎉 No accessibility violations were found!')
-      }
-    })
-    .catch((err) => {
-      console.error('Something bad happened:', err.message)
-    })
-}

data/lib/playbook/kit_base.rb

@@ -1,12 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  class KitBase < ViewComponent::Base
-    include Playbook::Props
-    include Playbook::PbKitHelper
-
-    def object
-      self
-    end
-  end
-end