polaris_view_components 0.13.5 → 1.0.0

data/app/components/polaris/box_component.rb

@@ -0,0 +1,187 @@
+module Polaris
+  class BoxComponent < Polaris::Component
+    AS_DEFAULT = :div
+    AS_OPTIONS = %i[div span section legend ul li]
+
+    LINE_STYLES = %i[solid dashed]
+    OVERFLOW_OPTIONS = %i[hidden scroll]
+    POSITION_OPTIONS = %i[relative absolute fixed sticky]
+    ROLE_OPTIONS = %i[status presentation menu listbox combobox]
+
+    def initialize(
+      as: AS_DEFAULT,
+      background: nil,
+      border_color: "transparent",
+      border_style: nil,
+      border_radius: nil,
+      border_radius_end_start: nil,
+      border_radius_end_end: nil,
+      border_radius_start_start: nil,
+      border_radius_start_end: nil,
+      border_width: nil,
+      border_block_start_width: nil,
+      border_block_end_width: nil,
+      border_inline_start_width: nil,
+      border_inline_end_width: nil,
+      color: nil,
+      min_height: nil,
+      min_width: nil,
+      max_width: nil,
+      overflow_x: nil,
+      overflow_y: nil,
+      padding: nil,
+      padding_block_start: nil,
+      padding_block_end: nil,
+      padding_inline_start: nil,
+      padding_inline_end: nil,
+      role: nil,
+      shadow: nil,
+      width: nil,
+      position: nil,
+      inset_block_start: nil,
+      inset_block_end: nil,
+      inset_inline_start: nil,
+      inset_inline_end: nil,
+      opacity: nil,
+      outline_color: nil,
+      outline_style: nil,
+      outline_width: nil,
+      print_hidden: false,
+      visually_hidden: false,
+      z_index: nil,
+      **system_arguments
+    )
+      @system_arguments = system_arguments.tap do |args|
+        args[:tag] = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
+        args[:role] = role_value(role)
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-Box",
+          "Polaris-Box--visuallyHidden": visually_hidden,
+          "Polaris-Box--printHidden": print_hidden,
+          "Polaris-Box--listReset": as == :ul
+        )
+        args[:style] = styles_list(
+          args[:style],
+          "--pc-box-color": color_value(color),
+          "--pc-box-background": background_value(background),
+          "--pc-box-border-color": (border_color == "transparent") ? "transparent" : border_color_value(border_color),
+          "--pc-box-border-style": style_value(border_style, border_color, border_width, border_block_start_width, border_block_end_width, border_inline_start_width, border_inline_end_width),
+          "--pc-box-border-radius": border_radius_value(border_radius),
+          "--pc-box-border-radius-end-start": border_radius_value(border_radius_end_start),
+          "--pc-box-border-radius-end-end": border_radius_value(border_radius_end_end),
+          "--pc-box-border-radius-start-start": border_radius_value(border_radius_start_start),
+          "--pc-box-border-radius-start-end": border_radius_value(border_radius_start_end),
+          "--pc-box-border-width": border_width_value(border_width),
+          "--pc-box-border-block-start-width": border_width_value(border_block_start_width),
+          "--pc-box-border-block-end-width": border_width_value(border_block_end_width),
+          "--pc-box-border-inline-start-width": border_width_value(border_inline_start_width),
+          "--pc-box-border-inline-end-width": border_width_value(border_inline_end_width),
+          "--pc-box-min-height": min_height,
+          "--pc-box-min-width": min_width,
+          "--pc-box-max-width": max_width,
+          "--pc-box-outline-color": border_color_value(outline_color),
+          "--pc-box-outline-style": style_value(outline_style, outline_color, outline_width),
+          "--pc-box-outline-width": border_width_value(outline_width),
+          "--pc-box-overflow-x": overflow_value(overflow_x),
+          "--pc-box-overflow-y": overflow_value(overflow_y),
+          **padding_value("block-end", padding_block_end || padding),
+          **padding_value("block-start", padding_block_start || padding),
+          **padding_value("inline-end", padding_inline_end || padding),
+          **padding_value("inline-start", padding_inline_start || padding),
+          "--pc-box-shadow": shadow_value(shadow),
+          "--pc-box-width": width,
+          position: position_value(position),
+          "--pc-box-inset-block-start": space_value(inset_block_start),
+          "--pc-box-inset-block-end": space_value(inset_block_end),
+          "--pc-box-inset-inline-start": space_value(inset_inline_start),
+          "--pc-box-inset-inline-end": space_value(inset_inline_end),
+          "z-index": z_index,
+          opacity: opacity
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    private
+
+    def role_value(role)
+      return unless role
+      fetch_or_fallback(ROLE_OPTIONS, role)
+    end
+
+    def color_value(color)
+      return unless color
+      "var(--p-color-#{fetch_or_fallback(Tokens::Color::TEXT_ALIAS, color)})"
+    end
+
+    def background_value(background)
+      return unless background
+      "var(--p-color-#{fetch_or_fallback(Tokens::Color::BACKGROUND_ALIAS, background)})"
+    end
+
+    def border_color_value(border_color)
+      return unless border_color
+      "var(--p-color-#{fetch_or_fallback(Tokens::Color::BORDER_ALIAS, border_color)})"
+    end
+
+    def style_value(style, *args)
+      if style
+        fetch_or_fallback(LINE_STYLES, style)
+      else
+        args.compact.any? ? "solid" : nil
+      end
+    end
+
+    def border_radius_value(border_radius)
+      return unless border_radius
+      "var(--p-border-radius-#{fetch_or_fallback(Tokens::Border::RADIUS_SCALE, border_radius)})"
+    end
+
+    def border_width_value(border_width)
+      return unless border_width
+      "var(--p-border-width-#{fetch_or_fallback(Tokens::Border::WIDTH_SCALE, border_width)})"
+    end
+
+    def overflow_value(overflow)
+      return unless overflow
+      fetch_or_fallback(OVERFLOW_OPTIONS, overflow)
+    end
+
+    def shadow_value(shadow)
+      return unless shadow
+      "var(--p-shadow-#{fetch_or_fallback(Tokens::Shadow::ALIAS, shadow)})"
+    end
+
+    def position_value(position)
+      return unless position
+      fetch_or_fallback(POSITION_OPTIONS, position)
+    end
+
+    def space_value(space)
+      return unless space
+      "var(--p-space-#{fetch_or_fallback(Tokens::Spacing::SCALE, space)})"
+    end
+
+    def padding_value(property, pagging)
+      return {} unless pagging
+
+      value = fetch_or_fallback_nested(
+        Tokens::Spacing::SCREEN_SIZES,
+        Tokens::Spacing::SCALE,
+        pagging
+      )
+
+      if value.is_a?(Hash)
+        value.each_with_object({}) do |(key, value), hash|
+          hash["--pc-box-padding-#{property}-#{key}"] = "var(--p-space-#{value})"
+        end
+      else
+        {"--pc-box-padding-#{property}-xs": "var(--p-space-#{value})"}
+      end
+    end
+  end
+end

data/app/components/polaris/button_group_component.rb

@@ -28,6 +28,7 @@ module Polaris
       full_width: false,
       segmented: false,
       spacing: SPACING_DEFAULT,
+      nowrap: false,
       **system_arguments
     )
       @counter = 0
