playbook_ui 15.0.0.pre.alpha.PLAY2473rowhighlightfix10510 → 15.0.0.pre.alpha.PLAY198710641

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

@@ -0,0 +1,144 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const dataFirst = [
+  {
+    name: 'Bugs',
+    y: 8,
+  },
+  {
+    name: 'Chores',
+    y: 1,
+  },
+  {
+    name: 'Stories',
+    y: 12,
+  },
+]
+
+const dataSecond = [
+  {
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+]
+
+const dataThird = [
+  {
+    name: '1 Point Tickets',
+    y: 2,
+  },
+  {
+    name: '3 Point Tickets',
+    y: 5,
+  },
+  {
+    name: '5 Point Tickets',
+    y: 6,
+  },
+  {
+    name: '8 Point Tickets',
+    y: 3,
+  },
+  {
+    name: '13 Point Tickets',
+    y: 1,
+  },
+]
+
+const dataFourth = [
+  {
+    name: 'Facebook',
+    y: 2498,
+  },
+  {
+    name: 'YouTube',
+    y: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    y: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    y: 1300,
+  },
+  {
+    name: 'WeChat',
+    y: 1165,
+  },
+  {
+    name: 'Instagram',
+    y: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    y: 800,
+  },
+]
+
+const PbCircleChartInnerSizes= (props) => {
+const chartOptionsSmall = {
+    series: [{ 
+      data: dataFirst,
+      innerSize: '35%'
+    }],
+  }
+
+  const chartOptionsMedium = {
+    series: [{ 
+      data: dataSecond,
+      innerSize: '50%'
+    }],
+  }
+
+  const chartOptionsLarge = {
+    series: [{ 
+      data: dataThird,
+      innerSize: '85%'
+    }],
+  }
+
+  const chartOptionsNone = {
+    series: [{ 
+      data: dataFourth,
+      innerSize: '0%'
+    }],
+  }
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptionsSmall}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsMedium}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsLarge}
+          {...props}
+      />
+      <PbCircleChart
+          options={chartOptionsNone}
+          {...props}
+      />
+    </div>
+  );
+};
+
+
+export default PbCircleChartInnerSizes;

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

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { PbCircleChart, Button } from "playbook-ui";
+
+const chartData = [
+  {
+    name: "Waiting for Calls",
+    y: 41,
+  },
+  {
+    name: "On Call",
+    y: 49,
+  },
+  {
+    name: "After Call",
+    y: 10,
+  },
+];
+
+const chartData2 = [
+  {
+    name: "Waiting for Calls",
+    y: 48,
+  },
+  {
+    name: "On Call",
+    y: 12,
+  },
+  {
+    name: "After Call",
+    y: 140,
+  },
+];
+
+
+const PbCircleChartLiveData = (props) => {
+
+  const [data, setData] = useState(chartData);
+
+    const updateValue = () => {
+    setData(chartData2)
+  }
+    const chartOptions = {
+    series: [{ data: data }],
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+      />
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartLiveData;

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

@@ -0,0 +1,24 @@
+<% 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',
+    }],
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,42 @@
+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 PbCircleChartRounded = (props) => {
+const chartOptions = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        borderColor: null,
+        borderWidth: 20,
+        innerSize: '100%',
+      },
+    },
+  };
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartRounded;

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

