playbook_ui 8.2.0.pre.alpha2 → 8.2.0.pre.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6d260fd8cb3c808cd647ea9150feb6c68ddaefef55e69cdb28986d8689ea7ad
-  data.tar.gz: be549c62b03d8e89c5746a8cfeb4ccceedf4da2dbe7e1ff27dc609c2d574224b
+  metadata.gz: 30941eb0f16c5ea56d646c08cdcdcd5338423bc2d09787995ec11d82725a5cf5
+  data.tar.gz: b31ecc30e83182a59de76eeba28a6973b0f9b5dcea13d8c37fabc9959ee0fe18
 SHA512:
-  metadata.gz: d3d1a839484d63aafb17d2e2c03daa56781bae403120e652dc5d20af205c857d92c0e2ef2a6b9116dad6f19fb1514f657e949d774ab096ed13d6bcf14566097e
-  data.tar.gz: a57ea0a32d351f774cdf73ef1fe572199b7207be7e1cf863538c09d68617ce9d3b352d34a111695b3a2b91f93c1fbb9c73775a08e6254d5321c878a14323e02b
+  metadata.gz: 0cd98f212aaee69b433a737a3fb49520a8d4d48d2f0f32268c493c14da2672b9808910e11011d11ee883bee8b0756252c43c0b146016ad490598d70b904f522f
+  data.tar.gz: 6e8177d180817e06d691f83e377d3a63f93bc367bcb1af0fe051fedc2735a8445142faecd2fab8418fda777d1f243637f8859c36cd2b2cdc270355cc2fe5a063

data/app/pb_kits/playbook/_playbook.scss

@@ -25,6 +25,7 @@
 @import 'pb_date_stacked/date_stacked';
 @import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
+@import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';

data/app/pb_kits/playbook/data/menu.yml

@@ -16,6 +16,7 @@ kits:
     - gauge
     - legend
     - line_graph
+  - dialog
   - filter
   - fixed_confirmation_toast
   - flex
@@ -47,7 +48,6 @@ kits:
   - multiple_users
   - multiple_users_stacked
   - nav
-  - online_status
   - tags:
     - badge
     - hashtag
@@ -96,3 +96,4 @@ kits:
     - weekday_stacked
   - user
   - user_badge
+

data/app/pb_kits/playbook/index.js

@@ -29,6 +29,7 @@ export DateStacked from './pb_date_stacked/_date_stacked.jsx'
 export DateTime from './pb_date_time/_date_time.jsx'
 export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
+export Dialog from './pb_dialog/_dialog.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
 export FileUpload from './pb_file_upload/_file_upload.jsx'
 export Filter from './pb_filter/_filter.jsx'

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -15,6 +15,7 @@ type AvatarProps = {
   data?: object,
   dark?: boolean,
   id?: string,
+  imageAlt?: string,
   imageUrl: string,
   name: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs",
@@ -27,7 +28,18 @@ const firstTwoInitials = (name) =>
     .substring(0, 2)
 
 const Avatar = (props: AvatarProps) => {
-  const { aria = {}, className, data = {}, name = null, id = '', imageUrl, size = 'md', status = null, dark = false } = props
+  const {
+    aria = {},
+    className,
+    data = {},
+    name = null,
+    id = '',
+    imageAlt = '',
+    imageUrl,
+    size = 'md',
+    status = null,
+    dark = false,
+  } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
@@ -55,7 +67,7 @@ const Avatar = (props: AvatarProps) => {
       >
         <If condition={imageUrl && !error}>
           <Image
-              alt={name}
+              alt={imageAlt}
               onError={handleError}
               url={imageUrl}
           />

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria) do %>
   <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-    <%= pb_rails("image", props: { url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+    <%= pb_rails("image", props: { alt: object.image_alt, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
   <% end %>
   <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -3,8 +3,11 @@
 module Playbook
   module PbAvatar
     class Avatar < Playbook::KitBase
-      prop :image_url
-      prop :name, default: ""
+      prop :image_url, type: Playbook::Props::String
+      prop :image_alt, type: Playbook::Props::String,
+                       default: ""
+      prop :name, type: Playbook::Props::String,
+                  default: ""
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -5,23 +5,26 @@ import Avatar from './_avatar'
 
 const imageUrl = 'https://randomuser.me/api/portraits/men/44.jpg',
   testId = 'tjohnson',
-  name = 'Terry Johnson'
+  name = 'Terry Johnson',
+  imageAlt = 'Terry Johnson Standing'
 
 test('loads the given image url and name', () => {
   render(
     <Avatar
         data={{ testid: testId }}
+        imageAlt={imageAlt}
         imageUrl={imageUrl}
         name={name}
     />
   )
 
   const kit      = screen.getByTestId(testId)
-  const image    = screen.getByAltText(name)
+  const image    = screen.getByAltText(imageAlt)
   const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
 
   expect(kit).toHaveClass('pb_avatar_kit_md')
   expect(kit).toHaveAttribute('data-initials', initials)
   expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)
+  expect(image).toHaveAttribute('alt', imageAlt)
 })

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xs",
+    image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "online"
   }) %>
@@ -10,6 +11,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
+    image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>
@@ -19,6 +21,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "md",
+    image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "offline"
   }) %>
@@ -28,6 +31,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "lg",
+    image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "online"
   }) %>
