polaris_view_components 0.6.0 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +12 -2
  3. data/app/assets/javascripts/polaris_view_components/autocomplete_controller.js +119 -0
  4. data/app/assets/javascripts/polaris_view_components/button_controller.js +4 -5
  5. data/app/assets/javascripts/polaris_view_components/frame_controller.js +41 -0
  6. data/app/assets/javascripts/polaris_view_components/index.js +9 -1
  7. data/app/assets/javascripts/polaris_view_components/option_list_controller.js +41 -0
  8. data/app/assets/javascripts/polaris_view_components/polaris_controller.js +4 -0
  9. data/app/assets/javascripts/polaris_view_components/popover_controller.js +6 -2
  10. data/app/assets/javascripts/polaris_view_components/text_field_controller.js +4 -0
  11. data/app/assets/javascripts/polaris_view_components/toast_controller.js +68 -0
  12. data/app/assets/javascripts/polaris_view_components.js +415 -18
  13. data/app/assets/stylesheets/polaris_view_components/custom.css +41 -0
  14. data/app/assets/stylesheets/polaris_view_components.css +25 -0
  15. data/app/components/polaris/autocomplete/action_component.rb +7 -0
  16. data/app/components/polaris/autocomplete/option_component.rb +35 -0
  17. data/app/components/polaris/autocomplete/section_component.html.erb +9 -0
  18. data/app/components/polaris/autocomplete/section_component.rb +12 -0
  19. data/app/components/polaris/autocomplete_component.html.erb +30 -0
  20. data/app/components/polaris/autocomplete_component.rb +58 -0
  21. data/app/components/polaris/base_checkbox.rb +48 -0
  22. data/app/components/polaris/base_radio_button.rb +38 -0
  23. data/app/components/polaris/checkbox_component.html.erb +1 -5
  24. data/app/components/polaris/checkbox_component.rb +15 -8
  25. data/app/components/polaris/choice_list_component.rb +1 -1
  26. data/app/components/polaris/filters_component.html.erb +22 -0
  27. data/app/components/polaris/filters_component.rb +57 -4
  28. data/app/components/polaris/frame/save_bar_component.html.erb +23 -0
  29. data/app/components/polaris/frame/save_bar_component.rb +31 -0
  30. data/app/components/polaris/frame/top_bar_component.html.erb +30 -0
  31. data/app/components/polaris/frame/top_bar_component.rb +18 -0
  32. data/app/components/polaris/frame_component.html.erb +44 -0
  33. data/app/components/polaris/frame_component.rb +33 -0
  34. data/app/components/polaris/logo.rb +13 -0
  35. data/app/components/polaris/navigation/item_component.html.erb +31 -0
  36. data/app/components/polaris/navigation/item_component.rb +85 -0
  37. data/app/components/polaris/navigation/section_component.html.erb +17 -0
  38. data/app/components/polaris/navigation/section_component.rb +64 -0
  39. data/app/components/polaris/navigation_component.html.erb +29 -0
  40. data/app/components/polaris/navigation_component.rb +15 -0
  41. data/app/components/polaris/option_list/checkbox_component.html.erb +14 -0
  42. data/app/components/polaris/option_list/checkbox_component.rb +37 -0
  43. data/app/components/polaris/option_list/option_component.rb +24 -0
  44. data/app/components/polaris/option_list/radio_button_component.rb +54 -0
  45. data/app/components/polaris/option_list/section_component.html.erb +14 -0
  46. data/app/components/polaris/option_list/section_component.rb +53 -0
  47. data/app/components/polaris/option_list_component.html.erb +15 -0
  48. data/app/components/polaris/option_list_component.rb +67 -0
  49. data/app/components/polaris/popover_component.html.erb +2 -9
  50. data/app/components/polaris/popover_component.rb +17 -0
  51. data/app/components/polaris/radio_button_component.html.erb +1 -6
  52. data/app/components/polaris/radio_button_component.rb +14 -4
  53. data/app/components/polaris/text_field_component.rb +16 -2
  54. data/app/components/polaris/toast_component.html.erb +21 -0
  55. data/app/components/polaris/toast_component.rb +40 -0
  56. data/app/components/polaris/top_bar/user_menu_component.html.erb +19 -0
  57. data/app/components/polaris/top_bar/user_menu_component.rb +9 -0
  58. data/app/helpers/polaris/form_builder.rb +2 -2
  59. data/app/helpers/polaris/view_helper.rb +11 -0
  60. data/lib/polaris/view_components/engine.rb +5 -1
  61. data/lib/polaris/view_components/version.rb +1 -1
  62. metadata +46 -9
