playbook_ui 8.2.0.pre.alpha1 → 8.2.1.alpha.iconacc

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

@@ -0,0 +1,10 @@
+examples:
+
+  rails:
+
+  react:
+  - dialog_default: Simple
+  - dialog_compound_components: Complex
+  - dialog_sizes: Sizes
+  - dialog_scrollable: Scrollable
+  - dialog_should_close_on_overlay: Overlay Click

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

@@ -0,0 +1,6 @@
+export { default as DialogDefault } from './_dialog_default.jsx'
+export { default as DialogCompoundComponents } from './_dialog_compound_components.jsx'
+export { default as DialogSizes } from './_dialog_sizes.jsx'
+export { default as DialogScrollable } from './_dialog_scrollable.jsx'
+export { default as DialogSeparators } from './_dialog_separators.jsx'
+export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'

data/app/pb_kits/playbook/pb_form/_form.scss

@@ -1,8 +1,12 @@
 .pb-form {
   .pb-form-actions {
     list-style: none;
-    margin: 8px;
+    margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-direction: row;
 
     > li {
       display: inline-flex;

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -19,9 +19,11 @@ module Playbook
         prepend(CollectionSelectField)
         prepend(CheckboxField)
         prepend(DatePickerField)
+      end
 
-        def actions(&block)
-          @template.render_component ActionArea.new(submit_default_value: submit_default_value, children: block)
+      def actions
+        @template.send(:view_context).content_tag :ol, class: "pb-form-actions" do
+          yield ActionArea.new(@template, submit_default_value)
         end
       end
     end

data/app/pb_kits/playbook/pb_form/form_builder/action_area.rb

@@ -3,22 +3,29 @@
 module Playbook
   module PbForm
     module FormBuilder
-      class ActionArea < Playbook::KitBase
-        prop :submit_default_value, type: Playbook::Props::String
+      class ActionArea
+        def initialize(view_context, submit_default_value)
+          self.view_context = view_context
+          self.submit_default_value = submit_default_value
+        end
 
         def submit(value = nil, props: {})
           props[:type] ||= "submit"
+          props[:text] ||= value || submit_default_value
+
           button(value, props: props)
         end
 
         def button(value = nil, props:)
-          props[:text] ||= value || submit_default_value
-
-          content_tag(:li) do
-            pb_rails("button", props: props)
+          view_context.content_tag(:li) do
+            view_context.pb_rails("button", props: props)
           end
         end
+
+      private
+
+        attr_accessor :view_context, :submit_default_value
       end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_form/simple_form.html.erb

@@ -1,6 +1,4 @@
-<%= simple_form_for model, options do |form| %>
-  <% instance_exec form, &children %>
-<% end %>
+<%= simple_form_for model, options, &method(:render_form) %>
 
 <% if validate %>
   <% content_for :pb_js do %>
@@ -10,4 +8,4 @@
       })
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/simple_form.rb

@@ -48,6 +48,10 @@ module Playbook
         prop(:options).fetch(:html, {})
       end
 
+      def render_form(builder)
+        view_context.capture(builder, &children)
+      end
+
       def render_in(view_context, &_block)
         super(view_context, &nil)
       end

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -2,12 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type IconProps = {
-  aria?: Object,
+  aria?: object,
   border?: boolean,
   className?: string,
+  data?: object,
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
@@ -41,8 +43,10 @@ const flipMap = {
 
 const Icon = (props: IconProps) => {
   const {
+    aria = {},
     border = false,
     className,
+    data = {},
     fixedWidth = true,
     flip = false,
     icon,
@@ -75,11 +79,22 @@ const Icon = (props: IconProps) => {
     className
   )
 
+  aria.label ? null : aria.label = `${icon} icon`
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
   return (
-    <i
-        className={classes}
-        id={id}
-    />
+    <>
+      <i
+          {...dataProps}
+          className={classes}
+          id={id}
+      />
+      <span
+          {...ariaProps}
+          hidden="true"
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,5 +1,7 @@
 <%= content_tag(:i, nil,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+    class: object.classname ) %>
+<%= content_tag(:span, nil,
+    aria: { label: "#{object.icon} icon" }.merge(object.aria),
+    hidden: true ) %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -22,6 +22,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     >
       <Body color="light">
         <Icon
+            aria={{ label: 'loading icon' }}
             fixedWidth
             icon="spinner"
             pulse

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -4,6 +4,6 @@
     class: object.classname) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { fixed_width: true, icon: "spinner", pulse: true }) %> Loading
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -75,7 +75,6 @@ const NavItem = (props: NavItemProps) => {
               key={iconLeft}
           >
             <Icon
-                aria={{ label: iconLeft }}
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
@@ -91,7 +90,6 @@ const NavItem = (props: NavItemProps) => {
               key={iconRight}
           >
             <Icon
-                aria={{ label: iconRight }}
                 className="pb_nav_list_item_icon_right"
                 fixedWidth
                 icon={iconRight}

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -9,13 +9,13 @@
       <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
     <% end %>
     <% if object.icon_left %>
-      <%= pb_rails("icon", props: { aria: { label: object.icon_left }, icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>
     <span class="pb_nav_list_item_text">
       <%= object.text %><%= content.presence %>
     </span>
     <% if object.icon_right %>
-      <%= pb_rails("icon", props: { aria: { label: object.icon_right }, icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -23,6 +23,8 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     status = 'offline',
   } = props
 
+  aria.label = status
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    aria: object.aria,
+    aria: object.aria.merge!(label: object.status),
     class: object.classname,
     data: object.data,
     id: object.id) do %>

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -23,7 +23,7 @@ const UserBadge = (props: UserBadgeProps) => {
     size = 'md',
   } = props
 
-  const image = require(`./badges/_${badge}.svg`)
+  const image = require(`./badges/${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

data/app/pb_kits/playbook/react_rails_kits.js

@@ -5,4 +5,8 @@ export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
 export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
 export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
+export { default as Dialog } from './pb_dialog/_dialog.jsx'
+export { default as DialogHeader } from './pb_dialog/child_kits/_dialog_header.jsx'
+export { default as DialogBody } from './pb_dialog/child_kits/_dialog_body.jsx'
+export { default as DialogFooter } from './pb_dialog/child_kits/_dialog_footer.jsx'
 export { KitSearch, SnippetToggle, DarkModeToggle } from './docs_components'

data/app/pb_kits/playbook/utilities/test-utils.js

@@ -39,3 +39,9 @@ export const ensureAccessible = async (Kit, props = {}, newProps = {}) => {
   const html = render()
   expect(await axe(html)).toHaveNoViolations()
 }
+
+export const appendAlert = (message) => {
+  const alertNode = document.createElement('div')
+  alertNode.innerHTML = message
+  document.querySelector('body').appendChild(alertNode)
+}

data/lib/playbook/version.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "8.2.0.pre.alpha1"
+  VERSION = "8.2.1.alpha.iconacc"
 end
+

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 8.2.0.pre.alpha1
+  version: 8.2.1.alpha.iconacc
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-03-02 00:00:00.000000000 Z
+date: 2021-03-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -17,27 +17,27 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.6
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '7.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.6
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '7.0'
 - !ruby/object:Gem::Dependency
   name: actionview
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.6
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -47,7 +47,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.6
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -57,7 +57,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.6
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -67,24 +67,10 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.6
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
-- !ruby/object:Gem::Dependency
-  name: github_changelog_generator
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 1.15.2
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 1.15.2
 - !ruby/object:Gem::Dependency
   name: react-rails
   requirement: !ruby/object:Gem::Requirement
@@ -253,6 +239,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 11.0.0
+- !ruby/object:Gem::Dependency
+  name: github_changelog_generator
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.15.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.15.2
 - !ruby/object:Gem::Dependency
   name: overcommit
   requirement: !ruby/object:Gem::Requirement
@@ -285,22 +285,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
@@ -464,6 +464,7 @@ files:
 - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
 - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
 - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
+- app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js
 - app/pb_kits/playbook/pb_background/_background.jsx
 - app/pb_kits/playbook/pb_background/_background.scss
 - app/pb_kits/playbook/pb_background/background.html.erb
@@ -526,6 +527,7 @@ files:
 - app/pb_kits/playbook/pb_button/_button_mixins.scss
 - app/pb_kits/playbook/pb_button/button.html.erb
 - app/pb_kits/playbook/pb_button/button.rb
+- app/pb_kits/playbook/pb_button/button.test.js
 - app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb
@@ -552,6 +554,7 @@ files:
 - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
 - app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb
 - app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb
+- app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js
 - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb
 - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx
 - app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb
@@ -609,12 +612,15 @@ files:
 - app/pb_kits/playbook/pb_card/docs/_card_separator.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_shadow.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_shadow.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_tag.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_tag.jsx
 - app/pb_kits/playbook/pb_card/docs/example.yml
 - app/pb_kits/playbook/pb_card/docs/index.js
 - app/pb_kits/playbook/pb_checkbox/_checkbox.jsx
 - app/pb_kits/playbook/pb_checkbox/_checkbox.scss
 - app/pb_kits/playbook/pb_checkbox/checkbox.html.erb
 - app/pb_kits/playbook/pb_checkbox/checkbox.rb
+- app/pb_kits/playbook/pb_checkbox/checkbox.test.js
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb
@@ -623,6 +629,8 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
@@ -654,6 +662,7 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
+- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
@@ -850,6 +859,29 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
+- app/pb_kits/playbook/pb_dialog/_close_icon.jsx
+- app/pb_kits/playbook/pb_dialog/_dialog.html.erb
+- app/pb_kits/playbook/pb_dialog/_dialog.jsx
+- app/pb_kits/playbook/pb_dialog/_dialog.scss
+- app/pb_kits/playbook/pb_dialog/_dialog_context.jsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx
+- app/pb_kits/playbook/pb_dialog/dialog.rb
+- app/pb_kits/playbook/pb_dialog/dialog.test.jsx
+- app/pb_kits/playbook/pb_dialog/dialog_header.rb
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
+- app/pb_kits/playbook/pb_dialog/docs/example.yml
+- app/pb_kits/playbook/pb_dialog/docs/index.js
 - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx
 - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss
 - app/pb_kits/playbook/pb_distribution_bar/distribution_bar.html.erb
@@ -973,7 +1005,6 @@ files:
 - app/pb_kits/playbook/pb_form/docs/example.yml
 - app/pb_kits/playbook/pb_form/form.rb
 - app/pb_kits/playbook/pb_form/form_builder.rb
-- app/pb_kits/playbook/pb_form/form_builder/action_area.html.erb
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
 - app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
@@ -2072,7 +2103,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2087,8 +2118,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubygems_version: 3.1.4
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []