playbook_ui 4.5.2 → 4.6.0

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

@@ -0,0 +1,82 @@
+@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{
+    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;
+    }
+  }
+   .sort-by{
+    flex-shrink:0;
+    margin-left: $space_xs !important;
+  }
+  .filter-results{
+    margin-left: $space_xs !important;
+    margin-right: $space_xs !important;
+    flex-shrink:0 !important;
+  }
+  .filter-bottom{
+    padding-left: $space_sm !important;
+    padding-right: $space_sm !important;
+  }
+  .maskContainer{
+      display: flex;
+      overflow-x: hidden;
+      align-items: center;
+      flex-grow: 1;
+  }
+  .filters {
+    display: flex;
+    flex-shrink: 1;
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    padding-right: 80px;
+    padding-top: $space_md;
+    padding-bottom: $space_md;
+
+   &::-webkit-scrollbar{
+       display: none;
+   }
+    .filter {
+      flex: 0 0 auto;
+      padding-left: $space_xs;
+      padding-right: $space_xs;
+      border-right: 1px solid $border_light !important;
+    }
+
+}
+.maskContainer::after {
+    content: " ";
+    background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
+    height: 48px;
+    padding-left: $space_xl;
+    margin-left: -$space_lg;
+    z-index: 1;
+}
+.maskContainer::before {
+    content: " ";
+    background-image: linear-gradient(to left, rgba($card_light,.3) , rgba($card_light,1));
+    height: 48px;
+    padding-right: $space_sm;
+    margin-right: -$space_xs;
+    z-index: 1;
+}
+
+}

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

