playbook_ui 14.26.0.pre.rc.0 → 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10507

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Percentage',
+  data: [48, 70, 25, 55, 72],
+  color: '#F9BB00',
+  yAxis: 1
+}]
+
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Secondary Y-axis",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: [{
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      text: "Number of Employees",
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  }, {
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      text: "Percentage",
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+
+    opposite: true,
+    min: 0,
+    max: 100
+  }],
+  legend: { enabled: true },
+}
+
+const PbBarGraphSecondaryYAxis = () => {
+
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphSecondaryYAxis

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb

@@ -0,0 +1,31 @@
+<% chart_data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Trend Line',
+    data: [1975, 600, 2500, 924, 500],
+    color: '#F9BB00',
+}] %>
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: 'Bar Graph with Spline',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+    legend: { enabled: true },
+}
+%>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Trend Line',
+  data: [1975, 600, 2500, 924, 500],
+  color: '#F9BB00',
+}]
+
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Spline",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: { enabled: true },
+};
+
+const PbBarGraphSpline = () => {
+
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphSpline

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md

@@ -0,0 +1,2 @@
+A spline can be added by including a separate chart data with the `type: 'spline'` attribute.
+A color can also be specified for the spline.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb

@@ -0,0 +1,35 @@
+<% chart_data = [{
+    name: 'Installation',
+    data: [1475, 200, 3000, 654, 656],
+  }, 
+  {
+    name: 'Manufacturing',
+    data: [1270, 800, 200, 454, 956],
+  }, {
+    name: 'Sales & Distribution',
+    data: [975, 1600, 1500, 924, 500],
+  }] %>
+
+<% chart_options = {
+  series: chart_data,
+  title: {
+    text: "Bar Graph with Stacked Columns",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  plotOptions: {
+    column: {
+        stacking: 'normal',
+        borderWidth: 0,
+    }
+  },
+  legend: { enabled: true },
+} %>
+
+<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { PbBarGraph } from 'playbook-ui'
+
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, 
+{
+  name: 'Manufacturing',
+  data: [1270, 800, 200, 454, 956],
+}, {
+  name: 'Sales & Distribution',
+  data: [975, 1600, 1500, 924, 500],
+}]
+
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Stacked Columns",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  plotOptions: {
+    column: {
+        stacking: 'normal',
+        borderWidth: 0,
+    }
+  },
+  legend: { enabled: true },
+};
+
+
+const PbBarGraphStacked = () => {
+
+  return (
+    <div>
+      <PbBarGraph
+          options={chartOptions}
+      />
+    </div>
+  )
+}
+
+export default PbBarGraphStacked

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

@@ -0,0 +1,27 @@
+examples:
+
+  rails:
+  - pb_bar_graph_default: Default
+  - pb_bar_graph_legend: Legend
+  - pb_bar_graph_legend_position: Legend Position
+  - pb_bar_graph_height: Height
+  - pb_bar_graph_spline: Spline
+  - pb_bar_graph_colors: Color Overrides
+  - pb_bar_graph_stacked: Stacked
+  - pb_bar_graph_negative_numbers: Negative Numbers
+  - pb_bar_graph_secondary_y_axis: Secondary Y-Axis
+  - pb_bar_graph_horizontal: Horizontal Bar Graph
+
+
+  react:
+  - pb_bar_graph_default: Default
+  - pb_bar_graph_legend: Legend
+  - pb_bar_graph_legend_position: Legend Position
+  - pb_bar_graph_legend_non_clickable: Legend Non Clickable
+  - pb_bar_graph_height: Height
+  - pb_bar_graph_spline: Spline
+  - pb_bar_graph_colors: Color Overrides
+  - pb_bar_graph_stacked: Stacked
+  - pb_bar_graph_negative_numbers: Negative Numbers
+  - pb_bar_graph_secondary_y_axis: Secondary Y-Axis
+  - pb_bar_graph_horizontal: Horizontal Bar Graph

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

@@ -0,0 +1,11 @@
+export { default as PbBarGraphDefault } from './_pb_bar_graph_default.jsx'
+export { default as PbBarGraphLegend } from './_pb_bar_graph_legend.jsx'
+export { default as PbBarGraphLegendPosition } from './_pb_bar_graph_legend_position.jsx'
+export { default as PbBarGraphLegendNonClickable } from './_pb_bar_graph_legend_non_clickable.jsx'
+export { default as PbBarGraphHeight } from './_pb_bar_graph_height.jsx'
+export { default as PbBarGraphSpline } from './_pb_bar_graph_spline.jsx'
+export { default as PbBarGraphColors } from './_pb_bar_graph_colors.jsx'
+export { default as PbBarGraphStacked } from './_pb_bar_graph_stacked.jsx'
+export { default as PbBarGraphNegativeNumbers } from './_pb_bar_graph_negative_numbers.jsx'
+export { default as PbBarGraphSecondaryYAxis } from './_pb_bar_graph_secondary_y_axis.jsx'
+export { default as PbBarGraphHorizontal } from './_pb_bar_graph_horizontal.jsx'

data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts

