@energie360/ui-library 0.1.32 → 0.1.34

package/base/_resets.scss

@@ -58,3 +58,7 @@ fieldset {
   margin: 0;
   border: 0;
 }
+
+legend {
+  padding: 0;
+}

package/components/badge/badge.scss

@@ -31,11 +31,18 @@ $ease-out-bounce: cubic-bezier(0.674, 1.901, 0.651, 0.744);
 }
 
 .badge__sup.number {
-  width: 16px;
+  min-width: 16px;
   height: 16px;
   font-size: 10px;
   font-weight: bold;
-  line-height: 1;
+  line-height: 10px;
+  letter-spacing: 0;
+  border-radius: 24px;
+  text-align: center;
+  padding: 0 2px;
+  top: var(--top, -5px);
+  right: var(--right, 3px);
+  transform: translateX(50%);
 }
 
 .badge__sup.state {
@@ -48,8 +55,8 @@ $ease-out-bounce: cubic-bezier(0.674, 1.901, 0.651, 0.744);
 }
 
 .badge__sup.dot {
-  top: var(--top, -3px);
-  right: var(--right, -3px);
+  top: var(--top, -1px);
+  right: var(--right, -1px);
   width: 8px;
   height: 8px;
   border-radius: 100%;

package/components/badge/u-badge.vue

@@ -2,11 +2,9 @@
 export interface Badge {
   color?: string
   dot?: boolean
-  type?: 'default' | 'success' | 'error' | 'warning' | 'info'
   value?: number
   state?: '' | 'inactive'
   show?: boolean
-  border?: boolean
   top?: number
   right?: number
 }
@@ -17,7 +15,6 @@ const {
   top = 0,
   right = 0,
   color = 'var(--e-c-mono-900)',
-  type = 'default',
   show = true,
 } = defineProps<Badge>()
 </script>
@@ -32,23 +29,16 @@ const {
   >
     <slot></slot>
 
-    <sup
-      v-if="dot"
-      class="badge__sup dot"
-      :class="[`type-${type}`, { border }]"
-      :style="{ backgroundColor: color }"
-    ></sup>
+    <sup v-if="dot" class="badge__sup dot" :style="{ backgroundColor: color }"></sup>
 
     <sup
       v-else-if="state"
       class="badge__sup state"
-      :class="[state, { border }]"
+      :class="[state]"
       :style="{ backgroundColor: color }"
     ></sup>
 
-    <sup v-else class="badge__sup number" :class="{ border }" :style="{ backgroundColor: color }">{{
-      value
-    }}</sup>
+    <sup v-else class="badge__sup number" :style="{ backgroundColor: color }">{{ value }}</sup>
   </span>
 </template>
 

package/components/button-group/button-group.scss

@@ -0,0 +1,12 @@
+// TODO: Check with Design if spacings are ok.
+.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--e-space-2);
+  row-gap: var(--e-space-4);
+}
+
+.button-group.stacked {
+  flex-direction: column;
+  align-items: flex-start;
+}

