feat: navbar custom widths and image only support

CHANGELOG.md

@@ -29,6 +29,7 @@ All notable changes to this project will be documented in this file. The format
   - New unit summary breaks down units by both type and rent ([#1253](https://github.com/bloom-housing/bloom/pull/1253)) (Emily Jablonski)
   - Custom exclusive preference options ([#1272](https://github.com/bloom-housing/bloom/pull/1272)) (Emily Jablonski)
   - Optionally hide preferences from Listing page ([#1280](https://github.com/bloom-housing/bloom/pull/1280)) (Emily Jablonski)
+  - Add ability for site header logo to have custom widths, image only ([#1346](https://github.com/bloom-housing/bloom/pull/1346)) (Emily Jablonski)
 
 - Fixed:
 

ui-components/src/config/NavigationContext.tsx

@@ -35,6 +35,7 @@ export const NavigationContext = createContext<NavigationContextProps>({
         e.preventDefault()
         alert(`You clicked: ${props.href}`)
       }}
+      {...props.aria}
     >
       {props.children}
     </a>

ui-components/src/global/navbar.scss

@@ -41,15 +41,42 @@ nav.navbar {
 
 .navbar-brand {
   @apply relative;
+  @apply justify-start;
+
+  @screen print {
+    @apply justify-center;
+  }
+}
+
+.navbar-image-only {
+  max-height: 80% !important; // Unfortunately we need this to overrwrite Bulma, reccomend removing Bulma #1345
+  max-width: 100%;
+}
+
+.navbar-custom-width {
+  @apply flex;
+  @apply items-center;
   @apply justify-center;
+  @apply flex-col;
+}
 
+.navbar-image-only-container {
+  height: 50px;
   @screen md {
-    @apply justify-start;
+    height: 120px;
   }
+}
 
-  @screen print {
-    @apply justify-center;
-  }
+.navbar-width-slim {
+  width: 200px;
+}
+
+.navbar-width-med {
+  width: 450px;
+}
+
+.navbar-width-wide {
+  width: 600px;
 }
 
 .navbar-brand .logo {
@@ -59,6 +86,8 @@ nav.navbar {
   @apply z-10;
   @apply items-center;
   @apply justify-center;
+  max-width: 60%;
+  max-height: 120px;
 
   @screen md {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
@@ -75,14 +104,6 @@ nav.navbar {
     margin-top: 0;
   }
 
-  &.slim {
-    @apply w-40;
-  }
-
-  &.normal {
-    @apply w-56;
-  }
-
   &.navbar-item,
   &.navbar-item:hover,
   &.navbar-item:focus {

ui-components/src/headers/SiteHeader.stories.tsx

@@ -7,13 +7,100 @@ import { AppearanceSizeType } from "../global/AppearanceTypes"
 export default {
   title: "Headers/Site Header",
 }
- 
+
 export const standard = () => (
   <SiteHeader
     logoSrc="/images/logo_glyph.svg"
     notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
-    title="Site Title Here"
+    title="Alameda County Housing Portal"
+    skip="Skip to content"
+  >
+    <a href="#" className="navbar-item">
+      Hello World
+    </a>
+  </SiteHeader>
+)
+
+export const standardSlim = () => (
+  <SiteHeader
+    logoSrc="/images/logo_glyph.svg"
+    notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
+    title="Housing Portal"
+    skip="Skip to content"
+    logoWidth={"slim"}
+  >
+    <a href="#" className="navbar-item">
+      Hello World
+    </a>
+  </SiteHeader>
+)
+
+export const standardMedium = () => (
+  <SiteHeader
+    logoSrc="/images/logo_glyph.svg"
+    notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
+    title="Alameda County Housing Portal"
+    skip="Skip to content"
+    logoWidth={"medium"}
+  >
+    <a href="#" className="navbar-item">
+      Hello World
+    </a>
+  </SiteHeader>
+)
+
+export const standardWide = () => (
+  <SiteHeader
+    logoSrc="/images/logo_glyph.svg"
+    notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
+    title="Dahlia San Francisco Housing Portal"
     skip="Skip to content"
+    logoWidth={"wide"}
+  >
+    <a href="#" className="navbar-item">
+      Hello World
+    </a>
+  </SiteHeader>
+)
+
+export const imageOnlySlim = () => (
+  <SiteHeader
+    logoSrc="/images/listing.jpg"
+    imageOnly={true}
+    title={"Image Alt Text"}
+    notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
+    skip="Skip to content"
+    logoWidth={"slim"}
+  >
+    <a href="#" className="navbar-item">
+      Hello World
+    </a>
+  </SiteHeader>
+)
+
+export const imageOnlyMedium = () => (
+  <SiteHeader
+    logoSrc="/images/listing.jpg"
+    imageOnly={true}
+    title={"Image Alt Text"}
+    notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
+    skip="Skip to content"
+    logoWidth={"medium"}
+  >
+    <a href="#" className="navbar-item">
+      Hello World
+    </a>
+  </SiteHeader>
+)
+
+export const imageOnlyWide = () => (
+  <SiteHeader
+    logoSrc="/images/listing.jpg"
+    imageOnly={true}
+    title={"Image Alt Text"}
+    notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
+    skip="Skip to content"
+    logoWidth={"wide"}
   >
     <a href="#" className="navbar-item">
       Hello World
@@ -25,7 +112,7 @@ export const withDropdownAndButton = () => (
   <SiteHeader
     logoSrc="/images/logo_glyph.svg"
     notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
-    title="Site Title Here"
+    title="Alameda County Housing Portal"
     skip="Skip to content"
   >
     <a href="#" className="navbar-item">
@@ -61,23 +148,24 @@ export const withLanguageNavigation = () => (
   <SiteHeader
     logoSrc="/images/logo_glyph.svg"
     notice="This is a preview of our new website. We're just getting started. We'd love to get your feedback."
-    title="Site Title Here"
+    title="Alameda County Housing Portal"
     skip="Skip to content"
-    languages={
-      [
+    language={{
+      list: [
         {
           prefix: "",
-          label: "English"
+          label: "English",
         },
         {
           prefix: "es",
-          label: "Spanish"
-        }
-      ]
-    }
+          label: "Spanish",
+        },
+      ],
+      codes: [],
+    }}
   >
     <a href="#" className="navbar-item">
       Hello World
     </a>
   </SiteHeader>
-)
+)