polaris_view_components 0.5.0 → 0.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/polaris_view_components/button_controller.js +48 -0
  3. data/app/assets/javascripts/polaris_view_components/index.js +11 -1
  4. data/app/assets/javascripts/polaris_view_components/modal_controller.js +25 -0
  5. data/app/assets/javascripts/polaris_view_components/polaris_controller.js +24 -0
  6. data/app/assets/javascripts/polaris_view_components/popover_controller.js +45 -0
  7. data/app/assets/javascripts/polaris_view_components/scrollable_controller.js +60 -0
  8. data/app/assets/javascripts/polaris_view_components.js +1533 -1
  9. data/app/assets/stylesheets/polaris_view_components/custom.css +26 -1
  10. data/app/assets/stylesheets/polaris_view_components.css +21 -1
  11. data/app/components/polaris/action.rb +3 -3
  12. data/app/components/polaris/action_list/item_component.html.erb +35 -0
  13. data/app/components/polaris/action_list/item_component.rb +41 -0
  14. data/app/components/polaris/action_list/section_component.html.erb +16 -0
  15. data/app/components/polaris/action_list/section_component.rb +26 -0
  16. data/app/components/polaris/action_list_component.html.erb +13 -0
  17. data/app/components/polaris/action_list_component.rb +25 -0
  18. data/app/components/polaris/application_component.rb +19 -19
  19. data/app/components/polaris/avatar_component.rb +1 -1
  20. data/app/components/polaris/badge_component.rb +1 -1
  21. data/app/components/polaris/banner_component.rb +6 -6
  22. data/app/components/polaris/base_button.rb +1 -1
  23. data/app/components/polaris/button_component.html.erb +13 -0
  24. data/app/components/polaris/button_group_component.rb +5 -5
  25. data/app/components/polaris/callout_card_component.rb +5 -5
  26. data/app/components/polaris/caption_component.rb +2 -2
  27. data/app/components/polaris/card/header_component.rb +1 -1
  28. data/app/components/polaris/card/section_component.rb +2 -2
  29. data/app/components/polaris/card_component.html.erb +4 -0
  30. data/app/components/polaris/card_component.rb +5 -4
  31. data/app/components/polaris/character_count.rb +10 -10
  32. data/app/components/polaris/checkbox_component.rb +4 -4
  33. data/app/components/polaris/choice_component.rb +1 -1
  34. data/app/components/polaris/choice_list_component.rb +4 -4
  35. data/app/components/polaris/data_table/cell_component.rb +3 -3
  36. data/app/components/polaris/data_table_component.rb +3 -3
  37. data/app/components/polaris/description_list_component.rb +3 -3
  38. data/app/components/polaris/display_text_component.rb +2 -2
  39. data/app/components/polaris/dropzone/component.rb +36 -36
  40. data/app/components/polaris/empty_state_component.rb +3 -3
  41. data/app/components/polaris/exception_list/item_component.rb +2 -2
  42. data/app/components/polaris/exception_list_component.rb +1 -1
  43. data/app/components/polaris/filters_component.rb +2 -2
  44. data/app/components/polaris/footer_help_component.rb +1 -1
  45. data/app/components/polaris/form_layout/group_component.rb +3 -3
  46. data/app/components/polaris/form_layout/item_component.rb +1 -1
  47. data/app/components/polaris/form_layout_component.rb +3 -3
  48. data/app/components/polaris/heading_component.rb +1 -1
  49. data/app/components/polaris/headless_button.html.erb +13 -0
  50. data/app/components/polaris/headless_button.rb +17 -5
  51. data/app/components/polaris/icon_component.rb +2 -2
  52. data/app/components/polaris/index_table/cell_component.rb +2 -2
  53. data/app/components/polaris/index_table_component.rb +3 -3
  54. data/app/components/polaris/inline_error_component.rb +1 -1
  55. data/app/components/polaris/label_component.rb +2 -2
  56. data/app/components/polaris/labelled_component.rb +2 -2
  57. data/app/components/polaris/layout/annotated_section.rb +1 -1
  58. data/app/components/polaris/layout/section.rb +1 -1
  59. data/app/components/polaris/layout_component.rb +3 -3
  60. data/app/components/polaris/link_component.rb +3 -3
  61. data/app/components/polaris/list_component.rb +3 -3
  62. data/app/components/polaris/modal/section_component.rb +19 -0
  63. data/app/components/polaris/modal_component.html.erb +79 -0
  64. data/app/components/polaris/modal_component.rb +98 -0
  65. data/app/components/polaris/page_actions_component.rb +8 -7
  66. data/app/components/polaris/page_component.rb +4 -4
  67. data/app/components/polaris/pagination_component.rb +1 -5
  68. data/app/components/polaris/popover/pane_component.html.erb +25 -0
  69. data/app/components/polaris/popover/pane_component.rb +20 -0
  70. data/app/components/polaris/popover/section_component.rb +19 -0
  71. data/app/components/polaris/popover_component.html.erb +38 -0
  72. data/app/components/polaris/popover_component.rb +90 -0
  73. data/app/components/polaris/progress_bar_component.rb +5 -5
  74. data/app/components/polaris/radio_button_component.rb +3 -3
  75. data/app/components/polaris/resource_item_component.html.erb +16 -6
  76. data/app/components/polaris/resource_item_component.rb +42 -9
  77. data/app/components/polaris/resource_list_component.rb +2 -2
  78. data/app/components/polaris/scrollable_component.html.erb +5 -0
  79. data/app/components/polaris/scrollable_component.rb +48 -0
  80. data/app/components/polaris/select_component.rb +3 -3
  81. data/app/components/polaris/setting_toggle_component.html.erb +10 -0
  82. data/app/components/polaris/setting_toggle_component.rb +24 -0
  83. data/app/components/polaris/shopify_navigation_component.rb +6 -6
  84. data/app/components/polaris/skeleton_body_text_component.rb +1 -1
  85. data/app/components/polaris/spacer_component.rb +3 -3
  86. data/app/components/polaris/spinner_component.rb +2 -2
  87. data/app/components/polaris/stack_component.rb +5 -5
  88. data/app/components/polaris/subheading_component.rb +1 -1
  89. data/app/components/polaris/tabs/tab_component.html.erb +10 -0
  90. data/app/components/polaris/tabs/tab_component.rb +34 -0
  91. data/app/components/polaris/tabs_component.html.erb +7 -0
  92. data/app/components/polaris/tabs_component.rb +37 -0
  93. data/app/components/polaris/tag_component.rb +1 -1
  94. data/app/components/polaris/text_container_component.rb +2 -2
  95. data/app/components/polaris/text_field_component.rb +8 -8
  96. data/app/components/polaris/text_style_component.rb +4 -4
  97. data/app/components/polaris/thumbnail_component.rb +2 -2
  98. data/app/helpers/polaris/form_builder.rb +4 -2
  99. data/app/helpers/polaris/url_helper.rb +3 -3
  100. data/app/helpers/polaris/view_helper.rb +11 -3
  101. data/app/validators/type_validator.rb +2 -2
  102. data/lib/generators/polaris_view_components/install_generator.rb +5 -5
  103. data/lib/polaris/view_components/engine.rb +6 -0
  104. data/lib/polaris/view_components/version.rb +1 -1
  105. data/lib/polaris_view_components.rb +1 -1
  106. metadata +30 -3
