playbook_ui 3.5.0 → 4.0.0

data/app/pb_kits/playbook/pb_popover/_popover.js

@@ -0,0 +1,54 @@
+import { createPopper } from '@popperjs/core'
+
+class Popover {
+  constructor(
+    triggerElement = '#triggerElement',
+    tooltip = '#tooltip',
+    placement = 'left',
+    offset = ''
+  ) {
+    this.triggerElement = triggerElement
+    this.tooltip = tooltip
+    this.placement = placement
+    this.offset = offset
+    this.setupPopper()
+  }
+
+  //getters
+  get popoverTriggerElement() {
+    return document.querySelector(this.triggerElement)
+  }
+  get popoverTooltip() {
+    return document.querySelector(this.tooltip)
+  }
+  get popoverPlacement() {
+    return this.placement
+  }
+  get popoverOffset() {
+    return this.offset
+  }
+
+  attachEvents() {
+    this.popoverTriggerElement.addEventListener('click', () => {
+      this.popoverTooltip.classList.toggle('show')
+    })
+  }
+
+  setupPopper() {
+    createPopper(this.popoverTriggerElement, this.popoverTooltip, {
+      placement: this.popoverPlacement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: this.offset,
+          },
+        },
+      ],
+    })
+
+    this.attachEvents()
+  }
+}
+
+export default Popover

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -0,0 +1,23 @@
+/* @flow */
+
+import React from 'react'
+
+type PopoverProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+}
+
+const Popover = ({
+  className,
+  data,
+  id,
+}: PopoverProps) => (
+  <div>
+    <p>{`className: ${className}`}</p>
+    <p>{`data: ${data}`}</p>
+    <p>{`id: ${id}`}</p>
+  </div>
+)
+
+export default Popover

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -0,0 +1,8 @@
+[class^="pb_popover_kit"] {
+  .popover_tooltip {
+    opacity: 0;
+    &.show {
+      opacity: 1;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb

@@ -0,0 +1,8 @@
+<span id='regular-popover-1'>Click Me.</span>
+<%= pb_rails("popover", props: {trigger_element_id: "regular-popover-1", tooltip_id: "tooltip-1", position: 'right', offset: false }) do %>
+    Whoa. I'm a popover.
+<% end %>
+
+
+
+

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Popover } from '../../'
+
+const PopoverDefault = () => (
+  <div>
+    <Popover />
+  </div>
+)
+
+export default PopoverDefault

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb

@@ -0,0 +1,12 @@
+<div style="height: 400px; text-align: center;">
+<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", id: 'list' }) %>
+<%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', offset: true }) do %>
+    <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+    <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
+    <%= pb_rails("list/item") do %><a>Title</a><% end %>
+    <%= pb_rails("list/item") do %><a>Duration</a><% end %>
+    <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
+    <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
+    <% end %>
+<% end %>
+</div>

data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", id: 'regular-popover-3' }) %>
+<%= pb_rails("popover", props: {trigger_element_id: "regular-popover-3", tooltip_id: "tooltip-3", position: 'bottom', offset: true }) do %>
+    Whoa. I'm a popover.
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb

@@ -0,0 +1,5 @@
+<%# Future release %>
+<%= pb_rails("circle_icon_button", props: {variant: "primary", icon: "plus"}) %>
+<%= pb_rails("popover", props: {trigger_element_id: "regular-popover-2", tooltip_id: "tooltip-2", position: 'right', offset: false }) do %>
+    Hello popover.
+<% end %>

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

@@ -0,0 +1,8 @@
+examples:
+  rails:
+    - popover_default: Default
+    - popover_with_button: With Button
+    - popover_list: With any children
+
+  react:
+    - popover_default: Default

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

@@ -0,0 +1 @@
+export { default as PopoverDefault } from './_popover_default.jsx'

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPopover
+    class Popover
+      include Playbook::Props
+      partial "pb_popover/popover"
+
+      prop :position
+      prop :trigger_element_id
+      prop :tooltip_id
+      prop :offset, type: Playbook::Props::Boolean, default: false
+
+      def popover_offset
+        offset ? [0, 8] : [0, 0]
+      end
+
+      def classname
+        generate_classname("pb_popover_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_select/_select.html.erb

@@ -8,7 +8,7 @@
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark, }) %>
     </label>
   <% end %>
-  <label class="pb_select_kit_wrapper" for="<%= object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
     <% if object.children %>
       <%= capture(&object.children) %>
       <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -29,6 +29,17 @@
   .pb_select_kit_wrapper {
     position: relative;
     display: block;
+    &.error {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+      > select:first-child {
+        border-color: $error;
+      }
+      .pb_select_kit_caret {
+        top: 35%;
+      }
+    }
   }
   .pb_select_kit_caret {
     position: absolute;
@@ -53,25 +64,15 @@
     .pb_select_kit_caret {
       color: $white;
     }
-    &.error {
-      .pb_select_kit_wrapper {
-        > select:first-child {
-          border-color: $error_dark;
-        }
-      }
-    }
-  }
-  &.error {
     .pb_select_kit_wrapper {
-      [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
-      }
-      > select:first-child {
-        border-color: $error;
-      }
-      .pb_select_kit_caret {
-        top: 35%;
+      &.error {
+        .pb_select_kit_wrapper {
+          > select:first-child {
+            border-color: $error_dark;
+          }
+        }
       }
     }
   }
+  
 }

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,7 +24,11 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_select", dark_class) + error_class
+        generate_classname("pb_select", dark_class)
+      end
+
+      def select_wrapper_class
+        "pb_select_kit_wrapper" + error_class
       end
 
       def options_to_array

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -19,7 +19,7 @@ $pb_selectable_card_border: 2px;
     cursor: pointer;
 
     &:hover {
-      box-shadow: $shadow-default;
+      box-shadow: $shadow-deep;
       border-color: $slate;
     }
 

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

@@ -16,7 +16,9 @@
           class: object.classname,
           data: object.data,
           name: object.name,
+          pattern: object.validation_pattern,
           placeholder: object.placeholder,
+          required: object.required,
           type: object.type,
           value: object.value) %>
       <% if object.error %>

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

