playbook_ui_docs 14.9.0.pre.alpha.PLAY1731inputmasking4927 → 14.9.0.pre.alpha.PLAY16264818

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +49 -53
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +36 -29
  4. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +0 -6
  5. data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx +108 -0
  6. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  7. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  8. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -5
  9. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -5
  10. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -1
  11. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  12. data/dist/playbook-doc.js +1 -1
  13. metadata +3 -14
  14. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +0 -95
  15. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +0 -75
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +0 -1
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +0 -108
  18. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +0 -2
  19. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +0 -94
  20. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +0 -83
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +0 -3
  23. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +0 -120
  24. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +0 -1
  25. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +0 -88
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 429463d427a254b6dc9bfe74aff56eab718a52a9ea0150d6c2d1c8bcde07baeb
4
- data.tar.gz: 55ff3ef143257e27d1e62556311070d703952b882e4e7a767e75c8d0ba6954fd
3
+ metadata.gz: 5db0c76bd6ac888d211e3b5213e5f6926669edaf064d364c236c52e8286e4326
4
+ data.tar.gz: 7b63bdcb87aaaf41211b0bd254350da776161d453504ac3e82e55ee79243b0bb
5
5
  SHA512:
6
- metadata.gz: bfb8b564ec67a749274314a65c11744daa3fd5aa81e93c71ab48892ef128cf82c7489a7fdd17867fdd00eab7b136d165c66414197521373fe903364c0e4e1dbd
7
- data.tar.gz: d3d177c3460a274a4d43f773e63aff51fb22f65331a8a06ee8f329c365c924d3788b28143ebe11df88487e9a8f88c6aac8d97f409f7d8f237c8fae6a6146cc58
6
+ metadata.gz: 6042b450ad6db13c1206d7e42babf09c7989db65b91048e1e12c9b9eb1a5c0e3b33044107ac903a69b61490695cc3891a1bfaff578773f5a034b980ff06b5f50
7
+ data.tar.gz: b4c8cd83fc92a4f9b016be33e6606396202f4ed3941ee16ee60726b63d1599d96c1cddcc766a47b746d47d302858a246144760376ce2291067b25861418a3ecc
@@ -1,70 +1,66 @@
1
1
  import React from 'react'
2
- import ReactDOMServer from 'react-dom/server'
3
- import BarGraph from '../_bar_graph'
4
- import Icon from '../../pb_icon/_icon'
5
2
 
6
- const chartData = [
7
- {
8
- name: 'Role',
9
- data: [0, 200, 300, 654, 656],
10
- },
11
- {
12
- name: 'Company',
13
- data: [150, 524, 320, 440, 500],
14
- },
15
- ]
3
+ import BarGraph from '../_bar_graph'
16
4
 
17
- const renderIcon = (iconName, color) => {
18
- return ReactDOMServer.renderToStaticMarkup(
19
- <Icon
20
- color={color}
21
- icon={iconName}
22
- />)
23
- };
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ }, {
9
+ name: 'Manufacturing',
10
+ data: [4434, 524, 2320, 440, 500],
11
+ }, {
12
+ name: 'Sales & Distribution',
13
+ data: [3387, 743, 1344, 434, 440],
14
+ }, {
15
+ name: 'Project Development',
16
+ data: [3227, 878, 999, 780, 1000],
17
+ }, {
18
+ name: 'Other',
19
+ data: [1111, 677, 3245, 500, 200],
20
+ }]
24
21
 
25
22
  const barGraphOptions = {
26
- yAxis: {
27
- tickInterval: 5,
23
+ subtitle: {
24
+ text: "Overwritten subtitle",
25
+ style: {
26
+ color: "red"
27
+ }
28
28
  },
29
29
  xAxis: {
30
- categories: ['1', '2', '3', '4', '5'],
31
- labels: {
32
- useHTML: true,
33
- formatter: function () {
34
- switch (this.value) {
35
- case '1':
36
- return `${renderIcon('frown', 'error')}`;
37
- case '2':
38
- return `${renderIcon('frown', 'warning')}`;
39
- case '3':
40
- return `${renderIcon('frown-open', 'neutral')}`;
41
- case '4':
42
- return `${renderIcon('smile', 'category_7')}`;
43
- case '5':
44
- return `${renderIcon('smile-beam', 'success')}`;
45
- default:
46
- return ''
47
- }
48
- },
49
- style: {
50
- fontSize: '1.4em',
51
- },
52
- y: 42,
53
- },
54
- },
55
- legend: {
56
- itemMarginTop: 62,
57
- },
30
+ labels: {
31
+ useHTML: true,
32
+ formatter: function() {
33
+ switch (this.value) {
34
+ case 'Jan':
35
+ return `<i class="far fa-apple-whole"></i> ${this.value}`
36
+ case 'Feb':
37
+ return `<i class="far fa-strawberry"></i> ${this.value}`
38
+ case 'Mar':
39
+ return `<i class="far fa-lemon"></i> ${this.value}`
40
+ case 'Apr':
41
+ return `<i class="far fa-pear"></i> ${this.value}`
42
+ case 'May':
43
+ return `<i class="far fa-peach"></i> ${this.value}`
44
+ default:
45
+ return ''
46
+ }
47
+ }
48
+ }
49
+ }
58
50
  }
