playbook_ui 11.11.0 → 11.12.1.pre.alpha.passphrase1

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

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria) do %>
+    <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
+        <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
+            <%= object.confirm_button %>
+        <% end %>
+        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
+            <%= object.cancel_button %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDialog
+    class DialogFooter < Playbook::KitBase
+      prop :cancel_button
+      prop :confirm_button
+      prop :confirm_button_id
+      prop :cancel_button_id
+
+      def classname
+        generate_classname("dialog_footer")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria) do %>
+        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
+            <%= content.presence || object.title %>
+            
+            <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
+                <%= pb_rails("icon", props:{icon: "times"}) %>
+            </button>
+        <% end %>
+        <%= pb_rails("section_separator") %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -2,28 +2,11 @@
 
 module Playbook
   module PbDialog
-    class DialogHeader
-      include Playbook::Props
-
-      partial "pb_dialog/child_kits/dialog_header"
-
-      prop :closeable, type: Playbook::Props::Boolean, default: true
-      prop :padding
-      prop :separator, type: Playbook::Props::Boolean, default: true
-      prop :spacing
-      prop :text
+    class DialogHeader < Playbook::KitBase
       prop :title
 
-      def dialog_header_options
-        {
-          id: id,
-          closeable: closeable,
-          padding: padding,
-          separator: separator,
-          spacing: spacing,
-          text: text,
-          title: title,
-        }
+      def classname
+        generate_classname("dialog_header")
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
+
+<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
+        <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -1,2 +1,4 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
-This allows for greater flexibility and more complex dialogs.
+This allows for greater flexibility and more complex dialogs.
+
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "This is a header", 
+    text: "This is a dialog.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md

@@ -0,0 +1,3 @@
+For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a `open-dialog` data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.
+
+Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (`confirm_button_id` and `cancel_button_id`).

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-sm", 
+    size: "sm", 
+    title: "This is a header",
+    text: "I am a small dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+   }) %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-md", 
+    size: "md",
+    title: "This is a header",
+    text: "I am a medium dialog",
+    cancel_button: "Cancel", confirm_button: "Confirm", 
+     })  %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-lg", size: "lg",
+    title: "This is a header",
+    text: "I am a large dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm"
+     }) %>

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

@@ -1,6 +1,9 @@
 examples:
 
   rails:
+  - dialog_default: Simple
+  - dialog_compound_components: Complex
+  - dialog_sizes: Sizes
 
   react:
   - dialog_default: Simple

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -34,6 +34,7 @@ type IconProps = {
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
   size?: IconSizes,
+  fontStyle?: 'far' | 'fas' | 'fab',
   spin?: boolean,
 } & GlobalProps
 
@@ -61,6 +62,7 @@ const Icon = (props: IconProps) => {
     pulse = false,
     rotation,
     size,
+    fontStyle = 'far',
     spin = false,
   } = props
 
@@ -85,7 +87,7 @@ const Icon = (props: IconProps) => {
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : 'far',
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -32,13 +32,16 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
+      prop :font_style, type: Playbook::Props::Enum,
+                        values: %w[far fas fab],
+                        default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
       def classname
         generate_classname(
           "pb_icon_kit",
-          "far",
+          font_style_class,
           icon_class,
           border_class,
           fixed_width_class,
@@ -131,6 +134,10 @@ module Playbook
         size ? "fa-#{size}" : nil
       end
 
+      def font_style_class
+        font_style ? font_style.to_s : "far"
+      end
+
       def spin_class
         spin ? "fa-spin" : nil
       end

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -0,0 +1,155 @@
+import React from 'react'
+import { render, screen, cleanup } from '../utilities/test-utils'
+
+import Icon from './_icon'
+
+const testId = "icon-kit"
+
+describe("Icon Kit", () => {
+    test("renders Icon classname", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
+    })
+
+    test("renders rotate prop", () => {[
+        "90", "180", "270"].forEach((rotateProp)=> {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+                rotation={rotateProp}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
+
+        cleanup()
+    })
+})
+
+    test("renders flip prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                flip="horizontal"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
+    })
+
+
+    test("renders spinning icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="spinner"
+                spin
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders border around icon", () => {
+        render(
+            <Icon
+                border
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
+    })
+
+    test("renders size prop", () => {
+        ["lg",
+        "sm",
+        "xs",
+        "1x",
+        "2x",
+        "3x",
+        "4x",
+        "5x",
+        "6x",
+        "7x",
+        "8x",
+        "9x",
+        "10x"].forEach(
+            (sizeProp) => {
+            render(
+                <Icon
+                    data={{ testid: testId }}
+                    icon="user"
+                    size={sizeProp}
+          />
+            )
+    
+            const kit = screen.getByTestId(testId)
+            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
+
+            cleanup()
+        }) 
+    })
+
+    test("renders fontStyle prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                fontStyle="fas"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+    })
+
+})

data/app/pb_kits/playbook/pb_legend/{_legend.jsx → _legend.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -10,7 +8,7 @@ import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
 
 type LegendProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
   color?: string,
   dark?: boolean,
@@ -59,14 +57,16 @@ const Legend = (props: LegendProps) => {
         <span className={`${customColor ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"}`}
             style={customColorStyle} 
         />
-        <If condition={prefixText}>
-          <Title
+        {
+          prefixText && (
+            <Title
               dark={dark}
               size={4}
               tag="span"
               text={` ${prefixText} `}
           />
-        </If>
+          )
+        }
         {` ${text} `}
       </Body>
     </div>

data/app/pb_kits/playbook/pb_legend/legend.test.js

@@ -27,3 +27,32 @@ test('color prop', () => {
   const kit = screen.getByTestId('primary-test')
   expect(kit).toHaveClass('pb_legend_kit_category_17')
 })
+
+test('prefixText prop renders', () => {
+  render(
+    <Legend
+        color="category_17"
+        data={{ testid: 'primary-test' }}
+        prefixText="10"
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const prefix = kit.querySelector(".pb_title_kit_size_4")
+  expect(prefix).toBeInTheDocument()
+})
+
+test('Color prop renders with custom HEX value', () => {
+  render(
+    <Legend
+        color="#dc418a"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const circle = kit.querySelector(".pb_legend_indicator_circle_custom")
+  expect(circle).toHaveStyle('background: rgb(220, 65, 138);')
+})

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