polaris_view_helpers 0.0.18 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e2ded9df070bfc403561a8447f541b2ae6165e1df9ddbe455b439c1b3f33450
-  data.tar.gz: c21ca4f76675fea37f74baf25bde530635fe67d1ebd5bbc10238a8c453c99d69
+  metadata.gz: 640980398f1c61221e689a9c8dd6334e79226b78085dc843c3dee03527a518bc
+  data.tar.gz: b4febfb2202d9d646a8fd2ead4550f3ba6439d1129ba96a8bcee0dad422f4fc7
 SHA512:
-  metadata.gz: 44319b09f1224e0eac124285d2cf0f39006f5b1f5cdb244f9f2699397c77d43ac2d5983c5fff80566b619af0a1a083c0d60e9853ef520958e0daaabe352efdbe
-  data.tar.gz: 0b792d6bb9bd29524a15af9b3c1f57d061971c391cde3319b60dd12622e9a97fe2b005ee5e76e4141f28233cb9374f4a28a53913bb4106566fb7a4adc76ddfbf
+  metadata.gz: 66874e5c41929e51c5ebffffb004bf1c652543a7b5c4bb666ebec0bc0d871898e112e849a300da1ba1e7807f4f1562b9250ec5a6708929d493d4b783f46d3d6d
+  data.tar.gz: 955242076df39b87c91b9e0bf27c37a7a25d79af5d3afd08995848b8b47376c156208096adac77fb1297785d73a8204434d0ff269fc7db47f5ac88bd687f9253

data/app/views/polaris/_badge.html.erb

@@ -1 +1 @@
-<span class="Polaris-Badge"><%= content.try(:html_safe) %></span>
+<span class="Polaris-Badge <%= extra_class %>"><%= content.try(:html_safe) %></span>

data/app/views/polaris/_banner.html.erb

@@ -1,4 +1,4 @@
-<div class="Polaris-Banner Polaris-Banner--status<%= options[:status].titleize %>" tabindex="0" role="banner <%= options[:status] %>" aria-labelledby="Banner2Heading" aria-describedby="Banner2Content">
+<div class="Polaris-Banner Polaris-Banner--withinPage Polaris-Banner--status<%= options[:status].titleize %>" tabindex="0" role="banner <%= options[:status] %>" aria-labelledby="Banner2Heading" aria-describedby="Banner2Content">
   <div class="Polaris-Banner__Ribbon">
     <%= render "polaris/banner_icons/#{options[:status]}" %>
   </div>

data/app/views/polaris/_choice_list.html.erb

@@ -1,28 +1,25 @@
-<% listname = polaris_random_input_name %>
-<fieldset class="Polaris-ChoiceList" id="<%= listname %>" aria-invalid="false">
-  <legend class="Polaris-ChoiceList__Title"><%= title %></legend>
-  <ul class="Polaris-ChoiceList__Choices">
-    <% choices.each do |choice| %>
-      <% inputname = polaris_random_input_name %>
-      <li>
-        <label class="Polaris-Choice" for="<%= inputname %>">
-          <span class="Polaris-Choice__Control">
-            <span class="Polaris-RadioButton">
-              <input
-                id="<%= inputname %>"
-                name="<%= listname %>"
-                type="radio"
-                class="Polaris-RadioButton__Input"
-                value="<%= choice[:value] %>"
-                <%= selected == choice[:value] ? "checked" : "" %>
-              >
-              <span class="Polaris-RadioButton__Backdrop"></span>
-              <span class="Polaris-RadioButton__Icon"></span>
-            </span>
-          </span>
-          <span class="Polaris-Choice__Label"><%= choice[:label] %></span>
-        </label>
-      </li>
-    <% end %>
-  </ul>
-</fieldset>
+<% listname = attribute %>
+<div class="Polaris-FormLayout__Item">
+  <div class="">
+    <fieldset class="Polaris-ChoiceList" id="<%= listname %>" aria-invalid="false">
+      <legend class="Polaris-ChoiceList__Title"><%= title %></legend>
+      <ul class="Polaris-ChoiceList__Choices">
+        <% choices.each do |choice| %>
+          <% inputname = polaris_random_input_name %>
+          <li>
+            <label class="Polaris-Choice" for="<%= inputname %>">
+              <span class="Polaris-Choice__Control">
+                <span class="Polaris-RadioButton">
+                  <%= form.radio_button attribute, choice[:value], checked: selected == choice[:value], class: 'Polaris-RadioButton__Input', id: inputname %>
+                  <span class="Polaris-RadioButton__Backdrop"></span>
+                  <span class="Polaris-RadioButton__Icon"></span>
+                </span>
+              </span>
+              <span class="Polaris-Choice__Label"><%= choice[:label] %></span>
+            </label>
+          </li>
+        <% end %>
+      </ul>
+    </fieldset>
+  </div>
+</div>

