playbook_ui 2.9.6 → 2.9.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 468316bdb9eaf492b0e250410de1241ffd0ab4c38f8a605ce42665d59924bb8d
-  data.tar.gz: 7bcf743ce36bfa07ff916bd44be34b84d3de0beb78891292c317c36c5523c91b
+  metadata.gz: 4a5f2bd958a96f0dbfd28803cf2985193685e6befec0ee99cc70b88a9b240724
+  data.tar.gz: c0431904190cb6d3f70b773becf328aa27b270dbcef67325799f6e22bc174536
 SHA512:
-  metadata.gz: 2cc3c3454e5a37b857b03642b4b2b0f2a9667e4ca0b6ca26285bd8be6f89cb0babe6c617ef4cb8b6bedd63fdcbc82f78f4fc8760274e947a0bc1473016913130
-  data.tar.gz: 1532380e45d62b933b33172925672f560b608e12125901cab907555fe4d4a6e588c11ac61658fe53152e8e1d5895868de400855b8c078b01e8433f7e25d80f58
+  metadata.gz: ca568cf8bd38190150704d38a8b209d7732b523162206e8e0900d1e1a34687e1b476a6b02467f2280e8f06337f5b92ceb27716bd383a35abe2924f8dfefbdfbf
+  data.tar.gz: 974ccaefbb7da619678d5345f04c1a8be13ae97aacb20342d09eaf4ae3f7c2909dfd88d027fb167f4f49fbafb0121fe7c3e8e5bd8d2d69b622ae010f8915e9ed

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

@@ -6,7 +6,7 @@
   <%= content_tag(:div,
       data: { initials: object.initials },
       class: "avatar_wrapper") do %>
-       <%= pb_rails("image", props: object.image) if object.image.present? %>
+       <%= 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_avatar/avatar.rb

@@ -7,7 +7,7 @@ module Playbook
 
       partial "pb_avatar/avatar"
 
-      prop :image, type: Playbook::Props::Hash, default: {}
+      prop :image_url
       prop :name, default: ""
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],

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

@@ -1,7 +1,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xs",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "online"
   }) %>
 
@@ -10,7 +10,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>
 
@@ -19,7 +19,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "md",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "offline"
   }) %>
 
@@ -28,7 +28,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "lg",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "online"
   }) %>
 
@@ -37,6 +37,6 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xl",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>

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

@@ -1,7 +1,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"}
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg"
   }) %>
 
 <br>
@@ -9,7 +9,7 @@
   <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "online"
   }) %>
 
@@ -18,7 +18,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>
 
@@ -27,6 +27,6 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
-    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "offline"
   }) %>

data/app/pb_kits/playbook/pb_button/_button.html.erb

@@ -1,23 +1,5 @@
-<%
-  # Buttons should not have link options: href, target
-  options = {
-    id: object.id,
-    data: object.data,
-    class: object.classname(object.kit_class),
-    disabled: object.disabled,
-    aria: object.aria,
-    type: object.type,
-    value: object.value
-  }.compact
-
-  link_options = {
-    href: object.link,
-    target: object.new_window
-  }
-%>
-
 <%= content_tag(object.tag,
-    object.tag == "button" ? options : options.merge(link_options)) do %>
-    <%= object.loading_icon %>
-    <span class="pb_button_content"><%= object.yield(context: self) %></span>
+    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>
 <% end %>

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

@@ -2,144 +2,67 @@
 
 module Playbook
   module PbButton
-    class Button < Playbook::PbKit::Base
-      PROPS = %i[configured_aria
-                 configured_classname
-                 configured_data
-                 configured_disabled
-                 configured_full_width
-                 configured_id
-                 configured_link
-                 configured_loading
-                 configured_new_window
-                 configured_variant
-                 configured_tag
-                 configured_text
-                 configured_type
-                 configured_value
-                 block].freeze
-
-      def initialize(aria: default_configuration,
-                     classname: default_configuration,
-                     data: default_configuration,
-                     disabled: default_configuration,
-                     full_width: default_configuration,
-                     id: default_configuration,
-                     link: default_configuration,
-                     loading: default_configuration,
-                     new_window: default_configuration,
-                     variant: default_configuration,
-                     tag: default_configuration,
-                     text: default_configuration,
-                     type: default_configuration,
-                     value: default_configuration,
-                     &block)
-        self.configured_aria = aria
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_disabled = disabled
-        self.configured_full_width = full_width
-        self.configured_id = id
-        self.configured_link = link
-        self.configured_loading = loading
-        self.configured_new_window = new_window
-        self.configured_variant = variant
-        self.configured_tag = tag
-        self.configured_text = text
-        self.configured_type = type
-        self.configured_value = value
-        self.block = block_given? ? block : nil
-      end
-
-      def disabled
-        is_true? configured_disabled
+    class Button
+      include Playbook::Props
+
+      partial "pb_button/button"
+
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :full_width, type: Playbook::Props::Boolean,
+                        default: false
+      prop :link
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[primary secondary link],
+                     default: "primary"
+      prop :text
+      prop :type
+      prop :value
+
+      def options
+        {
+          id: id,
+          data: data,
+          class: classname,
+          disabled: disabled,
+          aria: aria,
+          type: type,
+          value: value,
+        }.compact
+      end
+
+      def link_options
+        options.merge(
+          href: link,
+          target: new_window ? "_blank" : "_self"
+        )
       end
 
-      def loading
-        is_true? configured_loading
+      def tag
+        link ? "a" : "button"
       end
 