data/app/helpers/polaris/url_helper.rb CHANGED
@@ -1,14 +1,14 @@
1
1
  module Polaris
2
2
  module UrlHelper
3
3
  def polaris_button_to(name = nil, options = nil, html_options = nil, &block)
4
- html_options, options = options, name if block_given?
5
- options ||= {}
4
+ html_options, options = options, name if block
5
+ options ||= {}
6
6
  html_options ||= {}
7
7
  html_options[:classes] = html_options[:class]
8
8
  html_options.delete(:class)
9
9
 
10
10
  button = Polaris::HeadlessButton.new(submit: true, **html_options)
11
- button = button.with_content(name) unless block_given?
11
+ button = button.with_content(name) unless block
12
12
  content = render(button, &block)
13
13
 
14
14
  button_to(options, button.html_options) do
data/app/helpers/polaris/view_helper.rb CHANGED
@@ -1,7 +1,9 @@
1
1
  module Polaris
2
2
  # Module to allow shorthand calls for Polaris components
3
3
  module ViewHelper
4
+ # standard:disable Layout/HashAlignment
4
5
  POLARIS_HELPERS = {
6
+ action_list: "Polaris::ActionListComponent",
5
7
  avatar: "Polaris::AvatarComponent",
6
8
  badge: "Polaris::BadgeComponent",
7
9
  banner: "Polaris::BannerComponent",
@@ -30,27 +32,33 @@ module Polaris
30
32
  layout: "Polaris::LayoutComponent",
31
33
  link: "Polaris::LinkComponent",
32
34
  list: "Polaris::ListComponent",
35
+ modal: "Polaris::ModalComponent",
33
36
  page: "Polaris::PageComponent",
34
37
  page_actions: "Polaris::PageActionsComponent",
35
38
  pagination: "Polaris::PaginationComponent",
36
39
  progress_bar: "Polaris::ProgressBarComponent",
40
+ popover: "Polaris::PopoverComponent",
37
41
  radio_button: "Polaris::RadioButtonComponent",
38
42
  resource_list: "Polaris::ResourceListComponent",
39
43
  resource_item: "Polaris::ResourceItemComponent",
40
44
  select: "Polaris::SelectComponent",
45
+ setting_toggle: "Polaris::SettingToggleComponent",
41
46
  shopify_navigation: "Polaris::ShopifyNavigationComponent",
42
47
  stack: "Polaris::StackComponent",
43
48
  subheading: "Polaris::SubheadingComponent",
49
+ scrollable: "Polaris::ScrollableComponent",
44
50
  spinner: "Polaris::SpinnerComponent",
45
51
  skeleton_body_text: "Polaris::SkeletonBodyTextComponent",
46
52
  spacer: "Polaris::SpacerComponent",
53
+ tabs: "Polaris::TabsComponent",
47
54
  tag: "Polaris::TagComponent",
48
55
  text_container: "Polaris::TextContainerComponent",
49
56
  text_field: "Polaris::TextFieldComponent",
50
57
  text_style: "Polaris::TextStyleComponent",
51
58
  thumbnail: "Polaris::ThumbnailComponent",
52
- visually_hidden: "Polaris::VisuallyHiddenComponent",
59
+ visually_hidden: "Polaris::VisuallyHiddenComponent"
53
60
  }.freeze
