playbook_ui 4.15.0 → 4.18.0

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb

@@ -3,7 +3,7 @@
   data: object.data,
   class: object.classname) do %>
 
-  <%= pb_rails("button", props: {type: object.type, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -1,6 +1,7 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 import { Button, Icon } from '../'
 
 import type { Callback } from '../types'
@@ -9,13 +10,17 @@ import {
   noop,
 } from '../utilities/props'
 
+import { spacing } from '../utilities/spacing.js'
+
 type CircleIconButtonProps = {
   className?: String,
   dark?: Boolean,
   disabled?: Boolean,
   icon: String,
   id?: String,
+  link?: String,
   onClick?: Callback,
+  newWindow?: Boolean,
   type?: 'button' | 'submit' | 'reset',
   variant?: 'primary' | 'secondary' | 'link',
 }
@@ -27,14 +32,18 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
     icon,
     onClick = noop,
     type,
+    link,
+    newWindow,
     variant,
   } = props
 
   return (
-    <div className="pb_circle_icon_button_kit">
+    <div className={classnames('pb_circle_icon_button_kit', spacing(props))}>
       <Button
           dark={dark}
           disabled={disabled}
+          link={link}
+          newWindow={newWindow}
           onClick={onClick}
           text={null}
           type={type}

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -16,7 +16,9 @@ module Playbook
       prop :icon, required: true
       prop :dark, type: Playbook::Props::Boolean,
                      default: false
-
+      prop :link
+      prop :new_window, type: Playbook::Props::Boolean,
+                     default: false
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("circle_icon_button", props: {
+  variant: "primary",
+  icon: "search",
+  link: "https://google.com"
+}) %>
+<%= pb_rails("circle_icon_button", props: {
+  variant: "primary",
+  icon: "window",
+  link: "https://google.com",
+  new_window: true
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { CircleIconButton } from '../../'
+
+const CircleIconButtonLink = () => (
+  <div>
+    <CircleIconButton
+        icon="search"
+        link="https://google.com"
+        variant="primary"
+
+    />
+
+    <br />
+
+    <CircleIconButton
+        icon="window"
+        link="https://google.com"
+        newWindow
+        variant="secondary"
+    />
+
+  </div>
+)
+
+export default CircleIconButtonLink

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

@@ -3,8 +3,10 @@ examples:
   rails:
   - circle_icon_button_default: Default
   - circle_icon_button_dark: Dark
+  - circle_icon_button_link: Link
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
-  - circle_icon_button_dark: Dark
+  - circle_icon_button_dark: Dark
+  - circle_icon_button_link: Link

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

@@ -1,3 +1,4 @@
 export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonDark } from './_circle_icon_button_dark.jsx'
+export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'

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

@@ -1,10 +1,23 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= pb_rails("body", props: { tag: "span", classname: "pb_contact_kit", color: "light" }) do %>
-    <%= pb_rails("icon", props: { icon: object.contact_icon, fixed_width: true }) %>
+  <%= pb_rails("body", props: { 
+        tag: "span", 
+        classname: "pb_contact_kit", 
+        color: "light" 
+      }) do %>
+    <%= pb_rails("icon", props: { 
+          icon: object.contact_icon, 
+          fixed_width: true 
+        }) %>
     <%= object.formatted_contact_value if object.contact_value %>
-    <%= pb_rails("caption", props: { text: object.contact_detail, tag: 'span', size: 'xs' }) if object.contact_detail %>
+
+    <%= pb_rails("caption", props: { 
+          text: object.contact_detail, 
+          tag: 'span', 
+          size: 'xs'
+        }) if object.contact_detail %>
   <% end %>
 <% end %>

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

@@ -2,16 +2,18 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
+import { spacing } from '../utilities/spacing.js'
 import { Body, Caption, Icon } from '../'
 
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
 const contactTypeMap = {
   'cell': 'mobile',
+  'email': 'envelope',
   'home': 'phone',
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
-  'email': 'envelope',
-  'wrong number': 'slash-phone',
+  'wrong-phone': 'phone-slash',
 }
 
 const formatContact = (contactString, contactType) => {
@@ -22,47 +24,69 @@ const formatContact = (contactString, contactType) => {
   const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
   if (phoneNumber) {
     const intlCode = phoneNumber[1] ? '+1 ' : ''
-    return [intlCode, '(', phoneNumber[2], ') ', phoneNumber[3], '-', phoneNumber[4]].join('')
+    return [
+      intlCode,
+      '(',
+      phoneNumber[2],
+      ') ',
+      phoneNumber[3],
+      '-',
+      phoneNumber[4],
+    ].join('')
   }
   return null
 }
 
 type ContactProps = {
-  contactType?: 'cell' | 'home' | 'work' | 'email' | 'wrong number',
+  aria?: object,
   className?: String | Array<String>,
-  dark?: Boolean,
-  contactValue: String,
   contactDetail?: String,
+  contactType?: String,
+  contactValue: String,
+  data?: object,
+  id?: String,
 }
 
-const Contact = ({
-  contactType,
-  className,
-  dark = false,
-  contactValue,
-  contactDetail = '',
-}: ContactProps) => (
-  <div className={classnames('pb_contact_kit', className)}>
-    <Body
-        className="pb_contact_kit"
-        color="light"
-        dark={dark}
-        tag="span"
+const Contact = (props: ContactProps) => {
+  const {
+    aria = {},
+    className,
+    contactDetail,
+    contactType,
+    contactValue,
+    data = {},
+    id } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_contact_kit'), className, spacing(props))
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
-      <Icon
-          fixedWidth
-          icon={contactTypeMap[contactType] || 'phone'}
-      />
-      {` ${formatContact(contactValue, contactType)} `}
-      <If condition={contactDetail}>
-        <Caption
-            size="xs"
-            tag="span"
-            text={contactDetail}
+      <Body
+          className="pb_contact_kit"
+          color="light"
+          tag="span"
+      >
+        <Icon
+            fixedWidth
+            icon={contactTypeMap[contactType] || 'phone'}
         />
-      </If>
-    </Body>
-  </div>
-)
+        {` ${formatContact(contactValue, contactType)} `}
+        <If condition={contactDetail}>
+          <Caption
+              size="xs"
+              tag="span"
+              text={contactDetail}
+          />
+        </If>
+      </Body>
+    </div>
+  )
+}
 
 export default Contact

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -9,7 +9,7 @@
 
 <%= pb_rails("contact", props: {
   contact_type: "email",
-  contact_value: "email@example.com"
+  contact_value: "email@example.com",
 }) %>
 
 <%= pb_rails("contact", props: {

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -18,6 +18,7 @@ const ContactDefault = () => {
       <Contact
           contactType="work"
           contactValue="3245627482"
+
       />
       <Contact
           contactType="work-cell"

data/app/pb_kits/playbook/pb_currency/_currency.html.erb

@@ -1,18 +1,16 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
 
-  <%= object.label_element %>
+  <%= pb_rails("caption", props: { text: object.label }) %>
 
   <div class="pb_currency_wrapper">
-    <%= object.currency_symbol_element %>
-    <%= object.amount_element %>
-    <%= pb_rails("body", props: {
-      text: object.units_element,
-      color: "light",
-      classname: "unit",
-      dark: object.dark
-    }) %>
+    <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+      <%= object.symbol %>
+    <% end %>
+    <%= pb_rails("title", props: object.title_props) %>
+    <%= pb_rails("body", props: object.body_props) %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -1,19 +1,24 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 
+import { spacing } from '../utilities/spacing.js'
 import { Body, Caption, Title } from '../'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type CurrencyProps = {
-  align?: 'left' | 'center' | 'right',
-  amount: string,
-  unit: string,
-  className?: string,
-  label?: string,
+  align?: 'center' | 'left' | 'right',
+  amount: String,
+  aria?: object,
+  className?: String,
+  dark?: Boolean,
+  data?: object,
+  id?: String,
+  label?: String,
   size?: 'sm' | 'md' | 'lg',
-  symbol?: string,
-  dark?: boolean,
+  symbol?: String,
+  unit?: String,
 }
 
 const sizes = {
@@ -22,20 +27,33 @@ const sizes = {
   sm: 4,
 }
 
-const Currency = ({
-  align = 'left',
-  amount,
-  unit,
-  className,
-  label = '',
-  size = 'sm',
-  symbol = '$',
-  dark = false,
-}: CurrencyProps) => {
+const Currency = (props: CurrencyProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    amount,
+    data = {},
+    id,
+    unit,
+    className,
+    label = '',
+    size = 'sm',
+    symbol = '$',
+    dark = false,
+  } = props
+
   const [whole, decimal = '00'] = amount.split('.')
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_currency_kit', align, size, { dark: dark }), className, spacing(props))
 
   return (
-    <div className={buildCss('pb_currency_kit', align, className, { dark: dark }, size)}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Caption>{label}</Caption>
 
       <div className="pb_currency_wrapper">
@@ -43,7 +61,6 @@ const Currency = ({
             className="dollar_sign"
             color="light"
             dark={dark}
-
         >
           {symbol}
         </Body>
@@ -60,7 +77,6 @@ const Currency = ({
             className="unit"
             color="light"
             dark={dark}
-
         >
           <If condition={unit}>
             {unit}

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -35,41 +35,36 @@ module Playbook
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
 
-      def currency_symbol_element
-        pb_dollar_sign = Playbook::PbBody::Body.new(
+      def currency_wrapper_props
+        {
           classname: "dollar_sign",
           color: "light",
-          dark: dark
-        ) { symbol }
-
-        ApplicationController.renderer.render(
-          partial: pb_dollar_sign,
-          as: :object
-        )
+          dark: dark,
+        }
       end
 
-      def label_element
-        pb_label = Playbook::PbCaption::Caption.new(text: label)
+      def title_props
+        {
+          size: size_value,
+          text: whole_value,
+          classname: "pb_currency_value",
+          dark: dark,
+        }
+      end
 
-        ApplicationController.renderer.render(
-          partial: pb_label,
-          as: :object
-        )
+      def body_props
+        {
+          text: units_element,
+          color: "light",
+          classname: "unit",
+          dark: dark,
+        }
       end
 
-      def amount_element
-        whole_part = amount.split(".")
-        pb_title = Playbook::PbTitle::Title.new(
-          size: size_value,
-          text: whole_part.first.to_s,
-          classname: "pb_currency_value",
-          dark: dark
-        )
+    private
 
-        ApplicationController.renderer.render(
-          partial: pb_title,
-          as: :object
-        )
+      def whole_value
+        amount.split(".").first.to_s
       end
 
       def units_element
@@ -81,8 +76,6 @@ module Playbook
         end
       end
 
-    private
-
       def size_value
         case size
         when "lg"