@@ -47,7 +48,8 @@ module Polaris
         "Polaris-ButtonGroup",
         SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
         "Polaris-ButtonGroup--fullWidth": full_width,
-        "Polaris-ButtonGroup--segmented": segmented
+        "Polaris-ButtonGroup--segmented": segmented,
+        "Polaris-ButtonGroup--noWrap": nowrap
       )
     end
 

data/app/components/polaris/callout_card_component.html.erb

@@ -6,7 +6,7 @@
       </div>
     <% end %>
 
-    <div class="Polaris-Card__Section">
+    <div class="Polaris-LegacyCard__Section">
       <div class="Polaris-CalloutCard">
         <div class="Polaris-CalloutCard__Content">
           <% if @title.present? %>
@@ -23,10 +23,10 @@
             <div class="Polaris-CalloutCard__Buttons">
               <% if primary_action.present? && secondary_action.present? %>
                 <%= polaris_button_group do |group| %>
-                  <% group.item do %>
+                  <% group.with_item do %>
                     <%= primary_action %>
                   <% end %>
-                  <% group.item do %>
+                  <% group.with_item do %>
                     <%= secondary_action %>
                   <% end %>
                 <% end %>

data/app/components/polaris/callout_card_component.rb

@@ -8,7 +8,7 @@ module Polaris
     end
     renders_one :dismiss_button, ->(**system_arguments) do
       render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
-        button.icon(name: "CancelSmallMinor")
+        button.with_icon(name: "CancelSmallMinor")
       end
     end
 
@@ -24,7 +24,7 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Card"
+        "Polaris-LegacyCard"
       )
     end
 

