@energie360/ui-library 0.1.16 → 0.1.18

package/components/card-section/card-section.scss

@@ -1,4 +1,4 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .card-section {
   padding: var(--e-space-6);
@@ -10,4 +10,24 @@
   @include a.bp(s) {
     padding: var(--e-space-4);
   }
+
+  // Modifiers
+  &.full-height {
+    height: 100%;
+  }
+
+  // Handle special case
+  &:has(.card-cta-bar) {
+    margin-top: auto; // We assume it is the bottom section, like in a card-tile configuration.
+    flex: 0; // Force this section to keep minimal height.
+    padding: var(--e-space-4) var(--e-space-6);
+
+    @include a.bp(m) {
+      padding: var(--e-space-4) var(--e-space-5);
+    }
+
+    @include a.bp(s) {
+      padding: var(--e-space-4);
+    }
+  }
 }

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

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  fullHeight?: boolean
+}
+
+defineProps<Props>()
+</script>
+
 <template>
-  <div class="card-section">
+  <div :class="['card-section', { 'full-height': fullHeight }]">
     <slot></slot>
   </div>
 </template>

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

@@ -0,0 +1,34 @@
+@use '../../base/abstracts' as a;
+
+.data-card {
+  padding: var(--e-space-4);
+  border: 1px solid var(--e-c-mono-200);
+  border-radius: var(--e-brd-radius-2);
+}
+
+.data-card__main {
+  display: flex;
+  column-gap: var(--e-space-2);
+}
+
+.data-card__list {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+  flex: 1 0 auto;
+}
+
+.data-card__heading {
+  @include a.type(100, strong);
+}
+
+.data-card__value {
+  @include a.type(100);
+}
+
+.data-card__ctas {
+  display: flex;
+  column-gap: var(--e-space-4);
+  align-items: flex-start;
+  margin-top: var(--e-space-4);
+}

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// TODO: add possibility to add items via slot
+interface dataItem {
+  heading: string
+  value: string
+}
+
+interface Props {
+  data?: dataItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="data-card">
+    <div class="data-card__main">
+      <dl class="data-card__list">
+        <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>
+          </div>
+        </slot>
+      </dl>
+
+      <div v-if="$slots.aside" class="data-card__aside-column">
+        <slot name="aside" />
+      </div>
+    </div>
+
+    <div v-if="$slots.ctas" class="data-card__ctas">
+      <slot name="ctas" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./data-card.scss"></style>
+<style scoped lang="scss">
+@use '../../base/abstracts' as a;
+
+:slotted(dt) {
+  @include a.type(100, strong);
+}
+
+:slotted(dd) {
+  @include a.type(100);
+}
+</style>

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

@@ -0,0 +1,12 @@
+@use '../../base/abstracts' as a;
+
+.data-card-group {
+  display: grid;
+
+  // grid-template-columns: 1fr 1fr;
+  gap: var(--e-space-3);
+
+  // @include a.bp(m) {
+  //   grid-template-columns: 1fr;
+  // }
+}

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

@@ -0,0 +1,7 @@
+<template>
+  <div class="data-card-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./data-card-group.scss"></style>

package/components/download-list/download-list.scss

@@ -0,0 +1,58 @@
+@use '../../base/abstracts' as a;
+@use '../../base/accessibility';
+
+.download-list {
+  margin-top: calc(var(--e-space-2) * -1);
+  margin-bottom: calc(var(--e-space-2) * -1);
+  border-collapse: separate;
+  border-spacing: 0 var(--e-space-2);
+  width: 100%;
+
+  thead {
+    @include a.bp(lg) {
+      @include a.visually-hidden;
+    }
+  }
+
+  tbody {
+    @include a.bp(lg) {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--e-space-2);
+    }
+  }
+
+  @include a.bp(lg) {
+    display: block;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .download-list__heading {
+    @include a.type(200, strong);
+
+    padding: var(--e-space-4) var(--e-space-6) var(--e-space-3);
+    text-align: left;
+
+    + .download-list__heading {
+      padding-left: var(--e-space-2);
+    }
+  }
+
+  // Variants
+  &.compact {
+    .download-list__heading {
+      @include a.type(100, strong);
+
+      padding-left: var(--e-space-4);
+      padding-right: var(--e-space-4);
+
+      + .download-list__heading {
+        padding-left: var(--e-space-2);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { provide, ref, watch } from 'vue'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props {
+  headings: string[]
+  compact?: boolean
+}
+
+const { headings, compact = false } = defineProps<Props>()
+
+const isCompact = ref(compact)
+
+provide('headings', headings)
+provide('compact', isCompact)
+
+watch(
+  () => compact,
+  (n) => {
+    isCompact.value = n
+  },
+)
+</script>
+
+<template>
+  <table :class="['download-list', { compact }]">
+    <thead>
+      <tr>
+        <th v-for="(heading, idx) in headings" :key="idx" class="download-list__heading">
+          {{ heading }}
+        </th>
+        <th class="download-list__heading">
+          <span class="visually-hidden">{{ getTranslation('download') }}</span>
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <slot></slot>
+    </tbody>
+  </table>
+</template>
+
+<style scoped lang="scss" src="./download-list.scss"></style>

package/components/download-list-item/download-list-item.scss

@@ -0,0 +1,267 @@
+@use '../../base/abstracts' as a;
+
+.download-list-item {
+  @keyframes arrow-anim {
+    0% {
+      transform: translateY(-30%);
+      opacity: 0.2;
+    }
+
+    80% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateY(2%);
+      opacity: 1;
+    }
+  }
+
+  @keyframes hide-download {
+    0% {
+      transform: none;
+      transform-origin: bottom center;
+      opacity: 1;
+    }
+
+    100% {
+      transform: rotate(60deg);
+      transform-origin: bottom center;
+      opacity: 0;
+    }
+  }
+
+  @keyframes show-check {
+    0% {
+      transform: rotate(-60deg);
+      transform-origin: bottom center;
+      opacity: 0;
+    }
+
+    100% {
+      transform: rotate(0);
+      transform-origin: bottom center;
+      opacity: 1;
+    }
+  }
+
+  position: relative;
+  transform: scale(1); // Safari hack
+  height: a.rem(64);
+  transition: background-color a.$trs-default;
+
+  &:focus-within {
+    .download-list-item__cell {
+      background: var(--e-c-secondary-01-100);
+    }
+  }
+
+  &.visited {
+    .download-list-item__cell {
+      background: var(--e-c-mono-50);
+    }
+
+    .download-list-item__link:hover {
+      border-color: transparent;
+    }
+
+    .download-list-item__check {
+      animation-name: show-check;
+      animation-duration: var(--e-trs-duration-fast);
+      animation-fill-mode: forwards;
+      animation-timing-function: ease-out;
+      animation-iteration-count: 1;
+    }
+
+    .download-list-item__download {
+      animation-name: hide-download;
+      animation-duration: var(--e-trs-duration-fast);
+      animation-fill-mode: forwards;
+      animation-timing-function: ease-out;
+      animation-iteration-count: 1;
+    }
+  }
+
+  @include a.bp(lg) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: 1fr 1fr a.rem(96);
+    grid-template-rows: repeat(var(--rows), auto);
+    row-gap: var(--e-space-2);
+    column-gap: var(--e-space-4);
+    height: auto;
+    padding: var(--e-space-5) var(--e-space-6);
+    background: var(--e-c-secondary-01-50);
+    border-radius: var(--e-brd-radius-2);
+
+    &:focus-within {
+      background-color: var(--e-c-secondary-01-100);
+
+      .download-list-item__cell {
+        background: transparent;
+      }
+    }
+
+    &.visited {
+      background: var(--e-c-mono-50);
+
+      .download-list-item__cell {
+        background: none;
+      }
+    }
+  }
+
+  @include a.bp(m) {
+    display: flex;
+    flex-direction: column;
+    padding-right: a.rem(96);
+  }
+}
+
+.download-list-item__cell {
+  @include a.type(200);
+
+  padding: var(--e-space-5) var(--e-space-6);
+  background-color: var(--e-c-secondary-01-50);
+  transition: background-color a.$trs-default;
+
+  + .download-list-item__cell {
+    padding-left: var(--e-space-2);
+  }
+
+  &:first-child {
+    border-bottom-left-radius: var(--e-brd-radius-2);
+    border-top-left-radius: var(--e-brd-radius-2);
+  }
+
+  &:last-child {
+    border-bottom-right-radius: var(--e-brd-radius-2);
+    border-top-right-radius: var(--e-brd-radius-2);
+    padding-top: var(--e-space-2);
+    padding-bottom: var(--e-space-2);
+    width: 0; // Force this cell to have width of content.
+  }
+
+  @include a.bp(lg) {
+    @include a.type(100);
+
+    background-color: transparent;
+
+    &,
+    + .download-list-item__cell,
+    &:last-child {
+      padding: 0;
+      width: auto;
+    }
+
+    &.cta {
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+
+.download-list-item__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--e-brd-radius-2);
+  border: 2px solid transparent;
+  transition: border a.$trs-default;
+
+  &:hover {
+    border: 2px solid var(--e-c-secondary-01-100);
+
+    ~ * .download {
+      animation-name: arrow-anim;
+      animation-delay: 100ms;
+      animation-duration: var(--e-trs-duration-slowest);
+      animation-timing-function: ease-out;
+      animation-iteration-count: infinite;
+    }
+  }
+}
+
+.download-list-item__icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  width: var(--e-space-12);
+  height: var(--e-space-12);
+  position: relative;
+  pointer-events: none;
+
+  .download-list-item__download {
+    position: absolute;
+    width: a.rem(24);
+    height: a.rem(24);
+    fill: var(--e-c-primary-01-700);
+  }
+
+  .download-list-item__check {
+    opacity: 0;
+    position: absolute;
+    color: var(--e-c-secondary-05-500);
+  }
+
+  @include a.bp(lg) {
+    position: absolute;
+    right: var(--e-space-4);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include a.bp(m) {
+    top: a.rem(8);
+    transform: none;
+  }
+}
+
+.download-list-item__cell-heading {
+  @include a.type(50, strong);
+
+  display: none;
+  margin-right: var(--e-space-2);
+
+  @include a.bp(lg) {
+    display: inline-block;
+  }
+}
+
+// Variants
+.download-list-item.compact {
+  height: a.rem(56);
+  row-gap: var(--e-space-1);
+
+  .download-list-item__cell {
+    @include a.type(100);
+
+    padding: var(--e-space-4);
+
+    + .download-list-item__cell {
+      padding-left: var(--e-space-2);
+    }
+
+    &:last-child {
+      padding-top: var(--e-space-1);
+      padding-bottom: var(--e-space-1);
+    }
+  }
+
+  @include a.bp(lg) {
+    height: auto;
+    padding: var(--e-space-4);
+
+    .download-list-item__cell {
+      &,
+      + .download-list-item__cell,
+      &:last-child {
+        padding: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, computed, inject } from 'vue'
+import { UIcon } from '../../elements'
+
+interface Props {
+  data: string[]
+  url: string
+  compact?: boolean
+  headings?: string[]
+}
+
+const { data, compact = false, headings = inject('headings', []) } = defineProps<Props>()
+
+const visited = ref(false)
+const isCompact = inject('compact', compact)
+const label = computed(() => data.join(', '))
+</script>
+
+<template>
+  <tr
+    :class="['download-list-item', { visited, compact: isCompact }]"
+    :style="{ '--rows': Math.round(data.length / 2) }"
+  >
+    <td v-for="(cell, idx) in data" :key="idx" class="download-list-item__cell">
+      <span class="download-list-item__cell-heading" aria-hidden="true">
+        {{ headings[idx] }}
+      </span>
+      {{ cell }}
+    </td>
+
+    <td class="download-list-item__cell cta">
+      <a
+        class="download-list-item__link"
+        :href="url"
+        target="_blank"
+        download
+        :aria-label="label"
+        @click="visited = true"
+      >
+      </a>
+      <div class="download-list-item__icon-wrapper">
+        <UIcon name="mini-check" class="download-list-item__check" />
+
+        <svg
+          class="download-list-item__download"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <g clip-path="url(#a)">
+            <path
+              d="M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-3h2v3h12v-3h2v3q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
+            />
+            <path class="download" d="m12 16-5-5 1.4-1.45 2.6 2.6V4h2v8.15l2.6-2.6L17 11z" />
+          </g>
+          <defs>
+            <clipPath id="a"><path d="M0 0h24v24H0z" /></clipPath>
+          </defs>
+        </svg>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<style scoped lang="scss" src="./download-list-item.scss"></style>

package/components/file-upload/file-list.scss

@@ -0,0 +1,68 @@
+@use '../../base/abstracts' as a;
+
+.file-list__item {
+  @include a.type(200);
+
+  display: flex;
+  align-items: center;
+  height: a.rem(64);
+  padding-left: var(--e-space-4);
+  padding-right: var(--e-space-2);
+  column-gap: var(--e-space-4);
+  background-color: var(--e-c-mono-50);
+  border: 1px solid var(--e-c-mono-100);
+  border-radius: var(--e-brd-radius-1);
+
+  + .file-list__item {
+    margin-top: var(--e-space-3);
+  }
+
+  &.error {
+    border-color: var(--e-c-signal-03-100);
+    background-color: rgb(var(--e-c-signal-03-100-rgb), 0.2);
+  }
+
+  @include a.bp(m) {
+    height: a.rem(72);
+    padding: var(--e-space-3) var(--e-space-2) var(--e-space-3) var(--e-space-3);
+
+    .file-list__item-content {
+      flex: 0 1 auto;
+      overflow: hidden;
+    }
+
+    .file-list__item-name {
+      white-space: nowrap;
+      display: block;
+      margin-right: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.file-list__item-name {
+  margin-right: var(--e-space-2);
+  font-weight: bold;
+}
+
+.file-list__item-error {
+  @include a.type(100, strong);
+
+  color: var(--e-c-signal-03-700);
+}
+
+.file-list__file-cta {
+  margin-left: auto;
+}
+
+// TransitonGroup animation
+.list-enter-active,
+.list-leave-active {
+  transition: all a.$trs-default;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+}