playbook_ui 15.1.0.pre.rc.3 → 15.1.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6672597a3d7292d3f8bde05c45d1aebb0a1b6f13583a06d219ebcc713b60f7fd
-  data.tar.gz: 60794ba6744e4fb3ee2e1a3d867b539bd5a2cb4c8097f70742502a0dbb94b0f1
+  metadata.gz: 781c39ad9c1ce4cc93b33c4b8e8c1942922316fba49d5d4041c6bf432fd614e6
+  data.tar.gz: 4a35169f2420a0a8c7cf62128ceec089057b426d8f1afb4ec1de23199f42c467
 SHA512:
-  metadata.gz: cb14d882563c2f356f32448dc5b6179f76fb54337868adacdf032480dc996776a69f0b479db436e6bfd71cc364b860a447ae7487a8393717377bf3ad1a17d3ad
-  data.tar.gz: 8fa116fce78aec52471859207c8071e6a6579a9c8d9859933b29fad27ae7993486e4df5229a59ef19c63268ab8d7824a7d57bc4026fede579fc5f292d5bb078d
+  metadata.gz: ffe7f4d984d663bcacf8250915d4146f1e3c35b124a432cc45e98ed779c9f9ddc92389c2020e76beaa531b23b4cfe9f29e86543f212afc84bcaf8a892549d68a
+  data.tar.gz: 12e04d9185e482e6938b55252794c988b3b52d5fbcd168ba3d17ada9131e611036f7dc888410c1469a6d50229df70bd70df60ff6a428960af0ff876981f8ec7e

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_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_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

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb

@@ -0,0 +1,31 @@
+<% data = [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ] %>
+
+<% chart_options = {
+    series: [{
+      data: data,
+      innerSize: '100%',
+      borderWidth: '20',
+    }],
+  } %>
+
+<div style="position: relative;">
+  <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
+
+  <div class="pb-circle-chart-block"
+       style="position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1; text-align: center; pointer-events: none;">
+    <%= pb_rails("title", props: { size: 1, tag: "div", text: "83" }) %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { PbCircleChart, Title } from "playbook-ui";
+
+const data= [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ]
+
+
+const PbCircleChartBlockContent = (props) => {
+const chartOptions = {
+    series: [{
+      data: data,
+      innerSize: '100%',
+      borderWidth: 20,
+      borderColor: null,
+    }],
+    chart: {
+      events: {
+        render: function() {
+          const chart = this;
+          const blockElement = document.querySelector('.pb-circle-chart-block');
+          if (blockElement) {
+            blockElement.style.width = chart.chartWidth + 'px';
+            blockElement.style.height = chart.chartHeight + 'px';
+          }
+        },
+        redraw: function() {
+          const chart = this;
+          const blockElement = document.querySelector('.pb-circle-chart-block');
+          if (blockElement) {
+            blockElement.style.width = chart.chartWidth + 'px';
+            blockElement.style.height = chart.chartHeight + 'px';
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+      <div 
+          className="pb-circle-chart-block"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1,
+            textAlign: 'center',
+            pointerEvents: 'none'
+          }}
+      >
+        <Title
+            size={1}
+            tag="div"
+        >
+          {'83'}
+        </Title>
+      </div>
+    </div>
+  );
+};
+
+export default PbCircleChartBlockContent;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb

@@ -0,0 +1,25 @@
+<% data = [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ] %>
+
+<% chart_options = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        colors: ["#144075", "#1CA05C", "#F9BB00"],
+      },
+    },
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { PbCircleChart, colors } from "playbook-ui";
+
+const data= [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ]
+
+
+const PbCircleChartColorOverrides = (props) => {
+const chartOptions = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        colors: ["#144075", colors.data_4, colors.data_2], // Custom colors via hex OR Playbook color tokens
+      },
+    },
+  };
+
+  return (
+  <div>
+    <PbCircleChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+);
+}
+
+export default PbCircleChartColorOverrides;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md

@@ -0,0 +1,5 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. 
+
+For Rails, only HEX colors can be used eg: `#CA0095`

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb

@@ -0,0 +1,27 @@
+
+<% data = [
+{
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  tooltip: {
+      headerFormat: nil,
+      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
+      useHTML: true,
+    },
+  } %>
+
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const PbCircleChartCustomTooltip = (props) => {
+const chartOptions = {
+    series: [{ data: data }],
+    tooltip: {
+      headerFormat: null,
+      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
+      useHTML: true,
+    },
+  }
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartCustomTooltip;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md

@@ -0,0 +1,5 @@
+Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
+`headerFormat` **Type**: String | when set to null will disable the header.
+`pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
+`useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.
+`{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb

@@ -0,0 +1,93 @@
+<% data_first = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}] %>
+
+<% data_second = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}] %>
+
+<% data_third = [{
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+] %>
+
+
+<% chart_options_first = {
+    title: { text: "Alignment of Legend" },
+    series: [{ data: data_first }],
+    legend: {
+      align: 'right',
+      verticalAlign: 'top'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+  <% chart_options_second = {
+  title: { text: "Layout of Legend" },
+    series: [{ data: data_second }],
+    legend: {
+      layout: 'vertical'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+  <% chart_options_third = {
+   title: { text: "Offset of Legend" },
+    series: [{ data: data_third }],
+    legend: {
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+<%= pb_rails("title", props: { size: 4, text: "align | verticalAlign", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_first }) %>
+<%= pb_rails("title", props: { size: 4, text: "layout", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_second }) %>
+<%= pb_rails("title", props: { size: 4, text: "x | y", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_third }) %>