@energie360/ui-library 0.1.14 → 0.1.16

package/base/abstracts/_layers.scss

@@ -2,5 +2,6 @@
 // z-index layers
 $layer-tooltip: 100;
 $layer-nav-flyout: 200;
+$layer-nav-panel: 200;
 $layer-mobile-menu: 200;
 $layer-message: 300;

package/base/abstracts/_resets.scss

@@ -7,5 +7,6 @@
     font-family: inherit;
     font-size: inherit;
     background: none;
+    text-align: left;
   }
 }

package/components/card-header/card-header.scss

@@ -9,6 +9,38 @@ $image-col-width-small: 100px;
   display: flex;
   column-gap: var(--e-space-2);
 
+  .image-background {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: var(--e-c-primary-01-100);
+    border-radius: 100%;
+  }
+
+  .badge {
+    @include a.type(100, strong);
+
+    position: absolute;
+    padding: a.rem(6) a.rem(8) a.rem(4);
+    color: var(--e-c-mono-00);
+    background-color: var(--e-c-secondary-05-500);
+    border-radius: var(--e-brd-radius-1);
+    top: a.rem(-16);
+    right: a.rem(-16);
+
+    @include a.bp(m) {
+      top: a.rem(-12);
+      right: a.rem(-12);
+    }
+
+    @include a.bp(s) {
+      top: a.rem(-10);
+      right: a.rem(-10);
+    }
+  }
+
   @container (max-width: 260px) {
     flex-direction: column-reverse;
   }
@@ -64,35 +96,3 @@ $image-col-width-small: 100px;
     flex-basis: a.rem($image-col-width-small);
   }
 }
-
-.image-background {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  aspect-ratio: 1;
-  background-color: var(--e-c-primary-01-100);
-  border-radius: 100%;
-}
-
-.badge {
-  @include a.type(100, strong);
-
-  position: absolute;
-  padding: a.rem(6) a.rem(8) a.rem(4);
-  color: var(--e-c-mono-00);
-  background-color: var(--e-c-secondary-05-500);
-  border-radius: var(--e-brd-radius-1);
-  top: a.rem(-16);
-  right: a.rem(-16);
-
-  @include a.bp(m) {
-    top: a.rem(-12);
-    right: a.rem(-12);
-  }
-
-  @include a.bp(s) {
-    top: a.rem(-10);
-    right: a.rem(-10);
-  }
-}

package/components/context-menu/context-menu.scss

@@ -15,6 +15,7 @@
   box-shadow: var(--e-elevation-md);
   background-color: var(--e-c-mono-00);
   min-width: a.rem(240);
+  z-index: a.$layer-tooltip;
 }
 
 .menu-enter-active,

package/components/hint/hint.scss

@@ -0,0 +1,126 @@
+@use '../../base/abstracts' as a;
+@use '../../elements/text-link/text-link.scss' as t;
+
+.hint {
+  @mixin type-neutral {
+    background-color: var(--e-c-secondary-05-100);
+    color: var(--e-c-secondary-05-900);
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
+    }
+
+    // override some richtext styles.
+    .richtext {
+      a {
+        font-size: 100px;
+        color: inherit;
+
+        &:active,
+        &:hover {
+          text-decoration-color: var(--e-c-secondary-05-200);
+        }
+      }
+    }
+  }
+
+  @mixin type-warning {
+    background-color: var(--e-c-signal-02-100);
+    color: var(--e-c-signal-02-900);
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
+    }
+
+    // override some richtext styles.
+    .richtext {
+      a {
+        color: inherit;
+
+        &:active,
+        &:hover {
+          text-decoration-color: var(--e-c-signal-02-100);
+        }
+      }
+    }
+  }
+
+  @mixin type-legal {
+    background-color: var(--e-c-mono-00);
+    border: 1px solid var(--e-c-mono-500);
+    border-left-width: 4px;
+    border-left-color: var(--e-c-mono-700);
+    color: var(--e-c-mono-900);
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
+      top: 0;
+      left: calc(
+        -24px - 12px - 4px
+      ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+    }
+
+    > p,
+    .richtext {
+      margin-left: 0;
+    }
+
+    @include a.bp(lg) {
+      margin-top: calc(4px + 4px + 24px);
+      border: 1px solid var(--e-c-mono-500);
+      border-top-width: 4px;
+      border-top-color: var(--e-c-mono-700);
+
+      &::before {
+        left: 0;
+        top: calc(
+          -24px - 4px - 4px
+        ); // 24px: icon height, 12px: distance to box, 4px: additonal border-width
+      }
+    }
+  }
+
+  // Default type
+  @include type-neutral;
+
+  position: relative;
+  padding: var(--e-space-5) var(--e-space-4);
+  border-radius: var(--e-brd-radius-1);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--e-space-5);
+    left: var(--e-space-4);
+    width: a.rem(24);
+    height: a.rem(24);
+  }
+
+  > p,
+  .richtext {
+    margin-left: var(--e-space-9);
+  }
+
+  > p {
+    @include a.type(200, strong);
+
+    margin-bottom: var(--e-space-1);
+  }
+
+  @include a.bp(lg) {
+    padding: var(--e-space-4);
+
+    &::before {
+      top: var(--e-space-4);
+    }
+  }
+
+  // Modifiers
+  &.hint--warning {
+    @include type-warning;
+  }
+
+  &.hint--legal {
+    @include type-legal;
+  }
+}

