playbook_ui 7.8.3 → 7.11.0

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

@@ -11,47 +11,6 @@ const FilterNoBackground = (props) => {
   ]
   return (
     <>
-      <Filter
-          {...props}
-          background={false}
-          filters={{
-          'Full Name': 'John Wick',
-          'City': 'Las Vegas',
-        }}
-          results={3}
-          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: 'desc' }]}
-      >
-        <TextInput
-            label="Full Name"
-            placeholder="Enter name"
-        />
-
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            name="location"
-            options={options}
-        />
-        <Flex
-            spacing="between"
-        >
-          <Button
-              text="Apply"
-          />
-          <Button
-              text="Clear"
-              variant="secondary"
-          />
-        </Flex>
-      </Filter>
-
       <Filter
           {...props}
           background={false}

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

@@ -0,0 +1 @@
+To remove the background from a filter, add the prop `background` with a value of `false`.

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

@@ -0,0 +1,35 @@
+<%=
+  pb_rails("filter", props: {
+    id: "nosort",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    results: 546,
+    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 } %>
+
+    <%= 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 %>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
+
+const FilterNoSort = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+  ]
+  return (
+    <Filter
+        {...props}
+        filters={{
+          'Full Name': 'John Wick',
+        }}
+        results={546}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      <TextInput
+          label="Full Name"
+          placeholder="Enter name"
+      />
+
+      <Select
+          blankSelection="Select One..."
+          label="Territory"
+          name="location"
+          options={options}
+      />
+      <Flex
+          spacing="between"
+      >
+        <Button
+            text="Apply"
+        />
+        <Button
+            text="Clear"
+            variant="secondary"
+        />
+      </Flex>
+    </Filter>
+  )
+}
+
+export default FilterNoSort

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md

@@ -0,0 +1 @@
+To display results, use templates `single` or `default`. 

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

@@ -4,7 +4,7 @@
     filters: [
       { name: "name", value: "John Wick" }
     ],
-    template:"filter_only"
+    template:"filter_only",
   }) do
 %>
   <%

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

@@ -37,4 +37,4 @@
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -4,12 +4,16 @@ examples:
   - filter_default: Default
   - filter_no_background: No Background
   - filter_single: Single
+  - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
+  - filter_min_width: Min Width for Popover Inside of Filter
 
   react:
   - filter_default: Default
   - filter_no_background: No Background
   - filter_single: Single
+  - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
+  - filter_min_width: Min Width for Popover Inside of Filter

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

@@ -1,5 +1,7 @@
 export { default as FilterDefault } from './_filter_default.jsx'
 export { default as FilterSingle } from './_filter_single.jsx'
+export { default as FilterNoSort } from './_filter_no_sort.jsx'
 export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
+export { default as FilterMinWidth } from './_filter_min_width.jsx'

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

@@ -14,6 +14,7 @@ module Playbook
                       values: %w[default single filter_only sort_only],
                       default: "default"
       prop :background, type: Playbook::Props::Boolean, default: true
+      prop :min_width, default: "auto"
 
       def classname
         generate_classname("pb_filter_kit")

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

@@ -1,5 +1,5 @@
 
-<%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+<%= pb_rails("flex", props: {orientation: "row", padding_right: "lg", vertical: "center"}) do %>
 
     <% if (object.template != "sort_only") %>
       <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
@@ -11,23 +11,26 @@
               <%= pb_rails("caption", props: { text: filter[:name]}) %>
               <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
             </div>
-          <% end %>   
+          <% end %>
           <div class="right_gradient"></div>
         </div>
       </div>
+      <% if (object.template != "default") %>
+        <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
+      <% end %>
     <% end %>
 
 
-    
     <% if (object.template == "single" ) || (object.template == "sort_only") %>
-      <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%> 
-      <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}"}) do %>
+      <% unless object.sort_menu == [{}] %>
+        <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) 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 %>
 
@@ -40,7 +43,7 @@
     <%= 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#{object.id}"}) do %>
+        <%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
           <% object.sort_menu.each do |item| %>
             <% if item[:active] == true %>
               <%= item[:item] %>
@@ -51,6 +54,3 @@
       <% end %>
   <% end %>
 <% end %>
-  
-
-

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

@@ -7,7 +7,7 @@
 <% end %>
 
 <% if object.template != "sort_only"%>
-  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
     <%= capture(&object.children) %>
   <% end %>
 <%end%>

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -2,6 +2,7 @@
 @import "../tokens/colors";
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
+@import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
 
@@ -71,6 +72,27 @@ $selector: ".pb_nav_list";
       }
     }
   }
+
+  // Subtle Variant
+  &[class*=_subtle] {
+    @include subtle;
+    // Horizontal Overrides
+    [class*=pb_nav_list_kit_item] {
+      margin: 0;
+    }
+    [class*=_active] {
+      background-color: $active_light;
+      &[class*=dark] {
+        background-color: rgba($white, $opacity_1);
+      }
+      [class*=_item_link] {
+        [class*=_item_text]{
+          color: $primary;
+        }
+      }
+    }
+  }
+  
   &[class*=dark]{
     [class*=pb_nav_list_kit_item]{
       [class*=_link]{

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -18,6 +18,7 @@ type NavItemProps = {
   imageUrl: String,
   link: string,
   onClick?: EventHandler,
+  target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
 }
 
@@ -34,6 +35,7 @@ const NavItem = (props: NavItemProps) => {
     imageUrl,
     link,
     onClick = () => {},
+    target = '_self',
     text = '',
   } = props
   const Tag = link ? 'a' : 'div'
@@ -54,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
           className="pb_nav_list_item_link"
           href={link}
           onClick={onClick}
+          target={target}
       >
         <If condition={imageUrl}>
           <div

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -0,0 +1,47 @@
+@mixin subtle {
+  [class*=pb_nav_list_kit_item] {
+    list-style: none;
+    border-radius: $border_rad_heavier;
+    border-bottom: 0;
+    margin: $space_xs ($space_sm - 2px);
+    [class*=_link] {
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      border: none;
+      padding: $space_xs ($space_sm - 2px);
+      transition-property: color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: $bezier;
+      border-radius: $border_rad_heavier;
+      @include pb_body($text_lt_default);
+      [class*=_icon_left] {
+        margin-right: ($space_xs + 2px);
+        color: $text_lt_lighter;
+      }
+      [class*=_icon_right] {
+        margin-left: ($space_xs + 2px);
+        color: $text_lt_default;
+      }
+      [class*=_text] {
+        flex: 1;
+        font-weight: $regular;
+      }
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($primary, 0.03);
+          [class*=_icon] {
+            color: $primary;
+          }
+          [class*=_text] {
+            color: $primary;
+          }
+        }
+      }
+    }
+    &[class*=_active] [class*=_link] {
+      @include pb_title_4;
+      color: $primary;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -5,6 +5,7 @@
 @import "../tokens/typography";
 @import "../pb_body/body_mixins";
 @import "../pb_title/title_mixin";
+@import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
 
@@ -85,54 +86,9 @@ $selector: ".pb_nav_list";
 
   }
 
-
   // Subtle Variant
   &[class*=_subtle]  {
-    [class*=pb_nav_list_kit_item] {
-      list-style: none;
-      border-radius: $border_rad_heavier;
-      border-bottom: 0;
-      margin: $space_xs ($space_sm - 2px);
-      [class*=_link] {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        border: none;
-        padding: $space_xs ($space_sm - 2px);
-        transition-property: color, background-color;
-        transition-duration: 0.15s;
-        transition-timing-function: $bezier;
-        border-radius: $border_rad_heavier;
-        @include pb_body($text_lt_default);
-        [class*=_icon_left] {
-          margin-right: ($space_xs + 2px);
-          color: $text_lt_lighter;
-        }
-        [class*=_icon_right] {
-          margin-left: ($space_xs + 2px);
-          color: $text_lt_default;
-        }
-        [class*=_text] {
-          flex: 1;
-          font-weight: $regular;
-        }
-        @media (hover:hover) {
-          &:hover {
-            background-color: rgba($primary, 0.03);
-            [class*=_icon] {
-              color: $primary;
-            }
-            [class*=_text] {
-              color: $primary;
-            }
-          }
-        }
-      }
-      &[class*=_active] [class*=_link] {
-        @include pb_title_4;
-        color: $primary;
-      }
-    }
+    @include subtle;
   }
 
   // Show Highlight

data/app/pb_kits/playbook/pb_nav/docs/_new_tab.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: {title: "Popular Websites", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { text: "Google", link: "https://www.google.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "YouTube", link: "https://www.youtube.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "Facebook", link: "https://www.facebook.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "Amazon", link: "https://www.amazon.com/", target: "_blank" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_new_tab.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const NewTab = () => (
+  <Nav
+      link="#"
+      orientation="vertical"
+      title="Popular Websites"
+  >
+    <NavItem
+        link="https://www.google.com/"
+        target="_blank"
+        text="Google"
+    />
+    <NavItem
+        link="https://www.youtube.com/"
+        target="_blank"
+        text="YouTube"
+    />
+    <NavItem
+        link="https://www.facebook.com/"
+        target="_blank"
+        text="Facebook"
+    />
+    <NavItem
+        link="https://www.amazon.com/"
+        target="_blank"
+        text="Amazon"
+    />
+  </Nav>
+)
+
+export default NewTab