@energie360/ui-library 0.1.0 → 0.1.2

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/{icon-text-block.vue → u-icon-text-block.vue}

@@ -1,20 +1,19 @@
-<script setup>
-defineProps({
-  title: String,
-  description: String,
-  image: Object,
-})
+<script setup lang="ts">
+import { Image } from '../../elements/types.ts'
+
+interface Props {
+  title: string
+  description?: string
+  image: Image
+}
+
+defineProps<Props>()
 </script>
 
 <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/index.js

@@ -0,0 +1,14 @@
+/**
+ * It's not recommended to import components from this file, because tree-shaking won't work then.
+ * -> https://vite.dev/guide/performance#avoid-barrel-files
+ */
+export { default as UIconTextBlock } from './icon-text-block/u-icon-text-block.vue'
+export { default as UIconTextBlockGroup } from './icon-text-block-group/u-icon-text-block-group.vue'
+export { default as UTable } from './table/u-table.vue'
+export { default as UTableHeader } from './table/u-table-header.vue'
+export { default as UTableRow } from './table/u-table-row.vue'
+export { default as UTableCell } from './table/u-table-cell.vue'
+export { default as UTableHeading } from './table/u-table-heading.vue'
+export { default as UCellIconText } from './table/u-cell-icon-text.vue'
+export { default as UCellCtas } from './table/u-cell-ctas.vue'
+export { default as UTooltip } from './tooltip/u-tooltip.vue'

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

@@ -0,0 +1,107 @@
+@use '../../base/abstracts' as a;
+
+.panel {
+  position: relative;
+  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) var(--e-space-10) var(--e-space-10);
+  }
+
+  @include a.bp('lg') {
+    padding: var(--e-space-6) var(--e-space-6) a.rem(104) var(--e-space-6);
+  }
+}
+
+.panel__content {
+  order: 1;
+}
+
+.panel__title {
+  margin-bottom: var(--e-space-3);
+
+  h2 {
+    @include a.type(500, strong);
+  }
+
+  @include a.bp(lg) {
+    margin-bottom: var(--e-space-2);
+
+    h2 {
+      @include a.type(300, strong);
+    }
+  }
+}
+
+.panel__text {
+  @include a.type(300);
+
+  @include a.bp(lg) {
+    @include a.type(200);
+  }
+}
+
+.panel__spectro {
+  pointer-events: none;
+  position: absolute;
+  top: calc(50% - 700px);
+  right: a.rem(-1560 + 400);
+  width: a.rem(1560);
+  height: a.rem(1560);
+  user-select: none;
+
+  @include a.bp('2xl') {
+    right: a.rem(-1400 + 344);
+    width: a.rem(1400);
+    height: a.rem(1400);
+  }
+
+  @include a.bp(lg) {
+    top: calc(100% - 95px);
+    right: -180px;
+    width: a.rem(600);
+    height: a.rem(600);
+  }
+
+  @include a.bp(s) {
+    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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+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
+  image?: Image
+}
+
+const { image = null } = defineProps<Props>()
+
+const slots = useSlots()
+
+const hasImage = computed(() => !!image || slots.image)
+</script>
+
+<template>
+  <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="panel__content">
+      <div class="panel__title">
+        <h2>
+          <slot name="title">{{ title }}</slot>
+        </h2>
+      </div>
+
+      <div class="panel__text">
+        <slot name="text"><div v-html="text"></div></slot>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped lang="scss">
+@use './panel.scss';
+</style>

package/components/progress-bar/progress-bar.scss

@@ -0,0 +1,37 @@
+@use '../../base/abstracts' as a;
+
+.progress-bar {
+  display: flex;
+  align-items: center;
+  column-gap: a.rem(4);
+  height: a.rem(10);
+  width: #{a.rem(64 + 4 + 10)}; // progress-track + space + icon
+
+  &.full-width {
+    width: 100%;
+
+    .progress-track {
+      width: calc(100% - #{a.rem(4 + 10)});
+    }
+  }
+}
+
+.progress-track {
+  width: a.rem(64);
+  min-width: a.rem(64);
+  height: a.rem(4);
+  background-color: var(--e-c-mono-100);
+  border-radius: a.rem(4);
+  overflow: hidden;
+}
+
+.progress-position {
+  height: 100%;
+  background-color: var(--e-c-primary-01-500);
+}
+
+.star-icon {
+  width: a.rem(10);
+  height: a.rem(10);
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234BA528' d='M4.822 1.35a.2.2 0 0 1 .356 0l.975 1.909a.2.2 0 0 0 .147.107l2.117.336a.2.2 0 0 1 .11.34L7.012 5.557a.2.2 0 0 0-.056.173l.334 2.118a.2.2 0 0 1-.288.21L5.09 7.085a.2.2 0 0 0-.182 0L3 8.058a.2.2 0 0 1-.29-.209l.335-2.118a.2.2 0 0 0-.056-.173L1.473 4.041a.2.2 0 0 1 .11-.339L3.7 3.366a.2.2 0 0 0 .147-.107l.975-1.91Z'/%3E%3C/svg%3E");
+}

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  value: number
+  fullWidth?: boolean
+}
+
+const { fullWidth = false } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['progress-bar', { 'full-width': fullWidth }]">
+    <div class="progress-track">
+      <div class="progress-position" :style="{ width: `${value}%` }"></div>
+    </div>
+    <div v-if="value >= 100" class="star-icon"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './progress-bar.scss';
+</style>