@@ -0,0 +1,45 @@
+<% 5.times do%>
+<br>
+<%end%>
+
+<%= pb_rails("filter", props: {
+  id: "1",
+  filters: [
+    {name: "name", value: "John Wick"}
+    ],
+  sort_menu: [
+    {item:"Popularity", link:"#", active: true, direction:"des"},
+    {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),
+  ]
+%>
+
+<%= 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" } %>
+  <% end %>
+<% end %>
+
+<% end %>
+<% 5.times do%>
+<br>
+<%end%>

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FilterDefault = () => (
+  <div>
+    <h1>{'Coming Soon!'}</h1>
+  </div>
+)
+
+export default FilterDefault

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

@@ -0,0 +1,46 @@
+<% 5.times do%>
+<br>
+<%end%>
+
+<%= pb_rails("filter", props: {
+  id:"2",
+  filters: [
+    {name: "name", value: "John Wick"}
+    ],
+  sort_menu: [
+    {item:"Popularity", link:"#", active: true, direction:"des"},
+    {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),
+  ]
+%>
+
+<%= 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" } %>
+  <% end %>
+<% end %>
+
+<% end %>
+<% 5.times do%>
+<br>
+<%end%>

data/app/pb_kits/playbook/pb_filter/docs/example.yml

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - filter_default: Default
+  - filter_single: Single
+  
+  react:
+  - filter_default: Default
+  

data/app/pb_kits/playbook/pb_filter/docs/index.js

@@ -0,0 +1 @@
+export { default as FilterDefault } from './_filter_default.jsx'

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFilter
+    class Filter
+      include Playbook::Props
+
+      partial "pb_filter/filter"
+
+      prop :filters, type: Playbook::Props::HashArray, default: [{name: ''}]
+      prop :sort_menu, type: Playbook::Props::HashArray, default: [{}]
+      prop :results, type: Playbook::Props::Numeric
+      prop :template, type: Playbook::Props::Enum,
+                      values: %w[default single],
+                      default: "default"
+
+
+      def classname
+        generate_classname("pb_filter_kit")
+      end
+
+      def sort_icon(direction)
+        case direction
+        when "asc"
+          "sort-amount-up"
+        when "des"
+          "sort-amount-down"
+        else
+          ""
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("card",props: {padding:"none"}) do%>
+  <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+    <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter"}) %>
+    <div class="maskContainer">
+      <div class="filters">
+        <div class="left_gradient"></div> <% object.filters.each do |filter| %>
+              <div class="filter">
+                <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+              </div>
+            <% end %> 
+        <div class="right_gradient"></div>
+      </div>
+    </div>
+  <% end %>
+  <%= pb_rails("section_separator") %>
+  <%= pb_rails("flex", props: {orientation: "row", vertical: "center", spacing: "between", classname: "filter-bottom"}) do %>
+    <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
+      <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+        <%= pb_rails("caption", props: { text: "sort by:"}) %>
+        <%= pb_rails("button", props: {variant: "link" ,classname: "p-0 ml-3",id: "sort-button"}) do %>
+         <% object.sort_menu.each do |item| %>
+          <% if item[:active] == true %>
+            <%= item[:item] %>
+            <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+          <%end%>
+          <% end %>
+        <% end %>
+      <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("popover", props: {trigger_element_id: "filter", tooltip_id: "filter-form", position: 'bottom'}) do %>
+  <%= capture(&object.children) %>
+<% end %>
+
+<%= pb_rails("popover", props: { trigger_element_id: "sort-button", tooltip_id: "sort-filter-btn-tooltip", position: 'bottom'}) do %>
+  <%= pb_rails("list") do %>
+    <% object.sort_menu.each do |item| %>
+      <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:url]}) %><% end %>
+    <% end %> 
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/templates/_single.html.erb

@@ -0,0 +1,42 @@
+<%= pb_rails("card",props: {padding:"none"}) do%>
+  <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+    <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
+
+    <div class="maskContainer">
+        <div class="filters">
+            <div class="left_gradient"></div>
+                  <% object.filters.each do |filter| %>
+                  <div class="filter">
+                    <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                    <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+                    </div>
+                  <% end %>   
+            <div class="right_gradient"></div>
+        </div>
+    </div>
+
+    <%= pb_rails("caption", props: {text: "#{object.results} Results", size:"xs", classname:"filter-results"}) %>  
+    <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}"}) do %>
+      <% object.sort_menu.each do |item| %>
+          <% if item[:active] == true %>
+            <%= item[:item] %>
+            <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+          <%end%>
+          <% end %>
+    <% end %>
+    
+
+  <% end %>
+<% end %> 
+
+<%= pb_rails("popover", props: {trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+  <%= capture(&object.children) %>
+<% end %>
+
+<%= pb_rails("popover", props: { trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
+    <%= pb_rails("list") do %>
+      <% object.sort_menu.each do |item| %>
+        <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item]}) %><% end %>
+      <% end %> 
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md

@@ -0,0 +1,2 @@
+
+Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
   text: "Scan to Assign Selected Items.\nClick X to close at any time",
   status: "tip",
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md

@@ -0,0 +1,2 @@
+
+Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow.

data/app/pb_kits/playbook/pb_flex/docs/_description.md

@@ -0,0 +1 @@
+This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md

@@ -0,0 +1 @@
+Display: block

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md

@@ -0,0 +1 @@
+Display: inline

data/app/pb_kits/playbook/pb_form/docs/_description.md

@@ -0,0 +1,10 @@
+The `form` kit provides consumers with a convenient, consistently styled `<form>` wrapper. 
+
+### Form Helpers
+
+There are currently two form helper options for Rails: [`form_with`](https://apidock.com/rails/ActionView/Helpers/FormHelper/form_with) and [`simple_form`](https://github.com/heartcombo/simple_form). 
+
+**Note:** It is suggested to use `form_with` for newer or more progressive Rails applications and `simple_form` for older legacy forms where simple_form is already implemented and a complete overhaul might not make sense.
+
+This kit does make use of other kits such as text_input, select and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.
+

data/app/pb_kits/playbook/pb_form/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Avoid using a form without validation if fields are required and using  with  validation if not required.

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.md

@@ -0,0 +1 @@
+Validation displays an error with red border and red text below indicating that the user must fill out the field.

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.md

@@ -0,0 +1 @@
+Validation displays an error with red border and red text below indicating that the user must fill out the field.

data/app/pb_kits/playbook/pb_hashtag/docs/_description.md

@@ -0,0 +1 @@
+Hashtag is used to display home, project and other forms of IDs. They can be used as a link.

data/app/pb_kits/playbook/pb_hashtag/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use as a button.

data/app/pb_kits/playbook/pb_highlight/docs/_description.md

@@ -0,0 +1 @@
+Highlight is used to pick out or emphasize content.

data/app/pb_kits/playbook/pb_highlight/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Avoid highlighting words that don’t apply or whole content areas.

data/app/pb_kits/playbook/pb_home_address_street/docs/_description.md

@@ -0,0 +1 @@
+This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project.

data/app/pb_kits/playbook/pb_home_address_street/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Don’t change the design format (Bold fonts and light fonts), and keep the text stacked. Do not use on a singe line.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.md

@@ -0,0 +1 @@
+Use this kit on tables, card displays, or on modals. It's versatile for displaying in the most condensed areas. 

data/app/pb_kits/playbook/pb_icon/docs/_description.md

@@ -0,0 +1 @@
+An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.

data/app/pb_kits/playbook/pb_icon/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.md

@@ -0,0 +1 @@
+A spinner icon can show a user that something is loading or saving.

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.md

@@ -0,0 +1 @@
+Icon Pull can be used to indicate that the user can perform a pull action.

data/app/pb_kits/playbook/pb_icon_circle/docs/_description.md

@@ -0,0 +1 @@
+Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.

data/app/pb_kits/playbook/pb_icon_circle/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Be careful of use cases where Icon Circle Button may need to be used instead.

data/app/pb_kits/playbook/pb_icon_value/docs/_description.md

@@ -0,0 +1 @@
+Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value. 

data/app/pb_kits/playbook/pb_image/docs/_description.md

@@ -0,0 +1 @@
+A responsive image component.

data/app/pb_kits/playbook/pb_label_pill/docs/_description.md

@@ -0,0 +1 @@
+This kit combines the caption and pill kit with all its variants. 

data/app/pb_kits/playbook/pb_label_pill/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things to Avoid
+Don’t overuse this kit. Try to keep it to a  single use per row if implemented on a table. Make sure it’s not used in a way that may confuse the user to think it’s a button or clickable. 

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.md

@@ -0,0 +1 @@
+Use this kit to display a label and a value with a certain status or color to highlight its significance or meaning. It can be a good design use to highlight the value incase it is important.

data/app/pb_kits/playbook/pb_label_value/docs/_description.md

@@ -0,0 +1 @@
+This kit can be very versatile when used to display text data. It includes the caption kit and the body text kit.