playbook_ui 4.15.0 → 4.18.0

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb

@@ -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_progress_pills/_progress_pills.jsx

@@ -2,14 +2,26 @@
 
 import React from 'react'
 import { Body, Title } from '../'
+import classnames from 'classnames'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressPillsProps = {
   active?: Number,
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
   steps?: Number,
   title?: String,
   value?: String,
   dark?: Boolean,
-
 }
 
 const showSteps = (steps, active, dark) => {
@@ -22,22 +34,41 @@ const showSteps = (steps, active, dark) => {
   return items
 }
 
-const ProgressPill = ({
-  active,
-  dark,
-  step,
-}: ProgressPillProps) => (
+const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
-      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? '_dark' : null}`}
+      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
+      dark ? '_dark' : ''
+    }`}
       key={step}
   />
 )
 
-const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark = false }: ProgressPillsProps) => {
+const ProgressPills = (props: ProgressPillsProps) => {
+  const {
+    active = 0,
+    aria = {},
+    className,
+    data = {},
+    id,
+    steps = 3,
+    title,
+    value,
+    dark = false,
+  } = props
   const darkClass = dark ? '_dark' : ''
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, spacing(props))
+
   return (
-    <div className={`pb_progress_pills_kit${darkClass}`}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+
       <If condition={title}>
         <div className="progress_pills_status">
           <Title
@@ -53,10 +84,7 @@ const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark
           />
         </div>
       </If>
-
-      <div className="progress_pills">
-        {showSteps(steps, active, dark)}
-      </div>
+      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -13,19 +14,20 @@ type ProgressSimpleProps = {
   muted: Boolean,
   percent: String,
   value: Number,
-  width: String
+  width: String,
 }
 
-const ProgressSimple = ({
-  align,
-  className,
-  dark = false,
-  max,
-  muted = false,
-  percent = '',
-  value,
-  width = '100%',
-}: ProgressSimpleProps) => {
+const ProgressSimple = (props: ProgressSimpleProps) => {
+  const {
+    align,
+    className,
+    dark = false,
+    max,
+    muted = false,
+    percent = '',
+    value,
+    width = '100%',
+  } = props
   const styles = {
     width: width,
   }
@@ -36,7 +38,8 @@ const ProgressSimple = ({
 
   const wrapperClass = classnames(
     className,
-    buildCss('pb_progress_simple_wrapper', align, { dark: dark })
+    buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
+    spacing(props)
   )
 
   const kitClass = classnames(

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -3,30 +3,37 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressStepProps = {
   className?: String,
   data?: String,
   id?: String,
   children?: Array<React.ReactChild>,
-  orientation?: 'horizontal' | 'vertical',
+  orientation?: "horizontal" | "vertical",
   icon?: Boolean,
   dark?: Boolean,
 }
 
-const ProgressStep = ({
-  className,
-  children,
-  orientation = 'horizontal',
-  icon = false,
-  dark = false,
-}: ProgressStepProps) => {
+const ProgressStep = (props: ProgressStepProps) => {
+  const {
+    className,
+    children,
+    orientation = 'horizontal',
+    icon = false,
+    dark = false,
+  } = props
   const iconStyle = icon === true ? 'icon' : ''
   const darkStyle = dark === true ? 'dark' : ''
-  const progressStepCss = buildCss('pb_progress_step_kit', orientation, iconStyle, darkStyle)
+  const progressStepCss = buildCss(
+    'pb_progress_step_kit',
+    orientation,
+    iconStyle,
+    darkStyle
+  )
 
   return (
-    <div className={classnames(progressStepCss, className)}>
+    <div className={classnames(progressStepCss, className, spacing(props))}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -3,6 +3,8 @@
 
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type RadioProps = {
   className?: String,
@@ -38,7 +40,7 @@ const Radio = ({
 
   return (
     <label
-        className={'pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className}
+        className={classnames('pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className, spacing(props))}
         htmlFor={id}
     >
       <If condition={children}>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb

@@ -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_section_separator/_section_separator.jsx

@@ -1,30 +1,45 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import Caption from '../pb_caption/_caption.jsx'
+import { Caption } from '../'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type SectionSeparatorProps = {
+  aria: object,
   className: String,
+  dark?: Boolean,
+  data: object,
+  id: String,
+  orientation?: "horizontal" | "vertical",
   text: String,
-  orientation?: 'horizontal' | 'vertical',
-  variant?: 'card' | 'background',
-  dark?: Boolean
+  variant?: "card" | "background",
 }
 
-const SectionSeparator = ({
-  className,
-  text,
-  orientation = 'horizontal',
-  variant = 'card',
-  dark = false,
-}: SectionSeparatorProps) => {
+const SectionSeparator = (props: SectionSeparatorProps) => {
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    orientation = 'horizontal',
+    text,
+    variant = 'card',
+  } = props
   const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames([
-    `pb_section_separator_kit_${variant}_${orientation}` + themeStyle,
-    className])
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, spacing(props))
 
   return (
-    <div className={css}>
+
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <span>
         <Caption text={text} />
       </span>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -3,7 +3,9 @@ import { SectionSeparator } from '../../'
 
 const SectionSeparatorText = () => {
   return (
-    <SectionSeparator text="Title Separator" />
+    <SectionSeparator
+        text="Title Separator"
+    />
   )
 }
 

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

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react'
-
+import classnames from 'classnames'
 import {
   Body,
   Caption,
@@ -14,6 +14,8 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
+import { spacing } from '../utilities/spacing.js'
+
 import type { InputCallback } from '../types'
 
 type SelectOption = {
@@ -70,7 +72,7 @@ const Select = ({
   ...props
 }: SelectProps) => {
   const errorClass = error ? ' error' : ''
-  const css = buildCss('pb_select', { dark }) + errorClass
+  const css = classnames(buildCss('pb_select', { dark }) + errorClass, spacing(props))
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)

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

@@ -13,6 +13,8 @@ import {
   noop,
 } from '../utilities/props'
 
+import { spacing } from '../utilities/spacing.js'
+
 type Props = {
   aria: Object,
   checked: Boolean,
@@ -28,7 +30,7 @@ type Props = {
   name?: String,
   onChange: InputCallback<HTMLInputElement>,
   text?: String,
-  value?: String
+  value?: String,
 }
 
 const SelectableCard = ({
@@ -53,10 +55,10 @@ const SelectableCard = ({
 
   const css = buildCss({
     'pb_selectable_card_kit': true,
-    'checked': checked,
-    'dark': dark,
-    'disabled': disabled,
-    'enabled': !disabled,
+    checked: checked,
+    dark: dark,
+    disabled: disabled,
+    enabled: !disabled,
   })
 
   const displayIcon = () => {
@@ -92,8 +94,11 @@ const SelectableCard = ({
           type={inputType}
           value={value}
       />
-      <label htmlFor={inputIdPresent}>
-        { text || children }
+      <label
+          className={spacing(props)}
+          htmlFor={inputIdPresent}
+      >
+        {text || children}
         {displayIcon()}
       </label>
     </div>

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb

@@ -0,0 +1,30 @@
+<%= content_tag(:div,
+    data: object.data,
+    class: object.classname) do %>
+  
+  <%= pb_rails("selectable_card", props: {
+    input_id: object.input_id,
+    name: object.name,
+    value: object.value,
+    checked: object.checked,
+    disabled: object.disabled,
+    icon: object.checkmark,
+    multi: object.multi,
+    dark: object.dark
+  }) do %>
+
+    <%= pb_rails("selectable_icon", props: {
+      icon: object.icon,
+      inputs: "disabled",
+      text: object.title_text,
+      dark: object.dark
+    }) %>
+
+    <%= pb_rails("body", props: {
+      text: object.body_text,
+      color: "light",
+      dark: object.dark
+    }) %>
+
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx

@@ -0,0 +1,97 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { Body, SelectableCard, SelectableIcon } from '../'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type SelectableCardIconProps = {
+  aria?: Object,
+  checked?: Boolean,
+  checkmark: Boolean,
+  className?: String,
+  dark?: Boolean,
+  data?: Object,
+  disabled?: Boolean,
+  icon?: String,
+  inputId?: String,
+  multi?: Boolean,
+  name?: String,
+  titleText?: String,
+  bodyText?: String,
+  value?: String,
+  onChange?: (e) => void,
+}
+
+const SelectableCardIcon = ({
+  aria = {},
+  checkmark = false,
+  checked = false,
+  className,
+  dark = false,
+  data = {},
+  disabled = false,
+  icon,
+  inputId,
+  multi = true,
+  name,
+  titleText,
+  bodyText,
+  value,
+  onChange,
+}: SelectableCardIconProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_selectable_card_icon_kit': true,
+    'checked': checked,
+    'dark': dark,
+    'disabled': disabled,
+    'enabled': !disabled,
+  })
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+    >
+      <SelectableCard
+          checked={checked}
+          dark={dark}
+          disabled={disabled}
+          icon={checkmark}
+          inputId={inputId}
+          multi={multi}
+          name={name}
+          onChange={onChange}
+          value={value}
+      >
+        {
+          <>
+            <SelectableIcon
+                dark={dark}
+                icon={icon}
+                inputs="disabled"
+                size="2x"
+                text={titleText}
+            />
+            <Body
+                color="light"
+                dark={dark}
+                text={bodyText}
+            />
+          </>
+        }
+      </SelectableCard>
+    </div>
+  )
+}
+
+export default SelectableCardIcon