playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -1,68 +1,65 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbAvatar
     class Avatar < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-            :configured_data,
-            :configured_id,
-            :configured_name,
-            :configured_size,
-            :configured_text,
-            :configured_url].freeze
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_image
+                 configured_name
+                 configured_size
+                 configured_status].freeze
 
-      def initialize(classname: default_configuration,
-                    data: default_configuration,
-                    id: default_configuration,
-                    name: default_configuration,
-                    size: default_configuration,
-                    text: default_configuration,
-                    url: default_configuration)
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     image: default_configuration,
+                     name: default_configuration,
+                     size: default_configuration,
+                     status: default_configuration)
+        self.configured_aria = aria
         self.configured_classname = classname
         self.configured_data = data
         self.configured_id = id
+        self.configured_image = image
         self.configured_name = name
         self.configured_size = size
-        self.configured_text = text
-        self.configured_url = url
+        self.configured_status = status
       end
 
-      def name
-        if configured_name == default_configuration
-          ""
-        else
-          configured_name
+      def image
+        if is_set? configured_image
+          pb_image = Playbook::PbImage::Image.new(configured_image)
+          ApplicationController.renderer.render(partial: pb_image, as: :object)
         end
       end
 
       def initials
-        if configured_name == default_configuration
-          ""
-        else
-          configured_name.split.map(&:first).join.downcase
-        end
+        adjusted_value(configured_name, configured_name.split.map(&:first).join.downcase, "")
       end
 
       def size
-        if configured_size == default_configuration
-          "base"
-        else
-          configured_size
-        end
+        size_options = %w[xs sm md base lg xl]
+        one_of_value(configured_size, size_options, "md")
       end
 
-      def text
-        if configured_text == default_configuration
-          ""
-        else
-          configured_text
+      def status
+        if is_set? configured_status
+          online_status_props = { status: configured_status, classname: "size_#{size}" }
+          pb_status = Playbook::PbOnlineStatus::OnlineStatus.new(online_status_props)
+          ApplicationController.renderer.render(partial: pb_status, as: :object)
         end
       end
 
-      def url
-        if configured_url == default_configuration
-          ""
-        else
-          configured_url
-        end
+      def kit_class
+        avatar_options = [
+          "pb_avatar",
+          size,
+        ]
+        avatar_options.join("_")
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb

@@ -1,5 +1,42 @@
-<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
-<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
-<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
-<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
-<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl", url: "https://randomuser.me/api/portraits/men/44.jpg" }) %>
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "xs",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "online"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "away"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "md",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "offline"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "lg",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "online"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "xl",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "away"
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"}
+  }) %>
+
+<br>
+
+  <%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "online"
+  }) %>
+
+  <br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "away"
+  }) %>
+
+  <br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image: {url: "https://randomuser.me/api/portraits/men/44.jpg"},
+    status: "offline"
+  }) %>

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - avatar_default: Default
   - avatar_monogram: Monogram
+  - avatar_status: Status
   react:
   - avatar_default: Default
   - avatar_monogram: Monogram

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb

@@ -0,0 +1,19 @@
+<%= content_tag(:div, "",
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_bar_graph")
+    ) %>
+<% content_for :pb_js do %>
+  <%= javascript_tag do %>
+    new pbChart('.selector', {
+      id: "<%= object.id %>",
+      chartData: <%= object.chart_data %>,
+      type: "<%= object.chart_type %>",
+      title: "<%= object.title %>",
+      subtitle: "<%= object.subtitle %>",
+      axisTitle: "<%= object.axis_title %>",
+      pointStart: <%= object.point_start %>,
+    });
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

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

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss

@@ -0,0 +1,3 @@
+.pb_bar_graph {
+
+}

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -0,0 +1,24 @@
+import commonSettings from "../pb_dashboard/commonSettings.js";
+
+const sizeColumns = function(highchart) {
+    let column = highchart.plotOptions.column;
+    let series = highchart.plotOptions.series;
+    
+    column.borderRadius = 0;
+    column.pointPadding = 0.3;
+    column.groupPadding = 0.2;
+
+    series.borderWidth = 0;
+    series.shadow = false;
+    series.pointPadding = 0.3;
+    series.groupPadding = 0.2;
+    series.borderWidth = 0;
+    series.shadow = false;
+};
+
+const pbBarGraph = function(highchart) {
+  commonSettings(highchart);
+  sizeColumns(highchart);
+};
+
+export default pbBarGraph;

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBarGraph
+    class BarGraph < Playbook::PbKit::Base
+      PROPS = %i[
+        configured_aria
+        configured_axis_title
+        configured_chart_data
+        configured_classname
+        configured_data
+        configured_id
+        configured_orientation
+        configured_point_start
+        configured_subtitle
+        configured_title
+      ].freeze
+
+      def initialize(
+        aria: default_configuration,
+        axis_title: default_configuration,
+        chart_data: default_configuration,
+        classname: default_configuration,
+        data: default_configuration,
+        id: default_configuration,
+        orientation: default_configuration,
+        point_start: default_configuration,
+        subtitle: default_configuration,
+        title: default_configuration
+      )
+        self.configured_aria = aria
+        self.configured_axis_title = axis_title
+        self.configured_chart_data = chart_data
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_orientation = orientation
+        self.configured_point_start = point_start
+        self.configured_subtitle = subtitle
+        self.configured_title = title
+      end
+
+      def orientation
+        orientation_options = %w[vertical horizontal]
+        one_of_value(configured_orientation, orientation_options, "vertical")
+      end
+
+      def chart_type
+        orientation == "horizontal" ? "bar" : "column"
+      end
+
+      def title
+        default_value(configured_title, "")
+      end
+
+      def subtitle
+        default_value(configured_subtitle, "")
+      end
+
+      def axis_title
+        default_value(configured_axis_title, "")
+      end
+
+      def to_partial_path
+        "pb_bar_graph/bar_graph"
+      end
+
+      def point_start
+        default_value(configured_point_start, "")
+      end
+
+      def chart_data
+        adjusted_value(configured_chart_data, configured_chart_data.to_json.html_safe, {})
+      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_bar_graph/docs/_bar_graph_default.html.erb

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Installation',
+    data: [154175]
+}, {
+    name: 'Manufacturing',
+    data: [40434]
+}, {
+    name: 'Sales & Distribution',
+    data: [39387]
+}, {
+    name: 'Project Development',
+    data: [34227]
+}, {
+    name: 'Other',
+    data: [18111]
+}] %>
+
+<%= pb_rails("bar_graph", props: { id: "bar-test", chart_data: data, point_start: "2012", title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>
+
+

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

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

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

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

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

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

data/app/pb_kits/playbook/pb_body/_body.html.erb

@@ -1,4 +1,6 @@
-<%= content_tag(:"#{object.tag}", object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname("body#{object.color}#{object.dark}")) %>
+<%= content_tag(object.tag,
+  id: object.id,
+  data: object.data,
+  class: object.classname(object.kit_class)) do %>
+<%= object.yield(context: self) %>
+<% end %>

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,37 +1,17 @@
-@import "../tokens/colors";
-@import "../tokens/typography";
-@import "../tokens/line_height";
+@import "./body_mixins";
 
-.body {
-
-  $selectors: (
-    "&",
-    "&_light",
-    "&_lighter",
-    "&_dark",
-    "&_light_dark",
-    "&_lighter_dark",
-  );
-
-  @each $selector in $selectors {
-    #{$selector} {
-      margin: 0;
-      line-height: $lh_tight;
-      @if $selector == "&_dark" {
-        color: $white;
-      } @else if $selector == "&_light" {
-        color: $ink_lightest;
-      } @else if $selector == "&_lighter" {
-        color: $sky_dark;
-      } @else if $selector == "&_light_dark" {
-        color: $white_opacity_6;
-      } @else if $selector == "&_lighter_dark" {
-        color: $white_opacity_4;
-      } @else {
-        color: $ink;
-      }
+[class^=pb_body]{
+  @include pb_body;
 
+  @each $color_name, $color_value in $pb_body_colors {
+    &[class*=_#{$color_name}] {
+      @include pb_body($color_value);
     }
   }
 
+  @each $status_name, $status_value in $pb_body_status {
+    &[class*=_#{$status_name}] {
+      @include pb_body($status_value);
+    }
+  }
 }