playbook_ui 2.7.2 → 2.8.1

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

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

data/app/pb_kits/playbook/pb_message/message.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbMessage
+    class Message < Playbook::PbKit::Base
+      PROPS = %i[configured_avatar
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_label
+                 configured_message
+                 configured_timestamp].freeze
+
+      def initialize(avatar: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     label: default_configuration,
+                     message: default_configuration,
+                     timestamp: default_configuration)
+        self.configured_avatar = avatar
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_label = label
+        self.configured_message = message
+        self.configured_timestamp = timestamp
+      end
+
+      def avatar
+        if is_set? configured_avatar
+          configured_avatar[:size] = "sm"
+          pb_avatar = Playbook::PbAvatar::Avatar.new(configured_avatar)
+          ApplicationController.renderer.render(partial: pb_avatar, as: :object)
+        end
+      end
+
+      def avatar_class
+        "avatar" if is_set? configured_avatar
+      end
+
+      def label
+        if is_set? configured_label
+          caption_props = { text: configured_label }
+          pb_label = Playbook::PbCaption::Caption.new(caption_props)
+          ApplicationController.renderer.render(partial: pb_label, as: :object)
+        end
+      end
+
+      def message
+        if is_set? configured_message
+          pb_message = Playbook::PbBody::Body.new(classname: "message_text") do
+            configured_message
+          end
+          ApplicationController.renderer.render(partial: pb_message, as: :object)
+        end
+      end
+
+      def timestamp
+        if is_set? configured_timestamp
+          timestamp_props = { text: configured_timestamp }
+          pb_timestamp = Playbook::PbTimestamp::Timestamp.new(timestamp_props)
+          ApplicationController.renderer.render(partial: pb_timestamp, as: :object)
+        end
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_message",
+          avatar_class,
+        ]
+        kit_options.compact.join("_")
+      end
+
+      def to_partial_path
+        "pb_message/message"
+      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_online_status/_online_status.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+<% end %>

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

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

data/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -0,0 +1,20 @@
+@import "online_status_mixins";
+
+[class^=pb_online_status] {
+  @include pb_online_status;
+
+  @each $status_name, $status_value in $pb_online_status_statuses {
+    &[class*=_#{$status_name}]  {
+      background: $status_value;
+    }
+  }
+  &[class*=_online]  {
+    @include pb_online_status_online;
+  }
+  &[class*=_away]  {
+    @include pb_online_status_away;
+  }
+  &[class*=_offline]  {
+    @include pb_online_status_offline;
+  }
+}

data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss

@@ -0,0 +1,35 @@
+@import "../tokens/colors";
+
+$pb_online_status_size: 10px;
+$pb_online_status_border: 2px;
+
+$pb_online_status_statuses: (
+  online: $success,
+  away: $warning,
+  offline: $neutral,
+);
+
+@mixin pb_online_status($background: $neutral, $bordercolor: $white) {
+  width: $pb_online_status_size;
+  height: $pb_online_status_size;
+  flex-basis: $pb_online_status_size;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-width: $pb_online_status_border;
+  border-color: $bordercolor;
+  border-style: solid;
+  border-radius: 50%;
+  background: $background;
+}
+
+@mixin pb_online_status_away {
+  @include pb_online_status($warning);
+}
+
+@mixin pb_online_status_online {
+  @include pb_online_status($success);
+}
+
+@mixin pb_online_status_offline {
+  @include pb_online_status($neutral);
+}

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("online_status", props: { status: "offline" }) %>
+
+<br>
+
+<%= pb_rails("online_status", props: { status: "online" }) %>
+
+<br>
+
+<%= pb_rails("online_status", props: { status: "away" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

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

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

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

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

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

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbOnlineStatus
+    class OnlineStatus < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_status].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     status: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_status = status
+      end
+
+      def status
+        status_options = %w[online offline away]
+        one_of_value(configured_status, status_options, "offline")
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_online_status",
+          status,
+        ]
+        kit_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_online_status/online_status"
+      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_pill/_pill.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <%= object.display_text %>
+<% end %>

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

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

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

@@ -0,0 +1,24 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+$pb_pill_height: 22px;
+
+[class^=pb_pill] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 $space-sm/1.8;
+  height: $pb_pill_height;
+  border-radius: $pb_pill_height/2;
+
+  @each $color_name, $color_value in $status_color_text {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity-1);
+
+      [class^=pb_body] {
+        color: $color_value !important;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb

@@ -0,0 +1,38 @@
+<%= pb_rails("pill", props: {
+  text: "Default"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  text: "success",
+  variant: "success"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  text: "error",
+  variant: "error"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  text: "warning",
+  variant: "warning"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  text: "info",
+  variant: "info"
+}) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  text: "neutral",
+  variant: "neutral"
+}) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

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

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

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

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

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

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

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPill
+    class Pill < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_text
+                 configured_variant].freeze
+
+      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::PbBody::Body.new do
+          text
+        end
+        ApplicationController.renderer.render(partial: pb_text, as: :object)
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_pill",
+          variant,
+        ]
+        kit_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_pill/pill"
+      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
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end