RubyGems - playbook_ui - Versions diffs - 3.4.0 → 3.5.0 - Mend

playbook_ui 3.4.0 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d3de5d9a00cdc38a2ec90eb57ad2be970b276298515313d3a6261a5f47a3c0a2
-  data.tar.gz: 91ee6b3c0ed79222fff3e11fc50875422a7c489b55a7ae467843791343b5af6c
+  metadata.gz: a0b28078834805bf57899264e987f4f63142ed9e9da7a4150e4567b46a2dfd28
+  data.tar.gz: aeb49b9e4f1170ea5ed44cbd9fbf712c17c09658feda934185eb3fd71c12ffdc
 SHA512:
-  metadata.gz: f4c3280e29552ec18e6ede2d5f9428e8f4b81f47966d8d00ba9f606a0c3e840d2396dd4cb227db8a3a9b640dff07e730a9ca62fa96d4eda5f9dec6286b523a12
-  data.tar.gz: d746f05ed24a4322458f4f7989efa9ecd6a1021bf050efa3bc98d18e617f5e4cebafabee0052bf7d5152a97a1d94e17253726f86c2315a5dfcba4080b4893336
+  metadata.gz: 35c87175dd140d1d6c86314678fa628e11f49fa4c2044771ad15db3c4d688bc4a2eff5918e59d1455f09f72fbbb6d22c85c0dc956a192d4cb94945680cea14e5
+  data.tar.gz: 20ae14c1f20d443a89f133cd7e3335c20ca9ed01677a966b06754a3e28f4eed6d924c0bd7c895379e3f7ce81c34897776e73164604005e0ef16473017c0c720b

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -59,3 +59,4 @@
 @import 'pb_toggle/toggle';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_typeahead/typeahead';

data/app/pb_kits/playbook/index.js CHANGED Viewed

@@ -68,3 +68,4 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart_plugin.js'
+export PbTypeahead from './pb_typeahead'

data/app/pb_kits/playbook/packs/examples.js CHANGED Viewed

@@ -133,3 +133,6 @@ WebpackerReact.setup(TitleDetail)
 WebpackerReact.setup(Toggle)
 WebpackerReact.setup(User)
 WebpackerReact.setup(UserBadge)
+import PbTypeahead from 'pb_typeahead'
+PbTypeahead.start()

data/app/pb_kits/playbook/pb_body/_body_mixins.scss CHANGED Viewed

@@ -11,9 +11,11 @@ $pb_body_colors: (
   lighter_dark:   $text_dk_lighter,
 );
+// Order is important here!
 $pb_body_status: (
   default:        $text_lt_default,
   negative:       $error,
+  dark_negative:  $error_dark_body,
   positive:       $success,
 );
@@ -52,6 +54,10 @@ $pb_body_status: (
   @include pb_body($error);
 }
+@mixin pb_body_dark_negative {
+  @include pb_body($error_dark_body);
+}
 @mixin pb_body_positive {
   @include pb_body($success);
 }

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb CHANGED Viewed

@@ -10,6 +10,6 @@
       <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
     </span>
     <span class="pb_checkbox_label">
-      <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
+      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark }) %>
     </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx CHANGED Viewed

