playbook_ui 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
    const dataProps = buildDataProps(data)
    const htmlProps = buildHtmlProps(htmlOptions);
-  const dialogClassNames = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
+  const classes = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };
@@ -93,10 +93,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
-  const classes = classnames(
+  const wrapperClasses = classnames(
     buildCss("pb_dialog_wrapper"),
-    globalProps(props),
-    className
   );
 
   const [triggerOpened, setTriggerOpened] = useState(false),
@@ -173,13 +171,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={classes}
+          className={wrapperClasses}
       >
         <Modal
             ariaHideApp={false}
-            className={dialogClassNames}
+            className={classes}
             closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
+            contentLabel="Dialog"
             id={id}
             isOpen={modalIsOpened}
             onRequestClose={onClose}

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -12,7 +12,7 @@
         data-cancel-button-id="<%= object.cancel_button_id %>"
     <% end %>
 >
-    <%= pb_content_tag(:dialog) do %>
+    <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,8 +2,8 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
+                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -35,6 +35,7 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
+
   const {
     autoClose = 0,
     children,
@@ -87,8 +88,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     <>
       {showToast && (
         <div
+            aria-atomic="true"
+            aria-live="polite"
             className={css}
             onClick={handleClick}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") handleClick();
+            }}
+            role="status"
+            tabIndex={0}
             {...htmlProps}
         >
           {returnedIcon && icon !== "none" && (
@@ -111,6 +119,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
           {closeable && (
             <Icon
+                aria={{ "label": "Close Toast" }}
                 className="pb_icon"
                 cursor="pointer"
                 fixedWidth={false}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,6 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0, onkeydown: "if(event.key==='Enter'||event.key===' '){ this.remove(); }" ) do %>
     <% if object.icon_value && object.icon_value != "none" %>
-    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
     <% end %>
     <% if content %>
         <%= content %>
@@ -8,5 +8,5 @@
         <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
     <% end %>
 
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
 <% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -91,6 +91,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -90,7 +90,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -2,12 +2,13 @@ import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from '../utilities/object'
 
 // Kit selectors
-const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'
-const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
+const KIT_SELECTOR                           = '[class^="pb_"][class*="_kit"]'
+const ERROR_MESSAGE_SELECTOR                 = '.pb_body_kit_negative'
 
 // Validation selectors
-const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
-const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
+const FORM_SELECTOR                          = 'form[data-pb-form-validation="true"]'
+const REQUIRED_FIELDS_SELECTOR               = 'input[required],textarea[required],select[required]'
+const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
 
 const FIELD_EVENTS = [
   'change',
@@ -28,6 +29,14 @@ class PbFormValidation extends PbEnhancedElement {
         }, 250), false)
       })
     })
