@energie360/ui-library 0.1.0 → 0.1.2

package/layout/grid/grid.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use '../../base/abstracts' as a;
 @use 'grid.mixin' as *;
-
 @use 'grid-row';
 
 // These loops create column classes for the breakpoints 2xl, xl, lg, m and s.
@@ -14,7 +13,7 @@
     @include grid-col($i);
   }
 
-  @if ($i < a.$grid-columns) {
+  @if $i < a.$grid-columns {
     .col-indent-#{$i} {
       @include grid-col-indent($i);
     }
@@ -28,7 +27,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-2xl-#{$i} {
         @include grid-col-indent($i);
       }
@@ -48,7 +47,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-xl-#{$i} {
         @include grid-col-indent($i);
       }
@@ -68,7 +67,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-lg-#{$i} {
         @include grid-col-indent($i);
       }
@@ -88,7 +87,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-m-#{$i} {
         @include grid-col-indent($i);
       }
@@ -108,7 +107,7 @@
       @include grid-col($i);
     }
 
-    @if ($i < a.$grid-columns) {
+    @if $i < a.$grid-columns {
       .col-indent-s-#{$i} {
         @include grid-col-indent($i);
       }

package/layout/split/split.scss

@@ -0,0 +1,96 @@
+@use '../../base/abstracts/' as a;
+@use '../container/container.scss' as c;
+
+$split-top-bar-height: 120px;
+$split-top-bar-height-mobile: 72px;
+
+.split {
+  position: relative;
+  padding-left: 50%;
+
+  @include a.bp(lg) {
+    display: grid;
+    padding-left: 0;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+    gap: 0;
+    grid-template-areas:
+      'fixed content'
+      'footer footer';
+  }
+
+  @include a.bp(m) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.split__fixed {
+  position: fixed;
+  inset: 0 50% 0 0;
+
+  @include a.bp(lg) {
+    position: static;
+    grid-area: fixed;
+  }
+
+  @include a.bp(m) {
+    width: 100%;
+    aspect-ratio: 4/5;
+    order: 3;
+  }
+}
+
+.split__top-bar {
+  height: a.rem($split-top-bar-height);
+
+  @include a.bp(lg) {
+    grid-area: content;
+    height: a.rem($split-top-bar-height-mobile);
+  }
+
+  @include a.bp(m) {
+    order: 1;
+  }
+}
+
+.split__content {
+  padding-top: var(--e-space-20);
+  padding-bottom: var(--e-space-20);
+  margin: 0 auto;
+  width: a.rem(400);
+
+  @include a.bp(lg) {
+    margin-top: a.rem(
+      $split-top-bar-height-mobile
+    ); // Because multiple divs in same area do overlap.
+
+    grid-area: content;
+    width: a.rem(338);
+  }
+
+  @include a.bp(m) {
+    order: 2;
+    width: auto;
+    margin-top: 0;
+    max-width: calc(#{a.rem(338)} + 2 * #{a.rem(a.$container-edge-m)});
+    padding-left: a.rem(a.$container-edge-m);
+    padding-right: a.rem(a.$container-edge-m);
+  }
+
+  @include a.bp(s) {
+    max-width: calc(#{a.rem(338)} + 2 * #{a.rem(a.$container-edge-s)});
+    padding-left: a.rem(a.$container-edge-s);
+    padding-right: a.rem(a.$container-edge-s);
+  }
+}
+
+.split__footer {
+  @include a.bp(lg) {
+    grid-area: footer;
+  }
+
+  @include a.bp(m) {
+    order: 4;
+  }
+}

package/modules/footer/footer.scss

@@ -0,0 +1,161 @@
+@use '../../base/abstracts/' as a;
+@use '../../elements/text-link/text-link.scss' as t;
+@use '../../layout/container/container.scss' as l;
+
+.footer {
+  &.reduced {
+    .footer__top {
+      display: none;
+    }
+
+    .footer__bottom-col {
+      display: flex;
+      column-gap: var(--e-space-4);
+    }
+
+    .footer__copyright {
+      order: 1;
+    }
+
+    .footer__meta-navigation {
+      order: 2;
+    }
+
+    .footer__language-nav {
+      position: static;
+    }
+  }
+}
+
+.footer__top {
+  padding-top: var(--e-space-10);
+  padding-bottom: var(--e-space-16);
+  background-color: var(--e-c-mono-50);
+
+  @include a.bp(lg) {
+    padding-top: var(--e-space-8);
+    padding-bottom: var(--e-space-10);
+  }
+}
+
+.footer__top-row {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: var(--e-space-12);
+}
+
+.footer__top-column {
+  white-space: nowrap;
+
+  &:nth-child(3) {
+    margin-right: auto;
+  }
+
+  &.service {
+    white-space: wrap;
+
+    @include a.bp(lg) {
+      a {
+        display: block;
+      }
+    }
+  }
+
+  @include a.type(200);
+
+  a {
+    @include t.text-link--secondary;
+
+    font-weight: var(--e-type-weight-strong);
+    -webkit-font-smoothing: antialiased; // This is an exception. Usually we only use this for large heading text.
+  }
+
+  @include a.bp(m) {
+    flex: 1 0 100%;
+  }
+}
+
+.footer__top-right-column {
+  @include a.bp(xl) {
+    flex: 1 0 100%;
+  }
+}
+
+.footer__social-links {
+  display: flex;
+  grid-gap: var(--e-space-6);
+}
+
+.footer__bottom {
+  background-color: var(--e-c-mono-100);
+  padding-top: var(--e-space-8);
+  padding-bottom: var(--e-space-6);
+}
+
+.footer__bottom-row {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+  @include a.bp(m) {
+    flex-direction: column;
+  }
+}
+
+.footer__language-nav {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  @include a.bp(lg) {
+    top: auto;
+    bottom: 0;
+  }
+
+  @include a.bp(m) {
+    position: relative;
+    margin-bottom: calc(var(--e-space-8) + #{a.rem(18)});
+  }
+}
+
+.footer__meta-navigation {
+  @include a.type(100);
+
+  display: flex;
+  grid-gap: var(--e-space-6);
+  margin-bottom: var(--e-space-3);
+
+  a {
+    @include t.text-link--secondary;
+  }
+
+  @include a.bp(lg) {
+    @include a.type(50);
+  }
+
+  @include a.bp(m) {
+    flex-direction: column;
+    grid-gap: var(--e-space-4);
+    margin-bottom: var(--e-space-8);
+  }
+}
+
+.footer__copyright {
+  @include a.type(100);
+
+  color: var(--e-c-mono-700);
+
+  @include a.bp(lg) {
+    @include a.type(50);
+  }
+
+  @include a.bp(m) {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.footer__container {
+  @include l.grid-container;
+}

package/modules/footer/u-footer.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+interface Props {
+  variant?: 'normal' | 'reduced'
+}
+
+const { variant = 'normal' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['footer', variant]">
+    <div class="footer__top">
+      <div class="footer__container">
+        <div class="footer__top-row">
+          <div class="footer__top-column">
+            <slot name="address"></slot>
+          </div>
+
+          <div class="footer__top-column">
+            <slot name="contact"></slot>
+          </div>
+
+          <div class="footer__top-column service">
+            <slot name="service"></slot>
+          </div>
+
+          <div class="footer__top-right-column">
+            <div class="footer__social-links">
+              <slot name="socialLinks"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer__bottom">
+      <div class="footer__container">
+        <div class="footer__bottom-row">
+          <div class="footer__bottom-col">
+            <div class="footer__meta-navigation">
+              <slot name="metaNav"></slot>
+            </div>
+
+            <div class="footer__copyright">
+              <slot name="copyright"></slot>
+            </div>
+          </div>
+
+          <div class="footer__language-nav">
+            <slot name="languageNav"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use './footer.scss';
+</style>

package/package.json

@@ -1,32 +1,52 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
+  "type": "module",
   "main": "dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
+    ".": "./dist/custom-elements.js",
+    "./package.json": "./package.json",
     "./base-style.css": "./dist/base-style.css",
+    "./elements": "./elements/index.js",
     "./elements/*": "./elements/*",
+    "./components": "./components/index.js",
     "./components/*": "./components/*",
-    "./wizard/*": "./wizard/*"
+    "./modules": "./modules/index.js",
+    "./modules/*": "./modules/*",
+    "./wizard": "./wizard/index.js",
+    "./wizard/*": "./wizard/*",
+    "./utility/elements/*": "./dist/elements/*",
+    "./utility/layout/*": "./dist/layout/*"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.1",
-    "sass": "^1.83.4",
-    "vite": "^6.0.7",
-    "vue": "^3.5.13"
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.13.10",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.21",
+    "chokidar": "^4.0.3",
+    "postcss": "^8.5.3",
+    "sass": "^1.86.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.8"
   },
   "dependencies": {
-    "@energie360/design-tokens": "^1.1.0"
+    "@energie360/design-tokens": "^1.3.0"
   },
   "scripts": {
-    "dev": "NODE_ENV=development vite build --watch --mode developement",
-    "build": "vite build",
-    "prepublish": "npm run build"
+    "dev:vite": "NODE_ENV=development vite build --watch --mode development",
+    "watch": "node ./watch.js",
+    "dev": "npm run build; npm run watch",
+    "build:utilities": "sass --load-path=node_modules utility:dist",
+    "build:base": "sass --load-path=node_modules base/main-base.scss:dist/base-style.css",
+    "build": "npm run build:utilities && npm run build:base",
+    "prepublish": "npm run build",
+    "type-check": "vue-tsc --build"
   }
 }

package/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/utility/elements/text-link.scss

@@ -0,0 +1 @@
+@use '../../elements/text-link/text-link';

package/utility/layout/split.scss

@@ -0,0 +1 @@
+@use '../../layout/split/split';

package/utility/utility-text.js

@@ -0,0 +1 @@
+import '../elements/text-link/text-link.scss'

package/utils/object/deep-get.js

@@ -7,8 +7,7 @@
  * @param {Array} keys
  * @returns {*}
  */
-export const deepGet = (obj, keys) =>
-  keys.reduce((xs, x) => xs?.[x] ?? null, obj)
+export const deepGet = (obj, keys) => keys.reduce((xs, x) => xs?.[x] ?? null, obj)
 
 /**
  *

package/utils/translations/translate.js

@@ -1,4 +1,7 @@
 import { deepGetByPath } from '../object/deep-get.js'
+import translations from '../../i18n/i18n.ts'
+
+const DEFAULT_LANGUAGE = 'DE'
 
 /**
  *
@@ -8,3 +11,13 @@ import { deepGetByPath } from '../object/deep-get.js'
  */
 export const translate = (translationKeyPath, defaultValue = '') =>
   deepGetByPath(window._EC.translations, translationKeyPath) || defaultValue
+
+const getLanguage = () => {
+  const langAttr = document.documentElement.lang.split('-')[0].toUpperCase()
+
+  return langAttr === '' ? DEFAULT_LANGUAGE : langAttr
+}
+
+export const getTranslation = (key) => {
+  return translations[getLanguage()][key]
+}

package/{vite.config.js → vite.config.ts}

@@ -10,8 +10,9 @@ export default defineConfig({
     sourcemap: true,
     lib: {
       entry: [
-        resolve(__dirname, 'index.js'),
+        resolve(__dirname, 'custom-elements.js'),
         resolve(__dirname, 'base-style.js'),
+        resolve(__dirname, 'utility/utility-text.js'),
       ],
       name: '@energie360/ui-library',
       formats: ['es'],

package/watch.js

@@ -0,0 +1,27 @@
+import chokidar from 'chokidar'
+import { execSync } from 'child_process'
+import { glob } from 'node:fs/promises'
+
+const watchOptions = {
+  persistent: true,
+  ignoreInitial: true,
+}
+
+const handlerError = (e) => {
+  console.error(e)
+}
+
+const watcherScss = chokidar.watch(await Array.fromAsync(glob('**/*.scss')), watchOptions)
+const reloadScss = () => {
+  try {
+    execSync('npm run build -s', { stdio: 'inherit' })
+    console.log('--> reload CSS')
+    // reloadJs()
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+watcherScss.on('add', reloadScss)
+watcherScss.on('change', reloadScss)
+watcherScss.on('error', handlerError)

package/wizard/index.js

@@ -0,0 +1,4 @@
+export { default as UWizardIntro } from './wizard-intro/u-wizard-intro.vue'
+export { default as UWizardLayout } from './wizard-layout/u-wizard-layout.vue'
+export { default as UWizardLayoutBlock } from './wizard-layout/u-wizard-layout-block.vue'
+export { default as UWizardLayoutElement } from './wizard-layout/u-wizard-layout-element.vue'

package/wizard/wizard-intro/{wizard-intro.vue → u-wizard-intro.vue}

@@ -1,9 +1,10 @@
-<script setup>
-defineProps({
-  title: String,
-  description: String,
-  ctaText: String
-})
+<script setup lang="ts">
+interface Props {
+  title?: string
+  description?: string
+}
+
+defineProps<Props>()
 </script>
 
 <template>
@@ -11,12 +12,14 @@ defineProps({
     <div class="left-col">
       <div>
         <div class="title-slot">
-          <slot name="title"><h1>{{ title }}</h1></slot>
+          <slot name="title"
+            ><h1>{{ title }}</h1></slot
+          >
         </div>
 
         <div class="description-slot">
           <slot name="description">
-            <p v-html="description"/>
+            <p v-html="description" />
           </slot>
         </div>
 
@@ -27,7 +30,7 @@ defineProps({
     </div>
 
     <div class="right-col">
-      <slot name="content-right"></slot>
+      <slot name="contentRight"></slot>
     </div>
   </div>
 </template>

package/wizard/wizard-intro/wizard-intro.scss

@@ -36,4 +36,8 @@
 
 .cta-slot {
   margin-top: var(--e-space-16);
+
+  @include a.bp(lg) {
+    margin-top: var(--e-space-12);
+  }
 }

package/wizard/wizard-layout/{wizard-layout-block.vue → u-wizard-layout-block.vue}

@@ -1,14 +1,16 @@
-<script setup>
-defineProps({
-  columns: [Number, String],
-})
+<script setup lang="ts">
+interface Props {
+  columns: string | number
+}
+
+defineProps<Props>()
 </script>
 
 <template>
   <div class="wizard-layout-block">
     <div class="row row--centered">
       <div :class="[`col-${columns}`]">
-        <slot></slot>
+        <slot />
       </div>
     </div>
   </div>

package/wizard/wizard-layout/{wizard-layout-element.vue → u-wizard-layout-element.vue}

@@ -1,6 +1,6 @@
 <template>
   <div class="wizard-layout-element">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

package/wizard/wizard-layout/{wizard-layout.vue → u-wizard-layout.vue}

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="wizard-layout">
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>