data/app/components/polaris/toast_component.rb ADDED
@@ -0,0 +1,40 @@
1
+ class Polaris::ToastComponent < Polaris::NewComponent
2
+ renders_one :action, ->(**system_arguments) do
3
+ Polaris::ButtonComponent.new(plain: true, monochrome: true, **system_arguments)
4
+ end
5
+
6
+ def initialize(
7
+ hidden: false,
8
+ duration: nil,
9
+ error: false,
10
+ **system_arguments
11
+ )
12
+ @hidden = hidden
13
+ @duration = duration
14
+ @error = error
15
+ @system_arguments = system_arguments
16
+ end
17
+
18
+ def system_arguments
19
+ @system_arguments.tap do |opts|
20
+ opts[:tag] = "div"
21
+ opts[:data] ||= {}
22
+ prepend_option(opts[:data], :controller, "polaris-toast")
23
+ opts[:data][:polaris_toast_hidden_value] = @hidden
24
+ opts[:data][:polaris_toast_duration_value] = @duration
25
+ opts[:data][:polaris_toast_has_action_value] = action.present?
26
+ opts[:classes] = class_names(
27
+ opts[:classes],
28
+ "Polaris-Frame-ToastManager__ToastWrapper",
29
+ "Polaris-Frame-ToastManager--toastWrapperEnterDone": !@hidden
30
+ )
31
+ end
32
+ end
33
+
34
+ def toast_classes
35
+ class_names(
36
+ "Polaris-Frame-Toast",
37
+ "Polaris-Frame-Toast--error": @error
38
+ )
39
+ end
40
+ end
data/app/components/polaris/top_bar/user_menu_component.html.erb ADDED
@@ -0,0 +1,19 @@
1
+ <%= polaris_popover(alignment: :left) do |popover| %>
2
+ <% popover.activator do %>
3
+ <button
4
+ type="button"
5
+ class="Polaris-TopBar-Menu__Activator"
6
+ data-action="polaris-popover#toggle click@window->polaris-popover#hide"
7
+ >
8
+ <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
9
+ <%= avatar %>
10
+ </div>
11
+ <span class="Polaris-TopBar-UserMenu__Details">
12
+ <p class="Polaris-TopBar-UserMenu__Name"><%= @name %></p>
13
+ <p class="Polaris-TopBar-UserMenu__Detail"><%= @detail %></p>
14
+ </span>
15
+ </button>
16
+ <% end %>
17
+
18
+ <%= content %>
19
+ <% end %>
data/app/components/polaris/top_bar/user_menu_component.rb ADDED
@@ -0,0 +1,9 @@
1
+ class Polaris::TopBar::UserMenuComponent < Polaris::NewComponent
2
+ renders_one :avatar, Polaris::AvatarComponent
3
+
4
+ def initialize(name:, detail:, **system_arguments)
5
+ @name = name
6
+ @detail = detail
7
+ @system_arguments = system_arguments
8
+ end
9
+ end
data/app/helpers/polaris/form_builder.rb CHANGED
@@ -17,8 +17,8 @@ module Polaris
17
17
  status: :critical
18
18
  ) do
19
19
  render(Polaris::ListComponent.new) do |list|
20
- object.errors.each do |error|
21
- list.item { error.full_message.html_safe }
20
+ object.errors.full_messages.each do |error|
21
+ list.item { error.html_safe }
22
22
  end
23
23
  end
24
24
  end
data/app/helpers/polaris/view_helper.rb CHANGED
@@ -4,6 +4,9 @@ module Polaris
4
4
  # standard:disable Layout/HashAlignment