-      def loading_class
-        loading ? "loading" : nil
-      end
+    private
 
-      def loading_icon
-        pb_icon = Playbook::PbIcon::Icon.new(icon: "spinner",
-                                             pulse: true,
-                                             fixed_width: true,
-                                             classname: "loading-icon")
-        ApplicationController.renderer.render(partial: pb_icon, as: :object)
+      def classname
+        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
       end
 
       def disabled_class
-        true_value(disabled, "disabled", "enabled")
+        disabled ? "disabled" : "enabled"
       end
 
       def full_width_class
-        true_value(configured_full_width, "block", "inline")
-      end
-
-      def link
-        default_value(configured_link, "")
-      end
-
-      def variant
-        variant_options = %w[primary secondary link]
-        one_of_value(configured_variant, variant_options, "primary")
-      end
-
-      def tag
-        tag_options = %w[button a]
-        if link.empty?
-          one_of_value(configured_tag, tag_options, "button")
-        else
-          "a"
-        end
-      end
-
-      def new_window
-        true_value(configured_new_window, "_blank", "_self")
+        full_width ? "block" : "inline"
       end
 
-      def text
-        default_value(configured_text, "")
-      end
-
-      def type
-        default_value(configured_type, "button")
-      end
-
-      def value
-        configured_value unless configured_value == DEFAULT
-      end
-
-      def yield(context:)
-        !block.nil? ? context.capture(&block) : text
-      end
-
-      def kit_class
-        kit_options = [
-          "pb_button_kit",
-          variant,
-          full_width_class,
-          disabled_class,
-          loading_class,
-        ]
-        kit_options.compact.join("_")
-      end
-
-      def to_partial_path
-        "pb_button/button"
-      end
-
-    private
-
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def loading_class
+        loading ? "loading" : nil
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -12,7 +12,7 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"
-      prop :text, default: "Caption"
+      prop :text
 
       def classname
         generate_classname("pb_caption_kit", large_class, dark_class)

data/app/pb_kits/playbook/pb_contact/_contact.html.erb

@@ -4,6 +4,6 @@
     class: object.classname) do %>
   <%= pb_rails("body", props: { tag: "span", classname: "pb_contact_kit", color: "light" }) do %>
     <%= pb_rails("icon", props: { icon: object.contact_icon, fixed_width: true }) %>
-    <%= object.formatted_contact_value if object.contact_value%>
+    <%= object.formatted_contact_info if object.contact_value%>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -14,6 +14,7 @@ type ContactProps = {
   className?: String | Array<String>,
   dark?: Boolean,
   contactValue: String,
+  contactDetail?: String,
 }
 
 const kitClasses = ({}: ContactProps) => {
@@ -26,19 +27,28 @@ const Contact = ({
   className,
   dark=false,
   contactValue,
+  contactDetail="",
 }: ContactProps) => {
 
+  const formatDetail = (contactDetail) => {
+    if (contactDetail !== undefined) {
+      return `\u00b7 ${contactDetail}`
+    } else {
+      return contactDetail
+    }
+  }
+
   const css = classnames(kitClasses({contactType}), className)
 
-  const formatPhoneNumber = (phoneNumberString, contactType) => {
+  const formatContact = (contactString, contactType) => {
     if (contactType == "email") {
-      return phoneNumberString
+      return contactString
     } else {
-      let cleaned = ('' + phoneNumberString).replace(/\D/g, '')
-      let match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
-      if (match) {
-        let intlCode = (match[1] ? '+1 ' : '')
-        return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('')
+      const cleaned = contactString.replace(/\D/g, '')
+      const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
+      if (phoneNumber) {
+        let intlCode = (phoneNumber[1] ? '+1 ' : '')
+        return [intlCode, '(', phoneNumber[2], ') ', phoneNumber[3], '-', phoneNumber[4]].join('')
       }
       return null
     }
@@ -63,7 +73,7 @@ const Contact = ({
     <div className={css}>
       <Body dark={dark} color="light" >
         <Icon icon={contactTypeIcon} fixedWidth="true" />
-        {` ${formatPhoneNumber(contactValue, contactType)}`}
+        {` ${formatContact(contactValue, contactType)} ${formatDetail(contactDetail)}`}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -12,6 +12,7 @@ module Playbook
 
       prop :contact_type
       prop :contact_value
+      prop :contact_detail
 
       def classname
         generate_classname("pb_contact_kit")
@@ -32,6 +33,12 @@ module Playbook
         end
       end
 
+      def formatted_contact_info
+        "#{formatted_contact_value} #{separator} #{contact_detail}"
+      end
+
+    private
+
       def formatted_contact_value
         if contact_type == "email"
           contact_value
@@ -40,11 +47,13 @@ module Playbook
         end
       end
 
-    private
-
       def formatted_value
         contact_value.to_s.gsub(/\D/, "")
       end
+
+      def separator
+        contact_detail ? "\u00b7" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -1,18 +1,21 @@
 <%= pb_rails("contact", props: {
   contact_type: "cell",
   contact_value: "349-185-9988",
+  contact_detail: "John's Cell",
 }) %>
 
 <%= pb_rails("contact", props: {
   contact_value: 5555555555,
+  contact_detail: "Home",
 }) %>
 
 <%= pb_rails("contact", props: {
   contact_type: "email",
-  contact_value: "email@example.com",
+  contact_value: "email@example.com"
 }) %>
 
 <%= pb_rails("contact", props: {
   contact_type: "work",
   contact_value: "3245627482",
+  contact_detail: "John's Work",
 }) %>