playbook_ui 5.2.0.pre.alpha7 → 5.2.0.pre.alpha12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dbcfb4afe737aa52e1bd3d4b93d5de7abcbeadb856fa49c060a10c21f6748e0a
-  data.tar.gz: 1f3c9898d30fd0786d6d92db410cda5e2c70d6ce541401ac56c32f640560fe98
+  metadata.gz: 584fe4acaeb40060675ce04750d7202873edc0cf320c489df052e386228a0af8
+  data.tar.gz: c2ad56b5b785919092692e28ede675687a36a3be7d750b9367b5a2b3f396ae08
 SHA512:
-  metadata.gz: 4292280880c8290a9d20b8df3f714b79cae8aa18e722bca8b461dc3b2fa67be8f6dc86a3f862b0b52fff54aa83fc1da796dd96888d9cb9955ab4ac09ae2e53a9
-  data.tar.gz: 06b83d682499577677f36b5431779023ec185ab5b896c57cfe46a67cfa1a83c9421dc0f5b147f9c2ac5c859834367a31c364e93379b2bcc2d0fd87a7b1ec2bda
+  metadata.gz: ec4af4fa1be322f7fde3347dca49eae2e15a64da499d1fa46d7c7e469ce762899526002204f09bc43211ddac0a350108ab78175de1075a0cb64a5c4664adce44
+  data.tar.gz: 77a07642cc1a8b1fec9a014b95a8ff48a5d302bd790577b6582f33d99c534c32dba3689d6d33d9218a5984952e46dca339f3fdbb34952d3de977e4e8a9e00bb8

data/app/helpers/playbook/pb_kit_helper.rb

