playbook_ui 2.9.2 → 2.9.3

data/app/pb_kits/playbook/packs/kits.js

@@ -1,49 +1,49 @@
+import "../kits/pb_avatar.js";
+import "../kits/pb_badge.js";
+import "../kits/pb_bar_graph.js";
 import "../kits/pb_body.js";
 import "../kits/pb_button.js";
 import "../kits/pb_caption.js";
 import "../kits/pb_card.js";
-import "../kits/pb_title.js";
-import "../kits/pb_layout.js";
-import "../kits/pb_vertical_nav.js";
-import "../kits/pb_image.js";
-import "../kits/pb_table.js";
-import "../kits/pb_avatar.js";
-import "../kits/pb_input.js";
-import "../kits/pb_bar_graph.js";
-import "../kits/pb_line_graph.js";
-import "../kits/pb_icon.js";
+import "../kits/pb_checkbox.js";
+import "../kits/pb_contact.js";
+import "../kits/pb_currency.js";
 import "../kits/pb_dashboard_value.js";
-import "../kits/pb_time.js";
-import "../kits/pb_pill.js";
-import "../kits/pb_user_badge.js";
 import "../kits/pb_date.js";
-import "../kits/pb_title_detail.js";
+import "../kits/pb_date_range_inline.js";
+import "../kits/pb_date_year_stacked.js";
+import "../kits/pb_distribution_bar.js";
+import "../kits/pb_fixed_confirmation_toast.js";
+import "../kits/pb_hashtag.js";
+import "../kits/pb_home_address_street.js";
+import "../kits/pb_icon.js";
 import "../kits/pb_icon_circle.js";
 import "../kits/pb_icon_value.js";
-import "../kits/pb_star_rating.js";
-import "../kits/pb_progress_simple.js";
-import "../kits/pb_title_count.js";
-import "../kits/pb_user.js";
+import "../kits/pb_image.js";
+import "../kits/pb_input.js";
+import "../kits/pb_label_pill.js";
 import "../kits/pb_label_value.js";
+import "../kits/pb_layout.js";
+import "../kits/pb_line_graph.js";
+import "../kits/pb_loading_inline.js";
 import "../kits/pb_message.js";
-import "../kits/pb_timestamp.js";
 import "../kits/pb_online_status.js";
+import "../kits/pb_person.js";
+import "../kits/pb_person_contact.js";
+import "../kits/pb_pill.js";
+import "../kits/pb_progress_simple.js";
+import "../kits/pb_section_separator.js";
 import "../kits/pb_source.js";
-import "../kits/pb_label_pill.js";
-import "../kits/pb_phone.js";
-import "../kits/pb_owner_phone.js";
-import "../kits/pb_owner.js";
-import "../kits/pb_toggle.js";
-import "../kits/pb_stat_value.js";
+import "../kits/pb_star_rating.js";
 import "../kits/pb_stat_change.js";
-import "../kits/pb_section_separator.js";
-import "../kits/pb_currency.js";
-import "../kits/pb_fixed_confirmation_toast.js";
-import "../kits/pb_loading_inline.js";
-import "../kits/pb_checkbox.js";
-import "../kits/pb_home_address_street.js";
-import "../kits/pb_badge.js";
-import "../kits/pb_date_year_stacked.js";
-import "../kits/pb_date_range_inline.js";
-import "../kits/pb_distribution_bar.js";
-import "../kits/pb_hashtag.js";
+import "../kits/pb_stat_value.js";
+import "../kits/pb_table.js";
+import "../kits/pb_time.js";
+import "../kits/pb_timestamp.js";
+import "../kits/pb_title.js";
+import "../kits/pb_title_count.js";
+import "../kits/pb_title_detail.js";
+import "../kits/pb_toggle.js";
+import "../kits/pb_user.js";
+import "../kits/pb_user_badge.js";
+import "../kits/pb_vertical_nav.js";

data/app/pb_kits/playbook/packs/main.scss

@@ -2,7 +2,7 @@
 @import "site_styles/scaffold";
 
 // KITS
-@import "site_styles/kit_style_index";
+@import "../playbook";
 
 // APP STYLES
 @import "site_styles/site-style";

data/app/pb_kits/playbook/packs/site_styles/_site-style.scss

@@ -11,6 +11,13 @@
     border-bottom: 1px solid $border_light;
     padding: 20px 30px;
     background: $white;
