RubyGems - playbook_ui - Versions diffs - 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2 - Mend

playbook_ui 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2

Files changed (319) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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.html.erb → selectable_card_icon.html.erb} RENAMED Viewed

File without changes

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

@@ -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.html.erb → selectable_icon.html.erb} RENAMED Viewed

File without changes

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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.html.erb → source.html.erb} RENAMED Viewed

File without changes

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

@@ -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 CHANGED Viewed

@@ -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>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss CHANGED Viewed

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 $pb_star_rating_number_width: 30px;
-$pb_star_rating_wrapper_width: 150px;
+$pb_star_rating_wrapper_width: 90px;
 $pb_star_rating_height: 26px;
 [class^=pb_star_rating_kit] {
@@ -35,16 +35,18 @@ $pb_star_rating_height: 26px;
     min-height: $pb_star_rating_height;
     .pb_star_rating_highlight {
+      display: flex;
       position: absolute;
-      top: 0;
+      top: 5px;
       left: 0;
       z-index: 5;
       color: $yellow;
       line-height: $pb_star_rating_height;
     }
     .pb_star_rating_base {
+      display: flex;
       position: absolute;
-      top: 0;
+      top: 5px;
       left: 0;
       z-index: 0;
       color: rgba($slate, $opacity-4);

data/app/pb_kits/playbook/pb_star_rating/{_star_rating.html.erb → star_rating.html.erb} RENAMED Viewed

@@ -3,9 +3,7 @@
     data: object.data,
     class: object.classname) do %>
     <%# Rating value %>
-    <% if object.hide_rating %>
-      <%= content_tag(:div, "", class: "pb_star_rating_number") %>
-    <% else %>
+    <% if !object.hide_rating %>
       <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
     <% end %>
@@ -13,20 +11,21 @@
       <%# Gold stars generated by rating value %>
       <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
         <% object.star_count.times do %>
-          <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+          <%= pb_rails("icon", props: { icon: "star" }) %>
         <% end %>
         <% unless object.star_full %>
-          <%= pb_rails("icon", props: { icon: "star-half", fixed_width: true }) %>
+          <%= pb_rails("icon", props: { icon: "star-half" }) %>
         <% end %>
       <% end %>
       <%# Grey background stars as base %>
       <%= content_tag(:div, class: "pb_star_rating_base") do %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
       <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb CHANGED Viewed

@@ -2,11 +2,7 @@
 module Playbook
   module PbStarRating
-    class StarRating
-      include Playbook::Props
-      partial "pb_star_rating/star_rating"
+    class StarRating < Playbook::KitBase
       prop :hide_rating, type: Playbook::Props::Boolean,
                          default: false

data/app/pb_kits/playbook/pb_stat_change/{_stat_change.html.erb → stat_change.html.erb} RENAMED Viewed

File without changes

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb CHANGED Viewed

@@ -2,11 +2,7 @@
 module Playbook
   module PbStatChange
-    class StatChange
-      include Playbook::Props
-      partial "pb_stat_change/stat_change"
+    class StatChange < Playbook::KitBase
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"

data/app/pb_kits/playbook/pb_stat_value/{_stat_value.html.erb → stat_value.html.erb} RENAMED Viewed

File without changes

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb CHANGED Viewed

@@ -2,12 +2,7 @@
 module Playbook
   module PbStatValue
-    class StatValue
-      include Playbook::Props
-      include ActionView::Helpers::NumberHelper
-      partial "pb_stat_value/stat_value"
+    class StatValue < Playbook::KitBase
       prop :unit
       prop :value, type: Playbook::Props::Number