@bloom-housing/ui-components 4.4.1-alpha.15 → 4.4.1-alpha.16

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.4.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.15...@bloom-housing/ui-components@4.4.1-alpha.16) (2022-06-07)
+
+
+### Bug Fixes
+
+* changed aria-selected to aria-current issue [#698](https://github.com/bloom-housing/bloom/issues/698) ([bed1b23](https://github.com/bloom-housing/bloom/commit/bed1b23d63af134542f6760aa70d1ccac87940fa))
+
+
+### Features
+
+* **sidenav component:** update Prototype SideNav Component for Production Usage ([4ae5e5c](https://github.com/bloom-housing/bloom/commit/4ae5e5c159c7150a808df85b2aa47e443256eb5f)), closes [#698](https://github.com/bloom-housing/bloom/issues/698)
+
+
+
+
+
 ## [4.4.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.14...@bloom-housing/ui-components@4.4.1-alpha.15) (2022-06-07)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.4.1-alpha.15",
+  "version": "4.4.1-alpha.16",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -103,5 +103,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "f8fadd88315f05fb2368211eb119cb7a6cf5b153"
+  "gitHead": "24998ae0a2c0566bebd60573d117496967042f71"
 }

package/src/{prototypes → navigation}/SideNav.scss

@@ -3,13 +3,26 @@
   @apply rounded-lg;
 
   li {
-    &:first-of-type a {
+    &:first-of-type {
       @apply rounded-t-lg;
     }
 
-    &:last-of-type a {
+    &:last-of-type {
       @apply rounded-b-lg;
     }
+
+    &.is-current {
+      cursor: pointer;
+      @apply text-gray-900;
+      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
+      @apply block;
+      @apply px-4;
+      @apply py-2;
+    }
+
+    &:not(:last-child) {
+      @apply border-b;
+    }
   }
 
   a {
@@ -17,16 +30,9 @@
     @apply block;
     @apply px-4;
     @apply py-2;
-    @apply border-b;
-
     &:hover {
       @apply bg-primary-lighter;
       @apply text-primary;
     }
-
-    &.is-current {
-      @apply text-gray-900;
-      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
-    }
   }
 }

package/src/navigation/SideNav.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { NavigationContext } from "../config/NavigationContext"
+import "./SideNav.scss"
+
+export interface SideNavItemProps {
+  current?: boolean
+  url: string
+  label: string
+}
+
+export interface SideNavProps {
+  navItems?: SideNavItemProps[]
+}
+
+const SideNav = (props: SideNavProps) => {
+  const { LinkComponent } = React.useContext(NavigationContext)
+
+  return (
+    <nav className="side-nav" aria-label="Secondary navigation">
+      <ul>
+        {props.navItems?.map((navItem: SideNavItemProps, index: number) => {
+          if (navItem.current) {
+            return (
+              <li className="is-current" key={index} aria-current="page">
+                {navItem.label}
+              </li>
+            )
+          }
+          return (
+            <li key={index}>
+              <LinkComponent href={navItem.url}>{navItem.label}</LinkComponent>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
+export { SideNav as default, SideNav }

package/src/prototypes/SideNav.tsx

@@ -1,14 +0,0 @@
-import * as React from "react"
-import "./SideNav.scss"
-
-export interface SideNavProps {
-  children: React.ReactNode[]
-}
-
-const SideNav = (props: SideNavProps) => (
-  <nav className="side-nav" aria-label="Secondary navigation">
-    <ul>{props.children}</ul>
-  </nav>
-)
-
-export { SideNav as default, SideNav }