data/app/components/polaris/caption_component.rb

@@ -4,15 +4,10 @@ module Polaris
   class CaptionComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "p"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Caption"
-      )
     end
 
     def call
-      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      render(Polaris::TextComponent.new(as: :p, variant: :bodySm, **@system_arguments)) { content }
     end
   end
 end

data/app/components/polaris/card/header_component.html.erb

@@ -3,22 +3,22 @@
     <%= polaris_heading { @title } %>
   <% else %>
     <%= polaris_stack(alignment: :trailing) do |stack| %>
-      <% stack.item(fill: true) do %>
+      <% stack.with_item(fill: true) do %>
         <%= polaris_heading { @title } %>
       <% end %>
 
       <% if @actions.present? %>
-        <% stack.item do %>
+        <% stack.with_item do %>
           <%= polaris_button_group do |group| %>
             <% @actions.each do |action| %>
-              <% group.button(**action) %>
+              <% group.with_button(**action) %>
             <% end %>
           <% end %>
         <% end %>
       <% end %>
 
       <% if content.present? %>
-        <% stack.item do %>
+        <% stack.with_item do %>
           <%= content %>
         <% end %>
       <% end %>

data/app/components/polaris/card/header_component.rb

@@ -8,7 +8,7 @@ class Polaris::Card::HeaderComponent < Polaris::Component
     @system_arguments[:tag] = :div
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
-      "Polaris-Card__Header"
+      "Polaris-LegacyCard__Header"
     )
 
     @title = title

data/app/components/polaris/card/section_component.html.erb

@@ -1,22 +1,22 @@
 <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
   <% if @title.present? && @title.is_a?(String) %>
-    <div class="Polaris-Card__SectionHeader">
+    <div class="Polaris-LegacyCard__SectionHeader">
       <% if @actions.present? %>
         <%= polaris_stack(alignment: :trailing) do |stack| %>
-          <% stack.item(fill: true) do %>
-            <%= polaris_subheading { @title } %>
+          <% stack.with_item(fill: true) do %>
+            <%= polaris_text(variant: :headingSm, as: :h3) { @title } %>
           <% end %>
 
-          <% stack.item do %>
+          <% stack.with_item do %>
             <%= polaris_button_group do |group| %>
               <% @actions.each do |action| %>
-                <% group.button(**action) %>
+                <% group.with_button(**action) %>
               <% end %>
             <% end %>
           <% end %>
         <% end %>
       <% else %>
-        <%= polaris_subheading { @title } %>
+        <%= polaris_text(variant: :headingSm, as: :h3) { @title } %>
       <% end %>
     </div>
   <% end %>

data/app/components/polaris/card/section_component.rb

@@ -16,12 +16,12 @@ class Polaris::Card::SectionComponent < Polaris::Component
     @system_arguments[:tag] = :div
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
-      "Polaris-Card__Section": !unstyled,
-      "Polaris-Card__Section--flush": flush,
-      "Polaris-Card__Section--subdued": subdued,
-      "Polaris-Card__Section--fullWidth": full_width,
-      "Polaris-Card__Section--borderTop": border_top,
-      "Polaris-Card__Section--borderBottom": border_bottom
+      "Polaris-LegacyCard__Section": !unstyled,
+      "Polaris-LegacyCard__Section--flush": flush,
+      "Polaris-LegacyCard__Section--subdued": subdued,
+      "Polaris-LegacyCard__Section--fullWidth": full_width,
+      "Polaris-LegacyCard__Section--borderTop": border_top,
+      "Polaris-LegacyCard__Section--borderBottom": border_bottom
     )
 
     @title = title
@@ -34,7 +34,7 @@ class Polaris::Card::SectionComponent < Polaris::Component
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Card__Subsection"
+        "Polaris-LegacyCard__Subsection"
       )
     end
 

data/app/components/polaris/card_component.html.erb

@@ -32,25 +32,25 @@
       <%= polaris_button_group do |group| %>
         <% if @footer_action_alignment == :right %>
           <% secondary_footer_actions.each do |secondary_footer_action| %>
-            <% group.item do %>
+            <% group.with_item do %>
               <%= secondary_footer_action %>
             <% end %>
           <% end %>
 
           <% if primary_footer_action %>
-            <% group.item do %>
+            <% group.with_item do %>
               <%= primary_footer_action %>
             <% end %>
           <% end %>
         <% else %>
           <% if primary_footer_action %>
