playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -0,0 +1,32 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+
+@mixin section_separator_vertical($dark: false) {
+    @if $dark == false {
+        background: $border_light;
+    } @else {
+        background: $border_dark;
+    }
+    content: "";
+    height: 100%;
+    width: 1px;
+    margin-left: $space_xs;
+    margin-right: $space_xs;
+    position: initial;
+    z-index: 0;
+}
+
+@mixin section_separator_horizontal($dark: false) {
+    @if $dark == false {
+        background: $border_light;
+    } @else {
+        background: $border_dark;
+    }
+    content: "";
+    height: 1px;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 0;
+}

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorLine = () => {
+const SectionSeparatorLine = (props) => {
   return (
-    <SectionSeparator />
+    <div>
+      <SectionSeparator
+          {...props}
+      />
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorText = () => {
+const SectionSeparatorText = (props) => {
   return (
     <SectionSeparator
+        {...props}
         text="Title Separator"
     />
   )

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { SectionSeparator } from '../../'
 
-const SectionSeparatorTextBackground = () => {
+const SectionSeparatorTextBackground = (props) => {
   return (
     <SectionSeparator
+        {...props}
         text="Title Separator"
         variant="background"
     />

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, FlexItem, SectionSeparator } from '../../'
 
-const SectionSeparatorVertical = () => {
+const SectionSeparatorVertical = (props) => {
   return (
     <Flex
         inline="flex-container"
@@ -10,11 +10,17 @@ const SectionSeparatorVertical = () => {
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>
-      <SectionSeparator orientation="vertical" />
+      <SectionSeparator
+          {...props}
+          orientation="vertical"
+      />
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>
-      <SectionSeparator orientation="vertical" />
+      <SectionSeparator
+          {...props}
+          orientation="vertical"
+      />
       <FlexItem>
         {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
       </FlexItem>

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -18,7 +18,7 @@ module Playbook
                   default: false
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, dark_class)
+        generate_classname("pb_section_separator_kit", variant, orientation)
       end
 
     private

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -11,7 +11,7 @@
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    padding-right: $space_lg;
+    padding-right: $space_xl;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;

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

@@ -4,9 +4,9 @@
   class: object.classname) do %>
 
   <% if object.multi %>
-    <%= check_box_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
+    <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
   <% else %>
-    <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id_present, disabled: object.disabled %>
+    <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
   <% end %>
 
   <label for="<%= object.input_id_present %>">
@@ -17,9 +17,9 @@
     <% end %>
     <% if object.icon %>
       <div class="pb_selectable_card_circle">
-        <%= pb_rails("icon", props: { icon: "check", fixed_width: true}) %>
+        <%= pb_rails("icon", props: { icon: "check", fixed_width: true }) %>
       </div>
     <% end %>
   </label>
 
-<% end %>
+<% end %>

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

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card", props: {
+    text: "Selected With Options",
+    input_id: "selected_with options",
+    name: "selected_with options",
+    value: "selected_with options",
+    checked: true,
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,11 +1,12 @@
 examples:
-  
+
   rails:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select
   - selectable_card_block: Block
+  - selectable_card_options: With Options
+
 
-  
   react:
   - selectable_card_default: Default
   - selectable_card_single_select: Single Select

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

@@ -8,21 +8,21 @@ module Playbook
       partial "pb_selectable_card/selectable_card"
 
       prop :checked, type: Playbook::Props::Boolean,
-                  default: false
+                     default: false
       prop :disabled, type: Playbook::Props::Boolean,
-                  default: false
+                      default: false
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :multi, type: Playbook::Props::Boolean,
-                  default: true
+                   default: true
       prop :input_id, type: Playbook::Props::String
+
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
       prop :name
       prop :text
       prop :value
 
-      
-      
-
       def classname
         generate_classname("pb_selectable_card_kit", checked_class, enable_disabled_class)
       end
@@ -31,10 +31,17 @@ module Playbook
         input_id.present? ? input_id : name
       end
 
+      def additional_input_options
+        input_options.merge(
+          id: input_id_present,
+          disabled: disabled
+        )
+      end
+
     private
-      
+
       def checked_class
-        checked ? "checked" : nil 
+        checked ? "checked" : nil
       end
 
       def enable_disabled_class
@@ -42,4 +49,4 @@ module Playbook
       end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     data: object.data,
     class: object.classname) do %>
-  
+
   <%= pb_rails("selectable_card", props: {
     input_id: object.input_id,
     name: object.name,
@@ -10,7 +10,8 @@
     disabled: object.disabled,
     icon: object.checkmark,
     multi: object.multi,
-    dark: object.dark
+    dark: object.dark,
+    input_options: object.input_options
   }) do %>
 
     <%= pb_rails("selectable_icon", props: {

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_card_icon", props: {
+    icon: "chart-line",
+    title_text: "Quarterly Report",
+    body_text: "Export",
+    input_id: "card-icon-id",
+    checked: true,
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,12 +1,13 @@
 examples:
-  
+
   rails:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_options: With Options
+
+
 
-  
-  
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark

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

@@ -25,6 +25,9 @@ module Playbook
                        default: false
       prop :value
 
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
+
       def classname
         generate_classname("pb_selectable_card_icon_kit", checked_class, enabled_disabled_class)
       end

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb

@@ -4,15 +4,15 @@
     class: object.classname) do %>
 
     <% if object.inputs == "disabled" %>
-    
+
       <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
       <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
 
     <% else %>
       <% if object.multi %>
-        <%= check_box_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+        <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
       <% else %>
-        <%= radio_button_tag object.name, object.value, object.checked, id: object.input_id, disabled: object.disabled %>
+        <%= radio_button_tag(object.name, object.value, object.checked, object.additional_input_options) %>
       <% end %>
 
       <label for="<%= object.input_id_present %>">

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb

@@ -0,0 +1,15 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("selectable_icon", props: {
+    icon: "dollar-sign",
+    input_id: "options-id",
+    checked: true,
+    text: "US Dollar",
+    input_options: {
+      class: "input-class",
+      name: "overwriting-name",
+      value: "overwriting-value",
+    }
+  }) %>
+
+</div>

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

@@ -1,10 +1,11 @@
 examples:
-  
+
   rails:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select
+  - selectable_icon_options: With Options
+
 
-  
   react:
   - selectable_icon_default: Default
   - selectable_icon_single_select: Single Select

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

@@ -23,6 +23,9 @@ module Playbook
                       default: false
       prop :value
 
+      prop :input_options, type: Playbook::Props::Hash,
+                                      default: {}
+
       # Conditional rendering for input field
       prop :inputs, type: Playbook::Props::String,
                     default: "enabled"
@@ -35,6 +38,13 @@ module Playbook
         input_id.present? ? input_id : name
       end
 
+      def additional_input_options
+        input_options.merge(
+          id: input_id_present,
+          disabled: disabled
+        )
+      end
+
     private
 
       def checked_class

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -33,9 +33,9 @@ const StatChange = (props: StatChangeProps) => {
     <If condition={value}>
       <div
           className={classnames(
-          className,
           buildCss('pb_stat_change_kit', status),
-          globalProps(props)
+          globalProps(props),
+          className
         )}
           id={id}
       >

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -21,11 +21,11 @@ const StatValue = (props: StatValueProps) => {
   } = props
 
   const displayValue = function(value) {
-    if (value) {
+    if (value || value === 0) {
       return (
         <Title
             size={1}
-            text={value}
+            text={`${value}`}
         />
       )
     }
@@ -44,7 +44,7 @@ const StatValue = (props: StatValueProps) => {
 
   return (
     <div
-        className={classnames('pb_stat_value_kit', className, globalProps(props))}
+        className={classnames('pb_stat_value_kit', globalProps(props), className)}
         id={id}
     >
       <div className="pb_stat_value_wrapper">

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -3,7 +3,12 @@ import { StatValue } from '../../'
 
 const StatValueDefault = () => {
   return (
-    <StatValue value={1048} />
+    <>
+      <StatValue value={1048} />
+      <br />
+      <br />
+      <StatValue value={0} />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -44,7 +44,6 @@ const Table = (props: TableProps) => {
         {...ariaProps}
         {...dataProps}
         className={classnames(
-        className,
         'pb_table',
         `table-${size}`,
         `table-responsive-${responsive}`,
@@ -55,7 +54,8 @@ const Table = (props: TableProps) => {
           'single-line': singleLine,
           'no-hover': disableHover,
         },
-        globalProps(props)
+        globalProps(props),
+        className
       )}
         id={id}
     >

data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "link", padding_left: "none" }) %></td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>