5
5
  POLARIS_HELPERS = {
6
6
  action_list: "Polaris::ActionListComponent",
7
+ autocomplete: "Polaris::AutocompleteComponent",
8
+ autocomplete_section: "Polaris::Autocomplete::SectionComponent",
9
+ autocomplete_option: "Polaris::Autocomplete::OptionComponent",
7
10
  avatar: "Polaris::AvatarComponent",
8
11
  badge: "Polaris::BadgeComponent",
9
12
  banner: "Polaris::BannerComponent",
@@ -24,6 +27,7 @@ module Polaris
24
27
  exception_list: "Polaris::ExceptionListComponent",
25
28
  footer_help: "Polaris::FooterHelpComponent",
26
29
  form_layout: "Polaris::FormLayoutComponent",
30
+ frame: "Polaris::FrameComponent",
27
31
  filters: "Polaris::FiltersComponent",
28
32
  heading: "Polaris::HeadingComponent",
29
33
  icon: "Polaris::IconComponent",
@@ -33,6 +37,8 @@ module Polaris
33
37
  link: "Polaris::LinkComponent",
34
38
  list: "Polaris::ListComponent",
35
39
  modal: "Polaris::ModalComponent",
40
+ navigation: "Polaris::NavigationComponent",
41
+ option_list: "Polaris::OptionListComponent",
36
42
  page: "Polaris::PageComponent",
37
43
  page_actions: "Polaris::PageActionsComponent",
38
44
  pagination: "Polaris::PaginationComponent",
@@ -56,6 +62,7 @@ module Polaris
56
62
  text_field: "Polaris::TextFieldComponent",
57
63
  text_style: "Polaris::TextStyleComponent",
58
64
  thumbnail: "Polaris::ThumbnailComponent",
65
+ toast: "Polaris::ToastComponent",
59
66
  visually_hidden: "Polaris::VisuallyHiddenComponent"
60
67
  }.freeze
61
68
  # standard:enable Layout/HashAlignment
@@ -86,5 +93,9 @@ module Polaris
86
93
  def polaris_body_styles
87
94
  %(background-color: rgb(246, 246, 247); color: rgb(32, 34, 35); --p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-on-surface-background:rgba(241, 242, 243, 1); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:''; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px;)
88
95
  end
