polaris_view_components 0.3.2 → 0.6.0

data/app/helpers/polaris/view_helper.rb

@@ -1,7 +1,9 @@
 module Polaris
   # Module to allow shorthand calls for Polaris components
   module ViewHelper
-    HELPERS = {
+    # standard:disable Layout/HashAlignment
+    POLARIS_HELPERS = {
+      action_list:              "Polaris::ActionListComponent",
       avatar:                   "Polaris::AvatarComponent",
       badge:                    "Polaris::BadgeComponent",
       banner:                   "Polaris::BannerComponent",
@@ -10,8 +12,11 @@ module Polaris
       callout_card:             "Polaris::CalloutCardComponent",
       caption:                  "Polaris::CaptionComponent",
       card:                     "Polaris::CardComponent",
+      card_section:             "Polaris::Card::SectionComponent",
       checkbox:                 "Polaris::CheckboxComponent",
+      check_box:                "Polaris::CheckboxComponent",
       choice_list:              "Polaris::ChoiceListComponent",
+      data_table:               "Polaris::DataTableComponent",
       description_list:         "Polaris::DescriptionListComponent",
       display_text:             "Polaris::DisplayTextComponent",
       dropzone:                 "Polaris::Dropzone::Component",
@@ -19,44 +24,59 @@ module Polaris
       exception_list:           "Polaris::ExceptionListComponent",
       footer_help:              "Polaris::FooterHelpComponent",
       form_layout:              "Polaris::FormLayoutComponent",
+      filters:                  "Polaris::FiltersComponent",
       heading:                  "Polaris::HeadingComponent",
       icon:                     "Polaris::IconComponent",
+      index_table:              "Polaris::IndexTableComponent",
       inline_error:             "Polaris::InlineErrorComponent",
       layout:                   "Polaris::LayoutComponent",
       link:                     "Polaris::LinkComponent",
       list:                     "Polaris::ListComponent",
+      modal:                    "Polaris::ModalComponent",
       page:                     "Polaris::PageComponent",
       page_actions:             "Polaris::PageActionsComponent",
       pagination:               "Polaris::PaginationComponent",
       progress_bar:             "Polaris::ProgressBarComponent",
+      popover:                  "Polaris::PopoverComponent",
       radio_button:             "Polaris::RadioButtonComponent",
       resource_list:            "Polaris::ResourceListComponent",
       resource_item:            "Polaris::ResourceItemComponent",
       select:                   "Polaris::SelectComponent",
+      setting_toggle:           "Polaris::SettingToggleComponent",
       shopify_navigation:       "Polaris::ShopifyNavigationComponent",
       stack:                    "Polaris::StackComponent",
       subheading:               "Polaris::SubheadingComponent",
+      scrollable:               "Polaris::ScrollableComponent",
       spinner:                  "Polaris::SpinnerComponent",
       skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
+      spacer:                   "Polaris::SpacerComponent",
+      tabs:                     "Polaris::TabsComponent",
       tag:                      "Polaris::TagComponent",
       text_container:           "Polaris::TextContainerComponent",
       text_field:               "Polaris::TextFieldComponent",
       text_style:               "Polaris::TextStyleComponent",
       thumbnail:                "Polaris::ThumbnailComponent",
-      visually_hidden:          "Polaris::VisuallyHiddenComponent",
+      visually_hidden:          "Polaris::VisuallyHiddenComponent"
     }.freeze
-
-    HELPERS.each do |name, component|
+    # standard:enable Layout/HashAlignment
+    POLARIS_HELPERS.each do |name, component|
       define_method "polaris_#{name}" do |*args, **kwargs, &block|
         render component.constantize.new(*args, **kwargs), &block
       end
     end
 
+    POLARIS_TEXT_STYLES = %i[subdued strong positive negative code].freeze
+    POLARIS_TEXT_STYLES.each do |name|
+      define_method "polaris_text_#{name}" do |**kwargs, &block|
+        polaris_text_style(variation: name, **kwargs, &block)
+      end
+    end
+
     def polaris_icon_source(name)
       path = ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
       file = File.read(path)
       doc = Nokogiri::HTML::DocumentFragment.parse(file)
-      svg = doc.at_css 'svg'
+      svg = doc.at_css "svg"
       svg[:class] = "Polaris-Icon__Svg"
       svg[:focusable] = false
       svg[:"aria-hidden"] = true
@@ -64,7 +84,7 @@ module Polaris
     end
 
     def polaris_body_styles
-      %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;)
+      %(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;)
     end
   end
 end

