playbook_ui 7.13.0 → 7.16.0.pre.alpha1

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md

@@ -0,0 +1 @@
+Selectable Cards can show an input indicating state.

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb

@@ -26,5 +26,5 @@
   }) do %>
     Other
   <% end %>
-  
-</div>
+
+</div>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx

@@ -1,60 +1,53 @@
-import React from 'react'
+import React, { useState } from 'react'
 import SelectableCard from '../_selectable_card.jsx'
 
-class SelectableCardSingleSelect extends React.Component {
-  state = {
-    selected: null,
+const SelectableCardSingleSelect = (props) => {
+  const [selected, setSelected] = useState(null)
+  const handleSelect = (event) => {
+    setSelected(event.target.value)
   }
 
-  handleSelect = (event) => {
-    this.setState({
-      selected: event.target.value,
-    })
-  }
-
-  render(props) {
-    return (
-      <div className="pb--doc-demo-row">
-
-        <SelectableCard
-            checked={this.state.selected === 'male'}
-            inputId="male1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="male"
-            {...props}
-        >
-          {'Male'}
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.selected === 'female'}
-            inputId="female1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="female"
-            {...props}
-        >
-          {'Female'}
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.selected === 'other'}
-            inputId="other1"
-            multi={false}
-            name="gender"
-            onChange={this.handleSelect.bind(this)}
-            value="other"
-            {...props}
-        >
-          {'Other'}
-        </SelectableCard>
-
-      </div>
-    )
-  }
+  return (
+    <div className="pb--doc-demo-row">
+
+      <SelectableCard
+          checked={selected === 'male'}
+          inputId="male1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="male"
+          {...props}
+      >
+        {'Male'}
+      </SelectableCard>
+
+      <SelectableCard
+          checked={selected === 'female'}
+          inputId="female1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="female"
+          {...props}
+      >
+        {'Female'}
+      </SelectableCard>
+
+      <SelectableCard
+          checked={selected === 'other'}
+          inputId="other1"
+          multi={false}
+          name="gender"
+          onChange={handleSelect}
+          value="other"
+          {...props}
+      >
+        {'Other'}
+      </SelectableCard>
+
+    </div>
+  )
 }
 
 export default SelectableCardSingleSelect

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

@@ -6,6 +6,8 @@ examples:
   - selectable_card_block: Block
   - selectable_card_options: With Options
   - selectable_card_image: Image Example
+  - selectable_card_input: Input Variant
+  - selectable_card_error: With Errors
 
 
   react:
@@ -13,3 +15,5 @@ examples:
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
   - selectable_card_image: Image Example
+  - selectable_card_input: Input Variant
+  - selectable_card_error: With Errors

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

@@ -1,4 +1,6 @@
 export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
 export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
 export { default as SelectableCardBlock } from './_selectable_card_block.jsx'
+export { default as SelectableCardError } from './_selectable_card_error.jsx'
 export { default as SelectableCardImage } from './_selectable_card_image.jsx'
+export { default as SelectableCardInput } from './_selectable_card_input.jsx'

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -0,0 +1,68 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+
+  <% if object.multi %>
+    <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
+  <% else %>
+    <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
+  <% end %>
+
+  <label class="<%= object.label_class %>" for="<%= object.input_id_present %>">
+    <div class="buffer">
+      <% if object.variant == "display_input" %>
+        <%= pb_rails("flex", props: { vertical: "center" }) do %>
+          <%= pb_rails("flex", props: {
+            orientation: "column",
+            padding: "sm",
+            padding_right: "xs",
+            vertical: "center",
+          }) do %>
+            <%= pb_rails(object.input, props: { text: "" }) do %>
+              <input <%= object.is_checked %> <%= object.is_disabled %> id="checkbox-styled" name="<%= object.name %>-display" type="<%= object.input %>">
+            <% end %>
+          <% end %>
+          <div class="separator"></div>
+          <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
+            <% if content.nil? %>
+              <%= pb_rails("body", props: { text: object.text }) %>
+            <% else %>
+              <%= content %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% else %>
+        <% if content.nil? %>
+          <%= pb_rails("body", props: { text: object.text }) %>
+        <% else %>
+          <%= content %>
+        <% end %>
+        <% if object.icon %>
+          <div class="pb_selectable_card_circle">
+            <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </label>
+
+  <% if object.variant == "display_input" %>
+    <script>
+      var outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+      var innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+
+      outerCheckbox.addEventListener("change", () => {
+        const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+        const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+        innerCheckbox.checked = outerCheckbox.checked
+      })
+
+      innerCheckbox.addEventListener("change", () => {
+        const outerCheckbox = document.querySelector("input#<%= object.input_id || object.name %>")
+        const innerCheckbox = outerCheckbox.parentElement.querySelector("input#checkbox-styled")
+        outerCheckbox.checked = innerCheckbox.checked
+      })
+    </script>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -2,15 +2,13 @@
 
 module Playbook
   module PbSelectableCard
