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

playbook_ui 3.4.0 → 3.5.0

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",