playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_layout/layout.rb

@@ -1,27 +1,29 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbLayout
     class Layout < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-        :configured_collapse,
-        :configured_dark,
-        :configured_data,
-        :configured_full,
-        :configured_id,
-        :configured_position,
-        :configured_transparent,
-        :configured_size,
-        :block].freeze
+      PROPS = %i[configured_classname
+                 configured_collapse
+                 configured_dark
+                 configured_data
+                 configured_full
+                 configured_id
+                 configured_position
+                 configured_transparent
+                 configured_size
+                 block].freeze
 
       def initialize(classname: default_configuration,
-                   collapse: default_configuration,
-                   dark: default_configuration,
-                   data: default_configuration,
-                   full: default_configuration,
-                   id: default_configuration,
-                   position: default_configuration,
-                   transparent: default_configuration,
-                   size: default_configuration,
-                   &block)
+                     collapse: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     full: default_configuration,
+                     id: default_configuration,
+                     position: default_configuration,
+                     transparent: default_configuration,
+                     size: default_configuration,
+                     &block)
         self.configured_classname = classname
         self.configured_collapse = collapse
         self.configured_dark = dark
@@ -43,13 +45,7 @@ module Playbook
       end
 
       def transparent
-        if configured_transparent == default_configuration
-          ""
-        else
-          if (configured_transparent == true)
-            "_transparent"
-          end
-        end
+        true_value(configured_transparent, "_transparent", "")
       end
 
       def size
@@ -62,30 +58,18 @@ module Playbook
 
       def collapse
         if configured_collapse == default_configuration
-          " layout#{self.position}_collapse_xs"
+          " layout#{position}_collapse_xs"
         else
-          " layout#{self.position}_collapse_#{configured_collapse}"
+          " layout#{position}_collapse_#{configured_collapse}"
         end
       end
 
       def full
-        if configured_full == default_configuration
-          ""
-        else
-          if (configured_full == true)
-            " full"
-          end
-        end
+        true_value(configured_full, " full", "")
       end
 
       def dark
-        if configured_dark == default_configuration
-          ""
-        else
-          if (configured_dark == true)
-            "_dark"
-          end
-        end
+        true_value(configured_dark, "_dark", "")
       end
 
       def yield(context:)

data/app/pb_kits/playbook/pb_layout/sidebar.rb

@@ -1,15 +1,17 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbLayout
     class Sidebar < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_data,
-          :configured_id,
-          :block].freeze
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 block].freeze
 
       def initialize(classname: default_configuration,
-                  data: default_configuration,
-                  id: default_configuration,
-                  &block)
+                     data: default_configuration,
+                     id: default_configuration,
+                     &block)
         self.configured_classname = classname
         self.configured_data = data
         self.configured_id = id

data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb

@@ -0,0 +1,19 @@
+<%= content_tag(:div, "",
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_line_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/{lib/generators/kit/templates/jsx.erb → app/pb_kits/playbook/pb_line_graph/_line_graph.jsx}

@@ -10,7 +10,7 @@ const defaultProps = {
   text: "I am a react kit"
 };
 
-class <%= js_titleize_file_name %> extends React.Component {
+class LineGraph extends React.Component {
   render() {
     const {
       className,
@@ -25,7 +25,7 @@ class <%= js_titleize_file_name %> extends React.Component {
   }
 }
 
-<%= js_titleize_file_name %>.propTypes = propTypes;
-<%= js_titleize_file_name %>.defaultProps = defaultProps;
+LineGraph.propTypes = propTypes;
+LineGraph.defaultProps = defaultProps;
 
-export default <%= js_titleize_file_name %>;
+export default LineGraph;

data/app/pb_kits/playbook/pb_line_graph/docs/_rails.html.erb

@@ -0,0 +1,21 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+}, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+}, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+}] %>
+
+<%= pb_rails("line_graph", props: { id: "line-test", gradient: false, chart_data: data, point_start: "1", title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>
+
+
+

data/app/pb_kits/playbook/pb_line_graph/docs/_react.html.erb

@@ -0,0 +1,2 @@
+
+<%= pb_react("line_graph", props: {}, docs: true) %>

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

@@ -0,0 +1,5 @@
+examples:
+  rails:
+  - rails: Line Graph
+  react:
+  - react: Line Graph

data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js

@@ -0,0 +1,15 @@
+import commonSettings from "../pb_dashboard/commonSettings.js";
+
+const markerStyles = function(highchart){
+  highchart.plotOptions.line.marker.enabled = true;
+  highchart.plotOptions.series.marker.enabled = true;
+  highchart.plotOptions.series.marker.fillColor = "white";
+  highchart.plotOptions.series.marker.lineWidth = 2;
+}
+
+const pbLineGraph = function(highchart) {
+  commonSettings(highchart);
+  markerStyles(highchart);
+};
+
+export default pbLineGraph;

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbLineGraph
+    class LineGraph < Playbook::PbKit::Base
+      PROPS = %i[
+        configured_aria
+        configured_axis_title
+        configured_chart_data
+        configured_classname
+        configured_data
+        configured_gradient
+        configured_id
+        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,
+        gradient: default_configuration,
+        id: 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_gradient = gradient
+        self.configured_id = id
+        self.configured_point_start = point_start
+        self.configured_subtitle = subtitle
+        self.configured_title = title
+      end
+
+      def gradient
+        is_true? configured_gradient
+      end
+
+      def chart_type
+        gradient == true ? "area" : "line"
+      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_line_graph/line_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_list/_item.html.erb

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <span><%= object.text %></span>
+    <%= object.yield(context: self) %>
 <% end %>

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

@@ -1,94 +1,31 @@
-@import "../tokens/spacing";
-@import "../tokens/colors";
-@import "../tokens/screen_sizes";
+@import "list_mixin";
 
-// $nspace-xs:  4px;
-// $nspace-sm:  8px;
-// $nspace-md:  16px;
-// $nspace-lg:  24px;
-// $nspace-xl:  32px;
-
-@mixin base-list-style {
-  ul, ol {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  ol {
-    counter-reset: list-counter;
-    li:before {
-      content: counter(list-counter);
-      counter-increment: list-counter;
-      display: block;
-      width: 20px;
-      flex: 0 0 20px;
-      text-align: left;
-      color: $ink-lightest;
-      font-weight: $bold;
-      margin-right: $space-sm;
-    }
-  }
-  li {
-    border-bottom: 1px solid $sky;
-    padding: $space-sm 0;
-    display: flex;
-    align-items: left;
-    &:last-child {
-      border-bottom: 0;
-      // padding-bottom: 0;
-    }
-  }
-}
-
-@mixin li-layout-grid {
-  display: grid;
-  grid-template: auto / repeat(12,1fr);
-  align-items: center;
-
-}
-
-[class*=pb_list]{
-  @include base-list-style;
+[class*=pb_list] {
+  @include pb_list;
 }
 
-[class^=pb_list]{
-
+[class^=pb_list] {
   &[class*=_dark] li {
-    color: $white ;
-    border-bottom: 1px solid $white-opacity-1;
-    &:before {
-      color: $white-opacity-7;
-    }
+    @include pb_list_dark;
   }
+
   &[class*=_lg] li {
-  padding: $space-lg 0;
+    @include pb_list_large;
   }
+
   &[class*=_xpadding] li {
-    padding-left: $space-md;
-    padding-right: $space-md;
+    @include pb_list_x_padding;
   }
+
   &[class*=_borderless] li {
-    border-bottom: 0;
+    @include pb_list_borderless;
   }
+
   &[class*=_layout_left] li {
-    @include li-layout-grid;
-    :nth-child(odd){
-      grid-column: 1 / 1 ;
-    }
-    :nth-child(even){
-      grid-column: 2 / -1 ;
-      text-align:left;
-    }
+    @include pb_list_layout_left;
   }
+
   &[class*=_layout_right] li {
-    @include li-layout-grid;
-    :nth-child(odd){
-      grid-column: 1 / -2 ;
-    }
-    :nth-child(even){
-      grid-column: -1  ;
-      text-align:right;
-    }
+    @include pb_list_layout_right;
   }
-
 }

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

@@ -0,0 +1,91 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/screen_sizes"; // $nspace-xs:  4px;
+
+@mixin pb_list {
+  ol,
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  ol {
+    counter-reset: list-counter;
+
+    li:before {
+      content: counter(list-counter);
+      counter-increment: list-counter;
+      display: block;
+      width: 20px;
+      flex: 0 0 20px;
+      text-align: left;
+      color: $text_lt_lighter;
+      font-weight: $bold;
+      margin-right: $space-sm;
+    }
+  }
+
+  li {
+    border-bottom: 1px solid $border_light;
+    padding: $space-sm 0;
+    display: flex;
+    align-items: left;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
+@mixin pb_list_layout_grid {
+  display: grid;
+  grid-template: auto / repeat(12,1fr);
+  align-items: center;
+}
+@mixin pb_list_layout_left {
+  @include pb_list_layout_grid;
+
+  :nth-child(odd) {
+    grid-column: 1 / 1;
+  }
+
+  :nth-child(even) {
+    grid-column: 2 / -1;
+    text-align: left;
+  }
+}
+@mixin pb_list_layout_right {
+  @include pb_list_layout_grid;
+
+  :nth-child(odd) {
+    grid-column: 1 / -2;
+  }
+
+  :nth-child(even) {
+    grid-column: -1;
+    text-align: right;
+  }
+}
+@mixin pb_list_dark {
+  color: $white;
+  border-bottom: 1px solid $border_dark;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &:before {
+    color: $text_dk_light;
+  }
+}
+@mixin pb_list_large {
+  padding: $space-lg 0;
+}
+@mixin pb_list_x_padding {
+  padding-left: $space-md;
+  padding-right: $space-md;
+}
+@mixin pb_list_borderless {
+  border-bottom: 0;
+}