playbook_ui 14.12.0.pre.alpha.play1849cssbargraph5901 → 14.12.0.pre.alpha.play1862buttondisabledlinkbug5714

Sign up to get free protection for your applications and to get access to all the features.
Files changed (81) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +4 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/index.js +6 -9
  4. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +5 -8
  5. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -9
  6. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +7 -11
  7. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +7 -6
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +3 -9
  9. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +2 -6
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -1
  12. data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss +1 -2
  13. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +3 -3
  14. data/app/pb_kits/playbook/pb_date/_date.tsx +4 -14
  15. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +1 -2
  16. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +5 -13
  17. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +6 -1
  18. data/app/pb_kits/playbook/pb_filter/filter.html.erb +5 -1
  19. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -1
  20. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +5 -7
  21. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +6 -1
  22. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +7 -11
  24. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +0 -2
  25. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +0 -1
  26. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +2 -11
  27. data/app/pb_kits/playbook/pb_link/_link.tsx +0 -18
  28. data/app/pb_kits/playbook/pb_link/docs/example.yml +3 -5
  29. data/app/pb_kits/playbook/pb_link/docs/index.js +1 -2
  30. data/app/pb_kits/playbook/pb_link/link.html.erb +1 -1
  31. data/app/pb_kits/playbook/pb_link/link.rb +0 -6
  32. data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -30
  33. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
  34. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +9 -6
  35. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +9 -6
  36. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -26
  37. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +1 -0
  38. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -25
  39. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -25
  40. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
  41. data/app/pb_kits/playbook/pb_tooltip/index.js +27 -45
  42. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -5
  43. data/app/pb_kits/playbook/pb_user/_user.tsx +0 -3
  44. data/app/pb_kits/playbook/pb_user/docs/example.yml +0 -2
  45. data/app/pb_kits/playbook/pb_user/docs/index.js +0 -1
  46. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -1
  47. data/app/pb_kits/playbook/pb_user/user.rb +0 -1
  48. data/app/pb_kits/playbook/pb_user/user.test.js +0 -14
  49. data/dist/chunks/{_typeahead-BM1R3tnS.js → _typeahead-BIhRQo8Q.js} +3 -3
  50. data/dist/chunks/_weekday_stacked-VKMYuo6-.js +45 -0
  51. data/dist/chunks/{lib-DjpLC8uO.js → lib-kMuhBuU7.js} +1 -1
  52. data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-DBJ0wZuS.js} +1 -1
  53. data/dist/chunks/vendor.js +1 -1
  54. data/dist/menu.yml +2 -2
  55. data/dist/playbook-doc.js +1 -1
  56. data/dist/playbook-rails-react-bindings.js +1 -1
  57. data/dist/playbook-rails.js +1 -1
  58. data/dist/playbook.css +1 -1
  59. data/lib/playbook/version.rb +1 -1
  60. metadata +7 -26
  61. data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss +0 -60
  62. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  63. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  64. data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +0 -15
  65. data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +0 -28
  66. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +0 -2
  67. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +0 -5
  68. data/app/pb_kits/playbook/pb_copy_button/index.js +0 -47
  69. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +0 -58
  70. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +0 -3
  71. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +0 -11
  72. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +0 -22
  73. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +0 -1
  74. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +0 -1
  75. data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +0 -15
  76. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +0 -29
  77. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +0 -42
  78. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +0 -59
  79. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +0 -2
  80. data/dist/chunks/_weekday_stacked-CmWdEFxG.js +0 -45
  81. /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close_react.md → _fixed_confirmation_toast_auto_close.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.12.0"
5
- VERSION = "14.12.0.pre.alpha.play1849cssbargraph5901"
5
+ VERSION = "14.12.0.pre.alpha.play1862buttondisabledlinkbug5714"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.12.0.pre.alpha.play1849cssbargraph5901
4
+ version: 14.12.0.pre.alpha.play1862buttondisabledlinkbug5714
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-02-04 00:00:00.000000000 Z
12
+ date: 2025-01-29 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -447,7 +447,6 @@ files:
447
447
  - app/pb_kits/playbook/pb_badge/docs/_description.md
448
448
  - app/pb_kits/playbook/pb_badge/docs/example.yml
449
449
  - app/pb_kits/playbook/pb_badge/docs/index.js
