playbook_ui 2.9.3 → 2.9.4

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.html.erb

@@ -1,6 +1,14 @@
 <%= pb_rails("person_contact", props: {
-  first_name: "Pauline",
-  last_name: "Smith",
+  people: [
+    {
+      first_name: "Pauline",
+      last_name: "Smith",
+    },
+    {
+      first_name: "Harvey",
+      last_name: "Walters"
+    }
+  ],
   contacts: [
     {
       contact_type: "email",

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx

@@ -1,14 +1,20 @@
 import React from "react"
 import {PersonContact} from "../../"
 
-
-
 function PersonContactDefault() {
   return (
     <div>
       <PersonContact
-        firstName="Pauline"
-        lastName="Smith"
+        people={[
+          {
+            firstName: "Pauline",
+            lastName: "Smith",
+          },
+          {
+            firstName: "Harvey",
+            lastName: "Walters"
+          }
+        ]}
         contacts={[
           {
             contactType: "email",

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_single_person.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("person_contact", props: {
+  people: [
+    {
+      first_name: "Harvey",
+      last_name: "Walters"
+    }
+  ],
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    },
+    {
+      contact_value: 5555555555,
+    },
+    {
+      contact_type: "work",
+      contact_value: "3245627482",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_single_person.jsx

@@ -0,0 +1,32 @@
+import React from "react"
+import {PersonContact} from "../../"
+
+function PersonContactSinglePerson() {
+  return (
+    <div>
+      <PersonContact
+        people={[
+          {
+            firstName: "Harvey",
+            lastName: "Walters"
+          }
+        ]}
+        contacts={[
+          {
+            contactType: "email",
+            contactValue: "email@example.com"
+          },
+          {
+            contactValue: "5555555555",
+          },
+          {
+            contactType: "work",
+            contactValue: "3245627482",
+          }
+        ]}
+      />
+    </div>
+  )
+}
+
+export default PersonContactSinglePerson;

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_three_people.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("person_contact", props: {
+  people: [
+    {
+      first_name: "Pauline",
+      last_name: "Smith",
+    },
+    {
+      first_name: "Harvey",
+      last_name: "Walters"
+    },
+    {
+      first_name: "Bart",
+      last_name: "Simpson"
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_three_people.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import {PersonContact} from "../../"
+
+function PersonContactThreePeople() {
+  return (
+    <div>
+      <PersonContact
+        people={[
+          {
+            firstName: "Pauline",
+            lastName: "Smith",
+          },
+          {
+            firstName: "Harvey",
+            lastName: "Walters"
+          },
+          {
+            firstName: "Bart",
+            lastName: "Simpson"
+          }
+        ]}
+        contacts={[
+          {
+            contactType: "work",
+            contactValue: "3245627482",
+          }
+        ]}
+      />
+    </div>
+  )
+}
+
+export default PersonContactThreePeople;

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

@@ -2,7 +2,11 @@ examples:
 
   rails:
   - person_contact_default: Default
+  - person_contact_single_person: One Person
+  - person_contact_three_people: Three People
 
 
   react:
   - person_contact_default: Default
+  - person_contact_single_person: One Person
+  - person_contact_three_people: Three People

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

@@ -1 +1,3 @@
 export {default as PersonContactDefault} from './_person_contact_default.jsx';
+export {default as PersonContactSinglePerson} from './_person_contact_single_person.jsx';
+export {default as PersonContactThreePeople} from './_person_contact_three_people.jsx';

data/app/pb_kits/playbook/pb_person_contact/person_contact.rb

@@ -2,54 +2,17 @@
 
 module Playbook
   module PbPersonContact
-    class PersonContact < Playbook::PbKit::Base
-      PROPS = %i[
-        configured_classname
-        configured_data
-        configured_id
-        configured_first_name
-        configured_last_name
-        configured_contacts
-      ].freeze
+    class PersonContact
+      include Playbook::Props
 
-      def initialize(
-        classname: default_configuration,
-        data: default_configuration,
-        id: default_configuration,
-        first_name: default_configuration,
-        last_name: default_configuration,
-        contacts: default_configuration
-       )
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_first_name = first_name
-        self.configured_last_name = last_name
-        self.configured_contacts = contacts
-      end
-
-
-      def name
-        person = Playbook::PbPerson::Person.new(first_name: configured_first_name, last_name: configured_last_name)
-        ApplicationController.renderer.render(partial: person, as: :object)
-      end
-
-      def contacts
-        configured_contacts if is_set? configured_contacts
-      end
-
-      def to_partial_path
-        "pb_person_contact/person_contact"
-      end
+      partial "pb_person_contact/person_contact"
 
-    private
+      prop :contacts, type: Playbook::Props::HashArray, default: []
+      prop :people, type: Playbook::Props::HashArray, default: []
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def classname
+        generate_classname("pb_person_contact_kit")
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_pill/_pill.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
-  <%= object.display_text %>
+    class: object.classname) do %>
+  <%= pb_rails("title", props: { text: object.display_text, size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_pill/pill.rb

@@ -2,59 +2,23 @@
 
 module Playbook
   module PbPill
-    class Pill < Playbook::PbKit::Base
-      PROPS = %i[configured_classname
-                 configured_data
-                 configured_id
-                 configured_text
-                 configured_variant].freeze
+    class Pill
+      include Playbook::Props
 
-      def initialize(classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     text: default_configuration,
-                     variant: default_configuration)
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_text = text
-        self.configured_variant = variant
-      end
-
-      def display_text
-        pb_text = Playbook::PbTitle::Title.new(size: 4, text: text, classname: "pb_pill_text")
-        ApplicationController.renderer.render(partial: pb_text, as: :object)
-      end
+      partial "pb_pill/pill"
 
-      def kit_class
-        kit_options = [
-          "pb_pill_kit",
-          variant,
-        ]
-        kit_options.join("_")
-      end
+      prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[success warning error info neutral],
+                     default: "neutral"
 
-      def to_partial_path
-        "pb_pill/pill"
+      def classname
+        generate_classname("pb_pill_kit", variant)
       end
 
-    private
-
-      def variant
-        variant_options = %w[success warning error info neutral]
-        one_of_value(configured_variant, variant_options, "neutral")
-      end
-
-      def text
-        default_value(configured_text.downcase, "")
-      end
-
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def display_text
+        text.downcase
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.html.erb

@@ -1,11 +1,11 @@
-<%= content_tag(:div, class: "pb__progress_simple_wrapper_#{object.align}") do %>
+<%= content_tag(:div, class: object.wrapper_classname) do %>
   <%= content_tag(:div,
   id: object.id,
-  data: object.data({value: object.number_value}),
-  class: object.classname(object.kit_class),
-  style: "width:#{object.width};") do %>
+  data: object.data_values,
+  class: object.classname,
+  style: object.style) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
-      style: "width:#{object.percent_value};") %>
+      style: object.value_style) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -3,7 +3,7 @@
 
 $pb_progress_simple_height: 4px;
 
-[class^=pb__progress_simple_wrapper] {
+[class^=pb_progress_simple_wrapper] {
   display: flex;
   justify-content: flex-start;
   align-items: center;

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -2,99 +2,97 @@
 
 module Playbook
   module PbProgressSimple
-    class ProgressSimple < Playbook::PbKit::Base
-      PROPS = %i[configured_align
-                 configured_classname
-                 configured_data
-                 configured_id
-                 configured_max
-                 configured_muted
-                 configured_percent
-                 configured_value
-                 configured_width].freeze
-
-      def initialize(align: default_configuration,
-                     classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     max: default_configuration,
-                     muted: default_configuration,
-                     percent: default_configuration,
-                     value: default_configuration,
-                     width: default_configuration)
-        self.configured_align = align
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_max = max
-        self.configured_muted = muted
-        self.configured_percent = percent
-        self.configured_value = value
-        self.configured_width = width
-      end
+    class ProgressSimple
+      include Playbook::Props
 
-      def width
-        default_value(configured_width, "100%")
-      end
+      class ProgressError < StandardError; end
+
+      partial "pb_progress_simple/progress_simple"
+
+      prop :align, type: Playbook::Props::Enum,
+           values: %w[left center right],
+           default: "left"
+      prop :value, type: Playbook::Props::Number
+      prop :max, type: Playbook::Props::Number
+      prop :muted, type: Playbook::Props::Boolean,
+           default: false
+      prop :percent, type: Playbook::Props::Percentage
+      # :width prop should not probably be a string type
+      # Should we be allowing the user to pass this value at all?
+      # could this possibly be [sm, md, lg]?
+      prop :width, default: "100%"
 
       def number_value
-        if is_set? configured_percent
+        validate_required_progress_props
+
+        if percent
+          validate_percent
+
           percent
         else
-          calc_value_from_max
+          validate_value_max
+
+          (value * 100) / max
         end
       end
 
-      def percent_value
-        format_percent(number_value)
+      def data_values
+        prop(:data).merge(value: number_value)
       end
 
-      def align
-        align_options = %w[left center right]
-        one_of_value(configured_align, align_options, "left")
+      def style
+        "width:#{width};"
       end
 
-      def kit_class
-        kit_options = [
-          "pb_progress_simple_kit",
-          muted,
-          align,
-        ]
-        kit_options.compact.join("_")
+      def value_style
+        "width:#{number_value}%;"
       end
 
-      def to_partial_path
-        "pb_progress_simple/progress_simple"
+      def wrapper_classname
+        "pb_progress_simple_wrapper_#{align}"
       end
 
-    private
-
-      def percent
-        default_value(configured_percent, 0)
+      def classname
+        generate_classname("pb_progress_simple_kit", muted_class, align)
       end
 
-      def format_percent(num)
-        "#{num}%"
+    private
+
+      def muted_class
+        muted ? "muted" : nil
       end
 
-      def calc_value_from_max
-        if is_set?(configured_value) && is_set?(configured_max)
-          (configured_value.to_i * 100) / configured_max.to_i
-        else
-          0
+      def validate_required_progress_props
+        unless percent || value || max
+          raise(
+            ProgressError,
+            "Pass `percent` or pass both `value` and `max` to this kit."
+          )
         end
       end
 
-      def muted
-        true_value(configured_muted, "muted", nil)
+      def validate_percent
+        if max || value
+          raise(
+            ConflictingPropsError,
+            "Do not use `value` or `max` props when passing `percent`"
+          )
+        end
       end
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def validate_value_max
+        if !value
+          raise(
+            MissingPropError,
+            "Must pass `value` when passing `max`"
+          )
+        elsif !max
+          raise(
+            MissingPropError,
+            "Must pass `max` when passing `value`"
+          )
+        end
       end
-      attr_accessor(*PROPS)
     end
   end
 end