playbook_ui 4.2.0 → 4.3.0

data/app/pb_kits/playbook/pb_body/body.rb

@@ -4,7 +4,8 @@ module Playbook
   module PbBody
     class Body
       include Playbook::Props
-
+      include ActionView::Helpers
+      
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,
@@ -19,13 +20,28 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"
       prop :text
+      prop :highlighting, type: Playbook::Props::Boolean,
+                              default: false
+      prop :highlighted_text, type: Playbook::Props::Array,
+                              default: []
 
       def classname
         generate_classname("pb_body_kit", color_class, dark_class, status_class)
       end
 
+      def content
+        highlighting ? apply_highlight : text
+      end
+
     private
 
+      def apply_highlight
+        pb_highlight = Playbook::PbHighlight::Highlight.new() {"|"}
+        pb_highlight_output = ApplicationController.renderer.render(partial: pb_highlight, as: :object)
+        highlight_tags = pb_highlight_output.split("|")
+        highlight(text, highlighted_text, highlighter: "#{highlight_tags.first.html_safe} \\1 #{highlight_tags.last.html_safe}")
+      end
+     
       def color_class
         color != "default" ? color : nil
       end

data/app/pb_kits/playbook/pb_editor/_editor.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <span>EDITOR CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -13,13 +13,14 @@ type HashtagProps = {
   dark?: Boolean,
   id?: String,
   text?: String,
-  type: 'default' | 'home' | 'project',
+  type: 'default' | 'home' | 'project' | 'appointment',
   url?: String,
 }
 
 const typeMap = {
   'home': 'H#',
   'project': 'P#',
+  'appointment': 'A#',
   'default': '#',
 }
 

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.html.erb

@@ -6,4 +6,8 @@
 
 <br/><br/>
 
+<%= pb_rails("hashtag", props: {text: "345678", url: "https://google.com", type: "appointment", dark: true}) %>
+
+<br/><br/>
+
 <%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default", dark: true}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx

