@energie360/ui-library 0.1.39 → 0.1.40

package/components/card-contact/card-contact.scss

@@ -13,17 +13,17 @@
   flex-direction: column;
 }
 
-.card-contact__name {
-  @include a.type(700, strong);
-}
-
 .card-contact__role {
   @include a.type(200);
+}
+
+.card-contact__name {
+  @include a.type(700, strong);
 
   margin-top: var(--e-space-1);
 
   &:has(+ .card-contact__contacts) {
-    margin-bottom: var(--e-space-4);
+    margin-bottom: var(--e-space-2);
   }
 }
 

package/components/card-contact/u-card-contact.vue

@@ -21,16 +21,16 @@ defineSlots<{
 <template>
   <div class="card-contact">
     <div class="card-contact__left-column">
-      <p class="card-contact__name">
-        <slot name="name">{{ name }}</slot>
-      </p>
-
       <p class="card-contact__role">
         <slot name="role">{{ role }}</slot>
       </p>
 
+      <p class="card-contact__name">
+        <slot name="name">{{ name }}</slot>
+      </p>
+
       <div v-if="$slots.contacts || contacts" class="card-contact__contacts">
-        <URichtext>
+        <URichtext small>
           <slot name="contacts">
             <div v-html="contacts"></div>
           </slot>

package/components/portal-logo/portal-logo.scss

@@ -13,6 +13,21 @@
     opacity: 0;
   }
 
+  // Modifiers
+  &.fit-height {
+    height: 100%;
+
+    .large {
+      aspect-ratio: 49 / 10;
+      height: 100%;
+    }
+
+    .mini {
+      aspect-ratio: 1;
+      height: 100%;
+    }
+  }
+
   // States
   &.minified {
     .mini {

package/components/portal-logo/u-portal-logo.vue

@@ -7,6 +7,7 @@ interface Props {
   minified?: boolean
   minifying?: boolean
   expanding?: boolean
+  fitHeight?: boolean
 }
 
 const {
@@ -22,7 +23,7 @@ const {
 </script>
 
 <template>
-  <div :class="['portal-logo', { minified, minifying, expanding }]">
+  <div :class="['portal-logo', { minified, minifying, expanding, 'fit-height': fitHeight }]">
     <img v-bind="logoImage" class="large" />
     <img v-bind="logoMinifiedImage" class="mini" />
   </div>

package/components/tabs/tabs.scss

@@ -101,3 +101,13 @@
     }
   }
 }
+
+.tabs.portal {
+  .tabs__row {
+    padding-left: var(--e-space-2);
+
+    @include a.bp(lg) {
+      padding-left: var(--e-space-5);
+    }
+  }
+}

package/components/tabs/u-tabs.vue

@@ -13,9 +13,10 @@ interface Props {
   activation?: 'manual' | 'automatic'
   items?: Tab[]
   noGradient?: boolean
+  variant: 'default' | 'portal'
 }
 
-const { items = [], activation = 'manual' } = defineProps<Props>()
+const { items = [], activation = 'manual', variant = 'portal' } = defineProps<Props>()
 const emit = defineEmits<{ (e: 'tabFocus', id: string): void }>()
 
 const model = defineModel<string>()
@@ -122,7 +123,7 @@ onResize()
 </script>
 
 <template>
-  <div :class="['tabs', { 'no-gradient': noGradient }]">
+  <div :class="['tabs', variant, { 'no-gradient': noGradient }]">
     <div class="tabs__row">
       <div class="tabs__col">
         <div class="tabs__wrapper">

package/layout/portal-block/portal-block.scss

@@ -42,4 +42,16 @@
   &:last-child {
     margin-bottom: 0;
   }
+
+  // Modifiers
+  &.fill-centered {
+    flex: 1 0 auto;
+    display: flex;
+    width: 100%;
+    align-items: center;
+
+    .portal-block__inner {
+      width: 100%;
+    }
+  }
 }

package/layout/portal-block/u-portal-block.vue

@@ -2,20 +2,31 @@
 /*
 Preferably only use `bottom-space`.
 `top-space` can make sense for last portal-block for example.
-This works because parent container is `display: block`, meaning that the vertical margins will collapse.
+IMPORTANT: Because when the parent container (e.g., `.portal-main__content`) is flexbox, the vertical margins won't collapse.
+Also, `fill-centered` will only work with a flexbox parent.
  */
 interface Props {
   big?: boolean
   bottomSpace?: '0' | '100' | '300' | '500' | '700'
   topSpace?: '0' | '100' | '300' | '500' | '700'
+  fillCentered?: boolean
 }
 
-const { bottomSpace = '100', topSpace = '0' } = defineProps<Props>()
+const { bottomSpace = '100', topSpace = '0', fillCentered = false } = defineProps<Props>()
 </script>
 
 <template>
-  <div :class="['portal-block', `bottom-space-${bottomSpace}`, `top-space-${topSpace}`]">
-    <slot />
+  <div
+    :class="[
+      'portal-block',
+      `bottom-space-${bottomSpace}`,
+      `top-space-${topSpace}`,
+      { 'fill-centered': fillCentered },
+    ]"
+  >
+    <div class="portal-block__inner">
+      <slot />
+    </div>
   </div>
 </template>
 

package/layout/portal-main/portal-main.scss

@@ -82,6 +82,9 @@
   padding-top: var(--e-space-10);
   padding-bottom: var(--e-space-10);
   flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
 
   @include c.portal-content-container;
 

package/modules/navigation-toolbar-top/navigation-toolbar-top.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-toolbar-top {
   --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
@@ -74,8 +74,10 @@
 }
 
 .navigation-toolbar-top__top-bar-logo {
+  height: a.rem(24);
+
   img {
-    height: a.rem(24);
+    height: 100%;
   }
 }
 

package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue

@@ -93,13 +93,13 @@ watch(model, (newV) => {
     ]"
   >
     <div class="navigation-toolbar-top__top-bar">
-      <a
-        class="navigation-toolbar-top__top-bar-logo"
-        :href="logoLink.href"
-        :target="logoLink.target"
-      >
-        <img :src="logoImage.src" :alt="logoImage.alt" />
-      </a>
+      <div class="navigation-toolbar-top__top-bar-logo">
+        <slot name="logo">
+          <a :href="logoLink.href" :target="logoLink.target">
+            <img :src="logoImage.src" :alt="logoImage.alt" />
+          </a>
+        </slot>
+      </div>
 
       <div class="navigation-toolbar-top__top-bar-ctas">
         <UContextMenu placement="bottom-full">
@@ -125,13 +125,13 @@ watch(model, (newV) => {
       class="navigation-toolbar-top__nav-panel"
       :class="{ 'is-opening': isMobilePanelOpening, 'is-closing': isMobilePanelClosing }"
     >
-      <a
-        class="navigation-toolbar-top__nav-panel-logo"
-        :href="logoLink.href"
-        :target="logoLink.target"
-      >
-        <img :src="logoImage.src" :alt="logoImage.alt" />
-      </a>
+      <div class="navigation-toolbar-top__nav-panel-logo">
+        <slot name="panelLogo">
+          <a :href="logoLink.href" :target="logoLink.target">
+            <img :src="logoImage.src" :alt="logoImage.alt" />
+          </a>
+        </slot>
+      </div>
 
       <div class="navigation-toolbar-top__nav-panel-close">
         <UIconButton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.39",
+  "version": "0.1.40",
   "description": "",
   "type": "module",
   "main": "dist/index.js",