playbook_ui 11.11.0.pre.alpha.renderer1 → 11.12.0

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

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.