playbook_ui 8.0.3 → 8.1.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba4203db09f20dc8904716f5920b8d0664ecbb7520939dcabb853cd0879ac6b4
-  data.tar.gz: 0ee8e4ae7924af54ee7998407b6f30d9f55020e1d4df2a8d8987ab02e912080e
+  metadata.gz: 7a3094cf29b37623db8e98428c084b6ab9b83d7ada528d70de6cd7a876784d10
+  data.tar.gz: c214e4fe02f07672f3e8c2aa8887c683c5a1ddb987f5e4c33da5d60f5f8f32b9
 SHA512:
-  metadata.gz: c8afdb091c129aaaf7e6df96c88c8b526067b88f38094a5371fe249dac3017f43c37e9bb5fbca7f484a423fc993ce81861c892411ae926fca2b839092a3bd592
-  data.tar.gz: 9403b804db36c8ada5bae70b336bd37c8903c3c6b6493d0888318daf7a38f7e4b4b7d6b00a2f5c66c02ae45790f33017de2f2a5e58524cf3e7c518a3413446a1
+  metadata.gz: 91a1e1d81bf3a06745d3df8ae2b9a16ae71878444fc3c4ef839230d79017cd4d554ccfe79f1d2f93c2d213020465ee634e9bf52c8216448c0536ae7ee4be92bf
+  data.tar.gz: fe21bfb352f669bbaf6d640d97d8400b0882b19df3b369969a0c1cd4409c6adce3695229dc2721c42aa5388603fd3f1a57b292fe2f619d2b354ff4de7ba9893a

data/README.md

@@ -42,6 +42,15 @@ 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

@@ -1,11 +1,11 @@
-@import "tokens/fonts";
-@import "pb_background/background";
-@import "pb_body/body";
-@import "pb_button/button";
+@import 'tokens/fonts';
+@import 'pb_background/background';
+@import 'pb_body/body';
+@import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
-@import "pb_caption/caption";
-@import "pb_card/card";
-@import "pb_title/title";
+@import 'pb_caption/caption';
+@import 'pb_card/card';
+@import 'pb_title/title';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_badge/badge';
@@ -13,6 +13,7 @@
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
+@import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
@@ -24,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';
@@ -41,6 +43,7 @@
 @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

@@ -8,6 +8,7 @@ kits:
     - circle_icon_button
   - card
   - checkbox
+  - collapsible
   - charts_and_graphs:
     - bar_graph
     - circle_chart
@@ -40,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
@@ -95,3 +96,4 @@ kits:
     - weekday_stacked
   - user
   - user_badge
+  - dialog

data/app/pb_kits/playbook/index.js

@@ -17,6 +17,7 @@ export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
 export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
+export Collapsible from './pb_collapsible/_collapsible.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
@@ -28,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'
@@ -45,6 +47,7 @@ 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,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}
     />