playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:false, borderless:true}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_dark.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:true, borderless:false}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:true, borderless:true}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: true, borderless: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:true, borderless:false, lg:true}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, lg: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:true, dark:true, borderless:false}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: true, dark: true, borderless: false}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:true, borderless:false, xpadding:true}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, xpadding: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_default.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:false, borderless:false}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_lg.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:false, borderless:false, lg:true}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, lg: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_ordered.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:true, dark:false, borderless:false}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: true, dark: false, borderless: false}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.html.erb

@@ -1,7 +1,7 @@
-<%= pb_rails("list", props: {ordered:false, dark:false, borderless:false, xpadding:true}) do %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
-  <%= pb_rails("list/item") %>
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.rb

@@ -1,33 +1,31 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbList
     class Item < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_data,
-          :configured_id,
-          :configured_text].freeze
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 block].freeze
 
       def initialize(classname: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   text: default_configuration)
+                     data: default_configuration,
+                     id: default_configuration,
+                     &block)
         self.configured_classname = classname
         self.configured_data = data
         self.configured_id = id
-        self.configured_text = text
-      end
-
-      def text
-        if configured_text == default_configuration
-          "List item"
-        else
-          configured_text
-        end
+        self.block = block_given? ? block : nil
       end
 
       def to_partial_path
         "pb_list/item"
       end
 
+      def yield(context:)
+        context.capture(&block)
+      end
+
     private
 
       DEFAULT = Object.new

data/app/pb_kits/playbook/pb_list/list.rb

@@ -1,27 +1,29 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbList
     class List < Playbook::PbKit::Base
-      PROPS = [:configured_borderless,
-          :configured_classname,
-          :configured_dark,
-          :configured_data,
-          :configured_id,
-          :configured_layout,
-          :configured_lg,
-          :configured_ordered,
-          :configured_xpadding,
-          :block].freeze
+      PROPS = %i[configured_borderless
+                 configured_classname
+                 configured_dark
+                 configured_data
+                 configured_id
+                 configured_layout
+                 configured_lg
+                 configured_ordered
+                 configured_xpadding
+                 block].freeze
 
       def initialize(borderless: default_configuration,
-                   classname: default_configuration,
-                   dark: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   layout: default_configuration,
-                   lg: default_configuration,
-                   ordered: default_configuration,
-                   xpadding: default_configuration,
-                   &block)
+                     classname: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     layout: default_configuration,
+                     lg: default_configuration,
+                     ordered: default_configuration,
+                     xpadding: default_configuration,
+                     &block)
         self.configured_borderless = borderless
         self.configured_classname = classname
         self.configured_dark = dark
@@ -34,7 +36,6 @@ module Playbook
         self.block = block_given? ? block : nil
       end
 
-
       def class
         if configured_class == default_configuration
           ""
@@ -46,25 +47,25 @@ module Playbook
       def dark
         if configured_dark == default_configuration
           ""
-        elsif(configured_dark == true)
-            "_dark"
+        elsif configured_dark == true
+          "_dark"
         end
       end
 
       def layout
         if configured_layout == default_configuration
           ""
-        elsif(configured_layout == "left")
-            "_layout_left"
-        elsif(configured_layout == "right")
-              "_layout_right"
+        elsif configured_layout == "left"
+          "_layout_left"
+        elsif configured_layout == "right"
+          "_layout_right"
         end
       end
 
       def lg
         if configured_lg == default_configuration
           ""
-        elsif(configured_lg == true)
+        elsif configured_lg == true
           "_lg"
         end
       end
@@ -80,8 +81,8 @@ module Playbook
       def xpadding
         if configured_xpadding == default_configuration
           ""
-        elsif(configured_xpadding == true)
-            "_xpadding"
+        elsif configured_xpadding == true
+          "_xpadding"
         end
       end
 

data/app/pb_kits/playbook/pb_message/_message.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+    <%= object.avatar %>
+    <div class="content_wrapper">
+      <%= object.label %>
+      <%= object.message %>
+      <%= object.timestamp %>
+    </div>
+<% end %>

data/app/pb_kits/playbook/pb_message/_message.jsx

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

data/app/pb_kits/playbook/pb_message/_message.scss

@@ -0,0 +1,5 @@
+@import "message_mixins";
+
+[class^=pb_message] {
+  @include pb_message;
+}

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -0,0 +1,24 @@
+@import "../tokens/spacing";
+
+@mixin pb_message {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .content_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
+
+    .message_text {
+      margin: 0 0 $space-xs/2;
+    }
+  }
+
+  &[class*=_avatar]  {
+    .content_wrapper {
+      margin-left: $space-sm;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("message", props: {
+  label: "Message",
+  message: "How can we assist you today?",
+  timestamp: "20 seconds ago",
+  avatar: {
+    name: "Mike Bishop",
+    image: { url: "https://randomuser.me/api/portraits/men/50.jpg" },
+    status: "online"
+  }
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "Support",
+  message: "We'll escalate this issue to a Senior Support agent.",
+  timestamp: "9 minutes ago",
+  avatar: {
+    name: "Wade Winningham",
+    image: { url: "https://randomuser.me/api/portraits/men/14.jpg" }
+  }
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  message: "To processs your order, I'll need your full name.",
+  timestamp: "4 hours ago",
+  avatar: {
+    name: "Lisa Thompson",
+    image: { url: "https://randomuser.me/api/portraits/women/39.jpg" }
+  }
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "Application",
+  message: "Application for Kate Smith is waiting for your approval",
+  avatar: {
+    name: "Becca Jacobs",
+    image: { url: "https://randomuser.me/api/portraits/women/50.jpg" }
+  }
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "Complaint",
+  message: "We're so sorry you had a bad experience!",
+  timestamp: "2 days ago",
+  avatar: {
+    name: "Tim Wenhold"
+  }
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  label: "Support",
+  message: "Please hold for one moment, I'll check with my manager.",
+  timestamp: "2 days ago"
+}) %>

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

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

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - message_default: Default
+  
+  
+  react:
+  - message_default: Default
+