data/app/validators/type_validator.rb

@@ -3,11 +3,11 @@ class TypeValidator < ActiveModel::EachValidator
     required_type = options[:with]
 
     if value.is_a?(Array)
-      unless value.all? { |i| i.class ==  required_type}
+      unless value.all? { |i| i.instance_of?(required_type) }
         record.errors.add attribute, (options[:message] || "is not of class #{required_type}")
       end
     else
-      unless value.class == required_type
+      unless value.instance_of?(required_type)
         record.errors.add attribute, (options[:message] || "is not of class #{required_type}")
       end
     end

data/lib/generators/polaris_view_components/install_generator.rb

@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
-require 'rails/generators/active_record'
+require "rails/generators/active_record"
 
 module PolarisViewComponents
   class InstallGenerator < Rails::Generators::Base
-    source_root File.expand_path('templates', __dir__)
+    source_root File.expand_path("templates", __dir__)
 
     def add_npm_package
       say "Adding NPM package", :green
@@ -14,13 +14,13 @@ module PolarisViewComponents
     def add_to_stimulus_controller
       say "Adding import to to Stimulus controller", :green
       dir_path = "app/javascript/controllers"
-      empty_directory('app/javascript')
+      empty_directory("app/javascript")
       empty_directory(dir_path)
 
       file_path = "#{dir_path}/index.js"
 
       unless File.exist?(file_path)
-        copy_file 'stimulus_index.js', file_path
+        copy_file "stimulus_index.js", file_path
       end
 
       append_to_file file_path do
@@ -29,7 +29,7 @@ module PolarisViewComponents
     end
 
     def show_readme
-      readme 'README'
+      readme "README"
     end
   end
 end

data/lib/polaris/view_components/engine.rb

@@ -19,11 +19,16 @@ module Polaris
         end
       end
 
+      initializer "polaris_view_components.importmap", before: "importmap" do |app|
+        if app.config.respond_to?(:importmap) && app.config.importmap.has_key?(:cache_sweepers)
+          app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascripts")
+        end
+      end
+
       initializer "polaris_view_components.helpers" do
         ActiveSupport.on_load(:action_controller_base) do
           helper Polaris::ViewHelper
           helper Polaris::UrlHelper
-          helper Polaris::ActionHelper
           helper Polaris::ConditionalHelper
         end
       end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.3.2"
+    VERSION = "0.6.0"
   end
 end

data/lib/polaris_view_components.rb

@@ -1 +1 @@
-require 'polaris/view_components'
+require "polaris/view_components"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.6.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-06 00:00:00.000000000 Z
+date: 2021-11-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -448,14 +448,27 @@ files:
 - app/assets/icons/polaris/WholesaleMajor.svg
 - app/assets/icons/polaris/WifiMajor.svg
 - app/assets/javascripts/polaris_view_components.js
+- app/assets/javascripts/polaris_view_components/button_controller.js
 - app/assets/javascripts/polaris_view_components/index.js
+- app/assets/javascripts/polaris_view_components/modal_controller.js
+- app/assets/javascripts/polaris_view_components/polaris_controller.js
+- app/assets/javascripts/polaris_view_components/popover_controller.js
 - app/assets/javascripts/polaris_view_components/resource_item_controller.js
+- app/assets/javascripts/polaris_view_components/scrollable_controller.js
 - app/assets/javascripts/polaris_view_components/select_controller.js
 - app/assets/javascripts/polaris_view_components/text_field_controller.js
 - app/assets/stylesheets/polaris_view_components.css
 - app/assets/stylesheets/polaris_view_components.postcss.css
+- app/assets/stylesheets/polaris_view_components/custom.css
 - app/assets/stylesheets/polaris_view_components/shopify_navigation.css
+- app/assets/stylesheets/polaris_view_components/spacer_component.css
 - app/components/polaris/action.rb
