playbook_ui 2.8.4 → 2.8.5

data/app/pb_kits/playbook/pb_phone/_phone.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_phone")) do %>
+    class: object.classname("pb_phone_kit")) do %>
   <span><%= object.value %></span>
 <% end %>

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -1,10 +1,11 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
+@import "../pb_body/body";
 
 $pb_pill_height: 22px;
 
-[class^=pb_pill] {
+[class^=pb_pill_kit] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -16,7 +17,7 @@ $pb_pill_height: 22px;
     &[class*=_#{$color_name}]  {
       background: rgba($color_value, $opacity-1);
 
-      [class^=pb_body] {
+      [class^=pb_body_kit] {
         color: $color_value !important;
       }
     }

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

@@ -22,7 +22,7 @@ module Playbook
       end
 
       def display_text
-        pb_text = Playbook::PbBody::Body.new do
+        pb_text = Playbook::PbBody::Body.new(tag: "span") do
           text
         end
         ApplicationController.renderer.render(partial: pb_text, as: :object)
@@ -30,7 +30,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_pill",
+          "pb_pill_kit",
           variant,
         ]
         kit_options.join("_")

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

@@ -17,7 +17,7 @@ $pb_progress_simple_height: 4px;
   }
 }
 
-[class^=pb_progress_simple] {
+[class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
   border-radius: $pb_progress_simple_height/2;

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

@@ -56,7 +56,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_progress_simple",
+          "pb_progress_simple_kit",
           muted,
           align,
         ]

data/app/pb_kits/playbook/pb_source/_source.html.erb

@@ -0,0 +1,18 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_source")) do %>
+  <div class="pb__source_layout">
+    <% if object.hide_icon == false %>
+      <%= object.type_icon %>
+      <%= object.avatar %>
+    <% end %>
+    <div class="pb__source_content">
+      <%= object.source %>
+      <div class="pb__source_value">
+        <%= object.type_text %>
+        <%= object.user_id %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_source/_source.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class Source extends React.Component {
+  render() {
+    return (
+      <div className="pb_source">
+        <span>SOURCE CONTENT</span>
+      </div>
+    )
+  }
+}
+
+Source.propTypes = propTypes;
+
+export default Source;

data/app/pb_kits/playbook/pb_source/_source.scss

@@ -0,0 +1,29 @@
+@import "../tokens/spacing";
+
+[class^=pb_source] {
+  [class^=pb__source_layout] {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  [class^=pb_icon_circle],
+  [class^=pb_avatar] {
+    margin-right: $space-sm;
+  }
+
+  [class^=pb__source_content] {
+    display: block;
+    flex-grow: 1;
+
+    [class^=pb__source_value] {
+      display: flex;
+      justify-content: flex-start;
+      align-items: baseline;
+
+      [class^=pb_body] {
+        margin-right: $space-xs;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_source/docs/_source_default.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "retail"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Referral-phrg",
+  type: "inbound"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Future CB",
+  type: "user",
+  user: {
+    name: "Anna Black",
+    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    user_id: "48582"
+  }
+}) %>

data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import Source from "../_source.jsx"
+
+function SourceDefault() {
+  return (
+    <div>
+      <Source />
+    </div>
+  )
+}
+
+export default SourceDefault;

data/app/pb_kits/playbook/pb_source/docs/_source_noicon.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "retail",
+  hide_icon: true
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Referral-phrg",
+  type: "inbound",
+  hide_icon: true
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Future CB",
+  type: "user",
+  user: {
+    name: "Anna Black",
+    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    user_id: "48582"
+  },
+  hide_icon: true
+}) %>

data/app/pb_kits/playbook/pb_source/docs/_source_types.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "retail"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Referral-phrg",
+  type: "inbound"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "B.B.B. Outbound",
+  type: "outbound"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Contractor.com",
+  type: "prospecting"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Beards, Beers and Brats",
+  type: "events"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Johnston-208",
+  type: "referral"
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "Employee Referral",
+  type: "referral",
+  user: {
+    name: "Anna Black",
+    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    user_id: "48582"
+  }
+}) %>
+
+<br><br>
+
+<%= pb_rails("source", props: {
+  source: "BJ's Future CB",
+  type: "user",
+  user: {
+    name: "Anna Black",
+    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
+    user_id: "48582"
+  }
+}) %>

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