@@ -18,12 +18,28 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :type, default: "text"
+      prop :validation, type: Playbook::Props::Hash,
+                        default: {}
       prop :value
 
       def classname
         generate_classname("pb_text_input_kit", dark_class) + error_class
       end
 
+      def validation_message
+        validation[:message] || ""
+      end
+
+      def validation_pattern
+        validation[:pattern] || ""
+      end
+
+      def data
+        fields = {}
+        fields[:message] = validation_message unless validation_message.blank?
+        fields
+      end
+
     private
 
       def error_class

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

@@ -103,20 +103,9 @@ $border_colors: (
 );
 
 // Shadow colors ----------------------
-$shadow_light:        rgba(#3C6AAC, $opacity_2);
-
-/*
-DEPRECATED - DO NOT USE! 
-This targed to be removed in release v4.0.0.
-[https://github.com/powerhome/playbook/issues/550]
-*/
-$shadow_dark:         rgba(#3C6AAC, $opacity_2);
-
-/* END DEPRECATION */
-
+$shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
-  shadow_light:       $shadow_light,
-  shadow_dark:        $shadow_dark
+  shadow:       $shadow,
 );
 
 // Text colors ------------------------

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

@@ -2,23 +2,11 @@
 @import "opacity";
 
 $shadow_none: 0 0 0 0 transparent;
-
-/*
-DEPRECATED - DO NOT USE! 
-This targed to be removed in release v4.0.0.
-[https://github.com/powerhome/playbook/issues/550]
-*/
-$shadow_shallow: 0 1px 1px 0 $shadow_light;
-$shadow_default: 0 1px 5px 0 $shadow_light;
-/* END DEPRECATED */
-
-$shadow_deep: 0 4px 10px 0 rgba($shadow_light, 0.16);
-$shadow_deeper: 0 12px 28px 0 rgba($shadow_light, 0.18);
-$shadow_deepest: 0 30px 38px 4px $shadow_light, 0 2px 14px 4px rgba($shadow_light, 0.1);
+$shadow_deep: 0 4px 10px 0 rgba($shadow, 0.16);
+$shadow_deeper: 0 12px 28px 0 rgba($shadow, 0.18);
+$shadow_deepest: 0 30px 38px 4px $shadow, 0 2px 14px 4px rgba($shadow, 0.1);
 $box_shadows: (
   shadow_none: $shadow_none,
-  shadow_shallow: $shadow_shallow,
-  shadow_default: $shadow_default,
   shadow_deep: $shadow_deep,
   shadow_deeper: $shadow_deeper,
   shadow_deepest: $shadow_deepest

data/app/pb_kits/playbook/vendor.js

@@ -1,6 +1,13 @@
 // Charts
-import pbChart from './plugins/pb_chart_plugin'
+import pbChart from './plugins/pb_chart'
 window.pbChart = pbChart
 
+// Forms
+import './pb_form/pb_form_validation'
+
 // Lazy image loading
 import 'lazysizes'
+
+// Popovers
+import Popover from './pb_popover/_popover'
+window.Popover = Popover

data/app/views/playbook/pages/utilities.html.slim

@@ -74,7 +74,7 @@ br
 // Shadow --------------------------
 = render :partial => "playbook/pages/utilities/pb_doc_color",
     locals:{ title: "Shadow",
-    colors: [{name: "Shadow Light", variable: "shadow_light"}]}
+    colors: [{name: "Shadow", variable: "shadow"}]}
 
 // Products ------------------------
 = render :partial => "playbook/pages/utilities/pb_doc_color",

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 3.5.0
+  version: 4.0.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-01-17 00:00:00.000000000 Z
+date: 2020-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -438,6 +438,7 @@ files:
 - app/pb_kits/playbook/kits/pb_person.js
 - app/pb_kits/playbook/kits/pb_person_contact.js
 - app/pb_kits/playbook/kits/pb_pill.js
+- app/pb_kits/playbook/kits/pb_popover.js
 - app/pb_kits/playbook/kits/pb_progress_pills.js
 - app/pb_kits/playbook/kits/pb_progress_simple.js
 - app/pb_kits/playbook/kits/pb_radio.js
@@ -705,7 +706,9 @@ files:
 - 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_form_with_validate.html.erb
 - app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb
+- app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.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
@@ -717,6 +720,7 @@ files:
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/select_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb
+- app/pb_kits/playbook/pb_form/pb_form_validation.js
 - 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
@@ -966,6 +970,18 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/example.yml
 - app/pb_kits/playbook/pb_pill/docs/index.js
 - app/pb_kits/playbook/pb_pill/pill.rb
+- app/pb_kits/playbook/pb_popover/_popover.html.erb
+- app/pb_kits/playbook/pb_popover/_popover.js
+- app/pb_kits/playbook/pb_popover/_popover.jsx
+- app/pb_kits/playbook/pb_popover/_popover.scss
+- app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_with_button.html.erb
+- app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb
+- app/pb_kits/playbook/pb_popover/docs/example.yml
+- app/pb_kits/playbook/pb_popover/docs/index.js
+- app/pb_kits/playbook/pb_popover/popover.rb
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
@@ -1262,7 +1278,7 @@ files:
 - app/pb_kits/playbook/pb_user_badge/docs/example.yml
 - app/pb_kits/playbook/pb_user_badge/docs/index.js
 - app/pb_kits/playbook/pb_user_badge/user_badge.rb
-- app/pb_kits/playbook/plugins/pb_chart_plugin.js
+- app/pb_kits/playbook/plugins/pb_chart.js
 - app/pb_kits/playbook/props.rb
 - app/pb_kits/playbook/props/array.rb
 - app/pb_kits/playbook/props/base.rb