+- app/components/polaris/action_list/item_component.html.erb
+- app/components/polaris/action_list/item_component.rb
+- app/components/polaris/action_list/section_component.html.erb
+- app/components/polaris/action_list/section_component.rb
+- app/components/polaris/action_list_component.html.erb
+- app/components/polaris/action_list_component.rb
 - app/components/polaris/application_component.rb
 - app/components/polaris/avatar_component.html.erb
 - app/components/polaris/avatar_component.rb
@@ -483,11 +496,14 @@ files:
 - app/components/polaris/checkbox_component.rb
 - app/components/polaris/choice_component.html.erb
 - app/components/polaris/choice_component.rb
-- app/components/polaris/choice_list/component.html.erb
-- app/components/polaris/choice_list/component.rb
 - app/components/polaris/choice_list_component.html.erb
 - app/components/polaris/choice_list_component.rb
 - app/components/polaris/component.rb
+- app/components/polaris/data_table/cell_component.html.erb
+- app/components/polaris/data_table/cell_component.rb
+- app/components/polaris/data_table/column_component.rb
+- app/components/polaris/data_table_component.html.erb
+- app/components/polaris/data_table_component.rb
 - app/components/polaris/description_list_component.html.erb
 - app/components/polaris/description_list_component.rb
 - app/components/polaris/display_text_component.rb
@@ -501,6 +517,8 @@ files:
 - app/components/polaris/exception_list/item_component.rb
 - app/components/polaris/exception_list_component.html.erb
 - app/components/polaris/exception_list_component.rb
+- app/components/polaris/filters_component.html.erb
+- app/components/polaris/filters_component.rb
 - app/components/polaris/footer_help_component.html.erb
 - app/components/polaris/footer_help_component.rb
 - app/components/polaris/form_layout/group_component.html.erb
@@ -513,6 +531,10 @@ files:
 - app/components/polaris/headless_button.rb
 - app/components/polaris/icon_component.html.erb
 - app/components/polaris/icon_component.rb
+- app/components/polaris/index_table/cell_component.rb
+- app/components/polaris/index_table/column_component.rb
+- app/components/polaris/index_table_component.html.erb
+- app/components/polaris/index_table_component.rb
 - app/components/polaris/inline_error_component.html.erb
 - app/components/polaris/inline_error_component.rb
 - app/components/polaris/label_component.html.erb
@@ -527,6 +549,9 @@ files:
 - app/components/polaris/link_component.rb
 - app/components/polaris/list_component.html.erb
 - app/components/polaris/list_component.rb
+- app/components/polaris/modal/section_component.rb
+- app/components/polaris/modal_component.html.erb
+- app/components/polaris/modal_component.rb
 - app/components/polaris/new_component.rb
 - app/components/polaris/page_actions_component.html.erb
 - app/components/polaris/page_actions_component.rb
@@ -534,24 +559,39 @@ files:
 - app/components/polaris/page_component.rb
 - app/components/polaris/pagination_component.html.erb
 - app/components/polaris/pagination_component.rb
+- app/components/polaris/popover/pane_component.html.erb
+- app/components/polaris/popover/pane_component.rb
+- app/components/polaris/popover/section_component.rb
+- app/components/polaris/popover_component.html.erb
+- app/components/polaris/popover_component.rb
 - app/components/polaris/progress_bar_component.html.erb
 - app/components/polaris/progress_bar_component.rb
 - app/components/polaris/radio_button_component.html.erb
 - app/components/polaris/radio_button_component.rb
 - app/components/polaris/resource_item_component.html.erb
 - app/components/polaris/resource_item_component.rb
+- app/components/polaris/resource_list_component.html.erb
 - app/components/polaris/resource_list_component.rb
+- app/components/polaris/scrollable_component.html.erb
+- app/components/polaris/scrollable_component.rb
 - app/components/polaris/select_component.html.erb
 - app/components/polaris/select_component.rb
+- app/components/polaris/setting_toggle_component.html.erb
+- app/components/polaris/setting_toggle_component.rb
 - app/components/polaris/shopify_navigation_component.html.erb
 - app/components/polaris/shopify_navigation_component.rb
 - app/components/polaris/skeleton_body_text_component.html.erb
 - app/components/polaris/skeleton_body_text_component.rb
