@energie360/ui-library 0.1.41 → 0.1.43

package/components/card-amount-illustrated/card-amount-illustrated.scss

@@ -26,7 +26,7 @@
   top: 0;
   right: 0;
   aspect-ratio: 5/2;
-  width: 85px;
+  width: 76px;
   z-index: 1;
 }
 

package/components/card-price/card-price.scss

@@ -18,7 +18,7 @@ $image-width-small: 100px;
   }
 
   .card-price__subtext {
-    color: var(--e-c-mono-500);
+    color: var(--e-c-mono-700);
 
     @include a.type(200);
   }

package/components/hint/u-hint.vue

@@ -39,9 +39,11 @@ const iconMap = {
         <slot name="label">{{ label }}</slot>
       </span>
 
-      <a v-if="link" :href="link.href" :target="link.target" class="hint__link">
-        {{ link.label }}
-      </a>
+      <slot v-if="hasSlotContent($slots.link) || link" name="link">
+        <a :href="link.href" :target="link.target" class="hint__link">
+          {{ link.label }}
+        </a>
+      </slot>
     </p>
 
     <URichtext v-if="text || $slots.default" class="hint__richtext" small :text>
@@ -51,6 +53,66 @@ const iconMap = {
 </template>
 
 <style scoped lang="scss" src="./hint.scss"></style>
+<style scoped lang="scss">
+@use '../../elements/text-link/text-link.scss' as t;
+@use '../../base/abstracts' as a;
+
+.hint__label {
+  :slotted(a) {
+    @include t.text-link;
+
+    display: inline-block;
+    color: inherit;
+    margin-left: var(--e-space-2);
+
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-secondary-05-200);
+    }
+
+    @include a.bp(lg) {
+      display: block;
+      margin-left: 0;
+    }
+  }
+}
+
+.hint.hint--warning .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-02-100);
+    }
+  }
+}
+
+.hint.hint--legal .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-mono-100);
+    }
+  }
+}
+
+.hint.hint--error .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+}
+
+.hint.hint--task .hint__label {
+  :slotted(a) {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+}
+</style>
 
 <style lang="scss">
 .hint__richtext {

package/components/inline-edit/u-inline-edit.vue

@@ -60,13 +60,25 @@ if (activeEdit) {
 
 const collapse = () => {
   expanded.value = false
+  emit('collapsed')
 
   if (update) {
     update('')
   }
 }
 
-defineExpose({ collapse })
+const expand = () => {
+  expanded.value = true
+  emit('expanded')
+
+  update && update(editId)
+
+  setTimeout(() => {
+    rootEl.value.scrollIntoView()
+  }, 80)
+}
+
+defineExpose({ collapse, expand })
 </script>
 
 <template>

package/components/navigation-panel-tile/navigation-panel-tile.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .navigation-panel-tile {
   display: flex;
@@ -26,6 +26,12 @@
     border-color: var(--e-c-mono-200);
   }
 
+  &.greyed {
+    .navigation-panel-tile__icon-wrapper {
+      color: var(--e-c-mono-500);
+    }
+  }
+
   &.disabled {
     pointer-events: none;
     border-color: var(--e-c-mono-200);

package/components/notification-list/notification-list.scss

@@ -7,9 +7,9 @@
     // This vertical centered style only works in the portal-main layout.
     // It's not really possible to do this "correctly" at the moment, because `portal-main__content` is `display: block`.
     // With `display: flex` it would work, but this would need some refactoring.
-    position: relative;
-    top: 50%;
-    transform: translateY(-100%);
+    // position: relative;
+    // top: 50%;
+    // transform: translateY(-100%);
   }
 }
 

package/elements/button/_button-filled-inverted.scss

@@ -12,7 +12,7 @@
     --icon-fill-color: var(--e-c-primary-01-700);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-primary-01-100);
     border-color: var(--e-c-primary-01-100);
     color: var(--e-c-secondary-01-700);

package/elements/button/_button-filled.scss

@@ -13,7 +13,7 @@
     --dot-color: var(--e-c-mono-00);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-secondary-01-900);
     border-color: var(--e-c-secondary-01-900);
   }