-            <% group.item do %>
+            <% group.with_item do %>
               <%= primary_footer_action %>
             <% end %>
           <% end %>
 
           <% secondary_footer_actions.each do |secondary_footer_action| %>
-            <% group.item do %>
+            <% group.with_item do %>
               <%= secondary_footer_action %>
             <% end %>
           <% end %>

data/app/components/polaris/card_component.rb

@@ -5,7 +5,7 @@ module Polaris
     FOOTER_ACTION_ALIGNMENT_DEFAULT = :right
     FOOTER_ACTION_ALIGNMENT_MAPPINGS = {
       FOOTER_ACTION_ALIGNMENT_DEFAULT => "",
-      :left => "Polaris-Card__LeftJustified"
+      :left => "Polaris-LegacyCard__LeftJustified"
     }
     FOOTER_ACTION_ALIGNMENT_OPTIONS = FOOTER_ACTION_ALIGNMENT_MAPPINGS.keys
 
@@ -34,8 +34,8 @@ module Polaris
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Card",
-        "Polaris-Card--subdued": subdued
+        "Polaris-LegacyCard",
+        "Polaris-LegacyCard--subdued": subdued
       )
     end
 
@@ -45,7 +45,7 @@ module Polaris
 
     def footer_classes
       class_names(
-        "Polaris-Card__Footer",
+        "Polaris-LegacyCard__Footer",
         FOOTER_ACTION_ALIGNMENT_MAPPINGS[fetch_or_fallback(FOOTER_ACTION_ALIGNMENT_OPTIONS, @footer_action_alignment, FOOTER_ACTION_ALIGNMENT_DEFAULT)]
       )
     end

data/app/components/polaris/choice_component.html.erb

@@ -21,7 +21,9 @@
     <div class="Polaris-Choice__Descriptions">
       <% if @help_text.present? %>
         <div class="Polaris-Choice__HelpText">
-          <%= @help_text %>
+          <%= polaris_text(as: :span, color: :subdued) do %>
+            <%= @help_text %>
+          <% end %>
         </div>
       <% end %>
 

data/app/components/polaris/choice_list_component.html.erb

@@ -1,19 +1,28 @@
-<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
-  <legend class="Polaris-ChoiceList__Title">
-    <%= @title %>
-  </legend>
+<%= polaris_vertical_stack(**@system_arguments) do %>
+  <% if @title.present? %>
+    <%= polaris_box(
+      as: :legend,
+      padding_block_end: {xs: "5", md: "1"},
+      visually_hidden: @title_hidden
+    ) do %>
+      <%= @title %>
+    <% end %>
+  <% end %>
 
-  <ul class="Polaris-ChoiceList__Choices">
+  <%= polaris_vertical_stack(as: :ul, gap: {xs: "4", md: "0"}) do %>
     <% items.each do |item| %>
       <li>
         <%= item %>
       </li>
     <% end %>
-  </ul>
+  <% end %>
 
   <% if @error.present? %>
-    <div class="Polaris-ChoiceList__ChoiceError">
+    <%= polaris_box(
+      padding_block_start: {xs: "0", md: "1"},
+      padding_block_end: "2"
+    ) do %>
       <%= polaris_inline_error { @error } %>
-    </div>
+    <% end %>
   <% end %>
 <% end %>

data/app/components/polaris/choice_list_component.rb

@@ -45,12 +45,8 @@ module Polaris
       @disabled = disabled
 
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "fieldset"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-ChoiceList",
-        "Polaris-ChoiceList--titleHidden": title_hidden
-      )
+      @system_arguments[:as] = :fieldset
+      @system_arguments[:gap] = {xs: "4", md: "0"}
     end
 
     def items

data/app/components/polaris/component.rb

@@ -5,6 +5,7 @@ module Polaris
     include ClassNameHelper
     include FetchOrFallbackHelper
     include OptionHelper
+    include StylesListHelper
     include ViewHelper
   end
 end

data/app/components/polaris/data_table/cell_component.rb

@@ -17,6 +17,7 @@ class Polaris::DataTable::CellComponent < Polaris::Component
     total_footer: false,
     sorted: false,
     sort_url: nil,
+    hoverable: true,
     **system_arguments
   )
     @vertical_alignment = vertical_alignment
@@ -27,6 +28,7 @@ class Polaris::DataTable::CellComponent < Polaris::Component
     @total_footer = total_footer
     @sorted = sorted
     @sort_url = sort_url
+    @hoverable = hoverable
     @system_arguments = system_arguments
   end
 

