playbook_ui 7.15.1 → 7.16.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 314da7ed0bc2cb7982bfaf10af7826efbb8822ad5ab5030433daf1bde9267398
-  data.tar.gz: 4ee326fa35a415359b0633ce7138526ce1c1346a0991ad079fb3307f350c432f
+  metadata.gz: '09bc111c3417fcaee2768cb4ec59ab0e766a6ac26a709b35f8dd851cbe840ee4'
+  data.tar.gz: d6bf6ebbe9712cdf9bdee4af1b9598e44c751531068f775352986905964a61ba
 SHA512:
-  metadata.gz: 25a9b84de3294b16d92378e48d5192ba6b444623a5161f3e64d0a68b52637cbef1949334d6cc72852dd4f85e414e827b413857afea83a0d1092c6331d79928ee
-  data.tar.gz: c565fd03afa4505e9e0126a868d1acd67baa86fe293f9c84db4248ebd417b8da4c3ab8042092d6130ed9353343f79c87ef59066ce5a699807624dce1c129bd93
+  metadata.gz: 5ca98dfcdc7a34136c71db143e1db88412a34f9d51770804cd8769a16006e16da68667d6057892d7df33fc5c21ea4981e4c0644f745201c491e6b72978dd3c5e
+  data.tar.gz: 15d0fdf33869451e55942e1a1362d9b8ddc78aea04c221d98d7639477f10278a550eb7e12253e70e5e0abe777cf6a96d542b1b46fa4b6da75632651884b92794

data/app/pb_kits/playbook/_playbook.scss

@@ -90,3 +90,4 @@
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
 @import './utilities/max_width';
+@import './utilities/positioning';

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -22,20 +22,22 @@
   <div class="markdown pb--kit-example-markdown <%= cookies[:dark_mode] == "true" ? "dark" : "" %>">
     <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
   </div>
-  <div class="pb--codeControls">
-    <ul>
-      <li>
-        <a href="#" data-toggle="code_example">Code Example</a>
-      </li>
-    </ul>
-  </div>
-  <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
-    <%= pb_rails("section_separator")%>
-    <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
-    <% if type == "rails" %>
-      <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
-    <% elsif type == "react" %>
-      <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
-    <% end %>
+  <div id="code-wrapper">
+    <div class="pb--codeControls">
+      <ul>
+        <li>
+          <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
+        </li>
+      </ul>
+    </div>
+    <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
+      <%= pb_rails("section_separator")%>
+      <a href="#" id="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
+      <% if type == "rails" %>
+        <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
+      <% elsif type == "react" %>
+        <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
+      <% end %>
+    </div>
   </div>
 <% end %>

data/app/pb_kits/playbook/index.js

@@ -108,8 +108,8 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
 export datePickerHelper from './pb_date_picker/date_picker_helper.js'
-export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
-export PbTooltip from './pb_tooltip'
 export PbTextarea from './pb_textarea'
+export PbTooltip from './pb_tooltip'
+export PbTypeahead from './pb_typeahead'

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { map } from 'lodash'
 
