Updates UI shell

.changeset/six-emus-drop.md

@@ -0,0 +1,5 @@
+---
+"@qiskit/web-components": patch
+---
+
+Updates UI shell 

.gitignore

@@ -7,3 +7,4 @@ components/**/*.js.map
 coverage
 storybook-static/
 experimental-bundled-ui-shell.js
+dist

components/icons/arrow-up-right.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) IBM, Corp. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+
+export const arrowUpRightIcon = html`
+  <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <defs>
+      <style>
+        .cls-1 {
+          fill: none;
+        }
+      </style>
+    </defs>
+    <title>arrow--up-right</title>
+    <polygon
+      points="10 6 10 8 22.59 8 6 24.59 7.41 26 24 9.41 24 22 26 22 26 6 10 6"
+    />
+    <rect
+      id="_Transparent_Rectangle_"
+      data-name="&lt;Transparent Rectangle&gt;"
+      class="cls-1"
+      width="32"
+      height="32"
+    />
+  </svg>
+`;

components/ui-shell/index.scss

@@ -91,10 +91,17 @@ $prefix: "bx";
 
 #{$prefix}-header-name {
   &::part(link) {
-    width: 8.75rem;
+    width: 13.75rem;
     height: calc(var(--header-height) - 1px);
     fill: var(--cool-gray-80);
   }
+
+  .qiskit-header-brand {
+    margin-bottom: -2px;
+    margin-left: var(--cds-spacing-02);
+    color: var(--cool-gray-80);
+    font-weight: normal;
+  }
 }
 
 #{$prefix}-header-nav {
@@ -106,15 +113,6 @@ $prefix: "bx";
   }
 }
 
-#{$prefix}-header-nav-item.#{$q}-user-account-icon {
-  &::part(link),
-  &::part(link):focus,
-  &::part(link):hover {
-    background-color: var(--purple-70);
-    color: var(--cds-ui-background);
-  }
-}
-
 #{$prefix}-header-nav-item::part(link),
 #{$prefix}-header-menu-item::part(link),
 #{$q}-header-menu::part(trigger),
@@ -140,6 +138,11 @@ $prefix: "bx";
   }
 }
 
+#{$prefix}-header-nav-item::part(title),
+#{$prefix}-side-nav-link::part(title) {
+  display: flex;
+}
+
 :host(#{$q}-header-menu) {
   /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
   @extend :host(#{$prefix}-header-menu);
@@ -174,6 +177,13 @@ $prefix: "bx";
   }
 }
 
+.menu-item-icon {
+  align-self: end;
+  width: 16px;
+  margin-bottom: -2px;
+  margin-left: 4px;
+}
+
 :host(#{$q}-header-menu-mega) {
   /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
   @extend :host(#{$prefix}-header-menu);
@@ -297,20 +307,6 @@ $prefix: "bx";
   }
 }
 
