playbook_ui 2.8.3 → 2.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88af885a58e4ee6538f8a527e4f69ae4c334cc66990c400b50833c0ac1ed4ebc
-  data.tar.gz: a7353385a886a78bf220c8b00392d70e302c5b5d2c483383ef27fdabf6d8abba
+  metadata.gz: 8103129ad1d322c76959bc5b98dbc4a3095e6ab93f8b6ce108c3397d99d3e7da
+  data.tar.gz: 39bfc2b2780273550f8ad5038e51f561d695fafecf2785a49631932c9ed06bb0
 SHA512:
-  metadata.gz: 2eba9841644ec01148f9e3ac33eb0d1188072b0a5d923824de41dc4c5cc5bc30b4b0a4302add5efff96077cfa51b54ec2a755c7c8dc91152f90a8cf0adc8c81b
-  data.tar.gz: 20ddce91e64c88df034ba328468bd660a77d1de6106b08ff060a92aa563159f70335305b2aefdf766a20755f747eded6896a75739879f1d7e9aa030dbfc0562d
+  metadata.gz: c1af634076f6e690736128754f66c197790f27a4db4b58f7afe0e8f3bb0e22e43b1c3f822fdbfb607466c47e7652a40c00319499146e6f6f06191e7029a30098
+  data.tar.gz: aee625c328eb90beec7784d2de3169da58c3ff6c73492e728a0bb605b06ba04a7e9eec1882468f19a7452723d8ad216a89d94baf5f01a0a5d51327a0846a731f

data/app/pb_kits/playbook/packs/examples.js

@@ -95,3 +95,18 @@ WebpackerReact.setup (Timestamp);
 
 import * as OnlineStatus from "pb_online_status/docs";
 WebpackerReact.setup (OnlineStatus);
+
+import * as LabelPill from "pb_label_pill/docs";
+WebpackerReact.setup (LabelPill);
+
+import * as Phone from "pb_phone/docs";
+WebpackerReact.setup (Phone);
+
+import * as OwnerPhone from "pb_owner_phone/docs";
+WebpackerReact.setup (OwnerPhone);
+
+import * as Owner from "pb_owner/docs";
+WebpackerReact.setup (Owner);
+
+import * as Toggle from "pb_toggle/docs";
+WebpackerReact.setup (Toggle);

data/app/pb_kits/playbook/packs/kits.js

@@ -27,3 +27,8 @@ import "./pb_label_value.js";
 import "./pb_message.js";
 import "./pb_timestamp.js";
 import "./pb_online_status.js";
+import "./pb_label_pill.js";
+import "./pb_phone.js";
+import "./pb_owner_phone.js";
+import "./pb_owner.js";
+import "./pb_toggle.js";

data/app/pb_kits/playbook/packs/pb_label_pill.js

@@ -0,0 +1,4 @@
+import LabelPill from "pb_label_pill/_label_pill.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ LabelPill });

data/app/pb_kits/playbook/packs/pb_owner.js

@@ -0,0 +1,4 @@
+import Owner from "pb_owner/_owner.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Owner });

data/app/pb_kits/playbook/packs/pb_owner_phone.js

@@ -0,0 +1,4 @@
+import OwnerPhone from "pb_owner_phone/_owner_phone.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ OwnerPhone });

data/app/pb_kits/playbook/packs/pb_phone.js

@@ -0,0 +1,4 @@
+import Phone from "pb_phone/_phone.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Phone });

data/app/pb_kits/playbook/packs/pb_toggle.js

@@ -0,0 +1,4 @@
+import Toggle from "pb_toggle/_toggle.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Toggle });

data/app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss

@@ -29,3 +29,8 @@
 @import '../../pb_message/message';
 @import '../../pb_timestamp/timestamp';
 @import '../../pb_online_status/online_status';
+@import '../../pb_label_pill/label_pill';
+@import '../../pb_phone/phone';
+@import '../../pb_owner_phone/owner_phone';
+@import '../../pb_owner/owner';
+@import '../../pb_toggle/toggle';

data/app/pb_kits/playbook/pb_label_pill/_label_pill.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_label_pill")) do %>
+  <%= object.label %>
+  <%= object.pill %>
+<% end %>

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

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

data/app/pb_kits/playbook/pb_label_pill/_label_pill.scss