@@ -37,6 +41,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xl",
+    image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -5,6 +5,7 @@ const AvatarDefault = (props) => {
   return (
     <div>
       <Avatar
+          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="xs"
@@ -13,6 +14,7 @@ const AvatarDefault = (props) => {
       />
       <br />
       <Avatar
+          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -21,6 +23,7 @@ const AvatarDefault = (props) => {
       />
       <br />
       <Avatar
+          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="md"
@@ -29,6 +32,7 @@ const AvatarDefault = (props) => {
       />
       <br />
       <Avatar
+          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="lg"
@@ -37,6 +41,7 @@ const AvatarDefault = (props) => {
       />
       <br />
       <Avatar
+          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="xl"

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
+    image_alt: "Terry Johnson Status",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg"
   }) %>
 
@@ -9,6 +10,7 @@
   <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
+    image_alt: "Terry Johnson Online",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "online"
   }) %>
@@ -18,6 +20,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
+    image_alt: "Terry Johnson Away",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>
@@ -27,6 +30,7 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
+    image_alt: "Terry Johnson Offline",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "offline"
   }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx

@@ -5,6 +5,7 @@ const AvatarStatus = (props) => {
   return (
     <>
       <Avatar
+          imageAlt="Terry Johnson Status"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -14,6 +15,7 @@ const AvatarStatus = (props) => {
       <br />
 
       <Avatar
+          imageAlt="Terry Johnson Online"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -24,6 +26,7 @@ const AvatarStatus = (props) => {
       <br />
 
       <Avatar
+          imageAlt="Terry Johnson Away"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -34,6 +37,7 @@ const AvatarStatus = (props) => {
       <br />
 
       <Avatar
+          imageAlt="Terry Johnson Offline"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -15,10 +15,12 @@ import { globalProps } from '../utilities/globalProps.js'
 type AvatarActionButtonProps = {
   action?: string,
   aria: Object,
+  linkAriaLabel?: string,
   className?: string,
   dark?: boolean,
   data?: Object,
   id?: string,
+  imageAlt?: string,
   imageUrl?: string,
   linkUrl?: string,
   name?: string,
@@ -31,10 +33,12 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
   const {
     action = 'add',
     aria = {},
+    linkAriaLabel,
     className,
     dark = false,
     data = {},
     id,
+    imageAlt = '',
     imageUrl,
     linkUrl,
     name,
@@ -67,10 +71,12 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
         id={id}
     >
       <a
+          aria-label={linkAriaLabel}
           href={linkUrl}
           onClick={onClick}
       >
         <Avatar
+            imageAlt={imageAlt}
             imageUrl={imageUrl}
             name={name}
             size={size}

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb

@@ -14,11 +14,12 @@
         <% end %>
     <% end %>
 
-    <%= link_to object.link_url, id: object.tooltip_id do %>
+    <%= link_to object.link_url, id: object.tooltip_id, 'aria-label': object.link_aria_label do %>
       <%= pb_rails("avatar", props: {
         dark: object.dark,
         name: object.name,
         size: object.size,
+        image_alt: object.image_alt,
         image_url: object.image_url,
         class: "avatar_action"
       }) %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb

@@ -5,6 +5,8 @@ module Playbook
     class AvatarActionButton < Playbook::KitBase
       prop :action, type: Playbook::Props::String,
                     default: "add"
+      prop :link_aria_label, type: Playbook::Props::String
+      prop :image_alt, type: Playbook::Props::String
       prop :image_url, type: Playbook::Props::String
       prop :link_url, type: Playbook::Props::String, default: "#"
       prop :tooltip_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb

@@ -1,13 +1,17 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Add Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Add Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       action: "add",
   }) %>
 
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Remove Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Remove Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       action: "remove",
   }) %>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx

@@ -5,13 +5,17 @@ const AvatarActionButtonActions = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
         action="add"
+        imageAlt="Add Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Add Sophia Carden"
         name="Sophia Carden"
         {...props}
     />
     <AvatarActionButton
         action="remove"
+        imageAlt="Remove Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Remove Sophia Carden"
         name="Sophia Carden"
         {...props}
     />

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -1,7 +1,9 @@
 <div class="pb--doc-demo-row">
 
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg"
   }) %>
 

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -4,7 +4,9 @@ import { AvatarActionButton } from '../../'
 const AvatarActionButtonDefault = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
+        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         {...props}
     />

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx

@@ -4,7 +4,9 @@ import { AvatarActionButton } from '../../'
 const AvatarActionButtonOnClick = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
+        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Alert Sophia Carden"
         linkUrl="https://www.google.com"
         name="Sophia Carden"
         onClick={() => alert('clicked!')}

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb

@@ -1,9 +1,11 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Alert Sophia Carden",
       name: "Sophia Carden",
       id: "clickable",
       link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
   }) %>
 

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb

@@ -1,25 +1,33 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "bottom_left"
   }) %>
 
   <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "bottom_right"
   }) %>
 
     <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "top_left"
   }) %>
 
     <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
+      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "top_right"
   }) %>