@energie360/ui-library 0.1.17 → 0.1.18

package/components/badge/badge.scss

@@ -0,0 +1,56 @@
+@use '../../base/abstracts' as a;
+
+$ease-out-bounce: cubic-bezier(0.674, 1.901, 0.651, 0.744);
+
+.badge {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+
+  &.show {
+    .badge__sup {
+      opacity: 1;
+    }
+  }
+}
+
+.badge__sup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  color: var(--e-c-mono-00);
+  border-radius: 100%;
+  top: var(--top, -6px);
+  right: var(--right, -6px);
+  opacity: 0;
+
+  &.border {
+    box-shadow: 0 0 0 2px var(--e-c-mono-00);
+  }
+}
+
+.badge__sup.number {
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.badge__sup.state {
+  width: 13px;
+  height: 13px;
+
+  &.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");
+  }
+}
+
+.badge__sup.dot {
+  top: var(--top, -3px);
+  right: var(--right, -3px);
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+}

package/components/badge/u-badge.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+interface Props {
+  color?: string
+  dot?: boolean
+  type?: 'default' | 'success' | 'error' | 'warning' | 'info'
+  value?: number
+  state?: '' | 'inactive'
+  show?: boolean
+  border?: boolean
+  top?: number
+  right?: number
+}
+
+const { color = 'var(--e-c-mono-900)', type = 'default', show = true } = defineProps<Props>()
+</script>
+
+<template>
+  <span
+    :class="['badge', { show }]"
+    :style="{
+      '--top': top ? `${top}px` : undefined,
+      '--right': right ? `${right}px` : undefined,
+    }"
+  >
+    <slot></slot>
+
+    <sup
+      v-if="dot"
+      class="badge__sup dot"
+      :class="[`type-${type}`, { border }]"
+      :style="{ backgroundColor: color }"
+    ></sup>
+
+    <sup
+      v-else-if="state"
+      class="badge__sup state"
+      :class="[state, { border }]"
+      :style="{ backgroundColor: color }"
+    ></sup>
+
+    <sup v-else class="badge__sup number" :class="{ border }" :style="{ backgroundColor: color }">{{
+      value
+    }}</sup>
+  </span>
+</template>
+
+<style scoped lang="scss" src="./badge.scss"></style>

package/components/card-contact/card-contact.scss

