playbook_ui 2.9.3 → 2.9.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 83bfef20c888012751cbe3ff287d6850546328ff1f8916c1d3fb66afb80e7575
-  data.tar.gz: e7fdc38479036276b05a245ac437f6de3261189d563371741b8171eb0da18947
+  metadata.gz: 6f2367598c1e7a4884d82b241d1892dcffd0e4be6a6bb42c3df38106c736982b
+  data.tar.gz: 13342e3858e46a139374bbad7d352445d67b8084ce9cd7757ba21cd6b0418200
 SHA512:
-  metadata.gz: 98f925395f71c5f1528940d90726ed404b9651838ee20f21150653d7c62b3d19f354048b194a969116e294c89efd89b340c92d7406fb2646ff805066d1d5065a
-  data.tar.gz: b3971889b97ffdb28929751dd5b17ce64f6b15dd35dfec1bc98bc07c32d019bd019f28c6ae6bbf42c0a46c4ce9412c3222fefdf82c38ff3249d9da762a2a307b
+  metadata.gz: cc7eacf6aacf17bd97b421e765f96c4210a9131b85036c606ec81d7fb8633a9b70a87c1735e4cd2b545372bf7db9b059feb39a061ae0f7ec10496ea042d3a25e
+  data.tar.gz: 88525a0ef851f0f5f99b226aa047b3d6738c91296e6e22c355d291d0196e1cbf96198fe315e1d8cfa25e12f48f52a2e99f2cc843bfa86f434bb39feda36c1507

data/app/helpers/playbook/pb_doc_helper.rb

@@ -65,7 +65,7 @@ module Playbook
     def render_clickable_title(kit)
       render inline: "<a href='#{kit_show_path(kit)}'>
           #{pb_rails(:title, props: { text: pb_kit_title(kit),
-                                      tag: 'h3', size: '2' })}</a>"
+                                      tag: 'h3', size: 2 })}</a>"
     end
   end
 end

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb

@@ -2,14 +2,13 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_bar_graph")
-    ) %>
+    class: object.classname) %>
 <% content_for :pb_js do %>
   <%= javascript_tag do %>
     window.addEventListener('DOMContentLoaded', function() {
       new pbChart('.selector', {
         id: "<%= object.id %>",
-        chartData: <%= object.chart_data %>,
+        chartData: <%= object.sanitized_chart_data %>,
         type: "<%= object.chart_type %>",
         title: "<%= object.title %>",
         subtitle: "<%= object.subtitle %>",
@@ -18,4 +17,4 @@
       })
     })
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -7,12 +7,12 @@ const sizeColumns = function(highchart) {
 
   column.borderRadius = 0;
   column.pointPadding = 0.3;
-  column.groupPadding = 0.2;
+  column.groupPadding = 0;
 
   series.borderWidth = 0;
   series.shadow = false;
-  series.pointPadding = 0.3;
-  series.groupPadding = 0.2;
+  series.pointPadding = 0.25;
+  series.groupPadding = 0;
 };
 
 const styleDataLabels = highchart => {
@@ -20,6 +20,7 @@ const styleDataLabels = highchart => {
 
   series.dataLabels.style.fontFamily = typography.font_family_base;
   series.dataLabels.style.fontSize = typography.text_small;
+  series.dataLabels.style.fontWeight = typography.bold;
 };
 
 const barGraphSettings = function(highchart) {

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

@@ -2,85 +2,31 @@
 
 module Playbook
   module PbBarGraph
-    class BarGraph < Playbook::PbKit::Base
-      PROPS = %i[
-        configured_aria
-        configured_axis_title
-        configured_chart_data
-        configured_classname
-        configured_data
-        configured_id
-        configured_orientation
-        configured_point_start
-        configured_subtitle
-        configured_title
-      ].freeze
-
-      def initialize(
-        aria: default_configuration,
-        axis_title: default_configuration,
-        chart_data: default_configuration,
-        classname: default_configuration,
-        data: default_configuration,
-        id: default_configuration,
-        orientation: default_configuration,
-        point_start: default_configuration,
-        subtitle: default_configuration,
-        title: default_configuration
-      )
-        self.configured_aria = aria
-        self.configured_axis_title = axis_title
-        self.configured_chart_data = chart_data
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_orientation = orientation
-        self.configured_point_start = point_start
-        self.configured_subtitle = subtitle
-        self.configured_title = title
-      end
-
-      def orientation
-        orientation_options = %w[vertical horizontal]
-        one_of_value(configured_orientation, orientation_options, "vertical")
-      end
+    class BarGraph
+      include Playbook::Props
+      partial "pb_bar_graph/bar_graph"
+
+      prop :axis_title
+      prop :chart_data, type: Playbook::Props::Array,
+                        default: []
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[vertical horizontal],
+                         default: "vertical"
+      prop :point_start
+      prop :subtitle
+      prop :title
 
       def chart_type
         orientation == "horizontal" ? "bar" : "column"
       end
 
-      def title
-        default_value(configured_title, "")
-      end
-
-      def subtitle
-        default_value(configured_subtitle, "")
-      end
-
-      def axis_title
-        default_value(configured_axis_title, "")
+      def classname
+        generate_classname("pb_bar_graph")
       end
 
-      def to_partial_path
-        "pb_bar_graph/bar_graph"
-      end
-
-      def point_start
-        default_value(configured_point_start, "")
-      end
-
-      def chart_data
-        adjusted_value(configured_chart_data, configured_chart_data.to_json.html_safe, {})
-      end
-
-    private
-
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def sanitized_chart_data
+        chart_data.to_json.html_safe
       end
-      attr_accessor(*PROPS)
     end
   end
 end

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

@@ -9,6 +9,12 @@
     text: object.address_house_style
   } %>
 
+  <%= pb_rails "title", props: {
+    classname: "pb_home_address_street_address",
+    size: 4,
+    text: object.address_house_style2
+  } %>
+
   <%= pb_rails "body", props: {
     color: "light",
     text: object.city_state,

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb

@@ -1,8 +1,9 @@
 <%= pb_rails("home_address_street", props: {
   address: "70 Prospect Ave",
+  address2: "Apt M18",
   city: "North Arlington",
   home_id: 8250263,
-  house_style: "Colonial",
+  house_style: nil,
   state: "NJ",
   zipcode: "07031",
   dark: true,

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -1,5 +1,6 @@
 <%= pb_rails("home_address_street", props: {
   address: "70 Prospect Ave",
+  address2: nil,
   city: "North Arlington",
   home_id: 8250263,
   house_style: "Colonial",

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -8,6 +8,7 @@ module Playbook
       partial "pb_home_address_street/home_address_street"
 
       prop :address
+      prop :address2
       prop :city
       prop :home_id, type: Playbook::Props::Number
       prop :house_style
@@ -24,7 +25,15 @@ module Playbook
       end
 
       def address_house_style
-        "#{address} \u00b7 #{house_style}"
+        "#{address} #{separator} #{house_style}"
+      end
+
+      def address_house_style2
+        address2
+      end
+
+      def separator
+        house_style ? "\u00b7" : ""
       end
 
     private

data/app/pb_kits/playbook/pb_label_pill/label_pill.rb

@@ -39,7 +39,7 @@ module Playbook
       end
 
       def variant
-        default_value(configured_variant, "")
+        default_value(configured_variant, "neutral")
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js

@@ -17,6 +17,7 @@ const styleDataLabels = highchart => {
 
   series.dataLabels.style.fontFamily = typography.font_family_base;
   series.dataLabels.style.fontSize = typography.text_small;
+  series.dataLabels.style.fontWeight = typography.bold;
 };
 
 const pbLineGraph = highchart => {

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

@@ -1,6 +1,9 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
-    <%= object.value %>
+    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
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -2,66 +2,19 @@
 
 module Playbook
   module PbLoadingInline
-    class LoadingInline < Playbook::PbKit::Base
-      PROPS = %i[configured_align
-                 configured_classname
-                 configured_dark
-                 configured_data
-                 configured_id].freeze
+    class LoadingInline
+      include Playbook::Props
 
-      def initialize(align: default_configuration,
-                     classname: default_configuration,
-                     dark: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration)
-        self.configured_align = align
-        self.configured_classname = classname
-        self.configured_dark = dark
-        self.configured_data = data
-        self.configured_id = id
-      end
-
-      def align
-        align_options = %w[left center right]
-        one_of_value(configured_align, align_options, "left")
-      end
-
-      def dark
-        is_true? configured_dark
-      end
-
-      def icon
-        pb_icon = Playbook::PbIcon::Icon.new(fixed_width: true, icon: "spinner", pulse: true)
-        ApplicationController.renderer.render(partial: pb_icon, as: :object)
-      end
-
-      def value
-        pb_icon_value = Playbook::PbBody::Body.new(color: "light", dark: dark) do
-          icon + "Loading"
-        end
-        ApplicationController.renderer.render(partial: pb_icon_value, as: :object)
-      end
-
-      def to_partial_path
-        "pb_loading_inline/loading_inline"
-      end
-
-      def kit_class
-        loading_inline_options = [
-          "pb_loading_inline_kit",
-          align,
-        ]
-        loading_inline_options.join("_")
-      end
+       partial "pb_loading_inline/loading_inline"
 
-    private
+       prop :align, type: Playbook::Props::Enum,
+                    values: %w[left center right],
+                    default: "left"
+       prop :dark, type: Playbook::Props::Boolean, default: false
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def classname
+        generate_classname("pb_loading_inline_kit", align)
       end
-      attr_accessor(*PROPS)
     end
   end
 end

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

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
+    class: object.classname) do %>
 <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -2,47 +2,18 @@
 
 module Playbook
   module PbOnlineStatus
-    class OnlineStatus < Playbook::PbKit::Base
-      PROPS = %i[configured_classname
-                 configured_data
-                 configured_id
-                 configured_status].freeze
+    class OnlineStatus
+      include Playbook::Props
 
-      def initialize(classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     status: default_configuration)
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_status = status
-      end
-
-      def status
-        status_options = %w[online offline away]
-        one_of_value(configured_status, status_options, "offline")
-      end
-
-      def kit_class
-        kit_options = [
-          "pb_online_status_kit",
-          status,
-        ]
-        kit_options.join("_")
-      end
-
-      def to_partial_path
-        "pb_online_status/online_status"
-      end
+      partial "pb_online_status/online_status"
 
-    private
+      prop :status, type: Playbook::Props::Enum,
+                  values: %w[online offline away],
+                  default: "offline"
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def classname
+        generate_classname("pb_online_status_kit", status)
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_person_contact/_person_contact.html.erb

@@ -1,12 +1,17 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_person_contact_kit")) do %>
-    <%= object.name %>
+    class: object.classname) do %>
+    <% object.people.each do |person| %>
+      <%= pb_rails("person", props: {
+          first_name: person[:first_name],
+          last_name: person[:last_name],
+      }) %>
+    <% end %>
     <% object.contacts.each do |contact| %>
       <%= pb_rails("contact", props: {
-        contact_type: contact[:contact_type],
-        contact_value: contact[:contact_value],
+          contact_type: contact[:contact_type],
+          contact_value: contact[:contact_value],
       }) %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -12,8 +12,7 @@ import {
 type PersonContactProps = {
   className?: String | Array<String>,
   dark?: Boolean,
-  firstName: String,
-  lastName: String,
+  people?: Array<{firstName: String, lastName: String}>,
   contacts?: Array<{contactType: String, contactValue: String}>,
 }
 
@@ -28,19 +27,30 @@ const contactsArray = ({contacts=[]}: PersonContactProps) => {
   })
 }
 
+const peopleArray = ({people=[]}: PersonContactProps) => {
+  return people.map((personObject, index) => {
+    return (
+      <Person
+        firstName={personObject.firstName}
+        lastName={personObject.lastName}
+      />
+    );
+  })
+}
+
 const PersonContact = ({
   className,
   dark=false,
-  firstName,
-  lastName,
+  people,
   contacts,
 }: PersonContactProps) => {
 
   const contactKits = contactsArray({contacts})
+  const personKits = peopleArray({people})
 
   return (
     <div className={classnames('pb_person_contact_kit', className)}>
-      <Person firstName={firstName} lastName={lastName} />
+      {personKits}
       {contactKits}
     </div>
   )