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

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

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

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

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

@@ -5,31 +5,37 @@ 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}
       />

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

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

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

@@ -5,30 +5,35 @@ const RoundedImage = (props) => {
   return (
     <>
       <Image
+          alt=""
           rounded
           size="xs"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="sm"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="md"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="lg"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="xl"
           url="https://unsplash.it/500/400/?image=634"

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

@@ -2,6 +2,8 @@ examples:
   rails:
   - default_image: Default
   - rounded_image: Rounded
+  - custom_error_image: Error Handling
   react:
   - default_image: Default
   - rounded_image: Rounded
+  - custom_error_image: Error Handling

data/app/pb_kits/playbook/pb_image/docs/index.js

@@ -1,2 +1,3 @@
 export { default as DefaultImage } from './_default_image.jsx'
 export { default as RoundedImage } from './_rounded_image.jsx'
+export { default as CustomErrorImage } from './_custom_error_image.jsx'

data/app/pb_kits/playbook/pb_image/{_image.html.erb → image.html.erb}

@@ -4,5 +4,7 @@
     class: object.classname,
     aria: object.aria,
     src: object.url,
-    alt: object.alt)
+    alt: object.alt,
+    onerror: object.on_error,
+    )
 %>

data/app/pb_kits/playbook/pb_image/image.rb

@@ -2,12 +2,10 @@
 
 module Playbook
   module PbImage
-    class Image
-      include Playbook::Props
-
-      partial "pb_image/image"
-
+    class Image < Playbook::KitBase
       prop :alt
+      prop :on_error, type: Playbook::Props::String,
+                      default: nil
       prop :rounded, type: Playbook::Props::Boolean,
                      default: false
       prop :size, type: Playbook::Props::Enum,
@@ -16,7 +14,7 @@ module Playbook
       prop :url
 
       def classname
-        generate_classname("pb_image_kit lazyload blur_up", size_class) + rounded_class
+        generate_classname("pb_image_kit#{size_class} lazyload blur_up") + rounded_class
       end
 
     private
@@ -26,7 +24,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : size
+        size == "none" ? nil : "_#{size}"
       end
     end
   end

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -0,0 +1,35 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import Image from './_image'
+
+const props = {
+  alt: 'picture of misty forest',
+  data: { testid: 'avatar' },
+  size: null,
+  url: 'https://unsplash.it/500/400/?image=634',
+}
+
+it('Should be accessible', async () => {
+  ensureAccessible(Image, props)
+})
+
+test('alt attribute', () => {
+  const kit = renderKit(Image, props)
+  expect(kit).toHaveAttribute('alt', props.alt)
+})
+
+test('default classname', () => {
+  const kit = renderKit(Image, props)
+  expect(kit).toHaveClass('pb_image_kit lazyload blur_up')
+})
+
+test('size = xs', () => {
+  const kit = renderKit(Image, props, { size: 'xs' })
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload blur_up')
+})
+
+test('rounded = true', () => {
+  const kit = renderKit(Image, props, { rounded: true })
+  expect(kit).toHaveClass('pb_image_kit lazyload blur_up rounded')
+})
+