61
+ # standard:enable Layout/HashAlignment
54
62
  POLARIS_HELPERS.each do |name, component|
55
63
  define_method "polaris_#{name}" do |*args, **kwargs, &block|
56
64
  render component.constantize.new(*args, **kwargs), &block
@@ -68,7 +76,7 @@ module Polaris
68
76
  path = ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
69
77
  file = File.read(path)
70
78
  doc = Nokogiri::HTML::DocumentFragment.parse(file)
71
- svg = doc.at_css 'svg'
79
+ svg = doc.at_css "svg"
72
80
  svg[:class] = "Polaris-Icon__Svg"
73
81
  svg[:focusable] = false
74
82
  svg[:"aria-hidden"] = true
@@ -76,7 +84,7 @@ module Polaris
76
84
  end
77
85
 
78
86
  def polaris_body_styles
79
- %Q(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;)
87
+ %(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;)
80
88
  end
81
89
  end
82
90
  end
data/app/validators/type_validator.rb CHANGED
@@ -3,11 +3,11 @@ class TypeValidator < ActiveModel::EachValidator
3
3
  required_type = options[:with]
4
4
 
5
5
  if value.is_a?(Array)
6
- unless value.all? { |i| i.class == required_type}
6
+ unless value.all? { |i| i.instance_of?(required_type) }
7
7
  record.errors.add attribute, (options[:message] || "is not of class #{required_type}")
8
8
  end
9
9
  else
10
- unless value.class == required_type
10
+ unless value.instance_of?(required_type)
11
11
  record.errors.add attribute, (options[:message] || "is not of class #{required_type}")
12
12
  end
13
13
  end
data/lib/generators/polaris_view_components/install_generator.rb CHANGED
@@ -1,10 +1,10 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- require 'rails/generators/active_record'
3
+ require "rails/generators/active_record"
4
4
 
5
5
  module PolarisViewComponents
6
6
  class InstallGenerator < Rails::Generators::Base
7
- source_root File.expand_path('templates', __dir__)
7
+ source_root File.expand_path("templates", __dir__)
8
8
 
9
9
  def add_npm_package
10
10
  say "Adding NPM package", :green
@@ -14,13 +14,13 @@ module PolarisViewComponents
14
14
  def add_to_stimulus_controller
15
15
  say "Adding import to to Stimulus controller", :green
16
16
  dir_path = "app/javascript/controllers"
17
- empty_directory('app/javascript')
17
+ empty_directory("app/javascript")
18
18
  empty_directory(dir_path)
19
19
 
20
20
  file_path = "#{dir_path}/index.js"
21
21
 
22
22
  unless File.exist?(file_path)
23
- copy_file 'stimulus_index.js', file_path
23
+ copy_file "stimulus_index.js", file_path
24
24
  end
25
25
 
26
26
  append_to_file file_path do
@@ -29,7 +29,7 @@ module PolarisViewComponents
29
29
  end
30
30
 
31
31
  def show_readme
32
- readme 'README'
32
+ readme "README"
33
33
  end
34
34
  end
35
35
  end
data/lib/polaris/view_components/engine.rb CHANGED
@@ -19,6 +19,12 @@ module Polaris
19
19
  end
20
20
  end
21
21
 
22
+ initializer "polaris_view_components.importmap", before: "importmap" do |app|
23
+ if app.config.respond_to?(:importmap) && app.config.importmap.has_key?(:cache_sweepers)
24
+ app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascripts")
25
+ end
26
+ end
27
+
22
28
  initializer "polaris_view_components.helpers" do
23
29
  ActiveSupport.on_load(:action_controller_base) do
24
30
  helper Polaris::ViewHelper
data/lib/polaris/view_components/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Polaris
2
2
  module ViewComponents
3
- VERSION = "0.5.0"
3
+ VERSION = "0.6.0"
4
4
  end
5
5
  end
data/lib/polaris_view_components.rb CHANGED
@@ -1 +1 @@
1
- require 'polaris/view_components'
1
+ require "polaris/view_components"
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.5.0
4
+ version: 0.6.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-10-29 00:00:00.000000000 Z
12
+ date: 2021-11-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -448,8 +448,13 @@ 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/button_controller.js
451
452
  - app/assets/javascripts/polaris_view_components/index.js
453
+ - app/assets/javascripts/polaris_view_components/modal_controller.js
454
+ - app/assets/javascripts/polaris_view_components/polaris_controller.js
455
+ - app/assets/javascripts/polaris_view_components/popover_controller.js
452
456
  - app/assets/javascripts/polaris_view_components/resource_item_controller.js
457
+ - app/assets/javascripts/polaris_view_components/scrollable_controller.js
453
458
  - app/assets/javascripts/polaris_view_components/select_controller.js
454
459
  - app/assets/javascripts/polaris_view_components/text_field_controller.js
455
460
  - app/assets/stylesheets/polaris_view_components.css