+    h1 {
+      display: flex;
+      align-items: center;
+      img {
+        display: flex;
+      }
+    }
   }
 
   &--content {

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -1,4 +1,4 @@
-import commonSettings from "../pb_dashboard/commonSettings.js";
+import { commonSettings } from "../pb_dashboard/commonSettings.js";
 import typography from "../tokens/_typography.scss";
 
 const sizeColumns = function(highchart) {

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -1,8 +1,9 @@
 /* @flow */
 
-import React, { Component } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
+type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
   aria?: {
     label: String,
@@ -16,6 +17,7 @@ type ButtonPropTypes = {
   icon?: String,
   loading?: Boolean,
   newWindow?: Boolean,
+  onClick?: EventHandler,
   size: 'large' | 'medium' | 'small',
   text?: String,
   type: 'inline' | null,
@@ -27,62 +29,64 @@ type ButtonPropTypes = {
 
 const buttonClassName = (props: ButtonPropTypes) => {
   const {
-    dark=false,
-    disabled=false,
-    fullWidth=false,
-    loading=false,
-    size=null,
-    type='inline',
-    variant='primary',
+    dark = false,
+    disabled = false,
+    fullWidth = false,
+    loading = false,
+    size = null,
+    type = 'inline',
+    variant = 'primary',
   } = props
 
   let className = 'pb_button_kit'
 
-  className    += `${variant !== null ? `_${variant}` : ''}`
-  className    += `${type !== null ? `_${type}` : ''}`
-  className    += `${size !== null ? `_${size}` : ''}`
-  className    += `${dark === true ? '_dark' : ''}`
-  className    += `${fullWidth ? '_block' : ''}`
-  className    += disabled ? '_disabled' : '_enabled'
-  className    += loading ? '_loading' : ''
+  className += `${variant !== null ? `_${variant}` : ''}`
+  className += `${type !== null ? `_${type}` : ''}`
+  className += `${size !== null ? `_${size}` : ''}`
+  className += `${dark === true ? '_dark' : ''}`
+  className += `${fullWidth ? '_block' : ''}`
+  className += disabled ? '_disabled' : '_enabled'
+  className += loading ? '_loading' : ''
 
   return className
 }
 
 const buttonAriaProps = (props: ButtonPropTypes) => {
-  const { aria }  = props
-  if(typeof aria !== "object") return {}
+  const { aria } = props
+  if (typeof aria !== 'object') return {}
   const { label } = aria
 
   let ariaProps = {}
 
-  if(label !== null) ariaProps['aria-label'] = label
+  if (label !== null) ariaProps['aria-label'] = label
 
   return ariaProps
 }
 
-const Button = (props : ButtonPropTypes) => {
+const Button = (props: ButtonPropTypes) => {
   const {
-    aria={},
     children,
     className,
-    icon=null,
-    loading=false,
-    link=null,
-    newWindow=false,
+    icon = null,
+    loading = false,
+    onClick = () => {},
+    link = null,
+    newWindow = false,
     text,
-    htmlType='button',
-    value
+    htmlType = 'button',
+    value,
   } = props
 
-  const buttonAria  = buttonAriaProps(props)
-  const css         = classnames(buttonClassName(props), className)
-  const loadingIcon = <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon"/>
+  const buttonAria = buttonAriaProps(props)
+  const css = classnames(buttonClassName(props), className)
+  const loadingIcon = (
+    <i className='pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon' />
+  )
 
-  const content     = (
-    <span className="pb_button_content">
+  const content = (
+    <span className='pb_button_content'>
       <If condition={icon !== null}>
-        <i className={`pb_icon_kit far fa-${icon} fa-fw`}/>
+        <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
       </If>
       <span>{text || children}</span>
     </span>
@@ -91,26 +95,21 @@ const Button = (props : ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...buttonAria}
-          className={css}
-          href={link}
-          target={newWindow ? '_blank' : null}
-      >
-        <If condition={loading}>
-          {loadingIcon}
-        </If>
+        {...buttonAria}
+        className={css}
+        href={link}
+        target={newWindow ? '_blank' : null}>
+        <If condition={loading}>{loadingIcon}</If>
         {content}
       </a>
-    <Else/>
+      <Else />
       <button
-          {...buttonAria}
-          className={css}
-          type={htmlType}
-          value={value}
-      >
-        <If condition={loading}>
-            {loadingIcon}
-        </If>
+        {...buttonAria}
+        className={css}
+        onClick={onClick}
+        type={htmlType}
+        value={value}>
+        <If condition={loading}>{loadingIcon}</If>
         {content}
       </button>
     </If>

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -3,18 +3,24 @@ import {Button} from '../../'
 
 const ButtonDefault = () => (
     <div>
-        <Button text="Button Primary" />
         <Button
+                onClick={() => console.log("button clicked!")}
+                text="Button Primary"
+        />
+        <Button
+                onClick={() => console.log("button clicked!")}
                 text="Button Secondary"
                 variant="secondary"
         />
         <Button
+                onClick={() => console.log("button clicked!")}
                 text="Button Link"
                 variant="link"
         />
         <Button
-                text="Button Disabled"
                 disabled
+                onClick={() => console.log("button clicked!")}
+                text="Button Disabled"
         />
     </div>
 )

data/app/pb_kits/playbook/pb_card/_card.html.erb

@@ -3,7 +3,7 @@
     data: object.data,
     class: object.classname,
     aria: object.aria) do %>
-  <% if object.block %>
-    <%= pb_rails("card/card_body", props: { padding: object.padding}) { capture(&object.block) } %>
+  <% if object.children %>
+    <%= pb_rails("card/card_body", props: { padding: object.padding, children: object.children }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_card/child_kits/_card_body.html.erb

@@ -3,5 +3,5 @@
     data: object.data,
     class: object.classname,
     aria: object.aria) do %>
-  <%= capture(&object.block) %>
+  <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_contact/_contact.html.erb

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

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -0,0 +1,72 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  Body,
+  Icon,
+} from '../'
+
+type ContactProps = {
+  contactType?: 'cell' | 'home' | 'work' | 'email',
+  className?: String | Array<String>,
+  dark?: Boolean,
+  contactValue: String,
+}
+
+const kitClasses = ({}: ContactProps) => {
+  let classname = 'pb_contact_kit'
+  return classname
+}
+
+const Contact = ({
+  contactType,
+  className,
+  dark=false,
+  contactValue,
+}: ContactProps) => {
+
+  const css = classnames(kitClasses({contactType}), className)
+
+  const formatPhoneNumber = (phoneNumberString, contactType) => {
+    if (contactType == "email") {
+      return phoneNumberString
+    } else {
+      let cleaned = ('' + phoneNumberString).replace(/\D/g, '')
+      let match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
+      if (match) {
+        let intlCode = (match[1] ? '+1 ' : '')
+        return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('')
+      }
+      return null
+    }
+  }
+
+  const contactTypeIcon = (function(contactType) {
+    switch(contactType) {
+      case 'cell':
+        return 'mobile';
+      case 'home':
+        return 'phone';
+      case 'work':
+        return 'phone-office';
+      case 'email':
+        return 'envelope';
+      default:
+        return 'phone';
+    }
+  })(contactType)
+
+  return (
+    <div className={css}>
+      <Body dark={dark} color="light" >
+        <Icon icon={contactTypeIcon} fixedWidth="true" />
+        {` ${formatPhoneNumber(contactValue, contactType)}`}
+      </Body>
+    </div>
+  )
+}
+
+export default Contact

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+require "action_view"
+
+module Playbook
+  module PbContact
+    class Contact < Playbook::PbKit::Base
+      include ActionView::Helpers::NumberHelper
+
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_contact_type
+                 configured_contact_value].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     contact_type: default_configuration,
+                     contact_value: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_contact_type = contact_type
+        self.configured_contact_value = contact_value
+      end
+
+      def contact_type
+        case configured_contact_type
+        when "cell"
+          icon = "mobile"
+        when "home"
+          icon = "phone"
+        when "work"
+          icon = "phone-office"
+        when "email"
+          icon = "envelope"
+        else # "unknown" || "other"
+          icon = "phone"
+        end
+        contact_type_props = { icon: icon, fixed_width: true }
+        pb_contact_type = Playbook::PbIcon::Icon.new(contact_type_props)
+        ApplicationController.renderer.render(partial: pb_contact_type, as: :object)
+      end
+
+      def contact_value
+        if is_set? configured_contact_value
+          unless configured_contact_type == "email"
+            new_value = number_to_phone(formatted_value, area_code: true) if formatted_value
+          else
+            new_value = configured_contact_value
+          end
+          pb_body = Playbook::PbBody::Body.new(color: "light") do
+            contact_type + new_value
+          end
+          ApplicationController.renderer.render(partial: pb_body, as: :object)
+        end
+      end
+
+      def formatted_value
+        configured_contact_value.to_s.gsub(/\D/, "")
+      end
+
+      def to_partial_path
+        "pb_contact/contact"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end