playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -1,27 +1,30 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
 
-[class^=pb_filter_kit] {
-  [class^=pb_circle_icon_button_kit]{
-    padding-left: $space_sm !important;
-    padding-top: $space_sm !important;
-    padding-bottom: $space_sm !important;
-  }
-  [class^=pb_card_body_kit][class*=_md]{
-    padding: 0 !important;
-  }
-  [class^=pb_list_kit] li{
+.pb_filter_sort_menu {
+  li {
     padding: 0 $space_sm !important;
   }
-  [class^=pb-form]{
-    padding: $space_sm ;
-  }
   [class^=pb_button_kit][class*=_link]{
     flex-shrink:0;
     padding: 0 $space_xs !important;
     [id^="sort"]{
       margin-left: $space_xs !important;
     }
+  }
+  [class^=pb_card_body_kit][class*=_md]{
+    padding: 0 !important;
+  }
+}
+
+[class^=pb_filter_kit] {
+  [class^=pb_circle_icon_button_kit]{
+    padding-left: $space_sm !important;
+    padding-top: $space_sm !important;
+    padding-bottom: $space_sm !important;
+  }
+  [class^=pb-form]{
+    padding: $space_sm ;
   }
    .sort-by{
     flex-shrink:0;

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,46 +1,39 @@
-<% 5.times do%>
-<br>
-<%end%>
-
-<%= pb_rails("filter", props: {
-  id: "1",
-  filters: [
-    {name: "name", value: "John Wick"}
+<%=
+  pb_rails("filter", props: {
+    id: "1",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
     ],
-  sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"desc"},
-    {item:"Title", link:"#", active: false},
-    {item:"Name", link:"#", active: false},
-  ],
-  template:"default",
-  results: 546,
-  }) do%>
-<%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
+    template: "default",
+    results: 546,
+  }) do
 %>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-  <%= form.actions do |action| %>
-    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
   <% end %>
 <% end %>
-
-<% end %>
-<% 5.times do%>
-<br>
-<%end%>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -11,16 +11,20 @@ const FilterDefault = () => {
   ]
   return (
     <Filter
-        filters={[
-        { name: 'Full Name', value: 'John Wick' },
-        { name: 'Territory', value: 'San Francisco' },
-      ]}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'Territory': 'San Francisco',
+        }}
         results={256}
-        sortMenu={[
-      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
-      { item: 'Title', link: '#', active: false },
-      { item: 'Name', link: '#', active: false },
-    ]}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'asc' }]}
     >
       <TextInput
           label="Full Name"

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -1,88 +1,83 @@
-
-<%= pb_rails("filter", props: {
-  id:"3",
-  background: false,
-  filters: [
-    {name: "name", value: "John Wick"}
+<%=
+  pb_rails("filter", props: {
+    id: "3",
+    background: false,
+    filters: [
+      { name: "name", value: "John Wick" }
     ],
-  sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"desc"},
-    {item:"Title", link:"#", active: false},
-    {item:"Name", link:"#", active: false},
-  ],
-  results: 1,
-  template: "single"
-  }) do%>
-  <%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    results: 1,
+    template: "single"
+  }) do
 %>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-  <%= form.actions do |action| %>
-    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
   <% end %>
 <% end %>
 
-<% end %>
-
-<% 2.times do%>
 <br>
-<%end%>
 
-
-<%= pb_rails("filter", props: {
-  id:"4",
-  background: false,
-  filters: [
-    {name: "name", value: "John Wick"}
+<%=
+  pb_rails("filter", props: {
+    id: "4",
+    background: false,
+    filters: [
+      { name: "name", value: "John Wick" }
     ],
-  sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"desc"},
-    {item:"Title", link:"#", active: false},
-    {item:"Name", link:"#", active: false},
-  ],
-  results: 546,
-
-  }) do%>
-  <%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    results: 546,
+  }) do
 %>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-  <%= form.actions do |action| %>
-    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
   <% end %>
 <% end %>
-
-<% end %>
-

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -12,16 +12,19 @@ const FilterNoBackground = () => {
   return (
     <Filter
         background={false}
-        filters={[
-        { name: 'Full Name', value: 'John Wick' },
-        { name: 'Territory', value: 'San Francisco' },
-      ]}
+        filters={{
+          'Full Name': 'John Wick',
+          'Territory': 'San Francisco',
+        }}
         results={256}
-        sortMenu={[
-      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
-      { item: 'Title', link: '#', active: false },
-      { item: 'Name', link: '#', active: false },
-    ]}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'asc' }]}
     >
       <TextInput
           label="Full Name"

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -1,40 +1,33 @@
-<% 5.times do%>
-<br>
-<%end%>
-
-<%= pb_rails("filter", props: {
-  id: "fo",
-  filters: [
-    {name: "name", value: "John Wick"}
+<%=
+  pb_rails("filter", props: {
+    id: "fo",
+    filters: [
+      { name: "name", value: "John Wick" }
     ],
-  template:"filter_only"
-  }) do%>
-<%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
+    template:"filter_only"
+  }) do
 %>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-  <%= form.actions do |action| %>
-    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
   <% end %>
 <% end %>
-
-<% end %>
-<% 5.times do%>
-<br>
-<%end%>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -12,12 +12,11 @@ const FilterOnly = () => {
   return (
     <Filter
         background={false}
-        filters={[
-        { name: 'Full Name', value: 'John Wick' },
-        { name: 'Territory', value: 'San Francisco' },
-      ]}
-        results={1}
-        template="filter_only"
+        filters={{
+          'Full Name': 'John Wick',
+          'Territory': 'San Francisco',
+        }}
+        results={256}
     >
       <TextInput
           label="Full Name"

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -1,46 +1,40 @@
-<% 5.times do%>
-<br>
-<%end%>
-
-<%= pb_rails("filter", props: {
-  id:"2",
-  filters: [
-    {name: "name", value: "John Wick"}
+<%=
+  pb_rails("filter", props: {
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
     ],
-  sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"desc"},
-    {item:"Title", link:"#", active: false},
-    {item:"Name", link:"#", active: false},
-  ],
-  results: 546,
-  template: "single"
-  }) do%>
-<%
-  example_collection = [
-    OpenStruct.new(name: "Alabama", value: 1),
-    OpenStruct.new(name: "Alaska", value: 2),
-    OpenStruct.new(name: "Arizona", value: 3),
-    OpenStruct.new(name: "Arkansas", value: 4),
-    OpenStruct.new(name: "California", value: 5),
-    OpenStruct.new(name: "Colorado", value: 6),
-    OpenStruct.new(name: "Connecticut", value: 7),
-    OpenStruct.new(name: "Delaware", value: 8),
-    OpenStruct.new(name: "Florida", value: 9),
-    OpenStruct.new(name: "Georgia", value: 10),
-  ]
+    results: 546,
+    template: "single"
+  }) do
 %>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-  <%= form.actions do |action| %>
-    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
   <% end %>
-<% end %>
-
-<% end %>
-<% 5.times do%>
-<br>
-<%end%>
+<% end %>