playbook_ui 15.4.0.pre.rc.4 → 15.5.0.pre.alpha.PLAY2554homeaddressstreetaccessibility12695

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -1,21 +1,156 @@
 import React from 'react'
 
 import HomeAddressStreet from '../_home_address_street'
+import Caption from '../../pb_caption/_caption'
 
 const HomeAddressStreetDefault = (props) => {
   return (
-    <HomeAddressStreet
-        address="70 Prospect Ave"
-        addressCont="Apt M18"
-        city="West Chester"
-        homeId="8250263"
-        homeUrl="https://powerhrg.com/"
-        houseStyle="Colonial"
-        state="PA"
-        territory="PHL"
-        zipcode="19382"
-        {...props}
-    />
+    <>
+      <Caption text="with all" />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First two lines blank: without address and address cont and housestyle"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line half blank Second line full: with housestyle and without address and address cont"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line full Second line blank: with address and housestyle and without address cont and address cont"
+      />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line half blank Second line full: without address and with housestyle and address cont and address cont"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line blank Second line full: with address cont and without address and housestyle and address cont"
+      />
+      <HomeAddressStreet
+          addressCont="Apt M18"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="Emphasis, Modified, Target and Formatted doc examples below and address cont"
+      />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          city="West Chester"
+          emphasis="none"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          emphasis="city"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          emphasis="none"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          city="West Chester"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId={8250263}
+          homeUrl="https://powerhrg.com/"
+          marginBottom="sm"
+          state="PA"
+          target="_blank"
+          territory="PHL"
+          zipcode="19382"
+      />
+      <HomeAddressStreet
+          address="70 pRoSpEcT ave"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          preserveCase
+          state="pa"
+          territory="PHL"
+          zipcode="19382"
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.html.erb

@@ -1,15 +1,19 @@
-<%= pb_rails "body", props: {
-  classname: "pb_home_address_street_address",
-  size: 4,
-  text: object.address_house_style,
-  dark: object.dark
-} %>
-<%= pb_rails "body", props: {
-  classname: "pb_home_address_street_address",
-  size: 4,
-  text: object.address_house_style2,
-  dark: object.dark
-} %>
+<% if object.address_house_style.present? %>
+  <%= pb_rails "body", props: {
+    classname: "pb_home_address_street_address",
+    size: 4,
+    text: object.address_house_style,
+    dark: object.dark
+  } %>
+<% end %>
+<% if object.address_house_style2.present? %>
+  <%= pb_rails "body", props: {
+    classname: "pb_home_address_street_address",
+    size: 4,
+    text: object.address_house_style2,
+    dark: object.dark
+  } %>
+<% end %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb

@@ -1,15 +1,19 @@
-<%= pb_rails "title", props: {
-  classname: "pb_home_address_street_address",
-  size: 4,
-  text: object.address_house_style,
-  dark: object.dark
-} %>
-<%= pb_rails "title", props: {
-  classname: "pb_home_address_street_address",
-  size: 4,
-  text: object.address_house_style2,
-  dark: object.dark
-} %>
+<% if object.address_house_style.present? %>
+  <%= pb_rails "title", props: {
+    classname: "pb_home_address_street_address",
+    size: 4,
+    text: object.address_house_style,
+    dark: object.dark
+  } %>
+<% end %>
+<% if object.address_house_style2.present? %>
+  <%= pb_rails "title", props: {
+    classname: "pb_home_address_street_address",
+    size: 4,
+    text: object.address_house_style2,
+    dark: object.dark
+  } %>
+<% end %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LoadingInline } from 'playbook-ui'
+import LoadingInline from '../_loading_inline'
 
 const LoadingInlineVariant = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -43,6 +43,7 @@ type NavItemProps = {
   marginLeft?: Spacing;
   marginX?: Spacing;
   marginY?: Spacing;
+  disabled?: boolean;
 } & GlobalProps;
 
 const NavItem = (props: NavItemProps) => {
@@ -89,6 +90,7 @@ const NavItem = (props: NavItemProps) => {
     marginLeft,
     marginX,
     marginY,
+    disabled = false,
   } = props;
 
   const spacingMarginProps = {
@@ -140,11 +142,12 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const isLink = !!link
+  const isLink = !!link && !disabled
   const Tag = isLink ? "a" : "div"
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
+  const disabledClass = disabled ? "pb_nav_item_disabled" : "";
 
   const fontSizeMapping = {
     "small": "font_size_small",
@@ -177,6 +180,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
     fontWeightClass,
     tagClasses,
     collapsible ? globalProps(filteredProps, {...filteredPadding}) : globalProps(props, {...itemSpacing}),
+    disabledClass,
     className
   );
 
@@ -202,12 +206,21 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isLink && (e.key === "Enter" || e.key === " ")) {
+    if (!disabled && !isLink && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault()
       onClick?.()
     }
   }
 
+  const handleClick = (e: React.MouseEvent) => {
+    if (disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+    onClick?.()
+  }
+
   return (
     <>
       {collapsible ? (
@@ -275,13 +288,14 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
+            aria-disabled={disabled}
             className={classes}
             href={isLink ? link : undefined}
             id={id}
-            onClick={onClick}
+            onClick={handleClick}
             onKeyDown={!isLink ? handleKeyDown : undefined}
             role={!isLink ? "button" : undefined}
-            tabIndex={!isLink ? 0 : undefined}
+            tabIndex={disabled ? -1 : (!isLink ? 0 : undefined)}
             target={isLink ? target : undefined}
         >
           {imageUrl && (

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

@@ -45,16 +45,18 @@
 
   [class*="pb_nav_list_kit_item"],
   [class*="pb_nav_list_item"] {
-    &:hover { cursor: pointer; }
+    &:hover {
+      cursor: pointer;
+    }
   }
 }
 
 .pb_nav_extended_underline {
   position: relative;
-  
+
   // Add full-width border using pseudo-element so as not to break the active item border
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     bottom: 0;
     left: 0;
@@ -65,8 +67,8 @@
   }
 
   .pb_nav_list_kit_item_active.pb_nav_list_item_link {
-      position: relative;
-      z-index: 2;
+    position: relative;
+    z-index: 2;
   }
 
   &.dark {
@@ -75,3 +77,26 @@
     }
   }
 }
+
+// Disabled scss
+.pb_nav_item_disabled {
+  cursor: not-allowed !important;
+  .pb_nav_list_item_text, 
+  .pb_nav_list_item_icon_left,
+  .pb_nav_list_item_icon_right,
+  .pb_nav_list_item_icon_section {
+    color: $text_lt_lighter !important;
+    cursor: not-allowed !important;
+  }
+  @media (hover: hover) {
+    &:hover {
+      background-color: unset !important;
+      color: $text_lt_lighter !important;
+      .pb_nav_list_item_text,
+      .pb_nav_list_item_icon_left,
+      .pb_nav_list_item_icon_right {
+        color: $text_lt_lighter !important;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -5,6 +5,8 @@ import Nav from './_nav'
 import NavItem from './_item'
 
 const navTestId = 'nav'
+const navDisabledTestId = 'nav-disabled'
+const itemDisabledTestId = 'item-disabled'
 const itemTestId = 'item'
 const activeTestBorderlessId = 'activeborderless'
 const activeTestBorderId = 'active'
@@ -105,3 +107,193 @@ test('should have a left icon', () => {
     const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
     expect(icon).toBeInTheDocument()
 })
+
+test('should apply disabled class when disabled (horizontal nav)', () => {
+    [
+     "default",
+     "subtle",
+     "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveClass('pb_nav_item_disabled')
+    })
+})
+
+test('should set aria-disabled when disabled (horizontal nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(item).toHaveAttribute('aria-disabled', 'true')
+    })
+})
+
+test('should set tabIndex to -1 when disabled (horizontal nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveAttribute('tabIndex', '-1')
+    })
+})
+
+test('should prevent onClick when disabled', () => {
+    const handleClick = jest.fn()
+    render(
+        <NavItem
+            data={{ testid: 'disabled-click-item' }}
+            disabled
+            link="#"
+            onClick={handleClick}
+            text="Disabled Item"
+        />
+    )
+    const kit = screen.getByTestId('disabled-click-item')
+    kit.click()
+    expect(handleClick).not.toHaveBeenCalled()
+})
+
+test('should apply disabled class when disabled (vertical nav)', () => {
+    [
+     "default",
+     "subtle",
+     "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveClass('pb_nav_item_disabled')
+    })
+})
+
+test('should set aria-disabled when disabled (vertical nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(item).toHaveAttribute('aria-disabled', 'true')
+    })
+})
+
+test('should set tabIndex to -1 when disabled (vertical nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveAttribute('tabIndex', '-1')
+    })
+})

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

@@ -44,7 +44,7 @@ $selector: ".pb_nav_list";
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
         @media (hover: hover) {
-          &:hover {
+          &:hover:not(.pb_nav_item_disabled) {
             background-color: rgba($primary, 0.03);
             [class*="_icon"] {
               color: $primary;

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

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Subtle Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Bold Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>