450
- - app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss
451
450
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
452
451
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
453
452
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -476,8 +475,6 @@ files:
476
475
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
477
476
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
478
477
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
479
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
480
- - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
481
478
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
482
479
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
483
480
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -803,17 +800,12 @@ files:
803
800
  - app/pb_kits/playbook/pb_contact/docs/index.js
804
801
  - app/pb_kits/playbook/pb_copy_button/_copy_button.scss
805
802
  - app/pb_kits/playbook/pb_copy_button/_copy_button.tsx
806
- - app/pb_kits/playbook/pb_copy_button/copy_button.html.erb
807
- - app/pb_kits/playbook/pb_copy_button/copy_button.rb
808
803
  - app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx
809
- - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
810
804
  - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
811
- - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
812
805
  - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
813
806
  - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
814
807
  - app/pb_kits/playbook/pb_copy_button/docs/example.yml
815
808
  - app/pb_kits/playbook/pb_copy_button/docs/index.js
816
- - app/pb_kits/playbook/pb_copy_button/index.js
817
809
  - app/pb_kits/playbook/pb_currency/_currency.scss
818
810
  - app/pb_kits/playbook/pb_currency/_currency.tsx
819
811
  - app/pb_kits/playbook/pb_currency/currency.html.erb
@@ -1351,10 +1343,8 @@ files:
1351
1343
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
1352
1344
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
1353
1345
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
1354
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
1355
1346
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx
1356
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md
1357
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_react.md
1347
+ - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md
1358
1348
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb
1359
1349
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx
1360
1350
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md
@@ -1562,10 +1552,6 @@ files:
1562
1552
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx
1563
1553
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md
1564
1554
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis_swift.md
1565
- - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
1566
- - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx
1567
- - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
1568
- - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
1569
1555
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb
1570
1556
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx
1571
1557
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md
@@ -1850,8 +1836,6 @@ files:
1850
1836
  - app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
1851
1837
  - app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
1852
1838
  - app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
1853
- - app/pb_kits/playbook/pb_link/docs/_link_target.html.erb
1854
- - app/pb_kits/playbook/pb_link/docs/_link_target.jsx
1855
1839
  - app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
1856
1840
  - app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
1857
1841
  - app/pb_kits/playbook/pb_link/docs/example.yml
@@ -3170,9 +3154,6 @@ files:
3170
3154
  - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
3171
3155
  - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
3172
3156
  - app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md
3173
- - app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb
3174
- - app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx
3175
- - app/pb_kits/playbook/pb_user/docs/_user_light_weight.md
3176
3157
  - app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md
3177
3158
  - app/pb_kits/playbook/pb_user/docs/_user_props_table.md
3178
3159
  - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
@@ -3328,11 +3309,11 @@ files:
3328
3309
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3329
3310
  - app/pb_kits/playbook/utilities/text.ts
3330
3311
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3331
- - dist/chunks/_typeahead-BM1R3tnS.js
3332
- - dist/chunks/_weekday_stacked-CmWdEFxG.js
3312
+ - dist/chunks/_typeahead-BIhRQo8Q.js
3313
+ - dist/chunks/_weekday_stacked-VKMYuo6-.js
3333
3314
  - dist/chunks/lazysizes-B7xYodB-.js
3334
- - dist/chunks/lib-DjpLC8uO.js
3335
- - dist/chunks/pb_form_validation-S56UaHZl.js
3315
+ - dist/chunks/lib-kMuhBuU7.js
3316
+ - dist/chunks/pb_form_validation-DBJ0wZuS.js
3336
3317
  - dist/chunks/vendor.js
3337
3318
  - dist/menu.yml
3338
3319
  - dist/playbook-doc.js
@@ -1,60 +0,0 @@
1
- @import "../tokens/colors";
2
- @import "../tokens/typography";
3
- @import url("https://code.highcharts.com/css/highcharts.css");
4
- // @import "highcharts/css/highcharts";
5
- // @import "highcharts/highcharts.css";
6
-
7
- :root {
8
- --highcharts-color-0: #{$data_1};
9
- --highcharts-color-1: #{$data_2};
10
- --highcharts-color-2: #{$data_3};
11
- --highcharts-color-3: #{$data_4};
12
- --highcharts-color-4: #{$data_5};
13
- --highcharts-color-5: #{$data_6};
14
- --highcharts-color-6: #{$data_7};
15
- --highcharts-color-7: #{$data_8};
16
- }
17
-
18
- .highcharts-title {
19
- font-family: $font_family_base;
20
- font-weight: $bold;
21
- font-size: $heading_3;
22
- color: $text_lt_default;
23
- fill: $text_lt_default;
24
- }
25
-
26
- .highcharts-subtitle {
27
- font-family: $font_family_base;
28
- color: $text_lt_light;
29
- fill: $text_lt_light;
30
- font-weight: $regular;
31
- font-size: $text_base;
32
- }
33
-
34
- .highcharts-yaxis > .highcharts-axis-title {
35
- color: $text_lt_lighter;
36
- fill: $text_lt_lighter;
37
- font-family: $font_family_base;
38
- font-weight: $bold;
39
- font-size: $text_smaller;
40
- }
41
-
42
- .highcharts-axis-labels {
43
- font-family: $font_family_base;
44
- color: $text_lt_lighter;
45
- fill: $text_lt_lighter;
46
- font-weight: $bold;
47
- font-size: $text_smaller;
48
- }
49
-
50
- .highcharts-grid-line {
51
- stroke: $border_light;
52
- }
53
-
54
- .highcharts-point {
55
- border-radius: 3px;
56
- }
57
-
58
- .highcharts-axis-line {
59
- stroke: $border_light;
60
- }
@@ -1,64 +0,0 @@
1
- import React from 'react'
2
- import Highcharts from "highcharts";
3
- import HighchartsReact from "highcharts-react-official";
4
-
5
- import "../BarGraphStyles.scss";
6
- // Your path might look more like this
7
- //import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
8
-
9
- const columnChartData = [
10
- {
11
- name: "Installation",
12
- data: [1475, 200, 3000, 654, 656],
13
- },
14
- {
15
- name: "Manufacturing",
16
- data: [4434, 524, 2320, 440, 500],
17
- },
18
- {
19
- name: "Sales & Distribution",
20
- data: [3387, 743, 1344, 434, 440],
21
- },
22
- {
23
- name: "Project Development",
24
- data: [3227, 878, 999, 780, 1000],
25
- },
26
- {
27
- name: "Other",
28
- data: [1111, 677, 3245, 500, 200],
29
- },
30
- ];
31
-
32
- const columnOptions = {
33
- chart: {
34
- type: "column",
35
- },
36
- series: columnChartData,
37
- title: {
38
- text: "Solar Employment Growth by Sector, 2010-2016",
39
- },
40
- subtitle: {
41
- text: "Source: thesolarfoundation.com",
42
- },
43
- xAxis: {
44
- categories: ["Jan", "Feb", "Mar", "Apr", "May"],
45
- },
46
- yAxis: {
47
- min: 0,
48
- title: {
49
- text: "Number of Employees",
50
- },
51
- },
52
- legend: { enabled: false },
53
- credits: { enabled: false },
54
- };
55
-
56
- const BarGraphPbStyles = () => (
57
- <div>
58
- <HighchartsReact highcharts={Highcharts}
59
- options={columnOptions}
60
- />
61
- </div>
62
- )
63
-
64
- export default BarGraphPbStyles
@@ -1 +0,0 @@
1
- You don't need to use the bargraph kit to apply the styles to your Highcharts Bargraph. Just import the BarGraphStyles.scss to your component and the sytles will apply automaticlly.
@@ -1,15 +0,0 @@
1
- <%= pb_content_tag do %>
2
- <%= pb_rails("button", props: { icon: "copy" }) do %>
3
- <%= object.text %>
4
- <% end %>
5
- <% if object.id %>
6
- <%= pb_rails("tooltip", props: {
7
- trigger_element_selector: "##{object.id}",
8
- position: object.tooltip_position,
9
- tooltip_id: "#{object.id}_tooltip",
10
- trigger_method: "click"
11
- }) do %>
12
- <%= object.tooltip_text %>
13
- <% end %>
14
- <% end %>
15
- <% end %>
@@ -1,28 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbCopyButton
5
- class CopyButton < ::Playbook::KitBase
6
- prop :text
7
- prop :tooltip_position,
8
- type: Playbook::Props::Enum,
9
- values: %w[top right bottom left],
10
- default: "top"
11
- prop :tooltip_text, type: Playbook::Props::String,
12
- default: "Copied!"
13
- prop :value
14
- prop :from
15
-
16
- def classname
17
- generate_classname("pb_copy_button_kit")
18
- end
19
-
20
- def data
21
- Hash(values[:data]).merge(
22
- "copy-value": value,
23
- "from": from
24
- )
25
- end
26
- end
27
- end
28
- end
@@ -1,2 +0,0 @@
1
- <%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
2
- <%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
@@ -1,5 +0,0 @@
1
- <%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
2
- <%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
3
- <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
4
- <%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
5
- <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>
@@ -1,47 +0,0 @@
1
- import PbEnhancedElement from "../pb_enhanced_element"
2
-
3
- export default class PbCopyButton extends PbEnhancedElement {
4
- static get selector() {
5
- return '.pb_copy_button_kit'
6
- }
7
-
8
- connect() {
9
- this.handleClick = this.handleClick.bind(this)
10
- this.button = this.element.querySelector('button')
11
- if (this.button) {
12
- this.button.addEventListener('click', this.handleClick)
13
- }
14
- }
15
-
16
- disconnect() {
17
- if (this.button) {
18
- this.button.removeEventListener('click', this.handleClick)
19
- }
20
- }
21
-
22
- handleClick() {
23
- const fromId = this.element.getAttribute('data-from')
24
- if (fromId) {
25
- const fromElement = document.querySelector(`#${fromId}`)
26
- if (fromElement) {
27
- let contentToCopy = ''
28
- if (fromElement.tagName.toLowerCase() === 'input') {
29
- contentToCopy = fromElement.value
30
- } else {
31
- contentToCopy = fromElement.innerText
32
- }
33
- navigator.clipboard.writeText(contentToCopy)
34
- .catch(err => console.error('Failed to copy text', err))
35
- return
36
- }
37
- }
38
-
39
- const textToCopy = this.element.getAttribute('data-copy-value')
40
- if (textToCopy) {
41
- navigator.clipboard.writeText(textToCopy)
42
- .catch(err => console.error('Failed to copy text', err))
43
- } else {
44
- console.warn('No data-copy-value attribute found or data-from element')
45
- }
46
- }
47
- }
@@ -1,58 +0,0 @@
1
- <%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
2
- <%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
3
-
4
- <%= pb_rails("fixed_confirmation_toast", props: {
5
- auto_close: 3000,
6
- classname: "toast-to-hide",
7
- id: "toast-auto-close",
8
- text: "I will disappear in 3 seconds.",
9
- status: "tip",
10
- vertical: "top",
11
- horizontal: "center"
12
- }) %>
13
-
14
- <%= pb_rails("fixed_confirmation_toast", props: {
15
- auto_close: 10000,
16
- closeable: true,
17
- id: "toast-auto-close-closeable",
18
- text: "I will disappear in 10 seconds.",
19
- status: "tip",
20
- vertical: "top",
21
- horizontal: "center"
22
- }) %>
23
-
24
- <script>
25
- document.addEventListener('DOMContentLoaded', () => {
26
- // Initialize toast elements and buttons
27
- const toasts = {
28
- '#toast-auto-close': document.querySelector("#toast-auto-close"),
29
- '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
30
- }
31
-
32
- const buttons = {
33
- '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
34
- '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
35
- }
36
-
37
- // Store original toasts and remove them from DOM
38
- const originalToasts = {}
39
- Object.entries(toasts).forEach(([id, toast]) => {
40
- if (toast) {
41
- originalToasts[id] = toast.cloneNode(true)
42
- toast.remove()
43
- }
44
- })
45
-
46
- // Set up button click handlers
47
- Object.keys(buttons).forEach((toastId) => {
48
- const button = buttons[toastId]
49
- if (button) {
50
- button.onclick = () => {
51
- const newToast = originalToasts[toastId].cloneNode(true)
52
- newToast.style.display = "flex"
53
- document.body.appendChild(newToast)
54
- }
55
- }
56
- })
57
- })
58
- </script>
@@ -1,3 +0,0 @@
1
- Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
2
-
3
- The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.
@@ -1,11 +0,0 @@
1
- <%= pb_rails("home_address_street", props: {
2
- address: "70 pRoSpEcT ave",
3
- address_cont: "Apt M18",
4
- city: "West Chester",
5
- home_id: 8250263,
6
- home_url: "https://powerhrg.com/",
7
- preserve_case: true,
8
- state: "pa",
9
- zipcode: "19382",
10
- territory: "PHL",
11
- }) %>
@@ -1,22 +0,0 @@
1
- import React from 'react'
2
-
3
- import HomeAddressStreet from '../_home_address_street'
4
-
5
- const HomeAddressStreetFormatting = (props) => {
6
- return (
7
- <HomeAddressStreet
8
- address="70 pRoSpEcT ave"
9
- addressCont="Apt M18"
10
- city="West Chester"
11
- homeId="8250263"
12
- homeUrl="https://powerhrg.com/"
13
- preserveCase
14
- state="pa"
15
- territory="PHL"
16
- zipcode="19382"
17
- {...props}
18
- />
19
- )
20
- }
21
-
22
- export default HomeAddressStreetFormatting
@@ -1 +0,0 @@
1
- The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
@@ -1 +0,0 @@
1
- The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
@@ -1,15 +0,0 @@
1
- <div>
2
- <%= pb_rails("link", props: {
3
- href: "http://google.com",
4
- target: "blank",
5
- text: "Open In New Window"
6
- }) %>
7
- </div>
8
-
9
- <div>
10
- <%= pb_rails("link", props: {
11
- href: "https://playbook.powerapp.cloud/",
12
- target: "child",
13
- text: "Open In Child Tab",
14
- }) %>
15
- </div>
@@ -1,29 +0,0 @@
1
- import React from 'react'
2
- import { Link } from 'playbook-ui'
3
-
4
- const LinkTarget = (props) => (
5
- <div>
6
- <div>
7
- <Link
8
- aria={{ label: 'Link to Google in new window' }}
9
- href="https://google.com"
10
- tabIndex={0}
11
- target='blank'
12
- text="Open In New Window"
13
- {...props}
14
- />
15
- </div>
16
- <div>
17
- <Link
18
- aria={{ label: 'Link to Playbook in a child tab' }}
19
- href="https://playbook.powerapp.cloud/"
20
- tabIndex={0}
21
- target='child'
22
- text="Open In Child Tab"
23
- {...props}
24
- />
25
- </div>
26
- </div>
27
- )
28
-
29
- export default LinkTarget
@@ -1,42 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
- <div>
3
- <%= pb_rails("user", props: {
4
- name: "Anna Black",
5
- title: "Remodeling Consultant",
6
- orientation: "vertical",
7
- align: "center",
8
- size: "lg",
9
- avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
10
- bold: false
11
- }) %>
12
- </div>
13
- <div>
14
- <%= pb_rails("user", props: {
15
- name: "Anna Black",
16
- title: "Remodeling Consultant",
17
- orientation: "horizontal",
18
- align: "left",
19
- avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
20
- bold: false
21
- }) %>
22
- </div>
23
- <div>
24
- <%= pb_rails("user", props: {
25
- name: "Anna Black",
26
- orientation: "horizontal",
27
- align: "left",
28
- avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
29
- bold: false
30
- }) %>
31
-
32
- <br>
33
-
34
- <%= pb_rails("user", props: {
35
- name: "Anna Black",
36
- orientation: "horizontal",
37
- align: "left",
38
- avatar: true,
39
- bold: false
40
- }) %>
41
- </div>
42
- </div>
@@ -1,59 +0,0 @@
1
- import React from 'react'
2
- import { User } from 'playbook-ui'
3
-
4
- const UserLightWeight = (props) => {
5
- return (
6
- <div className="pb--doc-demo-row">
7
-
8
- <div>
9
- <User
10
- align="center"
11
- avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
12
- bold={false}
13
- name="Anna Black"
14
- orientation="vertical"
15
- size="lg"
16
- title="Remodeling Consultant"
17
- {...props}
18
- />
19
- </div>
20
-
21
- <div>
22
- <User
23
- align="left"
24
- avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
25
- bold={false}
26
- name="Anna Black"
27
- orientation="horizontal"
28
- title="Remodeling Consultant"
29
- {...props}
30
- />
31
- </div>
32
-
33
- <div>
34
- <User
35
- align="left"
36
- avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
37
- bold={false}
38
- name="Anna Black"
39
- orientation="horizontal"
40
- {...props}
41
- />
42
-
43
- <br />
44
-
45
- <User
46
- align="left"
47
- avatar
48
- bold={false}
49
- name="Anna Black"
50
- orientation="horizontal"
51
- {...props}
52
- />
53
- </div>
54
-
55
- </div>
56
- )
57
- }
58
-
59
- export default UserLightWeight
@@ -1,2 +0,0 @@
1
- ##### Prop
2
- Name will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`. Name will then use `font-weight: 300`.