playbook_ui 2.9.2 → 2.9.3

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

@@ -0,0 +1,18 @@
+<%= pb_rails("contact", props: {
+  contact_type: "cell",
+  contact_value: "349-185-9988",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_value: 5555555555,
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "email",
+  contact_value: "email@example.com",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "work",
+  contact_value: "3245627482",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -0,0 +1,26 @@
+import React from "react"
+import {Contact} from "../../"
+
+function ContactDefault() {
+  return (
+    <div>
+      <Contact
+        contactType="cell"
+        contactValue="349-185-9988"
+      />
+      <Contact
+        contactValue="5555555555"
+      />
+      <Contact
+        contactType="email"
+        contactValue="email@example.com"
+      />
+      <Contact
+        contactType="work"
+        contactValue="3245627482"
+      />
+    </div>
+  )
+}
+
+export default ContactDefault

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

@@ -0,0 +1,8 @@
+examples:
+
+  rails:
+  - contact_default: Default
+
+
+  react:
+  - contact_default: Default

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

@@ -0,0 +1 @@
+export {default as ContactDefault} from './_contact_default.jsx';

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,21 +1,21 @@
 import colors from "../tokens/_colors.scss"
 import typography from "../tokens/_typography.scss";
 
-const applyCustomSeriesColors = function(highchart) {
-  const data_colors = [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7
-  ];
+const dataColors = [
+  colors.data_1,
+  colors.data_2,
+  colors.data_3,
+  colors.data_4,
+  colors.data_5,
+  colors.data_6,
+  colors.data_7,
+  colors.data_8,
+]
 
+const applyCustomSeriesColors = function(highchart) {
   highchart.series.forEach(function(item, index) {
-    const selected_color = data_colors[index];
+    const selected_color = dataColors[index];
     item.color = selected_color;
-
     item.data.forEach(function(data_item) {
       if(data_item.color){
         data_item.color = selected_color;
@@ -98,4 +98,7 @@ const commonSettings = function(highchart) {
   styleLegend(highchart);
 };
 
-export default commonSettings;
+export {
+  commonSettings,
+  dataColors,
+}

data/app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb

@@ -1,10 +1,10 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
+    class: object.classname) do %>
 
   <%= link_to object.url do %>
-    <%= object.hashtag %>
+    <%= pb_rails("badge", props: { variant: "primary", text: object.hashtag_text }) %>
   <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -2,75 +2,36 @@
 
 module Playbook
   module PbHashtag
-    class Hashtag < Playbook::PbKit::Base
-      PROPS = %i[configured_classname
-                 configured_data
-                 configured_id
-                 configured_text
-                 configured_type
-                 configured_url].freeze
+    class Hashtag
+      include Playbook::Props
 
-      def initialize(classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     text: default_configuration,
-                     type: default_configuration,
-                     url: default_configuration)
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_text = text
-        self.configured_type = type
-        self.configured_url = url
-      end
-
-      def type
-        type_options = %w[default project home]
-        set_type = one_of_value(configured_type, type_options, "default")
-        if set_type === "home"
-          "H#"
-        elsif set_type === "project"
-          "P#"
-        else
-          "#"
-        end
-      end
+      partial "pb_hashtag/hashtag"
 
-      def hashtag
-        pb_hashtag = Playbook::PbBadge::Badge.new(text: hashtag_value, variant: "primary")
-        ApplicationController.renderer.render(partial: pb_hashtag, as: :object)
-      end
+      prop :text
+      prop :type, type: Playbook::Props::Enum,
+                  values: %w[default project home],
+                  default: "default"
+      prop :url
 
-      def hashtag_value
-        text = default_value(configured_text, "")
-        type + text
+      def classname
+        generate_classname("pb_hastag_kit")
       end
 
-      def url
-        default_value(configured_url, "")
-      end
-
-      def kit_class
-        kit_options = [
-          "pb_hashtag_kit",
-          type,
-        ]
-        kit_options.join("_")
-      end
-
-
-      def to_partial_path
-        "pb_hashtag/hashtag"
+      def hashtag_text
+        type_text + text
       end
 
     private
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def type_text
+        if type === "home"
+          "H#"
+        elsif type === "project"
+          "P#"
+        else
+          "#"
+        end
       end
-      attr_accessor(*PROPS)
     end
   end
 end

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

@@ -1,17 +1,17 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(["pb_home_address_street", object.dark ? "dark" : nil].compact.join("_"))) do %>
+    class: object.classname) do %>
 
   <%= pb_rails "title", props: {
     classname: "pb_home_address_street_address",
     size: 4,
-    text: "#{object.address} \u00b7 #{object.house_style}"
+    text: object.address_house_style
   } %>
 
   <%= pb_rails "body", props: {
     color: "light",
-    text: "#{object.city}, #{object.state}",
+    text: object.city_state,
   } %>
 
   <%= pb_rails "body", props: { classname: "home-hashtag", tag: "span" } do %>

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

@@ -2,79 +2,36 @@
 
 module Playbook
   module PbHomeAddressStreet
-    class HomeAddressStreet < Playbook::PbKit::Base
-      PROPS = %i[configured_address
-                 configured_city
-                 configured_classname
-                 configured_dark
-                 configured_data
-                 configured_home_id
-                 configured_house_style
-                 configured_id
-                 configured_state
-                 configured_zipcode].freeze
+    class HomeAddressStreet
+      include Playbook::Props
 
-      def initialize(address: default_configuration,
-                     city: default_configuration,
-                     classname: default_configuration,
-                     dark: default_configuration,
-                     data: default_configuration,
-                     home_id: default_configuration,
-                     house_style: default_configuration,
-                     id: default_configuration,
-                     state: default_configuration,
-                     zipcode: default_configuration)
-        self.configured_address = address
-        self.configured_city = city
-        self.configured_classname = classname
-        self.configured_dark = dark
-        self.configured_data = data
-        self.configured_home_id = home_id
-        self.configured_house_style = house_style
-        self.configured_state = state
-        self.configured_zipcode = zipcode
-      end
-
-      def address
-        default_value(configured_address, "")
-      end
-
-      def city
-        default_value(configured_city, "")
-      end
+      partial "pb_home_address_street/home_address_street"
 
-      def dark
-        true_value(configured_dark, true, false)
-      end
-
-      def home_id
-        default_value(configured_home_id, "")
-      end
-
-      def house_style
-        default_value(configured_house_style, "")
-      end
+      prop :address
+      prop :city
+      prop :home_id, type: Playbook::Props::Number
+      prop :house_style
+      prop :state
+      prop :zipcode
+      prop :dark, type: Playbook::Props::Boolean, default: false
 
-      def state
-        default_value(configured_state, "")
+      def classname
+        generate_classname("pb_home_address_street_kit", dark_class)
       end
 
-      def zipcode
-        default_value(configured_zipcode, "")
+      def city_state
+        "#{city}, #{state}"
       end
 
-      def to_partial_path
-        "pb_home_address_street/home_address_street"
+      def address_house_style
+        "#{address} \u00b7 #{house_style}"
       end
 
     private
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def dark_class
+        dark ? "dark" : nil
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_input/_input.html.erb

@@ -8,7 +8,7 @@
     <%= tag(:input,
         id: object.id,
         data: object.data,
-        class: object.classname("input_field"),
+        class: object.classname,
         name: object.name,
         placeholder: object.placeholder,
         type: object.type,

data/app/pb_kits/playbook/pb_input/_input.jsx

@@ -31,12 +31,12 @@ class Input extends React.Component {
     } = this.props
 
     const css = classnames([
-      `input_field`,
+      `pb_input_kit`,
       className,
     ])
 
     return (
-      <div className="pb_input">
+      <div className="pb_input_kit">
         <Caption text={label} />
         <div className="input_wrapper">
           <input className={css}

data/app/pb_kits/playbook/pb_input/_input.scss

@@ -10,7 +10,7 @@
     margin-bottom: 1rem;
   }
 
-  .input_field {
+  .pb_input_kit {
     border: 1px solid $border-light;
     border-radius: $border-rad-light;
     display: block;

data/app/pb_kits/playbook/pb_input/input.rb

@@ -2,89 +2,20 @@
 
 module Playbook
   module PbInput
-    class Input < Playbook::PbKit::Base
-      PROPS = %i[configured_aria
-                 configured_classname
-                 configured_data
-                 configured_id
-                 configured_name
-                 configured_label
-                 configured_placeholder
-                 configured_type
-                 configured_value].freeze
+    class Input
+      include Playbook::Props
 
-      def initialize(aria: default_configuration,
-                     classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     name: default_configuration,
-                     label: default_configuration,
-                     placeholder: default_configuration,
-                     type: default_configuration,
-                     value: default_configuration)
-        self.configured_aria = aria
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_name = name
-        self.configured_label = label
-        self.configured_placeholder = placeholder
-        self.configured_type = type
-        self.configured_value = value
-      end
-
-      def label
-        if configured_label == default_configuration
-          ""
-        else
-          configured_label
-        end
-      end
-
-      def name
-        if configured_name == default_configuration
-          ""
-        else
-          configured_name
-        end
-      end
-
-      def placeholder
-        if configured_placeholder == default_configuration
-          ""
-        else
-          configured_placeholder
-        end
-      end
-
-      def type
-        if configured_type == default_configuration
-          "text"
-        else
-          configured_type
-        end
-      end
-
-      def value
-        if configured_value == default_configuration
-          ""
-        else
-          configured_value
-        end
-      end
-
-      def to_partial_path
-        "pb_input/input"
-      end
+      partial "pb_input/input"
 
-    private
+      prop :label
+      prop :name
+      prop :placeholder
+      prop :value
+      prop :type, default: "text"
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def classname
+        generate_classname("pb_input_kit")
       end
-      attr_accessor(*PROPS)
     end
   end
 end