playbook_ui 9.6.1 → 9.7.0.pre.alpha.a11y.btn

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ef80e99bb70a0a7346f50ffc0761b136be7db6bbca0dee07ff4a5cb57f3b777
-  data.tar.gz: bb29fb62353081daa6404847ef516d8069f5ea058722002fb1c4b4b392c27e39
+  metadata.gz: 5d02c19ea477725a33c15757d8254c21348c16e9d8e5b82b85ec08ffb7e3ac4e
+  data.tar.gz: 75fd3538c8760afa2dcf2818bef4e91451ca0f985044223bdd118f33c740b568
 SHA512:
-  metadata.gz: 3358c2044123dbade10b6cf2514091030618459e77cc20e35141b33a10216e660d8a3e30fd033a28c391fae76e125f045d170dc694657cd7c32e8c2d96ee9b9e
-  data.tar.gz: e29867a0cce06fd7c726fb5ae2033287392f94689e1adc7480ad1416e04136e67fd290102f0c712dfc26184fe326c3709dcf266119b1d96ea10d9fcca0d6fb29
+  metadata.gz: 70a500505fe763ab166a92613bb5d3fbf6c6c7b88d53e1727003346c8f5d0e312e629167c840ec17272a63a2cf7f0b15b7657b3b89cd0065c68eb0683a08368e
+  data.tar.gz: 4a1e51d54b520cb7c40f32df8fca6e2f20760b9eb09cf40092b66b50a90a14b6744e50bcaccf5cbc604708861128db5fee6e4efd777eeecfc4ed9f56ac5cb900

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,16 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
-  aria?: {
-    label: string,
-  },
+  aria?: object,
   children?: array<React.ReactChild>,
   className?: string | array<string>,
   data?: object,