@@ -458,6 +463,12 @@ files:
458
463
  - app/assets/stylesheets/polaris_view_components/shopify_navigation.css
459
464
  - app/assets/stylesheets/polaris_view_components/spacer_component.css
460
465
  - app/components/polaris/action.rb
466
+ - app/components/polaris/action_list/item_component.html.erb
467
+ - app/components/polaris/action_list/item_component.rb
468
+ - app/components/polaris/action_list/section_component.html.erb
469
+ - app/components/polaris/action_list/section_component.rb
470
+ - app/components/polaris/action_list_component.html.erb
471
+ - app/components/polaris/action_list_component.rb
461
472
  - app/components/polaris/application_component.rb
462
473
  - app/components/polaris/avatar_component.html.erb
463
474
  - app/components/polaris/avatar_component.rb
@@ -538,6 +549,9 @@ files:
538
549
  - app/components/polaris/link_component.rb
539
550
  - app/components/polaris/list_component.html.erb
540
551
  - app/components/polaris/list_component.rb
552
+ - app/components/polaris/modal/section_component.rb
553
+ - app/components/polaris/modal_component.html.erb
554
+ - app/components/polaris/modal_component.rb
541
555
  - app/components/polaris/new_component.rb
542
556
  - app/components/polaris/page_actions_component.html.erb
543
557
  - app/components/polaris/page_actions_component.rb
@@ -545,6 +559,11 @@ files:
545
559
  - app/components/polaris/page_component.rb
546
560
  - app/components/polaris/pagination_component.html.erb
547
561
  - app/components/polaris/pagination_component.rb
562
+ - app/components/polaris/popover/pane_component.html.erb
563
+ - app/components/polaris/popover/pane_component.rb
564
+ - app/components/polaris/popover/section_component.rb
565
+ - app/components/polaris/popover_component.html.erb
566
+ - app/components/polaris/popover_component.rb
548
567
  - app/components/polaris/progress_bar_component.html.erb
549
568
  - app/components/polaris/progress_bar_component.rb
550
569
  - app/components/polaris/radio_button_component.html.erb
@@ -553,8 +572,12 @@ files:
553
572
  - app/components/polaris/resource_item_component.rb
554
573
  - app/components/polaris/resource_list_component.html.erb
555
574
  - app/components/polaris/resource_list_component.rb
575
+ - app/components/polaris/scrollable_component.html.erb
576
+ - app/components/polaris/scrollable_component.rb
556
577
  - app/components/polaris/select_component.html.erb
557
578
  - app/components/polaris/select_component.rb
579
+ - app/components/polaris/setting_toggle_component.html.erb
580
+ - app/components/polaris/setting_toggle_component.rb
558
581
  - app/components/polaris/shopify_navigation_component.html.erb
559
582
  - app/components/polaris/shopify_navigation_component.rb
560
583
  - app/components/polaris/skeleton_body_text_component.html.erb
@@ -565,6 +588,10 @@ files:
565
588
  - app/components/polaris/stack_component.html.erb
566
589
  - app/components/polaris/stack_component.rb
567
590
  - app/components/polaris/subheading_component.rb
591
+ - app/components/polaris/tabs/tab_component.html.erb
592
+ - app/components/polaris/tabs/tab_component.rb
593
+ - app/components/polaris/tabs_component.html.erb
594
+ - app/components/polaris/tabs_component.rb
568
595
  - app/components/polaris/tag_component.html.erb
569
596
  - app/components/polaris/tag_component.rb
570
597
  - app/components/polaris/text_container_component.rb
@@ -610,7 +637,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
610
637
  - !ruby/object:Gem::Version
611
638
  version: '0'
612
639
  requirements: []
613
- rubygems_version: 3.2.22
640
+ rubygems_version: 3.2.30
614
641
  signing_key:
615
642
  specification_version: 4
616
643
  summary: ViewComponents for Polaris Design System