playbook_ui 11.11.0 → 11.12.1.pre.alpha.passphrase1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (99) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +2 -0
  3. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +21 -1
  4. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +17 -1
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb +62 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md +17 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_button/_button.scss +6 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb +4 -4
  12. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +18 -17
  13. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +15 -0
  14. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +16 -0
  15. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +86 -0
  16. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +114 -0
  17. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +17 -0
  18. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -0
  19. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  20. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +50 -50
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx +1 -0
  22. data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +89 -89
  23. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss +15 -0
  24. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +30 -1
  25. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +28 -0
  26. data/app/pb_kits/playbook/pb_dialog/dialog.rb +7 -35
  27. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +21 -0
  28. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +7 -0
  29. data/app/pb_kits/playbook/pb_dialog/dialog_body.rb +13 -0
  30. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +13 -0
  31. data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +16 -0
  32. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +13 -0
  33. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +3 -20
  34. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +12 -0
  35. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md +3 -1
  36. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +11 -0
  37. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md +3 -0
  38. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +29 -0
  39. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +3 -0
  40. data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -1
  41. data/app/pb_kits/playbook/pb_icon/icon.rb +8 -1
  42. data/app/pb_kits/playbook/pb_icon/icon.test.js +155 -0
  43. data/app/pb_kits/playbook/pb_legend/{_legend.jsx → _legend.tsx} +6 -6
  44. data/app/pb_kits/playbook/pb_legend/legend.test.js +29 -0
  45. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +20 -0
  46. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb +62 -0
  47. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +83 -0
  48. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md +17 -0
  49. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
  50. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  51. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +17 -1
  52. data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +56 -97
  53. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +145 -1
  54. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +127 -3
  55. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md +11 -2
  56. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +136 -0
  57. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +90 -8
  58. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.md +5 -0
  59. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +51 -0
  60. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx +39 -0
  61. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb +0 -2
  62. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx +6 -20
  63. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb +2 -2
  64. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx +1 -1
  65. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +318 -5
  66. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +134 -48
  67. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md +11 -5
  68. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +123 -0
  69. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx +96 -20
  70. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md +6 -2
  71. data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +4 -0
  72. data/app/pb_kits/playbook/pb_passphrase/docs/index.js +1 -0
  73. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  74. data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +5 -9
  75. data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx +0 -47
  76. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -1
  77. data/app/pb_kits/playbook/pb_title/_title.scss +5 -0
  78. data/app/pb_kits/playbook/pb_title/_title.tsx +4 -1
  79. data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb} +3 -3
  80. data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx} +14 -14
  81. data/app/pb_kits/playbook/pb_title/docs/{_title_light.md → _title_default.md} +0 -0
  82. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
  83. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +19 -0
  84. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +4 -0
  85. data/app/pb_kits/playbook/pb_title/docs/example.yml +4 -2
  86. data/app/pb_kits/playbook/pb_title/docs/index.js +2 -1
  87. data/app/pb_kits/playbook/pb_title/title.rb +6 -1
  88. data/app/pb_kits/playbook/pb_title/title.test.js +13 -0
  89. data/app/pb_kits/playbook/playbook-rails.js +4 -0
  90. data/app/pb_kits/playbook/plugins/pb_chart.js +13 -0
  91. data/app/pb_kits/playbook/tokens/_titles.scss +10 -1
  92. data/app/pb_kits/playbook/tokens/_typography.scss +2 -2
  93. data/lib/playbook/version.rb +2 -2
  94. metadata +37 -13
  95. data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +0 -10
  96. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md +0 -1
  97. data/app/pb_kits/playbook/pb_passphrase/passwordStrength.js +0 -55
  98. data/app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js +0 -52
  99. data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js +0 -58
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 01a1e3109de5059d750e0f17e5f9ead0781c6b6ad6c3729186b9c31eb3ff9a90
4
- data.tar.gz: a6daa201b636522e49e95279007ccded48567c7e1b2c8c4994f595b0b2ff1656
3
+ metadata.gz: 6a2d4fa765df74ba9a5c6abd8ec9bd670371bb4b752bbdec10225d4d35d66293
4
+ data.tar.gz: ce21ba1dc523fc7875b39a604a0b63f7c54b5f62cd27297a2209f3cfa1b42dc2
5
5
  SHA512:
6
- metadata.gz: 3a8decc17e61b0c22c47d0e0248418490270c9c313768b2da5c757e74997646644f089abbc8b696ad61983befb3d1836cf675868b33e6cdc730c2f31e60f6587
7
- data.tar.gz: 634d88b0f381e09676cff75ef918f4269dcdb1d0537b95fb02e8142ee7c9dace945a7825f8d6795785ad819a6f115c75f665660a8c5df99bd4e605e5b0611402
6
+ metadata.gz: dace3a848d70cbc4cc6e854aa8bd0c687c8acc6485f37235daabbd18acab8b6393e8e4e2a4c021deb64811303c60364ac8fb43e00201bdd9f0e3f1c59f205d5c
7
+ data.tar.gz: 7fb618f8c14835809a4b2d02d0afac8476048a5c2209e846466999263a68021ec0ba069ad40bab7b8d7ff72c21952c37d4bc1a887c5e6e93e11214298ae93e7d
@@ -11,6 +11,7 @@ export { default as Badge } from './pb_badge/_badge'
11
11
  export { default as BarGraph } from './pb_bar_graph/_bar_graph'
12
12
  export { default as Body } from './pb_body/_body'
13
13
  export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
14
+ export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
14
15
  export { default as Button } from './pb_button/_button'
15
16
  export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
16
17
  export { default as Caption } from './pb_caption/_caption'
@@ -121,3 +122,4 @@ export { default as PbTable } from './pb_table'
121
122
  export { default as PbTextarea } from './pb_textarea'
122
123
  export { default as PbTooltip } from './pb_tooltip'
123
124
  export { default as PbTypeahead } from './pb_typeahead'
125
+ export { default as dialogHelper } from './pb_dialog/dialogHelper'
@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
7
7
  import pbChart from '../plugins/pb_chart'
8
8
 