@@ -15,6 +15,7 @@ module Playbook
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
+    # deprecated
     def pb_react(kit, props: {}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+@import "tokens/fonts";
 @import "pb_body/body";
 @import "pb_button/button";
 @import "pb_caption/caption";

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

@@ -1,12 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('BarGraph', object.chart_options) %>

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

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb

@@ -1,8 +1 @@
-<%= content_tag(:figure,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <% object.widths_to_percentages.each do |percentage| %>
-    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
-  <% end %>
-<% end %>
+<%= react_component('DistributionBar', object.chart_options) %>

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -13,14 +13,11 @@ module Playbook
       prop :widths, type: Playbook::Props::NumberArray,
                     default: [1]
 
-      def classname
-        generate_classname("pb_distribution_bar", size)
-      end
-
-      def widths_to_percentages
-        widths.map do |width|
-          (width.to_f * 100 / widths.sum).round(2)
-        end
+      def chart_options
+        {
+          size: size,
+          widths: widths
+        }
       end
     end
   end

data/app/pb_kits/playbook/pb_foo/_foo.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+  <span>FOO CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_foo/_foo.jsx

@@ -0,0 +1,39 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
+
+type FooProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
+}
+
+const Foo = (props: FooProps) => {
+  const {
+    aria = {},
+    className = 'test_foo',
+    data = {},
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_foo'), className, spacing(props))
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
+
+export default Foo

data/app/pb_kits/playbook/pb_foo/_foo.scss

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

data/app/pb_kits/playbook/pb_foo/docs/_foo_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("foo") %>

data/app/pb_kits/playbook/pb_foo/docs/_foo_default.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Foo } from '../../'
+
+const FooDefault = () => (
+  <div>
+    <Foo />
+  </div>
+)
+
+export default FooDefault

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

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

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

@@ -0,0 +1 @@
+export { default as FooDefault } from './_foo_default.jsx'

data/app/pb_kits/playbook/pb_foo/foo.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFoo
+    class Foo
+      include Playbook::Props
+
+      partial "pb_foo/foo"
+    end
+  end
+end

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -1,10 +1 @@
-<%= content_tag(:div, object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <%= pb_rails("body", props: {color: object.body_color}) do %>
-    <span class="pb_legend_indicator_circle"></span>
-    <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
-    <%= object.text %>
-  <% end %>
-<% end %>
+<%= react_component('Legend', object.chart_options) %>

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -25,6 +25,13 @@ module Playbook
       def classname
         generate_classname("pb_legend_kit", color, dark ? "dark" : "light")
       end
+
+      def chart_options
+        {
+          color: color,
+          text: text
+        }
+      end
     end
   end
 end

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

@@ -1,13 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname
-    ) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('LineGraph', object.chart_options) %>

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

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,10 @@
 @import "./opacity";
 
-//=====================================
-// Base colors should not be documented.
-// Only document color use.
+/*=====================================
+Base colors should not be documented.
+Only document color use.
 
-// Colors -----------------------------
+Colors -----------------------------*/
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
 
-// Specialty Gradient -----------------
+/* Specialty Gradient -----------------*/
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
 
-// Interface colors -------------------
+/* Interface colors -------------------*/
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 
 );
 
-// Main colors ------------------------
+/* Main colors ------------------------*/
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,9 +51,9 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-//=====================================
+/*=====================================
 
-// Background colors ------------------
+Background colors ------------------*/
 $bg_light:            $silver;
 $bg_dark:             #172257;
 $background_colors: (
@@ -61,7 +61,7 @@ $background_colors: (
   bg_dark:            $bg_dark
 );
 
-// Card colors ------------------
+/* Card colors ------------------*/
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
 
-// Active colors ----------------------
+/* Active colors ----------------------*/
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff; 
+$active_dark:         #0082ff;
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
 
-// Hover colors -----------------------
+/* Hover colors -----------------------*/
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
-// Focus colors -----------------------
+/* Focus colors -----------------------*/
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
 
-// Border colors ----------------------
+/* Border colors ----------------------*/
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
 
-// Shadow colors ----------------------
+/* Shadow colors ----------------------*/
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
 
-// Text colors ------------------------
+/* Text colors ------------------------*/
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
 
-// Data colors ------------------------
+/* Data colors ------------------------*/
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
 
-// Status colors ----------------------
+/* Status colors ----------------------*/
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
 
-// Link colors ------------------------
+/* Link colors ------------------------*/
 $primary_action:      $primary;
 
-// Product colors ---------------------
+/* Product colors ---------------------*/
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
 
-// Category colors ---------------------
+/* Category colors ---------------------*/
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,7 +252,6 @@ $transparent: transparent;
 }
 
 :export {
-
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -2,7 +2,7 @@
 $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
 
 
-// CLEAN UP AND REMOVE
+/* CLEAN UP AND REMOVE */
 $font_jumbo:        36px;
 $font_largest:      32px;
 $font_larger:       28px;
@@ -29,7 +29,7 @@ $text_smaller:      $font_smaller;
 $text_smallest:     $font_smallest;
 
 
-// Headings
+/* Headings */
 $heading_1: 48px;
 $heading_2: 34px;
 $heading_3: $font_larger;
@@ -38,7 +38,7 @@ $heading_4: $font_base;
 
 
 
-// Letter Spacing
+/* Letter Spacing */
 $lspace_tightest:         _.1em;
 $lspace_tighter:          _.07em;
 $lspace_tight:            _.03em;
@@ -52,11 +52,11 @@ $lspace_super_loosest:    .2em;
 
 
 
-// Standard Font Weights
+/* Standard Font Weights */
 $bold:          600;
 $regular:       400;
 
-// Non_Standard Font Weights
+/* Non_Standard Font Weights */
 $extrabold:     900;
 $boldest:       800;
 $bolder:        700;

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "5.2.0.pre.alpha7"
+  VERSION = "5.2.0.pre.alpha12"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.2.0.pre.alpha7
+  version: 5.2.0.pre.alpha12
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-23 00:00:00.000000000 Z
+date: 2020-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -785,6 +785,14 @@ files:
 - app/pb_kits/playbook/pb_flex/docs/index.js
 - app/pb_kits/playbook/pb_flex/flex.rb
 - app/pb_kits/playbook/pb_flex/flex_item.rb
+- app/pb_kits/playbook/pb_foo/_foo.html.erb
+- app/pb_kits/playbook/pb_foo/_foo.jsx
+- app/pb_kits/playbook/pb_foo/_foo.scss
+- app/pb_kits/playbook/pb_foo/docs/_foo_default.html.erb
+- app/pb_kits/playbook/pb_foo/docs/_foo_default.jsx
+- app/pb_kits/playbook/pb_foo/docs/example.yml
+- app/pb_kits/playbook/pb_foo/docs/index.js
+- app/pb_kits/playbook/pb_foo/foo.rb
 - app/pb_kits/playbook/pb_form/_form.scss
 - app/pb_kits/playbook/pb_form/_form_form_with.html.erb
 - app/pb_kits/playbook/pb_form/_form_simple_form.html.erb