data/app/components/polaris/data_table_component.html.erb

@@ -1,81 +1,83 @@
-<%= render Polaris::BaseComponent.new(**system_arguments) do %>
-  <div class="Polaris-DataTable__ScrollContainer">
-    <table class="Polaris-DataTable__Table">
-      <thead>
-        <tr>
-          <% columns.each_with_index do |column, index| %>
-            <%= render_cell(
-              first: index.zero?,
-              numeric: column.numeric,
-              tag: "th",
-              scope: "col",
-              header: true,
-              sort_url: column.sort_url,
-              sorted: column.sorted,
-              **column.system_arguments
-            ) do %>
-              <%= column.title&.html_safe %>
-            <% end %>
-          <% end %>
-        </tr>
-        <% if @totals_in_header %>
+<%= render Polaris::BaseComponent.new(**wrapper_arguments) do %>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <div class="Polaris-DataTable__ScrollContainer">
+      <table class="Polaris-DataTable__Table">
+        <thead>
           <tr>
             <% columns.each_with_index do |column, index| %>
               <%= render_cell(
                 first: index.zero?,
                 numeric: column.numeric,
-                tag: (index.zero? ? "th" : "td"),
-                scope: ("row" if index.zero?),
-                total: true,
+                tag: "th",
+                scope: "col",
+                header: true,
+                sort_url: column.sort_url,
+                sorted: column.sorted,
                 **column.system_arguments
               ) do %>
-                <%= column.total %>
+                <%= column.title&.html_safe %>
               <% end %>
             <% end %>
           </tr>
-        <% end %>
-      </thead>
-      <tbody>
-        <% @data.each do |row| %>
-          <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
-            <% columns.each_with_index do |column, index| %>
-              <%= render_cell(
-                first: index.zero?,
-                numeric: column.numeric,
-                tag: (index.zero? ? "th" : "td"),
-                scope: ("row" if index.zero?),
-                **column.system_arguments
-              ) do %>
-                <%= column.call(row) %>
+          <% if @totals_in_header %>
+            <tr>
+              <% columns.each_with_index do |column, index| %>
+                <%= render_cell(
+                  first: index.zero?,
+                  numeric: column.numeric,
+                  tag: (index.zero? ? "th" : "td"),
+                  scope: ("row" if index.zero?),
+                  total: true,
+                  **column.system_arguments
+                ) do %>
+                  <%= column.total %>
+                <% end %>
               <% end %>
-            <% end %>
+            </tr>
           <% end %>
-        <% end %>
-      </tbody>
-      <% if @totals_in_footer %>
-        <tfoot>
-          <tr>
-            <% columns.each_with_index do |column, index| %>
-              <%= render_cell(
-                first: index.zero?,
-                numeric: column.numeric,
-                tag: (index.zero? ? "th" : "td"),
-                scope: ("row" if index.zero?),
-                total: true,
-                total_footer: true,
-                **column.system_arguments
-              ) do %>
-                <%= column.total %>
+        </thead>
+        <tbody>
+          <% @data.each do |row| %>
+            <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
+              <% columns.each_with_index do |column, index| %>
+                <%= render_cell(
+                  first: index.zero?,
+                  numeric: column.numeric,
+                  tag: (index.zero? ? "th" : "td"),
+                  scope: ("row" if index.zero?),
+                  **column.system_arguments
+                ) do %>
+                  <%= column.call(row) %>
+                <% end %>
               <% end %>
             <% end %>
-          </tr>
-        </tfoot>
-      <% end %>
-    </table>
-  </div>
-  <% if footer.present? %>
-    <div class="Polaris-DataTable__Footer">
-      <%= footer %>
+          <% end %>
+        </tbody>
+        <% if @totals_in_footer %>
+          <tfoot>
+            <tr>
+              <% columns.each_with_index do |column, index| %>
+                <%= render_cell(
+                  first: index.zero?,
+                  numeric: column.numeric,
+                  tag: (index.zero? ? "th" : "td"),
+                  scope: ("row" if index.zero?),
+                  total: true,
+                  total_footer: true,
+                  **column.system_arguments
+                ) do %>
+                  <%= column.total %>
+                <% end %>
+              <% end %>
+            </tr>
+          </tfoot>
+        <% end %>
+      </table>
     </div>
+    <% if footer.present? %>
+      <div class="Polaris-DataTable__Footer">
+        <%= footer %>
+      </div>
+    <% end %>
   <% end %>
 <% end %>