9
9
  type BarGraphProps = {
10
+ align?: "left" | "right" | "center",
10
11
  axisTitle: string,
11
12
  dark?: Boolean,
12
13
  xAxisCategories: array,
@@ -26,19 +27,29 @@ type BarGraphProps = {
26
27
  toggleLegendClick?: boolean,
27
28
  height?: string,
28
29
  colors: array,
30
+ layout?: "horizontal" | "vertical" | "proximate",
31
+ verticalAlign?: "top" | "middle" | "bottom",
32
+ x?: number,
33
+ y?: number,
29
34
  }
30
35
 
31
36
  export default class BarGraph extends React.Component<BarGraphProps> {
32
37
  static defaultProps = {
38
+ align: "center",
33
39
  className: 'pb_bar_graph',
34
40
  dark: false,
35
41
  type: 'column',
36
42
  legend: false,
37
43
  toggleLegendClick: true,
44
+ layout: "horizontal",
45
+ verticalAlign: "bottom",
46
+ x: 0,
47
+ y: 0,
38
48
  }
39
49
 
40
50
  componentDidMount() {
41
51
  const {
52
+ align,
42
53
  axisTitle,
43
54
  dark,
44
55
  xAxisCategories,
@@ -55,9 +66,14 @@ export default class BarGraph extends React.Component<BarGraphProps> {
55
66
  height,
56
67
  toggleLegendClick,
57
68
  colors = [],
69
+ layout,
70
+ verticalAlign,
71
+ x,
72
+ y,
58
73
  } = this.props
59
74
 
60
75
  new pbChart(`.${className}`, {
76
+ align,
61
77
  axisTitle: axisTitle,
62
78
  dark,
63
79
  chartData: chartData,
@@ -70,9 +86,13 @@ export default class BarGraph extends React.Component<BarGraphProps> {
70
86
  xAxisCategories: xAxisCategories,
71
87
  yAxisMin: yAxisMin,
72
88
  yAxisMax: yAxisMax,
73
- legend: legend,
89
+ legend,
74
90
  toggleLegendClick: toggleLegendClick,
75
91
  height: height,
92
+ layout,
93
+ verticalAlign,
94
+ x,
95
+ y,
76
96
  })
77
97
  }
78
98
 
@@ -3,6 +3,9 @@
3
3
  module Playbook
4
4
  module PbBarGraph
5
5
  class BarGraph < Playbook::KitBase
6
+ prop :align, type: Playbook::Props::Enum,
7
+ values: %w[left right center],
8
+ default: "center"
6
9
  prop :axis_title
7
10
  prop :chart_data, type: Playbook::Props::Array,
8
11
  default: []
@@ -23,6 +26,14 @@ module Playbook
23
26
  prop :height
24
27
  prop :colors, type: Playbook::Props::Array,
25
28
  default: []
29
+ prop :layout, type: Playbook::Props::Enum,
30
+ values: %w[horizontal vertical proximate],
31
+ default: "horizontal"
32
+ prop :vertical_align, type: Playbook::Props::Enum,
33
+ values: %w[top middle bottom],
34
+ default: "bottom"
35
+ prop :x, type: Playbook::Props::Numeric
36
+ prop :y, type: Playbook::Props::Numeric
26
37
 
27
38
  def chart_type
28
39
  orientation == "horizontal" ? "bar" : "column"
@@ -30,13 +41,14 @@ module Playbook
30
41
 
31
42
  def chart_options
32
43
  {
44
+ align: align,
33
45
  id: id,
34
46
  className: classname,
35
47
  chartData: chart_data,
36
48
  dark: dark ? "dark" : "",
37
49
  type: chart_type,
38
50
  title: title,
39
- subtitle: subtitle,
51
+ subTitle: subtitle,
40
52
  axisTitle: axis_title,
41
53
  pointStart: point_start,
42
54
  xAxisCategories: x_axis_categories,
@@ -46,6 +58,10 @@ module Playbook
46
58
  toggleLegendClick: toggle_legend_click,
47
59
  height: height,
48
60
  colors: colors,
61
+ layout: layout,
62
+ verticalAlign: vertical_align,
63
+ x: x,
64
+ y: y,
49
65
  }
50
66
  end
51
67
 
@@ -0,0 +1,62 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [1475]
4
+ }, {
5
+ name: 'Manufacturing',
6
+ data: [4434]
7
+ }, {
8
+ name: 'Sales & Distribution',
9
+ data: [3387]
10
+ }, {
11
+ name: 'Project Development',
12
+ data: [3227]
13
+ }, {
14
+ name: 'Other',
15
+ data: [1111]
16
+ }] %>
17
+
18
+ <%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
19
+
20
+ <%= pb_rails("bar_graph", props: {
21
+ axis_title: 'Number of Employees',
22
+ chart_data: data,
23
+ id:"legend-position-bar",
24
+ y_axis_min: 0,
25
+ x_axis_categories:['Jan'],
26
+ title: 'Alignment of Legend',
27
+ legend: true,
28
+ align: 'right',
29
+ vertical_align: 'top',
30
+ padding_bottom: "sm",
31
+ }) %>
32
+
33
+ <%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
34
+
35
+ <%= pb_rails("bar_graph", props: {
36
+ axis_title: 'Number of Employees',
37
+ chart_data: data,
38
+ id:"legend-position-bar-1",
39
+ y_axis_min: 0,
40
+ x_axis_categories:['Jan'],
41
+ title: 'Layout of Legend',
42
+ legend: true,
43
+ layout: 'vertical',
44
+ padding_top: "sm",
45
+ padding_bottom: "sm",
46
+ }) %>
47
+
48
+ <%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
49
+
50
+ <%= pb_rails("bar_graph", props: {
51
+ axis_title: 'Number of Employees',
52
+ chart_data: data,
53
+ id:"legend-position-bar-2",
54
+ y_axis_min: 0,
55
+ x_axis_categories:['Jan'],
56
+ title: 'Offset of Legend',
57
+ legend: true,
58
+ layout: "vertical",
59
+ x: 100,
60
+ y: 10,
61
+ padding_top: "sm",
62
+ }) %>
@@ -0,0 +1,86 @@
1
+ import React from 'react'
2
+ import { BarGraph, Title } from '../..'
3
+
4
+ const chartData = [{
5
+ name: 'Installation',
6
+ data: [1475],
7
+ }, {
8
+ name: 'Manufacturing',
9
+ data: [4434],
10
+ }, {
11
+ name: 'Sales & Distribution',
12
+ data: [3387],
13
+ }, {
14
+ name: 'Project Development',
15
+ data: [3227],
16
+ }, {
17
+ name: 'Other',
18
+ data: [1111],
19
+ }]
20
+
21
+ const BarGraphLegendPosition = (props) => (
22
+ <div>
23
+ <Title
24
+ paddingBottom="sm"
25
+ paddingTop="sm"
26
+ size={4}
27
+ tag="h4"
28
+ text="align | verticalAlign"
29
+ />
30
+ <BarGraph
31
+ align='right'
32
+ axisTitle="Number of Employees"
33
+ chartData={chartData}
34
+ id="legend-position-bar"
35
+ legend
36
+ paddingBottom="sm"
37
+ title="Alignment of Legend"
38
+ verticalAlign="top"
39
+ xAxisCategories={['Jan']}
40
+ yAxisMin={0}
41
+ {...props}
42
+ />
43
+ <Title
44
+ paddingBottom="sm"
45
+ paddingTop="sm"
46
+ size={4}
47
+ tag="h4"
48
+ text="layout"
49
+ />
50
+ <BarGraph
51
+ axisTitle="Number of Employees"
52
+ chartData={chartData}
53
+ id="legend-position-bar-1"
54
+ layout="vertical"
55
+ legend
56
+ paddingBottom="sm"
57
+ paddingTop="sm"
58
+ title="Layout of Legend"
59
+ xAxisCategories={['Jan']}
60
+ yAxisMin={0}
61
+ {...props}
62
+ />
63
+ <Title
64
+ paddingBottom="sm"
65
+ paddingTop="sm"
66
+ size={4}
67
+ tag="h4"
68
+ text="x | y"
69
+ />
70
+ <BarGraph
71
+ axisTitle="Number of Employees"
72
+ chartData={chartData}
73
+ id="legend-position-bar-2"
74
+ layout="vertical"
75
+ legend
76
+ title="Offset of Legend"
77
+ x={100}
78
+ xAxisCategories={['Jan']}
79
+ y={10}
80
+ yAxisMin={0}
81
+ {...props}
82
+ />
83
+ </div>
84
+ )
85
+
86
+ export default BarGraphLegendPosition
@@ -0,0 +1,17 @@
1
+ ##### Prop
2
+
3
+ `align` **Type**: String | **Values**: left | center | right (defaults to center)
4
+ `verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
5
+ `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
6
+ `x` **Type**: Number (defaults to 0)
7
+ `y` **Type**: Number (defaults to 0)
8
+
9
+ -
10
+
11
+ - `layout` determines the position of the legend items
12
+ `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.
13
+
14
+ - `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
15
+
16
+
17
+ - `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
@@ -3,6 +3,7 @@ examples:
3
3
  rails:
4
4
  - bar_graph_default: Default
5
5
  - bar_graph_legend: Legend
6
+ - bar_graph_legend_position: Legend Position
6
7
  - bar_graph_legend_non_clickable: Legend Non Clickable
7
8
  - bar_graph_height: Height
8
9
  - bar_graph_spline: Spline
@@ -12,6 +13,7 @@ examples:
12
13
  react:
13
14
  - bar_graph_default: Default
14
15
  - bar_graph_legend: Legend
16
+ - bar_graph_legend_position: Legend Position
15
17
  - bar_graph_legend_non_clickable: Legend Non Clickable
16
18
  - bar_graph_height: Height
17
19
  - bar_graph_spline: Spline
@@ -1,5 +1,6 @@
1
1
  export { default as BarGraphDefault } from './_bar_graph_default.jsx'
2
2
  export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
3
+ export { default as BarGraphLegendPosition } from './_bar_graph_legend_position.jsx'
3
4
  export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
4
5
  export { default as BarGraphHeight } from './_bar_graph_height.jsx'
5
6
  export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
@@ -1,4 +1,5 @@
1
1
  @import "./button_mixins";
2
+ @import "../tokens/colors";
2
3
 
3
4
  $pb_button_sizes: (
4
5
  "sm": 0.75rem,
@@ -28,6 +29,11 @@ $pb_button_sizes: (
28
29
  }
29
30
  &[class*=_link] {
30
31
  @include pb_button_link;
32
+ @media (hover:hover) {
33
+ &:hover {
34
+ color: $text_lt_default;
35
+ }
36
+ }
31
37
  }
32
38
 
33
39
  // Disabled =================
@@ -1,5 +1,5 @@
1
- <%= pb_rails("button", props: { text: "Button Primary" }) %>
2
- <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
3
- <%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
4
- <%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
1
+ <%= pb_rails("button", props: { text: "Button Primary", margin_right: "lg" }) %>
2
+ <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
3
+ <%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
4
+ <%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
5
5
 
@@ -1,32 +1,33 @@
1
- import React from 'react'
2
- import { Button } from '../../'
1
+ import React from "react"
2
+ import { Button } from "../../"
3
3
 
4
4
  const ButtonDefault = (props) => (
5
5
  <div>
6
6
  <Button
7
- marginRight="xl"
8
- onClick={() => alert('button clicked!')}
9
- text="Button Primary"
7
+ marginRight='lg'
8
+ onClick={() => alert("button clicked!")}
9
+ text='Button Primary'
10
10
  {...props}
11
- />
12
- {' '}
11
+ />{" "}
13
12
  <Button
14
- onClick={() => alert('button clicked!')}
15
- text="Button Secondary"
16
- variant="secondary"
13
+ marginRight='lg'
14
+ onClick={() => alert("button clicked!")}
15
+ text='Button Secondary'
16
+ variant='secondary'
17
17
  {...props}
18
- />
19
- {' '}
18
+ />{" "}
20
19
  <Button
21
- onClick={() => alert('button clicked!')}
22
- text="Button Link"
23
- variant="link"
20
+ marginRight='lg'
21
+ onClick={() => alert("button clicked!")}
22
+ text='Button Link'
23
+ variant='link'
24
24
  {...props}
25
25
  />
26
26
  <Button
27
27
  disabled
28
- onClick={() => alert('button clicked!')}
29
- text="Button Disabled"
28
+ marginRight='lg'
29
+ onClick={() => alert("button clicked!")}
30
+ text='Button Disabled'
30
31
  {...props}
31
32
  />
32
33
  </div>
@@ -9,6 +9,7 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
9
9
 
10
10
  import pbChart from '../plugins/pb_chart'
11
11
  type CircleChartProps = {
12
+ align?: "left" | "right" | "center",
12
13
  aria: Object,
13
14
  chartData?: array,
14
15
  children: Node,
@@ -32,10 +33,15 @@ type CircleChartProps = {
32
33
  tooltipHtml: string,
33
34
  useHtml: boolean,
34
35
  zMin: number,
36
+ layout?: "horizontal" | "vertical" | "proximate",
37
+ verticalAlign?: "top" | "middle" | "bottom",
38
+ x?: number,
39
+ y?: number,
35
40
  }
36
41
 
37
42
  const CircleChart = (props: CircleChartProps) => {
38
43
  const {
44
+ align = 'center',
39
45
  aria = {},
40
46
  chartData = [{}],
41
47
  children,
@@ -60,6 +66,10 @@ const CircleChart = (props: CircleChartProps) => {
60
66
  '<b>{point.y}</b>',
61
67
  useHtml = false,
62
68
  zMin = null,
69
+ layout = 'horizontal',
70
+ verticalAlign = 'bottom',
71
+ x = 0,
72
+ y = 0,
63
73
  } = props
64
74
 
65
75
  const ariaProps = buildAriaProps(aria)
@@ -78,6 +88,7 @@ const CircleChart = (props: CircleChartProps) => {
78
88
  })
79
89
 
80
90
  new pbChart('.selector', {
91
+ align,
81
92
  id,
82
93
  colors,
83
94
  borderColor: roundedBorderColor,
@@ -98,6 +109,10 @@ const CircleChart = (props: CircleChartProps) => {
98
109
  innerSize: innerSizeFormat(innerSize),
99
110
  zMin,
100
111
  startAngle,
112
+ layout,
113
+ verticalAlign,
114
+ x,
115
+ y,
101
116
  })
102
117
  }, [])
103
118
 
@@ -5,6 +5,9 @@
5
5
  module Playbook
6
6
  module PbCircleChart
7
7
  class CircleChart < Playbook::KitBase
8
+ prop :align, type: Playbook::Props::Enum,
9
+ values: %w[left right center],
10
+ default: "center"
8
11
  prop :chart_data, type: Playbook::Props::Array,
9
12
  default: []
10
13
  prop :style, type: Playbook::Props::Enum,
@@ -31,6 +34,14 @@ module Playbook
31
34
  prop :rounded, type: Playbook::Props::Boolean, default: false
32
35
  prop :colors, type: Playbook::Props::Array,
33
36
  default: []
37
+ prop :layout, type: Playbook::Props::Enum,
38
+ values: %w[horizontal vertical proximate],
39
+ default: "horizontal"
40
+ prop :vertical_align, type: Playbook::Props::Enum,
41
+ values: %w[top middle bottom],
42
+ default: "bottom"
43
+ prop :x, type: Playbook::Props::Numeric
44
+ prop :y, type: Playbook::Props::Numeric
34
45
 
35
46
  def chart_type
36
47
  style == "variablepie" ? "variablepie" : "pie"
@@ -64,6 +75,7 @@ module Playbook
64
75
 
65
76
  def chart_options
66
77
  {
78
+ align: align,
67
79
  id: id,
68
80
  colors: colors,
69
81
  borderColor: rounded_border_color,
@@ -84,6 +96,10 @@ module Playbook
84
96
  innerSize: inner_size_format,
85
97
  zMin: z_min,
86
98
  startAngle: start_angle,
99
+ layout: layout,
100
+ verticalAlign: vertical_align,
101
+ x: x,
102
+ y: y,
87
103
  }.to_json.html_safe
88
104
  end
89
105
 
@@ -0,0 +1,86 @@
1
+ <% data = [{
2
+ name: 'Waiting for Calls',
3
+ value: 41,
4
+ },
5
+ {
6
+ name: 'On Call',
7
+ value: 49,
8
+ },
9
+ {
10
+ name: 'After call',
11
+ value: 10,
12
+ }
13
+ ] %>
14
+
15
+ <% data_1 = [{
16
+ name: 'Bugs',
17
+ value: 8,
18
+ },
19
+ {
20
+ name: 'Chores',
21
+ value: 1,
22
+ },
23
+ {
24
+ name: 'Stories',
25
+ value: 12,
26
+ }
27
+ ] %>
28
+
29
+ <% data_2 = [{
30
+ name: 'Queued',
31
+ value: 7,
32
+ },
33
+ {
34
+ name: 'In Progress',
35
+ value: 6,
36
+
37
+ },
38
+ {
39
+ name: 'Validation',
40
+ value: 3,
41
+ },
42
+ {
43
+ name: 'Done',
44
+ value: 6,
45
+ },
46
+ ] %>
47
+
48
+
49
+ <%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
50
+
51
+ <%= pb_rails("circle_chart", props: {
52
+ style: "pie",
53
+ chart_data: data,
54
+ legend: true,
55
+ id: "legend-position-circle",
56
+ title: 'Alignment of Legend',
57
+ align: 'right',
58
+ vertical_align: 'top',
59
+ padding_bottom: "sm",
60
+ }) %>
61
+
62
+ <%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
63
+
64
+ <%= pb_rails("circle_chart", props: {
65
+ style: "pie",
66
+ chart_data: data_1,
67
+ legend: true,
68
+ id: "legend-position-circle-1",
69
+ title: 'Layout of Legend',
70
+ layout: 'vertical',
71
+ padding_top: "sm",
72
+ padding_bottom: "sm",
73
+ }) %>
74
+
75
+ <%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
76
+
77
+ <%= pb_rails("circle_chart", props: {
78
+ style: "pie",
79
+ chart_data: data_2,
80
+ legend: true,
81
+ title: 'Offset of Legend',
82
+ id: "legend-position-circle-2",
83
+ x: 100,
84
+ y: 10,
85
+ padding_top: "sm",
86
+ }) %>