@energie360/ui-library 0.1.1 → 0.1.3

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+interface Cell {
+  text: string
+  info?: string
+  discount: string
+}
+
+interface Table {
+  heading?: [Cell, Cell]
+  rows?: Array<[Cell, Cell]>
+}
+
+interface Props {
+  title?: string
+  secondaryTitle?: string
+  tables: Table[]
+}
+
+defineProps<Props>()
+
+const getCellText = (cell: Cell): string => (cell.discount ? cell.discount : cell.text || '')
+
+const getCellDiscount = (cell: Cell): string => (cell.discount ? cell.text : '')
+</script>
+
+<template>
+  <div class="card-table-wrapper">
+    <div class="card-table-heading">
+      <div v-if="title" class="card-table-heading__title">
+        {{ title }}
+      </div>
+
+      <div v-if="secondaryTitle" class="card-table-heading__secondary-title">
+        {{ secondaryTitle }}
+      </div>
+    </div>
+
+    <table v-for="(table, idx) in tables" :key="idx" class="card-table">
+      <!-- TABLE HEADING -->
+      <thead v-if="table.heading">
+        <tr>
+          <th>
+            {{ table.heading[0].text }}
+            <span v-if="table.heading[0].info" class="info">{{ table.heading[0].info }}</span>
+          </th>
+          <th>
+            <div>
+              {{ getCellText(table.heading[1])
+              }}<span v-if="getCellDiscount(table.heading[1])" class="discount"
+                ><s>{{ getCellDiscount(table.heading[1]) }}</s></span
+              >
+            </div>
+          </th>
+        </tr>
+      </thead>
+
+      <!-- TABLE BODY -->
+      <tbody>
+        <tr v-for="(row, idx2) in table.rows" :key="idx2">
+          <td>{{ row[0].text || '' }}</td>
+          <td>
+            <div>
+              {{ getCellText(row[1])
+              }}<span v-if="getCellDiscount(row[1])" class="discount"
+                ><s>{{ getCellDiscount(row[1]) }}</s></span
+              >
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style lang="scss">
+@use './card-table.scss';
+</style>

package/components/card-toggle-switches/card-toggle-switches.scss

@@ -0,0 +1,13 @@
+@use '../../base/abstracts' as a;
+
+.card-toggle-switches {
+  .card-toggle-switches__title {
+    @include a.type(200, strong);
+
+    margin-bottom: var(--e-space-4);
+  }
+
+  .toggle-switch + .toggle-switch {
+    margin-top: var(--e-space-4);
+  }
+}

package/components/card-toggle-switches/u-card-toggle-switches.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import UToggleSwitch, { ToggleSwitch } from '../../elements/toggle-switch/u-toggle-switch.vue'
+
+interface Props {
+  title?: string
+  toggles?: ToggleSwitch[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-toggle-switches">
+    <h4 class="card-toggle-switches__title">{{ title }}</h4>
+
+    <slot>
+      <UToggleSwitch
+        v-for="(toggle, idx) in toggles"
+        :key="idx"
+        v-bind="toggle"
+        variant="small"
+        label-position="right"
+      ></UToggleSwitch>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss">
+@use './card-toggle-switches.scss';
+</style>

package/components/collapsible/collapsible.scss

@@ -0,0 +1,14 @@
+@use '../../base/abstracts' as a;
+
+.collapsible {
+  .collapsible__heading {
+    line-height: 1;
+    color: inherit;
+  }
+
+  .collapsible__header {
+    text-align: left;
+    width: 100%;
+    cursor: pointer;
+  }
+}

package/components/collapsible/u-collapsible.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useId, computed, ref, inject, watch } from 'vue'
+import TransitionHeight from '../../helpers/transition-height.vue'
+
+interface Props {
+  header?: string
+  panel?: string
+  level?: 2 | 3 | 4 | 5 | 6
+  expanded?: boolean
+}
+
+const cId = useId()
+const { level = 3, expanded = false } = defineProps<Props>()
+
+// Initial state
+const panelHidden = ref(!expanded)
+
+const headingTag = computed(() => `h${level}`)
+const headerId = `collapsible-header-${cId}`
+const panelId = `collapsible-panel-${cId}`
+
+// This will only be available if there's a parent <UCollapsibelGroup>
+const { activeItem, updateActiveItem } = inject('activeItem', {})
+
+const onToggle = () => {
+  panelHidden.value = !panelHidden.value
+
+  if (updateActiveItem) {
+    updateActiveItem(cId)
+  }
+}
+
+if (activeItem) {
+  watch(activeItem, (newV) => {
+    if (newV !== cId) {
+      // Collapse component
+      panelHidden.value = true
+    }
+  })
+}
+
+defineExpose({
+  isExpanded: computed(() => !panelHidden.value),
+})
+</script>
+
+<template>
+  <div class="collapsible">
+    <component :is="headingTag" class="collapsible__heading">
+      <button
+        :id="headerId"
+        :aria-controls="panelId"
+        class="collapsible__header"
+        type="button"
+        :aria-expanded="panelHidden ? 'false' : 'true'"
+        @click="onToggle"
+      >
+        <slot name="header">
+          {{ header }}
+        </slot>
+      </button>
+    </component>
+
+    <TransitionHeight>
+      <section
+        v-if="!panelHidden"
+        :id="panelId"
+        class="collapsible__panel"
+        :aria-labelledby="headerId"
+      >
+        <slot name="panel">
+          <div v-html="panel"></div>
+        </slot>
+      </section>
+    </TransitionHeight>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './collapsible.scss';
+</style>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref, provide } from 'vue'
+
+const activeItem = ref(null)
+const updateActiveItem = (id: string): void => {
+  activeItem.value = id
+}
+
+provide('activeItem', { activeItem, updateActiveItem })
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/components/icon-teaser/icon-teaser.scss

@@ -0,0 +1,58 @@
+@use '../../base/abstracts/' as a;
+
+.icon-tesaer__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.icon-teaser__image-wrapper {
+  margin: 0 auto var(--e-space-6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: a.rem(120);
+  height: a.rem(120);
+  border-radius: 100%;
+  background-color: var(--e-c-primary-01-50);
+
+  @include a.bp(m) {
+    margin-bottom: var(--e-space-4);
+    width: a.rem(96);
+    height: a.rem(96);
+  }
+
+  img {
+    width: a.rem(56);
+    height: a.rem(56);
+
+    @include a.bp(m) {
+      width: a.rem(38);
+      height: a.rem(38);
+    }
+  }
+}
+
+.icon-teaser__title {
+  @include a.type(400, strong);
+
+  text-align: center;
+
+  @include a.bp(m) {
+    @include a.type(300, strong);
+  }
+}
+
+.icon-teaser__description {
+  @include a.type(200);
+
+  margin-top: var(--e-space-3);
+  text-align: center;
+
+  @include a.bp(m) {
+    margin-top: var(--e-space-1);
+
+    @include a.type(100);
+  }
+}

package/components/icon-teaser/u-icon-teaser.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types.ts'
+
+export interface IconTeaser {
+  title?: string
+  description?: string
+  image?: Image
+}
+
+defineProps<IconTeaser>()
+</script>
+
+<template>
+  <div class="icon-teaser">
+    <div class="icon-teaser__image-wrapper">
+      <slot name="image">
+        <img aria-hidden="true" :src="image?.src" :alt="image?.alt" />
+      </slot>
+    </div>
+
+    <div class="icon-teaser__content">
+      <h2 class="icon-teaser__title">
+        <slot name="title">{{ title }}</slot>
+      </h2>
+
+      <p class="icon-teaser__description">
+        <slot name="description">{{ description }}</slot>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use './icon-teaser.scss';
+</style>

package/components/icon-teaser-group/icon-teaser-group.scss

@@ -0,0 +1,10 @@
+@use '../../base/abstracts/' as a;
+
+.icon-teaser-group {
+  display: flex;
+  gap: var(--e-space-10);
+
+  @include a.bp(lg) {
+    flex-direction: column;
+  }
+}

package/components/icon-teaser-group/u-icon-teaser-group.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import UIconTeaser, { IconTeaser } from '../icon-teaser/u-icon-teaser.vue'
+
+interface Props {
+  items?: IconTeaser[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="icon-teaser-group">
+    <slot><UIconTeaser v-for="(item, idx) in items" :key="idx" v-bind="item"></UIconTeaser></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@use './icon-teaser-group.scss';
+</style>

package/components/icon-text-block/u-icon-text-block.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ImageBase } from '../../elements/image/u-image.vue'
+import { Image } from '../../elements/types.ts'
 
 interface Props {
   title: string
   description?: string
-  image: ImageBase
+  image: Image
 }
 
 defineProps<Props>()
@@ -13,12 +13,7 @@ defineProps<Props>()
 <template>
   <div class="icon-text-block">
     <div class="illu-wrapper">
-      <img
-        class="illustration"
-        aria-hidden="true"
-        :src="image.src"
-        :alt="image.alt"
-      />
+      <img class="illustration" aria-hidden="true" :src="image.src" :alt="image.alt" />
     </div>
     <div class="content">
       <h2 class="title">{{ title }}</h2>

package/components/language-nav/language-nav.scss

@@ -0,0 +1,32 @@
+@use '../../base/abstracts/' as a;
+@use '../../elements/text-link/text-link.scss' as t;
+
+.language-nav {
+  @include a.type(100, weak);
+
+  display: flex;
+  grid-gap: var(--e-space-4);
+
+  .language-nav__active-lang,
+  > p {
+    color: var(--e-c-primary-01-900);
+  }
+
+  .language-nav__link,
+  > a {
+    text-decoration: none;
+    color: var(--e-c-mono-700);
+
+    &:hover {
+      color: var(--e-c-secondary-01-900);
+    }
+
+    &:active {
+      color: var(--e-c-primary-01-700);
+    }
+  }
+
+  @include a.bp(lg) {
+    @include a.type(50);
+  }
+}

package/components/language-nav/u-language-nav.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface LanguageSwitch {
+  href: string
+  hreflang: string
+  label: string
+  isActive?: boolean
+}
+
+interface Props {
+  links: LanguageSwitch[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <nav class="language-nav">
+    <template v-for="(link, idx) in links" :key="idx">
+      <p v-if="link.isActive">{{ link.label }}</p>
+      <a v-else :href="link.href" :hreflang="link.hreflang">{{ link.label }}</a>
+    </template>
+  </nav>
+</template>
+
+<style lang="scss">
+@use './language-nav.scss';
+</style>

package/components/panel/panel.scss

@@ -1,16 +1,33 @@
 @use '../../base/abstracts' as a;
 
-.panel{
+.panel {
   position: relative;
-  padding: var(--e-space-14) a.rem(400) a.rem(88) var(--e-space-14);
+  padding: var(--e-space-14) a.rem(400) var(--e-space-14) var(--e-space-14);
   box-shadow: var(--e-elevation-md);
   background-color: var(--e-c-mono-00);
   border-radius: var(--e-brd-radius-3);
   border: 1px solid var(--e-c-mono-200);
   overflow: hidden;
+  align-items: center;
+  display: flex;
+  column-gap: a.rem(40);
+
+  &.has-image {
+    padding: var(--e-space-14);
+
+    @include a.bp('2xl') {
+      padding: var(--e-space-10);
+    }
+
+    @include a.bp(m) {
+      padding: var(--e-space-6);
+      flex-direction: column;
+      row-gap: var(--e-space-6);
+    }
+  }
 
   @include a.bp('2xl') {
-    padding: var(--e-space-10) a.rem(344) a.rem(72) var(--e-space-10);
+    padding: var(--e-space-10) a.rem(344) var(--e-space-10) var(--e-space-10);
   }
 
   @include a.bp('lg') {
@@ -18,7 +35,11 @@
   }
 }
 
-.title {
+.panel__content {
+  order: 1;
+}
+
+.panel__title {
   margin-bottom: var(--e-space-3);
 
   h2 {
@@ -34,7 +55,7 @@
   }
 }
 
-.text {
+.panel__text {
   @include a.type(300);
 
   @include a.bp(lg) {
@@ -42,7 +63,7 @@
   }
 }
 
-.panel-spectro {
+.panel__spectro {
   pointer-events: none;
   position: absolute;
   top: calc(50% - 700px);
@@ -68,3 +89,19 @@
     right: calc(50% - 300px);
   }
 }
+
+.panel__image {
+  flex: 0 0 a.rem(360);
+  width: a.rem(360);
+  order: 2;
+
+  @include a.bp('2xl') {
+    flex: 0 0 a.rem(315);
+    width: a.rem(315);
+  }
+
+  @include a.bp(m) {
+    flex: 1 0 auto;
+    width: auto;
+  }
+}

package/components/panel/u-panel.vue

@@ -1,31 +1,42 @@
 <script setup lang="ts">
-import USpectro from "../../elements/spectro/u-spectro.vue";
-import {Image} from "../../elements/types";
+import USpectro from '../../elements/spectro/u-spectro.vue'
+import { Image } from '../../elements/types'
+import { computed, useSlots } from 'vue'
 
 interface Props {
   title?: string
   text?: string
-  useSpectro?: boolean,
+  useSpectro?: boolean
   image?: Image
 }
 
-defineProps<Props>()
+const { image = null } = defineProps<Props>()
+
+const slots = useSlots()
+
+const hasImage = computed(() => !!image || slots.image)
 </script>
 
 <template>
-  <aside class="panel">
-    <div v-if="useSpectro" class="panel-spectro">
-      <USpectro/>
+  <aside :class="['panel', { 'has-image': hasImage }]">
+    <div v-if="useSpectro && !hasImage" class="panel__spectro">
+      <USpectro />
+    </div>
+
+    <div v-if="image" class="panel__image">
+      <slot name="image">
+        <img :src="image.src" :alt="image.alt" />
+      </slot>
     </div>
 
-    <div class="content">
-      <div class="title">
+    <div class="panel__content">
+      <div class="panel__title">
         <h2>
-          <slot name="title">{{title}}</slot>
+          <slot name="title">{{ title }}</slot>
         </h2>
       </div>
 
-      <div class="text">
+      <div class="panel__text">
         <slot name="text"><div v-html="text"></div></slot>
       </div>
     </div>

package/components/progress-bar/u-progress-bar.vue

@@ -12,7 +12,7 @@ const { fullWidth = false } = defineProps<Props>()
     <div class="progress-track">
       <div class="progress-position" :style="{ width: `${value}%` }"></div>
     </div>
-    <div class="star-icon" v-if="value >= 100"></div>
+    <div v-if="value >= 100" class="star-icon"></div>
   </div>
 </template>