RubyGems - playbook_ui - Versions diffs - 4.17.0.pre.alpha1 → 4.17.0 - Mend

playbook_ui 4.17.0.pre.alpha1 → 4.17.0

Files changed (145) hide show

data/app/pb_kits/playbook/pb_card/_card.scss CHANGED

@@ -99,11 +99,6 @@ $pb_card_padding:(
         @include pb_card_header_color($color_value);
       }
     }
-    @each $padding_name, $padding_value in $pb_card_padding {
-      &[class*=_#{$padding_name}] {
-          padding: $padding_value;
-      }
-    }
   }
   [class^=pb_card_body_kit] {
@@ -112,11 +107,6 @@ $pb_card_padding:(
     flex-basis: auto;
     min-height: 1px;
     border: 0;
-    @each $name, $padding_size in $pb_card_padding {
-      &[class*=_#{$name}] {
-        padding: $padding_size;
-      }
-    }
   }
   @each $name, $shadow in $box_shadows {

data/app/pb_kits/playbook/pb_card/card.rb CHANGED

@@ -8,9 +8,6 @@ module Playbook
       partial "pb_card/card"
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :padding, type: Playbook::Props::Enum,
-                     values: %w[none xs sm md lg xl],
-                     default: "md"
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none deep deeper deepest],
                     default: "none"
@@ -28,8 +25,17 @@ module Playbook
                            dark_class)
       end
+      def body_padding
+        if padding.present?
+           ""
+        else
+          "p_md"
+        end
+      end
     private
       def selected_class
         selected ? "selected" : "deselected"
       end

data/app/pb_kits/playbook/pb_card/card_body.rb CHANGED

@@ -7,12 +7,8 @@ module Playbook
       partial "pb_card/child_kits/card_body"
-      prop :padding, type: Playbook::Props::Enum,
-                     values: %w[none xs sm md lg xl],
-                     default: "md"
       def classname
-        generate_classname("pb_card_body_kit", padding)
+        generate_classname("pb_card_body_kit", padding, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_card/card_header.rb CHANGED

@@ -7,9 +7,6 @@ module Playbook
         partial "pb_card/child_kits/card_header"
-        prop :padding, type: Playbook::Props::Enum,
-                       values: %w[none xs sm md lg xl],
-                       default: "none"
         prop :category_color, type: Playbook::Props::Numeric,
                               default: 1

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb CHANGED

@@ -1,3 +1,4 @@
-<%= pb_rails("card") do %>
+<%= pb_rails("card", props: {
+})  do %>
   Card content
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx CHANGED

@@ -3,6 +3,8 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type CheckboxProps = {
   checked?: Boolean,
@@ -15,27 +17,24 @@ type CheckboxProps = {
   onChange: (Boolean) => void,
 }
-const Checkbox = ({
-  checked = false,
-  dark = false,
-  error = false,
-  name = '',
-  text = '',
-  value = '',
-  children = null,
-  onChange = () => {},
-}: CheckboxProps) => {
-  const bodyClassName = {
-    'pb_checkbox_label': true,
-  }
+const Checkbox = (props: CheckboxProps) => {
+  const {
+    checked = false,
+    dark = false,
+    error = false,
+    name = '',
+    text = '',
+    value = '',
+    children = null,
+    onChange = () => {},
+  } = props
   return (
     <label
-        className={
-        'pb_checkbox_kit' +
+        className={classnames('pb_checkbox_kit' +
         (dark === true ? '_dark' : '') +
-        (error === true ? ' error' : '')
+        (error === true ? ' error' : ''), spacing(props))
       }
     >
       <If condition={children}>
@@ -58,7 +57,7 @@ const Checkbox = ({
         />
       </span>
       <Body
-          className={bodyClassName}
+          className="pb_checkbox_label"
           dark={dark}
           status={error ? 'negative' : null}
       >

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

@@ -1,6 +1,7 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
 import { Button, Icon } from '../'
 import type { Callback } from '../types'
@@ -9,6 +10,8 @@ import {
   noop,
 } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type CircleIconButtonProps = {
   className?: String,
   dark?: Boolean,
@@ -35,7 +38,7 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
   } = props
   return (
-    <div className="pb_circle_icon_button_kit">
+    <div className={classnames('pb_circle_icon_button_kit', spacing(props))}>
       <Button
           dark={dark}
           disabled={disabled}

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -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/docs/_currency_dark.html.erb CHANGED

@@ -1,7 +1,7 @@
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   size: "lg",
-  dark: true
+  dark: true,
 }) %>
 <%= pb_rails("currency", props: {
@@ -10,7 +10,7 @@
   label: "Caption",
   size: "md",
   symbol: "€",
-  dark: true
+  dark: true,
 }) %>
 <%= pb_rails("currency", props: {
@@ -19,5 +19,5 @@
   label: "Caption",
   unit: "/mo",
   size: "sm",
-  dark: true
+  dark: true,
 }) %>