playbook_ui 13.10.0.pre.alpha.play1054tableheadersortconsolidation1416 → 13.10.0.pre.alpha.play10481357

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -8
  3. data/app/pb_kits/playbook/pb_card/docs/example.yml +0 -12
  4. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +11 -2
  5. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +8 -4
  6. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx +33 -0
  7. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md +3 -0
  8. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  9. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  10. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_advanced.test.js +47 -0
  11. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +31 -47
  12. data/app/pb_kits/playbook/pb_table/docs/_table_header.md +0 -5
  13. data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -5
  14. data/app/pb_kits/playbook/pb_table/table_header.rb +5 -28
  15. data/dist/playbook-rails.js +1 -1
  16. data/lib/playbook/version.rb +1 -1
  17. metadata +5 -21
  18. data/app/pb_kits/playbook/pb_button/docs/_button_circle_swift.md +0 -28
  19. data/app/pb_kits/playbook/pb_button/docs/_button_default_swift.md +0 -23
  20. data/app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md +0 -9
  21. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md +0 -18
  22. data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md +0 -11
  23. data/app/pb_kits/playbook/pb_button/docs/_button_size_swift.md +0 -20
  24. data/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md +0 -29
  25. data/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md +0 -7
  26. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md +0 -33
  27. data/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md +0 -33
  28. data/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md +0 -17
  29. data/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md +0 -7
  30. data/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md +0 -33
  31. data/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md +0 -10
  32. data/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md +0 -0
  33. data/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md +0 -11
  34. data/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md +0 -21
  35. data/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md +0 -17
  36. data/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 73ae878bbc3c1d7604ea145aa35e8fe38574ee90570c59dd0435f0391878b799
4
- data.tar.gz: 90557548b67fc1a87beb6b48bcbaea53bb090b2cf144c9e45b42ef82966498d0
3
+ metadata.gz: 4be354f837930c062c2ca20fb53bbeb46c9eb62f30a8e1719eee358ce16e0f8b
4
+ data.tar.gz: e0768ac01b6863cfab1a30ea9ab9bfeb41879a0b4500cf6b2ffe09824984f823
5
5
  SHA512:
6
- metadata.gz: f5a488807613b3df413cd9cda4a3414aa634afe26fa3800bc75ebb8d06e37ef9778b2b4c8ccd25407fdb392f0b57d78f5746a8b4a631100c324a703b70dc809e
7
- data.tar.gz: 218291c52fddc4f43ca0806e2dc67c86f8fb33082212594078752f05d08109f2e36fc705a6d37b1ed2ac79b502e1e0de2f8214f0e767c71fd13e98806fd25dc8
6
+ metadata.gz: 7843c0ec8b259fb4eaea357b2345665a23879952c4093dcf43598d1ee4533f3077ae84a6b7b040243ffcaaf057ab67246406ffab8437bb2ef11741eaf6d579ee
7
+ data.tar.gz: 7f956d0c0beb74d55e19cab98bceee15ba08fe26591dba9d84bdd2445f9c1dc17e77494874e58e1f25a2fc3d944687bc97e5fd4e49594b5a15f6d58226b23791
@@ -25,11 +25,3 @@ examples:
25
25
  - button_size: Button Size
26
26
  - button_form: Button Form Attribute
27
27
  - button_hover: Button Hover
28
-
29
- swift:
30
- - button_default_swift: Button Variants
31
- - button_full_width_swift: Button Full Width
32
- - button_icon_options_swift: Button Icon Options
33
- - button_circle_swift: Circle Button
34
- - button_size_swift: Button Size
35
- - button_props_swift: ""
@@ -25,15 +25,3 @@ examples:
25
25
  - card_separator: Separator Card
26
26
  - card_border_none: No Border
27
27
  - card_border_radius: Border Radius
28
- swift:
29
- - card_light_swift: Default
30
- - card_background_swift: Card Backgrounds
31
- - card_highlight_swift: Highlight Cards
32
- - card_header_swift: Header Cards
33
- - card_padding_swift: Padding Size
34
- - card_shadow_swift: Shadow Size
35
- - card_separator_swift: Separator Card
36
- - card_border_none_swift: No Border
37
- - card_border_radius_swift: Border Radius
38
- - card_styles_swift: Styles
39
- - card_props_swift: ""
@@ -4,6 +4,7 @@ import inlineFocus from './inlineFocus'
4
4
  import useFocus from './useFocus'
5
5
  import { globalProps, GlobalProps } from '../utilities/globalProps'
6
6
  import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
