feat: update ui shell to 1030 (#1191)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>

packages/core/src/components/cv-button/cv-icon-button.vue

@@ -13,8 +13,9 @@
     type="button"
   >
     <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>
-
-    <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
+    <slot name="icon">
+      <CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
+    </slot>
   </button>
 </template>
 

packages/core/src/components/cv-ui-shell/cv-header-global-action.vue

@@ -1,5 +1,5 @@
 <template>
-  <button
+  <cv-icon-button
     v-on="$listeners"
     :class="[
       `cv-header-global-action`,
@@ -13,20 +13,34 @@
     @click="gaToggle"
     @focusout="gaFocusout"
     :id="uid"
+    :label="label"
+    :tipAlignment="tipAlignment"
+    :tipPosition="tipPosition"
   >
-    <slot />
-  </button>
+    <template slot="icon">
+      <slot />
+    </template>
+  </cv-icon-button>
 </template>
 
 <script>
 import { uidMixin, carbonPrefixMixin } from '../../mixins';
+import { CvIconButton } from '../cv-button';
 
 export default {
+  components: { CvIconButton },
   name: 'CvHeaderGlobalAction',
   mixins: [uidMixin, carbonPrefixMixin],
   props: {
     active: Boolean,
     ariaControls: String,
+    label: { type: String, default: undefined },
+    tipPosition: {
+      type: String,
+      default: 'bottom',
+      validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
+    },
+    tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
   },
   mounted() {
     this.$parent.$emit('cv:panel-control-mounted', this);

packages/core/src/components/cv-ui-shell/cv-side-nav-divider.vue

@@ -0,0 +1,12 @@
+<template>
+  <li :class="`${carbonPrefix}--side-nav__divider`" />
+</template>
+
+<script>
+import { carbonPrefixMixin } from '../../mixins';
+
+export default {
+  name: 'CvSideNavMenuDivider',
+  mixins: [carbonPrefixMixin],
+};
+</script>

packages/core/src/components/cv-ui-shell/cv-ui-shell-notes.md

@@ -176,13 +176,15 @@ Can be added either into the headers 'left-panels' slot or stand alone.
           <cv-side-nav-menu-item href="javascript:void(0)" active>
             L2 menu item
           </cv-side-nav-menu-item>
+          <cv-side-nav-divider />
           <cv-side-nav-menu-item href="javascript:void(0)">
             L2 menu item
           </cv-side-nav-menu-item>
           <cv-side-nav-menu-item href="javascript:void(0)">
             L2 menu item
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
+        <cv-side-nav-divider />
         <cv-side-nav-menu title="L1 menu" expanded>
           <template slot="nav-icon"><Fade16 /></template>
           <cv-side-nav-menu-item href="javascript:void(0)">

packages/core/src/components/cv-ui-shell/index.js

@@ -13,6 +13,7 @@ import CvSideNavLink from './cv-side-nav-link';
 import CvSideNavMenuItem from './cv-side-nav-menu-item';
 import CvSideNavMenu from './cv-side-nav-menu';
 import CvSideNav from './cv-side-nav';
+import CvSideNavDivider from './cv-side-nav-divider';
 import CvSkipToContent from './cv-skip-to-content';
 import CvSwitcherItemLink from './cv-switcher-item-link';
 import CvSwitcherItem from './cv-switcher-item';
@@ -31,6 +32,7 @@ export {
   CvHeaderSideNavItems,
   CvHeader,
   CvSideNav,
+  CvSideNavDivider,
   CvSideNavIcon,
   CvSideNavItems,
   CvSideNavLink,

packages/core/src/index.js

@@ -96,6 +96,7 @@ export {
   CvSideNavMenuItem,
   CvSideNavMenu,
   CvSideNav,
+  CvSideNavDivider,
   CvSkipToContent,
   CvSwitcherItemLink,
   CvSwitcherItem,

storybook/stories/cv-ui-shell-story.js

@@ -18,6 +18,7 @@ import {
   CvHeaderNav,
   CvHeaderPanel,
   CvSideNav,
+  CvSideNavDivider,
   CvSideNavItems,
   CvSideNavLink,
   CvSideNavMenu,
@@ -97,17 +98,32 @@ const preKnobs = {
     <cv-header-global-action
       aria-label="Notifications"
       aria-controls="notifications-panel"
-      @click="actionNotifications" >
+      @click="actionNotifications"
+      label="Notifications"
+      tipPosition="bottom"
+      tipAlignment="start"
+      >
       <Notification20 />
     </cv-header-global-action>
-    <cv-header-global-action aria-label="User avatar" @click="actionUserAvatar" aria-controls="user-panel">
+    <cv-header-global-action
+      aria-label="User avatar"
+      @click="actionUserAvatar"
+      aria-controls="user-panel"
+      label="Log in"
+      tipPosition="bottom"
+      tipAlignment="center"
+      >
       <UserAvatar20 v-if="loggedIn"/>
       <Login20 v-else />
     </cv-header-global-action>
     <cv-header-global-action
       aria-label="App switcher"
       aria-controls="switcher-panel"
-      @click="actionAppSwitcher">
+      @click="actionAppSwitcher"
+      label="App switcher"
+      tipPosition="bottom"
+      tipAlignment="end"
+      >
       <AppSwitcher20 />
     </cv-header-global-action>
   </template>`,
@@ -180,10 +196,12 @@ const preKnobs = {
             L2 menu item
           </cv-side-nav-menu-item>
         </cv-side-nav-menu>
+        <cv-side-nav-divider />
         <cv-side-nav-menu title="L1 menu">
           <cv-side-nav-menu-item href="javascript:void(0)">
             L2 menu item
           </cv-side-nav-menu-item>
+        <cv-side-nav-divider />
           <cv-side-nav-menu-item href="javascript:void(0)" aria-current="page">
             L2 menu item
           </cv-side-nav-menu-item>
@@ -613,6 +631,7 @@ ${settings.group.leftPanels2}
           CvHeaderMenuItem,
           CvHeaderMenuButton,
           CvSideNav,
+          CvSideNavDivider,
           CvSideNavLink,
           CvSideNavMenu,
           CvSideNavItems,