playbook_ui 2.9.9 → 3.0.0

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx

@@ -0,0 +1,57 @@
+import React from "react"
+import {User} from "../../"
+
+function UserWithTerritory() {
+  return (
+    <div class="pb--doc-demo-row">
+
+      <div>
+        <User
+          name='Anna Black'
+          territory='PHL'
+          title='Remodeling Consultant'
+          orientation="vertical"
+          align="center"
+          size='lg'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+      </div>
+
+      <div>
+        <User
+          name='Anna Black'
+          territory='PHL'
+          title='Remodeling Consultant'
+          orientation="horizontal"
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+      </div>
+
+      <div>
+        <User
+          name='Anna Black'
+          territory='PHL'
+          title='Remodeling Consultant'
+          orientation='horizontal'
+          align='center'
+          size='sm'
+        />
+
+        <br/>
+
+        <User
+          name='Anna Black'
+          territory='PHL'
+          title='Remodeling Consultant'
+          orientation='horizontal'
+          align='left'
+          size='lg'
+        />
+      </div>
+
+    </div>
+  )
+}
+
+export default UserWithTerritory;

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

@@ -2,10 +2,18 @@ examples:
 
   rails:
   - user_default: Default
+  - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
+  - user_dark: Dark
+  - user_text_only_dark: Text Only
+
 
 
   react:
   - user_default: Default
+  - user_with_territory: With Territory
+  - user_text_only: Text Only
+  - user_size: Horizontal Size
+  - user_vertical_size: Vertical Size

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

@@ -1 +1,6 @@
 export {default as UserDefault} from './_user_default.jsx';
+export {default as UserWithTerritory} from './_user_with_territory.jsx';
+export {default as UserTextOnly} from './_user_text_only.jsx';
+export {default as UserSize} from './_user_size.jsx';
+export {default as UserVerticalSize} from './_user_vertical_size.jsx';
+

data/app/pb_kits/playbook/pb_user/user.rb

@@ -21,9 +21,11 @@ module Playbook
                   values: %w[lg md sm],
                   default: "sm"
       prop :title
+      prop :dark, type: Playbook::Props::Boolean,
+                          default: false
 
       def classname
-        generate_classname("pb_user_kit", align, orientation, size)
+        generate_classname("pb_user_kit", align, orientation, size, dark_class)
       end
 
       def avatar_size
@@ -37,9 +39,18 @@ module Playbook
         end
       end
 
+      def dark_class
+        dark ? "dark" : nil
+      end
+
+
       def title_size
         size == "lg" ? 3 : 4
       end
+
+      def details
+        [territory, title].reject(&:blank?).join(" • ")
+      end
     end
   end
 end

data/app/pb_kits/playbook/props.rb

@@ -23,14 +23,14 @@ module Playbook
     extend ActiveSupport::Concern
 
     def initialize(prop_values = {}, &block)
-      @values = { children: block }.merge(prop_values)
+      self.values = { children: block }.merge(Hash(prop_values))
       self.class.props.each do |key, definition|
-        definition.validate! @values[key]
+        definition.validate! values[key]
       end
     end
 
     def prop(name)
-      self.class.props[name].value @values[name]
+      self.class.props[name].value values[name]
     end
 
     def generate_classname(*name_parts, separator: "_")
@@ -40,6 +40,9 @@ module Playbook
       ].compact.join(" ")
     end
 
+    attr_accessor :values
+    private :values, :values=
+
     included do
       prop :id
       prop :data, type: Playbook::Props::Hash, default: {}
@@ -53,6 +56,11 @@ module Playbook
         @props
       end
 
+      def clear_props
+        @props.keys.each { |prop_name| remove_method(prop_name) }
+        @props.clear
+      end
+
       def prop(name, type: Playbook::Props::String, **options)
         @props ||= {}
         @props[name] = type.new(**options)

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

