From 46bda2bd25302a782b199a9fae7bc48fe70f2174 Mon Sep 17 00:00:00 2001
From: christina tai <christina.tai@powerhrg.com>
Date: Mon, 5 Apr 2021 13:04:47 -0400
Subject: [PATCH 1/3] Updated user css file

---
 playbook/app/pb_kits/playbook/pb_user/_user.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/playbook/app/pb_kits/playbook/pb_user/_user.scss b/playbook/app/pb_kits/playbook/pb_user/_user.scss
index 8fdadf126f..00c2524a53 100644
--- a/playbook/app/pb_kits/playbook/pb_user/_user.scss
+++ b/playbook/app/pb_kits/playbook/pb_user/_user.scss
@@ -38,6 +38,9 @@
 
   &[class*=_horizontal]  {
     align-items: center;
+    .content_wrapper > * {
+      padding: 0 0 0 0;
+    }
 
     &[class*=_center]  {
       justify-content: center;

From 4061b9ebfbed2810eb2a2a383438002d5d0d6aec Mon Sep 17 00:00:00 2001
From: christina tai <christina.tai@powerhrg.com>
Date: Mon, 5 Apr 2021 14:02:17 -0400
Subject: [PATCH 2/3] Updated Nav block content doc examples

---
 .../playbook/pb_nav/docs/_block_nav.html.erb  | 46 +++++++++++++++--
 .../playbook/pb_nav/docs/_block_nav.jsx       | 50 ++++++++++++++++---
 2 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb b/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb
index ecc7eb50db..7b222e9647 100644
--- a/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb
@@ -1,6 +1,42 @@
-<%= pb_rails("nav", props: {title: "Menu", link: "#"}) do %>
-  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Photos<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Music<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Video<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Files<% end %>
+<%= pb_rails("nav", props: {title: "Users", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+    }) %>
+  <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Julie Hamilton",
+      territory: "PHL",
+      title: "Inside Sales Agent",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/45.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Dennis Wilks",
+      territory: "PHL",
+      title: "Senior Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/44.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Ronnie Martin",
+      territory: "PHL",
+      title: "Customer Development Representative",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/46.jpg"
+      }) %>
+    <% end %>
 <% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx b/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx
index 79eb5d57c8..ea092b0af1 100644
--- a/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx
+++ b/playbook/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Nav } from '../../'
+import { Nav, User } from '../../'
 import NavItem from '../_item.jsx'
 
 const BlockNav = (props) => {
   return (
     <Nav
         link="#"
-        title="Menu"
+        title="Users"
         {...props}
     >
       <NavItem
@@ -14,11 +14,49 @@ const BlockNav = (props) => {
           link="#"
           {...props}
       >
-        {'Photos'}
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            territory="PHL"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
+            name="Julie Hamilton"
+            orientation="horizontal"
+            territory="PHL"
+            title="Inside Sales Agent"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            name="Dennis Wilks"
+            orientation="horizontal"
+            territory="PHL"
+            title="Senior Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
+            name="Ronnie Martin"
+            orientation="horizontal"
+            territory="PHL"
+            title="Customer Development Representative"
+            {...props}
+        />
       </NavItem>
-      <NavItem link="#">{'Music'}</NavItem>
-      <NavItem link="#">{'Video'}</NavItem>
-      <NavItem link="#">{'Files'}</NavItem>
     </Nav>
   )
 }

From ec9cc2ff11418aba27eb2a4a47d52e77b5909d78 Mon Sep 17 00:00:00 2001
From: christina tai <christina.tai@powerhrg.com>
Date: Tue, 6 Apr 2021 09:08:16 -0400
Subject: [PATCH 3/3] Changed nav css instead of user css

---
 playbook/app/pb_kits/playbook/pb_nav/_vertical_nav.scss | 2 +-
 playbook/app/pb_kits/playbook/pb_user/_user.scss        | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_nav/_vertical_nav.scss b/playbook/app/pb_kits/playbook/pb_nav/_vertical_nav.scss
index a022d75eb0..5389496f2d 100644
--- a/playbook/app/pb_kits/playbook/pb_nav/_vertical_nav.scss
+++ b/playbook/app/pb_kits/playbook/pb_nav/_vertical_nav.scss
@@ -16,7 +16,7 @@ $selector: ".pb_nav_list";
     list-style: none;
   }
 
-  [class*=_title] {
+  [class*=pb_nav_list_title] {
     padding: 0 $space_md $space_sm;
   }
 
diff --git a/playbook/app/pb_kits/playbook/pb_user/_user.scss b/playbook/app/pb_kits/playbook/pb_user/_user.scss
index 00c2524a53..8fdadf126f 100644
--- a/playbook/app/pb_kits/playbook/pb_user/_user.scss
+++ b/playbook/app/pb_kits/playbook/pb_user/_user.scss
@@ -38,9 +38,6 @@
 
   &[class*=_horizontal]  {
     align-items: center;
-    .content_wrapper > * {
-      padding: 0 0 0 0;
-    }
 
     &[class*=_center]  {
       justify-content: center;