-#{$prefix}-side-nav-link.#{$q}-user-account-icon {
-  &::part(link):hover,
-  &::part(link) {
-    height: 3rem;
-    text-decoration-color: var(--purple-70);
-  }
-
-  &::part(title) {
-    display: flex;
-    align-items: center;
-    color: var(--purple-70);
-  }
-}
-
 #{$prefix}-side-nav-link {
   &::part(link) {
     min-height: var(--sidenav-item-height);

components/ui-shell/index.stories.ts

@@ -32,14 +32,3 @@ export const Default = () =>
     ></qiskit-ui-shell>
     <div class="content">${content}</div>
   `;
-
-export const HideAccount = () =>
-  html`
-    <qiskit-ui-shell
-      variant="hide-account"
-      @on-click="${(e: CustomEvent) => {
-        alert(`label: ${e.detail?.label}, url: ${e.detail?.url}`);
-      }}"
-    ></qiskit-ui-shell>
-    <div class="content">${content}</div>
-  `;

components/ui-shell/index.ts

@@ -6,30 +6,21 @@
  */
 
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import '@carbon/web-components/es/components/ui-shell/index.js';
 import './header/index.js';
 
 import styles from './index.scss';
-import { Variant, NAV_ITEMS, SOCIAL_LINKS } from './settings.js';
+import { NAV_ITEMS, SOCIAL_LINKS } from './settings.js';
 import type { NavItem } from './settings.js';
 import { qiskitLogoIcon } from '../icons/qiskit-logo.js';
-import { userIcon } from '../icons/user.js';
-
-const LEARN_BASE_URL =
-  window.origin === 'https://qiskit.org'
-    ? 'https://learn.qiskit.org'
-    : window.origin;
 
 @customElement('qiskit-ui-shell')
 export class QiskitUIShell extends LitElement {
   static styles = [styles];
 
-  @property({ type: String })
-  variant: Variant = Variant.DEFAULT;
-
   private _NAV_ITEMS = NAV_ITEMS;
   private _SOCIAL_LINKS = SOCIAL_LINKS;
 
@@ -38,21 +29,19 @@ export class QiskitUIShell extends LitElement {
       <bx-header aria-label="Qiskit">
         <div class="qiskit-header-content">
           <bx-header-name
-            href="https://qiskit.org/"
+            href="https://qiskit.org/advocates"
             @click="${() => {
               this._handleClick({
                 label: 'Home',
-                url: 'https://qiskit.org',
+                url: 'https://qiskit.org/advocates',
               });
             }}"
           >
             ${qiskitLogoIcon}
+            <div class="qiskit-header-brand">Community</div>
           </bx-header-name>
           <bx-header-nav menu-bar-label="Qiskit">
             ${this._getHeaderItems()}
-            ${this.variant === Variant.HIDE_ACCOUNT
-              ? null
-              : this._getAccountHeaderNavItem()}
           </bx-header-nav>
           <qiskit-header-menu-button
             button-label-active="Close menu"
@@ -67,12 +56,7 @@ export class QiskitUIShell extends LitElement {
         usage-mode="header-nav"
         tabindex="-1"
       >
-        <bx-side-nav-items>
-          ${this._getSideNavItems()}
-          ${this.variant === Variant.HIDE_ACCOUNT
-            ? null
-            : this._getAccountSideNavLink()}
-        </bx-side-nav-items>
+        <bx-side-nav-items> ${this._getSideNavItems()} </bx-side-nav-items>
         <div class="qiskit-side-nav-footer">
           <div class="qiskit-side-nav-footer__social-container">
             <p class="qiskit-side-nav-footer__social-heading">Stay connected</p>
@@ -107,6 +91,7 @@ export class QiskitUIShell extends LitElement {
         }}"
       >
         ${item?.label}
+        <div class="menu-item-icon">${item?.icon}</div>
       </bx-header-nav-item>
     `;
   }
@@ -137,23 +122,6 @@ export class QiskitUIShell extends LitElement {
     `;
   }
 
-  private _getAccountHeaderNavItem() {
-    return html`
-      <bx-header-nav-item
-        href="${LEARN_BASE_URL}/account/"
-        class="qiskit-user-account-icon"
-        @click="${() => {
-          this._handleClick({
-            label: 'Account',
-            url: `${LEARN_BASE_URL}/account/`,
-          });
-        }}"
-      >
-        ${userIcon}
-      </bx-header-nav-item>
-    `;
-  }
-
   private _getSideNavItems() {
     return this._NAV_ITEMS.map((item) => {
       if (item?.children) {
@@ -173,6 +141,7 @@ export class QiskitUIShell extends LitElement {
         }}"
       >
         ${item?.label}
+        <div class="menu-item-icon">${item?.icon}</div>
       </bx-side-nav-link>
       <bx-side-nav-divider></bx-side-nav-divider>
     `;
@@ -210,23 +179,6 @@ export class QiskitUIShell extends LitElement {
     `;
   }
 
-  private _getAccountSideNavLink() {
-    return html`
-      <bx-side-nav-link
-        href="${LEARN_BASE_URL}/account/"
-        class="qiskit-user-account-icon"
-        @click="${() => {
-          this._handleClick({
-            label: 'Account',
-            url: `${LEARN_BASE_URL}/account/`,
-          });
-        }}"
-      >
-        ${userIcon} <span>Profile</span>
-      </bx-side-nav-link>
-    `;
-  }
-
   private _getSocialLinks() {
     return this._SOCIAL_LINKS.map(
       (link) =>