playbook_ui 11.11.0 → 11.13.0.pre.alpha.fileupload1

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import pbChart from '../plugins/pb_chart'
 
 type LineGraphProps = {
+  align?: "left" | "right" | "center",
   axisTitle?: string,
   dark?: Boolean,
   xAxisCategories: array,
@@ -27,20 +28,30 @@ type LineGraphProps = {
   toggleLegendClick?: boolean,
   height?: string,
   colors: array,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
   }
 
 export default class LineGraph extends React.Component<LineGraphProps> {
   static defaultProps = {
+    align: "center",
     className: 'pb_bar_graph',
     dark: false,
     gradient: false,
     type: 'line',
     legend: false,
     toggleLegendClick: true,
+    layout: "horizontal",
+    verticalAlign: "bottom",
+    x: 0,
+    y: 0,
   }
 
   componentDidMount() {
     const {
+      align,
       axisTitle,
       dark,
       xAxisCategories,
@@ -57,9 +68,14 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       toggleLegendClick,
       height,
       colors = [],
+      layout,
+      verticalAlign,
+      x,
+      y,
     } = this.props
 
     new pbChart(`.${className}`, {
+      align,
       axisTitle: axisTitle,
       chartData: chartData,
       colors: colors,
@@ -75,6 +91,10 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       legend: legend,
       toggleLegendClick: toggleLegendClick,
       height: height,
+      layout,
+      verticalAlign,
+      x,
+      y,
     })
   }
 

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb

@@ -0,0 +1,62 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+}, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+}, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+}] %>
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("line_graph", props: {
+    id: "legend-position-line",
+    gradient: false,
+    chart_data: data,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Alignment of Legend',
+    axis_title: 'Number of Employees',
+    legend: true,
+    align: 'right',
+    vertical_align: 'top',
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("line_graph", props: {
+    id: "legend-position-line-1",
+    gradient: false,
+    chart_data: data,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Layout of Legend',
+    axis_title: 'Number of Employees',
+    legend: true,
+    layout: 'vertical',
+    padding_top: "sm",
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("line_graph", props: {
+    id: "legend-position-line-2",
+    gradient: false,
+    chart_data: data,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Offset of Legend',
+    axis_title: 'Number of Employees',
+    legend: true,
+    layout: "vertical",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { LineGraph, Title } from '../..'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const LineGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <LineGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line"
+        legend
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-1"
+        layout="vertical"
+        legend
+        title="Layout of Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphLegendPosition

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md

@@ -0,0 +1,17 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+- 
+
+- `layout` determines the position of the legend items
+`layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
+
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - line_graph_default: Default
   - line_graph_legend: Legend
+  - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height
   - line_graph_colors: Color Overrides
@@ -11,6 +12,7 @@ examples:
   react:
   - line_graph_default: Default
   - line_graph_legend: Legend
+  - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height
   - line_graph_colors: Color Overrides

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.12.0"
+  VERSION = "11.13.0.pre.alpha.fileupload1"
 end