@@ -0,0 +1,39 @@
+@use '../../base/abstracts' as a;
+@use '../../elements/text-link/text-link' as t;
+
+.card-contact {
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--e-space-4);
+  height: 100%;
+}
+
+.card-contact__left-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-contact__name {
+  @include a.type(700, strong);
+}
+
+.card-contact__role {
+  @include a.type(200);
+
+  margin-top: var(--e-space-1);
+}
+
+.card-contact__tel {
+  @include t.text-link;
+
+  margin-top: auto;
+}
+
+.card-contact__image {
+  margin: auto 0;
+  width: a.rem(112);
+  height: a.rem(112);
+  border-radius: 100%;
+  overflow: hidden;
+  flex: 0 0 auto;
+}

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Image, Cta } from '../../elements/types'
+
+type Tel = Omit<Cta, 'target'>
+
+interface Props {
+  name?: string
+  role?: string
+  tel?: Tel
+  image?: Image
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-contact">
+    <div class="card-contact__left-column">
+      <p class="card-contact__name">
+        <slot name="name">{{ name }}</slot>
+      </p>
+
+      <p class="card-contact__role">
+        <slot name="role">{{ role }}</slot>
+      </p>
+
+      <div v-if="$slots.tel || tel" class="card-contact__tel">
+        <slot name="tel">
+          <a :href="tel.href">
+            {{ tel.label }}
+          </a>
+        </slot>
+      </div>
+    </div>
+
+    <div class="card-contact__image">
+      <slot name="image">
+        <img v-bind="image" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./card-contact.scss"></style>

package/components/card-cta-bar/card-cta-bar.scss

@@ -0,0 +1,4 @@
+.card-cta-bar {
+  display: flex;
+  gap: var(--e-space-2);
+}

package/components/card-cta-bar/u-card-cta-bar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Cta } from '../../elements/types'
+import { UButton } from '../../elements'
+
+interface CtaItem extends Cta {
+  icon?: string
+}
+
+interface Props {
+  ctas?: CtaItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-cta-bar">
+    <slot>
+      <UButton v-for="(cta, idx) in ctas" :key="idx" v-bind="cta" variant="plain-spaceless" />
+    </slot>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./card-cta-bar.scss"></style>

package/components/card-cta-header/u-card-cta-header.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface Props {
-  title: string
-  subtitle: string
+  title?: string
+  subtitle?: string
   disabled?: boolean
 }
 
@@ -10,15 +10,18 @@ const { disabled = false } = defineProps<Props>()
 
 <template>
   <div class="card-cta-header" :class="{ disabled }">
-    <slot></slot>
     <div class="card-cta-header__header">
-      <div class="card-cta-header__image">
+      <div v-if="$slots.image" class="card-cta-header__image">
         <slot name="image"></slot>
       </div>
 
       <div>
-        <h2 class="card-cta-header__title">{{ title }}</h2>
-        <p class="card-cta-header__subtitle">{{ subtitle }}</p>
+        <h2 class="card-cta-header__title">
+          <slot name="title">{{ title }}</slot>
+        </h2>
+        <p class="card-cta-header__subtitle">
+          <slot name="subtitle">{{ subtitle }}</slot>
+        </p>
       </div>
     </div>
 
@@ -32,7 +35,7 @@ const { disabled = false } = defineProps<Props>()
 // We add the styles directly in the component
 // because the :slotted selector won't work when styles are added via `src`.
 
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .card-cta-header {
   display: flex;

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

@@ -16,7 +16,7 @@ interface Radio {
 }
 
 interface Props {
-  cta: Radio | Link
+  cta?: Radio | Link
 }
 
 const { cta } = defineProps<Props>()
@@ -43,9 +43,11 @@ if (currentValue) {
 
 <template>
   <div class="card-footer">
-    <UButton v-if="cta.href" variant="outlined" v-bind="cta" />
+    <slot>
+      <UButton v-if="cta.href" variant="outlined" v-bind="cta" />
 
-    <USelectChip v-else provide-key="card-group" v-bind="cta" @change="onChange" />
+      <USelectChip v-else provide-key="card-group" v-bind="cta" @change="onChange" />
+    </slot>
   </div>
 </template>
 

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

@@ -21,7 +21,7 @@ const onResize = debounceRaf(() => {
     header.style.height = ''
   })
 
-  if (isLarge().matches) {
+  if (isLarge()) {
     // Cards are stacked now. No need to set height.
     return
   }

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

@@ -44,13 +44,23 @@ $image-col-width-small: 100px;
   @container (max-width: 260px) {
     flex-direction: column-reverse;
   }
+
+  // Modifiers
+  &.loud {
+    .title-wrapper {
+      @include a.type(700, strong);
+    }
+  }
+}
+
+.caption-wrapper {
+  @include a.type(200);
+
+  margin-bottom: var(--e-space-1);
 }
 
 .title-wrapper {
-  h3,
-  h2 {
-    @include a.type(300, strong);
-  }
+  @include a.type(300, strong);
 }
 
 .text-wrapper {
@@ -96,3 +106,18 @@ $image-col-width-small: 100px;
     flex-basis: a.rem($image-col-width-small);
   }
 }
+
+.content-col {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.custom-col {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.cta-wrapper {
+  margin-top: auto;
+}

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

@@ -1,32 +1,47 @@
 <script setup lang="ts">
-import { Image } from '../../elements/types'
+import { Image, Cta } from '../../elements/types'
 
 interface Props {
   title?: string
   text?: string
+  caption?: string
   image?: Image
   logos?: Image[]
   badge?: string
+  cta?: Cta
+  loud?: boolean
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <div class="card-header">
+  <div :class="['card-header', { loud }]">
     <div class="content-col">
+      <p v-if="$slots.caption || caption" class="caption-wrapper">
+        <slot name="caption">
+          {{ caption }}
+        </slot>
+      </p>
+
       <div class="title-wrapper">
         <slot name="title">
           <h3>{{ title }}</h3>
         </slot>
       </div>
 
-      <div class="text-wrapper">
+      <div v-if="$slots.text || text" class="text-wrapper">
         <slot name="text">
           <p>{{ text }}</p>
         </slot>
       </div>
 
+      <div v-if="$slots.cta || cta" class="cta-wrapper">
+        <slot name="cta">
+          <a class="text-link" :href="cta.href" :target="cta.target">{{ cta.label }}</a>
+        </slot>
+      </div>
+
       <div v-if="logos" class="logos">
         <slot name="logos">
           <img v-for="(img, idx) in logos" :key="idx" :src="img.src" :alt="img.alt" />
@@ -40,6 +55,10 @@ defineProps<Props>()
       </div>
     </div>
 
+    <div v-if="$slots.custom" class="custom-col">
+      <slot name="custom"></slot>
+    </div>
+
     <div v-if="badge" class="badge">
       <slot name="badge">{{ badge }}</slot>
     </div>

package/components/card-highlight/card-highlight.scss

@@ -0,0 +1,70 @@
+@use '../../base/abstracts' as a;
+
+.card-highlight {
+  position: relative;
+  display: flex;
+  border: 1px solid var(--e-c-primary-01-100);
+  border-radius: var(--e-brd-radius-2);
+  background-color: var(--e-c-primary-01-50);
+  padding: var(--e-space-6);
+  gap: var(--e-space-4);
+  height: 100%;
+  justify-content: space-between;
+
+  @include a.bp(m) {
+    padding: var(--e-space-5);
+  }
+
+  @include a.bp(s) {
+    padding: var(--e-space-4);
+  }
+
+  @include a.bp(m) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.card-highlight__content-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: var(--e-space-4);
+
+  @include a.bp(m) {
+    width: calc(100% - 40px);
+  }
+}
+
+.card-highlight__title {
+  @include a.type(300, strong);
+
+  color: var(--e-c-secondary-01-950);
+}
+
+.card-highlight__text {
+  @include a.type(200);
+
+  margin-top: auto;
+  color: var(--e-c-secondary-01-900);
+}
+
+.card-highlight__image-col {
+  flex: 1 1 auto;
+  max-width: 60%;
+  align-self: center;
+
+  @include a.bp(m) {
+    max-width: none;
+  }
+}
+
+.card-highlight__badge-icon {
+  position: absolute;
+  padding: 5px;
+  top: var(--e-space-4);
+  right: var(--e-space-4);
+  background-color: var(--e-c-mono-00);
+  color: var(--e-c-secondary-01-950);
+  border-radius: 100%;
+}

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+import { UIcon } from '../../elements'
+
+interface Props {
+  title?: string
+  text?: string
+  image: Image
+  badgeIcon?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-highlight">
+    <div class="card-highlight__content-col">
+      <h3 v-if="$slots.title || title" class="card-highlight__title">
+        <slot name="title">{{ title }}</slot>
+      </h3>
+
+      <div v-if="$slots.text || text" class="card-highlight__text">
+        <slot name="text">
+          <div v-html="text"></div>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.image || image" class="card-highlight__image-col">
+      <slot name="image">
+        <img v-bind="image" />
+      </slot>
+    </div>
+
+    <div v-if="badgeIcon" class="card-highlight__badge-icon">
+      <UIcon :name="badgeIcon" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./card-highlight.scss"></style>

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

@@ -0,0 +1,39 @@
+@use '../../base/abstracts' as a;
+
+.card-price-list {
+  display: grid;
+  row-gap: var(--e-space-1);
+}
+
+.card-price-list__row {
+  display: flex;
+  column-gap: var(--e-space-1);
+  justify-content: space-between;
+}
+
+.card-price-list__name {
+  @include a.type(200);
+}
+
+.card-price-list__right-col {
+  white-space: nowrap;
+}
+
+.card-price-list__value {
+  @include a.type(300, strong);
+
+  margin-right: var(--e-space-1);
+}
+
+.card-price-list__unit {
+  @include a.type(50, strong);
+
+  color: var(--e-c-mono-700);
+}
+
+.card-price-list__info {
+  display: inline-block;
+  margin-left: var(--e-space-2_5);
+  vertical-align: middle;
+  color: var(--e-c-secondary-05-500);
+}

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { UIcon } from '../../elements'
+import { UTooltip } from '../'
+
+interface PriceItem {
+  name: string
+  value: string
+  unit: string
+  info?: string
+}
+
+interface Props {
+  items?: PriceItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <dl class="card-price-list">
+    <div v-for="(item, idx) in items" :key="idx" class="card-price-list__row">
+      <dt class="card-price-list__name">{{ item.name }}</dt>
+      <dd class="card-price-list__right-col">
+        <span class="card-price-list__value">{{ item.value }}</span>
+        <span class="card-price-list__unit">{{ item.unit }}</span>
+
+        <span class="card-price-list__info">
+          <UTooltip v-if="item.info" :title="item.info">
+            <UIcon name="info-circle"></UIcon>
+          </UTooltip>
+        </span>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<style scoped lang="scss" src="./card-price-list.scss"></style>

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);
+}