Merge pull request #162 from US-CBP/bugfix/universal-header-logo

Bugfix/universal header logo

packages/web-components/.storybook/preview-head.html

@@ -1,3 +1,4 @@
+<base href="./" target="_self" />
 
 <link rel="stylesheet"  type="text/css" href="assets/css/storybook-canvas.css">
 

packages/web-components/src/components/cbp-button/cbp-button.specs.mdx

@@ -40,4 +40,5 @@ The Button component represents a UI control visually styled like a button (rega
 
 ### Additional Notes and Considerations
 
-* Links/anchors should only be used for navigation; the `button` element is the preferred control for all other types of UI interactions.
+* Links/anchors should only be used for navigation; the `button` element is the preferred control for all other types of UI interactions.
+* If you hide a text label at small screen sizes (e.g., via `cbp-hide`) and only show an icon, the intent is for the button to be shown as the "square" variant. This cannot be handled internally to the component and should be implemented by the application.

packages/web-components/src/components/cbp-hide/cbp-hide.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Host, h } from '@stencil/core';
+import { Component, Prop, Element, Event, EventEmitter, Host, h } from '@stencil/core';
 import { setCSSProps } from '../../utils/utils';
 
 /**
@@ -9,6 +9,9 @@ import { setCSSProps } from '../../utils/utils';
   styleUrl: 'cbp-hide.scss'
 })
 export class CbpHide {
+
+  private hidden=false;
+
   @Element() host: HTMLElement;
 
   /** Specifies the host's display when visible. The default is `inline`, which is the default display of a custom element. */
@@ -28,12 +31,44 @@ export class CbpHide {
   @Prop() sx: any = {};
 
 
+  /** A custom event emitted when the accordion item control is activated. */
+  @Event({
+    eventName: 'hideToggle',
+    cancelable: true,
+    bubbles: true,
+  }) hideToggle: EventEmitter;
+
   // Callback functions for the media query event listeners
   doHideAt(mql) {
-    mql.matches ? this.host.style.setProperty('display', 'none') : this.host.style.setProperty('display', this.display);
+    if (mql.matches) {
+      this.host.style.setProperty('display', 'none')
+      this.hidden=true;
+    }
+    else {
+      this.host.style.setProperty('display', this.display);
+      this.hidden=false;
+    }
+
+    this.hideToggle.emit({
+      host: this.host,
+      hidden: this.hidden,
+    });
   }
+
   doVisuallyHideAt(mql) {
-    mql.matches ? this.host.classList.add('cbp-visually-hidden') : this.host.classList.remove('cbp-visually-hidden');
+    if (mql.matches) {
+      this.host.classList.add('cbp-visually-hidden')
+      this.hidden=true;
+    }
+    else {
+      this.host.classList.remove('cbp-visually-hidden');
+      this.hidden=false;
+    }
+
+    this.hideToggle.emit({
+      host: this.host,
+      hidden: this.hidden,
+    });
   }
 
 

packages/web-components/src/components/cbp-universal-header/cbp-universal-header.stories.tsx

@@ -17,6 +17,7 @@ export default {
   },
 };
 
+
 const UniversalHeaderTemplate = ({ logoSrcLg, logoSrcSm, username, isLoggedIn }) => {
   return `
       <cbp-universal-header
@@ -47,7 +48,11 @@ const UniversalHeaderTemplate = ({ logoSrcLg, logoSrcSm, username, isLoggedIn })
         </cbp-button>
       </li>
       <li>
-        <cbp-button color="secondary" fill="ghost" context="dark-always">
+        <cbp-button
+          color="secondary"
+          fill="ghost"
+          context="dark-always"
+        >
           <cbp-icon name="user"></cbp-icon>
           <cbp-hide
             visually-hide-at="max-width: 64em"
@@ -72,7 +77,7 @@ const UniversalHeaderTemplate = ({ logoSrcLg, logoSrcSm, username, isLoggedIn })
 
 export const UniversalHeader = UniversalHeaderTemplate.bind({});
 UniversalHeader.args = {
-  username: 'John Smithington',
+  username: 'HASHIDX',
   isLoggedIn: true,
 };
 UniversalHeader.argTypes = {