-    class SelectableCard
-      include Playbook::Props
-
-      partial "pb_selectable_card/selectable_card"
-
+    class SelectableCard < Playbook::KitBase
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :error, type: Playbook::Props::Boolean,
+                   default: false
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :multi, type: Playbook::Props::Boolean,
@@ -18,13 +16,23 @@ module Playbook
       prop :input_id, type: Playbook::Props::String
 
       prop :input_options, type: Playbook::Props::Hash,
-                                      default: {}
+                           default: {}
       prop :name
       prop :text
       prop :value
+      prop :variant, type: Playbook::Props::String,
+                     default: "default"
 
       def classname
-        generate_classname("pb_selectable_card_kit", checked_class, enable_disabled_class)
+        [
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+          error_class,
+          dark_props,
+        ].compact.join(" ")
+      end
+
+      def spacing_classname
+        generate_classname
       end
 
       def input_id_present
@@ -38,6 +46,26 @@ module Playbook
         )
       end
 
+      def input
+        multi ? "checkbox" : "radio"
+      end
+
+      def label_class
+        variant == "display_input" ? "p_none" : spacing_classname
+      end
+
+      def is_checked
+        checked ? "checked" : ""
+      end
+
+      def is_disabled
+        disabled ? "disabled" : ""
+      end
+
+      def status
+        error ? "negative" : nil
+      end
+
     private
 
       def checked_class
@@ -47,6 +75,10 @@ module Playbook
       def enable_disabled_class
         disabled ? "disabled" : "enabled"
       end
+
+      def error_class
+        error ? "error" : nil
+      end
     end
   end
 end

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

@@ -5,18 +5,18 @@
 
 	input[type="checkbox"],
 	input[type="radio"] {
-    
+
     transition-duration: $transition_short;
-    
+
 		&:checked ~ label {
       transition-timing-function: $easeIn;
 			color: $primary;
-		
+
 				h4 {
 					color: $primary;
 				}
 			}
-        
+
     &:not(:checked) ~ label {
       transition-timing-function: $easeOut;
         color: $slate;
@@ -26,7 +26,7 @@
     &[class*=_disabled] {
       opacity: $opacity_6;
       cursor: not-allowed;
-      
+
       * {
           cursor: not-allowed;
       }
@@ -35,10 +35,10 @@
   &.dark {
 
     input[type="checkbox"],
-    input[type="radio"] {       
-      
+    input[type="radio"] {
+
       transition-duration: $transition_short;
-      
+
       &:checked ~ label {
         transition-timing-function: $easeIn;
         color: $active_dark;

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableCardIcon
-    class SelectableCardIcon
-      include Playbook::Props
-
-      partial "pb_selectable_card_icon/selectable_card_icon"
-
+    class SelectableCardIcon < Playbook::KitBase
       # Icon and text props
       prop :icon, type: Playbook::Props::String
       prop :title_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableIcon
-    class SelectableIcon
-      include Playbook::Props
-
-      partial "pb_selectable_icon/selectable_icon"
-
+    class SelectableIcon < Playbook::KitBase
       # Icon props
       prop :icon, type: Playbook::Props::String
       # Title text

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.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableList
-      include Playbook::Props
-
-      partial "pb_selectable_list/selectable_list"
-
+    class SelectableList < Playbook::KitBase
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[radio checkbox],
                      default: "checkbox"

data/app/pb_kits/playbook/pb_selectable_list/{_selectable_list_item.html.erb → selectable_list_item.html.erb}

@@ -3,16 +3,15 @@
     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) %>
+    <% if content.present? %>
+      <%= content %>
     <% end %>
   <% else %>
     <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -2,9 +2,7 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableListItem
-      include Playbook::Props
-
+    class SelectableListItem < Playbook::KitBase
       prop :tabindex
 
       prop :checked, type: Playbook::Props::Boolean,
@@ -18,8 +16,6 @@ module Playbook
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
-      partial "pb_selectable_list/selectable_list_item"
-
       def classname
         generate_classname("pb_selectable_list_item_kit")
       end

data/app/pb_kits/playbook/pb_source/source.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSource
-    class Source
-      include Playbook::Props
-
-      partial "pb_source/source"
-
+    class Source < Playbook::KitBase
       prop :hide_icon, type: Playbook::Props::Boolean,
                        default: false
       prop :source, type: Playbook::Props::String