playbook_ui 7.14.0 → 7.16.0.pre.alpha3

data/app/pb_kits/playbook/pb_select/{_select.html.erb → select.html.erb}

@@ -8,8 +8,8 @@
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
-    <% if object.children %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% else %>
       <%= select_tag(

data/app/pb_kits/playbook/pb_select/select.rb

@@ -4,13 +4,7 @@ require "action_view"
 
 module Playbook
   module PbSelect
-    class Select
-      include ActionView::Helpers::FormTagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_select/select"
-
+    class Select < Playbook::KitBase
       prop :blank_selection
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error

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

@@ -23,6 +23,7 @@ type SelectableCardProps = {
   dark?: boolean,
   data: object,
   disabled?: boolean,
+  error?: boolean,
   icon?: boolean,
   id?: string,
   inputId?: string,
@@ -42,6 +43,7 @@ const SelectableCard = ({
   dark = false,
   data = {},
   disabled = false,
+  error = false,
   icon = false,
   inputId = null,
   multi = true,
@@ -56,9 +58,12 @@ const SelectableCard = ({
   const dataProps = buildDataProps(data)
 
   const classes = classnames(buildCss('pb_selectable_card_kit',
-    { 'checked': checked,
+    {
+      'checked': checked,
       'disabled': disabled,
-      'enabled': !disabled }),
+      'enabled': !disabled,
+    }),
+  { error },
   dark ? 'dark' : '',
   className
   )
@@ -124,6 +129,7 @@ const SelectableCard = ({
                         checked={checked}
                         disabled={disabled}
                         onClick={handleClick}
+                        readOnly
                         type={inputType}
                     />
                   </Input>
@@ -132,6 +138,7 @@ const SelectableCard = ({
                 <Card.Body
                     dark={dark}
                     padding="sm"
+                    status={error ? 'negative' : null}
                 >
                   {text || children}
                 </Card.Body>

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

@@ -14,7 +14,6 @@ $pb_selectable_card_border: 2px;
   display: block;
   margin-bottom: 0;
 
-
   > label {
     > .buffer {
       display: inherit;
@@ -114,6 +113,16 @@ $pb_selectable_card_border: 2px;
     .separator {
       background: $bg_dark;
     }
+
+    &.error {
+      > label {
+        border-color: $error_dark;
+      }
+      .separator{
+        background: $error_dark;
+        width: 2px;
+      }
+    }
   }
 
   .separator {
@@ -127,4 +136,14 @@ $pb_selectable_card_border: 2px;
     margin-bottom: -1px;
     background: $border_light;
   }
+
+  &.error {
+    > label {
+      border-color: $error;
+    }
+    .separator {
+      background: $error;
+      width: 2px;
+    }
+  }
 }

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

@@ -0,0 +1,36 @@
+<%= pb_rails("title", props: {
+  size: 3,
+  text: "What sports do you like?"
+}) %>
+
+<br />
+
+<%= pb_rails("selectable_card", props: {
+  error: true,
+  input_id: "football",
+  name: "football",
+  value: "football",
+  variant: "display_input"
+}) do %>
+  Football
+<% end %>
+
+<%= pb_rails("selectable_card", props: {
+  error: true,
+  input_id: "basketball",
+  name: "basketball",
+  value: "basketball",
+  variant: "display_input"
+}) do %>
+  Basketball
+<% end %>
+
+<%= pb_rails("selectable_card", props: {
+  error: true,
+  input_id: "baseball",
+  name: "baseball",
+  value: "baseball",
+  variant: "display_input"
+}) do %>
+  Baseball
+<% end %>

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

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { Body, SelectableCard, Title } from '../..'
+
+const SelectableCardError = (props) => {
+  const [football, setFootball] = useState(false)
+  const [basketball, setBasketball] = useState(false)
+  const [baseball, setBaseball] = useState(false)
+
+  return (
+    <div>
+      <Title
+          {...props}
+          size={3}
+          text="What sports do you like?"
+      />
+      <br />
+      <SelectableCard
+          {...props}
+          checked={football}
+          error
+          inputId="football"
+          name="football"
+          onChange={() => setFootball(!football)}
+          value="football"
+          variant="displayInput"
+      >
+        <Body {...props}>{'Football'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          {...props}
+          checked={basketball}
+          error
+          inputId="basketball"
+          name="basketball"
+          onChange={() => setBasketball(!basketball)}
+          value="basketball"
+          variant="displayInput"
+      >
+        <Body {...props}>{'Basketball'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          {...props}
+          checked={baseball}
+          error
+          inputId="baseball"
+          name="baseball"
+          onChange={() => setBaseball(!baseball)}
+          value="baseball"
+          variant="displayInput"
+      >
+        <Body {...props}>{'Baseball'}</Body>
+      </SelectableCard>
+    </div>
+  )
+}
+export default SelectableCardError

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

@@ -7,6 +7,7 @@ examples:
   - selectable_card_options: With Options
   - selectable_card_image: Image Example
   - selectable_card_input: Input Variant
+  - selectable_card_error: With Errors
 
 
   react:
@@ -15,3 +16,4 @@ examples:
   - 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,5 +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 → selectable_card.html.erb}

@@ -24,19 +24,19 @@
             <% end %>
           <% end %>
           <div class="separator"></div>
-          <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-            <% if object.children.nil? %>
+          <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
+            <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>
-              <%= capture(&object.children) %>
+              <%= content %>
             <% end %>
           <% end %>
         <% end %>
       <% else %>
-        <% if object.children.nil? %>
+        <% if content.nil? %>
           <%= pb_rails("body", props: { text: object.text }) %>
         <% else %>
-          <%= capture(&object.children) %>
+          <%= content %>
         <% end %>
         <% if object.icon %>
           <div class="pb_selectable_card_circle">

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,
@@ -28,6 +26,7 @@ module Playbook
       def classname
         [
           generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+          error_class,
           dark_props,
         ].compact.join(" ")
       end
@@ -63,6 +62,10 @@ module Playbook
         disabled ? "disabled" : ""
       end
 
+      def status
+        error ? "negative" : nil
+      end
+
     private
 
       def checked_class
@@ -72,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.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

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -52,17 +52,17 @@ const StarRating = ({
         className={css}
         id={id}
     >
-      <div className="pb_star_rating_number">
-        <If condition={!hideRating}>
+      <If condition={!hideRating}>
+        <div className="pb_star_rating_number">
           {rating}
-        </If>
-      </div>
+        </div>
+      </If>
 
       <div className="pb_star_rating_wrapper">
         <div className="pb_star_rating_highlight">
           {starCount().map((_, index) => (
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star"
                 key={index}
             />
@@ -70,7 +70,7 @@ const StarRating = ({
 
           <If condition={hasHalfStar()}>
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star-half"
             />
           </If>
@@ -78,23 +78,23 @@ const StarRating = ({
 
         <div className="pb_star_rating_base">
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
         </div>