playbook_ui 7.15.1 → 7.16.0.pre.alpha1

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

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

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("flex", props: {wrap: true}) do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing4",
         chart_data: [{ name: "Point 1", value: 100 }],
       }) %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing3",
         chart_data: [{ name: "Point 2", value: 75 }],
       }) %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing2",
         chart_data: [{ name: "Point 3", value: 50 }],
       }) %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
       <%= pb_rails("gauge", props: {
         id: "gauge-sizing1",
         chart_data: [{ name: "Point 4", value: 25 }],

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -9,6 +9,8 @@ const GaugeSizing = (props) => (
     >
       <FlexItem
           fixedSize="400px"
+          overflow="hidden"
+          shrink
           {...props}
       >
         <Gauge
@@ -19,6 +21,8 @@ const GaugeSizing = (props) => (
       </FlexItem>
       <FlexItem
           fixedSize="300px"
+          overflow="hidden"
+          shrink
           {...props}
       >
         <Gauge
@@ -29,6 +33,8 @@ const GaugeSizing = (props) => (
       </FlexItem>
       <FlexItem
           fixedSize="200px"
+          overflow="hidden"
+          shrink
           {...props}
       >
         <Gauge
@@ -37,7 +43,12 @@ const GaugeSizing = (props) => (
             {...props}
         />
       </FlexItem>
-      <FlexItem fixedSize="125px">
+      <FlexItem
+          fixedSize="125px"
+          overflow="hidden"
+          shrink
+          {...props}
+      >
         <Gauge
             chartData={[ { name: 'Point 4', value: 25 } ]}
             id="gauge-sizing1"

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md

@@ -1 +1,2 @@
-### Gauge resizes dynamically to fit whatever element it's placed within.
+### Gauge resizes dynamically to fit whatever element it's placed within.
+#### Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

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

@@ -1,5 +1,5 @@
 examples:
-  
+
   rails:
   - gauge_default: Default
   - gauge_disable_animation: Disable Animation
@@ -9,16 +9,15 @@ examples:
   - gauge_min_max: Min Max Labels
   - gauge_sizing: Sizing
   - gauge_height: Height
-  
-  
+
+
   react:
   - gauge_default: Default
   - gauge_disable_animation: Disable Animation
-  - gauge_title: Title 
+  - gauge_title: Title
   - gauge_units: Units
   - gauge_full_circle: Full Circle
   - gauge_min_max: Min Max Labels
   - gauge_sizing: Sizing
   - gauge_height: Height
   - gauge_live_data: Live Data
-  

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbGauge
-    class Gauge
-      include Playbook::Props
-
-      partial "pb_gauge/gauge"
-
+    class Gauge < Playbook::KitBase
       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,7 +3,6 @@
     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,11 +2,7 @@
 
 module Playbook
   module PbHashtag
-    class Hashtag
-      include Playbook::Props
-
-      partial "pb_hashtag/hashtag"
-
+    class Hashtag < Playbook::KitBase
       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 %>
-    <%= object.children.nil? ? object.text : capture(&object.children) %>
+    <%= content.presence || object.text %>
 <% end %>

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

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

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

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= render file: object.emphasis_partial, locals: { object: object } %>
+<% end %>

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

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

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbIcon
-    class Icon
-      include Playbook::Props
-
-      partial "pb_icon/icon"
-
+    class Icon < Playbook::KitBase
       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,11 +2,7 @@
 
 module Playbook
   module PbIconCircle
-    class IconCircle
-      include Playbook::Props
-
-      partial "pb_icon_circle/icon_circle"
-
+    class IconCircle < Playbook::KitBase
       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,12 +2,7 @@
 
 module Playbook
   module PbIconStatValue
-    class IconStatValue
-      include Playbook::Props
-      include ActionView::Helpers::NumberHelper
-
-      partial "pb_icon_stat_value/icon_stat_value"
-
+    class IconStatValue < Playbook::KitBase
       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,11 +2,7 @@
 
 module Playbook
   module PbIconValue
-    class IconValue
-      include Playbook::Props
-
-      partial "pb_icon_value/icon_value"
-
+    class IconValue < Playbook::KitBase
       prop :text, required: true
       prop :icon, required: true
       prop :align, type: Playbook::Props::Enum,

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

@@ -11,6 +11,7 @@ type ImageProps = {
   className?: string,
   data?: object,
   id?: string,
+  onError?: () => {},
   size: "xs" | "sm" | "md" | "lg" | "xl",
   rounded?: boolean,
   url: string,
@@ -23,6 +24,7 @@ const Image = (props: ImageProps) => {
     className,
     data = {},
     id,
+    onError = null,
     rounded = false,
     size = '',
     url = '',
@@ -30,7 +32,9 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit lazyload blur_up', size),
+    buildCss('pb_image_kit', size),
+    'lazyload',
+    'blur_up',
     { rounded },
     globalProps(props),
     className
@@ -46,7 +50,8 @@ const Image = (props: ImageProps) => {
           className={classes}
           data-src={url}
           id={id}
-          rounded={rounded}
+          onError={onError}
+          rounded={+rounded}
           src={url}
       />
     </div>

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

@@ -0,0 +1,75 @@
+<style>
+  .image-error:before {
+    content: "Sorry, the image below seems to be broken.";
+    display: block;
+    margin-bottom: 10px;
+  }
+  .image-error {
+    margin: 5px;
+    padding: 5px;
+    outline: 1px solid red;
+  }
+</style>
+
+<%= pb_rails("body",
+  props: {
+    text: "Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time."
+  }
+) %>
+
+<br>
+<br>
+
+<%= pb_rails("body",
+  props: {
+    text: "Alter the display when the image fails to load:"
+  }
+) %>
+
+<%= pb_rails("image",
+  props: {
+    alt: "This is the alt text!",
+    on_error: "this.style.color = 'red'",
+    rounded: true,
+    size: "xs",
+    url: "not_a_picture"
+  }
+) %>
+
+<br>
+<br>
+
+<%= pb_rails("body",
+  props: {
+    text: "Give it an error class:"
+  }
+) %>
+
+<%= pb_rails("image",
+  props: {
+    alt: "This is the alt text!",
+    on_error: "this.classList.add('image-error')",
+    rounded: true,
+    size: "xs",
+    url: "not_a_picture"
+  }
+) %>
+
+<br>
+<br>
+
+<%= pb_rails("body",
+  props: {
+   text: "Or hide it completely:"
+  }
+) %>
+
+<%= pb_rails("image",
+  props: {
+    alt: "This is the alt text!",
+    on_error: "this.style.display = 'none'",
+    rounded: true,
+    size: "xs",
+    url: "not_a_picture",
+  }
+) %>

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Body, Image } from '../../'
+
+const CustomErrorImage = (props) => {
+  return (
+    <>
+      <Body text="Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time." />
+      <br />
+      <Body text="Alter the display when the image fails to load:" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.style.color = 'red'}
+          rounded
+          size="xs"
+          url="not_a_valid_url"
+          {...props}
+      />
+      <br />
+      <br />
+      <Body text="Give it an error class:" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.classList.add('image-error')}
+          rounded
+          size="sm"
+          url="not_a_valid_url"
+          {...props}
+      />
+      <br />
+      <br />
+      <Body text="Set an inline style" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.style.outline = '1px solid red'}
+          rounded
+          size="md"
+          url="not_a_valid_url"
+          {...props}
+      />
+      <br />
+      <br />
+      <Body text="Hide it completely!" />
+      <Image
+          alt="This is the alt text!"
+          onError={(e) => e.target.style.display = 'none'}
+          rounded
+          size="md"
+          url="not_a_valid_url"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CustomErrorImage