playbook_ui 7.0.0.pre.alpha1 → 7.0.0.pre.alpha2

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

@@ -1,23 +1,11 @@
-<%= content_tag(:div,
+<%= content_tag(:li,
   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 class="circle">
+        <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
       </div>
       <div>
         <%= capture(&object.children) %>
-      </div>
-    </div>
-    <div class="pb_progress_step_item_connector_second"></div>
-  </div>
-
+      <div>
 <% end %>

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

@@ -16,29 +16,19 @@ const ProgressStepItem = ({
   status = 'inactive',
   children,
 }: ProgressStepItemProps) => {
-  const progressStepItem = buildCss('pb_progress_step_item_kit', status)
+  const progressStepItem = buildCss('pb_progress_step_item', 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" />
+    <li className={classnames(progressStepItem, className)}>
+      <div className="circle">
+        <Icon
+            icon="check"
+        />
       </div>
-    </div>
+      <div>
+        {children}
+      </div>
+    </li>
   )
 }
 export default ProgressStepItem

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

@@ -1 +1,5 @@
-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. 
+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. 
+
+**Tracker**
+This kit variant only uses the *completed* and *inactive* statuses
+This variant takes children just like the default progress step. It is best to use the caption kit for children in this variant.

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

@@ -6,3 +6,29 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
   <% end %>
 <% end %>
+
+<br><br>
+
+<%= 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: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+<% end %>
+
+<br><br>
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal", dark: true, variant:"tracker"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= 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: "active"}) do %>
+  <% end %>
+<% end %>

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

@@ -1,4 +1,14 @@
-<%= pb_rails("progress_step", props: {orientation: "horizontal", icon: true}) do %>
+
+<%= 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: {classname:"connected", 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 %>
@@ -11,23 +21,27 @@
 
 <%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  step 1
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  step 2
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  step 3
   <% end %>
 <% end %>
 
+
 <br /><br />
 
-<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon:true}) do %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
-      Child
+  step 1
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-      Child
+  step 2
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
-      Child
+  step 3
   <% end %>
-<% end %>
+<% end %>

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

@@ -14,25 +14,13 @@ const ProgressStepDefault = () => (
     <br />
 
     <ProgressStep>
-      <ProgressStepItem status="complete" />
-      <ProgressStepItem status="active" />
-      <ProgressStepItem status="inactive" />
+      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
     </ProgressStep>
 
     <br />
     <br />
-
-    <ProgressStep>
-      <ProgressStepItem status="complete">
-        {'Child'}
-      </ProgressStepItem>
-      <ProgressStepItem status="active">
-        {'Child'}
-      </ProgressStepItem>
-      <ProgressStepItem status="inactive">
-        {'Child'}
-      </ProgressStepItem>
-    </ProgressStep>
   </div>
 )
 

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

@@ -0,0 +1,11 @@
+<%= pb_rails("progress_step",props:{ variant:"tracker"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+      <%= pb_rails("caption", props:{text: "Ordered"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+      <%= pb_rails("caption", props:{text: "Shipped"})%>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+      <%= pb_rails("caption", props:{text: "Delivered"})%>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+import { Caption } from '../../'
+const ProgressStepTracker = () => (
+  <div>
+    <ProgressStep
+        variant="tracker"
+    >
+      <ProgressStepItem status="complete">
+        <Caption>{'Ordered'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        <Caption>{'Shipped'}</Caption>
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        <Caption>{'Delivered'}</Caption>
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepTracker

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

@@ -25,7 +25,13 @@
     Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-    Child
+    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
+<br>
+<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
     Child

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

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

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

@@ -1,3 +1,4 @@
 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'
+export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'

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

@@ -12,11 +12,11 @@ module Playbook
                          default: "horizontal"
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
+      prop :variant, type: Playbook::Props::Enum,
+                         values: %w[default tracker],
+                         default: "default"
       def classname
-        generate_classname("pb_progress_step_kit", orientation, icon_class, dark_class)
+        generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class)
       end
 
     private
@@ -25,8 +25,11 @@ module Playbook
         icon === true ? "icon" : nil
       end
 
-      def dark_class
-        dark === true ? "dark" : nil
+      def variant_class
+        case variant
+        when "tracker"
+          "tracker"
+        end
       end
     end
   end

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

@@ -12,8 +12,9 @@ module Playbook
                     default: "inactive"
 
       def classname
-        generate_classname("pb_progress_step_item_kit", status)
+        generate_classname("pb_progress_step_item", status)
       end
+
     end
   end
 end

data/app/pb_kits/playbook/pb_radio/_radio.html.erb

@@ -1,9 +1,10 @@
 <%= content_tag(:label,
-    id: object.id,
-    data: object.data,
-    value: object.value,
+    aria: object.aria,
     checked: object.checked,
-    class: object.classname) do %>
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    value: object.value) do %>
 
     <% if object.children %>
       <%= capture(&object.children) %>
@@ -12,5 +13,5 @@
     <% end %>
 
     <span class="pb_radio_button"></span>
-    <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark}) %>
+    <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
 <% end %>

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

@@ -4,43 +4,49 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type RadioProps = {
-  className?: string,
-  data?: string,
-  error?: boolean,
-  id?: string,
-  label: string,
-  name: string,
-  value: string,
-  checked?: boolean,
-  dark?: boolean,
-  text: string,
+  aria?: object,
+  checked?: Boolean,
   children?: Node,
-  onChange: (boolean)=>void,
+  className?: String,
+  dark?: boolean,
+  data?: object,
+  error?: Boolean,
+  id?: String,
+  label: String,
+  name: String,
+  value: String,
+  text: String,
+  onChange: (Boolean)=>void,
 }
 
 const Radio = ({
-  checked = false,
+  aria = {},
   children,
-  className = '',
+  className,
   dark = false,
-  data,
+  data = {},
   error = false,
   id,
   label,
-  name,
-  value,
-  text,
+  name = 'radio_name',
+  text = 'Radio Text',
+  value = 'radio_text',
   onChange = () => {},
   ...props
 }: RadioProps) => {
-  const errorClass = error ? 'error' : ''
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
 
   return (
     <label
-        className={classnames('pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className, globalProps(props))}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         htmlFor={id}
     >
       <If condition={children}>
@@ -48,8 +54,7 @@ const Radio = ({
         <Else />
         <input
             {...props}
-            checked={checked}
-            data={data}
+            id={id}
             name={name}
             onChange={onChange}
             text={text}

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

@@ -29,7 +29,7 @@
       border: 6px solid $primary;
     }
   }
-  &[class*=_dark] {
+  &.dark {
     .pb_radio_button {
       border-color: $border_dark;
     }

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.jsx

@@ -3,17 +3,18 @@ import { Radio } from '../../'
 
 const RadioDark = () => {
   return (
-    <div>
+    <>
       <Radio
           dark
+          defaultChecked
           label="Power"
           name="Group1"
           value="Power"
       />
       <br />
       <Radio
-          checked
           dark
+          defaultChecked={false}
           label="Nitro"
           name="Group1"
           value="Nitro"
@@ -21,11 +22,12 @@ const RadioDark = () => {
       <br />
       <Radio
           dark
+          defaultChecked={false}
           label="Google"
           name="Group1"
           value="Google"
       />
-    </div>
+    </>
   )
 }
 export default RadioDark