package/elements/button/_button-outlined-inverted.scss

@@ -13,8 +13,8 @@
     --dot-color: var(--e-c-mono-00);
   }
 
-  &:hover {
-    background-color: rgba(var(--e-c-primary-01-900-rgb), 0.7);
+  &:hover:not(.no-hover) {
+    background-color: rgb(var(--e-c-primary-01-900-rgb), 0.7);
     border-color: var(--e-c-primary-01-200);
   }
 

package/elements/button/_button-outlined.scss

@@ -13,7 +13,7 @@
     --dot-color: var(--e-c-primary-01-500);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-primary-01-50);
     border-color: var(--e-c-primary-01-200);
   }

package/elements/button/_button-plain.scss

@@ -4,13 +4,13 @@
   background: none;
   border: 0;
   text-decoration: none;
-  grid-gap: var(--e-space-1);
+  gap: var(--e-space-1);
 
   .icon {
     --icon-fill-color: var(--e-c-primary-01-700);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     color: var(--e-c-secondary-01-900);
 
     .icon {

package/elements/button/_button-secondary-outlined.scss

@@ -13,7 +13,7 @@
     --dot-color: var(--e-c-secondary-02-500);
   }
 
-  &:hover {
+  &:hover:not(.no-hover) {
     background-color: var(--e-c-secondary-02-50);
     border-color: var(--e-c-secondary-02-200);
   }

package/elements/button/button.scss

@@ -22,7 +22,7 @@
   @include button-base;
 
   // ---- PRIMARY ----
-  & {
+  &.filled {
     @include button-filled;
   }
 
@@ -81,6 +81,10 @@
     white-space: nowrap;
   }
 
+  &.no-hover {
+    cursor: default;
+  }
+
   // In some cases we need to force full width of a button.
   // Is mostly the case when the button is wrapped by another element.
   &.full-width {

package/elements/button/u-button.vue

@@ -17,6 +17,7 @@ interface ButtonProps {
   fullWidth?: boolean
   hideLabelM?: boolean
   hideLabelLg?: boolean
+  noHover?: boolean
 }
 
 const {
@@ -26,6 +27,7 @@ const {
   href = '',
   target = '',
   asSpan = false,
+  noHover = false,
 } = defineProps<ButtonProps>()
 
 const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
@@ -42,6 +44,7 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
           'full-width': fullWidth,
           'hide-label-m': hideLabelM,
           'hide-label-lg': hideLabelLg,
+          'no-hover': noHover,
         },
       ]"
       :href
@@ -71,6 +74,7 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
           'full-width': fullWidth,
           'hide-label-m': hideLabelM,
           'hide-label-lg': hideLabelLg,
+          'no-hover': noHover,
           loading: loading,
           disabled,
         },

package/elements/select-chip/u-select-chip.vue

@@ -28,7 +28,12 @@ const { onChange } = useRadio({ model, provideKey })
       :class="[
         'select-chip__button',
         'button',
-        { filled: model === value && !disabled, outlined: model !== value || disabled, disabled },
+        {
+          filled: model === value && !disabled,
+          outlined: model !== value || disabled,
+          disabled,
+          'no-hover': model === value,
+        },
       ]"
     >
       <UIcon v-if="model === value" name="check" />

package/layout/portal-content-aside/portal-content-aside.scss

