@energie360/ui-library 0.1.15 → 0.1.17

package/components/card-info/card-info.scss

@@ -0,0 +1,40 @@
+@use '../../base/abstracts' as a;
+
+.card-info {
+  padding: var(--e-space-6);
+  border: 1px solid var(--e-c-mono-200);
+  border-top-left-radius: var(--e-brd-radius-2);
+  border-top-right-radius: var(--e-brd-radius-2);
+
+  &:last-of-type {
+    border-bottom-left-radius: var(--e-brd-radius-2);
+    border-bottom-right-radius: var(--e-brd-radius-2);
+  }
+}
+
+.card-info__image {
+  width: a.rem(80);
+  height: a.rem(80);
+
+  + .card-info__title {
+    margin-top: var(--e-space-4);
+  }
+}
+
+.card-info__title {
+  @include a.type(300, strong);
+
+  + .card-info__description {
+    margin-top: var(--e-space-1);
+  }
+}
+
+.card-info__description {
+  @include a.type(200);
+}
+
+.card-info + .card-info {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+
+interface Props {
+  image?: Image
+  title?: string
+  description?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <section class="card-info">
+    <div class="card-info__image">
+      <slot name="image">
+        <img v-bind="image" />
+      </slot>
+    </div>
+
+    <h2 class="card-info__title">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h2>
+
+    <p class="card-info__description">
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </p>
+  </section>
+</template>
+
+<style scoped lang="scss" src="./card-info.scss"></style>

package/components/index.js

@@ -51,3 +51,4 @@ export { default as UProgressAvatar } from './progress-avatar/u-progress-avatar.
 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'
+export { default as UCardInfo } from './card-info/u-card-info.vue'

package/components/inline-edit/inline-edit.scss

@@ -1,4 +1,5 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
+@use '../richtext/richtext' as r;
 
 .inline-edit {
   border-bottom: 1px solid var(--e-c-mono-200);
@@ -36,6 +37,9 @@
 .inline-edit__summary {
   @include a.type(300);
 
+  // We don't need a full richtext implementation. The spacings are enough.
+  @include r.richtext-spacing-rules;
+
   color: var(--e-c-mono-700);
 }
 

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, inject, useId, watch, useTemplateRef } from 'vue'
-import UButton from '../../elements/button/u-button.vue'
+import { UButton } from '../../elements'
+import { URichtext } from '../../components'
 import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {
-  title: string
-  summary: string
-  description: string
+  title?: string
+  summary?: string
+  description?: string
+  nonEditable?: boolean
 }
 
 defineProps<Props>()
@@ -69,25 +71,32 @@ defineExpose({ collapse })
 </script>
 
 <template>
-  <div ref="root" class="inline-edit" :class="{ expanded, disabled }">
+  <div ref="root" class="inline-edit" :class="{ expanded, disabled, 'non-editable': nonEditable }">
     <div class="inline-edit__heading">
       <div class="inline-edit__heading-col">
-        <p :id="headingId" class="inline-edit__title">{{ title }}</p>
-
-        <p class="inline-edit__summary">
-          <slot name="summary">{{ summary }}</slot>
+        <p :id="headingId" class="inline-edit__title">
+          <slot name="title">{{ title }}</slot>
         </p>
-        <p class="inline-edit__description" v-html="description"></p>
+
+        <div class="inline-edit__summary">
+          <slot name="summary"><div v-html="summary" /></slot>
+        </div>
+
+        <div class="inline-edit__description">
+          <slot name="description"><div v-html="description" /></slot>
+        </div>
       </div>
-      <div class="inline-edit__heading-cta-col">
+
+      <div v-if="!nonEditable" class="inline-edit__heading-cta-col">
         <UButton
           variant="plain-spaceless"
           :disabled
           :aria-controls="panelId"
           :aria-expanded="expanded"
           @click="onEditToggle"
-          >{{ getTranslation(expanded ? 'cancel' : 'edit') }}</UButton
         >
+          {{ getTranslation(expanded ? 'cancel' : 'edit') }}
+        </UButton>
       </div>
     </div>
 

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

@@ -21,7 +21,7 @@
     }
   }
 