+- app/components/polaris/spacer_component.rb
 - app/components/polaris/spinner_component.html.erb
 - app/components/polaris/spinner_component.rb
 - app/components/polaris/stack_component.html.erb
 - app/components/polaris/stack_component.rb
 - app/components/polaris/subheading_component.rb
+- app/components/polaris/tabs/tab_component.html.erb
+- app/components/polaris/tabs/tab_component.rb
+- app/components/polaris/tabs_component.html.erb
+- app/components/polaris/tabs_component.rb
 - app/components/polaris/tag_component.html.erb
 - app/components/polaris/tag_component.rb
 - app/components/polaris/text_container_component.rb
@@ -561,7 +601,6 @@ files:
 - app/components/polaris/thumbnail_component.html.erb
 - app/components/polaris/thumbnail_component.rb
 - app/components/polaris/visually_hidden_component.rb
-- app/helpers/polaris/action_helper.rb
 - app/helpers/polaris/class_name_helper.rb
 - app/helpers/polaris/conditional_helper.rb
 - app/helpers/polaris/fetch_or_fallback_helper.rb
@@ -598,7 +637,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.22
+rubygems_version: 3.2.30
 signing_key:
 specification_version: 4
 summary: ViewComponents for Polaris Design System

data/app/components/polaris/choice_list/component.html.erb

@@ -1,34 +0,0 @@
-<%= field_set_tag(nil, content_tag_options) do %>
-  <% if @title.present? %>
-    <%= content_tag("legend", class: "Polaris-ChoiceList__Title") do %>
-      <%= @title %>
-    <% end %>
-  <% end %>
-
-  <ul class="Polaris-ChoiceList__Choices">
-    <% choice_component = @allow_multiple ? Polaris::CheckboxComponent : Polaris::RadioButtonComponent %>
-
-    <% @choices.each do |choice| %>
-      <li>
-        <%= render choice_component.new(
-          form: @form,
-          attribute: @attribute,
-          name: final_name,
-          value: choice[:value],
-          label: choice[:label],
-          disabled: choice[:disabled] || @disabled,
-          checked: choice_is_selected?(choice),
-          help_text: choice[:help_text],
-          children_content: choice[:children_content],
-          input_attrs: @input_attrs,
-        ) %>
-      </li>
-    <% end %>
-  </ul>
-
-  <% if @error.present? %>
-    <div class="Polaris-ChoiceList__ChoiceError">
-      <%= polaris_inline_error { @error } %>
-    </div>
-  <% end %>
-<% end %>

data/app/components/polaris/choice_list/component.rb

@@ -1,65 +0,0 @@
-# frozen_string_literal: true
-
-module Polaris
-  module ChoiceList
-    class Component < Polaris::Component
-      def initialize(
-        choices:,
-        form: nil,
-        attribute: nil,
-        name: nil,
-        title: '',
-        title_hidden: false,
-        selected: [],
-        allow_multiple: false,
-        error: '',
-        disabled: false,
-        input_attrs: {},
-        **args
-      )
-        super
-
-        @choices = choices
-        @form = form
-        @attribute = attribute
-
-        @name = name
-        @title = title
-        @title_hidden = title_hidden
-        @selected = selected
-        @allow_multiple = allow_multiple
-        @error = error
-        @disabled = disabled
-        @input_attrs = input_attrs
-      end
-
-      def final_name
-        return nil if @name.nil?
-
-        @allow_multiple ? "#{@name}[]" : @name
-      end
-
-      def choice_is_selected?(choice)
-        @selected.include? choice[:value]
-      end
-
-      private
-
-        def classes
-          classes = ['Polaris-ChoiceList']
-
-          classes << 'Polaris-ChoiceList--titleHidden' if @title_hidden
-
-          classes
-        end
-
-        def additional_aria
-          super
-
-          {
-            invalid: @error.present?
-          }
-        end
-    end
-  end
-end

data/app/helpers/polaris/action_helper.rb

@@ -1,14 +0,0 @@
-module Polaris
-  module ActionHelper
-    def render_plain_action(action)
-      case action
-        when Hash
-          action = action(**action)
-      end
-
-      render Polaris::ButtonComponent.new(**action.to_h.except(:content), plain: true) do
-        action.content
-      end
-    end
-  end
-end