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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d02c19ea477725a33c15757d8254c21348c16e9d8e5b82b85ec08ffb7e3ac4e
-  data.tar.gz: 75fd3538c8760afa2dcf2818bef4e91451ca0f985044223bdd118f33c740b568
+  metadata.gz: f80298017b48e65f5ec8a3ec7a6782608b90adf0bae7c32596837f3c964f5c85
+  data.tar.gz: 2c8e80673442f37ff2cce022f1324642c80c17b8c6da2912a119502a84c5781e
 SHA512:
-  metadata.gz: 70a500505fe763ab166a92613bb5d3fbf6c6c7b88d53e1727003346c8f5d0e312e629167c840ec17272a63a2cf7f0b15b7657b3b89cd0065c68eb0683a08368e
-  data.tar.gz: 4a1e51d54b520cb7c40f32df8fca6e2f20760b9eb09cf40092b66b50a90a14b6744e50bcaccf5cbc604708861128db5fee6e4efd777eeecfc4ed9f56ac5cb900
+  metadata.gz: ee6e023775fc1c6d7ec91beaec5d1bed2d4cca9f342ef4e7b8c203f70f577e197b7ae0048e1872f881d12c13113fe9eadd7fd3a369c4d0ff8213541c8ab67b9c
+  data.tar.gz: 75e487fb2251126f2c74d67d4db3173c68e2838e7350279f1c4e5a1e5315be3e0c17233e22b645adb8438695317797b05baf44ce0448764db22139200a1e40d3

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

@@ -2,14 +2,16 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { 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?: object,
+  aria?: {
+    label: string,
+  },
   children?: array<React.ReactChild>,
   className?: string | array<string>,
   data?: object,
@@ -53,9 +55,20 @@ 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 = {},
@@ -71,7 +84,7 @@ const Button = (props: ButtonPropTypes) => {
     value,
   } = props
 
-  const ariaProps = buildAriaProps(aria)
+  const buttonAria = buttonAriaProps(props)
   const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
@@ -101,12 +114,11 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...ariaProps}
+          {...buttonAria}
           {...dataProps}
           className={css}
           href={link}
           id={id}
-          role="link"
           target={newWindow ? '_blank' : null}
       >
         <If condition={loading}>{loadingIcon}</If>
@@ -114,13 +126,12 @@ const Button = (props: ButtonPropTypes) => {
       </a>
       <Else />
       <button
-          {...ariaProps}
+          {...buttonAria}
           {...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,12 +21,11 @@ module Playbook
 
       def options
         {
-          aria: aria,
-          class: classname,
+          id: id,
           data: data,
+          class: classname,
           disabled: disabled,
-          id: id,
-          role: "button",
+          aria: aria,
           type: type,
           value: value,
         }.compact
@@ -35,8 +34,7 @@ module Playbook
       def link_options
         options.merge(
           href: link,
-          role: "link",
-          target: new_window ? "_blank" : "_self",
+          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: "Go to Google"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, 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: 'Go to Google' }}
+        aria={{ label: 'button' }}
         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", 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" }) %>
+<%= 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" }) %>

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

@@ -4,14 +4,12 @@ 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"
@@ -19,7 +17,6 @@ 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: { 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 }) %>
+<%= 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 }) %>

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

@@ -4,14 +4,12 @@ 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"
@@ -19,7 +17,6 @@ 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}>
-            <Caption
+            <Body
                 className="pb_icon_kit_container"
+                color="light"
                 tag="span"
             >
               <Icon
                   fixedWidth
                   icon="calendar-alt"
-                  size="xs"
               />
-            </Caption>
+            </Body>
           </If>
           <If condition={showDayOfWeek}>
             <Caption tag="div">

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

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

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

@@ -1,12 +1,4 @@
 <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,16 +4,6 @@ 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_flex/_flex_item.jsx

@@ -14,7 +14,7 @@ type FlexItemPropTypes = {
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = 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*=pb_nav_list_title] {
+  [class*=_title] {
     padding: 0 $space_md $space_sm;
   }
 

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

@@ -1,42 +1,6 @@
-<%= 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 %>
+<%= 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 %>
 <% end %>

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

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Nav, User } from '../../'
+import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
 const BlockNav = (props) => {
   return (
     <Nav
         link="#"
-        title="Users"
+        title="Menu"
         {...props}
     >
       <NavItem
@@ -14,49 +14,11 @@ const BlockNav = (props) => {
           link="#"
           {...props}
       >
-        <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}
-        />
+        {'Photos'}
       </NavItem>
+      <NavItem link="#">{'Music'}</NavItem>
+      <NavItem link="#">{'Video'}</NavItem>
+      <NavItem link="#">{'Files'}</NavItem>
     </Nav>
   )
 }

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 appear in the list below
+    When you make a selection, you will see it apear in the list below
   <% end %>
 
   <div data-selected-option></div>

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

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

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

@@ -3,7 +3,8 @@
 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
@@ -12,7 +13,9 @@ 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
@@ -42,9 +45,14 @@ 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.7.0.pre.alpha.a11y.btn"
+  VERSION = "9.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.7.0.pre.alpha.a11y.btn
+  version: 9.7.0
 platform: ruby
 authors:
 - Power UX
@@ -2126,9 +2126,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project:
 rubygems_version: 2.7.3