playbook_ui_docs 15.1.0.pre.alpha.play252710946 → 15.1.0.pre.alpha.testingtiptap11043

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ba871c739875f28a67034dae55927445ea665ca0c4b6908c850bda1bc4305bfb
4
- data.tar.gz: 90773204906e130d004f324ff0ab9fe1122bf4448c5a74e34bb2e91e8e5770c5
3
+ metadata.gz: 192f398b5253e62b9e469435620b9d0a06b85e17726ea73c252414f8783dec0e
4
+ data.tar.gz: 067c71a037c638ff0c3d51a14db7e9d0c2a42685fc0718c8f98748c6c216c535
5
5
  SHA512:
6
- metadata.gz: a5a0308f5d22f4761dcb2fffaa577580091dfed97208923423149078f53f2c6bca01227c33887ed3db590a31f5d5ca1007fea5ff24909be184468690a53df911
7
- data.tar.gz: e52fddeaa05e7a315349f954f00e647ab94d58f00973b6b181c1330d668cc7c2a0b26c73d80381948d2552c2dd933f645496f448ddc7fb05d9dc9c4fcd678b1e
6
+ metadata.gz: b2d8f28ec32c3c0355a778f8dfc951b497a491769f4946847655e2ef479c343eb8a5879128405412148ec30348645e10d30cb26d220956930503d4f1e2f61fa4
7
+ data.tar.gz: 5999df95a099b842d7261d8f7d9e0bce75ebe87c82f8324c34db273e8de741216401b7433a0c366ae304c87fd19715386774901a15968c1814bcd8457f244b85
@@ -3,12 +3,12 @@
3
3
  <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
4
4
 
5
5
 
