playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -0,0 +1,23 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  
+  <div class="pb_progress_step_item_wrapper">
+    <div class="pb_progress_step_item_connector_first"></div>
+    <div class="pb_progress_step_item_step_wrapper">
+      <div class="pb_progress_step_item_step">
+        <div class="pb_progress_step_item_step_connector_first"></div>
+        <div class="pb_progress_step_item_step_circle">
+          <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
+        </div>
+        <div class="pb_progress_step_item_step_connector_second"></div>
+      </div>
+      <div>
+        <%= capture(&object.children) %>
+      </div>
+    </div>
+    <div class="pb_progress_step_item_connector_second"></div>
+  </div>
+
+<% end %>

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

@@ -0,0 +1,44 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { Icon } from '..'
+
+type ProgressStepItemProps = {
+  className?: String,
+  status?: 'complete' | 'active' | 'inactive',
+  children?: React.Node,
+}
+
+const ProgressStepItem = ({
+  className,
+  status = 'inactive',
+  children,
+}: ProgressStepItemProps) => {
+  const progressStepItem = buildCss('pb_progress_step_item_kit', status)
+
+  return (
+    <div className={classnames(progressStepItem, className)}>
+      <div className="pb_progress_step_item_wrapper">
+        <div className="pb_progress_step_item_connector_first" />
+        <div className="pb_progress_step_item_step_wrapper">
+          <div className="pb_progress_step_item_step">
+            <div className="pb_progress_step_item_step_connector_first" />
+            <div className="pb_progress_step_item_step_circle">
+              <Icon
+                  icon="check"
+              />
+            </div>
+            <div className="pb_progress_step_item_step_connector_second" />
+          </div>
+          <div>
+            {children}
+          </div>
+        </div>
+        <div className="pb_progress_step_item_connector_second" />
+      </div>
+    </div>
+  )
+}
+export default ProgressStepItem

data/app/pb_kits/playbook/pb_progress_step/docs/_description.md

@@ -0,0 +1 @@
+Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle. 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon: true, dark: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepDark = () => (
+  <div>
+    <ProgressStep
+        dark
+        icon
+    >
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepDark

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+      Child
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepDefault = () => (
+  <div>
+    <ProgressStep icon>
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+    <br />
+
+    <ProgressStep>
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+    <br />
+
+    <ProgressStep>
+      <ProgressStepItem status="complete">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        {'Child'}
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepDefault

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("progress_step", props: {orientation: "vertical", icon: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br />
+
+<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br />
+
+<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+    Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+    Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+    Child
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepVertical = () => (
+  <div>
+    <ProgressStep
+        icon
+        orientation="vertical"
+    >
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+
+    <ProgressStep orientation="vertical">
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+
+    <ProgressStep orientation="vertical">
+      <ProgressStepItem status="complete">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        {'Child'}
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepVertical

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - progress_step_default: Default
+  - progress_step_vertical: Vertical
+  - progress_step_dark: Dark
+  
+  
+  react:
+  - progress_step_default: Default
+  - progress_step_vertical: Vertical
+  - progress_step_dark: Dark

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

@@ -0,0 +1,3 @@
+export { default as ProgressStepDefault } from './_progress_step_default.jsx'
+export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
+export { default as ProgressStepDark } from './_progress_step_dark.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbProgressStep
+    class ProgressStep
+      include Playbook::Props
+
+      partial "pb_progress_step/progress_step"
+
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[vertical horizontal],
+                         default: "horizontal"
+      prop :icon, type: Playbook::Props::Boolean,
+                  default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def classname
+        generate_classname("pb_progress_step_kit", orientation, icon_class, dark_class)
+      end
+
+    private
+
+      def icon_class
+        icon === true ? "icon" : nil
+      end
+
+      def dark_class
+        dark === true ? "dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbProgressStep
+    class ProgressStepItem
+      include Playbook::Props
+
+      partial "pb_progress_step/progress_step_item"
+
+      prop :status, type: Playbook::Props::Enum,
+                    values: %w[complete active inactive],
+                    default: "inactive"
+
+      def classname
+        generate_classname("pb_progress_step_item_kit", status)
+      end
+    end
+  end
+end

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)