@@ -0,0 +1,10 @@
+examples:
+
+  rails:
+  - source_default: Default
+  - source_noicon: Hide Icon
+  - source_types: Source Types
+
+
+  react:
+  - source_default: Default

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

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

data/app/pb_kits/playbook/pb_source/source.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSource
+    class Source < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_hide_icon
+                 configured_id
+                 configured_source
+                 configured_type
+                 configured_user].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     hide_icon: default_configuration,
+                     id: default_configuration,
+                     source: default_configuration,
+                     type: default_configuration,
+                     user: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_hide_icon = hide_icon
+        self.configured_id = id
+        self.configured_source = source
+        self.configured_type = type
+        self.configured_user = user
+      end
+
+      def source
+        pb_source_title = Playbook::PbTitle::Title.new(size: 4, text: configured_source)
+        ApplicationController.renderer.render(partial: pb_source_title, as: :object)
+      end
+
+      def type_text
+        pb_type = Playbook::PbBody::Body.new(color: "light") do
+          if type == "user" || (type == "referral" && is_set?(configured_user))
+            configured_user[:name]
+          else
+            type.titleize
+          end
+        end
+        ApplicationController.renderer.render(partial: pb_type, as: :object)
+      end
+
+      def type_icon
+        if !type_icon_name.nil? && avatar.nil?
+          pb_type_icon = Playbook::PbIconCircle::IconCircle.new(icon: type_icon_name, size: "sm")
+          ApplicationController.renderer.render(partial: pb_type_icon, as: :object)
+        end
+      end
+
+      def avatar
+        if is_set?(configured_user) && (type == "user" || type == "referral")
+          avatar_props = configured_user.clone
+          avatar_props[:size] = "sm"
+          avatar_props.delete(:user_id)
+          pb_avatar = Playbook::PbAvatar::Avatar.new(avatar_props)
+          ApplicationController.renderer.render(partial: pb_avatar, as: :object)
+        end
+      end
+
+      def user_id
+        if is_set?(configured_user) && configured_user[:user_id].present?
+          pb_user_id = Playbook::PbCaption::Caption.new(text: configured_user[:user_id])
+          ApplicationController.renderer.render(partial: pb_user_id, as: :object)
+        end
+      end
+
+      def hide_icon
+        is_true? configured_hide_icon
+      end
+
+      def to_partial_path
+        "pb_source/source"
+      end
+
+    private
+
+      def type_icon_name
+        case type
+        when "retail"
+          "shopping-bag"
+        when "inbound"
+          "sign-in"
+        when "outbound"
+          "sign-out"
+        when "prospecting"
+          "binoculars"
+        when "events"
+          "calendar-alt"
+        when "referral"
+          "handshake"
+        end
+      end
+
+      def type
+        type_options = %w[user retail inbound outbound prospecting events referral]
+        one_of_value(configured_type, type_options, "inbound")
+      end
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -6,7 +6,7 @@ $pb_star_rating_number_width: 30px;
 $pb_star_rating_wrapper_width: 150px;
 $pb_star_rating_height: 26px;
 
-[class^=pb_star_rating] {
+[class^=pb_star_rating_kit] {
   position: relative;
   display: inline-flex;
   justify-content: flex-start;

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -43,7 +43,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_star_rating",
+          "pb_star_rating_kit",
           hide_rating,
         ]
         kit_options.compact.join("_")

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -1,12 +1,15 @@
 @import "../tokens/colors";
 @import "../tokens/typography";
+@import "../pb_icon/icon";
+@import "../pb_body/body";
+@import "../pb_title/title";
 
-[class^=pb_time] {
+[class^=pb_time_kit] {
   [class^=pb_body] {
     font-weight: $bold !important;
   }
 
-  [class^=pb__time_timezone] {
+  [class^=pb_time_timezone] {
     font-size: $font-small;
     font-weight: $regular;
     color: $text-lt-light;
@@ -17,7 +20,7 @@
   }
 
   &[class*=_lg] {
-    [class^=pb__time_timezone] {
+    [class^=pb_time_timezone] {
       font-size: $font-large !important;
       color: $text-lt-light;
     }