6
- <%= pb_rails("dialog", props: {
7
- id:"dialog-stacked-default",
6
+ <%= pb_rails("dialog", props: {
7
+ id:"dialog-stacked-default",
8
8
  status: "default",
9
- size: "sm",
10
- title: "Are you sure?",
11
- text: "Text explaining why there is an alert",
9
+ size: "sm",
10
+ title: "Are you sure?",
11
+ text: "Text explaining why there is an alert",
12
12
  }) do %>
13
13
  <%= pb_rails("dialog/dialog_footer") do %>
14
14
  <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -18,12 +18,12 @@
18
18
  <% end %>
19
19
  <% end %>
20
20
 
21
- <%= pb_rails("dialog", props: {
22
- id:"dialog-stacked-caution",
21
+ <%= pb_rails("dialog", props: {
22
+ id:"dialog-stacked-caution",
23
23
  status: "caution",
24
- size: "sm",
25
- title: "Are you sure?",
26
- text: "This is the action you will be taking",
24
+ size: "sm",
25
+ title: "Are you sure?",
26
+ text: "This is the action you will be taking",
27
27
  }) do %>
28
28
  <%= pb_rails("dialog/dialog_footer") do %>
29
29
  <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
@@ -33,16 +33,16 @@
33
33
  <% end %>
34
34
  <% end %>
35
35
 
36
- <%= pb_rails("dialog", props: {
37
- id:"dialog-stacked-delete",
36
+ <%= pb_rails("dialog", props: {
37
+ id:"dialog-stacked-delete",
38
38
  status: "delete",
39
- size: "sm",
40
- title: "Delete",
41
- text: "You are about to delete ...",
39
+ size: "sm",
40
+ title: "Delete",
41
+ text: "You are about to delete ...",
42
42
  }) do %>
43
43
  <%= pb_rails("dialog/dialog_footer") do %>
44
44
  <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
45
- <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
45
+ <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
46
46
  <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
47
47
  <% end %>
48
48
  <% end %>
@@ -51,7 +51,7 @@ const DialogStackedAlert = () => {
51
51
  return (
52
52
  <div>
53
53
  <Flex
54
- rowGap="xs"
54
+ rowGap="xs"
55
55
  wrap
56
56
  >
57
57
  <Button
@@ -93,6 +93,7 @@ const DialogStackedAlert = () => {
93
93
  <Button
94
94
  fullWidth
95
95
  onClick={dialog.toggle}
96
+ variant= {dialog.status == "delete" ? "danger" : "primary"}
96
97
  >
97
98
  {dialog.buttonOneText}
98
99
  </Button>
@@ -8,12 +8,12 @@
8
8
  <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
9
9
  <% end %>
10
10
 
11
- <%= pb_rails("dialog", props: {
12
- id:"dialog-status-default",
11
+ <%= pb_rails("dialog", props: {
12
+ id:"dialog-status-default",
13
13
  status: "default",
14
- size: "status_size",
15
- title: "Are you sure?",
16
- text: "Text explaining why there is an alert",
14
+ size: "status_size",
15
+ title: "Are you sure?",
16
+ text: "Text explaining why there is an alert",
17
17
  }) do %>
18
18
  <%= pb_rails("dialog/dialog_footer") do %>
19
19
  <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -23,12 +23,12 @@
23
23
  <% end %>
24
24
  <% end %>
25
25
 
26
- <%= pb_rails("dialog", props: {
27
- id:"dialog-status-info",
26
+ <%= pb_rails("dialog", props: {
27
+ id:"dialog-status-info",
28
28
  status: "info",
29
- size: "status_size",
30
- title: "Information",
31
- text: "Text explaining why there is an alert",
29
+ size: "status_size",
30
+ title: "Information",
31
+ text: "Text explaining why there is an alert",
32
32
  }) do %>
33
33
  <%= pb_rails("dialog/dialog_footer") do %>
34
34
  <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -37,12 +37,12 @@
37
37
  <% end %>
38
38
  <% end %>
39
39
 
40
- <%= pb_rails("dialog", props: {
41
- id:"dialog-status-caution",
40
+ <%= pb_rails("dialog", props: {
41
+ id:"dialog-status-caution",
42
42
  status: "caution",
43
- size: "status_size",
44
- title: "Are you Sure?",
45
- text: "This is the action you will be taking",
43
+ size: "status_size",
44
+ title: "Are you Sure?",
45
+ text: "This is the action you will be taking",
46
46
  }) do %>
47
47
  <%= pb_rails("dialog/dialog_footer") do %>
48
48
  <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -52,27 +52,27 @@
52
52
  <% end %>
53
53
  <% end %>
54
54
 
55
- <%= pb_rails("dialog", props: {
56
- id:"dialog-status-delete",
55
+ <%= pb_rails("dialog", props: {
56
+ id:"dialog-status-delete",
57
57
  status: "delete",
58
- size: "status_size",
59
- title: "Delete",
60
- text: "You are about to delete ...",
58
+ size: "status_size",
59
+ title: "Delete",
60
+ text: "You are about to delete ...",
61
61
  }) do %>
62
62
  <%= pb_rails("dialog/dialog_footer") do %>
63
63
  <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
64
- <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
64
+ <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
65
65
  <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
66
66
  <% end %>
67
67
  <% end %>
68
68
  <% end %>
69
69
 
70
- <%= pb_rails("dialog", props: {
71
- id:"dialog-status-error",
70
+ <%= pb_rails("dialog", props: {
71
+ id:"dialog-status-error",
72
72
  status: "error",
73
- size: "status_size",
74
- title: "Error Message",
75
- text: "Text explaining the error",
73
+ size: "status_size",
74
+ title: "Error Message",
75
+ text: "Text explaining the error",
76
76
  }) do %>
77
77
  <%= pb_rails("dialog/dialog_footer") do %>
78
78
  <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -81,12 +81,12 @@
81
81
  <% end %>
82
82
  <% end %>
83
83
 
84
- <%= pb_rails("dialog", props: {
85
- id:"dialog-status-success",
84
+ <%= pb_rails("dialog", props: {
85
+ id:"dialog-status-success",
86
86
  status: "success",
87
- size: "status_size",
88
- title: "Success!",
89
- text: "Text explaining what is successful",
87
+ size: "status_size",
88
+ title: "Success!",
89
+ text: "Text explaining what is successful",
90
90
  }) do %>
91
91
  <%= pb_rails("dialog/dialog_footer") do %>
92
92
  <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
@@ -83,8 +83,8 @@ const DialogStatus = () => {
83
83
 
84
84
  return (
85
85
  <div>
86
- <Flex
87
- rowGap="xs"
86
+ <Flex
87
+ rowGap="xs"
88
88
  wrap
89
89
  >
90
90
  <Button
@@ -117,7 +117,7 @@ const DialogStatus = () => {
117
117
  >
118
118
  {"Success Status"}
119
119
  </Button>
120
- <Button
120
+ <Button
121
121
  marginRight="md"
122
122
  onClick={toggleErrorAlert}
123
123
  >
@@ -152,6 +152,7 @@ const DialogStatus = () => {
152
152
  <Button
153
153
  onClick={dialog.toggle}
154
154
  paddingRight="xl"
155
+ variant={dialog.status == "delete" ? "danger" : "primary"}
155
156
  >
156
157
  {dialog.buttonOneText}
157
158
  </Button>
@@ -21,15 +21,6 @@
21
21
  ]
22
22
  %>
23
23
 
24
- <%
25
- example_typeahead_options = [
26
- { label: 'Orange', value: '#FFA500' },
27
- { label: 'Red', value: '#FF0000' },
28
- { label: 'Green', value: '#00FF00' },
29
- { label: 'Blue', value: '#0000FF' },
30
- ]
31
- %>
32
-
33
24
  <% treeData = [{
34
25
  label: "Power Home Remodeling",
35
26
  value: "Power Home Remodeling",
@@ -97,9 +88,7 @@
97
88
  }] %>
98
89
 
99
90
  <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
100
- <%= form.typeahead :example_typeahead_validation_rails, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
101
- <%= form.typeahead :example_typeahead_validation, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
102
- <%= form.typeahead :example_typeahead_validation_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
91
+ <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
103
92
  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
104
93
  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
105
94
  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { useEditor, EditorContent } from "@tiptap/react"
4
+ import StarterKit from "@tiptap/starter-kit"
5
+ import Link from '@tiptap/extension-link'
6
+
7
+
8
+ const RichTextEditorAdvancedSimple = (props) => {
9
+
10
+ const editor = useEditor({
11
+ extensions: [
12
+ StarterKit,
13
+ Link
14
+ ],
15
+ content:"Add your text here. You can format your text, add links, quotes, and bullets."
16
+ })
17
+ if (!editor) {
18
+ return null
19
+ }
20
+
21
+
22
+
23
+
24
+ return (
25
+ <div>
26
+ <RichTextEditor
27
+ advancedEditor={editor}
28
+ simple
29
+ {...props}
30
+ >
31
+ <EditorContent editor={editor}/>
32
+ </RichTextEditor>
33
+ </div>
34
+ )
35
+ }
36
+
37
+ export default RichTextEditorAdvancedSimple
@@ -16,6 +16,7 @@ examples:
16
16
  - rich_text_editor_advanced_default: Advanced Default
17
17
  - rich_text_editor_more_extensions: Advanced (Extra Extensions)
18
18
  - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
19
+ - rich_text_editor_advanced_simple: Advanced (Simple)
19
20
  - rich_text_editor_simple: Simple
20
21
  - rich_text_editor_attributes: Attributes
21
22
  - rich_text_editor_focus: Focus
@@ -11,3 +11,4 @@ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_ad
11
11
  export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
12
12
  export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
13
13
  export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
14
+ export { default as RichTextEditorAdvancedSimple } from './_rich_text_editor_advanced_simple.jsx'
@@ -9,23 +9,27 @@
9
9
 
10
10
  <%= pb_rails("text_input", props: {
11
11
  label: "Last Name",
12
- placeholder: "Enter last name"
12
+ placeholder: "Enter last name",
13
+ id: "last-name"
13
14
  }) %>
14
15
 
15
16
  <%= pb_rails("text_input", props: {
16
17
  label: "Phone Number",
17
18
  type: "phone",
18
- placeholder: "Enter phone number"
19
+ placeholder: "Enter phone number",
20
+ id: "phone"
19
21
  }) %>
20
22
 
21
23
  <%= pb_rails("text_input", props: {
22
24
  label: "Email Address",
23
25
  type: "email",
24
- placeholder: "Enter email address"
26
+ placeholder: "Enter email address",
27
+ id: "email"
25
28
  }) %>
26
29
 
27
30
  <%= pb_rails("text_input", props: {
28
31
  label: "Zip Code",
29
32
  type: "number",
30
- placeholder: "Enter zip code"
33
+ placeholder: "Enter zip code",
34
+ id: "zip"
31
35
  }) %>
@@ -38,6 +38,7 @@ const TextInputDefault = (props) => {
38
38
  {...props}
39
39
  />
40
40
  <TextInput
41
+ id="last-name"
41
42
  label="Last Name"
42
43
  name="lastName"
43
44
  onChange={handleOnChangeFormField}
@@ -46,6 +47,7 @@ const TextInputDefault = (props) => {
46
47
  {...props}
47
48
  />
48
49
  <TextInput
50
+ id="phone"
49
51
  label="Phone Number"
50
52
  name="phone"
51
53
  onChange={handleOnChangeFormField}
@@ -55,6 +57,7 @@ const TextInputDefault = (props) => {
55
57
  {...props}
56
58
  />
57
59
  <TextInput
60
+ id="email"
58
61
  label="Email Address"
59
62
  name="email"
60
63
  onChange={handleOnChangeFormField}
@@ -64,6 +67,7 @@ const TextInputDefault = (props) => {
64
67
  {...props}
65
68
  />
66
69
  <TextInput
70
+ id="zip"
67
71
  label="Zip Code"
68
72
  name="zip"
69
73
  onChange={handleOnChangeFormField}
@@ -84,6 +88,7 @@ const TextInputDefault = (props) => {
84
88
  <br />
85
89
 
86
90
  <TextInput
91
+ id="first-name"
87
92
  label="First Name"
88
93
  onChange={handleOnChangeFirstName}
89
94
  placeholder="Enter first name"
@@ -0,0 +1 @@
1
+ Add an `id` to your Text Input so that clicking the label will move focus directly to the input.