7
+ import cn from 'classnames'
7
8
 
8
9
  try {
9
10
  const Trix = require('trix')
@@ -29,6 +30,7 @@ type Editor = {
29
30
  type RichTextEditorProps = {
30
31
  aria?: { [key: string]: string },
31
32
  advancedEditor?: any,
33
+ advancedEditorToolbar?: boolean,
32
34
  toolbarBottom?: Boolean,
33
35
  children?: React.ReactNode | React.ReactNode[]
34
36
  className?: string,
@@ -51,6 +53,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
51
53
  const {
52
54
  aria = {},
53
55
  advancedEditor,
56
+ advancedEditorToolbar = true,
54
57
  toolbarBottom = false,
55
58
  children,
56
59
  className,
@@ -163,8 +166,14 @@ const RichTextEditor = (props: RichTextEditorProps) => {
163
166
  >
164
167
  {
165
168
  advancedEditor ? (
166
- <div className='pb_rich_text_editor_advanced_container'>
167
- <EditorToolbar extensions={extensions} editor={advancedEditor}/>
169
+ <div
170
+ className={cn("pb_rich_text_editor_advanced_container", {
171
+ ["toolbar-active"]: advancedEditorToolbar,
172
+ })}
173
+ >
174
+ {advancedEditorToolbar && (
175
+ <EditorToolbar extensions={extensions} editor={advancedEditor}/>
176
+ )}
168
177
  { children }
169
178
  </div>
170
179
  ) : (
@@ -65,9 +65,7 @@
65
65
  .ProseMirror {
66
66
  background: $white;
67
67
  border: 1px solid $border_light;
68
- border-top-color: transparent;
69
- border-bottom-right-radius: $border_rad_heaviest;
70
- border-bottom-left-radius: $border_rad_heaviest;
68
+ border-radius: $border_rad_heaviest;
71
69
  height: 100%;
72
70
  padding: 1rem 1.5rem 1.5rem 1.5rem;
73
71
  line-height: $lh_loose;
@@ -127,7 +125,6 @@
127
125
  }
128
126
  &:focus-visible {
129
127
  outline: unset;
130
- border-top-color: $primary;
131
128
  @include transition_default;
132
129
  }
133
130
  h1 {
@@ -228,4 +225,11 @@
228
225
  border-radius: $border_rad_heaviest;
229
226
  transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
230
227
  }
228
+ &.toolbar-active {
229
+ .ProseMirror {
230
+ border-top: none;
231
+ border-top-left-radius: initial;
232
+ border-top-right-radius: initial;
233
+ }
234
+ }
231
235
  }
@@ -0,0 +1,33 @@
1
+ import React from "react";
2
+ import { useEditor, EditorContent } from "@tiptap/react";
3
+
4
+ import { RichTextEditor } from "../..";
5
+
6
+ import Document from "@tiptap/extension-document";
7
+ import Paragraph from "@tiptap/extension-paragraph";
8
+ import Text from "@tiptap/extension-text";
9
+
10
+ const RichTextEditorToolbarDisabled = (props) => {
11
+ const editor = useEditor({
12
+ extensions: [Document, Paragraph, Text],
13
+ content:
14
+ "Add your text here. You can format your text, add links, quotes, and bullets.",
15
+ });
16
+ if (!editor) {
17
+ return null;
18
+ }
19
+
20
+ return (
21
+ <div>
22
+ <RichTextEditor
23
+ advancedEditor={editor}
24
+ advancedEditorToolbar={false}
25
+ {...props}
26
+ >
27
+ <EditorContent editor={editor} />
28
+ </RichTextEditor>
29
+ </div>
30
+ );
31
+ };
32
+
33
+ export default RichTextEditorToolbarDisabled;
@@ -0,0 +1,3 @@
1
+ This variant allows you to optionally include the default toolbar.
2
+
3
+ The default toolbar relies on [Tiptap's StarterKit](https://tiptap.dev/api/extensions/starter-kit) which might add that are not necessary for your application. Setting the `advancedEditorToobar` to false enables you to instantiate an editor with the minimum requirements.
@@ -15,6 +15,7 @@ examples:
15
15
  - rich_text_editor_default: Default
16
16
  - rich_text_editor_advanced_default: Advanced Default
17
17
  - rich_text_editor_more_extensions: Advanced (Extra Extensions)
18
+ - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
18
19
  - rich_text_editor_simple: Simple
19
20
  - rich_text_editor_attributes: Attributes
20
21
  - rich_text_editor_focus: Focus
@@ -8,4 +8,5 @@ export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_tool
8
8
  export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
9
9
  export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
10
10
  export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
11
- export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
11
+ export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
12
+ export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
@@ -0,0 +1,47 @@
1
+ import React from "react";
2
+ import { render } from "../utilities/test-utils";
3
+ import { useEditor, EditorContent } from "@tiptap/react";
4
+ import StarterKit from "@tiptap/starter-kit";
5
+ import Link from "@tiptap/extension-link";
6
+
7
+ import RichTextEditor from "./_rich_text_editor";
8
+
9
+ const kitClass = "pb_rich_text_editor_advanced_container";
10
+
11
+ const EditorTest = (props) => {
12
+ const editor = useEditor({
13
+ extensions: [StarterKit, Link],
14
+ content: "",
15
+ });
16
+
17
+ return (
18
+ <RichTextEditor
19
+ advancedEditor={editor}
20
+ {...props}
21
+ >
22
+ <EditorContent editor={editor} />
23
+ </RichTextEditor>
24
+ );
25
+ };
26
+
27
+ test("returns namespaced class name", () => {
28
+ const { container } = render(<EditorTest />);
29
+
30
+ expect(container.getElementsByClassName(kitClass).length).toBeGreaterThan(0);
31
+ });
32
+
33
+ test("returns toolbar class name", () => {
34
+ const { container } = render(<EditorTest />);
35
+
36
+ expect(
37
+ container.getElementsByClassName(`${kitClass} toolbar-active`).length
38
+ ).toBeGreaterThan(0);
39
+ });
40
+
41
+ test("doesn't returns toolbar class name", () => {
42
+ const { container } = render(<EditorTest advancedEditorToolbar={false} />);
43
+
44
+ expect(
45
+ container.getElementsByClassName(`${kitClass} toolbar-active`).length
46
+ ).toBe(0);
47
+ });
@@ -1,37 +1,12 @@
1
- <%# Example data for demonstration purposes %>
2
- <% data_rows = [
3
- { 'territory' => 'North', 'firstname' => 'John', 'lastname' => 'Doe', 'age' => 30, 'job' => 'Engineer' },
4
- { 'territory' => 'South', 'firstname' => 'Alice', 'lastname' => 'Smith', 'age' => 28, 'job' => 'Designer' },
5
- { 'territory' => 'East', 'firstname' => 'Mike', 'lastname' => 'Johnson', 'age' => 35, 'job' => 'Manager' },
6
- { 'territory' => 'West', 'firstname' => 'Sarah', 'lastname' => 'Brown', 'age' => 29, 'job' => 'Developer' },
7
- { 'territory' => 'Central', 'firstname' => 'David', 'lastname' => 'Wilson', 'age' => 32, 'job' => 'Analyst' }
8
- ]
9
- %>
10
-
11
- <%# Example sort method for demonstration purposes %>
12
- <% if params["sort"] %>
13
- <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
14
- <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
15
- <% data_rows.sort! do |a, b|
16
- value_a = a[sort_param]
17
- value_b = b[sort_param]
18
-
19
- value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
20
- value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
21
-
22
- sort_direction * (value_a <=> value_b)
23
- end %>
24
- <% end %>
25
-
26
- <%= pb_rails("table", props: { data_table: true, vertical_border: true, id: "table-header" } ) do %>
1
+ <%= pb_rails("table", props: { size: "lg"} ) do %>
27
2
  <thead>
28
3
  <tr>
29
4
  <%= pb_rails("table/table_header", props: {
30
5
  text: "Territory",
31
6
  id: "territory",
32
7
  sort_menu: [
33
- { item: "Territory", link: "?sort=territory_asc#table-header", active: params["sort"] == "territory_asc", direction: "asc" },
34
- { item: "Territory", link: "?sort=territory_desc#table-header", active: params["sort"] == "territory_desc", direction: "desc" }
8
+ { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
9
+ { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
35
10
  ],
36
11
  }) %>
37
12
  <%= pb_rails("table/table_header", props: {
@@ -39,36 +14,45 @@
39
14
  text: "Full Name",
40
15
  colspan: 2,
41
16
  sort_menu: [
42
- { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
43
- { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
44
- { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
45
- { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
17
+ { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
18
+ { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
19
+ { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
20
+ { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
46
21
  ],
47
22
  }) %>
48
23
  <%= pb_rails("table/table_header", props: {
49
24
  text: "Age",
50
25
  id: "age",
26
+ sort_dropdown: true,
51
27
  sort_menu: [
52
- { item: "Age Descending", link: "?sort=age_desc#table-header", active: params["sort"] == "age_desc", direction: "desc" },
53
- { item: "Age Ascending", link: "?sort=age_asc#table-header", active: params["sort"] == "age_asc", direction: "asc" }
28
+ { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
29
+ { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
54
30
  ],
55
31
  }) %>
56
32
  <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
57
33
  </tr>
58
34
  </thead>
59
35
  <tbody>
60
- <% data_rows.each do |row| %>
61
- <tr>
62
- <% row.each do |key, value| %>
63
- <%= pb_rails("background", props: {
64
- background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
65
- text_align: (value.is_a?(Integer) ? "right" : ""),
66
- tag: "td"
67
- }) do %>
68
- <%= value %>
69
- <% end %>
70
- <% end %>
71
- </tr>
72
- <% end %>
36
+ <tr>
37
+ <td>Ter 1</td>
38
+ <td>First Name 1</td>
39
+ <td>Last Name 1</td>
40
+ <td>Age 1</td>
41
+ <td>Job 1</td>
42
+ </tr>
43
+ <tr>
44
+ <td>Ter 2</td>
45
+ <td>First Name 2</td>
46
+ <td>Last Name 2</td>
47
+ <td>Age 2</td>
48
+ <td>Job 2</td>
49
+ </tr>
50
+ <tr>
51
+ <td>Ter 3</td>
52
+ <td>First Name 3</td>
53
+ <td>Last Name 3</td>
54
+ <td>Age 3</td>
55
+ <td>Job 3</td>
56
+ </tr>
73
57
  </tbody>
74
58
  <% end %>
@@ -6,8 +6,3 @@ presence of `sort_menu` enables the sort link within the header
6
6
  * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
7
7
  * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
8
8
  * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
9
-
10
- </br>
11
- <div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
12
-
13
- This example uses a custom sort method that may need to be modified or replaced within your project.
@@ -3,7 +3,7 @@
3
3
  aria: object.aria,
4
4
  class: object.classname,
5
5
  data: object.data,
6
- id: "pb-th#{object.id}" ) do %>
6
+ id: "pb-th#{object.id}") do %>
7
7
  <% unless sorting_style? %>
8
8
  <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
9
9
  <%= content.presence || object.text %>
@@ -28,16 +28,15 @@
28
28
  position: object.placement ,
29
29
  padding: 'none'}) do %>
30
30
  <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
31
- <% object.sort_items.each do |sort_item| %>
32
- <% item = active_or_first_item(sort_items_for(sort_item)) %>
31
+ <% object.sort_menu.each_with_index do |item, index| %>
33
32
  <%= pb_rails("nav/item", props: {
34
33
  text: item[:item],
35
- link: next_link(sort_item: sort_item),
34
+ link: item[:link],
36
35
  highlighted_border: false,
37
36
  padding: "xs",
38
37
  icon_right: sort_icon(item[:direction], item[:active]),
39
38
  active: item[:active],
40
- classname: "header_nav_item"
39
+ classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
41
40
  }) %>
42
41
  <% end %>
43
42
  <% end %>
@@ -32,43 +32,20 @@ module Playbook
32
32
  align.present? ? "align_#{align}" : nil
33
33
  end
34
34
 
35
- def next_link(sort_item: "")
36
- sort_menu_for = if sort_item.blank?
37
- sort_menu
38
- else
39
- sort_items_for(sort_item)
40
- end
41
-
42
- return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
35
+ def next_link
36
+ return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
43
37
 
44
38
  link = ""
45
39
 
46
- sort_menu_for.each_with_index do |item, index|
40
+ sort_menu.each_with_index do |item, index|
47
41
  if item[:active] == true
48
- next_index = (index + 1) % sort_menu_for.length
49
- link = sort_menu_for[next_index][:link]
42
+ next_index = (index + 1) % sort_menu.length
43
+ link = sort_menu[next_index][:link]
50
44
  end
51
45
  end
52
46
  link
53
47
  end
54
48
 
55
- def sort_items
56
- sort_menu.map { |hash| hash[:item] }.uniq
57
- end
58
-
59
- def sort_items_for(sort_item)
60
- sort_menu.find_all { |hash| hash[:item] == sort_item }
61
- end
62
-
63
- def active_or_first_item(items)
64
- active_item = items.find { |hash| hash[:active] == true }
65
- if active_item.present?
66
- active_item
67
- else
68
- items[0]
69
- end
70
- end
71
-
72
49
  def sorting_style?
73
50
  sort_menu != [{}]
74
51
  end