package/components/hint/u-hint.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { URichtext } from '../'
+
+interface Props {
+  type?: 'neutral' | 'warning' | 'legal'
+  label?: string
+  text?: string
+}
+
+const { type = 'neutral' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['hint', `hint--${type}`]">
+    <p class="hint__label">
+      <slot name="label">{{ label }}</slot>
+    </p>
+
+    <URichtext class="hint__richtext" small :text><slot></slot></URichtext>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./hint.scss"></style>
+
+<style lang="scss">
+.hint__richtext {
+  a {
+    color: inherit;
+
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-secondary-05-200);
+    }
+  }
+}
+
+.hint--warning {
+  .hint__richtext a {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-02-100);
+    }
+  }
+}
+
+.hint--legal {
+  .hint__richtext a {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-mono-100);
+    }
+  }
+}
+</style>

package/components/index.js

@@ -49,3 +49,5 @@ export { default as UContextMenuDivider } from './context-menu-divider/u-context
 export { default as UCircularProgress } from './circular-progress/u-circular-progress.vue'
 export { default as UProgressAvatar } from './progress-avatar/u-progress-avatar.vue'
 export { default as UWelcome } from './welcome/u-welcome.vue'
+export { default as UHint } from './hint/u-hint.vue'
+export { default as UNavigationPanelTile } from './navigation-panel-tile/u-navigation-panel-tile.vue'

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

@@ -74,7 +74,9 @@ defineExpose({ collapse })
       <div class="inline-edit__heading-col">
         <p :id="headingId" class="inline-edit__title">{{ title }}</p>
 
-        <p class="inline-edit__summary" v-html="summary"></p>
+        <p class="inline-edit__summary">
+          <slot name="summary">{{ summary }}</slot>
+        </p>
         <p class="inline-edit__description" v-html="description"></p>
       </div>
       <div class="inline-edit__heading-cta-col">

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

