playbook_ui 11.11.0 → 11.12.0

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

@@ -1,5 +1,6 @@
 export { default as LineGraphDefault } from './_line_graph_default.jsx'
 export { default as LineGraphLegend } from './_line_graph_legend.jsx'
+export { default as LineGraphLegendPosition } from './_line_graph_legend_position.jsx'
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbLineGraph
     class LineGraph < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left right center],
+                   default: "center"
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
@@ -22,6 +25,14 @@ module Playbook
       prop :height
       prop :colors, type: Playbook::Props::Array,
                     default: []
+      prop :layout, type: Playbook::Props::Enum,
+                    values: %w[horizontal vertical proximate],
+                    default: "horizontal"
+      prop :vertical_align, type: Playbook::Props::Enum,
+                            values: %w[top middle bottom],
+                            default: "bottom"
+      prop :x, type: Playbook::Props::Numeric
+      prop :y, type: Playbook::Props::Numeric
 
       def chart_type
         gradient ? "area" : "line"
@@ -29,13 +40,14 @@ module Playbook
 
       def chart_options
         {
+          align: align,
           id: id,
           className: classname,
           chartData: chart_data,
           dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
-          subtitle: subtitle,
+          subTitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
           xAxisCategories: x_axis_categories,
@@ -45,6 +57,10 @@ module Playbook
           toggleLegendClick: toggle_legend_click,
           height: height,
           colors: colors,
+          layout: layout,
+          verticalAlign: vertical_align,
+          x: x,
+          y: y,
         }
       end
 

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -40,7 +40,7 @@
     }
   }
 
