playbook_ui 7.16.0.pre.alpha5 → 7.16.0

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -1,7 +1,7 @@
 @import "../tokens/colors";
 
 [class^=pb_distribution_bar] {
-  $bar_colors: map-merge($data_colors, $status_colors);
+  $bar_colors: map-values($data_colors);
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
@@ -10,8 +10,8 @@
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @each $name, $color in $bar_colors {
-      &:nth-child(#{length($bar_colors)}n+#{index(($bar_colors), ($name $color))}) {
+    @each $name, $color in $data_colors {
+      &:nth-child(#{length($data_colors)}n+#{index(($data_colors), ($name $color))}) {
         background-color: $color;
       }
       &.color_#{$name} {

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbDistributionBar
-    class DistributionBar < Playbook::KitBase
+    class DistributionBar
+      include Playbook::Props
+
+      partial "pb_distribution_bar/distribution_bar"
+
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm],
                   default: "lg"

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("distribution_bar", props: {
   widths: [4,5,3],
-  colors: ["data_7", "data_1", "neutral"]
+  colors: ["data_7", "data_1", "data_6"]
 }) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -6,7 +6,7 @@ const DistributionBarCustomColors = (props) => {
     <React.Fragment>
       <div>
         <DistributionBar
-            colors={['data_7', 'data_1', 'neutral']}
+            colors={['data_7', 'data_1', 'data_6']}
             widths={[4, 5, 3]}
             {...props}
         />

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFileUpload
+    class FileUpload
+      include Playbook::Props
+
+      partial "pb_file_upload/file_upload"
+    end
+  end
+end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbFixedConfirmationToast
-    class FixedConfirmationToast < Playbook::KitBase
+    class FixedConfirmationToast
+      include Playbook::Props
+
+      partial "pb_fixed_confirmation_toast/fixed_confirmation_toast"
+
       prop :status, type: Playbook::Props::Enum,
                     values: %w[success error neutral tip],
                     default: "neutral"

data/app/pb_kits/playbook/{pb_layout/layout.html.erb → pb_flex/_flex.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= content.presence %>
+  <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/{flex_item.html.erb → _flex_item.html.erb}

@@ -3,5 +3,5 @@
     data: object.data,
     class: object.classname,
     style: object.style_value) do %>
-  <%= content.presence %>
+  <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbFlex
-    class Flex < Playbook::KitBase
+    class Flex
+      include Playbook::Props
+
+      partial "pb_flex/flex"
+
       prop :horizontal, type: Playbook::Props::Enum,
                         values: %w[left center right stretch none],
                         default: "left",

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbFlex
-    class FlexItem < Playbook::KitBase
+    class FlexItem
+      include Playbook::Props
+
+      partial "pb_flex/flex_item"
+
       prop :fixed_size, default: nil
       prop :grow, type: Playbook::Props::Boolean,
                   default: false

data/app/pb_kits/playbook/pb_form_group/{form_group.html.erb → _form_group.html.erb}

@@ -3,5 +3,5 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= content.presence %>
+    <%= capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/form_group.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbFormGroup
-    class FormGroup < Playbook::KitBase
+    class FormGroup
+      include Playbook::Props
+
+      partial "pb_form_group/form_group"
+
       def classname
         generate_classname("pb_form_group_kit")
       end

data/app/pb_kits/playbook/pb_form_pill/{form_pill.html.erb → _form_pill.html.erb}

@@ -2,6 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
+
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,
@@ -9,6 +10,7 @@
         size: "xs"
       }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+
     <% elsif object.text.present? %>
       <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
     <% end %>
@@ -16,4 +18,5 @@
     <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
       <%= pb_rails("icon", props: { icon: 'times', fixed_width: true }) %>
     <% end %>
+
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbFormPill
-    class FormPill < Playbook::KitBase
+    class FormPill
+      include Playbook::Props
+
+      partial "pb_form_pill/form_pill"
+
       prop :avatar_url
       prop :name
       prop :text

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbGauge
-    class Gauge < Playbook::KitBase
+    class Gauge
+      include Playbook::Props
+
+      partial "pb_gauge/gauge"
+
       prop :chart_data, type: Playbook::Props::Array,
                         default: [{ name: "Name", value: 0 }]
       prop :style, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_hashtag/{hashtag.html.erb → _hashtag.html.erb}

@@ -3,6 +3,7 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
+
   <%= link_to object.url do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbHashtag
-    class Hashtag < Playbook::KitBase
+    class Hashtag
+      include Playbook::Props
+
+      partial "pb_hashtag/hashtag"
+
       prop :text
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],

data/app/pb_kits/playbook/pb_highlight/{highlight.html.erb → _highlight.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= content.presence || object.text %>
+    <%= object.children.nil? ? object.text : capture(&object.children) %>
 <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbHighlight
-    class Highlight < Playbook::KitBase
+    class Highlight
+      include Playbook::Props
+
+      partial "pb_highlight/highlight"
+
       prop :text
 
       def classname

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <% if object.emphasis == "city" %>
+		<%= render partial:"pb_home_address_street/city_emphasis.html.erb", locals: {object: object}%>
+	<% elsif object.emphasis == "street" %>
+		<%= render partial:"pb_home_address_street/street_emphasis.html.erb", locals: {object: object} %>
+	<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbHomeAddressStreet
-    class HomeAddressStreet < Playbook::KitBase
+    class HomeAddressStreet
+      include Playbook::Props
+
+      partial "pb_home_address_street/home_address_street"
+
       prop :address
       prop :address_cont
       prop :city
@@ -22,11 +26,11 @@ module Playbook
       end
 
       def city_state_zip
-        [city_state, zipcode].join(" ")
+        "#{city.titleize}, #{state} #{zipcode}"
       end
 
       def city_state
-        [city.titleize, state].join(", ")
+        "#{city.titleize}, #{state}"
       end
 
       def zip
@@ -34,7 +38,7 @@ module Playbook
       end
 
       def address_house_style
-        [address&.titleize, house_style].join(separator)
+        "#{address&.titleize} #{separator} #{house_style}"
       end
 
       def address_house_style2
@@ -42,11 +46,7 @@ module Playbook
       end
 
       def separator
-        house_style ? " \u00b7 " : ""
-      end
-
-      def emphasis_partial
-        File.join(File.dirname(self.class.source_location), "_#{emphasis}_emphasis")
+        house_style ? "\u00b7" : ""
       end
 
     private

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbIcon
-    class Icon < Playbook::KitBase
+    class Icon
+      include Playbook::Props
+
+      partial "pb_icon/icon"
+
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbIconCircle
-    class IconCircle < Playbook::KitBase
+    class IconCircle
+      include Playbook::Props
+
+      partial "pb_icon_circle/icon_circle"
+
       prop :icon, required: true
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -2,7 +2,12 @@
 
 module Playbook
   module PbIconStatValue
-    class IconStatValue < Playbook::KitBase
+    class IconStatValue
+      include Playbook::Props
+      include ActionView::Helpers::NumberHelper
+
+      partial "pb_icon_stat_value/icon_stat_value"
+
       prop :icon, required: true
 
       prop :size, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_icon_value/_icon_value.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id) do %>
+    <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
+      <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
+      <%= object.text %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon_value/icon_value.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbIconValue
-    class IconValue < Playbook::KitBase
+    class IconValue
+      include Playbook::Props
+
+      partial "pb_icon_value/icon_value"
+
       prop :text, required: true
       prop :icon, required: true
       prop :align, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -32,9 +32,7 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit', size),
-    'lazyload',
-    'blur_up',
+    buildCss('pb_image_kit lazyload blur_up', size),
     { rounded },
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_image/docs/_default_image.html.erb

@@ -1,13 +1,13 @@
 
 <br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
 <br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
 <br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
 <br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
 <br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
 <br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>

data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx

@@ -5,37 +5,31 @@ const DefaultImage = (props) => {
   return (
     <>
       <Image
-          alt="picture of a misty forest"
           size="xs"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
-          alt="picture of a misty forest"
           size="sm"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
-          alt="picture of a misty forest"
           size="md"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
-          alt="picture of a misty forest"
           size="lg"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
-          alt="picture of a misty forest"
           size="xl"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
-          alt="picture of a misty forest"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />