Add option to show a back button to Navigation and View components (#51)

Author: arnaugiralt

components/src/stories/Navigation.stories.js

@@ -8,11 +8,14 @@ export const Component = {
     setup() {
       return { args };
     },
-    template: '<ui-nav v-bind="args" @click-tab="setTab"><div slot="actions"><button>Action Button (slot example)</button></div></ui-nav>',
+    template: '<ui-nav v-bind="args" @click-tab="setTab" @go-back="goBack"><div slot="actions"><button>Action Button (slot example)</button></div></ui-nav>',
     methods: {
       setTab({ detail }) {
         this.args.currentTab = detail;
       },
+      goBack() {
+        alert('The back button was clicked!');
+      },
     },
   }),
 
@@ -24,6 +27,7 @@ export const Component = {
       { value: 'first', label: 'First tab' },
       { value: 'second', label: 'Second tab' },
     ],
+    showBackButton: false,
   },
 };
 
@@ -43,5 +47,6 @@ export default {
       control: 'select',
       options: Component.args.tabs.map(v => v.value),
     },
+    showBackButton: 'boolean',
   },
 };

components/src/stories/View.stories.js

@@ -9,12 +9,18 @@ export const Component = {
       return { args };
     },
     template: `
-      <ui-view v-bind="args">
+      <ui-view v-bind="args" @go-back="goBack">
         <div slot="loader">Loader slot: Loading...</div>
         <div slot="actions"><button>Action Button (slot example)</button></div>
         <div slot="first"><p>First tab content</p></div>
         <div slot="second"><p>Second tab content</p></div>
-      </ui-view>`,
+      </ui-view>
+    `,
+    methods: {
+      goBack() {
+        alert('The back button was clicked!');
+      },
+    },
   }),
 
   args: {
@@ -27,6 +33,7 @@ export const Component = {
       { value: 'first', label: 'First tab' },
       { value: 'second', label: 'Second tab' },
     ],
+    showBackButton: false,
   },
 };
 
@@ -45,5 +52,6 @@ export default {
       control: 'object',
     },
     currentTab: 'text',
+    showBackButton: 'boolean',
   },
 };

components/src/widgets/navigation/widget.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="navigation-bar">
+    <button
+      v-if="showBackButton"
+      class="navigation-bar__back-button"
+      @click="$emit('go-back')"
+    >
+      <ui-icon
+        color="#666666"
+        icon-name="googleArrowBackBaseline"
+        size="24"
+      />
+    </button>
     <div
       v-if="assistiveTitle"
       class="navigation-bar__page-title-holder"
@@ -42,9 +53,11 @@
 
 <script>
 import tabs from '~widgets/tabs/widget.vue';
+import icon from '~widgets/icon/widget.vue';
 import registerWidget from '~core/registerWidget';
 
 registerWidget('ui-tabs', tabs);
+registerWidget('ui-icon', icon);
 
 export default {
   props: {
@@ -67,7 +80,14 @@ export default {
       type: String,
       default: '',
     },
+
+    showBackButton: {
+      type: Boolean,
+      default: false,
+    },
   },
+
+  emits: ['go-back'],
 };
 </script>
 
@@ -129,6 +149,25 @@ export default {
     align-items: center;
     flex: 0 0 auto;
   }
+
+  &__back-button {
+    height: 36px;
+    width: 36px;
+    margin: 0 24px 0 -8px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 0;
+    outline: none;
+    border-radius: 2px;
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #e0e0e0;
+    }
+  }
 }
 
 .page-title {

components/src/widgets/view/widget.vue

@@ -12,9 +12,11 @@
         class="c-view__navigation"
         :assistive-title="assistiveTitle"
         :current-tab="activeTab"
+        :show-back-button="showBackButton ? '' : null"
         :title="title"
         .tabs="tabs"
         @click-tab="setCurrentTab"
+        @go-back="$emit('go-back')"
       >
         <slot name="tabs" />
         <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
@@ -80,8 +82,15 @@ export default {
       type: Array,
       default: () => [],
     },
+
+    showBackButton: {
+      type: Boolean,
+      default: false,
+    },
   },
 
+  emits: ['go-back'],
+
   data: () => ({
     activeTab: '',
   }),