@@ -39,6 +39,9 @@ const Avatar = (props: AvatarProps) => {
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials
 
+  const [error, setError] = useState(false)
+  const handleError = () => setError(true)
+
   return (
     <div
         {...ariaProps}
@@ -50,9 +53,10 @@ const Avatar = (props: AvatarProps) => {
           className="avatar_wrapper"
           data-initials={initials}
       >
-        <If condition={imageUrl}>
+        <If condition={imageUrl && !error}>
           <Image
               alt={name}
+              onError={handleError}
               url={imageUrl}
           />
         </If>

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

@@ -0,0 +1,10 @@
+<%= 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, on_error: object.handle_img_error }) 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_avatar/avatar.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbAvatar
-    class Avatar
-      include Playbook::Props
-
-      partial "pb_avatar/avatar"
-
+    class Avatar < Playbook::KitBase
       prop :image_url
       prop :name, default: ""
       prop :size, type: Playbook::Props::Enum,
@@ -25,6 +21,10 @@ module Playbook
       def online_status_props
         { status: status, classname: "size_#{size}" }
       end
+
+      def handle_img_error
+        "this.style.display = 'none'"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("avatar", props: { image_url: true, name: "Terry Johnson", size: "xs" }) %>
+<%= pb_rails("avatar", props: { image_url: 4, name: "Terry Johnson", size: "sm" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://google.com", name: "Terry Johnson", size: "md" }) %>
+<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "lg" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://randomuser.me/api/portraits/men/notapicture.jpg", name: "Terry Johnson", size: "xl" }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarNoImage = (props) => {
+  return (
+    <div>
+      <Avatar
+          imageUrl="Just some text here"
+          name="Terry Johnson"
+          size="xs"
+          {...props}
+      />
+      <Avatar
+          imageUrl={4}
+          name="Terry Johnson"
+          size="sm"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://google.com"
+          name="Terry Johnson"
+          size="md"
+          {...props}
+      />
+      <Avatar
+          imageUrl=""
+          name="Terry Johnson"
+          size="lg"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/notapicture.jpg"
+          name="Terry Johnson"
+          size="xl"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AvatarNoImage

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.md

@@ -0,0 +1,2 @@
+
+A monagram is used as a fallback when an invalid or missing image url is provided.

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

@@ -2,8 +2,10 @@ examples:
   rails:
     - avatar_default: Default
     - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
     - avatar_status: Status

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

@@ -1,3 +1,4 @@
 export { default as AvatarDefault } from './_avatar_default.jsx'
 export { default as AvatarMonogram } from './_avatar_monogram.jsx'
 export { default as AvatarStatus } from './_avatar_status.jsx'
+export { default as AvatarNoImage } from './_avatar_no_image.jsx'

data/app/pb_kits/playbook/pb_avatar_action_button/{_avatar_action_button.html.erb → avatar_action_button.html.erb}

@@ -3,8 +3,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-      
-
     <% if object.tooltip_text.present? %>
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,
@@ -17,7 +15,6 @@
     <% end %>
 
     <%= link_to object.link_url, id: object.tooltip_id do %>
-
       <%= pb_rails("avatar", props: {
         dark: object.dark,
         name: object.name,
@@ -25,12 +22,11 @@
         image_url: object.image_url,
         class: "avatar_action"
       }) %>
-        <div class="icon <%= object.dark ? 'dark' : '' %> ">
-          <%= pb_rails("icon", props: {
-            dark: object.dark,
-            icon: object.action_icons
-          }) %>
-        </div>
-       
+      <div class="icon <%= object.dark ? 'dark' : '' %> ">
+        <%= pb_rails("icon", props: {
+          dark: object.dark,
+          icon: object.action_icons
+        }) %>
+      </div>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb

@@ -2,13 +2,11 @@
 
 module Playbook
   module PbAvatarActionButton
-    class AvatarActionButton
-      include Playbook::Props
-
+    class AvatarActionButton < Playbook::KitBase
       prop :action, type: Playbook::Props::String,
                     default: "add"
       prop :image_url, type: Playbook::Props::String
-      prop :link_url, type: Playbook::Props::String
+      prop :link_url, type: Playbook::Props::String, default: "#"
       prop :tooltip_text, type: Playbook::Props::String
       prop :tooltip_id, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String,
@@ -20,8 +18,6 @@ module Playbook
                        values: %w[bottom_left bottom_right top_left top_right],
                        default: "bottom_left"
 
-      partial "pb_avatar_action_button/avatar_action_button"
-
       def classname
         generate_classname("pb_avatar_action_button_kit", action, size, placement)
       end

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -1,5 +1,5 @@
 <div class="pb--doc-demo-row">
-  
+
   <%= pb_rails("avatar_action_button", props: {
       name: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg"

data/app/pb_kits/playbook/pb_background/{_background.html.erb → background.html.erb}

@@ -6,7 +6,7 @@
       class: object.classname,
       style: "background-image: url('#{object.image_url}');"
   ) do %>
-    <%= capture(&object.children) %>
+    <%= content.presence %>
   <% end %>
 <% else %>
   <%= content_tag(object.tag,
@@ -15,6 +15,6 @@
       id: object.id,
       class: object.classname
   ) do %>
-    <%= capture(&object.children) %>
+    <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_background/background.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbBackground
-    class Background
-      include Playbook::Props
-
-      partial "pb_background/background"
-
+    class Background < Playbook::KitBase
       prop :background_color, type: Playbook::Props::Enum,
                               values: %w[gradient dark light white],
                               default: "light"

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbBadge
-    class Badge
-      include Playbook::Props
-
-      partial "pb_badge/badge"
-
+    class Badge < Playbook::KitBase
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -2,10 +2,7 @@
 
 module Playbook
   module PbBarGraph
-    class BarGraph
-      include Playbook::Props
-      partial "pb_bar_graph/bar_graph"
-
+    class BarGraph < Playbook::KitBase
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []

data/app/pb_kits/playbook/{pb_caption/_caption.html.erb → pb_body/body.html.erb}

@@ -3,5 +3,5 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-  <%= object.children.present? ? capture(&object.children) : object.text %>
+  <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_body/body.rb

@@ -2,12 +2,7 @@
 
 module Playbook
   module PbBody
-    class Body
-      include Playbook::Props
-      include ActionView::Helpers
-
-      partial "pb_body/body"
-
+    class Body < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
                    values: %w[default light lighter],
                    default: "default"
@@ -19,7 +14,7 @@ module Playbook
                  default: "div"
       prop :text
       prop :highlighting, type: Playbook::Props::Boolean,
-                              default: false
+                          default: false
       prop :highlighted_text, type: Playbook::Props::Array,
                               default: []
 
@@ -28,14 +23,14 @@ module Playbook
       end
 
       def content
-        highlighting ? apply_highlight : text
+        body_text = super.presence || text
+        highlighting ? apply_highlight(body_text) : body_text
       end
 
     private
 
-      def apply_highlight
-        pb_highlight = Playbook::PbHighlight::Highlight.new() {"|"}
-        pb_highlight_output = ApplicationController.renderer.render(partial: pb_highlight, as: :object)
+      def apply_highlight(text)
+        pb_highlight_output = pb_rails("highlight") { "|" }
         highlight_tags = pb_highlight_output.split("|")
         highlight(text, highlighted_text, highlighter: "#{highlight_tags.first.html_safe} \\1 #{highlight_tags.last.html_safe}")
       end

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -2,7 +2,6 @@
   text: "I am a body kit"
 }) %>
 
-
 <%= pb_rails("body", props: {
   text: "I am a body kit (Light)",
   color: "light"

data/app/pb_kits/playbook/pb_button/{_button.html.erb → button.html.erb}

@@ -1,5 +1,5 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
-    <span class="pb_button_content"><%= !object.children.nil? ? capture(&object.children) : object.text %></span>
+    <span class="pb_button_content"><%= content.presence || object.text %></span>
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbButton
-    class Button
-      include Playbook::Props
-
-      partial "pb_button/button"
-
+    class Button < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_button_toolbar/{_button_toolbar.html.erb → button_toolbar.html.erb}

@@ -3,5 +3,5 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-      <%= !object.children.nil? ? capture(&object.children) : object.text %>
+      <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbButtonToolbar
-    class ButtonToolbar
-      include Playbook::Props
-
-      partial "pb_button_toolbar/button_toolbar"
-
+    class ButtonToolbar < Playbook::KitBase
       prop :connected, type: Playbook::Props::Boolean, default: false
 
       prop :orientation, type: Playbook::Props::Enum,