@@ -0,0 +1,105 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-panel-tile {
+  display: flex;
+  column-gap: var(--e-space-2);
+  align-items: flex-start;
+  border: 2px solid var(--e-c-secondary-01-100);
+  border-radius: var(--e-brd-radius-2);
+  padding: var(--e-space-4);
+  transition: background-color a.$trs-ease-out;
+  background-color: var(--e-c-mono-00);
+
+  &.active:not(.disabled) {
+    background-color: var(--e-c-secondary-01-1000);
+    border-color: var(--e-c-secondary-01-1000);
+
+    .navigation-panel-tile__title,
+    .navigation-panel-tile__description,
+    .navigation-panel-tile__icon-wrapper {
+      color: var(--e-c-mono-00);
+    }
+  }
+
+  &.greyed:not(.disabled, :hover, .active) {
+    background-color: var(--e-c-mono-50);
+    border-color: var(--e-c-mono-200);
+  }
+
+  &.disabled {
+    pointer-events: none;
+    border-color: var(--e-c-mono-200);
+
+    .navigation-panel-tile__title,
+    .navigation-panel-tile__description,
+    .navigation-panel-tile__icon-wrapper {
+      color: var(--e-c-mono-500);
+    }
+  }
+
+  &:hover {
+    background-color: var(--e-c-primary-01-50);
+
+    .navigation-panel-tile__title,
+    .navigation-panel-tile__description {
+      color: var(--e-c-primary-01-700);
+    }
+  }
+
+  &:active {
+    background-color: var(--e-c-primary-01-100);
+  }
+
+  @include a.bp(lg) {
+    height: a.rem(82);
+    width: a.rem(260);
+  }
+}
+
+.navigation-panel-tile__title {
+  @include a.type(200, strong);
+
+  transition: color a.$trs-ease-out;
+}
+
+.navigation-panel-tile__icon-wrapper {
+  position: relative;
+  transition: color a.$trs-ease-out;
+}
+
+.navigation-panel-tile__description {
+  @include a.type(100);
+
+  color: var(--e-c-mono-700);
+  transition: color a.$trs-ease-out;
+
+  @include a.bp(lg) {
+    width: a.rem(192);
+    height: a.rem(22);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: a.rem(13);
+  height: a.rem(13);
+  background-color: var(--e-c-mono-900);
+  border-radius: 100%;
+
+  &.inactive {
+    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.5' cy='6.5' r='6.5' fill='%23333'/%3E%3Cpath d='m4.414 3 2.12 2.121L8.658 3l1.414 1.414-2.122 2.122 2.122 2.121-1.414 1.414-2.122-2.12-2.12 2.12L3 8.656l2.12-2.12L3 4.412 4.414 3Z' fill='%23fff'/%3E%3C/svg%3E");
+  }
+}
+
+.navigation-panel-tile__text-column {
+  flex: 1 1 auto;
+}
+
+.badge + .icon {
+  color: var(--e-c-mono-500);
+}

package/components/navigation-panel-tile/u-navigation-panel-tile.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UIcon } from '../../elements'
+
+type IconBadge = 'inactive'
+
+interface Props {
+  active?: boolean
+  description?: string
+  disabled?: boolean
+  greyed?: boolean
+  href?: string
+  icon?: string
+  iconBadge?: IconBadge
+  target?: string
+  title?: string
+}
+
+const {
+  href = '',
+  target = '_self',
+  active = false,
+  disabled = false,
+  greyed = false,
+} = defineProps<Props>()
+
+const tag = computed(() => (href ? 'a' : 'div'))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :href="tag === 'a' ? href : null"
+    :target="tag === 'a' ? target : null"
+    :class="['navigation-panel-tile', { active, disabled, greyed }]"
+  >
+    <div class="navigation-panel-tile__text-column">
+      <div class="navigation-panel-tile__title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div class="navigation-panel-tile__description">
+        <slot name="description">
+          <div v-if="description" v-html="description" />
+        </slot>
+      </div>
+    </div>
+
+    <div class="navigation-panel-tile__icon-column">
+      <div v-if="icon" class="navigation-panel-tile__icon-wrapper">
+        <span v-if="iconBadge" :class="['badge', iconBadge]" />
+
+        <UIcon :name="icon" />
+      </div>
+    </div>
+  </component>
+</template>
+
+<style lang="scss" scoped src="./navigation-panel-tile.scss"></style>
+<style lang="scss">
+@use '../../base/abstracts/' as a;
+
+.navigation-panel-tile__description {
+  @include a.bp(lg) {
+    p {
+      width: a.rem(192);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    br {
+      content: '';
+
+      &::after {
+        content: ' ';
+      }
+    }
+  }
+}
+</style>

package/components/navigation-toolbar-link/navigation-toolbar-link.scss

@@ -1,8 +1,6 @@
-// TODO: How to handle text overflow?
-
 @use '../../base/abstracts/' as a;
 
-@keyframes fadeInLabel {
+@keyframes fade-in-label {
   0% {
     opacity: 0;
     transform: translateX(calc(100% + #{a.rem(8)}));
@@ -14,7 +12,7 @@
   }
 }
 
-@keyframes fadeOutLabel {
+@keyframes fade-out-label {
   0% {
     opacity: 1;
     transform: translateX(100%);
@@ -36,7 +34,7 @@
   0% {
     overflow: hidden;
     padding: var(--e-space-1_5) var(--e-space-3);
-    width: 100%;
+    width: var(--nav-toolbar-link-width);
   }
 
   100% {
@@ -56,11 +54,13 @@
   100% {
     overflow: hidden;
     padding: var(--e-space-1_5) var(--e-space-3);
-    width: 100%;
+    width: var(--nav-toolbar-link-width);
   }
 }
 
 .navigation-toolbar-link {
+  // We assume that the width of the link is fixed.
+  --nav-toolbar-link-width: #{a.rem(232)};
   --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
 
   position: relative;
@@ -71,7 +71,7 @@
   align-items: center;
   flex-wrap: nowrap;
   white-space: nowrap;
-  width: 100%;
+  width: var(--nav-toolbar-link-width);
   column-gap: var(--e-space-2);
   background-color: var(--e-c-secondary-01-1000);
   color: var(--e-c-mono-00);
@@ -124,7 +124,7 @@
     &.hover-out:not(.is-expanding, .is-collapsing, .label-hidden) {
       .navigation-toolbar-link__label {
         // TODO: Maybe just use transitions instead of keyframe animations
-        animation-name: fadeOutLabel;
+        animation-name: fade-out-label;
         animation-duration: var(--e-trs-duration-faster);
         animation-timing-function: ease-out;
       }
@@ -132,10 +132,9 @@
 
     &:hover:not(.is-expanding, .is-collapsing, .label-hidden) {
       .navigation-toolbar-link__label {
-        animation-name: fadeInLabel;
+        animation-name: fade-in-label;
         animation-duration: var(--e-trs-duration-faster);
         animation-timing-function: ease-out;
-
         padding: var(--e-space-1_5) var(--e-space-2);
         transform: translateX(100%);
         width: auto;
@@ -146,16 +145,29 @@
   }
 }
 
+.navigation-toolbar-link__label {
+  // internal CSS variable
+  --label-width: calc(
+    var(--nav-toolbar-link-width) - var(--e-space-2) - 24px - 2 * var(--e-space-3)
+  );
+
+  width: var(--label-width);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 // Animation
 .navigation-toolbar-link {
   &.is-collapsing,
   &.is-expanding {
     animation-duration: var(--e-trs-duration-faster);
 
+    // animation-duration: 5s;
+
     .navigation-toolbar-link__label {
       animation: none;
       position: static;
-      width: auto;
+      width: var(--label-width);
       height: auto;
       opacity: 1;
       background-color: transparent;

package/components/navigation-toolbar-link/u-navigation-toolbar-link.vue

@@ -99,7 +99,7 @@ const tag = computed(() => {
     @mouseleave="onHoverOut"
   >
     <UIcon :name="icon" />
-    <span ref="label" class="navigation-toolbar-link__label">
+    <span ref="label" class="navigation-toolbar-link__label" :title="label">
       <slot>{{ label }}</slot>
     </span>
   </component>

package/components/richtext/_wizard.scss

@@ -0,0 +1,26 @@
+@use '../../base/abstracts' as a;
+
+.richtext.richtext--wizard {
+  // Spacing rules
+  * + * {
+    margin-top: var(--e-spac-2);
+  }
+
+  * + h2,
+  * + h3,
+  * + .richtext__title-large,
+  * + .richtext__title-small {
+    margin-top: var(--e-space-6);
+  }
+
+  h2,
+  .richtext__title-large {
+    @include a.type(300, strong);
+
+    color: var(--e-c-mono-900);
+
+    @include a.bp(lg) {
+      @include a.type(200, strong);
+    }
+  }
+}

package/components/richtext/richtext.scss

@@ -1,5 +1,5 @@
-@use '../../base/abstracts/' as a;
-@use '../../elements/text-link/text-link.scss' as t;
+@use '../../base/abstracts' as a;
+@use './wizard';
 
 .richtext {
   // Spacing rules
@@ -74,7 +74,21 @@
   }
 
   a {
-    @include t.text-link;
+    font-weight: var(--e-type-weight-strong);
+    color: var(--e-c-primary-01-700);
+    text-decoration: underline;
+    text-underline-offset: 0.3em;
+    transition:
+      text-decoration-color a.$trs-default,
+      color a.$trs-default;
+
+    &:hover {
+      text-decoration-color: var(--e-c-primary-01-50);
+    }
+
+    &:active {
+      text-decoration-color: var(--e-c-primary-01-700);
+    }
   }
 
   ul,
@@ -168,7 +182,15 @@
     }
 
     a {
-      @include t.text-link--inverted;
+      color: var(--e-c-primary-01-50);
+
+      &:hover {
+        text-decoration-color: var(--e-c-primary-01-200);
+      }
+
+      &:active {
+        text-decoration-color: var(--e-c-primary-01-50);
+      }
     }
 
     ul > li::before {

package/components/richtext/u-richtext.vue

@@ -16,6 +16,4 @@ const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': i
   <div v-else :class="classes"><slot></slot></div>
 </template>
 
-<style lang="scss">
-@use './richtext.scss';
-</style>
+<style lang="scss" src="./richtext.scss"></style>

package/components/welcome/welcome.scss

@@ -2,6 +2,7 @@
 
 .welcome-container {
   @include a.type(500, strong);
+
   background-color: var(--e-c-primary-01-100);
   border-radius: var(--e-brd-radius-2);
   color: var(--e-c-primary-01-950);

package/dist/base-style.css

@@ -61,6 +61,7 @@ button {
   font-family: inherit;
   font-size: inherit;
   background: none;
+  text-align: left;
 }
 
 ul,