@@ -86,6 +86,14 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
+// Focus colors -----------------------
+$focus_input_light:   rgba($active_light, $opacity_2);
+$focus_input_dark:    rgba($active_dark, $opacity_2);
+$focus_input_colors: (
+  focus_input_light:        $focus_input_light,
+  focus_input_dark:         $focus_input_dark
+);
+
 // Border colors ----------------------
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
@@ -183,6 +191,14 @@ $product_colors: (
 
 $transparent: transparent;
 
+@mixin gradient($start: $gradient_start, $end: $gradient_end) {
+  background: $start;
+  background: -moz-linear-gradient(-45deg,  $start 0%, $end 100%);
+  background: -webkit-linear-gradient(-45deg,  $start 0%, $end 100%);
+  background: linear-gradient(135deg,  $start 0%, $end 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$end}', GradientType=1);
+}
+
 :export {
 
   @mixin export-colors($colors-list) {

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

@@ -1,2 +1,3 @@
 $transition_default: 0.3s;
+$transition_short: 0.15s;
 $transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035);

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "2.9.9"
+  VERSION = "3.0.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 2.9.9
+  version: 3.0.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-11-21 00:00:00.000000000 Z
+date: 2019-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -254,7 +254,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 2.2.2
 - !ruby/object:Gem::Dependency
-  name: rspec
+  name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
@@ -281,6 +281,26 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 0.72.0
+- !ruby/object:Gem::Dependency
+  name: simple_form
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: 6.0.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: 6.0.0
 - !ruby/object:Gem::Dependency
   name: spring
   requirement: !ruby/object:Gem::Requirement
@@ -387,6 +407,7 @@ files:
 - app/pb_kits/playbook/kits/pb_caption.js
 - app/pb_kits/playbook/kits/pb_card.js
 - app/pb_kits/playbook/kits/pb_checkbox.js
+- app/pb_kits/playbook/kits/pb_circle_icon_button.js
 - app/pb_kits/playbook/kits/pb_contact.js
 - app/pb_kits/playbook/kits/pb_currency.js
 - app/pb_kits/playbook/kits/pb_dashboard_value.js
@@ -418,12 +439,15 @@ files:
 - app/pb_kits/playbook/kits/pb_progress_pills.js
 - app/pb_kits/playbook/kits/pb_progress_simple.js
 - app/pb_kits/playbook/kits/pb_section_separator.js
+- app/pb_kits/playbook/kits/pb_select.js
+- app/pb_kits/playbook/kits/pb_selectable_card.js
 - app/pb_kits/playbook/kits/pb_source.js
 - app/pb_kits/playbook/kits/pb_star_rating.js
 - app/pb_kits/playbook/kits/pb_stat_change.js
 - app/pb_kits/playbook/kits/pb_stat_value.js
 - app/pb_kits/playbook/kits/pb_table.js
 - app/pb_kits/playbook/kits/pb_text_input.js
+- app/pb_kits/playbook/kits/pb_textarea.js
 - app/pb_kits/playbook/kits/pb_time.js
 - app/pb_kits/playbook/kits/pb_timestamp.js
 - app/pb_kits/playbook/kits/pb_title.js
@@ -558,6 +582,16 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
+- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb
+- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
+- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
+- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
+- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.html.erb
+- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.jsx
+- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
+- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
+- app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
+- app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
 - app/pb_kits/playbook/pb_contact/_contact.html.erb
 - app/pb_kits/playbook/pb_contact/_contact.jsx
 - app/pb_kits/playbook/pb_contact/_contact.scss
@@ -652,6 +686,20 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.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
+- app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb
+- app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb
+- app/pb_kits/playbook/pb_form/docs/example.yml
+- app/pb_kits/playbook/pb_form/form.rb
+- app/pb_kits/playbook/pb_form/form/form_with_form.rb
+- app/pb_kits/playbook/pb_form/form/simple_form_form.rb
+- app/pb_kits/playbook/pb_form/form_builder.rb
+- app/pb_kits/playbook/pb_form/form_builder/action_area.rb
+- app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
+- app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb
+- app/pb_kits/playbook/pb_form/form_builder/text_input_builder.rb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
@@ -700,8 +748,10 @@ files:
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
+- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx
+- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_size.jsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb
 - app/pb_kits/playbook/pb_icon_circle/docs/example.yml
 - app/pb_kits/playbook/pb_icon_circle/docs/index.js
@@ -751,17 +801,11 @@ files:
 - app/pb_kits/playbook/pb_layout/_sidebar.html.erb
 - app/pb_kits/playbook/pb_layout/_sidebar.jsx
 - app/pb_kits/playbook/pb_layout/body.rb
-- app/pb_kits/playbook/pb_layout/docs/_layout_lg.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_lg_dark.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_md.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_md_dark.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_sm.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_sm_dark.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_xl.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_xl_dark.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_xs.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_xs.jsx
-- app/pb_kits/playbook/pb_layout/docs/_layout_xs_dark.html.erb
+- app/pb_kits/playbook/pb_layout/docs/_layout_colors.html.erb
+- app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx
+- app/pb_kits/playbook/pb_layout/docs/_layout_sizes.html.erb
+- app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb
+- app/pb_kits/playbook/pb_layout/docs/_layout_transparent.html.erb
 - app/pb_kits/playbook/pb_layout/docs/example.yml
 - app/pb_kits/playbook/pb_layout/docs/index.js
 - app/pb_kits/playbook/pb_layout/layout.rb
@@ -905,12 +949,52 @@ files:
 - app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
-- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_default.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/example.yml
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
 - app/pb_kits/playbook/pb_section_separator/section_separator.rb
+- app/pb_kits/playbook/pb_select/_select.html.erb
+- app/pb_kits/playbook/pb_select/_select.jsx
+- app/pb_kits/playbook/pb_select/_select.scss
+- app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_blank.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_dark.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_dark.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_default.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_default.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_disabled_options.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_required.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx
+- app/pb_kits/playbook/pb_select/docs/example.yml
+- app/pb_kits/playbook/pb_select/docs/index.js
+- app/pb_kits/playbook/pb_select/docs/nitro_theme.gemspec
+- app/pb_kits/playbook/pb_select/select.rb
+- app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb
+- app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx
+- app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.html.erb
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.jsx
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.html.erb
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.jsx
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx
+- app/pb_kits/playbook/pb_selectable_card/docs/example.yml
+- app/pb_kits/playbook/pb_selectable_card/docs/index.js
+- app/pb_kits/playbook/pb_selectable_card/selectable_card.rb
 - app/pb_kits/playbook/pb_source/_source.html.erb
 - app/pb_kits/playbook/pb_source/_source.jsx
 - app/pb_kits/playbook/pb_source/_source.scss
@@ -993,6 +1077,19 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/example.yml
 - app/pb_kits/playbook/pb_text_input/docs/index.js
 - app/pb_kits/playbook/pb_text_input/text_input.rb
+- app/pb_kits/playbook/pb_textarea/_textarea.html.erb
+- app/pb_kits/playbook/pb_textarea/_textarea.jsx
+- app/pb_kits/playbook/pb_textarea/_textarea.scss
+- app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.jsx
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
+- app/pb_kits/playbook/pb_textarea/docs/example.yml
+- app/pb_kits/playbook/pb_textarea/docs/index.js
+- app/pb_kits/playbook/pb_textarea/textarea.rb
 - app/pb_kits/playbook/pb_time/_time.html.erb
 - app/pb_kits/playbook/pb_time/_time.jsx
 - app/pb_kits/playbook/pb_time/_time.scss
@@ -1060,9 +1157,14 @@ files:
 - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_size.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_text_only_dark.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx
+- app/pb_kits/playbook/pb_user/docs/_user_with_territory.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx
 - app/pb_kits/playbook/pb_user/docs/example.yml
 - app/pb_kits/playbook/pb_user/docs/index.js
 - app/pb_kits/playbook/pb_user/user.rb

data/app/pb_kits/playbook/pb_layout/docs/_layout_lg.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("layout", props: {position: "left", transparent: false, size: "lg", collapse: "sm"}) do %>
-  <%= pb_rails("layout/sidebar") do %> Side <% end %>
-  <%= pb_rails("layout/body") do %> Body <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_lg_dark.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("layout", props: {position: "left", transparent: false, size: "lg", collapse: "sm", dark: true}) do %>
-  <%= pb_rails("layout/sidebar") do %> Side <% end %>
-  <%= pb_rails("layout/body") do %> Body <% end %>
-<% end %>