playbook_ui 7.4.0.pre.alpha5 → 7.4.0.pre.alpha6

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

@@ -12,7 +12,6 @@ type ProgressStepProps = {
   children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
-  showIcon?: boolean,
   variant?: string,
   color?: string,
 }
@@ -24,10 +23,9 @@ const ProgressStep = (props: ProgressStepProps) => {
     color,
     orientation = 'horizontal',
     icon = false,
-    showIcon = false,
     variant,
   } = props
-  const iconStyle = icon === true || showIcon === true ? 'icon' : ''
+  const iconStyle = icon === true ? 'icon' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
     orientation,

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

@@ -151,11 +151,8 @@
             .circle{
                 height: 24px;
                 width: 24px;
-                border: $primary solid $border_rad_light;
+                border: $primary solid 6px;
                 background-color: rgba($white, $opacity_8);
-                svg {
-                    color: darken($primary,25%);
-                }
             }
             &::before {
                 background-color: $primary;
@@ -252,16 +249,10 @@
     }
   }
 //End of Vertical
-  &[class*=icon]{
-    [class*=progress_step_item][class*=_complete],
-    [class*=progress_step_item][class*=_active] {
-        [class*=box] .circle svg {
-            opacity: 1;
-            
-        }
-    }
-    }
 
+  &[class*=icon] [class*=_complete] svg{
+    opacity: 1;
+  }
 
   &[class*=dark] {
     [class*=progress_step_item]{

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

@@ -4,7 +4,7 @@
   class: object.classname) do %>
     <div class="box">
       <div class="circle">
-        <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
+        <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
       </div>
       <div class="content">
         <%= capture(&object.children) %>

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

@@ -7,16 +7,14 @@ import { Icon } from '..'
 
 type ProgressStepItemProps = {
   className?: string,
-  status?: "complete" | "active" | "inactive" | "hidden",
+  status?: 'complete' | 'active' | 'inactive' | 'hidden',
   children?: React.Node,
-  icon?: string,
 }
 
 const ProgressStepItem = ({
   className,
   status = 'inactive',
   children,
-  icon = 'check',
 }: ProgressStepItemProps) => {
   const progressStepItem = buildCss('pb_progress_step_item', status)
 
@@ -24,9 +22,13 @@ const ProgressStepItem = ({
     <li className={classnames(progressStepItem, className)}>
       <div className="box">
         <div className="circle">
-          <Icon icon={icon} />
+          <Icon
+              icon="check"
+          />
+        </div>
+        <div className="content">
+          {children}
         </div>
-        <div className="content">{children}</div>
       </div>
     </li>
   )

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

@@ -3,11 +3,9 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_custom_icon: Custom Icon
   
   
   react:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_tracker_click_events: Using State

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

@@ -1,4 +1,3 @@
 export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
-export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'

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

@@ -12,14 +12,12 @@ module Playbook
                          default: "horizontal"
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
-      prop :show_icon, type: Playbook::Props::Boolean,
-                  default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default tracker],
                      default: "default"
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary info],
-                   default: "primary"
+                     values: %w[primary info],
+                     default: "primary"
       def classname
         generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
       end
@@ -27,7 +25,7 @@ module Playbook
     private
 
       def icon_class
-        icon === true || show_icon === true ? "icon" : nil
+        icon === true ? "icon" : nil
       end
 
       def variant_class

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

@@ -11,12 +11,6 @@ module Playbook
                     values: %w[complete active inactive hidden],
                     default: "inactive"
 
-      prop :icon, required: false, default: "check"
-
-      def name_icon
-        icon ? icon : "check"
-      end
-
       def classname
         generate_classname("pb_progress_step_item", status)
       end

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

@@ -19,7 +19,6 @@ type RadioProps = {
   label: String,
   name: String,
   value: String,
-  text: String,
   onChange: (Boolean)=>void,
 }
 
@@ -33,7 +32,6 @@ const Radio = ({
   id,
   label,
   name = 'radio_name',
-  text = 'Radio Text',
   value = 'radio_text',
   onChange = () => {},
   ...props
@@ -57,7 +55,6 @@ const Radio = ({
             id={id}
             name={name}
             onChange={onChange}
-            text={text}
             type="radio"
             value={value}
         />

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx

@@ -0,0 +1,90 @@
+/* @flow */
+import React, { Node } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { Checkbox, ListItem, Radio } from '..'
+
+type SelectableListItemProps = {
+  aria?: object,
+  children: array<Node> | Node,
+  checked?: boolean,
+  className?: string,
+  data?: object,
+  defaultChecked?: boolean,
+  id?: string,
+  label?: string,
+  text?: string,
+  name?: string,
+  value?: string,
+  variant?: string,
+  onChange: (boolean)=>void,
+}
+
+const SelectableListItem = ({
+  aria = {},
+  checked = false,
+  children,
+  className,
+  data = {},
+  defaultChecked,
+  id,
+  label,
+  text = '',
+  name = '',
+  value = '',
+  variant = 'checkbox',
+  onChange = () => {},
+  ...props
+}: SelectableListItemProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_selectable_list_item_kit'),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <ListItem {...props}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+      >
+        <Choose>
+          <When condition={variant == 'checkbox'}>
+            <Checkbox
+                checked={checked}
+                id={id}
+                name={name}
+                onChange={onChange}
+                // eslint suppressor, text is needed to display on screen
+                text={label || (text && false)}
+                type="checkbox"
+                value={value}
+                {...props}
+            />
+            {children}
+          </When>
+          <When condition={variant == 'radio'}>
+            <Radio
+                defaultChecked={defaultChecked}
+                id={id}
+                label={label}
+                name={name}
+                onChange={onChange}
+                type="radio"
+                value={value}
+                {...props}
+            />
+            {children}
+          </When>
+          <Otherwise>{children}</Otherwise>
+        </Choose>
+      </div>
+    </ListItem>
+  )
+}
+
+export default SelectableListItem

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= pb_rails("list") do %>
+        <% object.items.each do |item| %>
+          <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+        <% end %>
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx

@@ -0,0 +1,47 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { List } from  '..'
+import SelectableListItem from './_item.jsx'
+
+type SelectableListProps = {
+  aria?: object,
+  children?: Node,
+  className?: string,
+  data?: object,
+  id?: string,
+  variant?: 'checkbox' | 'radio',
+}
+
+const SelectableList = (props: SelectableListProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
+  const dataProps = buildDataProps(data)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <List {...props}>
+        {children}
+      </List>
+    </div>
+  )
+}
+
+SelectableList.Item = SelectableListItem
+
+export default SelectableList

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -0,0 +1,17 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+
+[class^=pb_selectable_list]{
+  margin-bottom: 0px;
+  [class^=pb_item_kit] {
+    &:hover {
+      background-color: $bg_light;
+    }
+  }
+  [class^=pb_radio_kit] {
+    margin-left: $space_xs;
+  }
+  [class^=pb_checkbox_kit] {
+    margin-left: $space_xs;
+  }
+}

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb

@@ -0,0 +1,18 @@
+<%= content_tag(:li,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+    <% puts object.variant %>
+  <% if object.variant == "radio"%>
+    <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
+    <% end %>
+  <% else %>
+    <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <% if object.children.present? %>
+      <%= capture(&object.children) %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,3 @@
+Selectable List Kit can take variants checkbox and radio. Regardless of which variant type, each selectable list item needs a `value`, `name`, and `id` (these props are `<input>` attributes).
+
+The Selectable List Item`id` prop will provide the `for` attribute to `<label>` in the kit, so no additional attributes are needed for the association between `<label>` and `<input>`.

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "checkbox",
+          items: [
+            { text: "Mild",
+              input_options: {
+                value: "1",
+                name: "checkbox-name-1",
+                id: "checkbox-id-1",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "checkbox-name-2",
+                id: "checkbox-id-2",
+              }
+            },
+            { text: "Hot",
+              input_options: {
+                value: "3",
+                name: "checkbox-name-3",
+                id: "checkbox-id-3",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { SelectableList } from '../..'
+
+const SelectableListDefault = () => {
+  return (
+    <div>
+      <SelectableList variant="checkbox">
+        <SelectableList.Item
+            id="checkbox-id-1"
+            label="Mild"
+            name="checkbox-name-1"
+            value="1"
+        />
+        <SelectableList.Item
+            checked
+            id="checkbox-id-2"
+            label="Medium"
+            name="checkbox-name-2"
+            value="2"
+        />
+        <SelectableList.Item
+            id="checkbox-id-3"
+            label="Hot"
+            name="checkbox-name-3"
+            value="3"
+        />
+      </SelectableList>
+    </div>
+  )
+}
+
+export default SelectableListDefault

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("selectable_list",
+        props: {
+          variant: "radio",
+          items: [
+            { text: "Small",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+                id: "radio-id-1",
+              }
+            },
+            { text: "Medium",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+                id: "radio-id-2",
+              }
+            },
+            { text: "Large",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+                id: "radio-id-3",
+              }
+            }
+          ]
+        }
+    )
+%>