96
+
97
+ def polaris_inversed_colors
98
+ %(--p-background:rgba(11, 12, 13, 1); --p-background-hovered:rgba(11, 12, 13, 1); --p-background-pressed:rgba(11, 12, 13, 1); --p-background-selected:rgba(11, 12, 13, 1); --p-surface:rgba(32, 33, 35, 1); --p-surface-neutral:rgba(49, 51, 53, 1); --p-surface-neutral-hovered:rgba(49, 51, 53, 1); --p-surface-neutral-pressed:rgba(49, 51, 53, 1); --p-surface-neutral-disabled:rgba(49, 51, 53, 1); --p-surface-neutral-subdued:rgba(68, 71, 74, 1); --p-surface-subdued:rgba(26, 28, 29, 1); --p-surface-disabled:rgba(26, 28, 29, 1); --p-surface-hovered:rgba(47, 49, 51, 1); --p-surface-pressed:rgba(62, 64, 67, 1); --p-surface-depressed:rgba(80, 83, 86, 1); --p-surface-search-field:rgba(47, 49, 51, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(33, 33, 33, 0.5); --p-shadow-from-dim-light:rgba(255, 255, 255, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(255, 255, 255, 0.15); --p-hint-from-direct-light:rgba(185, 185, 185, 0.2); --p-border:rgba(80, 83, 86, 1); --p-border-neutral-subdued:rgba(130, 135, 139, 1); --p-border-hovered:rgba(80, 83, 86, 1); --p-border-disabled:rgba(103, 107, 111, 1); --p-border-subdued:rgba(130, 135, 139, 1); --p-border-depressed:rgba(142, 145, 145, 1); --p-border-shadow:rgba(91, 95, 98, 1); --p-border-shadow-subdued:rgba(130, 135, 139, 1); --p-divider:rgba(69, 71, 73, 1); --p-icon:rgba(166, 172, 178, 1); --p-icon-hovered:rgba(225, 227, 229, 1); --p-icon-pressed:rgba(166, 172, 178, 1); --p-icon-disabled:rgba(84, 87, 90, 1); --p-icon-subdued:rgba(120, 125, 129, 1); --p-text:rgba(227, 229, 231, 1); --p-text-disabled:rgba(111, 115, 119, 1); --p-text-subdued:rgba(153, 159, 164, 1); --p-interactive:rgba(54, 163, 255, 1); --p-interactive-disabled:rgba(38, 98, 182, 1); --p-interactive-hovered:rgba(103, 175, 255, 1); --p-interactive-pressed:rgba(136, 188, 255, 1); --p-icon-interactive:rgba(54, 163, 255, 1); --p-focused:rgba(38, 98, 182, 1); --p-surface-selected:rgba(2, 14, 35, 1); --p-surface-selected-hovered:rgba(7, 29, 61, 1); --p-surface-selected-pressed:rgba(13, 43, 86, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(77, 80, 83, 1); --p-action-secondary-disabled:rgba(32, 34, 35, 1); --p-action-secondary-hovered:rgba(84, 87, 91, 1); --p-action-secondary-pressed:rgba(96, 100, 103, 1); --p-action-secondary-depressed:rgba(123, 127, 132, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(0, 86, 64, 1); --p-action-primary-hovered:rgba(0, 150, 113, 1); --p-action-primary-pressed:rgba(0, 164, 124, 1); --p-action-primary-depressed:rgba(0, 179, 136, 1); --p-icon-on-primary:rgba(230, 255, 244, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 141, 106, 1); --p-text-primary-hovered:rgba(0, 158, 120, 1); --p-text-primary-pressed:rgba(0, 176, 133, 1); --p-surface-primary-selected:rgba(12, 18, 16, 1); --p-surface-primary-selected-hovered:rgba(40, 48, 44, 1); --p-surface-primary-selected-pressed:rgba(54, 64, 59, 1); --p-border-critical:rgba(227, 47, 14, 1); --p-border-critical-subdued:rgba(227, 47, 14, 1); --p-border-critical-disabled:rgba(131, 23, 4, 1); --p-icon-critical:rgba(218, 45, 13, 1); --p-surface-critical:rgba(69, 7, 1, 1); --p-surface-critical-subdued:rgba(69, 7, 1, 1); --p-surface-critical-subdued-hovered:rgba(68, 23, 20, 1); --p-surface-critical-subdued-pressed:rgba(107, 16, 3, 1); --p-surface-critical-subdued-depressed:rgba(135, 24, 5, 1); --p-text-critical:rgba(233, 128, 122, 1); --p-action-critical:rgba(205, 41, 12, 1); --p-action-critical-disabled:rgba(187, 37, 10, 1); --p-action-critical-hovered:rgba(227, 47, 14, 1); --p-action-critical-pressed:rgba(250, 53, 17, 1); --p-action-critical-depressed:rgba(253, 87, 73, 1); --p-icon-on-critical:rgba(255, 248, 247, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(253, 114, 106, 1); --p-interactive-critical-disabled:rgba(254, 172, 168, 1); --p-interactive-critical-hovered:rgba(253, 138, 132, 1); --p-interactive-critical-pressed:rgba(253, 159, 155, 1); --p-border-warning:rgba(153, 112, 0, 1); --p-border-warning-subdued:rgba(153, 112, 0, 1); --p-icon-warning:rgba(104, 75, 0, 1); --p-surface-warning:rgba(153, 112, 0, 1); --p-surface-warning-subdued:rgba(77, 59, 29, 1); --p-surface-warning-subdued-hovered:rgba(82, 63, 32, 1); --p-surface-warning-subdued-pressed:rgba(87, 67, 34, 1); --p-text-warning:rgba(202, 149, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(68, 157, 167, 1); --p-icon-highlight:rgba(44, 108, 115, 1); --p-surface-highlight:rgba(0, 105, 113, 1); --p-surface-highlight-subdued:rgba(18, 53, 57, 1); --p-surface-highlight-subdued-hovered:rgba(20, 58, 62, 1); --p-surface-highlight-subdued-pressed:rgba(24, 65, 70, 1); --p-text-highlight:rgba(162, 239, 250, 1); --p-border-success:rgba(0, 135, 102, 1); --p-border-success-subdued:rgba(0, 135, 102, 1); --p-icon-success:rgba(0, 94, 70, 1); --p-surface-success:rgba(0, 94, 70, 1); --p-surface-success-subdued:rgba(28, 53, 44, 1); --p-surface-success-subdued-hovered:rgba(31, 58, 48, 1); --p-surface-success-subdued-pressed:rgba(35, 65, 54, 1); --p-text-success:rgba(88, 173, 142, 1); --p-decorative-one-icon:rgba(255, 186, 67, 1); --p-decorative-one-surface:rgba(142, 102, 9, 1); --p-decorative-one-text:rgba(255, 255, 255, 1); --p-decorative-two-icon:rgba(245, 182, 192, 1); --p-decorative-two-surface:rgba(206, 88, 20, 1); --p-decorative-two-text:rgba(255, 255, 255, 1); --p-decorative-three-icon:rgba(0, 227, 141, 1); --p-decorative-three-surface:rgba(0, 124, 90, 1); --p-decorative-three-text:rgba(255, 255, 255, 1); --p-decorative-four-icon:rgba(0, 221, 218, 1); --p-decorative-four-surface:rgba(22, 124, 121, 1); --p-decorative-four-text:rgba(255, 255, 255, 1); --p-decorative-five-icon:rgba(244, 183, 191, 1); --p-decorative-five-surface:rgba(194, 51, 86, 1); --p-decorative-five-text:rgba(255, 255, 255, 1); --p-border-radius-slim:0.2rem; --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(227, 229, 231);)
99
+ end
89
100
  end
90
101
  end
data/lib/polaris/view_components/engine.rb CHANGED
@@ -1,5 +1,9 @@
1
1
  require "rails/engine"
2
- require "view_component/engine"
2
+ require "view_component"
3
+ require "view_component/version"
4
+ if ViewComponent::VERSION::MAJOR == 2 && ViewComponent::VERSION::MINOR < 43
5
+ require "view_component/engine"
6
+ end
3
7
 
4
8
  module Polaris
5
9
  module ViewComponents
data/lib/polaris/view_components/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Polaris
2
2
  module ViewComponents
3
- VERSION = "0.6.0"
3
+ VERSION = "0.7.0"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: polaris_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.6.0
4
+ version: 0.7.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dan Gamble
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-11-15 00:00:00.000000000 Z
12
+ date: 2021-12-20 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -35,22 +35,22 @@ dependencies:
35
35
  name: view_component
36
36
  requirement: !ruby/object:Gem::Requirement
37
37
  requirements:
38
- - - "~>"
39
- - !ruby/object:Gem::Version
40
- version: '2.0'
41
38
  - - ">="
42
39
  - !ruby/object:Gem::Version
43
40
  version: 2.0.0
41
+ - - "<"
42
+ - !ruby/object:Gem::Version
43
+ version: '3.0'
44
44
  type: :runtime
45
45
  prerelease: false
46
46
  version_requirements: !ruby/object:Gem::Requirement
47
47
  requirements:
48
- - - "~>"
49
- - !ruby/object:Gem::Version
50
- version: '2.0'
51
48
  - - ">="
52
49
  - !ruby/object:Gem::Version
53
50
  version: 2.0.0
51
+ - - "<"
52
+ - !ruby/object:Gem::Version
53
+ version: '3.0'
54
54
  description:
55
55
  email:
56
56
  - dan@dangamble.co.uk
@@ -448,15 +448,19 @@ files:
448
448
  - app/assets/icons/polaris/WholesaleMajor.svg
449
449
  - app/assets/icons/polaris/WifiMajor.svg
450
450
  - app/assets/javascripts/polaris_view_components.js
451
+ - app/assets/javascripts/polaris_view_components/autocomplete_controller.js
451
452
  - app/assets/javascripts/polaris_view_components/button_controller.js
453
+ - app/assets/javascripts/polaris_view_components/frame_controller.js
452
454
  - app/assets/javascripts/polaris_view_components/index.js
453
455
  - app/assets/javascripts/polaris_view_components/modal_controller.js
456
+ - app/assets/javascripts/polaris_view_components/option_list_controller.js
454
457
  - app/assets/javascripts/polaris_view_components/polaris_controller.js
455
458
  - app/assets/javascripts/polaris_view_components/popover_controller.js
456
459
  - app/assets/javascripts/polaris_view_components/resource_item_controller.js
457
460
  - app/assets/javascripts/polaris_view_components/scrollable_controller.js
458
461
  - app/assets/javascripts/polaris_view_components/select_controller.js
459
462
  - app/assets/javascripts/polaris_view_components/text_field_controller.js
463
+ - app/assets/javascripts/polaris_view_components/toast_controller.js
460
464
  - app/assets/stylesheets/polaris_view_components.css
461
465
  - app/assets/stylesheets/polaris_view_components.postcss.css
462
466
  - app/assets/stylesheets/polaris_view_components/custom.css
@@ -470,6 +474,12 @@ files:
470
474
  - app/components/polaris/action_list_component.html.erb
471
475
  - app/components/polaris/action_list_component.rb
472
476
  - app/components/polaris/application_component.rb
477
+ - app/components/polaris/autocomplete/action_component.rb
478
+ - app/components/polaris/autocomplete/option_component.rb
479
+ - app/components/polaris/autocomplete/section_component.html.erb
480
+ - app/components/polaris/autocomplete/section_component.rb
481
+ - app/components/polaris/autocomplete_component.html.erb
482
+ - app/components/polaris/autocomplete_component.rb
473
483
  - app/components/polaris/avatar_component.html.erb
474
484
  - app/components/polaris/avatar_component.rb
475
485
  - app/components/polaris/badge_component.html.erb
@@ -477,7 +487,9 @@ files:
477
487
  - app/components/polaris/banner_component.html.erb
478
488
  - app/components/polaris/banner_component.rb
479
489
  - app/components/polaris/base_button.rb
490
+ - app/components/polaris/base_checkbox.rb
480
491
  - app/components/polaris/base_component.rb
492
+ - app/components/polaris/base_radio_button.rb
481
493
  - app/components/polaris/button_component.html.erb
482
494
  - app/components/polaris/button_component.rb
483
495
  - app/components/polaris/button_group_component.html.erb
@@ -526,6 +538,12 @@ files:
526
538
  - app/components/polaris/form_layout/item_component.rb
527
539
  - app/components/polaris/form_layout_component.html.erb
528
540
  - app/components/polaris/form_layout_component.rb
541
+ - app/components/polaris/frame/save_bar_component.html.erb
542
+ - app/components/polaris/frame/save_bar_component.rb
543
+ - app/components/polaris/frame/top_bar_component.html.erb
544
+ - app/components/polaris/frame/top_bar_component.rb
545
+ - app/components/polaris/frame_component.html.erb
546
+ - app/components/polaris/frame_component.rb
529
547
  - app/components/polaris/heading_component.rb
530
548
  - app/components/polaris/headless_button.html.erb
531
549
  - app/components/polaris/headless_button.rb
@@ -549,10 +567,25 @@ files:
549
567
  - app/components/polaris/link_component.rb
550
568
  - app/components/polaris/list_component.html.erb
551
569
  - app/components/polaris/list_component.rb
570
+ - app/components/polaris/logo.rb
552
571
  - app/components/polaris/modal/section_component.rb
553
572
  - app/components/polaris/modal_component.html.erb
554
573
  - app/components/polaris/modal_component.rb
574
+ - app/components/polaris/navigation/item_component.html.erb
575
+ - app/components/polaris/navigation/item_component.rb
576
+ - app/components/polaris/navigation/section_component.html.erb
577
+ - app/components/polaris/navigation/section_component.rb
578
+ - app/components/polaris/navigation_component.html.erb
579
+ - app/components/polaris/navigation_component.rb
555
580
  - app/components/polaris/new_component.rb
581
+ - app/components/polaris/option_list/checkbox_component.html.erb
582
+ - app/components/polaris/option_list/checkbox_component.rb
583
+ - app/components/polaris/option_list/option_component.rb
584
+ - app/components/polaris/option_list/radio_button_component.rb
585
+ - app/components/polaris/option_list/section_component.html.erb
586
+ - app/components/polaris/option_list/section_component.rb
587
+ - app/components/polaris/option_list_component.html.erb
588
+ - app/components/polaris/option_list_component.rb
556
589
  - app/components/polaris/page_actions_component.html.erb
557
590
  - app/components/polaris/page_actions_component.rb
558
591
  - app/components/polaris/page_component.html.erb
@@ -600,6 +633,10 @@ files:
600
633
  - app/components/polaris/text_style_component.rb
601
634
  - app/components/polaris/thumbnail_component.html.erb
602
635
  - app/components/polaris/thumbnail_component.rb
636
+ - app/components/polaris/toast_component.html.erb
637
+ - app/components/polaris/toast_component.rb
638
+ - app/components/polaris/top_bar/user_menu_component.html.erb
639
+ - app/components/polaris/top_bar/user_menu_component.rb
603
640
  - app/components/polaris/visually_hidden_component.rb
604
641
  - app/helpers/polaris/class_name_helper.rb
605
642
  - app/helpers/polaris/conditional_helper.rb
@@ -637,7 +674,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
637
674
  - !ruby/object:Gem::Version
638
675
  version: '0'
639
676
  requirements: []
640
- rubygems_version: 3.2.30
677
+ rubygems_version: 3.2.32
641
678
  signing_key:
642
679
  specification_version: 4
643
680
  summary: ViewComponents for Polaris Design System