playbook_ui 9.10.0.pre.alpha2 → 9.12.0

data/app/pb_kits/playbook/pb_text_input/add_on.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("flex", props: { classname: "add-on-#{alignment} #{border_css}", vertical: "center"}) do %>
+  <% if left_aligned? %>
+    <%= pb_rails("card", props: {classname: "#{dark_mode_css} add-on-card card-left-aligned", dark: dark}) do %>
+      <%= pb_rails("icon", props: { icon: icon, classname: "add-on-icon", fixed_width: false, dark: dark }) %>
+    <% end %>
+    <%= content %>
+  <% else %>
+    <%= content %>
+    <%= pb_rails("card", props: {classname: "#{dark_mode_css} add-on-card card-right-aligned", dark: dark}) do %>
+      <%= pb_rails("icon", props: { icon: icon, classname: "add-on-icon", fixed_width: false, dark: dark }) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_text_input/add_on.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTextInput
+    class AddOn < Playbook::KitBase
+      prop :icon, type: Playbook::Props::String, required: true
+      prop :alignment, type: Playbook::Props::Enum, values: %w[right left], default: "right"
+      prop :border, type: Playbook::Props::Boolean, default: true
+
+      def border_css
+        border_toggle = border ? "on" : "off"
+        border_to_change = if alignment == "left"
+                             "right"
+                           else
+                             "left"
+                           end
+
+        "border_#{border_to_change}_#{border_toggle}"
+      end
+
+      def left_aligned?
+        alignment == "left"
+      end
+
+      def dark_mode_css
+        dark ? "add-on-card-dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("text_input", props: {
+  label: "Add On With Defaults",
+  add_on: { icon: "bat" }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Right-Aligned Add On With Border",
+  add_on: { icon: "user", alignment: 'right', border: true }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Left-Aligned Add On With No Border",
+  add_on: { icon: "percent", alignment: 'left', border: false }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Left-Aligned Add On With Border",
+  add_on: { icon: "user", alignment: 'left', border: true }
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "Right-Aligned Add On With No Border",
+  add_on: { icon: "percent", alignment: 'right', border: false }
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { TextInput } from '../../'
+
+const TextInputAddOn = (props) => {
+  const [defaultInput, setDefaultInput] = useState('')
+  const [firstInput, setFirstInput] = useState('')
+  const [secondInput, setSecondInput] = useState('')
+  const [thirdInput, setThirdInput] = useState('')
+  const [fourthInput, setFourthInput] = useState('')
+
+  const handleUpdateDefaultInput = ({ target }) => {
+    setDefaultInput(target.value)
+  }
+
+  const handleUpdateFirstInput = ({ target }) => {
+    setFirstInput(target.value)
+  }
+
+  const handleUpdateSecondInput = ({ target }) => {
+    setSecondInput(target.value)
+  }
+
+  const handleUpdateThirdInput = ({ target }) => {
+    setThirdInput(target.value)
+  }
+
+  const handleUpdateFourthInput = ({ target }) => {
+    setFourthInput(target.value)
+  }
+
+  return (
+    <>
+      <div>
+        <TextInput
+            addOn={{ icon: 'bat' }}
+            label="Add On With Defaults"
+            onChange={handleUpdateDefaultInput}
+            value={defaultInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'user', alignment: 'right', border: true }}
+            label="Right-Aligned Add On With Border"
+            onChange={handleUpdateFirstInput}
+            value={firstInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: false }}
+            label="Left-Aligned Add On With No Border"
+            onChange={handleUpdateSecondInput}
+            value={secondInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'right', border: false }}
+            label="Right-Aligned Add On With No Border"
+            onChange={handleUpdateThirdInput}
+            value={thirdInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: true }}
+            label="Left-Aligned Add On With Border"
+            onChange={handleUpdateFourthInput}
+            value={fourthInput}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TextInputAddOn

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
     <input placeholder="Custom placeholder" name="custom-name"></input>
-<% end %>
+<% end %>

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

@@ -4,8 +4,10 @@ examples:
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
+  - text_input_add_on: Add On
   react:
   - text_input_default: Default
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
+  - text_input_add_on: Add On

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

@@ -2,3 +2,4 @@ export { default as TextInputDefault } from './_text_input_default.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'
+export { default as TextInputAddOn } from './_text_input_add_on.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -5,25 +5,16 @@
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>
-  <%= content_tag(:div, class: "text_input_wrapper") do %>
+  <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
       <%= content %>
+    <% elsif has_add_on? %>
+      <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
+        <%= input_tag %>
+      <% end %>
     <% else %>