@@ -0,0 +1,38 @@
+<% data = [
+  {
+    name: 'Facebook',
+    y: 2498,
+  },
+  {
+    name: 'YouTube',
+    y: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    y: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    y: 1300,
+  },
+  {
+    name: 'WeChat',
+    y: 1165,
+  },
+  {
+    name: 'Instagram',
+    y: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    y: 800,
+  },
+] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  title: { text: "Active Users on Social Media" },
+  } %>
+
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const data= [
+{
+    name: 'Facebook',
+    y: 2498,
+  },
+  {
+    name: 'YouTube',
+    y: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    y: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    y: 1300,
+  },
+  {
+    name: 'WeChat',
+    y: 1165,
+  },
+  {
+    name: 'Instagram',
+    y: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    y: 800,
+  },
+]
+
+
+const PbCircleChartWithTitle = (props) => {
+const chartOptions = {
+    title: { text: "Active Users on Social Media" },
+    series: [{ data: data }],
+  };
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartWithTitle;

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

@@ -0,0 +1,29 @@
+examples:
+  
+  rails:
+  - pb_circle_chart_default: Default
+  - pb_circle_chart_rounded: Rounded Corners
+  - pb_circle_chart_block_content: Accepts Any Block
+  - pb_circle_chart_color_overrides: Color Overrides
+  - pb_circle_chart_data_with_labels: Data with Labels
+  - pb_circle_chart_data_with_legend: Data with Legend
+  - pb_circle_chart_data_legend_position: Legend Position
+  - pb_circle_chart_with_title: With Title
+  - pb_circle_chart_inner_sizes: Inner Circle Size Options
+  - pb_circle_chart_custom_tooltip: Tooltip Customization
+
+  
+  react:
+  - pb_circle_chart_default: Default
+  - pb_circle_chart_live_data: Live Data
+  - pb_circle_chart_rounded: Rounded Corners
+  - pb_circle_chart_block_content: Accepts Any Block
+  - pb_circle_chart_color_overrides: Color Overrides
+  - pb_circle_chart_data_with_labels: Data with Labels
+  - pb_circle_chart_data_with_legend: Data with Legend
+  - pb_circle_chart_data_legend_position: Legend Position
+  - pb_circle_chart_with_title: With Title
+  - pb_circle_chart_inner_sizes: Inner Circle Size Options
+  - pb_circle_chart_custom_tooltip: Tooltip Customization
+  
+  

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

@@ -0,0 +1,11 @@
+export { default as PbCircleChartDefault } from './_pb_circle_chart_default.jsx'
+export { default as PbCircleChartLiveData } from './_pb_circle_chart_live_data.jsx'
+export { default as PbCircleChartRounded } from './_pb_circle_chart_rounded.jsx'
+export { default as PbCircleChartBlockContent } from './_pb_circle_chart_block_content.jsx'
+export { default as PbCircleChartColorOverrides } from './_pb_circle_chart_color_overrides.jsx'
+export { default as PbCircleChartDataWithLabels } from './_pb_circle_chart_data_with_labels.jsx'
+export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_with_legend.jsx'
+export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
+export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
+export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
+export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'

data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts

@@ -0,0 +1,88 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const pbCircleChartTheme = {
+  title: {
+    text: "",
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.bold,
+      fontSize: typography.heading_3,
+    },
+  },
+  chart: {
+    type: "pie",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    pointFormat:
+      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      "<b>{point.y}</b>",
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: false,
+        connectorShape: "straight",
+        connectorWidth: 3,
+        format: "<div>{point.name}</div>",
+        style: {
+          fontFamily: typography.font_family_base,
+          fontSize: typography.text_smaller,
+          color: colors.text_lt_light,
+          fontWeight: typography.regular,
+          textOutline: '2px $white',
+        },
+      },
+      innerSize: '50%',
+      borderColor: "",
+      borderWidth: null as number | null,
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+    },
+  },
+  legend: {
+    layout: 'horizontal',
+    align: 'center',
+    verticalAlign: 'bottom',
+    itemStyle: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+    itemHoverStyle: {
+      color: colors.text_lt_default,
+    },
+    itemHiddenStyle: {
+      color: colors.text_lt_lighter,
+    },
+  },
+  credits: { enabled: false }
+}
+
+export default pbCircleChartTheme;

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb

@@ -0,0 +1 @@
+<%= react_component('PbCircleChart', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbCircleChart
+    class PbCircleChart < ::Playbook::KitBase
+      prop :options, default: {}
+      prop :container_props, default: {}
+
+      def react_props
+        {
+          options: options,
+          containerProps: container_props_hash,
+        }
+      end
+
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      end
+
+      def classname
+        generate_classname("pb_pb_circle_chart")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { PbCircleChart } from 'playbook-ui'
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const chartOptions = {
+  series: [
+    {
+      data: [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ],
+    },
+  ],
+};
+
+const testId = 'pbcirclechart1';
+
+test('Kit to exist', () => {
+  render(
+  <PbCircleChart 
+      data={{testid: testId}} 
+      options={chartOptions} 
+  />
+)
+  expect(screen.getByTestId(testId)).toBeInTheDocument()
+})
+

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -18,9 +18,11 @@ type TimestampProps = {
   timezone: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  showCurrentYear?: boolean,
   showDate?: boolean,
   showUser?: boolean,
   hideUpdated?: boolean,
+  showTime?: boolean,
   showTimezone?: boolean,
   unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
@@ -37,9 +39,11 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     text,
     timezone,
     timestamp,
+    showCurrentYear = false,
     showDate = true,
     showUser = false,
     hideUpdated = false,
+    showTime = true,
     showTimezone = false,
     unstyled = false,
     variant = 'default',
@@ -55,7 +59,6 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   )
 
   const currentYear = new Date().getFullYear().toString()
-  const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
   const updatedText = hideUpdated ? "" : "Last updated"
@@ -70,16 +73,26 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return timeDisplay
   }
 
+  const baseDateDisplay = () => {
+  let display = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
+  if (DateTime.toYear(timestamp, timezone).toString() !== currentYear || showCurrentYear) {
+    display = `${display}, ${DateTime.toYear(timestamp, timezone)}`
+  }
+  return display
+}
+
   const fullDateDisplay = () => {
-    let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
-    if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
-      fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
-    }
-    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
+    const fullDisplay = baseDateDisplay()
+    return showTime ? `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}` : fullDisplay
   }
 
   const formatUpdatedString = () => {
-    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
+    const finalUpdatedString = []
+    if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
+    if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
+    if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
+    if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
+    return `Last updated ${finalUpdatedString.join(' ')}`
   }
 
   const formatElapsedString = () => {
@@ -93,7 +106,10 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     case 'elapsed':
       return formatElapsedString()
     default:
-      return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
+      if (showDate && showTime) return timestamp ? fullDateDisplay() : text
+      if (showDate && !showTime) return baseDateDisplay()
+      if (!showDate && showTime) return fullTimeDisplay()
+      return text
     }
   }