@webitel/ui-sdk 2.0.15-2 → 2.0.15-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.15-2",
+  "version": "2.0.15-3",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/index.js

@@ -40,6 +40,7 @@ import WtFiltersPanelWrapper from './organisms/wt-filters-panel-wrapper/wt-filte
 import WtHeaderActions from './organisms/wt-app-header/wt-header-actions.vue';
 import WtErrorPage from './organisms/wt-error-page/wt-error-page.vue';
 import WtHeadline from './organisms/wt-headline/wt-headline.vue';
+import WtHeadlineNav from './organisms/wt-headline-nav/wt-headline-nav.vue';
 import WtNavigationBar from './organisms/wt-navigation-bar/wt-navigation-bar.vue';
 import WtNotificationsBar from './organisms/wt-notifications-bar/wt-notifications-bar.vue';
 import WtPageWrapper from './organisms/wt-page-wrapper/wt-page-wrapper.vue';
@@ -84,6 +85,7 @@ const Components = {
   WtTextarea,
   WtAppHeader,
   WtHeadline,
+  WtHeadlineNav,
   WtNavigationBar,
   WtAppNavigator,
   WtFiltersPanelWrapper,

package/src/components/organisms/wt-headline-nav/__tests__/wt-headline-nav.spec.js

@@ -0,0 +1,13 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeadlineNav from '../wt-headline-nav.vue';
+
+describe('WtHeadlineNav', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeadlineNav, {
+      propsData: {
+        path: [],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/organisms/wt-headline-nav/wt-headline-nav.vue

@@ -0,0 +1,85 @@
+<template>
+  <nav class="wt-headline-nav">
+    <div
+      class="wt-headline-nav__wrapper"
+      v-for="(singlePath, key) of path"
+      :key="key"
+    >
+      <span v-if="key !== 0" class="wt-headline-nav__indicator"></span>
+      <h1 class="wt-headline-nav__title">
+        <router-link
+          v-if="singlePath.route"
+          class="wt-headline-nav__text wt-headline-nav__title-link"
+          :to="singlePath.route"
+        >{{ singlePath.name }}
+        </router-link>
+        <span v-else class="wt-headline-nav__text">{{ singlePath.name }}</span>
+      </h1>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'wt-headline-nav',
+  props: {
+    path: {
+      type: Array,
+      required: true,
+      // PATH EXAMPLE
+      // default: () => [
+      //   { name: 'directory' },
+      //   { name: 'users', route: '/directory/users' },
+      //   { name: 'adm', route: '/directory/users/3' },
+      // ],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-headline-nav {
+  display: flex;
+  align-items: center;
+}
+
+.wt-headline-nav__wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.wt-headline-nav__indicator {
+  display: inline-block;
+  width: var(--headline-nav-indicator-size);
+  height: var(--headline-nav-indicator-size);
+  margin: 0 var(--headline-nav-indicator-margin);
+  background: var(--icon-color);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.wt-headline-nav__title {
+  @extend %typo-subtitle-1;
+}
+
+.wt-headline-nav__text {
+  color: var(--text-outline-color);
+}
+
+.wt-headline-nav__wrapper:last-child {
+  min-width: 0;
+
+  .wt-headline-nav__indicator {
+    background: var(--icon-color-accent);
+  }
+
+  .wt-headline-nav__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .wt-headline-nav__text {
+    color: var(--text-primary-color);
+  }
+}
+</style>

package/src/css/components/_components.scss

@@ -32,6 +32,7 @@
 @import "molecules/wt-button-select/variables";
 
 @import "organisms/wt-headline/variables";
+@import "organisms/wt-headline-nav/variables";
 @import "organisms/wt-app-header/variables";
 @import "organisms/wt-navigation-bar/variables";
 @import "organisms/wt-notifications-bar/variables";

package/src/css/components/organisms/wt-headline-nav/_variables.scss

@@ -0,0 +1,5 @@
+
+:root {
+  --headline-nav-indicator-size: 6px;
+  --headline-nav-indicator-margin: 19px;
+}