-      <%= tag(:input,
-          autocomplete: object.autocomplete ? nil : "off",
-          class: "text_input",
-          data: object.validation_data,
-          disabled: object.disabled,
-          id: object.id,
-          name: object.name,
-          pattern: object.validation_pattern,
-          placeholder: object.placeholder,
-          required: object.required,
-          type: object.type,
-          value: object.value) %>
-    <% end %>
-    <% if object.error %>
-      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <%= input_tag %>
     <% end %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -17,11 +17,47 @@ module Playbook
       prop :validation, type: Playbook::Props::Hash,
                         default: {}
       prop :value
+      prop :add_on, type: Playbook::Props::NestedProps,
+                    nested_kit: Playbook::PbTextInput::AddOn
 
       def classname
         generate_classname("pb_text_input_kit") + error_class
       end
 
+      def input_tag
+        tag(:input, input_options)
+      end
+
+      def has_add_on?
+        add_on.present?
+      end
+
+      def add_on_class
+        has_add_on? ? "text_input_wrapper_add_on" : nil
+      end
+
+      def add_on_props
+        { dark: dark }.merge(add_on || {})
+      end
+
+    private
+
+      def input_options
+        {
+          autocomplete: autocomplete ? nil : "off",
+          class: "text_input",
+          data: validation_data,
+          disabled: disabled,
+          id: id,
+          name: name,
+          pattern: validation_pattern,
+          placeholder: placeholder,
+          required: required,
+          type: type,
+          value: value,
+        }
+      end
+
       def validation_message
         validation[:message] || ""
       end
@@ -36,8 +72,6 @@ module Playbook
         fields
       end
 
-    private
-
       def error_class
         error ? " error" : ""
       end

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -3,10 +3,10 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
+    <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>
         <%= object.format_time_string %>
-        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
       </time>
     <% end %>
 <% end %>

data/lib/playbook/props.rb

@@ -17,6 +17,7 @@ require_relative "./props/numeric"
 require_relative "./props/percentage"
 require_relative "./props/proc"
 require_relative "./props/string"
+require_relative "./props/nested_props"
 
 module Playbook
   module Props

data/lib/playbook/props/nested_props.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Props
+    class NestedProps < Playbook::Props::Base
+      def initialize(nested_kit:, **kwargs)
+        super **kwargs
+        @nested_kit = nested_kit
+      end
+
+      def validate(values)
+        return true if values.nil?
+
+        @nested_kit.props.each do |prop_key, definition|
+          definition.validate! definition.value(values[prop_key])
+        end
+        true
+      rescue Playbook::Props::Error
+        false
+      end
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.10.0.pre.alpha2"
+  VERSION = "9.12.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.10.0.pre.alpha2
+  version: 9.12.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-26 00:00:00.000000000 Z
+date: 2021-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -299,22 +299,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
@@ -516,6 +516,19 @@ files:
 - app/pb_kits/playbook/pb_body/docs/_footer.md
 - app/pb_kits/playbook/pb_body/docs/example.yml
 - app/pb_kits/playbook/pb_body/docs/index.js
+- app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx
+- app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx
+- app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.rb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.rb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.test.js
+- app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb
+- app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx
+- app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md
+- app/pb_kits/playbook/pb_bread_crumbs/docs/example.yml
+- app/pb_kits/playbook/pb_bread_crumbs/docs/index.js
 - app/pb_kits/playbook/pb_button/_button.jsx
 - app/pb_kits/playbook/pb_button/_button.scss
 - app/pb_kits/playbook/pb_button/_button_mixins.scss
@@ -809,6 +822,8 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
@@ -838,6 +853,7 @@ files:
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
+- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
@@ -1792,8 +1808,12 @@ files:
 - app/pb_kits/playbook/pb_table/table_row.rb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
+- app/pb_kits/playbook/pb_text_input/add_on.html.erb
+- app/pb_kits/playbook/pb_text_input/add_on.rb
 - app/pb_kits/playbook/pb_text_input/docs/_description.md
 - app/pb_kits/playbook/pb_text_input/docs/_footer.md
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
@@ -2109,6 +2129,7 @@ files:
 - lib/playbook/props/enum.rb
 - lib/playbook/props/hash.rb
 - lib/playbook/props/hash_array.rb
+- lib/playbook/props/nested_props.rb
 - lib/playbook/props/number.rb
 - lib/playbook/props/number_array.rb
 - lib/playbook/props/numeric.rb
@@ -2123,7 +2144,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2134,12 +2155,13 @@ 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.0.3
-signing_key: 
+rubyforge_project:
+rubygems_version: 2.7.3
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []