playbook_ui 8.1.0.pre.alpha1 → 8.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a3094cf29b37623db8e98428c084b6ab9b83d7ada528d70de6cd7a876784d10
-  data.tar.gz: c214e4fe02f07672f3e8c2aa8887c683c5a1ddb987f5e4c33da5d60f5f8f32b9
+  metadata.gz: bde6450a7a9b834c1c16de60363a43d58a9f28da53ca2aa0089d8d96ec9ea89d
+  data.tar.gz: 4a067f64e965d58c3d12d23a8303d3e51482063d001c89693206bbea86ae952f
 SHA512:
-  metadata.gz: 91a1e1d81bf3a06745d3df8ae2b9a16ae71878444fc3c4ef839230d79017cd4d554ccfe79f1d2f93c2d213020465ee634e9bf52c8216448c0536ae7ee4be92bf
-  data.tar.gz: fe21bfb352f669bbaf6d640d97d8400b0882b19df3b369969a0c1cd4409c6adce3695229dc2721c42aa5388603fd3f1a57b292fe2f619d2b354ff4de7ba9893a
+  metadata.gz: 42b92e641da9e7e5b1611bed31240d3a08934d7c6b612195407d92ab3c0b3bcbe3a13c1ebbd9e21f3d00c65f7e13f0198e5a2180edbc2dfa4e2048ad6e6f10a0
+  data.tar.gz: 8e9d47f263458035522e390cd25b90183c556cdbca33a7a910a76ffadf711760cafe970382759191909ff6ef44427649aa52d32100c6d452dc69ed850d7eedb2

data/README.md

@@ -42,15 +42,6 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 
 * [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
 
-### Reset.css
-
-Playbook provides it's own `reset.css` boilerplate for optional use in your application. You can either:
-
-1. Import the `dist/reset.css` from the playbook_ui gem into your Rails view: `@import "reset.css"` (note: your path may vary depending on your application's asset paths)
-2. Import or include the file via the npm package: `import 'reset.css'` (note: your path may vary depending on your application's node-sass `includePaths`)
-
-This asset aims to provide a commonly styles base for supported browsers.
-
 ### Building Playbook Kits
 
 * [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)

data/app/pb_kits/playbook/_playbook.scss

@@ -25,7 +25,6 @@
 @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';
@@ -43,7 +42,6 @@
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
-@import 'pb_inline/inline';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';

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

@@ -41,13 +41,13 @@ kits:
   - icon_stat_value
   - icon_value
   - image
-  - inline
   - layout
   - list
   - loading_inline
   - multiple_users
   - multiple_users_stacked
   - nav
+  - online_status
   - tags:
     - badge
     - hashtag
@@ -96,4 +96,3 @@ kits:
     - weekday_stacked
   - user
   - user_badge
-  - dialog

data/app/pb_kits/playbook/index.js

@@ -29,7 +29,6 @@ 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'
@@ -47,7 +46,6 @@ export IconCircle from './pb_icon_circle/_icon_circle.jsx'
 export IconStatValue from './pb_icon_stat_value/_icon_stat_value.jsx'
 export IconValue from './pb_icon_value/_icon_value.jsx'
 export Image from './pb_image/_image.jsx'
-export Inline from './pb_inline/_inline.jsx'
 export LabelPill from './pb_label_pill/_label_pill.jsx'
 export LabelValue from './pb_label_value/_label_value.jsx'
 export Layout from './pb_layout/_layout.jsx'

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

@@ -15,7 +15,6 @@ type AvatarProps = {
   data?: object,
   dark?: boolean,
   id?: string,
-  imageAlt?: string,
   imageUrl: string,
   name: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs",
@@ -28,18 +27,7 @@ const firstTwoInitials = (name) =>
     .substring(0, 2)
 
 const Avatar = (props: AvatarProps) => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    name = null,
-    id = '',
-    imageAlt = '',
-    imageUrl,
-    size = 'md',
-    status = null,
-    dark = false,
-  } = props
+  const { aria = {}, className, data = {}, name = null, id = '', imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
@@ -67,7 +55,7 @@ const Avatar = (props: AvatarProps) => {
       >
         <If condition={imageUrl && !error}>
           <Image
-              alt={imageAlt}
+              alt={name}
               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: { alt: object.image_alt, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+    <%= pb_rails("image", props: { 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,11 +3,8 @@
 module Playbook
   module PbAvatar
     class Avatar < Playbook::KitBase
-      prop :image_url, type: Playbook::Props::String
-      prop :image_alt, type: Playbook::Props::String,
-                       default: ""
-      prop :name, type: Playbook::Props::String,
-                  default: ""
+      prop :image_url
+      prop :name, 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,26 +5,23 @@ import Avatar from './_avatar'
 
 const imageUrl = 'https://randomuser.me/api/portraits/men/44.jpg',
   testId = 'tjohnson',
-  name = 'Terry Johnson',
-  imageAlt = 'Terry Johnson Standing'
+  name = 'Terry Johnson'
 
 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(imageAlt)
+  const image    = screen.getByAltText(name)
   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,7 +1,6 @@
 <%= 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"
   }) %>
@@ -11,7 +10,6 @@
 <%= 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"
   }) %>
@@ -21,7 +19,6 @@
 <%= 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"
   }) %>
@@ -31,7 +28,6 @@
 <%= 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"
   }) %>
@@ -41,7 +37,6 @@
 <%= 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,7 +5,6 @@ const AvatarDefault = (props) => {
   return (
     <div>
       <Avatar
-          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="xs"
@@ -14,7 +13,6 @@ const AvatarDefault = (props) => {
       />
       <br />
       <Avatar
-          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -23,7 +21,6 @@ const AvatarDefault = (props) => {
       />
       <br />
       <Avatar
-          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="md"
@@ -32,7 +29,6 @@ const AvatarDefault = (props) => {
       />
       <br />
       <Avatar
-          imageAlt="Terry Johnson Standing"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="lg"
@@ -41,7 +37,6 @@ 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,7 +1,6 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "sm",
-    image_alt: "Terry Johnson Status",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg"
   }) %>
 
@@ -10,7 +9,6 @@
   <%= 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"
   }) %>
@@ -20,7 +18,6 @@
 <%= 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"
   }) %>
@@ -30,7 +27,6 @@
 <%= 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,7 +5,6 @@ const AvatarStatus = (props) => {
   return (
     <>
       <Avatar
-          imageAlt="Terry Johnson Status"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -15,7 +14,6 @@ const AvatarStatus = (props) => {
       <br />
 
       <Avatar
-          imageAlt="Terry Johnson Online"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -26,7 +24,6 @@ const AvatarStatus = (props) => {
       <br />
 
       <Avatar
-          imageAlt="Terry Johnson Away"
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
@@ -37,7 +34,6 @@ 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,12 +15,10 @@ 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,
@@ -33,12 +31,10 @@ const AvatarActionButton = (props: AvatarActionButtonProps) => {
   const {
     action = 'add',
     aria = {},
-    linkAriaLabel,
     className,
     dark = false,
     data = {},
     id,
-    imageAlt = '',
     imageUrl,
     linkUrl,
     name,
@@ -71,12 +67,10 @@ 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,12 +14,11 @@
         <% end %>
     <% end %>
 
-    <%= link_to object.link_url, id: object.tooltip_id, 'aria-label': object.link_aria_label do %>
+    <%= link_to object.link_url, id: object.tooltip_id 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,8 +5,6 @@ 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,17 +1,13 @@
 <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,17 +5,13 @@ 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,9 +1,7 @@
 <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,9 +4,7 @@ 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,9 +4,7 @@ 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!')}