Fix differences between vertical nav HTML and React versions (#336)

CMSgov · Feb 20, 2019 · cb2c449 · cb2c449
1 parent 57b2bea
commit cb2c449
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/packages/core/src/components/VerticalNav/VerticalNav.example.jsx b/packages/core/src/components/VerticalNav/VerticalNav.example.jsx
@@ -7,26 +7,44 @@ ReactDOM.render(
     selectedId="team"
     items={[
       {
-        label: 'Home',
+        label: 'Parent link',
         url: 'javascript:void(0);'
       },
       {
-        label: 'About',
+        label: 'Current page',
+        selected: true,
         items: [
           {
-            id: 'team',
-            label: 'Team',
+            id: 'childlink1',
+            label: 'Child link',
             url: 'javascript:void(0);'
           },
           {
-            id: 'company',
-            label: 'Company',
+            label: 'Child link',
+            selected: true,
+            items: [
+              {
+                id: 'grandchildlink1',
+                label: 'Grandchild link',
+                url: 'javascript:void(0);'
+              },
+              {
+                id: 'grandchildlink2',
+                label: 'Grandchild link',
+                url: 'javascript:void(0);',
+                selected: true
+              }
+            ]
+          },
+          {
+            id: 'childlink3',
+            label: 'Child link',
             url: 'javascript:void(0);'
           }
         ]
       },
       {
-        label: 'Contact',
+        label: 'Parent link',
         url: 'javascript:void(0);'
       }
     ]}

diff --git a/packages/core/src/components/VerticalNav/VerticalNav.scss b/packages/core/src/components/VerticalNav/VerticalNav.scss
@@ -13,13 +13,13 @@ Markup:
     <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Parent link</a>
   </li>
   <li class="ds-c-vertical-nav__item">
-    <a class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current" href="javascript:void(0);">Current page</a>
+    <button class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent" title="Collapse sub-navigation" aria-expanded="true">Current page</button>
     <ul class="ds-c-vertical-nav__subnav">
       <li class="ds-c-vertical-nav__item">
         <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
       </li>
       <li class="ds-c-vertical-nav__item">
-        <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
+        <button class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent" title="Collapse sub-navigation" aria-expanded="true">Child link</button>
         <ul class="ds-c-vertical-nav__subnav">
           <li class="ds-c-vertical-nav__item">
             <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Grandchild link</a>