+
+    // Add event listener to check for phone number validation errors
+    this.element.addEventListener('submit', (event) => {
+      if (this.hasPhoneNumberValidationErrors()) {
+        event.preventDefault()
+        return false
+      }
+    })
   }
 
   validateFormField(event) {
@@ -68,6 +77,12 @@ class PbFormValidation extends PbEnhancedElement {
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
+  // Check if there are phone number input errors
+  hasPhoneNumberValidationErrors() {
+    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
+    return phoneNumberErrors.length > 0
+  }
+
   get errorMessageContainer() {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -20,7 +20,7 @@ export type IconSizes = "lg"
 | ""
 
 type IconProps = {
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string | boolean }
   border?: string,
   className?: string,
   color?: string,
@@ -211,7 +211,15 @@ const Icon = (props: IconProps) => {
   )
 
   aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+
+  const normalizedAria: { [key: string]: string } = Object.fromEntries(
+    Object.entries(aria).map(([key, value]) => [
+      key,
+      typeof value === "boolean" ? String(value) : value,
+    ])
+  )
+  
+  const ariaProps = buildAriaProps(normalizedAria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -222,6 +230,7 @@ const Icon = (props: IconProps) => {
         <>
           {
             React.cloneElement(iconElement || customIcon, {
+              ...ariaProps,
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -237,6 +246,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <span
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classesEmoji}
@@ -250,6 +260,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <i
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classes}

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -110,12 +110,20 @@ module Playbook
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
-        svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
+
+        if object.aria.present?
+          object.aria.each do |key, value|
+            k = key.to_s
+            attr = k.start_with?("aria-") ? k : "aria-#{k.tr('_', '-')}"
+            svg[attr] = value
+          end
+        end
+
         raw doc
       rescue OpenURI::HTTPError, StandardError
         # Handle any exceptions and return an empty string

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -51,6 +51,7 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
+          aria={aria}
           borderRadius="xs"
           htmlType={htmlType}
           link={link}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -1,5 +1,6 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: { type: object.type,
+  <%= pb_rails("button", props: { aria: object.aria,
+                                  type: object.type,
                                   link: object.link,
                                   new_window:object.new_window,
                                   target: object.target,

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true, aria: { "aria-label": "#{object.icon} icon" } }) %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -16,6 +16,7 @@ type LoadingInlineProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
+  variant?: "dotted" | "solid" ,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -28,6 +29,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     htmlOptions = {},
     id,
     text = ' Loading',
+    variant = 'dotted',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -54,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon="spinner"
+            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
             pulse
         />
         {text}

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: object.spinner_icon, pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -8,10 +8,21 @@ module Playbook
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :text, type: Playbook::Props::String, default: "Loading"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[dotted solid],
+                     default: "dotted"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)
       end
+
+      def spinner_icon
+        if variant == "dotted"
+          "spinner"
+        elsif variant == "solid"
+          "spinner-solid"
+        end
+      end
     end
   end
 end

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

@@ -140,7 +140,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const Tag = link ? "a" : "div";
+  const isLink = !!link
+  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" : "";
@@ -200,6 +201,13 @@ 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 === " ")) {
+      e.preventDefault()
+      onClick?.()
+    }
+  }
+
   return (
     <>
       {collapsible ? (
@@ -222,15 +230,18 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
                   {...dataProps}
                   {...htmlProps}
                   className={classes}
-                  href={link}
+                  href={isLink ? link : undefined}
                   id={id}
-                  target={target}
+                  role={!isLink ? "button" : undefined}
+                  tabIndex={!isLink ? 0 : undefined}
+                  target={isLink ? target : undefined}
               >
                 {imageUrl && (
                   <div
                       className="pb_nav_list_item_icon_section_collapsible"
                       key={imageUrl}
                       onClick={(e) => handleIconClick(e)}
+                      onKeyDown={!isLink ? handleKeyDown : undefined}
                   >
                     <Image className="pb_nav_img_wrapper"
                         url={imageUrl}
@@ -265,10 +276,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...dataProps}
             {...htmlProps}
             className={classes}
-            href={link}
+            href={isLink ? link : undefined}
             id={id}
             onClick={onClick}
-            target={target}
+            onKeyDown={!isLink ? handleKeyDown : undefined}
+            role={!isLink ? "button" : undefined}
+            tabIndex={!isLink ? 0 : undefined}
+            target={isLink ? target : undefined}
         >
           {imageUrl && (
             <div className="pb_nav_list_item_icon_section"

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

@@ -48,3 +48,30 @@
     &: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: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: $border_light;
+    z-index: 1;
+  }
+
+  .pb_nav_list_kit_item_active.pb_nav_list_item_link {
+      position: relative;
+      z-index: 2;
+  }
+
+  &.dark {
+    &::after {
+      background-color: rgba($white, $opacity_3);
+    }
+  }
+}

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

@@ -117,3 +117,19 @@ test('should change variant', () => {
     const kit = screen.getByTestId(navTestId)
     expect(kit).toHaveClass('pb_nav_list_subtle_vertical_highlight')
 })
+
+test('extendedUnderline should work as expected', () => {
+    render(
+        <NavDefault extendedUnderline 
+            orientation="horizontal" 
+        />
+    )
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_extended_underline')
+})
+
+test('extendedUnderline should not be applied when orientation is vertical', () => {
+    render(<NavDefault extendedUnderline />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).not.toHaveClass('pb_nav_extended_underline')
+})

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

@@ -14,6 +14,7 @@ type NavProps = {
   className?: string | string[],
   data?: Record<string, unknown>,
   dark?: boolean,
+  extendedUnderline?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -33,6 +34,7 @@ const Nav = (props: NavProps): React.ReactElement => {
     className,
     data = {},
     dark = false,
+    extendedUnderline = false,
     highlight = true,
     htmlOptions = {},
     id,
@@ -52,6 +54,9 @@ const Nav = (props: NavProps): React.ReactElement => {
       highlight: highlight,
       borderless: borderless,
     }),
+    // extended underline is only applicable for horizontal normal nav, should not 
+    // affect other variants or orientations
+    variant === 'normal' && orientation === 'horizontal' && extendedUnderline && 'pb_nav_extended_underline',
     globalProps(props),
     className
   )

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", extended_underline: true }) 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: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

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

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const HorizontalNavExtendedunderline = (props) => {
+  return (
+    <Nav
+        extendedUnderline
+        link="#"
+        orientation="horizontal"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default HorizontalNavExtendedunderline

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md

@@ -0,0 +1 @@
+The optional `extendedUnderline`/`extended_underline` prop can be used with the default `normal` variant of the horizontal orientation of the nav to extend the underline to take up the full width of the container. 

data/app/pb_kits/playbook/pb_nav/docs/example.yml

@@ -17,6 +17,7 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
+  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -42,6 +43,7 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
+  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

data/app/pb_kits/playbook/pb_nav/docs/index.js

@@ -19,4 +19,5 @@ export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_
 export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
-export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
+export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
+export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -3,7 +3,9 @@
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
         <%= pb_content_tag( object.tag,
             href: object.link && object.link,
-            target: object.link && object.target
+            target: object.link && object.target,
+            onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
+            tabindex: object.link ? nil : 0,
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -23,7 +25,9 @@
   <% else %>
     <%= pb_content_tag( object.tag,
         href: object.link && object.link,
-        target: object.link && object.target
+        target: object.link && object.target,
+        onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
+        tabindex: object.link ? nil : 0,
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -14,9 +14,10 @@ module Playbook
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false
       prop :tabbing, type: Playbook::Props::Boolean, default: false
+      prop :extended_underline, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
+        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class) + extended_underline_class
       end
 
       def data
@@ -34,6 +35,10 @@ module Playbook
       def borderless_class
         borderless ? "borderless" : nil
       end
+
+      def extended_underline_class
+        variant === "normal" && orientation === "horizontal" && extended_underline ? " pb_nav_extended_underline" : ""
+      end
     end
   end
 end