@@ -0,0 +1,11 @@
+@import "../pb_caption/caption";
+@import "../pb_pill/pill";
+
+.pb_label_pill {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  &_label {
+    margin-right: $space-xs;
+  }
+}

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("label_pill", props: {
+  label: "Service Needed",
+  pill_value: "76",
+}) %>
+
+<%= pb_rails("label_pill", props: {
+  label: "Waiting",
+  pill_value: "69",
+  variant: "success"
+}) %>
+
+<%= pb_rails("label_pill", props: {
+  label: "In Service",
+  pill_value: "28",
+  variant: "error"
+}) %>
+
+<%= pb_rails("label_pill", props: {
+  label: "Fully Serviced",
+  pill_value: "198",
+  variant: "warning"
+}) %>
+
+<%= pb_rails("label_pill", props: {
+  label: "Inbox",
+  pill_value: "198",
+  variant: "info"
+}) %>
+
+<%= pb_rails("label_pill", props: {
+  label: "Outbox",
+  pill_value: "198",
+  variant: "neutral"
+}) %>

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx

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

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

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

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

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

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

@@ -0,0 +1,58 @@
+module Playbook
+  module PbLabelPill
+    class LabelPill < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+					:configured_data,
+					:configured_id,
+          :configured_label,
+          :configured_pill_value,
+          :configured_variant].freeze
+
+      def initialize(classname: default_configuration,
+							data: default_configuration,
+							id: default_configuration,
+              label: default_configuration,
+              pill_value: default_configuration,
+              variant: default_configuration
+              )
+        self.configured_classname = classname
+				self.configured_data = data
+				self.configured_id = id
+        self.configured_label = label
+        self.configured_pill_value = pill_value
+        self.configured_variant = variant
+      end
+
+      def label
+        if is_set? configured_label
+          pb_caption = Playbook::PbCaption::Caption.new(text: configured_label, classname: "pb_label_pill_label")
+        ApplicationController.renderer.render(partial: pb_caption, as: :object)
+        end
+      end
+
+      def pill
+        if is_set? configured_pill_value
+          pb_pill = Playbook::PbPill::Pill.new(text: configured_pill_value, variant: variant, classname: "pb_label_pill_pill")
+        ApplicationController.renderer.render(partial: pb_pill, as: :object)
+        end
+      end
+
+      def variant
+        default_value(configured_variant, "")
+      end
+
+      def to_partial_path
+        "pb_label_pill/label_pill"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_list/_list.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    class: "pb_list#{object.xpadding}#{object.borderless}#{object.dark}#{object.lg}#{object.layout}") do %>
+    class: "pb_list#{object.xpadding}#{object.borderless}#{object.dark}#{object.size}#{object.layout}") do %>
     <%= content_tag(:"#{object.ordered}",
       id: object.id,
       data: object.data,

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 const propTypes = {
   dark:PropTypes.bool,
   borderless:PropTypes.bool,
-  size:PropTypes.bool,
+  size:PropTypes.oneOf(["", "large"]),
   ordered:PropTypes.bool,
   layout: PropTypes.oneOf(["", "left", "right"]),
   xpadding:PropTypes.bool,
@@ -17,7 +17,7 @@ const propTypes = {
 const defaultProps = {
   dark:false,
   borderless:false,
-  size:false,
+  size:"",
   ordered:false,
   layout:"",
   xpadding:false
@@ -36,7 +36,7 @@ class List extends Component {
     } = this.props;
     const dark_class = dark === true ? "_dark" : ""
     const borderless_class = borderless === true ? "list_borderless" : ""
-    const size_class = size === true ? "_lg" : ""
+    const size_class = "_" + size
     const ordered_class = ordered === true ? "_ordered" : ""
     const layout_class = "_"+ layout
     const xpadding_class = xpadding === true ? "_xpadding" : ""

data/app/pb_kits/playbook/pb_list/_list.scss

@@ -9,7 +9,7 @@
     @include pb_list_dark;
   }
 
-  &[class*=_lg] li {
+  &[class*=_large] li {
     @include pb_list_large;
   }
 

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

@@ -1,4 +1,4 @@
-<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, lg: true}) do %>
+<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, size: "large"}) 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 %>

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

@@ -1,4 +1,4 @@
-<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, lg: true}) do %>
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, size: "large"}) 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 %>

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

@@ -9,7 +9,7 @@ module Playbook
                  configured_data
                  configured_id
                  configured_layout
-                 configured_lg
+                 configured_size
                  configured_ordered
                  configured_xpadding
                  block].freeze
@@ -20,7 +20,7 @@ module Playbook
                      data: default_configuration,
                      id: default_configuration,
                      layout: default_configuration,
-                     lg: default_configuration,
+                     size: default_configuration,
                      ordered: default_configuration,
                      xpadding: default_configuration,
                      &block)
@@ -30,7 +30,7 @@ module Playbook
         self.configured_data = data
         self.configured_id = id
         self.configured_layout = layout
-        self.configured_lg = lg
+        self.configured_size = size
         self.configured_ordered = ordered
         self.configured_xpadding = xpadding
         self.block = block_given? ? block : nil
@@ -62,11 +62,12 @@ module Playbook
         end
       end
 