@@ -7,6 +7,7 @@ import Icon from '../pb_icon/_icon.jsx'
 type CheckboxProps = {
   checked?: Boolean,
   dark?: Boolean,
+  error?: Boolean,
   name: String,
   text: String,
   value: String,
@@ -17,6 +18,7 @@ type CheckboxProps = {
 const Checkbox = ({
   checked = false,
   dark = false,
+  error = false,
   name = '',
   text = '',
   value = '',
@@ -26,14 +28,14 @@ const Checkbox = ({
 }: CheckboxProps) => {
   const bodyClassName = {
     'pb_checkbox_label': true,
-    '_dark': dark,
   }
   return (
     <label
         className={
         'pb_checkbox_kit' +
-        (dark === true ? '_dark' : '')
+        (dark === true ? '_dark' : '') +
+        (error === true ? ' error' : '')
       }
     >
       <If condition={children}>
@@ -55,7 +57,13 @@ const Checkbox = ({
             icon="check"
         />
       </span>
-      <Body className={bodyClassName}>{text}</Body>
+      <Body
+          className={bodyClassName}
+          dark={dark}
+          status={error ? 'negative' : null}
+      >
+        {text}
+      </Body>
     </label>
   )
 }

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss CHANGED Viewed

@@ -61,5 +61,17 @@ $transition: $transition_cubic;
     &:hover .pb_checkbox_checkmark {
       border-color: $primary_action;
     }
+    &.error {
+      > .pb_checkbox_checkmark {
+        border-color: $error_dark;
+      }
+    }
+  }
+  &.error {
+    > .pb_checkbox_checkmark {
+      border-color: $error;
+    }
   }
 }

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb CHANGED Viewed

@@ -12,6 +12,7 @@ module Playbook
       partial "pb_checkbox/checkbox"
       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
@@ -22,15 +23,23 @@ module Playbook
       end
       def classname
-        generate_classname("pb_checkbox_kit", dark_class, checked_class)
+        generate_classname("pb_checkbox_kit", dark_class, checked_class) + error_class
       end
       def input
         check_box_tag(name, value, checked)
       end
+      def checkbox_label_status
+        error ? "negative" : nil
+      end
     private
+      def error_class
+        error ? " error" : ""
+      end
       def checked_class
         checked ? "on" : "off"
       end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.html.erb ADDED Viewed

@@ -0,0 +1,7 @@
+<%= pb_rails("checkbox" , props: {
+  dark: true,
+  error: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Checkbox } from '../..'
+const CheckboxDarkError = () => {
+  return (
+    <div>
+      <Checkbox
+          dark
+          error
+          name="default name"
+          text="Checkbox label"
+          value="default value"
+      />
+    </div>
+  )
+}
+export default CheckboxDarkError

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= pb_rails("checkbox" , props: {
+  error: true,
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Checkbox } from '../..'
+const CheckboxError = () => {
+  return (
+    <div>
+      <Checkbox
+          error
+          name="default name"
+          text="Checkbox label"
+          value="default value"
+      />
+    </div>
+  )
+}
+export default CheckboxError

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED Viewed

@@ -4,8 +4,12 @@ examples:
     - checkbox_checked: Load as checked
     - checkbox_dark: Dark
     - checkbox_custom: Custom Checkbox
+    - checkbox_error: Default w/ Error
+    - checkbox_dark_error: Dark w/ Error
   react:
   - checkbox_default: Default
   - checkbox_dark: Dark
   - checkbox_custom: Custom Checkbox
+  - checkbox_error: Default w/ Error
+  - checkbox_dark_error: Dark w/ Error

data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED Viewed

@@ -1,3 +1,5 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxDark } from './_checkbox_dark.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
+export { default as CheckboxError } from './_checkbox_error.jsx'
+export { default as CheckboxDarkError } from './_checkbox_dark_error.jsx'

data/app/pb_kits/playbook/pb_enhanced_element/element_observer.js ADDED Viewed

@@ -0,0 +1,67 @@
+export default class ElementObserver {
+  constructor(matchDelegate, target = document) {
+    this.matchDelegate = matchDelegate
+    this.target = target
+  }
+  start() {
+    this.mutationObserver.observe(this.target, { attributes: true, childList: true, subtree: true })
+    this.catchup()
+  }
+  stop() {
+    this.mutationObserverdisconnect()
+  }
+  catchup() {
+    this.handleAdditions(this.matchDelegate.matches(this.target))
+  }
+  processMutationList(mutationList) {
+    for (const mutation of mutationList) {
+      if (mutation.type == 'attributes') {
+        this.processAttributeChange(mutation.target)
+      } else if (mutation.type == 'childList') {
+        this.processRemovedNodes(Array.from(mutation.removedNodes))
+        this.processAddedNodes(Array.from(mutation.addedNodes))
+      }
+    }
+  }
+  processAttributeChange(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) return
+    const matches = this.matchDelegate.matches(node)
+    if (matches.length === 0) return this.matchDelegate.removeMatch(node)
+    this.handleAdditions(matches)
+  }
+  processRemovedNodes(nodes) {
+    for (const node of nodes) {
+      if (node.nodeType !== Node.ELEMENT_NODE) continue
+      this.handleRemovals(this.matchDelegate.matches(node))
+    }
+  }
+  processAddedNodes(nodes) {
+    for (const node of nodes) {
+      if (node.nodeType !== Node.ELEMENT_NODE) continue
+      this.handleAdditions(this.matchDelegate.matches(node))
+    }
+  }
+  handleRemovals(elements) {
+    for (const element of elements) this.matchDelegate.removeMatch(element)
+  }
+  handleAdditions(elements) {
+    for (const element of elements) this.matchDelegate.addMatch(element)
+  }
+  get mutationObserver() {
+    return this._mutationObserver =
+      this._mutationObserver || new MutationObserver((mutationList) => this.processMutationList(mutationList))
+  }
+}

data/app/pb_kits/playbook/pb_enhanced_element/index.js ADDED Viewed

@@ -0,0 +1,62 @@
+import ElementObserver from './element_observer.js'
+export default class PbEnhancedElement {
+  static get elements() {
+    return this._elements = (this._elements || new Map)
+  }
+  static get observer() {
+    return this._observer = (this._observer || new ElementObserver(this))
+  }
+  static get selector() {
+    // eslint-disable-next-line no-console
+    console.warn('Define a static property for selector or redefine the matches function in a subclass.', this)
+    return null
+  }
+  static matches(node) {
+    if (!this.selector) return []
+    const matches = []
+    if (node.nodeType === Node.ELEMENT_NODE && node.matches(this.selector)) matches.push(node)
+    matches.push(...node.querySelectorAll(this.selector))
+    return (matches)
+  }
+  static addMatch(element) {
+    if (this.elements.has(element)) return
+    const enhansedElement = new this(element)
+    enhansedElement.connect()
+    this.elements.set(element, enhansedElement)
+  }
+  static removeMatch(element) {
+    if (!this.elements.has(element)) return
+    const enhansedElement = this.elements.get(element)
+    enhansedElement.disconnect()
+    this.elements.delete(element)
+  }
+  static start() {
+    this.observer.start()
+  }
+  static stop() {
+    this.mutationObserver.stop()
+  }
+  constructor(element) {
+    this.element = element
+  }
+  connect() {
+    // eslint-disable-next-line no-console
+    console.warn('Redefine the connect function in a subclass.', this)
+  }
+  disconnect() { }
+}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED Viewed

@@ -14,7 +14,7 @@
 %>
 <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.text_field :example_text_field, props: { error: "Please enter the first name", label: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb CHANGED Viewed

@@ -39,7 +39,7 @@
 <%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
-  <%= form.input :example_text_field, as: :string %>
+  <%= form.input :example_text_field, {as: :string, input_html: {props: {error: "Please enter a valid first name"}}} %>
   <%= form.input :example_phone_field, as: :tel %>
   <%= form.input :example_email_field, as: :email %>
   <%= form.input :example_number_field, as: :integer %>

data/app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb CHANGED Viewed

@@ -10,7 +10,7 @@ if defined?(SimpleForm)
           def input(attribute_name, options = {}, &block)
             super(
               attribute_name,
-              options.merge(label: false, input_html: {
+              options.deep_merge(label: false, input_html: {
                               props: {
                                 label: true,
                               },

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb CHANGED Viewed

@@ -26,7 +26,7 @@
   <% if object.home_id %>
     <%= pb_rails("hashtag", props: {
       text: "#{object.home_id}",
-      url: "#",
+      url: object.home_url || "#",
       type: "home",
       dark: object.dark,
       classname: "home-hashtag"}) %>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx CHANGED Viewed

@@ -14,6 +14,7 @@ type HomeAddressStreetProps = {
   dark?: Boolean,
   homeId: Number,
   houseStyle: String,
+  homeUrl: String,
   state: String,
   zipcode: String,
   territory: String,
@@ -33,6 +34,7 @@ const HomeAddressStreet = ({
   className,
   dark = false,
   homeId,
+  homeUrl,
   houseStyle,
   state,
   zipcode,
@@ -63,7 +65,7 @@ const HomeAddressStreet = ({
           dark={dark}
           text={homeId}
           type="home"
-          url="#"
+          url={homeUrl || '#'}
       />
     </If>
     <Body

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb CHANGED Viewed

@@ -3,6 +3,7 @@
   address_cont: "Apt M18",
   city: "West Chester",
   home_id: 8250263,
+  home_url: "https://powerhrg.com/",
   house_style: "Colonial",
   state: "PA",
   zipcode: "19382",