-  &.greyed:not(.disabled):not(:hover):not(.active) {
+  &.greyed:not(.disabled, :hover, .active) {
     background-color: var(--e-c-mono-50);
     border-color: var(--e-c-mono-200);
   }

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

@@ -2,20 +2,18 @@
 import { computed } from 'vue'
 import { UIcon } from '../../elements'
 
-enum IconBadge {
-  Inactive = 'inactive',
-}
+type IconBadge = 'inactive'
 
 interface Props {
-  title: string
-  description: string
-  icon: string
-  iconBadge?: IconBadge
-  href?: string
-  target?: string
   active?: boolean
-  greyed?: boolean
+  description?: string
   disabled?: boolean
+  greyed?: boolean
+  href?: string
+  icon?: string
+  iconBadge?: IconBadge
+  target?: string
+  title?: string
 }
 
 const {
@@ -38,13 +36,19 @@ const tag = computed(() => (href ? 'a' : 'div'))
   >
     <div class="navigation-panel-tile__text-column">
       <div class="navigation-panel-tile__title">
-        {{ 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 class="navigation-panel-tile__description" v-html="description" />
     </div>
 
     <div class="navigation-panel-tile__icon-column">
-      <div class="navigation-panel-tile__icon-wrapper">
+      <div v-if="icon" class="navigation-panel-tile__icon-wrapper">
         <span v-if="iconBadge" :class="['badge', iconBadge]" />
 
         <UIcon :name="icon" />

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,7 +1,7 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
+@use './wizard';
 
-.richtext {
-  // Spacing rules
+@mixin richtext-spacing-rules {
   * + * {
     margin-top: var(--e-space-3);
   }
@@ -22,7 +22,9 @@
   * + ol {
     margin-top: var(--e-space-6);
   }
+}
 
+@mixin richtext-spacing-rules-mobile {
   @include a.bp(lg) {
     * + * {
       margin-top: var(--e-space-2);
@@ -40,6 +42,12 @@
       margin-top: var(--e-space-10);
     }
   }
+}
+
+.richtext {
+  // Spacing rules
+  @include richtext-spacing-rules;
+  @include richtext-spacing-rules-mobile;
 
   // Element styles
   h2,

package/components/richtext/u-richtext.vue

@@ -13,7 +13,9 @@ const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': i
 <template>
   <div v-if="text" :class="classes" v-html="text"></div>
 
-  <div v-else :class="classes"><slot></slot></div>
+  <div v-else :class="classes">
+    <slot />
+  </div>
 </template>
 
 <style lang="scss" src="./richtext.scss"></style>

package/dist/elements/form.css

@@ -0,0 +1,170 @@
+/* easeOutCubic */
+/* prettier-ignore */
+.form .form__messages {
+  display: none;
+}
+.form .form__title {
+  font-size: var(--e-type-size-800);
+  line-height: var(--e-type-line-height-800);
+  letter-spacing: 0.025rem;
+  font-weight: var(--e-type-weight-strong);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--e-c-primary-01-500);
+}
+@media (max-width: 1020px) {
+  .form .form__title {
+    font-size: var(--e-type-size-700);
+    line-height: var(--e-type-line-height-700);
+    letter-spacing: 0.025rem;
+    font-weight: var(--e-type-weight-strong);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+.form .form__lead {
+  font-size: var(--e-type-size-200);
+  line-height: var(--e-type-line-height-200);
+  letter-spacing: 0.01875rem;
+  font-weight: var(--e-type-weight-weak);
+}
+.form .form__lead .form__subtitle-info {
+  color: var(--e-c-secondary-01-900);
+  margin-left: var(--e-space-1);
+}
+.form .form__lead .form__subtitle-info e-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.form .form__title + .form__lead {
+  font-size: var(--e-type-size-300);
+  line-height: var(--e-type-line-height-300);
+  letter-spacing: 0.01875rem;
+}
+@media (max-width: 1020px) {
+  .form .form__title + .form__lead {
+    font-size: var(--e-type-size-200);
+    line-height: var(--e-type-line-height-200);
+    letter-spacing: 0.01875rem;
+  }
+}
+.form .form__subtitle {
+  font-size: var(--e-type-size-300);
+  line-height: var(--e-type-line-height-300);
+  letter-spacing: 0.01875rem;
+  font-weight: var(--e-type-weight-strong);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--e-c-primary-01-500);
+}
+.form .form__subtitle .form__subtitle-info {
+  color: var(--e-c-secondary-01-900);
+  margin-left: var(--e-space-1);
+}
+.form .form__subtitle .form__subtitle-info e-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.form .form__cta-group {
+  display: flex;
+  grid-gap: var(--e-space-5);
+}
+@media (max-width: 740px) {
+  .form .form__cta-group {
+    flex-direction: column;
+  }
+}
+.form .form__title + .form__lead,
+.form .form__subtitle + .form__lead {
+  margin-top: var(--e-space-3);
+}
+@media (max-width: 1020px) {
+  .form .form__title + .form__lead,
+  .form .form__subtitle + .form__lead {
+    margin-top: var(--e-space-1_5);
+  }
+}
+.form .form__lead-row + * {
+  margin-top: var(--e-space-5);
+}
+@media (max-width: 1020px) {
+  .form .form__lead-row + * {
+    margin-top: var(--e-space-3);
+  }
+}
+.form .form__subtitle-row + *,
+.form .form__lead-row.form__subtitle-row + * {
+  margin-top: var(--e-space-6);
+}
+@media (max-width: 1020px) {
+  .form .form__subtitle-row + *,
+  .form .form__lead-row.form__subtitle-row + * {
+    margin-top: var(--e-space-3);
+  }
+}
+.form .form__input-row + .form__input-row,
+.form .form__title-row + *,
+.form *:not(legend) + .form__lead-row {
+  margin-top: var(--e-space-10);
+}
+@media (max-width: 1020px) {
+  .form .form__input-row + .form__input-row,
+  .form .form__title-row + *,
+  .form *:not(legend) + .form__lead-row {
+    margin-top: var(--e-space-6);
+  }
+}
+.form .form__input-row.form__input-row--compact + .form__input-row.form__input-row--compact {
+  margin-top: var(--e-space-6);
+}
+.form *:not(legend) + .form__title-row,
+.form *:not(legend) + .form__cta-row,
+.form *:not(legend) + .form__subtitle-row {
+  margin-top: var(--e-space-16);
+}
+@media (max-width: 1020px) {
+  .form *:not(legend) + .form__title-row,
+  .form *:not(legend) + .form__cta-row,
+  .form *:not(legend) + .form__subtitle-row {
+    margin-top: var(--e-space-10);
+  }
+}
+@media (max-width: 1020px) {
+  .form .form__input-col + .form__input-col {
+    margin-top: var(--e-space-6);
+  }
+}
+.form .form__messages-row {
+  display: none;
+  margin-top: var(--e-space-10);
+}
+.form .form__cookiebot-message {
+  margin-bottom: var(--e-space-6);
+}
+.form.form--has-general-error .form__messages-row,
+.form.form--has-general-error .form__messages {
+  display: block;
+}
+.form.form--hide-form-elements > *:not(.success-screen) {
+  display: none;
+}
+.form.form--is-submitting .form-row:not(.form__cta-row) {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.form .form__recaptcha {
+  font-size: 0.625rem;
+  line-height: 1.5;
+  margin-top: var(--e-space-6);
+  color: var(--e-c-mono-700);
+}
+.form .form__recaptcha a {
+  color: var(--e-c-primary-01-700);
+  text-underline-offset: var(--e-space-1);
+}
+
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
+/*# sourceMappingURL=form.css.map */

package/dist/elements/form.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../elements/form/form.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFE;EACE;;AAGF;ECoCA;EACA;EAGE;EAMA;EAKE;EACA;EDjDF;;ACWF;EDdA;ICoCA;IACA;IAGE;IAMA;IAKE;IACA;;;AD1CJ;EC0BA;EACA;EAKE;EAIA;;ADjCA;EACE;EACA;;AAEA;EACE;EACA;;AAKN;ECYA;EACA;EAKE;;AA5BF;EDUA;ICYA;IACA;IAKE;;;ADVF;ECIA;EACA;EAGE;EAMA;EAKE;EACA;EDjBF;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;;ACpCF;EDkCA;IAKI;;;AAKJ;AAAA;EAEE;;AC9CF;ED4CA;AAAA;IAKI;;;AAQJ;EACE;;AC1DF;EDyDA;IAII;;;AAIJ;AAAA;EAEE;;ACnEF;EDiEA;AAAA;IAKI;;;AAIJ;AAAA;AAAA;EAGE;;AC7EF;ED0EA;AAAA;AAAA;IAMI;;;AAIJ;EACE;;AAGF;AAAA;AAAA;EAGE;;AC3FF;EDwFA;AAAA;AAAA;IAMI;;;AC9FJ;EDkGA;IAEI;;;AAIJ;EACE;EACA;;AAGF;EACE;;AASA;AAAA;EAEE;;AAKF;EACE;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE","file":"form.css"}

package/dist/layout/form-grid.css

@@ -0,0 +1,184 @@
+/* easeOutCubic */
+/* prettier-ignore */
+/**
+Helper to colculate col width in %.
+Looks complicated because we use grid-gap on the row, which takes away from available width.
+ */
+/**
+Mixin to create a grid column cell.
+
+$cols: Column width of cell.
+$columns: Grid size (in columns). Default is set by global variable $grid-columns (defined via design token).
+ */
+.form-grid {
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 2.6315789474%;
+}
+@media (max-width: 1020px) {
+  .form-row {
+    grid-gap: 2.5531914894%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row {
+    grid-gap: 3.6363636364%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row {
+    grid-gap: 4.1666666667%;
+  }
+}
+.form-row .form-col {
+  flex: 0 0 48.6842105263%;
+  max-width: 48.6842105263%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col {
+    flex: 0 0 48.7234042553%;
+    max-width: 48.7234042553%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col {
+    flex: 0 0 48.1818181818%;
+    max-width: 48.1818181818%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col {
+    flex: 0 0 47.9166666667%;
+    max-width: 47.9166666667%;
+  }
+}
+.form-row .form-col-1\/4 {
+  flex: 0 0 23.0263157895%;
+  max-width: 23.0263157895%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 23.085106383%;
+    max-width: 23.085106383%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 22.2727272727%;
+    max-width: 22.2727272727%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-1\/4 {
+    flex: 0 0 21.875%;
+    max-width: 21.875%;
+  }
+}
+.form-row .form-col-2\/4 {
+  flex: 0 0 48.6842105263%;
+  max-width: 48.6842105263%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 48.7234042553%;
+    max-width: 48.7234042553%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 48.1818181818%;
+    max-width: 48.1818181818%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-2\/4 {
+    flex: 0 0 47.9166666667%;
+    max-width: 47.9166666667%;
+  }
+}
+.form-row .form-col-3\/4 {
+  flex: 0 0 74.3421052632%;
+  max-width: 74.3421052632%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 74.3617021277%;
+    max-width: 74.3617021277%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 74.0909090909%;
+    max-width: 74.0909090909%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-3\/4 {
+    flex: 0 0 73.9583333333%;
+    max-width: 73.9583333333%;
+  }
+}
+.form-row .form-col-4\/4 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+@media (max-width: 1020px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 740px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 520px) {
+  .form-row .form-col-4\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 1020px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 740px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 1020px) and (max-width: 520px) {
+  .form-row .form-col,
+  .form-row .form-col-1\/4,
+  .form-row .form-col-2\/4,
+  .form-row .form-col-3\/4 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+/*# sourceMappingURL=form-grid.css.map */

package/dist/layout/form-grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/grid/grid.mixin.scss","../../layout/form-grid/form-grid.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACFA;AAAA;AAAA;AAAA;AA0BA;AAAA;;AAAA;AAAA;AAAA;ACzBA;EACE;;;AAGF;EDIE;EACA;EACA,UFgBgB;;AIThB;EDbF;IDSI,UFca;;;AIVf;EDbF;IDaI,UFWY;;;AIXd;EDbF;IDiBI,UFQY;;;AGtBd;ED2BA;EACA,WAHY;;AEfZ;EDVA;IDiCE;IACA,WAHW;;;AErBb;EDVA;IDwCE;IACA,WAHU;;;AE5BZ;EDVA;ID+CE;IACA,WAHU;;;ACxCZ;EDsBA;EACA,WAHY;;AEfZ;EDLA;ID4BE;IACA,WAHW;;;AErBb;EDLA;IDmCE;IACA,WAHU;;;AE5BZ;EDLA;ID0CE;IACA,WAHU;;;ACpCZ;EDkBA;EACA,WAHY;;AEfZ;EDDA;IDwBE;IACA,WAHW;;;AErBb;EDDA;ID+BE;IACA,WAHU;;;AE5BZ;EDDA;IDsCE;IACA,WAHU;;;AC/BZ;EDaA;EACA,WAHY;;AEfZ;EDIA;IDmBE;IACA,WAHW;;;AErBb;EDIA;ID0BE;IACA,WAHU;;;AE5BZ;EDIA;IDiCE;IACA,WAHU;;;AC3BZ;EDSA;EACA,WAHY;;AEfZ;EDQA;IDeE;IACA,WAHW;;;AErBb;EDQA;IDsBE;IACA,WAHU;;;AE5BZ;EDQA;ID6BE;IACA,WAHU;;;AEnCZ;EDYA;AAAA;AAAA;AAAA;IDKA;IACA,WAHY;;;AEfZ;EDYA;AAAA;AAAA;AAAA;IDWE;IACA,WAHW;;;AErBb;EDYA;AAAA;AAAA;AAAA;IDkBE;IACA,WAHU;;;AE5BZ;EDYA;AAAA;AAAA;AAAA;IDyBE;IACA,WAHU","file":"form-grid.css"}