playbook_ui 15.0.0.pre.alpha.removewebpacker10549 → 15.0.0.pre.alpha.removewebpacker10589

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7ac1e8ff6d7cfcd2fcf7660fc26e5585eb1f54a37107e03ba8864df37fde50d
-  data.tar.gz: a38023975d9ce5398f87737d4d2ee78fb9467ceb5fe801f2e11e09b0af90d099
+  metadata.gz: 5f1d58c0974115b7178c36d9cda95c0eacbfadd7b855f74d97d272acc9c62e1b
+  data.tar.gz: f602e748ae8b93fc70a7a4ee7a26876c7dcca1b8c68d65687d2c7e1d254c9238
 SHA512:
-  metadata.gz: 3a9d6d917182a8ae335cf2741aff92c321a75332ca1db15a46b90ab31eb3c6dafbb3ac6bb39c066cec0e07cd216cdf676dfe22e7a474a07ca7bdae77b392c965
-  data.tar.gz: 2f5dc9be0293d0e3dc7be1d10963c9527d7bd2e781041ad6f72fd6968ae01e16b9b444b421a4640d847ecd556e5790e0ddaec5665a24fab877c952e76c3094e9
+  metadata.gz: fb8ac648144f2747012cd782f136b169e1e2c041cb7cd80e51727811968233ec5121542cccc8daf4ad1781d662e16138dd8d689867fd2b2bafce700a7c7b1d15
+  data.tar.gz: 60ac54b5f6e52494d90565b6eaa63e2d322b84d776eba943445aa19d5e65e9bae06eddb32acf292ecb03b6d5c200d7cab0d2e351c18904497be2d0ca0db5f014

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,6 @@
 
 
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -109,6 +110,7 @@
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'pb_pb_bar_graph/pb_bar_graph';
+@import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -20,7 +20,7 @@
 // Dark mode
 .pb_card_kit.dark {
   @include pb_card_dark;
-  
+
   &.pb_card_kit_selected {
     @include pb_card_selected_dark;
   }
@@ -33,7 +33,8 @@
 
 // Highlight styles
 .pb_card_kit_highlight_top,
-.pb_card_kit_highlight_side {
+.pb_card_kit_highlight_side,
+.pb_card_kit_highlight_right_side {
   overflow: hidden;
 }
 
@@ -52,13 +53,20 @@
   }
 }
 
-// Highlight side variants  
+// Highlight side variants
 @each $color_name, $color_value in $pb_card_highlight_colors {
   .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
     @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
   }
 }
 
+// Highlight side right variants
+@each $color_name, $color_value in $pb_card_highlight_colors {
+  .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
+    @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
+  }
+}
+
 // Card Header
 .pb_card_header_kit {
   flex-grow: 0;
@@ -68,7 +76,7 @@
   padding: $space_sm;
   border: 0;
   border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
-  
+
   // Inherit border radius from parent card
   .pb_card_kit_border_radius_xs & {
     border-radius: $border_radius_xs $border_radius_xs 0px 0px;

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -26,7 +26,7 @@ type CardPropTypes = {
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
-    position?: "side" | "top",
+    position?: "side" | "right_side" | "top",
     color?: string,
   },
   id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
   const headerColorCSS = `pb_card_header_kit_${headerColor}`
   const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
-  
+
   const headerCSS = classnames(
     'pb_card_header_kit',
     headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
   const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
   const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
-  
+
   const cardCss = classnames(
     'pb_card_kit', // Base class
     selectedCSS,

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -87,6 +87,16 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
   background: $background;
 }
 
+@mixin pb_card_right_highlight($width, $height, $background){
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: $width;
+  height: $height;
+  background: $background;
+}
+
 @mixin pb_card_header_color($header_color) {
   background: $header_color;
 }

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -4,6 +4,9 @@
 <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
   Top Position & Warning Color
 <% end %>
+<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
+  Right Side Position & Product 5 Highlight Color
+<% end %>
 <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
   Side Position & Category 2 Color
 <% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -21,6 +21,14 @@ const CardHighlight = (props) => {
         {'Top Position & Warning Color'}
       </Card>
 
+      <Card
+          {...props}
+          highlight={{ position: 'right_side', color: 'product_5_highlight' }}
+          marginBottom="sm"
+      >
+        {'Right Side Position & Product 5 Highlight Color'}
+      </Card>
+
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}

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_multi_level_select/_multi_level_select.tsx

@@ -93,8 +93,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     className
   );
 
-  const inputId = id ? `${id}_multiselect_input` : `${Math.random().toString(36).slice(2)}_multiselect_input`;
-
   const dropdownRef = useRef(null);
 
   // State for whether dropdown is open or closed
@@ -328,11 +326,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
-  console.log("test", inputId, e.target.id)
-  if (disabled) return
-  // ignore clicks that originated from the input or pills
-  if (e.target.id === inputId || e.target.classList?.contains('pb_form_pill_tag')) return
-  setIsDropdownClosed(false)
+    if (
+      e.target.id === "multiselect_input" ||
+      e.target.classList.contains("pb_form_pill_tag") ||
+      disabled
+    ) {
+      return;
+    }
+    setIsDropdownClosed(!isDropdownClosed);
   };
 
   // Main function to handle any click inside dropdown
@@ -441,10 +442,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     }
   };
 
-const handleChevronClick = (e: React.MouseEvent) => {
-  e.stopPropagation()
-  setIsDropdownClosed(prev => !prev)
-}
 
   return (
     <div
@@ -558,13 +555,13 @@ const handleChevronClick = (e: React.MouseEvent) => {
 
             <input
                 disabled={disabled}
-                id={inputId}
+                id="multiselect_input"
                 onChange={(e) => {
                   variant === "single"
                     ? handleRadioInputChange(e.target.value)
                     : setFilterItem(e.target.value);
                 }}
-                onClick={(e) => { e.stopPropagation(); setIsDropdownClosed(false) }}
+                onClick={() => setIsDropdownClosed(false)}
                 placeholder={
                   inputDisplay === "none" && itemsSelectedLength()
                     ? `${itemsSelectedLength()} ${
@@ -579,8 +576,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
 
           {isDropdownClosed ? (
             <div id={arrowDownElementId}
-                key="chevron-down"
-                onClick={handleChevronClick}>
+                key="chevron-down">
               <Icon
                   icon="chevron-down"
                   id={arrowDownElementId}
@@ -589,8 +585,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
             </div>
           ) : (
             <div id={arrowUpElementId}
-                key="chevron-up"
-                onClick={handleChevronClick}>
+                key="chevron-up">
               <Icon
                   icon="chevron-up"
                   id={arrowUpElementId}

data/app/pb_kits/playbook/pb_multi_level_select/index.js

@@ -12,129 +12,94 @@ export default class PbMultiLevelSelect extends PbEnhancedElement {
   }
 
   connect() {
-    this.justBlurred = false;
     this.addEventListeners();
     this.observeHiddenInputs();
     this.observeRogueErrorInsideInnerContainer();
-    // @ts-ignore
-    console.log("[MLS ENHANCER] connect", this.element);
-  }
-
-  disconnect() {
-    if (this.inputElement && this.onInvalid) {
-      this.inputElement.removeEventListener("invalid", this.onInvalid);
-    }
-    if (this.inputElement && this.onBlur) {
-      this.inputElement.removeEventListener("blur", this.onBlur);
-    }
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-    }
-    if (this.rogueErrorObserver) {
-      this.rogueErrorObserver.disconnect();
-    }
-    // @ts-ignore
-    console.log("[MLS ENHANCER] disconnect", this.element);
   }
 
   addEventListeners() {
     const inputElement = this.element.querySelector("input");
-    if (!inputElement) {
-      // @ts-ignore
-      console.log("[MLS ENHANCER] no input found");
-      return;
-    }
-
-    this.inputElement = inputElement;
 
-    this.onInvalid = () => {
-      // @ts-ignore
-      console.log("[MLS ENHANCER] input invalid");
+    inputElement.addEventListener("invalid", () => {
       this.handleErrorLabel(300);
-    };
-
-    this.onBlur = () => {
+    });
+    inputElement.addEventListener("blur", () => {
       this.justBlurred = true;
-      // @ts-ignore
-      console.log("[MLS ENHANCER] input blur");
+
       setTimeout(() => {
         this.justBlurred = false;
       }, 300);
-    };
-
-    inputElement.addEventListener("invalid", this.onInvalid);
-    inputElement.addEventListener("blur", this.onBlur);
-    // @ts-ignore
-    console.log("[MLS ENHANCER] listeners attached");
+    });
   }
 
   handleErrorLabel(delay) {
     setTimeout(() => {
       const errorLabelElement = this.target;
       const wrapper = this.element.querySelector(".wrapper");
-      // @ts-ignore
-      console.log("[MLS ENHANCER] handleErrorLabel", {
-        hasErrorLabel: !!errorLabelElement,
-        hasWrapper: !!wrapper,
-      });
+
+      if (errorLabelElement) {
+        errorLabelElement.remove();
+        if (wrapper) {
+          if (wrapper.querySelector(".pb_body_kit_negative")) {
+            wrapper.querySelector(".pb_body_kit_negative").remove();
+          }
+          wrapper.appendChild(errorLabelElement);
+        }
+        this.element.classList.add("error");
+      } else {
+        this.handleErrorLabel(100);
+      }
     }, delay);
   }
 
   observeHiddenInputs() {
     const container = this.element.querySelector(".input_inner_container");
-    if (!container) {
-      // @ts-ignore
-      console.log("[MLS ENHANCER] no .input_inner_container found");
-      return;
-    }
+    if (!container) return;
 
-    this.mutationObserver = new MutationObserver((mutations) => {
-      // @ts-ignore
-      console.log("[MLS ENHANCER] hidden inputs observer mutations", mutations.length);
+    this.mutationObserver = new MutationObserver(() => {
       const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
-      // @ts-ignore
-      console.log("[MLS ENHANCER] hidden inputs count", hiddenInputs.length);
       if (hiddenInputs.length > 0) {
-        this.clearError({});
+        // At least one hidden input exists, so clear the error
+        this.clearError();
       }
     });
 
-    this.mutationObserver.observe(container, { childList: true });
-    // @ts-ignore
-    console.log("[MLS ENHANCER] hidden inputs observer attached");
+    this.mutationObserver.observe(container, {
+      childList: true,
+    });
   }
 
   observeRogueErrorInsideInnerContainer() {
     const container = this.element.querySelector(".input_inner_container");
-    if (!container) {
-      // @ts-ignore
-      console.log("[MLS ENHANCER] no .input_inner_container for rogue observer");
-      return;
-    }
 
     this.rogueErrorObserver = new MutationObserver((mutations) => {
-      // @ts-ignore
-      console.log("[MLS ENHANCER] rogue error observer mutations", mutations.length, "justBlurred:", this.justBlurred);
       for (const mutation of mutations) {
         for (const node of mutation.addedNodes) {
           if (
             node.nodeType === Node.ELEMENT_NODE &&
             node.classList.contains("pb_body_kit_negative")
           ) {
-            // @ts-ignore
-            console.log("[MLS ENHANCER] pb_body_kit_negative added inside inner container", node);
+            if (this.justBlurred) {
+              node.remove();
+            }
           }
         }
       }
     });
 
-    this.rogueErrorObserver.observe(container, { childList: true, subtree: true });
-    // @ts-ignore
-    console.log("[MLS ENHANCER] rogue error observer attached");
+    this.rogueErrorObserver.observe(container, {
+      childList: true,
+      subtree: true,
+    });
   }
 
   clearError(e) {
-    // @ts-ignore
-    console.log("[MLS ENHANCER] clearError called", e);
+    const errorLabelElement = this.target;
+
+    if (errorLabelElement) {
+      errorLabelElement.remove();
+      this.element.classList.remove("error");
+      this.element.querySelector("input").value = e.detail.value;
+    }
   }
 }

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/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_passphrase/docs/_passphrase_breached.html.erb

@@ -4,8 +4,8 @@
 
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -10,8 +10,8 @@
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     const commonText = document.querySelector("#body_common")
 
@@ -133,4 +133,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb

@@ -4,8 +4,8 @@
 
 <div id="match"> </div>
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {   
+<script>
+    window.addEventListener("load", () => {   
 
       const useState = (defaultValue) => {
           let value = defaultValue;
@@ -48,4 +48,4 @@
 
       }
     })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -32,8 +32,8 @@
 
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
 
     // variables for the passphrase kits you are targeting 
@@ -320,4 +320,4 @@
 
   
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -7,8 +7,8 @@
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss

@@ -0,0 +1,3 @@
+.pb_pb_circle_chart {
+
+}

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -0,0 +1,62 @@
+
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import pbCircleGraphTheme from './pbCircleChartTheme'
+import { globalProps } from '../utilities/globalProps'
+
+type PbCircleChartProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  options: Record<string, unknown>
+}
+
+const PbCircleChart = (props: PbCircleChartProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  htmlOptions = {},
+  options
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(buildCss('pb_pb_circle_chart'), globalProps(props), className)
+
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <PbCircleChart />", options)
+      return {}
+    }
+
+    return Highcharts.merge({}, pbCircleGraphTheme, options)
+  }, [options])
+
+  return (
+
+    <div>
+      <HighchartsReact
+          containerProps={{
+                  className: classnames(globalProps, className),
+                  id: id,
+                  ...ariaProps,
+                  ...dataProps,
+                  ...htmlProps
+                }}
+          highcharts={Highcharts}
+          options={mergedOptions}
+      />
+    </div>
+  )
+}
+
+export default PbCircleChart