-      def lg
-        if configured_lg == default_configuration
+      def size
+        case configured_size
+        when default_configuration
           ""
-        elsif configured_lg == true
-          "_lg"
+        when "large"
+          "_large"
         end
       end
 

data/app/pb_kits/playbook/pb_owner/_owner.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_owner")) do %>
+      <%= object.first_name %>
+      <%= object.last_name %>
+<% end %>

data/app/pb_kits/playbook/pb_owner/_owner.jsx

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

data/app/pb_kits/playbook/pb_owner/_owner.scss

@@ -0,0 +1,11 @@
+@import "../pb_title/title";
+@import "../pb_body/body";
+@import "../tokens/spacing";
+
+ .pb_owner {
+  display: flex;
+  align-items: baseline;
+  &_first {
+    margin: 0 ($space_xs - 4px) 0 0;
+  }
+}

data/app/pb_kits/playbook/pb_owner/docs/_owner_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("owner", props: { first_name: "Kyle", last_name: "Fadigan" }) %>

data/app/pb_kits/playbook/pb_owner/docs/_owner_default.jsx

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

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

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

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

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

data/app/pb_kits/playbook/pb_owner/owner.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbOwner
+    class Owner < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+               :configured_data,
+               :configured_id,
+               :configured_first_name,
+               :configured_last_name].freeze
+
+       def initialize(classname: default_configuration,
+							data: default_configuration,
+							id: default_configuration,
+              first_name: default_configuration,
+              last_name: 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
+      end
+
+       def first_name
+        pb_first_name = Playbook::PbBody::Body.new(classname: "pb_owner_first") do
+          default_value(configured_first_name, "")
+        end
+        ApplicationController.renderer.render(partial: pb_first_name, as: :object)
+      end
+
+       def last_name
+        if is_set? configured_last_name
+          pb_last_name = Playbook::PbTitle::Title.new(text: configured_last_name, size: 4)
+          ApplicationController.renderer.render(partial: pb_last_name, as: :object)
+        end
+      end
+
+       def to_partial_path
+        "pb_owner/owner"
+      end
+
+     private
+
+       DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_owner_phone/_owner_phone.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_owner_phone")) do %>
+    <%= object.name %>
+    <%= object.phone %>
+<% end %>

data/app/pb_kits/playbook/pb_owner_phone/_owner_phone.jsx

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

data/app/pb_kits/playbook/pb_owner_phone/_owner_phone.scss

@@ -0,0 +1,9 @@
+@import "../tokens/spacing";
+
+.pb_owner_phone {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+
+}

data/app/pb_kits/playbook/pb_owner_phone/docs/_owner_phone_default.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("owner_phone", props: {
+  icon: "mobile",
+  first_name: "Pauline",
+  last_name: "Smith",
+  number: "(610) 234-5678"
+}) %>

data/app/pb_kits/playbook/pb_owner_phone/docs/_owner_phone_default.jsx

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

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

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

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

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

data/app/pb_kits/playbook/pb_owner_phone/owner_phone.rb

@@ -0,0 +1,64 @@
+module Playbook
+  module PbOwnerPhone
+    class OwnerPhone < Playbook::PbKit::Base
+      PROPS = [:configured_classname,
+					:configured_data,
+					:configured_id,
+          :configured_first_name,
+          :configured_last_name,
+          :configured_number,
+          :configured_icon].freeze
+
+      def initialize(classname: default_configuration,
+							data: default_configuration,
+							id: default_configuration,
+              first_name: default_configuration,
+              last_name: default_configuration,
+              number: default_configuration,
+              icon: 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_number = number
+        self.configured_icon = icon
+      end
+
+      def icon
+        if is_set? configured_icon
+          configured_icon
+        end
+      end
+
+      def phone
+        phone = Playbook::PbPhone::Phone.new({ icon: configured_icon, number: configured_number })
+        ApplicationController.renderer.render(partial: phone, as: :object)
+      end
+
+      def name
+        owner = Playbook::PbOwner::Owner.new({ first_name: configured_first_name, last_name: configured_last_name })
+        ApplicationController.renderer.render(partial: owner, as: :object)
+      end
+
+      def number
+        if is_set? configured_number
+          configured_number
+        end
+      end
+
+      def to_partial_path
+        "pb_owner_phone/owner_phone"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

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

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

data/app/pb_kits/playbook/pb_phone/_phone.jsx

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

data/app/pb_kits/playbook/pb_phone/_phone.scss

@@ -0,0 +1,2 @@
+@import "../pb_body/body";
+@import "../pb_icon/icon";

data/app/pb_kits/playbook/pb_phone/docs/_phone_default.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone", props: {
+  icon: "mobile-android",
+  number: 3491859988
+}) %>