data/app/views/polaris/_resource_list.html.erb

@@ -1,6 +1,8 @@
 <div class="Polaris-Card">
-  <ul class="Polaris-ResourceList">
-    <%= capture(&block) %>
-  </ul>
+  <div class="Polaris-ResourceList__ResourceListWrapper">
+    <ul class="Polaris-ResourceList">
+      <%= capture(&block) %>
+    </ul>
+  </div>
 </div>
 

data/app/views/polaris/_resource_list_item.html.erb

@@ -1,28 +1,31 @@
-<li class="Polaris-ResourceList__ItemWrapper">
-  <div class="Polaris-ResourceList__Item Polaris-ResourceList__Item--link <%= extra_classes %>">
-    <a aria-describedby="ResourceListItem4" class="Polaris-ResourceList__Link" href="<%= attributes[:url] %>" data-polaris-unstyled="true"></a>
-    <div class="Polaris-ResourceList__Container" id="ResourceListItem4">
-      <% if attributes[:media].present? %>
-        <div class="Polaris-ResourceList__Media">
-          <%= attributes[:media] %>
+<li class="Polaris-ResourceItem__ListItem <%#= extra_classes %>">
+  <div class="Polaris-ResourceItem__ItemWrapper">
+    <div class="Polaris-ResourceItem" data-href="<%= attributes[:url] %>">
+      <a aria-describedby="" aria-label="<%= attributes[:attribute_one] %>" class="Polaris-ResourceItem__Link" tabindex="" id="" href="<%= attributes[:url] %>" data-polaris-unstyled="true"></a>
+      <div class="Polaris-ResourceItem__Container" id="">
+        <div class="Polaris-ResourceItem__Owned">
+          <% if attributes[:media].present? %>
+            <div class="Polaris-ResourceItem__Media">
+              <%= attributes[:media] %>
+            </div>
+          <% end %>
         </div>
-      <% end %>
-      <div class="Polaris-ResourceList__Content">
-        <div class="Polaris-ResourceList__Attributes">
-          <p class="Polaris-ResourceList__AttributeOne"><%= attributes[:attribute_one] %></p>
-          <div class="Polaris-ResourceList__AttributeTwo"><%= attributes[:attribute_two] %></div>
-          <div class="Polaris-ResourceList__Badge">
-            <% attributes[:badges].each do |badge| %>
-              <%= badge %>
-            <% end %>
-          </div>
-          <div class="Polaris-ResourceList__AttributeThree">
-            <span class="Polaris-TextStyle--variationSubdued">
-              <%= attributes[:attribute_three] %>
-            </span>
-          </div>
+        <div class="Polaris-ResourceItem__Content">
+          <h3><span class="Polaris-TextStyle--variationStrong"><%= attributes[:attribute_one] %></span></h3>
+
+          <% if attributes[:attribute_two].present? %>
+            <div><%= attributes[:attribute_two] %></div>
+          <% end %>
+
+          <% if attributes[:attribute_three].present? %>
+            <div><%= attributes[:attribute_three] %></div>
+          <% end %>
+          <% attributes[:badges].each do |badge| %>
+            <%= badge %>
+          <% end %>
         </div>
       </div>
     </div>
   </div>
 </li>
+

data/app/views/polaris/_tabs.html.erb

@@ -1,3 +1,5 @@
-<ul role="tablist" class="Polaris-Tabs">
-  <%= capture(&block) %>
-</ul>
+<div class="Polaris-Tabs__Wrapper">
+  <ul role="tablist" class="Polaris-Tabs">
+    <%= capture(&block) %>
+  </ul>
+</div>

data/app/views/polaris/_thumbnail.html.erb

@@ -2,8 +2,10 @@
   <% if attributes[:src].present? %>
     <img src="<%= attributes[:src] %>" alt="<%= attributes[:alt] %>" class="Polaris-Thumbnail__Image">
   <% else %>
-    <svg class="next-icon next-icon--size-24 next-icon--no-nudge">
-      <use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#next-photos"></use>
-    </svg>
+    <span class="Polaris-Icon" aria-label="Small document">
+      <svg class="Polaris-Icon__Svg" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm6-5H5.5A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V6l-4-4z"></path>
+      </svg>
+    </span>
   <% end %>
 </span>

data/lib/polaris_view_helpers/helper.rb

@@ -1,18 +1,20 @@
 module PolarisViewHelpers
   module Helper
 
