playbook_ui 7.1.0.pre.alpha2 → 7.2.0

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -0,0 +1,32 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+
+@mixin section_separator_vertical($dark: false) {
+    @if $dark == false {
+        background: $border_light;
+    } @else {
+        background: $border_dark;
+    }
+    content: "";
+    height: 100%;
+    width: 1px;
+    margin-left: $space_xs;
+    margin-right: $space_xs;
+    position: initial;
+    z-index: 0;
+}
+
+@mixin section_separator_horizontal($dark: false) {
+    @if $dark == false {
+        background: $border_light;
+    } @else {
+        background: $border_dark;
+    }
+    content: "";
+    height: 1px;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 0;
+}

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorLine = () => {
+const SectionSeparatorLine = (props) => {
   return (
-    <SectionSeparator />
+    <div>
+      <SectionSeparator
+          {...props}
+      />
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorText = () => {
+const SectionSeparatorText = (props) => {
   return (
     <SectionSeparator
+        {...props}
         text="Title Separator"
     />
   )

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorTextBackground = () => {
+const SectionSeparatorTextBackground = (props) => {
   return (
     <SectionSeparator
+        {...props}
         text="Title Separator"
         variant="background"
     />

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, FlexItem, SectionSeparator } from '../../'
 
-const SectionSeparatorVertical = () => {
+const SectionSeparatorVertical = (props) => {
   return (
     <Flex
         inline="flex-container"
@@ -10,11 +10,17 @@ const SectionSeparatorVertical = () => {
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>
-      <SectionSeparator orientation="vertical" />
+      <SectionSeparator
+          {...props}
+          orientation="vertical"
+      />
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>
-      <SectionSeparator orientation="vertical" />
+      <SectionSeparator
+          {...props}
+          orientation="vertical"
+      />
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -18,7 +18,7 @@ module Playbook
                   default: false
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, dark_class)
+        generate_classname("pb_section_separator_kit", variant, orientation)
       end
 
     private

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb

@@ -4,9 +4,9 @@
   class: object.classname) do %>
 
   <% if object.multi %>
-    <%= check_box_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
+    <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
   <% else %>
-    <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
+    <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
   <% end %>
 
   <label for="<%= object.input_id_present %>">
@@ -17,9 +17,9 @@
     <% end %>
     <% if object.icon %>
       <div class="pb_selectable_card_circle">
-        <%= pb_rails("icon", props: { icon: "check", fixed_width: true}) %>
+        <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
       </div>
     <% end %>
   </label>
 
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card", props: {
+    text: "Selected With Options",
+    input_id: "selected_with options",
+    name: "selected_with options",
+    value: "selected_with options",
+    checked: true,
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,11 +1,12 @@
 examples:
-  
+
   rails:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
+  - selectable_card_options: With Options
+
 
-  
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -8,21 +8,21 @@ module Playbook
       partial "pb_selectable_card/selectable_card"
 
       prop :checked, type: Playbook::Props::Boolean,
-                  default: false
+                     default: false
       prop :disabled, type: Playbook::Props::Boolean,
-                  default: false
+                      default: false
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :multi, type: Playbook::Props::Boolean,
-                  default: true
+                   default: true
       prop :input_id, type: Playbook::Props::String
+
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
       prop :name
       prop :text
       prop :value
 
-      
-      
-
       def classname
         generate_classname("pb_selectable_card_kit", checked_class, enable_disabled_class)
       end
@@ -31,10 +31,17 @@ module Playbook
         input_id.present? ? input_id : name
       end
 
+      def additional_input_options
+        input_options.merge(
+          id: input_id_present,
+          disabled: disabled
+        )
+      end
+
     private
-      
+
       def checked_class
-        checked ? "checked" : nil 
+        checked ? "checked" : nil
       end
 
       def enable_disabled_class
@@ -42,4 +49,4 @@ module Playbook
       end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     data: object.data,
     class: object.classname) do %>
-  
+
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,
     name: object.name,
@@ -10,7 +10,8 @@
     disabled: object.disabled,
     icon: object.checkmark,
     multi: object.multi,
-    dark: object.dark
+    dark: object.dark,
+    input_options: object.input_options
   }) do %>
 
     <%= pb_rails("selectable_icon", props: {

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-line",
+    title_text: "Quarterly Report",
+    body_text: "Export",
+    input_id: "card-icon-id",
+    checked: true,
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,12 +1,13 @@
 examples:
-  
+
   rails:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_options: With Options
+
+
 
-  
-  
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -25,6 +25,9 @@ module Playbook
                        default: false
       prop :value
 
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
+
       def classname
         generate_classname("pb_selectable_card_icon_kit", checked_class, enabled_disabled_class)
       end

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb

@@ -4,15 +4,15 @@
     class: object.classname) do %>
 
     <% if object.inputs == "disabled" %>
-    
+
       <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
       <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
 
     <% else %>
       <% if object.multi %>
-        <%= check_box_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+        <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
       <% else %>
-        <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+        <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
       <% end %>
 
       <label for="<%= object.input_id_present %>">

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb

@@ -0,0 +1,15 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "dollar-sign",
+    input_id: "options-id",
+    checked: true,
+    text: "US Dollar",
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,10 +1,11 @@
 examples:
-  
+
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
+  - selectable_icon_options: With Options
+
 
-  
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -23,6 +23,9 @@ module Playbook
                       default: false
       prop :value
 
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
+
       # Conditional rendering for input field
       prop :inputs, type: Playbook::Props::String,
                     default: "enabled"
@@ -35,6 +38,13 @@ module Playbook
         input_id.present? ? input_id : name
       end
 
+      def additional_input_options
+        input_options.merge(
+          id: input_id_present,
+          disabled: disabled
+        )
+      end
+
     private
 
       def checked_class

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -19,7 +19,8 @@
     name: tag(:slot, name: "name"),
     orientation: "horizontal",
     align: "left",
-    avatar_url: "placeholder"
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
     }) %>
 </template>
 
@@ -35,7 +36,7 @@
         event.detail.setResults((result.items || []).map((user) => {
           const wrapper = resultOptionTemplate.content.cloneNode(true)
           wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').setAttribute("src", user.avatar_url)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
           return wrapper
         }))
       })

data/app/pb_kits/playbook/props.rb

@@ -124,7 +124,7 @@ module Playbook
 
       def prop(name, type: Playbook::Props::String, **options)
         @props ||= {}
-        @props[name] = type.new(**options)
+        @props[name] = type.new(options.merge(name: name, kit: self))
 
         define_method(name) { prop(name) }
       end

data/app/pb_kits/playbook/props/base.rb

@@ -5,11 +5,13 @@ module Playbook
     class Error < StandardError; end
 
     class Base
-      attr_reader :default, :required
+      attr_reader :default, :required, :name, :kit
 
-      def initialize(default: nil, required: false)
+      def initialize(default: nil, required: false, name:, kit:)
         @default = default
         @required = required
+        @name = name
+        @kit = kit
       end
 
       def value(value)
@@ -17,10 +19,10 @@ module Playbook
       end
 
       def validate!(input_value)
-        raise(Playbook::Props::Error, "#{inspect} is a required prop and needs to be provided a value") if required && input_value.nil?
+        raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?
 
         validate(value(input_value)) ||
-          raise(Playbook::Props::Error, "Invalid value (#{input_value.inspect}) for prop (#{inspect})")
+          raise(Playbook::Props::Error, "#{kit} has invalid value of '#{input_value.inspect}' for prop '#{name}' of type #{inspect.class}")
       end
 
       def validate(_value)

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.1.0.pre.alpha2"
+  VERSION = "7.2.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.1.0.pre.alpha2
+  version: 7.2.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-14 00:00:00.000000000 Z
+date: 2020-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1215,6 +1215,8 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_borderless_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_description.md
@@ -1230,6 +1232,9 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md
 - app/pb_kits/playbook/pb_nav/docs/example.yml
 - app/pb_kits/playbook/pb_nav/docs/index.js
 - app/pb_kits/playbook/pb_nav/item.rb
@@ -1376,6 +1381,7 @@ 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/_section_separator_mixin.scss
 - app/pb_kits/playbook/pb_section_separator/docs/_description.md
 - app/pb_kits/playbook/pb_section_separator/docs/_footer.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb
@@ -1425,6 +1431,7 @@ files:
 - 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_default.md
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb
 - 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/_selectable_card_single_select.md
@@ -1438,6 +1445,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx
+- app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml
@@ -1448,6 +1456,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx
+- app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx
 - app/pb_kits/playbook/pb_selectable_icon/docs/example.yml
@@ -1838,24 +1847,10 @@ files:
 - app/pb_kits/playbook/vendor.js
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
-- lib/generators/kit/USAGE
-- lib/generators/kit/kit_generator.rb
-- lib/generators/kit/templates/kit_example_rails.erb.tt
-- lib/generators/kit/templates/kit_example_react.erb.tt
-- lib/generators/kit/templates/kit_example_yml.erb.tt
-- lib/generators/kit/templates/kit_html.erb.tt
-- lib/generators/kit/templates/kit_js.erb.tt
-- lib/generators/kit/templates/kit_jsx.erb.tt
-- lib/generators/kit/templates/kit_ruby.erb.tt
-- lib/generators/kit/templates/kit_ruby_spec.erb.tt
-- lib/generators/kit/templates/kit_scss.erb
 - lib/playbook.rb
 - lib/playbook/engine.rb
 - lib/playbook/version.rb
 - lib/playbook_ui.rb
-- lib/tasks/changelog.rake
-- lib/tasks/pb_release.rake
-- lib/tasks/playbook_tasks.rake
 homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
@@ -1871,9 +1866,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
 signing_key: