Added role default layout to match guide. Added roles sidebar to role…

… pages. Updated designer page to use new layout and redirect the old page. Updated roles landing page.

_data/roles.yml

@@ -3,40 +3,40 @@ docs:
 
 - title: Executive
   url: /executive
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Procurement
   url: /procurement
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Developer
   url: /developer
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Product manager
   url: /product-manager
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Project manager
   url: /project-manager
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Operations
   url: /operations
-  description: 
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
-- title: UX designer
-  url: /ux-designer
-  description: 
+- title: Designer
+  url: /designer
+  description:
   icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
 
 - title: Content designer
   url: /content-designer
-  description: 
-  icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>
+  description:
+  icon: <i class="fas fa-power-off fa-5x" aria-hidden="true"></i>

_layouts/role-default.html

@@ -0,0 +1,30 @@
+---
+layout: default
+main:
+class:
+---
+{% include breadcrumbs.html %}
+</div>
+<div class="guide-main">
+  <div class="">
+    <div class="grid-container">
+      <div class="grid-row grid-gap">
+        {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
+        {% if sidenav %}
+        <div class="usa-layout-docs__sidenav desktop:grid-col-3{% if page.sticky_sidenav %} usa-sticky-sidenav{% endif %}">
+          {% include sidenav-roles.html links=sidenav %}
+        </div>
+        {% endif %}
+        <div class="usa-layout-docs anchor-links usa-layout-docs__main usa-prose{% if sidenav %} desktop:grid-col-9{% endif %}">
+          {% if page.title %}
+          <h1>{{ page.title }}</h1>
+          {% endif %}
+          <!-- content -->
+          {% include anchor_headings.html html=content anchorBody="<span aria-hidden='true'>
+                    <svg class='usa-icon' aria-hidden='true' focusable='false' role='img'><use xlink:href='/assets/uswds-icons/sprite.svg#link'></use></svg>
+                </span><span class='sr-only'>Anchor link</span>" anchorClass="anchor-link" anchorAttrs="aria-labelledby=%html_id%" h_max=3 %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

_layouts/role.html

@@ -18,6 +18,12 @@
     <div class="">
         <div class="grid-container">
             <div class="grid-row grid-gap flex-align-start">
+                {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
+                {% if sidenav %}
+                <div class="usa-layout-docs__sidenav desktop:grid-col-3{% if page.sticky_sidenav %} usa-sticky-sidenav{% endif %}">
+                    {% include sidenav-roles.html links=sidenav %}
+                </div>
+                {% endif %}
                 <div class="usa-layout-docs usa-layout-docs__main usa-prose{% if sidenav %} desktop:grid-col-9{% endif %}">
                     <div class="expand-all-accordion"><button class="expand usa-button" onClick='expandingAccordions(this)' aria-live="polite" aria-expanded="false" data-open="false">Expand All</button></div>
 

_roles/designer.md

@@ -1,20 +1,13 @@
 ---
-layout: role
+layout: role-default
 title: Designer
 description: Learn the accessibility roles of designers in product development, including UX design, visual design, and user research.
 excerpt: 
 sidenav: docs
+redirect_from:
+  - /roles/ux-designer
 categories:
   - Design
-hero:
-  image: 
-  callout:
-    alt:
-    text: "Designer"
-  link:
-    text: Link to more about that priority
-    href: /link/
-  content: Accessibility resources for designers.
 ---
 
 The practice of design has an important role to play in moving accessibility thinking earlier in the product development process ("shifting left"). Design encompasses a wide variety of tasks and skills. Depending on their area of expertise, a designer could plan and write content, conduct research, or create visual mockups. These types of duties are usually broken down into three main categories.