59
51
 
60
- const BarGraphCustom = () => (
52
+ const BarGraphCustom = (props) => (
61
53
  <div>
62
54
  <BarGraph
55
+ axisTitle="Number of Employees"
63
56
  chartData={chartData}
64
57
  customOptions={barGraphOptions}
65
- id="happiness-dashboard"
66
- legend
58
+ id="bar-custom"
59
+ subTitle="Subtitle to replace"
67
60
  title="Bar Graph with Custom Overrides"
61
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
62
+ yAxisMin={0}
63
+ {...props}
68
64
  />
69
65
  </div>
70
66
  )
@@ -1,42 +1,49 @@
1
1
  <% data = [{
2
- name: 'Role',
3
- data: [0, 200, 300, 654, 656],
2
+ name: 'Installation',
3
+ data: [1475,200,3000,654,656]
4
4
  }, {
5
- name: 'Company',
6
- data: [150, 524, 320, 440, 500],
5
+ name: 'Manufacturing',
6
+ data: [4434,524,2320,440,500]
7
+ }, {
8
+ name: 'Sales & Distribution',
9
+ data: [3387,743,1344,434,440,]
10
+ }, {
11
+ name: 'Project Development',
12
+ data: [3227,878,999,780,1000]
13
+ }, {
14
+ name: 'Other',
15
+ data: [1111,677,3245,500,200]
7
16
  }] %>
8
17
 
9
18
  <% bar_graph_options = {
10
- customOptions: {
11
- yAxis: {
12
- tickInterval: 5,
13
- },
14
- xAxis: {
15
- categories: [
16
- raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
17
- raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
18
- raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
19
- raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
20
- raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
21
- ],
22
- labels: {
23
- useHTML: true,
24
- sytle: {
25
- fontSize: '1.4em',
19
+ customOptions: {
20
+ subtitle: {
21
+ text: "Overwritten subtitle",
22
+ style: {
23
+ color: "red"
24
+ }
26
25
  },
27
- y: 42,
28
- },
29
- },
30
- legend: {
31
- itemMarginTop: 62,
32
- },
33
- }
26
+ xAxis: {
27
+ categories: [
28
+ '<i class="far fa-apple-whole"></i> Jan',
29
+ '<i class="far fa-strawberry"></i> Feb',
30
+ '<i class="far fa-lemon"></i> Mar',
31
+ '<i class="far fa-pear"></i> Apr',
32
+ '<i class="far fa-peach"></i> May'
33
+ ],
34
+ labels: {
35
+ useHTML: true,
36
+ }
37
+ }
38
+ }
34
39
  } %>
35
40
 
36
41
  <%= pb_rails("bar_graph", props: {
42
+ axis_title: 'Number of Employees',
37
43
  chart_data: data,
38
44
  id: "bar-default",
39
- legend: true,
45
+ y_axis_min: 0,
46
+ subtitle: 'Subtitle to replace',
40
47
  title: 'Bar Graph with Custom Overrides',
41
48
  custom_options: bar_graph_options
42
- }) %>
49
+ }) %>
@@ -13,7 +13,6 @@ const BreadCrumbsDefault = (props) => {
13
13
  <Icon
14
14
  icon="home"
15
15
  size="1x"
16
- {...props}
17
16
  />
18
17
  <BreadCrumbItem
19
18
  {...props}
@@ -23,13 +22,11 @@ const BreadCrumbsDefault = (props) => {
23
22
  size="4"
24
23
  tag="span"
25
24
  text="Home"
26
- {...props}
27
25
  />
28
26
  </BreadCrumbItem>
29
27
  <Icon
30
28
  icon="users"
31
29
  size="1x"
32
- {...props}
33
30
  />
34
31
  <Link
35
32
  {...props}
@@ -39,20 +36,17 @@ const BreadCrumbsDefault = (props) => {
39
36
  size="4"
40
37
  tag="span"
41
38
  text="Users"
42
- {...props}
43
39
  />
44
40
  </Link>
45
41
  <Icon
46
42
  icon="user"
47
43
  size="1x"
48
- {...props}
49
44
  />
50
45
  <Link {...props}>
51
46
  <Title
52
47
  size="4"
53
48
  tag="span"
54
49
  text="User"
55
- {...props}
56
50
  />
57
51
  </Link>
58
52
  </BreadCrumbs>
@@ -0,0 +1,108 @@
1
+ import React from 'react'
2
+ import { useForm } from 'react-hook-form'
3
+ import { Select, Card, Body, Button } from 'playbook-ui'
4
+
5
+ const SelectForm = (props) => {
6
+ const {
7
+ register,
8
+ handleSubmit,
9
+ formState: { errors },
10
+ watch,
11
+ } = useForm({
12
+ defaultValues: {
13
+ favoriteFood: '',
14
+ mealType: '',
15
+ dietaryRestrictions: '',
16
+ }
17
+ })
18
+
19
+ const onSubmit = (data) => {
20
+ console.log('Form submitted:', data)
21
+ }
22
+
23
+ // Watch form values for real-time display
24
+ const formValues = watch()
25
+
26
+ const foodOptions = [
27
+ { value: 'pizza', text: 'Pizza' },
28
+ { value: 'burger', text: 'Burger' },
29
+ { value: 'sushi', text: 'Sushi' },
30
+ { value: 'salad', text: 'Salad' },
31
+ ]
32
+
33
+ const mealTypes = [
34
+ { value: 'breakfast', text: 'Breakfast' },
35
+ { value: 'lunch', text: 'Lunch' },
36
+ { value: 'dinner', text: 'Dinner' },
37
+ ]
38
+
39
+ const dietaryOptions = [
40
+ { value: 'none', text: 'No Restrictions' },
41
+ { value: 'vegetarian', text: 'Vegetarian' },
42
+ { value: 'vegan', text: 'Vegan' },
43
+ { value: 'glutenFree', text: 'Gluten Free' },
44
+ ]
45
+
46
+ return (
47
+ <div>
48
+ <Card>
49
+ <form onSubmit={handleSubmit(onSubmit)}>
50
+ <Select
51
+ error={errors.favoriteFood?.message}
52
+ label="What's your favorite food?"
53
+ name="favoriteFood"
54
+ options={foodOptions}
55
+ register={register}
56
+ rules={{
57
+ required: 'Please select your favorite food',
58
+ }}
59
+ {...props}
60
+ />
61
+ <Select
62
+ blankSelection="Choose a meal type..."
63
+ error={errors.mealType?.message}
64
+ label="Preferred meal time"
65
+ marginTop="md"
66
+ name="mealType"
67
+ options={mealTypes}
68
+ register={register}
69
+ rules={{
70
+ required: 'Please select a meal type',
71
+ }}
72
+ {...props}
73
+ />
74
+ <Select
75
+ label="Dietary Restrictions"
76
+ marginTop="md"
77
+ name="dietaryRestrictions"
78
+ options={dietaryOptions}
79
+ register={register}
80
+ {...props}
81
+ />
82
+
83
+ <Button
84
+ marginTop="lg"
85
+ text="Submit"
86
+ type="submit"
87
+ variant="primary"
88
+
89
+ />
90
+ </form>
91
+ <Card marginTop="lg">
92
+ <Body
93
+ text="Current Form Values:"
94
+ variant="bold"
95
+ />
96
+ <pre style={{ marginTop: '8px', color: "white" }}>
97
+ {JSON.stringify(formValues, null, 2)}
98
+ </pre>
99
+ </Card>
100
+ </Card>
101
+ </div>
102
+ )
103
+ }
104
+
105
+ export default SelectForm
106
+
107
+
108
+
@@ -30,6 +30,7 @@ examples:
30
30
  - select_inline_show_arrow: Select Inline (Always Show Arrow)
31
31
  - select_inline_compact: Select Inline Compact
32
32
  - select_multiple: Select Multiple
33
+ - select_form: Form
33
34
 
34
35
  swift:
35
36
  - select_default_swift: Default
@@ -10,3 +10,4 @@ export { default as SelectInline } from './_select_inline.jsx'
10
10
  export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
11
11
  export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
12
12
  export { default as SelectMultiple } from './_select_multiple.jsx'
13
+ export { default as SelectForm } from './_select_form.jsx'
@@ -55,8 +55,3 @@ examples:
55
55
  - table_with_subcomponents: Table with Sub Components (Table Elements)
56
56
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
57
57
  - table_outer_padding: Outer Padding
58
- - table_with_collapsible: Table with Collapsible
59
- - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
60
- - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
61
- - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
62
- - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
@@ -26,8 +26,3 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
26
26
  export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
27
27
  export { default as TableOuterPadding } from './_table_outer_padding.jsx'
28
28
  export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
29
- export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
30
- export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
31
- export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
32
- export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
33
- export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
@@ -16,7 +16,6 @@ examples:
16
16
  - text_input_add_on: Add On
17
17
  - text_input_inline: Inline
18
18
  - text_input_no_label: No Label
19
- - text_input_mask: Mask
20
19
 
21
20
  swift:
22
21
  - text_input_default_swift: Default
@@ -5,4 +5,3 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
5
5
  export { default as TextInputAddOn } from './_text_input_add_on.jsx'
6
6
  export { default as TextInputInline } from './_text_input_inline.jsx'
7
7
  export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
8
- export { default as TextInputMask } from './_text_input_mask.jsx'