@@ -18,6 +18,13 @@ const HashtagDark = () => {
           url="https://google.com"
       />
       <br />
+      <Hashtag
+          dark
+          text="456789"
+          type="appointment"
+          url="https://google.com"
+      />
+      <br />
       <Hashtag
           dark
           text="654321"

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb

@@ -6,4 +6,8 @@
 
 <br/><br/>
 
+<%= pb_rails("hashtag", props: {text: "345678", url: "https://google.com", type: "appointment"}) %>
+
+<br/><br/>
+
 <%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default"}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -16,6 +16,12 @@ const HashtagDefault = () => {
           url="https://google.com"
       />
       <br />
+      <Hashtag
+          text="456789"
+          type="appointment"
+          url="https://google.com"
+      />
+      <br />
       <Hashtag
           text="654321"
           type="default"

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :text
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :type, type: Playbook::Props::Enum,
-                  values: %w[default project home],
+                  values: %w[default project home appointment],
                   default: "default"
       prop :url
 
@@ -33,6 +33,8 @@ module Playbook
           "H#"
         elsif type === "project"
           "P#"
+        elsif type === "appointment"
+          "A#"
         else
           "#"
         end

data/app/pb_kits/playbook/pb_highlight/_highlight.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:span,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= object.children.nil? ? object.text : capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -0,0 +1,38 @@
+/* @flow */
+/* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+import Highlighter from 'react-highlight-words'
+import React from 'react'
+
+type HighlightProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  children?: React.Node,
+  text?: String,
+  highlightedText?: Array<String>
+}
+
+const Highlight = ({
+  className = 'pb_highlight_kit',
+  children,
+  data,
+  id,
+  text,
+  highlightedText = ['highlight'],
+}: HighlightProps) => {
+  return (
+
+    <Highlighter
+        autoEscape
+        data={data}
+        highlightClassName={className}
+        highlightTag="span"
+        id={id}
+        searchWords={highlightedText}
+        textToHighlight={text || children}
+    />
+
+  )
+}
+
+export default Highlight

data/app/pb_kits/playbook/pb_highlight/_highlight.scss

@@ -0,0 +1,6 @@
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+[class^=pb_highlight_kit] {
+  background-color: rgba($yellow,$opacity_2);
+}

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb

@@ -0,0 +1,20 @@
+
+<%= pb_rails("highlight", props: {text: "Highlight Kit"})%>
+<br>
+<br>
+<%= pb_rails("title", props: {text: "Kit wrapping",size: 4})%>
+<br>
+<%= pb_rails("body") do%>
+This an example<%= pb_rails("highlight") do%>Highlight Example<% end %>around.
+<% end %>
+<br>
+<br>
+<%= pb_rails("title", props: {text: "Search",size: 4})%>
+</br>
+<%= pb_rails("body", props: {text: "hello helpers are great even highlighting this", highlighting: true, highlighted_text: ["hello","great"]})%>
+
+<br>
+<br>
+<%= pb_rails("caption", props: {size: "xs", text: "To enable highlighting make sure the [highlighting] flag is set to true. "}) %>
+<br>
+<br>

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Body, Highlight } from '../../'
+
+const HighlightDefault = () => (
+  <div>
+    <Highlight
+        highlightedText={['highlight kit']}
+        text="This is the Highlight Kit"
+    />
+    <br />
+    <Body>
+      {' '}
+      {'Hello this is a'}
+      {' '}
+      <Highlight>{' highlight wrapped'}</Highlight>
+    </Body>
+    <br />
+    <Body
+        highlightedText={['highlighted in the Body Kit ']}
+        highlighting
+        text="This is text highlighted in the Body Kit using the text prop."
+    />
+  </div>
+)
+
+export default HighlightDefault

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - highlight_default: Default
+  
+  
+  react:
+  - highlight_default: Default
+  

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

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

data/app/pb_kits/playbook/pb_highlight/highlight.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbHighlight
+    class Highlight
+      include Playbook::Props
+
+      partial "pb_highlight/highlight"
+
+      prop :text
+
+      def classname
+        generate_classname("pb_highlight_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -14,7 +14,7 @@
 <% content_for :pb_js do %>
   <%= javascript_tag do %>
     window.addEventListener('DOMContentLoaded', function() {
-      new Popover(
+      new PbPopover(
         "#<%= object.trigger_element_id %>",
         "#<%= object.tooltip_id %>",
          "<%= object.position %>",

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

@@ -1,11 +1,11 @@
-import { createPopper } from '@popperjs/core'
+import Popper from 'popper.js'
 
-class Popover {
+class PbPopover {
   constructor(
     triggerElement = '#triggerElement',
     tooltip = '#tooltip',
     placement = 'left',
-    offset = ''
+    offset,
   ) {
     this.triggerElement = triggerElement
     this.tooltip = tooltip
@@ -15,41 +15,32 @@ class Popover {
   }
 
   //getters
-  get popoverTriggerElement() {
+  get referenceElement() {
     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.referenceElement.addEventListener('click', () => {
       this.popoverTooltip.classList.toggle('show')
-      this.popper.update()
+      this.popper.scheduleUpdate()
     })
   }
 
   setupPopper() {
-    this.popper = createPopper(this.popoverTriggerElement, this.popoverTooltip, {
-      placement: this.popoverPlacement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: this.offset,
-          },
+    this.popper = new Popper(this.referenceElement, this.popoverTooltip, {
+      placement: this.placement,
+      modifiers: {
+        offset: {
+          offset: this.offset,
         },
-      ],
+      },
     })
 
     this.attachEvents()
   }
 }
 
-export default Popover
+export default PbPopover

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

@@ -0,0 +1,121 @@
+// @flow
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import {
+  Popper,
+  Manager as PopperManager,
+  PopperProps,
+  Reference as PopperReference,
+} from 'react-popper'
+
+import { buildCss } from '../utilities/props'
+import { Card } from '../'
+
+type PbPopoverProps = {
+  className?: String,
+  offset?: Boolean,
+  reference: PopperReference,
+  show?: Boolean,
+} & PopperProps
+
+const POPOVER_OFFSET_Y = {
+  offset: {
+    offset: '0, 8',
+  },
+}
+
+const popoverModifiers = ({ modifiers, offset }) => {
+  return offset ? { ...modifiers, ...POPOVER_OFFSET_Y } : modifiers
+}
+
+const Popover = ({
+  children,
+  className,
+  modifiers,
+  offset,
+  placement,
+  referenceElement,
+  show,
+}: PbPopoverProps) => (
+  <Popper
+      modifiers={popoverModifiers({ modifiers, offset })}
+      placement={placement}
+      referenceElement={referenceElement}
+  >
+    {({ placement, ref, scheduleUpdate, style }) => {
+      scheduleUpdate()
+      return (
+        <div
+            className={buildCss('pb_popover_kit', className)}
+            data-placement={placement}
+            ref={ref}
+            style={style}
+        >
+          <div className={buildCss('popover_tooltip', show ? 'show' : '')}>
+            <Card shadow="deeper">
+              { children }
+            </Card>
+          </div>
+        </div>
+        )
+      }
+    }
+  </Popper>
+)
+
+const PbReactPopover = ({
+  className,
+  children,
+  modifiers = {},
+  offset = false,
+  placement = 'left',
+  portal = 'body',
+  reference,
+  referenceElement,
+  show = false,
+  usePortal = false,
+}: PbPopoverProps) => {
+  const popoverComponent = (
+    <Popover
+        className={className}
+        modifiers={modifiers}
+        offset={offset}
+        placement={placement}
+        referenceElement={referenceElement}
+        show={show}
+    >
+      {children}
+    </Popover>
+  )
+
+  return (
+    <PopperManager>
+      <If condition={reference && !referenceElement}>
+        <PopperReference>
+          {({ ref }) => (
+            <span
+                className="pb_popover_reference_wrapper"
+                ref={ref}
+            >
+              <reference.type
+                  {...reference.props}
+              />
+            </span>
+          )}
+        </PopperReference>
+      </If>
+      <If condition={usePortal}>
+        {ReactDOM.createPortal(
+          popoverComponent,
+          document.querySelector(portal)
+        )}
+        <Else />
+        {popoverComponent}
+      </If>
+    </PopperManager>
+  )
+}
+
+export default PbReactPopover