playbook_ui 14.2.1 → 14.3.0.pre.alpha.revert3654PBNTR479removeextraspacingfromradiochildren3734

data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-target-blank */
-/* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+/* eslint-disable react/no-multi-comp */
 
 import React from 'react'
 import classnames from 'classnames'
@@ -18,6 +18,7 @@ type HashtagProps = {
   id?: string,
   newWindow?: boolean,
   rel?: string,
+  target?: string,
   text?: string,
   type: "default" | "home" | "project" | "appointment",
   url?: string,
@@ -40,6 +41,7 @@ const Hashtag = (props: HashtagProps) => {
     id,
     newWindow,
     rel,
+    target,
     text,
     type = 'default',
     url,
@@ -50,6 +52,18 @@ const Hashtag = (props: HashtagProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_hashtag_kit'), globalProps(props), className)
 
+  const getTargetAttribute = () => {
+    if (target && url) {
+      return target
+    } else if (newWindow) {
+      return '_blank'
+    } else {
+      return '_self'
+    }
+
+    return null
+  }
+
   return (
     <span
         {...ariaProps}
@@ -61,7 +75,7 @@ const Hashtag = (props: HashtagProps) => {
       <a
           href={url}
           rel={(newWindow ? "noreferrer" : rel)}
-          target={(newWindow ? '_blank' : '_self')}
+          target={getTargetAttribute()}
       >
         <Badge
             dark={dark}

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb

@@ -2,4 +2,4 @@
 
 <br/><br/>
 
-<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", new_window: true}) %>
+<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", target: "_blank"}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -13,7 +13,7 @@ const HashtagLink = (props) => {
       <br />
       <br />
       <Hashtag
-          newWindow
+          target="_blank"
           text="Open in a new window"
           type="project"
           url="https://google.com"

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md

@@ -1 +1 @@
-Use the newWindow/new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)
+Use the `target` prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any [web/standard](https://www.w3schools.com/tags/att_a_target.asp) values or a custom string to specify your link target.

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag(:span) do %>
-  <%= link_to object.url, target: object.link_option do %>
+  <%= link_to object.url, target: object.target_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -10,6 +10,7 @@ module Playbook
                   values: %w[default project home appointment],
                   default: "default"
       prop :url
+      prop :target
 
       def classname
         generate_classname("pb_hastag_kit")
@@ -19,8 +20,14 @@ module Playbook
         type_text + text
       end
 
-      def link_option
-        new_window ? "_blank" : "_self"
+      def target_option
+        if target && url
+          target
+        elsif new_window
+          "_blank"
+        else
+          "_self"
+        end
       end
 
     private

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -23,6 +23,7 @@ type HomeAddressStreetProps = {
   homeId: string,
   houseStyle: string,
   homeUrl: string,
+  target: string,
   newWindow: boolean,
   state: string,
   zipcode: string,
@@ -42,6 +43,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
+    target,
     newWindow,
     houseStyle,
     state,
@@ -62,6 +64,19 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
   const dataProps: GenericObject = buildDataProps(data)
   const ariaProps: GenericObject = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
+
+  const getTargetAttribute = () => {
+    if (target && homeUrl) {
+      return target
+    } else if (newWindow) {
+      return '_blank'
+    } else {
+      return '_self'
+    }
+
+    return null
+  }
+
   return (
     <div
         className={classes(className, dark)}
@@ -120,6 +135,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             dark={dark}
             marginRight="xxs"
             newWindow={newWindow}
+            target={getTargetAttribute()}
             text={homeId}
             type="home"
             url={homeUrl || '#'}

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

@@ -33,6 +33,7 @@
     type: "home",
     dark: object.dark,
     classname: "home-hashtag",
+    target: object.target_option,
     new_window: object.new_window}) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb

@@ -10,9 +10,20 @@ module Playbook
       prop :home_url
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
+      prop :target
       prop :territory
       prop :zip
       prop :dark, type: Playbook::Props::Boolean, default: false
+
+      def target_option
+        if target && home_url
+          target
+        elsif new_window
+          "_blank"
+        else
+          "_self"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb

@@ -5,7 +5,7 @@
   home_id: 8250263,
   home_url: "https://powerhrg.com/",
   house_style: "Colonial",
-  new_window: true,
+  target: "_blank",
   state: "PA",
   zipcode: "19382",
   territory: "PHL",

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

@@ -11,8 +11,8 @@ const HomeAddressStreetLink= (props) => {
         homeId={8250263}
         homeUrl="https://powerhrg.com/"
         houseStyle="Colonial"
-        newWindow
         state="PA"
+        target="_blank"
         territory="PHL"
         zipcode="19382"
         {...props}

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md

@@ -1 +1 @@
-Use the `newWindow` / `new_window` prop to control whether the link opens on the same page or a new tab (same page is the default behavior)
+Use the `target` prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any [web/standard](https://www.w3schools.com/tags/att_a_target.asp) values or a custom string to specify your link target.

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -14,6 +14,7 @@ module Playbook
       prop :house_style
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
+      prop :target
       prop :state
       prop :zipcode
       prop :territory
@@ -55,6 +56,7 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
+          target: target_option,
           new_window: new_window,
           territory: territory,
           zip: zip,
@@ -69,11 +71,22 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
+          target: target_option,
           new_window: new_window,
           territory: territory,
         }
       end
 
+      def target_option
+        if target && home_url
+          target
+        elsif new_window
+          "_blank"
+        else
+          "_self"
+        end
+      end
+
     private
 
       def dark_class

data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js

@@ -23,10 +23,10 @@ function HomeAdressStreetTest(props) {
             territory="PHL"
             zipcode="19382"
             {...props}
-    />
+        />
     );
   }
-  
+
   test("renders the component", () => {
     render(<HomeAdressStreetTest />);
     const kit = screen.getByTestId("primary-test");

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

@@ -23,7 +23,8 @@
     type: "home",
     dark: object.dark,
     classname: "home-hashtag",
-    new_window: object.new_window}) %>
+    new_window: object.new_window,
+    target: object.target_option}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb

@@ -10,9 +10,20 @@ module Playbook
       prop :home_url
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
+      prop :target
       prop :territory
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+
+      def target_option
+        if target && home_url
+          target
+        elsif new_window
+          "_blank"
+        else
+          "_self"
+        end
+      end
     end
   end
 end

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

@@ -102,6 +102,11 @@ module Playbook
       def render_svg
         doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
         svg = doc.at_css "svg"
+
+        unless svg
+          return "" # Return an empty string if SVG element is not found
+        end
+
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
@@ -112,6 +117,9 @@ module Playbook
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color
         raw doc
+      rescue OpenURI::HTTPError, StandardError
+        # Handle any exceptions and return an empty string
+        ""
       end
 
       def is_svg?

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: calc($size/2);
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -2,6 +2,6 @@
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: calc($space-xs/1.5);
+    margin-bottom: $space-xs/1.5;
   }
 }

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -17,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 calc($space-xs/2);
+      margin: 0 0 $space-xs/2;
     }
 
     .message_title {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -18,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: calc($pb_multiple_users_size/2) + 2;
+    border-radius: $pb_multiple_users_size / 2 + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

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

@@ -0,0 +1,24 @@
+<%= pb_rails("nav", props: { variant: "bold" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city", collapsed: false, icon_right: "none" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks", icon_right: "none" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city", icon_right: "none" }) do %>
+        <%= pb_rails("nav", props: { variant: "bold" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+  

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

@@ -0,0 +1,88 @@
+import React from "react";
+import { Nav, NavItem } from 'playbook-ui'
+
+const CollapsibleNavNoIcon = (props) => {
+  return (
+    <Nav 
+        variant="bold"
+        {...props}
+    >
+      <NavItem
+          active
+          collapsed={false}
+          collapsible 
+          iconLeft="city" 
+          iconRight="none"
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="theater-masks"
+          iconRight="none"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          iconRight="none"
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
+
+export default CollapsibleNavNoIcon

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

@@ -0,0 +1 @@
+Optionally remove the expand/collapse icon(s) from any collapsible nav item by passing "none" to the `icon_right` prop on that nav item.

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

@@ -0,0 +1 @@
+Optionally remove the expand/collapse icon(s) from any collapsible nav item by passing "none" to the `iconRight` prop on that nav item.

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

@@ -13,6 +13,7 @@ examples:
   - nav_with_font_control: Nav With Font Control
   - collapsible_nav: Collapsible Nav
   - collapsible_nav_with_all_options: Collapsible Nav With Options
+  - collapsible_nav_no_icon: Collapsible Nav No Icon
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -37,6 +38,7 @@ examples:
   - collapsible_nav_with_all_options: Collapsible Nav With Options
   - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
   - collapsible_nav_custom: Collapsible Nav With Custom Toggling
+  - collapsible_nav_no_icon: Collapsible Nav No Icon
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav

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

@@ -15,7 +15,8 @@ export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
 export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
 export { default as CollapsibleNav } from './_collapsible_nav.jsx'
 export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
-export {default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_all_options.jsx"
+export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_all_options.jsx"
 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 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"

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -33,6 +33,7 @@ $top_bottom_radius: 0px;
     border-top-right-radius: $top_bottom_radius;
     border-bottom-right-radius: $top_bottom_radius;
     cursor: pointer;
+    transition: background-color $transition_default ease-out, color $transition_default ease-out;
   }
   li:last-child > a, li:last-child > span, .pagination-number, .pagination-right {
     padding: $pagination_padding;
@@ -40,13 +41,14 @@ $top_bottom_radius: 0px;
     z-index: 2;
     border-top-left-radius: $top_bottom_radius;
     border-bottom-left-radius: $top_bottom_radius;
+    transition: background-color $transition_default ease-out, color $transition_default ease-out;
   }
   a, .pagination-number {
     color: $text_lt_default;
     font-size: $text_small;
     font-weight: $regular;
     border: none;
-    transition: all $transition_default ease-out;
+    transition: background-color $transition_default ease-out, color $transition_default ease-out, border-color $transition_default ease-out;
 
     &:hover {
       @include hover-state;

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -21,14 +21,14 @@
   }
 
   .passphrase-label {
-    margin-right: calc($space_xs/2);
+    margin-right: $space_xs / 2;
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: calc($space_xs/2);
+      margin-bottom: $space_xs / 2;
     }
 
     .passphrase-text-input input {
@@ -57,7 +57,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: calc($space_xs/2);
+    margin-bottom: $space_xs/2;
 
     &.progress-empty-input {
       visibility: hidden;

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,4 +1,4 @@
-@import "intl-tel-input/build/css/intlTelInput.css";
+@import "./intlTelInput";
 @import "../tokens/colors";
 
 $transform-rotate-deg: 135deg;
@@ -101,7 +101,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-(calc($transform-rotate-deg/3)));
+    transform: rotate(-($transform-rotate-deg/3));
     top: $space_xs + 4px;
     color: $primary_action;
   }