@@ -0,0 +1,106 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const barGraphTheme = {
+    title: {
+        text: "",
+        style: {
+            color: colors.text_lt_default,
+            fontFamily: typography.font_family_base,
+            fontWeight: typography.bold,
+            fontSize: typography.heading_3,
+        },
+    },
+    subtitle: {
+        text: "",
+        style: {
+            fontFamily: typography.font_family_base,
+            color: colors.text_lt_light,
+            fontWeight: typography.regular,
+            fontSize: typography.text_base,
+        },
+    },
+    chart: {
+        type: "column",
+    },
+    tooltip: {
+        backgroundColor: {
+            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+            stops: [
+                [0, colors.bg_dark],
+                [1, colors.bg_dark],
+            ],
+        },
+        style: {
+            fontFamily: typography.font_family_base,
+            color: colors.text_dk_default,
+            fontWeight: typography.regular,
+            fontSize: typography.text_smaller,
+        },
+    },
+    colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+    ],
+    credits: { enabled: false },
+    legend: { 
+        enabled: false, 
+        itemStyle: {
+            color: colors.text_lt_light,
+            fill: colors.text_lt_light,
+            fontSize: typography.text_smaller,
+        },
+     },
+    xAxis: {
+        gridLineWidth: 0,
+        lineColor: colors.border_light,
+        tickColor: colors.border_light,
+        labels: {
+            style: {
+                fontFamily: typography.font_family_base,
+                color: colors.text_lt_lighter,
+                fontWeight: typography.bold,
+                fontSize: typography.text_smaller,
+            },
+        },
+        title: {
+            style: {
+                color: colors.text_lt_default,
+                fontFamily: typography.font_family_base,
+                fontWeight: typography.regular,
+                fontSize: typography.heading_4,
+            },
+        },
+    },
+    yAxis: {
+        alternateGridColor: undefined as string | undefined,
+        minorTickInterval: null as number | null,
+        gridLineColor: colors.border_light,
+        minorGridLineColor: colors.border_light,
+        lineWidth: 0,
+        tickWidth: 0,
+        labels: {
+            style: {
+                fontFamily: typography.font_family_base,
+                color: colors.text_lt_lighter,
+                fontWeight: typography.bold,
+                fontSize: typography.text_smaller,
+            },
+        },
+        title: {
+            style: {
+                fontFamily: typography.font_family_base,
+                color: colors.text_lt_lighter,
+                fontWeight: typography.bold,
+                fontSize: typography.text_smaller,
+            },
+        },
+    },
+}
+
+export default barGraphTheme;

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb

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

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbBarGraph
+    class PbBarGraph < ::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_bar_graph")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import PbBarGraph from './_pb_bar_graph';
+
+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 testId = 'bargraph1';
+
+test('bargraph uses exact classname', () => {
+  render(
+    <PbBarGraph
+        className='super_important_class'
+        data={{ testid: testId }}
+        id='bar-default'
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('super_important_class');
+});

data/app/pb_kits/playbook/pb_person/_person.scss

@@ -2,7 +2,7 @@
 @import "../pb_body/body";
 @import "../tokens/spacing";
 
-[class^=pb_person_kit] {
+.pb_person_kit {
   display: flex;
   align-items: baseline;
 

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

@@ -284,4 +284,4 @@ $flag-min-resolution: 192dpi;
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -5,30 +5,32 @@
 
 $pb_pill_height: 22px;
 
-[class^=pb_pill_kit] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 $space-sm/1.8;
-  height: $pb_pill_height;
-  border-radius: $pb_pill_height/2;
-  white-space: nowrap;
+// Base styles for all pill variations
+@each $color_name, $color_value in $status_color_text {
+  .pb_pill_kit_#{$color_name}_lowercase,
+  .pb_pill_kit_#{$color_name}_none {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 $space-sm/1.8;
+    height: $pb_pill_height;
+    border-radius: $pb_pill_height/2;
+    white-space: nowrap;
+    background: rgba($color_value, $opacity-1);
 
-  &[class*=lowercase] {
-    text-transform: lowercase;
+    .pb_pill_text {
+      color: $color_value !important;
+    }
   }
+}
 
-  &[class*=none] {
-    text-transform: none;
+// Text transform specific styles
+@each $color_name, $color_value in $status_color_text {
+  .pb_pill_kit_#{$color_name}_lowercase {
+    text-transform: lowercase;
   }
 
-  @each $color_name, $color_value in $status_color_text {
-    &[class*=_#{$color_name}]  {
-        background: rgba($color_value, $opacity-1);
-
-      .pb_pill_text {
-        color: $color_value !important;
-      }
-    }
+  .pb_pill_kit_#{$color_name}_none {
+    text-transform: none;
   }
-}
+}

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -10,37 +10,39 @@
   margin-right: $space_xs;
 }
 
-[class^=pb_progress_pills_kit] {
-  [class*=progress_pills] {
+.pb_progress_pills_kit {
+  .progress_pills {
     display: flex;
   }
 
-  [class*=progress_pills_status] {
+  .progress_pills_status {
     display: flex;
     align-items: center;
     margin-bottom: $space_xs;
 
-    [class*=title] {
+    .pb_title_kit {
       margin-right: $space_xs;
     }
   }
 
-  [class*=pb_progress_pill] {
+  .pb_progress_pill_active,
+  .pb_progress_pill_inactive {
     @include pb_progress_pill;
 
     &.full_width_pill {
       max-width: none;
     }
+  }
 
-    &[class*=_inactive] {
-      background-color: $border_light;
-      &.dark {
+  .pb_progress_pill_inactive {
+    background-color: $border_light;
+    
+    &.dark {
       background-color: $border_dark;
-      }
     }
+  }
 
-    &[class*=_active] {
-      background-color: $primary_action;
-    }
+  .pb_progress_pill_active {
+    background-color: $primary_action;
   }
-}
+}