-    def polaris_css version = '1.6.0'
-      %[<link rel="stylesheet" href="https://sdks.shopifycdn.com/polaris/#{version}/polaris.min.css" />].html_safe
+    def polaris_css version = '5.12.0'
+      %[<link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@#{version}/dist/styles.css" />].html_safe
     end
 
     def polaris_random_input_name
       "pri-#{SecureRandom.hex(8)}"
     end
 
-    def polaris_choice_list(title:, selected:, choices:)
+    def polaris_choice_list(form:, attribute:, title:, selected:, choices:)
       render(
         partial: 'polaris/choice_list',
         locals: {
+          form: form,
+          attribute: attribute,
           title: title,
           selected: selected,
           choices: choices

data/lib/polaris_view_helpers/version.rb

@@ -1,3 +1,3 @@
 module PolarisViewHelpers
-  VERSION = "0.0.18"
+  VERSION = "1.0.0"
 end

data/test/dummy/app/views/home/_annotated_section.html.erb

@@ -1,8 +1,8 @@
 <%= form_with url: root_url do |form| %>
   <%= polaris_layout do %>
     <%= polaris_annotated_section( heading: "Some heading", description: "A description of this section") do %>
-      <%= polaris_form_layout_item_select form, :timezone do %>
-        <%= form.time_zone_select :timezone, ActiveSupport::TimeZone.us_zones, {include_blank: true}, id: :setting_timezone, class: "Polaris-Select__Input" %>
+      <%= polaris_form_layout_item form, :timezone do %>
+        <%= form.time_zone_select :timezone, ActiveSupport::TimeZone.us_zones, {include_blank: true}, id: :setting_timezone %>
       <% end %>
     <% end %>
   <% end %>

data/test/dummy/app/views/home/_annotated_section_input.html.erb

@@ -0,0 +1,19 @@
+<%= form_with url: root_url do |form| %>
+  <%= polaris_layout do %>
+    <% goal_input = capture do %>
+      <label>
+        <%= form.radio_button(:goal_mode, "currency") %>
+        Option 1
+      </label>
+      <label>
+        <%= form.radio_button(:goal_mode, "units") %>
+        Option 2
+      </label>
+    <% end %>
+
+    <%= polaris_annotated_section_input form, :goal_mode, goal_input do %>
+      <%= polaris_heading "Random inputs in an annotated section" %>
+    <% end %>
+
+  <% end %>
+<% end %>

data/test/dummy/app/views/home/_annotated_section_text_field.html.erb

@@ -0,0 +1,8 @@
+<%= form_with url: root_url do |form| %>
+  <%= polaris_layout do %>
+    <%= polaris_annotated_section_text_field form, :a_text_field_input, {}, :number_field do %>
+      <%= polaris_heading "A heading" %>
+      <p>A description of this text field</p>
+    <% end %>
+  <% end %>
+<% end %>

data/test/dummy/app/views/home/_button_tag.html.erb

@@ -0,0 +1,3 @@
+
+<%= polaris_button_tag("Save Changes", type: "submit", modifiers: ['primary']) %>
+<%= polaris_button_tag("Reset", type: "reset") %>

data/test/dummy/app/views/home/_choice_list.html.erb

@@ -1,10 +1,13 @@
-<%= polaris_choice_list(
-  title: "Company name",
-  selected: 'octolabs',
-  choices: [
-    {label: "Luther Crop", value: 'luther_corp'},
-    {label: "OctoLabs", value: 'octolabs'},
-    {label: "Vought", value: 'vought'}
-  ]
-)%>
-
+<%= form_with url: root_url do |form| %>
+  <%= polaris_choice_list(
+    form: form,
+    attribute: 'company_name',
+    title: "Company name",
+    selected: 'octolabs',
+    choices: [
+      {label: "Luther Corp", value: 'luther_corp'},
+      {label: "OctoLabs", value: 'octolabs'},
+      {label: "Vought", value: 'vought'}
+    ]
+  )%>
+<% end %>

data/test/dummy/app/views/home/_description_list.html.erb

@@ -0,0 +1,9 @@
+<%= polaris_description_list do %>
+  <%= polaris_description_list_item "Widget status:" do %>
+    Active
+  <% end %>
+
+  <%= polaris_description_list_item "Availability:" do %>
+    Out of Stock
+  <% end %>
+<% end %>

data/test/dummy/app/views/home/_footer_help.html.erb

@@ -0,0 +1,4 @@
+<%= polaris_footer_help do %>
+  Questions about this app? Email us any time.
+<% end %>
+

data/test/dummy/app/views/home/_headings.html.erb

@@ -0,0 +1,2 @@
+<%= polaris_heading "This is a heading" %>
+<%= polaris_sub_heading "And this is a sub-heading" %>

data/test/dummy/app/views/home/_links.html.erb

@@ -0,0 +1,9 @@
+<p>
+  <%= polaris_link_to("Link text", root_path) %>
+</p>
+
+<p>
+  <%= polaris_link_to(root_path) do %>
+    Link text as a block
+  <% end %>
+</p>

data/test/dummy/app/views/home/_one_column_layout.html.erb

@@ -0,0 +1,9 @@
+<%= polaris_layout do %>
+  <%= polaris_layout_section do %>
+    <%= polaris_card "This is a card inside a layout" do %>
+      <%= form_with url: root_url do |form| %>
+        Here is some content
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/test/dummy/app/views/home/_resource_list.html.erb

@@ -0,0 +1,30 @@
+<%
+  @widgets = [
+    Widget.new(title: "Widget One"),
+    Widget.new(title: "Widget Two")
+  ]
+%>
+<%= polaris_resource_list do %>
+  <% @widgets.each do |widget| %>
+    <%= polaris_resource_list_item({
+      url: root_path,
+      media: polaris_thumbnail(src: "/product.jpg", alt: widget.title),
+      attribute_one: widget.title,
+      attribute_two: nil,
+      attribute_three: nil,
+      badges: [
+        polaris_badge("A badge")
+      ]
+    }) %>
+  <% end %>
+  <%= polaris_resource_list_item({
+      url: root_path,
+      media: polaris_thumbnail(src: nil, alt: "Some alt text"),
+      attribute_one: "Resource Item Title",
+      attribute_two: "Another attribute",
+      attribute_three: "Third Attribute",
+      badges: [
+        polaris_badge("A different badge")
+      ]
+    }) %>
+<% end %>

data/test/dummy/app/views/home/_text_area.html.erb

@@ -0,0 +1,5 @@
+<%= form_with url: root_url do |form| %>
+  <%= polaris_form_layout do %>
+    <%= polaris_text_area form, :text_content %>
+  <% end %>
+<% end %>

data/test/dummy/app/views/home/_two_column_layout.html.erb

@@ -0,0 +1,16 @@
+<%= polaris_layout do %>
+  <%= polaris_layout_section do %>
+    <%= polaris_card "This is a card inside a layout" do %>
+      <%= form_with url: root_url do |form| %>
+        Here is some content
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= polaris_layout_section secondary: true do %>
+    <%= polaris_card "This is a card inside a layout" do %>
+      <%= form_with url: root_url do |form| %>
+        Here is some content
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/test/dummy/app/views/home/index.html.erb

@@ -47,6 +47,15 @@ between the <code>&lt;body&gt;</code> tags with something like this.</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 
+
+<%= polaris_heading "Headings" %>
+<%= demo_partial 'headings' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+
+
 <%= polaris_heading "Choice List" %>
 <%= demo_partial 'choice_list' %>
 <p>&nbsp;</p>
@@ -54,6 +63,14 @@ between the <code>&lt;body&gt;</code> tags with something like this.</p>
 <p>&nbsp;</p>
 
 
+<%= polaris_heading "Links" %>
+<%= demo_partial 'links' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+
+
 <%= polaris_heading "Button links" %>
 <%= demo_partial 'button_links' %>
 <%= demo_partial 'button_links_with_modifiers' %>
@@ -61,6 +78,13 @@ between the <code>&lt;body&gt;</code> tags with something like this.</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 
+<%= polaris_heading "Button tag" %>
+<%= demo_partial 'button_tag' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+
 
 <%= polaris_heading "Tabs" %>
 <%= demo_partial 'tabs' %>
@@ -82,6 +106,25 @@ between the <code>&lt;body&gt;</code> tags with something like this.</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 
+<%= polaris_heading "Text area" %>
+<%= demo_partial 'text_area' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+
+<%= polaris_heading "One column layout with a card" %>
+<%= demo_partial 'one_column_layout' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+<%= polaris_heading "Two column layout" %>
+<%= demo_partial 'two_column_layout' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
 
 <%= polaris_heading "Annotated Section" %>
 <%= demo_partial 'annotated_section' %>
@@ -89,6 +132,35 @@ between the <code>&lt;body&gt;</code> tags with something like this.</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 
+<%= polaris_heading "Annotated Section Text Field" %>
+<%= demo_partial 'annotated_section_text_field' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+<%= polaris_heading "Annotated Section Input" %>
+<%= demo_partial 'annotated_section_input' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+
+<%= polaris_heading "Resource List" %>
+<%= demo_partial 'resource_list' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+<%= polaris_heading "Description List" %>
+<%= demo_partial 'description_list' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+
+
+
+
 <%= polaris_heading "Model errors" %>
 <%= demo_partial 'model_errors' %>
 <p>&nbsp;</p>
@@ -102,6 +174,12 @@ between the <code>&lt;body&gt;</code> tags with something like this.</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 
+<%= polaris_heading "Footer help" %>
+<%= demo_partial 'footer_help' %>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+