OHRM5X-2573: Add a slot in OXD layout topbar right

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ohrm/oxd",
   "license": "GPL-3.0",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": true,
   "scripts": {
     "dev": "storybook dev -p 6006",

src/components/Icon/map.ts

@@ -62,3 +62,4 @@ export {default as bolt} from './svg/bolt-svg.vue';
 export {default as timeAlt} from './svg/time-alt-svg.vue';
 export {default as edit} from './svg/edit-svg.vue';
 export {default as claim} from './svg/claim-svg.vue';
+export {default as upgrade} from './svg/upgrade-svg.vue';

src/components/Icon/svg/upgrade-svg.vue

@@ -0,0 +1,31 @@
+<!--
+/*
+ * This file is part of OrangeHRM Inc
+ *
+ * Copyright (C) 2020 onwards OrangeHRM Inc
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see  http://www.gnu.org/licenses
+ */
+-->
+
+<template>
+  <g transform="matrix(13, 0, 0, 15, 50, 0)">
+    <path
+      d="M21,24H11a2,2,0,0,0-2,2v2a2,2,0,0,0,2,2H21a2,2,0,0,0,2-2V26A2,2,0,0,0,21,24Zm0,4H11V26H21Z"
+    />
+    <path
+      d="M28.707,14.293l-12-12a.9994.9994,0,0,0-1.414,0l-12,12A1,1,0,0,0,4,16H9v4a2.0023,2.0023,0,0,0,2,2H21a2.0027,2.0027,0,0,0,2-2V16h5a1,1,0,0,0,.707-1.707ZM21,14v6H11V14H6.4141L16,4.4141,25.5859,14Z"
+    />
+  </g>
+</template>

src/components/Layout/Layout.vue

@@ -38,6 +38,9 @@
         :menu-items="topbarMenuItems"
         @collapse="onCollapse"
       >
+        <template #topbar-header-right-area>
+          <slot name="topbar-header-right-area"></slot>
+        </template>
         <template #user-context>
           <slot name="user-actions"></slot>
         </template>

src/components/Layout/stories/Layout.stories.js

@@ -18,6 +18,7 @@
  */
 import LayoutSimple from './LayoutSimple.story.vue';
 import LayoutComplex from './LayoutComplex.story.vue';
+import LayoutWithButton from '@/components/Layout/stories/LayoutWithButton.vue';
 
 export default {
   title: 'Example/Layout',
@@ -42,3 +43,13 @@ Complex.parameters = {
     iframeHeight: 720,
   },
 };
+
+export const Button = () => LayoutWithButton;
+
+Button.parameters = {
+  layout: 'fullscreen',
+  docs: {
+    inlineStories: false,
+    iframeHeight: 720,
+  },
+};

src/components/Layout/stories/LayoutWithButton.vue

@@ -0,0 +1,151 @@
+<!--
+/*
+ * This file is part of OrangeHRM Inc
+ *
+ * Copyright (C) 2020 onwards OrangeHRM Inc
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see  http://www.gnu.org/licenses
+ */
+-->
+
+<template>
+  <oxd-layout
+    :user="user"
+    context-title="Personal Information Manager"
+    :sidepanel-menu-items="sidepanelMenuItems"
+    :topbar-menu-items="topbarMenuItems"
+    :brand-logo-src="brandLogoSrc"
+    :brand-banner-src="brandBannerSrc"
+    :breadcrumb="breadcrumb"
+    :show-upgrade="true"
+    upgrade-label="Upgrade"
+    upgrade-url="https://orangehrm.com"
+  >
+    <p class="context-default">slot for context</p>
+    <template #topbar-header-right-area>
+      <div class="orangehrm-slot-button-container">
+        <a class="orangehrm-slot-button-link" href="https://orangehrm.com">
+          <oxd-glass-button
+            label="OHRM"
+            size="large"
+            class="orangehrm-slot-button-button"
+          >
+            <template #icon>
+              <oxd-icon
+                type="svg"
+                name="upgrade"
+                class="orangehrm-slot-button-icon"
+              ></oxd-icon>
+            </template>
+          </oxd-glass-button>
+        </a>
+      </div>
+    </template>
+    <template #user-actions>
+      <li role="none">
+        <a href="#" role="menuitem" class="oxd-userdropdown-link"> Logout </a>
+      </li>
+    </template>
+    <template #nav-actions>
+      <oxd-icon-button name="question-lg" />
+    </template>
+    <template #footer>
+      <p class="context-footer">slot for footer</p>
+      <br />
+    </template>
+  </oxd-layout>
+</template>
+
+<script>
+import {topMenuItems, sidePanelItems, breadcrumb} from './mockdata';
+import Layout from '@/components/Layout/Layout.vue';
+import IconButton from '@/components/Button/Icon.vue';
+import {OxdGlassButton, OxdIcon} from '@/index';
+
+export default {
+  name: 'LayoutWithUpgrade',
+
+  components: {
+    'oxd-layout': Layout,
+    'oxd-icon-button': IconButton,
+    'oxd-glass-button': OxdGlassButton,
+    'oxd-icon': OxdIcon,
+  },
+
+  data() {
+    return {
+      brandLogoSrc: '/images/orange.png',
+      brandBannerSrc: '/images/orangehrm-logo.png',
+      user: {
+        firstName: 'Jeff',
+        lastName: 'Winger',
+        profImgSrc: '/images/user-default-400.png',
+      },
+      sidepanelMenuItems: sidePanelItems,
+      topbarMenuItems: topMenuItems,
+      breadcrumb: breadcrumb,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.context-default {
+  background-color: rgba(255, 0, 0, 0.37);
+  text-align: center;
+  padding: 25% 0;
+}
+.context-footer {
+  background-color: rgb(160 210 249);
+  text-align: center;
+  margin: 0 3rem;
+}
+
+::v-deep(.oxd-topbar-header-userarea) {
+  margin-left: unset;
+  align-self: center;
+}
+
+.orangehrm-slot-button {
+  &-container {
+    margin-left: auto;
+  }
+
+  &-link {
+    text-decoration: inherit;
+    color: inherit;
+    cursor: auto;
+  }
+
+  &-button {
+    font-size: 0rem;
+    padding-top: 0.9rem;
+    padding-bottom: 0.9rem;
+    padding-left: 1rem;
+    padding-right: 0.4rem;
+    align-self: center;
+    @include oxd-respond-to('md') {
+      color: $oxd-primary-one-color;
+      font-size: 1.1rem;
+      white-space: nowrap;
+      padding-right: 1rem;
+    }
+  }
+
+  &-icon {
+    color: $oxd-primary-one-color;
+    scale: 1.5;
+  }
+}
+</style>

src/components/Topbar/Topbar.vue

@@ -42,6 +42,7 @@
           </oxd-text>
         </span>
       </div>
+      <slot name="topbar-header-right-area"></slot>
       <!-- User Menu Area -->
       <div class="oxd-topbar-header-userarea">
         <ul>