playbook_ui 7.1.1 → 7.3.0.pre.alpha3

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

@@ -1,10 +1,16 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
-@import "../pb_caption/caption";
+@import "../tokens/opacity";
+@import "./section_separator_mixin";
 
-$section_colors: (
+$section_colors_light: (
   background:   $bg_light,
-  card:   $card_light,
+  card:         $card_light,
+);
+
+$section_colors_dark: (
+  background:   $bg_dark,
+  card:         tint($bg_dark,10),
 );
 
 [class^=pb_section_separator_kit] {
@@ -12,8 +18,7 @@ $section_colors: (
   justify-content: center;
   align-items: center;
   position: relative;
-
-  @each $color_name, $color_value in $section_colors {
+  @each $color_name, $color_value in $section_colors_light {
     &[class*=_#{$color_name}] {
       span {
         display: inline-block;
@@ -24,64 +29,38 @@ $section_colors: (
       }
     }
   }
- 
   &::after {
-    content: "";
-    height: 1px;
-    width: 100%;
-    background: $border_light;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 0;
+    @include section_separator_horizontal(false);
   }
-
   &[class*=_horizontal] {
     justify-content: center;
   }
   &[class*=_vertical] {
     &::after {
-      content: "";
-      height: 100%;
-      width: 1px;
-      margin-left: $space_xs;
-      margin-right: $space_xs;
-      background: $border_light;
-      position: initial;
-      z-index: 0;
+      @include section_separator_vertical(false);
     }
   }
   
-  &[class*=_dark] {
+  // Dark =========================
+  
+  &.dark {
     &::after {
-      content: "";
-      height: 1px;
-      width: 100%;
-      background: $border_dark;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      z-index: 0;
+      @include section_separator_horizontal(true);
     }
-    &[class*=_background] {
-      span {
-        display: inline-block;
-        padding: 0 $space_xs;
-        background: $bg_dark;
-        position: relative;
-        z-index: 1;
+    @each $color_name, $color_value in $section_colors_dark {
+      &[class*=_#{$color_name}] {
+        span {
+          display: inline-block;
+          padding: 0 $space_xs;
+          background: #{$color_value};
+          position: relative;
+          z-index: 1;
+        }
       }
     }
     &[class*=_vertical] {
       &::after {
-        content: "";
-        height: 100%;
-        width: 1px;
-        margin-left: $space_xs;
-        margin-right: $space_xs;
-        background: $border_dark;
-        position: initial;
-        z-index: 0;
+        @include section_separator_vertical(true);
       }
     }
   }

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