package/components/button-group/u-button-group.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  type?: 'inline' | 'stacked'
+}
+
+const { type = 'inline' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['button-group', type]">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss" src="./button-group.scss"></style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { UProgressBar } from '../'
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
 
 interface Props {
   progress: number

package/components/card-amount-illustrated/u-card-amount-illustrated.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { UProgressBar } from '../'
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
 import { useTemplateRef, inject, watch, ref, onMounted, onUnmounted } from 'vue'
 import { Image } from '../../elements/types'
 import '@lottiefiles/lottie-player'

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Image } from '../../elements/types'
-import { URichtext } from '../'
+import URichtext from '../richtext/u-richtext.vue'
 
 interface Props {
   name?: string

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Chip } from '../chip/u-chip.vue'
 import { Image } from '../../elements/types'
-import { UIcon } from '../../elements'
-import { UChip } from '../'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UChip from '../chip/u-chip.vue'
 
 interface Props {
   title?: string

package/components/card-price-list/u-card-price-list.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { UIcon } from '../../elements'
-import { UTooltip } from '../'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UTooltip from '../tooltip/u-tooltip.vue'
 
 interface PriceItem {
   name: string

package/components/card-statistic/card-statistic.scss

@@ -0,0 +1,31 @@
+@use '../../base/abstracts' as a;
+
+.card-statistic {
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--e-space-2);
+}
+
+.card-statistic__image {
+  width: 80px;
+  height: 80px;
+  flex: 0 0 auto;
+}
+
+.card-statistic__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.card-statistic__label {
+  @include a.type(200);
+
+  order: 2;
+}
+
+.card-statistic__value {
+  @include a.type(700, strong);
+
+  order: 1;
+}

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+import { hasSlotContent } from '../../utils/vue/helpers'
+
+interface Props {
+  label?: string
+  value?: string
+  image?: Image
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-statistic">
+    <dl class="card-statistic__content">
+      <dt class="card-statistic__label">
+        <slot name="label">{{ label }}</slot>
+      </dt>
+
+      <dd class="card-statistic__value">
+        <slot name="value">{{ value }}</slot>
+      </dd>
+    </dl>
+
+    <div v-if="image || hasSlotContent($slots.image)" class="card-statistic__image">
+      <slot name="image">
+        <img v-bind="image" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./card-statistic.scss"></style>

package/components/chip/chip.scss

@@ -36,6 +36,7 @@
 }
 
 .chip__icon {
+  margin-left: calc(var(--e-space-1) * -1);
   color: var(--chip-icon-color);
 }
 

package/components/chip/u-chip.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// TODO: Rename this component. It's not really a 'chip'.
 import { UIcon } from '../../elements'
 
 export interface Chip {

package/components/data-card/data-card.scss

@@ -24,6 +24,11 @@
 
 .data-card__value {
   @include a.type(100);
+
+  &:has(.data-card__dot) {
+    display: flex;
+    column-gap: var(--e-space-2);
+  }
 }
 
 .data-card__ctas {
@@ -32,3 +37,13 @@
   margin-top: var(--e-space-4);
   line-height: 0;
 }
+
+.data-card__dot {
+  align-self: center;
+  flex: 0 0 auto;
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: transparent;
+}

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

@@ -3,6 +3,7 @@
 interface dataItem {
   heading: string
   value: string
+  dotColor?: string
 }
 
 interface Props {
@@ -23,7 +24,11 @@ defineProps<Props>()
         <slot>
           <div v-for="(item, idx) in data" :key="idx">
             <dt class="data-card__heading">{{ item.heading }}</dt>
-            <dd class="data-card__value" v-html="item.value"></dd>
+            <dd v-if="item.dotColor" class="data-card__value">
+              <span class="data-card__dot" :style="{ backgroundColor: item.dotColor }"></span>
+              <span class="data-card__value" v-html="item.value" />
+            </dd>
+            <dd v-else class="data-card__value" v-html="item.value"></dd>
           </div>
         </slot>
       </dl>

package/components/download-list-item/u-download-list-item.vue

@@ -66,6 +66,7 @@ defineExpose({ click })
     <td class="download-list-item__cell cta">
       <component
         :is="url ? 'a' : 'button'"
+        v-bind="$attrs"
         ref="link"
         class="download-list-item__link"
         :href="url"

package/components/empty/empty.scss

@@ -0,0 +1,27 @@
+@use '../../base/abstracts' as a;
+
+.empty {
+  text-align: center;
+}
+
+.empty__image {
+  margin: 0 auto var(--e-space-6);
+  width: a.rem(120);
+  height: a.rem(120);
+
+  > img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.empty__title {
+  @include a.type(600);
+
+  margin-bottom: var(--e-space-6);
+}
+
+.empty__text {
+  @include a.type(300, strong);
+}

package/components/empty/u-empty.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { hasSlotContent } from '../../utils/vue/helpers'
+
+interface Props {
+  title?: string
+  text?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="empty">
+    <div class="empty__image">
+      <slot name="image">
+        <img src="/static/ui-assets/images/search.svg" alt="" />
+      </slot>
+    </div>
+
+    <p v-if="title || hasSlotContent($slots.title)" class="empty__title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </p>
+
+    <p v-if="text || hasSlotContent($slots.text)" class="empty__text">
+      <slot name="text"> {{ text }} </slot>
+    </p>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./empty.scss"></style>

package/components/hint/hint.scss

@@ -7,10 +7,6 @@
   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");
-  }
-
   .hint__richtext {
     margin-left: var(--e-space-9);
 
@@ -19,6 +15,10 @@
     }
   }
 
+  .hint__icon {
+    color: var(--e-c-secondary-05-500);
+  }
+
   // override some richtext styles.
   .richtext {
     a {
@@ -37,10 +37,6 @@
   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");
-  }
-
   .hint__richtext {
     margin-left: var(--e-space-9);
 
@@ -49,6 +45,10 @@
     }
   }
 
+  .hint__icon {
+    color: var(--e-c-signal-02-500);
+  }
+
   // override some richtext styles.
   .richtext {
     a {
@@ -76,17 +76,18 @@
   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
+  .hint__label,
+  .hint__richtext {
+    margin-left: 0;
   }
 
-  > p,
-  .richtext {
-    margin-left: 0;
+  &.no-label .hint__label {
+    height: 0;
+    min-height: 0;
+
+    @include a.bp(lg) {
+      margin-top: -8px;
+    }
   }
 
   .hint__link {
@@ -96,13 +97,22 @@
     }
   }
 
+  .hint__icon {
+    top: 0;
+    left: calc(
+      -24px - 12px - 4px
+    ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+
+    color: var(--e-c-mono-700);
+  }
+
   @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 {
+    .hint__icon {
       left: 0;
       top: calc(
         -24px - 4px - 4px
@@ -115,10 +125,42 @@
   background-color: var(--e-c-signal-03-100);
   color: var(--e-c-signal-03-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='M15.1396 0C15.4048 0 15.6592 0.105542 15.8467 0.292969L21.707 6.15332C21.8945 6.34084 22 6.59522 22 6.86035V15.1396C22 15.4048 21.8945 15.6592 21.707 15.8467L15.8467 21.707C15.6592 21.8945 15.4048 22 15.1396 22H6.86035C6.59522 22 6.34084 21.8945 6.15332 21.707L0.292969 15.8467C0.105542 15.6592 0 15.4048 0 15.1396V6.86035C0 6.59522 0.105542 6.34084 0.292969 6.15332L6.15332 0.292969C6.34084 0.105542 6.59522 0 6.86035 0H15.1396ZM11 14C10.4477 14 10 14.4477 10 15C10 15.5523 10.4477 16 11 16H11.0098C11.5621 16 12.0098 15.5523 12.0098 15C12.0098 14.4477 11.5621 14 11.0098 14H11ZM11 6C10.4477 6 10 6.44772 10 7V11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11V7C12 6.44772 11.5523 6 11 6Z' fill='%23FF0C3E'/%3E%3C/svg%3E");
+  .hint__richtext {
+    margin-left: var(--e-space-9);
+
+    @include a.bp(lg) {
+      margin-left: 0;
+    }
   }
 
+  // override some richtext styles.
+  .richtext {
+    a {
+      color: inherit;
+
+      &:active,
+      &:hover {
+        text-decoration-color: var(--e-c-signal-03-100);
+      }
+    }
+  }
+
+  .hint__link {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+
+  .hint__icon {
+    color: var(--e-c-signal-03-500);
+  }
+}
+
+@mixin type-task {
+  background-color: var(--e-c-secondary-03-100);
+  color: var(--e-c-signal-03-900);
+
   .hint__richtext {
     margin-left: var(--e-space-9);
 
@@ -127,6 +169,10 @@
     }
   }
 
+  .hint__icon {
+    color: var(--e-c-secondary-03-500);
+  }
+
   // override some richtext styles.
   .richtext {
     a {
@@ -160,7 +206,6 @@
 
     display: inline-block;
     color: inherit;
-    margin-left: var(--e-space-2);
 
     &:active,
     &:hover {
@@ -169,11 +214,19 @@
 
     @include a.bp(lg) {
       display: block;
-      margin-left: 0;
     }
   }
 
   .hint__label {
+    @include a.type(200, strong);
+
+    margin-left: var(--e-space-9);
+
+    @include a.bp(lg) {
+      margin-left: var(--e-space-7);
+      min-height: 24px;
+    }
+
     + .hint__richtext {
       margin-top: var(--e-space-1);
 
@@ -183,29 +236,35 @@
     }
   }
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: var(--e-space-5);
-    left: var(--e-space-4);
-    width: a.rem(24);
-    height: a.rem(24);
-  }
-
-  > p {
-    @include a.type(200, strong);
+  .hint__label-text + .hint__link {
+    margin-left: var(--e-space-2);
 
-    margin-left: var(--e-space-9);
+    @include a.bp(lg) {
+      margin-left: 0;
+    }
   }
 
   @include a.bp(lg) {
     padding: var(--e-space-4);
 
-    &::before {
+    .hint__icon {
       top: var(--e-space-4);
     }
   }
 
+  // States
+  &.no-label {
+    .hint__label {
+      // This gives same layout as when `.hint__label` was removed from DOM.
+      // We can't remove it because wew need this element for mobile layout.
+      margin-top: -4px;
+
+      @include a.bp(lg) {
+        margin-top: 0;
+      }
+    }
+  }
+
   // Modifiers
   &.hint--warning {
     @include type-warning;
@@ -218,4 +277,16 @@
   &.hint--error {
     @include type-error;
   }
+
+  &.hint--task {
+    @include type-task;
+  }
+}
+
+.hint__icon {
+  position: absolute;
+  top: var(--e-space-5);
+  left: var(--e-space-4);
+  width: a.rem(24);
+  height: a.rem(24);
 }

package/components/hint/u-hint.vue

@@ -1,21 +1,43 @@
 <script setup lang="ts">
-import { URichtext } from '../'
+import URichtext from '../richtext/u-richtext.vue'
 import { Cta } from '../../elements/types'
+import { hasSlotContent } from '../../utils/vue/helpers'
+import UIcon from '../../elements/icon/u-icon.vue'
 
 interface Props {
-  type?: 'neutral' | 'warning' | 'legal' | 'error'
+  type?: 'neutral' | 'warning' | 'legal' | 'error' | 'task'
   label?: string
   link?: Cta
   text?: string
 }
 
 const { label = '', link = undefined, text = '', type = 'neutral' } = defineProps<Props>()
+
+// default mapping 'type' -> icon
+const iconMap = {
+  neutral: 'info-circle-filled',
+  warning: 'alert-triangle-filled',
+  legal: 'legal',
+  error: 'alert-octagon-filled',
+  task: 'check-circle-filled',
+}
 </script>
 
 <template>
-  <div :class="['hint', `hint--${type}`]">
+  <div
+    :class="[
+      'hint',
+      `hint--${type}`,
+      { 'no-label': !label && !hasSlotContent($slots.label) && !link },
+    ]"
+  >
+    <span class="hint__icon">
+      <slot name="icon"> <UIcon :name="iconMap[type]" /> </slot>
+    </span>
     <p class="hint__label">
-      <slot name="label">{{ label }}</slot>
+      <span v-if="label || hasSlotContent($slots.label)" class="hint__label-text">
+        <slot name="label">{{ label }}</slot>
+      </span>
 
       <a v-if="link" :href="link.href" :target="link.target" class="hint__link">
         {{ link.label }}
@@ -68,4 +90,13 @@ const { label = '', link = undefined, text = '', type = 'neutral' } = defineProp
     }
   }
 }
+
+.hint--error {
+  .hint__richtext a {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-secondary-03-100);
+    }
+  }
+}
 </style>

package/components/index.js

@@ -72,3 +72,6 @@ export { default as UNotificationItem } from './notification-item/u-notification
 export { default as UNotificationList } from './notification-list/u-notification-list.vue'
 export { default as UDefinitionList } from './definition-list/u-definition-list.vue'
 export { default as UDefinitionListItem } from './definition-list-item/u-definition-list-item.vue'
+export { default as UCardStatistic } from './card-statistic/u-card-statistic.vue'
+export { default as UEmpty } from './empty/u-empty.vue'
+export { default as UButtonGroup } from './button-group/u-button-group.vue'