-  &.vertical {
+  &[class*=vertical] {
     flex-direction: column;
     align-items: center;
     .pb_radio_button {

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -6,6 +6,7 @@
   &[class*=_1] {
     @include pb_title_1;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_2] {
@@ -26,4 +27,8 @@
   &.dark {
     @include pb_title_dark;
   }
+
+  &[class*=_thin] {
+    @include pb_title_thin;
+  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -5,6 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
 
 type TitleProps = {
   aria?: {[key: string]: string},
+  bold?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
@@ -20,6 +21,7 @@ const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
+    bold = true,
     children,
     className,
     color,
@@ -33,8 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
+  const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color),
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb}

@@ -5,7 +5,7 @@
 
 <br/>
 
-<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %> 
-<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
-<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>

data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Title from '../_title'
 
-const TitleLight = (props) => {
+const TitleDefault = (props) => {
   return (
     <div>
       <Title
@@ -11,15 +11,9 @@ const TitleLight = (props) => {
       />
       <br />
       <Title
-          size={4}
-          tag="h4"
-          text="Title 4"
-          {...props}
-      />
-      <Title
-          size={3}
-          tag="h3"
-          text="Title 3"
+          size={1}
+          tag="h1"
+          text="Title 1"
           {...props}
       />
       <Title
@@ -29,13 +23,19 @@ const TitleLight = (props) => {
           {...props}
       />
       <Title
-          size={1}
-          tag="h1"
-          text="Title 1"
+          size={3}
+          tag="h3"
+          text="Title 3"
+          {...props}
+      />
+      <Title
+          size={4}
+          tag="h4"
+          text="Title 4"
           {...props}
       />
     </div>
   )
 }
 
-export default TitleLight
+export default TitleDefault

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleLightWeight = (props) => {
+  return (
+    <div>
+      <Title
+          bold={false}
+          size={1}
+          tag="h1"
+          text="Title 1"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleLightWeight

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -0,0 +1,4 @@
+##### Prop
+Title `size 1` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 2` & `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

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

@@ -1,8 +1,10 @@
 examples:
   rails:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors
 
   react:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors

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

@@ -1,2 +1,3 @@
-export { default as TitleLight } from './_title_light.jsx'
+export { default as TitleDefault } from './_title_default.jsx'
+export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,9 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
+      prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color)
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
+      end
+
+      def is_bold
+        bold ? nil : "thin"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -15,6 +15,19 @@ test('returns namespaced class name', () => {
   expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
+test('with thin font weight', () => {
+  render(
+    <Title
+        bold={false}
+        data={{ testid: 'primary-test' }}
+        text="Test thin font weight"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+})
+
 test('with colors', () => {
   render(
     <Title

data/app/pb_kits/playbook/playbook-rails.js

@@ -9,6 +9,10 @@ import './pb_form/pb_form_validation'
 import datePickerHelper from './pb_date_picker/date_picker_helper'
 window.datePickerHelper = datePickerHelper
 
+// Dialog
+import dialogHelper from './pb_dialog/dialogHelper'
+window.dialogHelper = dialogHelper
+
 // Lazy image loading
 import 'lazysizes'
 

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -167,6 +167,14 @@ class pbChart {
         },
       },
 
+      legend: {
+        align: this.defaults.align,
+        verticalAlign: this.defaults.verticalAlign,
+        layout: this.defaults.layout,
+        x: this.defaults.x,
+        y: this.defaults.y,
+      },
+
       plotOptions: {
         pie: {
           colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
@@ -255,6 +263,11 @@ class pbChart {
       },
       legend: {
         enabled: this.defaults.legend,
+        align: this.defaults.align,
+        verticalAlign: this.defaults.verticalAlign,
+        layout: this.defaults.layout,
+        x: this.defaults.x,
+        y: this.defaults.y,
       },
       colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -18,7 +18,6 @@
 
 @mixin pb_title_1 {
   @include pb_title($heading_1);
-  letter-spacing: -0.03em;
 }
 
 @mixin pb_title_2 {
@@ -31,8 +30,18 @@
 
 @mixin pb_title_4 {
   @include pb_title($heading_4, $bolder);
+  letter-spacing: -0.03em;
 }
 
 @mixin pb_title_dark {
   color: $text_dk_default;
 }
+
+@mixin pb_title_bold {
+  font-weight: $bolder;
+}
+
+@mixin pb_title_thin {
+  font-weight: $lighter;
+  letter-spacing: $lspace_tight;
+}

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -30,7 +30,7 @@ $text_smallest:     $font_smallest;
 
 
 /* Headings */
-$heading_1: 48px;
+$heading_1: 46px;
 $heading_2: 34px;
 $heading_3: $font_larger;
 $heading_4: $font_base;
@@ -41,7 +41,7 @@ $heading_4: $font_base;
 // Letter Spacing
 $lspace_tightest:         -.1em;
 $lspace_tighter:          -.07em;
-$lspace_tight:            -.03em;
+$lspace_tight:            -.01em;
 $lspace_normal:           0;
 $lspace_loose:            .03em;
 $lspace_looser:           .07em;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.10.0"
-  VERSION = "11.11.0"
+  PREVIOUS_VERSION = "11.11.0"
+  VERSION = "11.12.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.11.0
+  version: 11.12.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-28 00:00:00.000000000 Z
+date: 2022-11-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -377,6 +377,9 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md
@@ -550,6 +553,9 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
@@ -808,19 +814,28 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
 - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
-- app/pb_kits/playbook/pb_dialog/_dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/_dialog.scss
 - app/pb_kits/playbook/pb_dialog/_dialog.tsx
 - app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
+- app/pb_kits/playbook/pb_dialog/dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog.rb
 - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
+- app/pb_kits/playbook/pb_dialog/dialogHelper.js
+- app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
+- app/pb_kits/playbook/pb_dialog/dialog_body.rb
+- app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
+- app/pb_kits/playbook/pb_dialog/dialog_footer.rb
+- app/pb_kits/playbook/pb_dialog/dialog_header.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog_header.rb
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
@@ -831,6 +846,7 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
@@ -1116,6 +1132,7 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/index.js
 - app/pb_kits/playbook/pb_icon/icon.html.erb
 - app/pb_kits/playbook/pb_icon/icon.rb
+- app/pb_kits/playbook/pb_icon/icon.test.js
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
@@ -1244,8 +1261,8 @@ files:
 - app/pb_kits/playbook/pb_layout/layout.test.js
 - app/pb_kits/playbook/pb_layout/sidebar.html.erb
 - app/pb_kits/playbook/pb_layout/sidebar.rb
-- app/pb_kits/playbook/pb_legend/_legend.jsx
 - app/pb_kits/playbook/pb_legend/_legend.scss
+- app/pb_kits/playbook/pb_legend/_legend.tsx
 - app/pb_kits/playbook/pb_legend/docs/_description.md
 - app/pb_kits/playbook/pb_legend/docs/_footer.md
 - app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb
@@ -1301,6 +1318,9 @@ files:
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx
+- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb
+- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx
+- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
 - app/pb_kits/playbook/pb_line_graph/docs/example.yml
 - app/pb_kits/playbook/pb_line_graph/docs/index.js
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
@@ -1995,9 +2015,12 @@ files:
 - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
 - app/pb_kits/playbook/pb_title/docs/_title_colors.jsx
 - app/pb_kits/playbook/pb_title/docs/_title_colors.md
-- app/pb_kits/playbook/pb_title/docs/_title_light.html.erb
-- app/pb_kits/playbook/pb_title/docs/_title_light.jsx
-- app/pb_kits/playbook/pb_title/docs/_title_light.md
+- app/pb_kits/playbook/pb_title/docs/_title_default.html.erb
+- app/pb_kits/playbook/pb_title/docs/_title_default.jsx
+- app/pb_kits/playbook/pb_title/docs/_title_default.md
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx
+- app/pb_kits/playbook/pb_title/docs/_title_light_weight.md
 - app/pb_kits/playbook/pb_title/docs/example.yml
 - app/pb_kits/playbook/pb_title/docs/index.js
 - app/pb_kits/playbook/pb_title/title.html.erb

data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb

@@ -1,10 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    dark: object.dark) do %>
-  <% if object.children %>
-    <%= pb_rails("dialog/dialog_header", props: { children: object.children }) %>
-  <% end %>
-<% end %>