@@ -3,7 +3,18 @@
 .portal-content-aside-container {
   container-type: inline-size;
 
-  @container (width <= 1020px) {
+  @container (width <= 880px) {
+    .portal-content-aside {
+      row-gap: var(--e-space-6);
+      column-gap: var(--e-space-8);
+    }
+
+    .portal-content-aside {
+      grid-template-columns: auto a.rem(280);
+    }
+  }
+
+  @container (width <= 700px) {
     .portal-content-aside {
       display: flex;
       flex-direction: column;
@@ -16,14 +27,8 @@
   display: grid;
   grid-template-columns: auto a.rem(320);
   grid-template-rows: repeat(2, auto);
-  grid-column-gap: var(--e-space-24);
-  grid-row-gap: var(--e-space-12);
-
-  // @include a.bp(lg) {
-  //   display: flex;
-  //   flex-direction: column;
-  //   row-gap: var(--e-space-6);
-  // }
+  column-gap: var(--e-space-24);
+  row-gap: var(--e-space-12);
 }
 
 .portal-content-aside__main {

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

@@ -4,7 +4,7 @@ import { UIconButton } from '../../elements'
 import { UContextMenu } from '../../components'
 import { Image } from '../../elements/types'
 import { getTranslation } from '../../utils/translations/translate'
-import { ref, watch, useTemplateRef } from 'vue'
+import { ref, watch, useTemplateRef, onUnmounted } from 'vue'
 
 interface MenuButton {
   icon: string
@@ -80,6 +80,11 @@ watch(model, (newV) => {
     closePanel()
   }
 })
+
+onUnmounted(() => {
+  // In case of re-render, remove this class from <html> tag.
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', false)
+})
 </script>
 
 <template>

package/modules/toast/toast-message.scss

@@ -36,7 +36,7 @@
     }
 
     .toast-message__inner {
-      background-color: var(--e-c-signal-01-700);
+      background-color: var(--e-c-signal-01-900);
     }
   }
 
@@ -46,7 +46,7 @@
     }
 
     .toast-message__inner {
-      background-color: var(--e-c-signal-03-700);
+      background-color: var(--e-c-signal-03-900);
     }
   }
 

package/modules/toast/toast.scss

@@ -3,12 +3,14 @@
 .toast {
   z-index: a.$layer-message;
   position: fixed;
-  bottom: var(--e-space-6);
-  left: 0;
+  bottom: var(--toast-offset-bottom);
+  padding-left: var(--toast-margin-left);
+  padding-right: var(--toast-margin-left);
+  left: var(--toast-offset-left);
   display: flex;
   flex-direction: column-reverse;
-  align-items: center;
-  width: 100%;
-  grid-gap: var(--e-space-4);
+  align-items: var(--toast-align);
+  width: calc(100% - var(--toast-offset-left));
+  gap: var(--e-space-4);
   pointer-events: none;
 }

package/modules/toast/u-toast-message.vue

@@ -22,23 +22,21 @@ const close = () => dismiss(id)
 
 <template>
   <div :class="['toast-message', type, { 'fade-in': fadeIn }]">
-    <div class="container">
-      <div class="toast-message__inner">
-        <div class="toast-message__icon">
-          <UIcon :name="MessageType[type]"></UIcon>
-        </div>
-        <div ref="message" class="toast-message__message">
-          {{ message }}
-        </div>
-        <button
-          class="toast-message__close-button"
-          type="button"
-          aria-label="Close message"
-          @click="close"
-        >
-          <UIcon name="close"></UIcon>
-        </button>
+    <div class="toast-message__inner">
+      <div class="toast-message__icon">
+        <UIcon :name="MessageType[type]"></UIcon>
       </div>
+      <div ref="message" class="toast-message__message">
+        {{ message }}
+      </div>
+      <button
+        class="toast-message__close-button"
+        type="button"
+        aria-label="Close message"
+        @click="close"
+      >
+        <UIcon name="close"></UIcon>
+      </button>
     </div>
   </div>
 </template>

package/modules/toast/u-toast.vue

@@ -30,3 +30,18 @@ import { toasts } from './useToast'
 </style>
 
 <style scoped lang="scss" src="./toast.scss"></style>
+<style lang="scss">
+:root {
+  // Values
+  --toast-align-center: center;
+  --toast-align-left: flex-start;
+  --toast-align-right: flex-end;
+
+  // Default Settings
+  --toast-align: var(--toast-align-center);
+  --toast-margin-left: var(--e-space-5);
+  --toast-margin-right: var(--e-space-5);
+  --toast-offset-left: 0px;
+  --toast-offset-bottom: var(--e-space-6);
+}
+</style>

package/package.json

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