@@ -55,20 +53,9 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const buttonAriaProps = (props: ButtonPropTypes) => {
-  const { aria } = props
-  if (typeof aria !== 'object') return {}
-  const { label } = aria
-
-  const ariaProps = {}
-
-  if (label !== null) ariaProps['aria-label'] = label
-
-  return ariaProps
-}
-
 const Button = (props: ButtonPropTypes) => {
   const {
+    aria = {},
     children,
     className,
     data = {},
@@ -84,7 +71,7 @@ const Button = (props: ButtonPropTypes) => {
     value,
   } = props
 
-  const buttonAria = buttonAriaProps(props)
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
@@ -114,11 +101,12 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           href={link}
           id={id}
+          role="link"
           target={newWindow ? '_blank' : null}
       >
         <If condition={loading}>{loadingIcon}</If>
@@ -126,12 +114,13 @@ const Button = (props: ButtonPropTypes) => {
       </a>
       <Else />
       <button
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           disabled={disabled}
           id={id}
           onClick={onClick}
+          role="button"
           type={htmlType}
           value={value}
       >

data/app/pb_kits/playbook/pb_button/button.rb

@@ -21,11 +21,12 @@ module Playbook
 
       def options
         {
-          id: id,
-          data: data,
+          aria: aria,
           class: classname,
+          data: data,
           disabled: disabled,
-          aria: aria,
+          id: id,
+          role: "button",
           type: type,
           value: value,
         }.compact
@@ -34,7 +35,8 @@ module Playbook
       def link_options
         options.merge(
           href: link,
-          target: new_window ? "_blank" : "_self"
+          role: "link",
+          target: new_window ? "_blank" : "_self",
         )
       end
 

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -4,7 +4,7 @@ import { Button } from '../../'
 const ButtonAccessibility = (props) => (
   <div>
     <Button
-        aria={{ label: 'button' }}
+        aria={{ label: 'Go to Google' }}
         link="https://google.com"
         tag="a"
         text="Button with ARIA"

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -4,12 +4,14 @@ import { Button } from '../../'
 const ButtonLink = (props) => (
   <div>
     <Button
+        aria={{ label: 'Link to Google' }}
         link="https://google.com"
         text="A Tag Button"
         {...props}
     />
     {' '}
     <Button
+        aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
         newWindow
         text="Open in New Window"
@@ -17,6 +19,7 @@ const ButtonLink = (props) => (
     />
     {' '}
     <Button
+        aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
-<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
-<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -4,12 +4,14 @@ import { Button } from '../../'
 const ButtonLoading = (props) => (
   <div>
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="Button Primary"
         {...props}
     />
     {' '}
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="Button Secondary"
         variant="secondary"
@@ -17,6 +19,7 @@ const ButtonLoading = (props) => (
     />
     {' '}
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="A Tag Button Disabled"
         variant="link"

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -95,16 +95,16 @@ const PbDate = (props: PbDateProps) => {
         <Else />
         <>
           <If condition={showIcon}>
-            <Body
+            <Caption
                 className="pb_icon_kit_container"
-                color="light"
                 tag="span"
             >
               <Icon
                   fixedWidth
                   icon="calendar-alt"
+                  size="xs"
               />
-            </Body>
+            </Caption>
           </If>
           <If condition={showDayOfWeek}>
             <Caption tag="div">

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -39,11 +39,10 @@
 
     <!-- icon -->
     <% if object.show_icon %>
-      <%= pb_rails("body", props: {
-        color: "light",
+      <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
       <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb

@@ -1,4 +1,12 @@
 <div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    size: "sm"
+  }) %>
+
+  <br>
+
   <%= pb_rails("date", props: {
     date: DateTime.now,
   }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -4,6 +4,16 @@ import { Date as FormattedDate } from '../..'
 const DateVariants = (props) => {
   return (
     <div>
+      <FormattedDate
+          showIcon
+          size="sm"
+          value="1995-12-25"
+          {...props}
+      />
+
+      <br />
+      <br />
+
       <FormattedDate
           value="1995-12-25"
           {...props}

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -1,31 +1,30 @@
 # frozen_string_literal: true
 
 module Playbook
-    module PbDialog
-      class DialogHeader
-        include Playbook::Props
-  
-        partial "pb_dialog/child_kits/dialog_header"
+  module PbDialog
+    class DialogHeader
+      include Playbook::Props
 
-        prop :closeable, type: Playbook::Props::Boolean, default: true
-        prop :padding 
-        prop :separator, type: Playbook::Props::Boolean, default: true
-        prop :spacing
-        prop :text
-        prop :title
-  
-        def dialog_header_options
-          {
-            id: id,
-            closeable: closeable,
-            padding: padding,
-            separator: separator,
-            spacing: spacing,
-            text: text,
-            title: title,
-          }
-        end
+      partial "pb_dialog/child_kits/dialog_header"
+
+      prop :closeable, type: Playbook::Props::Boolean, default: true
+      prop :padding
+      prop :separator, type: Playbook::Props::Boolean, default: true
+      prop :spacing
+      prop :text
+      prop :title
+
+      def dialog_header_options
+        {
+          id: id,
+          closeable: closeable,
+          padding: padding,
+          separator: separator,
+          spacing: spacing,
+          text: text,
+          title: title,
+        }
       end
     end
   end
-  
+end

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -14,7 +14,7 @@ type FlexItemPropTypes = {
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -16,7 +16,7 @@ $selector: ".pb_nav_list";
     list-style: none;
   }
 
-  [class*=_title] {
+  [class*=pb_nav_list_title] {
     padding: 0 $space_md $space_sm;
   }
 

data/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb

@@ -1,6 +1,42 @@
-<%= pb_rails("nav", props: {title: "Menu", link: "#"}) do %>
-  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Photos<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Music<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Video<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Files<% end %>
+<%= pb_rails("nav", props: {title: "Users", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+    }) %>
+  <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Julie Hamilton",
+      territory: "PHL",
+      title: "Inside Sales Agent",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/45.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Dennis Wilks",
+      territory: "PHL",
+      title: "Senior Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/44.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Ronnie Martin",
+      territory: "PHL",
+      title: "Customer Development Representative",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/46.jpg"
+      }) %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Nav } from '../../'
+import { Nav, User } from '../../'
 import NavItem from '../_item.jsx'
 
 const BlockNav = (props) => {
   return (
     <Nav
         link="#"
-        title="Menu"
+        title="Users"
         {...props}
     >
       <NavItem
@@ -14,11 +14,49 @@ const BlockNav = (props) => {
           link="#"
           {...props}
       >
-        {'Photos'}
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            territory="PHL"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
+            name="Julie Hamilton"
+            orientation="horizontal"
+            territory="PHL"
+            title="Inside Sales Agent"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            name="Dennis Wilks"
+            orientation="horizontal"
+            territory="PHL"
+            title="Senior Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
+            name="Ronnie Martin"
+            orientation="horizontal"
+            territory="PHL"
+            title="Customer Development Representative"
+            {...props}
+        />
       </NavItem>
-      <NavItem link="#">{'Music'}</NavItem>
-      <NavItem link="#">{'Video'}</NavItem>
-      <NavItem link="#">{'Files'}</NavItem>
     </Nav>
   )
 }

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -37,6 +37,8 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   label?: string,
+  margin: string,
+  marginBottom: string,
   multiple?: boolean,
   name?: string,
   required?: boolean,
@@ -74,7 +76,14 @@ const Select = ({
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
-  const classes = classnames(buildCss('pb_select'), globalProps(props), className)
+  const classes = classnames(
+    buildCss('pb_select'),
+    globalProps({
+      ...props,
+      marginBottom: props.marginBottom || props.margin || 'sm',
+    }),
+    className)
+
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
 
   return (

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -4,7 +4,6 @@
 @import "../tokens/colors";
 
 [class^=pb_select] {
-  margin-bottom: $space_sm;
   select {
     @include pb_textarea_light;
     @include pb_body_light;
@@ -65,38 +64,36 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  &.dark {
-    select {
-      @include pb_textarea_dark;
-      @include pb_body_light_dark;
-      background: none;
-      background-color: rgba($white,.10);
-      box-shadow: inset 0 -11px 20px rgba($white, 0.05);
-      text-shadow: 0 0 0 $text_dk_default;
-      padding-right: $space_xl;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      @media (hover:hover) {
-        &:hover, &:active, &:focus {
-          background-color: rgba($white,.05);
-        }
-      }
-      &:focus{
-        border-color: $active_dark;
+}
+
+[class^=pb_select].dark {
+  select {
+    @include pb_textarea_dark;
+    @include pb_body_light_dark;
+    background: none;
+    background-color: rgba($white,.10);
+    box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+    text-shadow: 0 0 0 $text_dk_default;
+    padding-right: $space_xl;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: rgba($white,.05);
       }
     }
-    .pb_select_kit_caret {
-      color: $white;
-    }
-    .pb_select_kit_wrapper {
-      &.error {
-        .pb_select_kit_wrapper {
-          > select:first-child {
-            border-color: $error_dark;
-          }
+  }
+  .pb_select_kit_caret {
+    color: $white;
+  }
+  .pb_select_kit_wrapper {
+    &.error {
+      .pb_select_kit_wrapper {
+        > select:first-child {
+          border-color: $error_dark;
         }
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_select/select.rb

@@ -17,13 +17,17 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_select")
+        generate_classname("pb_select", select_margin_bottom, separator: " ")
       end
 
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end
 
+      def select_margin_bottom
+        margin.present? || margin_bottom.present? ? nil : "mb_sm"
+      end
+
       def options_to_array
         options.map { |option| [option[:value_text] || option[:value], option[:value]] }
       end

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -8,7 +8,7 @@
   <% end %>
 
   <%= pb_rails("body") do %>
-    When you make a selection, you will see it apear in the list below
+    When you make a selection, you will see it appear in the list below
   <% end %>
 
   <div data-selected-option></div>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -7,7 +7,11 @@
                 class: object.classname) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
-        <i class="far fa-spinner fa-spin"></i>
+        <%= pb_rails("icon", props: {
+          icon: "spinner",
+          pulse: true,
+          fixed_width: true,
+        }) %>
       </div>
       <%= pb_rails("text_input", props: {
         type: "search",

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -3,8 +3,7 @@
 module Playbook
   module PbTypeahead
     class Typeahead < Playbook::KitBase
-      prop :async, type: Playbook::Props::Boolean,
-                    default: false
+      prop :async, type: Playbook::Props::Boolean, default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
       prop :get_option_label
       prop :get_option_value
@@ -13,9 +12,7 @@ module Playbook
       prop :load_options
       prop :name
       prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean,
-                    default: false
-
+      prop :pills, type: Playbook::Props::Boolean, default: false
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
@@ -45,14 +42,9 @@ module Playbook
           placeholder: placeholder,
         }
 
-        base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?
-        base_options.merge!({getOptionValue: get_option_value}) if get_option_value.present?
-
-        base_options.merge!({
-          async: true,
-          loadOptions: load_options,
-        }) if async
-
+        base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?
+        base_options.merge!({ getOptionValue: get_option_value }) if get_option_value.present?
+        base_options.merge!({ async: true, loadOptions: load_options }) if async
         base_options
       end
     end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.6.1"
+  VERSION = "9.7.0.pre.alpha.a11y.btn"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.6.1
+  version: 9.7.0.pre.alpha.a11y.btn
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-16 00:00:00.000000000 Z
+date: 2021-04-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -285,22 +285,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
 - !ruby/object:Gem::Dependency
   name: rspec-html-matchers
   requirement: !ruby/object:Gem::Requirement
@@ -2115,7 +2115,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2126,12 +2126,13 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubyforge_project:
+rubygems_version: 2.7.3
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []