playbook_ui 2.9.7 → 2.9.8

data/app/pb_kits/playbook/{pb_vertical_nav → pb_nav}/_vertical_nav.scss

@@ -1,42 +1,26 @@
-@import "../tokens/typography";
-@import "../tokens/spacing";
-@import "../tokens/colors";
 
-// Another style should be borders like buttons
-.vertical_nav_list {
-  $selector: ".vertical_nav_list";
-  &_title {
-    padding: 0 $space_xl $space_sm;
-  }
+$selector: ".pb_nav_list";
+
+[class^=pb_nav_list][class*=_vertical] {
   ul {
     padding: 0;
     margin: 0;
     list-style: none;
   }
-  &_border_item {
+
+  [class*=_title] {
+    padding: 0 $space_xl $space_sm;
+  }
+
+  [class*=_border_item] {
     list-style: none;
     border-bottom: 1px solid $border_light;
+
     &:last-child {
       border-bottom: 0;
     }
-  }
-  &_item,
-  &_border_item {
-    &_active,
-    &.active {
-      background-color: $active_light;
-      #{$selector}_item_link,
-      #{$selector}_border_item_link {
-        border-color: $primary;
-        &_icon {
-          color: $primary;
-        }
-        &_text {
-          color: $primary;
-        }
-      }
-    }
-    &_link {
+
+    [class*=_link] {
       text-decoration: none;
       display: flex;
       align-items: center;
@@ -45,28 +29,47 @@
       border-width: 0 0 0 3px;
       transition-property: color, border-color, background-color;
       transition-duration: 0.15s;
-      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-      &_icon {
+      transition-timing-function: $bezier;
+
+      [class*=_icon] {
         font-size: $font_large;
         margin-right: $space_sm;
         color: $text_lt_lighter;
       }
-      &_text {
+
+      [class*=_text] {
         font-size: $font_base;
         font-weight: $bold;
         color: $text_lt_default;
       }
+
       &:hover {
         background-color: rgba($primary, 0.03);
-        #{$selector}_item_link_icon,
-        #{$selector}_border_item_link_icon {
+
+        #{$selector}_item_icon {
           color: $primary;
         }
-        #{$selector}_item_link_text,
-        #{$selector}_border_item_link_text {
+
+        #{$selector}_item_text {
           color: $primary;
         }
       }
     }
   }
+
+  [class*=_active] {
+    background-color: $active_light;
+
+    #{$selector}_item_link {
+      border-color: $primary;
+
+      [class*=_item_icon] {
+        color: $primary;
+      }
+
+      [class*=_item_text] {
+        color: $primary;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,5 @@
+<%= pb_rails("nav", props: {title: "Title Example", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Active Nav Item using block<% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+<%= pb_rails("nav") do %>
+  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Active Nav Item using block<% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+<%= pb_rails("nav", props: {title: "Title Example", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { text: "Active Nav Item using text prop", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/{pb_vertical_nav → pb_nav}/docs/_default_nav.jsx

@@ -1,6 +1,6 @@
 import React from "react"
-import {VerticalNav} from "../../"
-import VerticalNavItem from "../_item.jsx"
+import {Nav} from "../../"
+import NavItem from "../_item.jsx"
 
 function DefaultNav() {
   return (

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

@@ -0,0 +1,5 @@
+<%= pb_rails("nav", props: { orientation: "horizontal"}) do %>
+  <%= pb_rails("nav/item", props: { text: "Active Nav Item using text prop", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/{pb_vertical_nav → pb_nav}/docs/example.yml

@@ -1,6 +1,7 @@
 examples:
   rails:
   - default_nav: Default
+  - horizontal_nav: Horizontal Nav
   - block_nav: Block
   - block_no_title: Without Title
   react:

data/app/pb_kits/playbook/{pb_vertical_nav → pb_nav}/item.rb

@@ -1,18 +1,18 @@
 # frozen_string_literal: true
 
 module Playbook
-  module PbVerticalNav
+  module PbNav
     class Item
       include Playbook::Props
 
-      partial "pb_vertical_nav/item"
+      partial "pb_nav/item"
 
       prop :active, type: Playbook::Props::Boolean, default: false
       prop :link, default: "#"
       prop :text
 
       def classname
-        generate_classname("vertical_nav_list_border_item", active_class)
+        generate_classname("pb_nav_list_border_item", active_class)
       end
 
     private

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbNav
+    class Nav
+      include ActionView::Helpers::TagHelper
+      include Playbook::Props
+
+      partial "pb_nav/nav"
+
+      prop :link, default: "#"
+      prop :title
+      prop :orientation, type: Playbook::Props::Enum,
+                    values: ["vertical", "horizontal"],
+                    default: "vertical"
+
+      def classname
+        [
+          "pb_nav_list",
+          orientation
+        ].compact.join("_")
+      end
+
+
+    end
+  end
+end

data/app/pb_kits/playbook/pb_person_contact/_person_contact.html.erb

@@ -2,12 +2,10 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <% object.people.each do |person| %>
-      <%= pb_rails("person", props: {
-          first_name: person[:first_name],
-          last_name: person[:last_name],
-      }) %>
-    <% end %>
+    <%= pb_rails("person", props: {
+        first_name: object.first_name,
+        last_name: object.last_name,
+    }) %>
     <% object.contacts.each do |contact| %>
       <%= pb_rails("contact", props: {
           contact_type: contact[:contact_type],
@@ -15,4 +13,13 @@
           contact_detail: contact[:contact_detail],
       }) %>
     <% end %>
+    <% unless object.wrong_contacts.empty? %>
+      <%= pb_rails("caption", props: { text: "wrong number" })%>
+    <% end %>
+      <% object.wrong_contacts.each do |wrong_number| %>
+        <%= pb_rails("contact", props: {
+            contact_type: wrong_number[:contact_type],
+            contact_value: wrong_number[:contact_value],
+        }) %>
+      <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -4,15 +4,19 @@
 import React from 'react'
 import classnames from 'classnames'
 
+
+
 import {
   Person,
+  Body,
   Contact,
 } from '../'
 
 type PersonContactProps = {
   className?: String | Array<String>,
   dark?: Boolean,
-  people?: Array<{firstName: String, lastName: String}>,
+  firstName: String,
+  lastName: String,
   contacts?: Array<{contactType: String, contactValue: String, contactDetail: String}>,
 }
 
@@ -28,30 +32,20 @@ const contactsArray = ({contacts=[]}: PersonContactProps) => {
   })
 }
 
-const peopleArray = ({people=[]}: PersonContactProps) => {
-  return people.map((personObject, index) => {
-    return (
-      <Person
-        firstName={personObject.firstName}
-        lastName={personObject.lastName}
-      />
-    );
-  })
-}
 
 const PersonContact = ({
   className,
   dark=false,
-  people,
+  firstName,
+  lastName,
   contacts,
 }: PersonContactProps) => {
 
   const contactKits = contactsArray({contacts})
-  const personKits = peopleArray({people})
 
   return (
     <div className={classnames('pb_person_contact_kit', className)}>
-      {personKits}
+      <Person firstName={firstName} lastName={lastName} />
       {contactKits}
     </div>
   )

data/app/pb_kits/playbook/pb_person_contact/_person_contact.scss

@@ -7,4 +7,5 @@
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: column;
+  margin-bottom: $space_xs;
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.html.erb

@@ -1,32 +1,17 @@
 <%= pb_rails("person_contact", props: {
-  people: [
-    {
-      first_name: "Pauline",
-      last_name: "Smith",
-    },
-    {
-      first_name: "Harvey",
-      last_name: "Walters"
-    }
-  ],
+  first_name: "Pauline",
+  last_name: "Smith",
   contacts: [
     {
       contact_type: "email",
-      contact_value: "email@example.com",
-      contact_detail: "Pauline's Email"
+      contact_value: "email@example.com"
     },
     {
-      contact_value: 5555555555,
-      contact_detail: "Home"
-    },
-    {
-      contact_type: "email",
-      contact_value: "email@example.com",
+      contact_value: 5555555555
     },
     {
       contact_type: "work",
-      contact_value: "3245627482",
-      contact_detail: "Harvey's Work"
+      contact_value: "3245627482"
     }
   ]
 }) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx

@@ -5,34 +5,19 @@ function PersonContactDefault() {
   return (
     <div>
       <PersonContact
-        people={[
-          {
-            firstName: "Pauline",
-            lastName: "Smith",
-          },
-          {
-            firstName: "Harvey",
-            lastName: "Walters"
-          }
-        ]}
+        firstName="Pauline"
+        lastName="Smith"
         contacts={[
           {
             contactType: "email",
             contactValue: "email@example.com",
-            contactDetail: "Pauline's Email",
           },
           {
             contactValue: "5555555555",
-            contactDetail: "Home",
-          },
-          {
-            contactType: "email",
-            contactValue: "email@example.com",
           },
           {
             contactType: "work",
             contactValue: "3245627482",
-            contactDetail: "Harvey's Work"
           }
         ]}
       />

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("person_contact", props: {
+  first_name: "Harvey",
+  last_name: "Walters",
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    },
+    {
+      contact_value: 5555555555,
+    },
+    {
+      contact_type: "work",
+      contact_value: "3245627482"
+    }
+  ]
+}) %>
+
+<%= pb_rails("person_contact", props: {
+  first_name: "Brenda",
+  last_name: "Walters",
+  contacts: [
+    {
+      contact_value: 5555555555,
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/{_person_contact_single_person.jsx → _person_contact_multiple.jsx}

@@ -1,30 +1,32 @@
 import React from "react"
 import {PersonContact} from "../../"
 
-function PersonContactSinglePerson() {
+function PersonContactMultiple() {
   return (
     <div>
       <PersonContact
-        people={[
-          {
-            firstName: "Harvey",
-            lastName: "Walters"
-          }
-        ]}
+        firstName="Harvey"
+        lastName="Walters"
         contacts={[
           {
             contactType: "email",
             contactValue: "email@example.com",
-            contactDetail: "Harvey's Email",
           },
           {
             contactValue: "5555555555",
-            contactDetail: "Home",
           },
           {
             contactType: "work",
             contactValue: "3245627482",
-            contactDetail: "Harvey's Work",
+          }
+        ]}
+      />
+      <PersonContact
+        firstName="Brenda"
+        lastName="Walters"
+        contacts={[
+          {
+            contactValue: "5555555555",
           }
         ]}
       />
@@ -32,4 +34,4 @@ function PersonContactSinglePerson() {
   )
 }
 
-export default PersonContactSinglePerson;
+export default PersonContactMultiple;

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("person_contact", props: {
+  first_name: "Harvey",
+  last_name: "Walters",
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    },
+    {
+      contact_value: 5555555555,
+      contact_detail: "Home"
+    },
+    {
+      contact_type: "work",
+      contact_value: "3245627482",
+      contact_detail: "Work"
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+import {PersonContact} from "../../"
+
+function PersonContactWithDetail() {
+  return (
+    <div>
+      <PersonContact
+        firstName="Harvey"
+        lastName="Walters"
+        contacts={[
+          {
+            contactType: "email",
+            contactValue: "email@example.com",
+          },
+          {
+            contactValue: "5555555555",
+            contactDetail: "Home",
+          },
+          {
+            contactType: "work",
+            contactValue: "3245627482",
+            contactDetail: "Work",
+          }
+        ]}
+      />
+    </div>
+  )
+}
+
+export default PersonContactWithDetail;

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

@@ -2,11 +2,12 @@ examples:
 
   rails:
   - person_contact_default: Default
-  - person_contact_single_person: One Person
-  - person_contact_three_people: Three People
+  - person_contact_multiple: Multiple People
+  - person_contact_with_detail: With Detail
+
 
 
   react:
   - person_contact_default: Default
-  - person_contact_single_person: One Person
-  - person_contact_three_people: Three People
+  - person_contact_multiple: Multiple People
+  - person_contact_with_detail: With Detail

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

@@ -1,3 +1,3 @@
 export {default as PersonContactDefault} from './_person_contact_default.jsx';
-export {default as PersonContactSinglePerson} from './_person_contact_single_person.jsx';
-export {default as PersonContactThreePeople} from './_person_contact_three_people.jsx';
+export {default as PersonContactMultiple} from './_person_contact_multiple.jsx';
+export {default as PersonContactWithDetail} from './_person_contact_with_detail.jsx';

data/app/pb_kits/playbook/pb_person_contact/person_contact.rb

@@ -8,7 +8,16 @@ module Playbook
       partial "pb_person_contact/person_contact"
 
       prop :contacts, type: Playbook::Props::HashArray, default: []
-      prop :people, type: Playbook::Props::HashArray, default: []
+      prop :first_name
+      prop :last_name
+
+      def wrong_contacts
+        contacts.select {|contact| contact[:contact_type] == "wrong number" }
+      end
+
+      def valid_contacts
+        contacts.select {|contact| contact[:contact_type] != "wrong number" }
+      end
 
       def classname
         generate_classname("pb_person_contact_kit")

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb

@@ -36,3 +36,10 @@
   text: "neutral",
   variant: "neutral"
 }) %>
+
+<br><br>
+
+<%= pb_rails("pill", props: {
+  text: "primary",
+  variant: "primary"
+}) %>

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

@@ -25,6 +25,10 @@ function PillDefault() {
       <br/><br/>
 
       <Pill text="neutral" variant="neutral" />
+
+      <br/><br/>
+
+      <Pill text="primary" variant="primary" />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_pill/pill.rb

@@ -9,7 +9,7 @@ module Playbook
 
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral],
+                     values: %w[success warning error info neutral primary],
                      default: "neutral"
 
       def classname

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -1,3 +1,5 @@
+@import "../../pb_caption/caption_mixin";
+
 [class^=pb_table] {
   &.table-sm,
   &.table-md,
@@ -5,10 +7,7 @@
     thead {
       tr {
         th {
-          color: $text_lt_lighter;
-          font-size: $default-header-size;
-          font-weight: $regular;
-          text-transform: uppercase;
+          @include caption;
           border-bottom: 1px solid $border_light;
         }
       }

data/app/pb_kits/playbook/{pb_input/_input.html.erb → pb_text_input/_text_input.html.erb}

@@ -1,10 +1,10 @@
 <%= content_tag(:div,
-    class: "pb_input_kit") do %>
+    class: "pb_text_input_kit") do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label}) %>
   <% end %>
   <%= content_tag(:div,
-      class: "input_wrapper") do %>
+      class: "text_input_wrapper") do %>
     <%= tag(:input,
         id: object.id,
         data: object.data,

data/app/pb_kits/playbook/{pb_input/_input.jsx → pb_text_input/_text_input.jsx}

@@ -19,7 +19,7 @@ const defaultProps = {
   type: "text"
 }
 
-class Input extends React.Component {
+class TextInput extends React.Component {
   render() {
     const {
       className,
@@ -31,14 +31,14 @@ class Input extends React.Component {
     } = this.props
 
     const css = classnames([
-      `pb_input_kit`,
+      `pb_text_input_kit`,
       className,
     ])
 
     return (
-      <div className="pb_input_kit">
+      <div className="pb_text_input_kit">
         <Caption text={label} />
-        <div className="input_wrapper">
+        <div className="text_input_wrapper">
           <input className={css}
               name={name}
               placeholder={placeholder}
@@ -51,7 +51,7 @@ class Input extends React.Component {
   }
 }
 
-Input.propTypes = propTypes
-Input.defaultProps = defaultProps
+TextInput.propTypes = propTypes
+TextInput.defaultProps = defaultProps
 
-export default Input
+export default TextInput

data/app/pb_kits/playbook/{pb_input/_input.scss → pb_text_input/_text_input.scss}

@@ -3,14 +3,14 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-.pb_input_kit {
+.pb_text_input_kit {
   margin: 8px;
 
-  .input_wrapper {
+  .text_input_wrapper {
     margin-bottom: 1rem;
   }
 
-  .pb_input_kit {
+  .pb_text_input_kit {
     border: 1px solid $border-light;
     border-radius: $border-rad-light;
     display: block;