@energie360/ui-library 0.0.3

package/elements/icon-button/_icon-button-filled-inverted.scss

@@ -0,0 +1,42 @@
+@mixin icon-button-filled-inverted {
+  &::before {
+    background-color: var(--e-c-mono-00);
+    border-color: var(--e-c-mono-00);
+  }
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-primary-01-700);
+  }
+
+  &:hover {
+    &::before {
+      background-color: var(--e-c-primary-01-100);
+      border-color: var(--e-c-primary-01-100);
+    }
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-secondary-01-700);
+    }
+  }
+
+  &:active {
+    &::before {
+      background-color: var(--e-c-primary-01-200);
+      border-color: var(--e-c-primary-01-200);
+    }
+  }
+
+  &:disabled {
+    &::before {
+      background-color: var(--e-c-mono-500);
+      border-color: var(--e-c-mono-500);
+    }
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-700);
+    }
+  }
+}

package/elements/icon-button/_icon-button-filled.scss

@@ -0,0 +1,32 @@
+@mixin icon-button-filled {
+  &::before {
+    background-color: var(--e-c-primary-01-700);
+    border-color: var(--e-c-primary-01-700);
+  }
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-mono-00);
+  }
+
+  &:hover {
+    &::before {
+      background-color: var(--e-c-secondary-01-900);
+      border-color: var(--e-c-secondary-01-900);
+    }
+  }
+
+  &:active {
+    &::before {
+      background-color: var(--e-c-secondary-01-700);
+      border-color: var(--e-c-secondary-01-700);
+    }
+  }
+
+  &:disabled {
+    &::before {
+      background-color: var(--e-c-mono-500);
+      border-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/icon-button/_icon-button-outlined-inverted.scss

@@ -0,0 +1,34 @@
+@mixin icon-button-outlined-inverted {
+  &::before {
+    background-color: transparent;
+    border-color: var(--e-c-mono-00);
+  }
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-mono-00);
+  }
+
+  &:hover {
+    &::before {
+      border-color: var(--e-c-primary-01-200);
+    }
+  }
+
+  &:active {
+    &::before {
+      border-color: var(--e-c-primary-01-500);
+    }
+  }
+
+  &:disabled {
+    &::before {
+      border-color: var(--e-c-mono-500);
+    }
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/icon-button/_icon-button-outlined.scss

@@ -0,0 +1,38 @@
+@mixin icon-button-outline-hover-state {
+  &::before {
+    border-color: var(--e-c-primary-01-200);
+  }
+}
+
+@mixin icon-button-outlined {
+  &::before {
+    background-color: transparent;
+    border-color: var(--e-c-mono-500);
+  }
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-mono-900);
+  }
+
+  &:hover {
+    @include icon-button-outline-hover-state;
+  }
+
+  &:active {
+    &::before {
+      border-color: var(--e-c-primary-01-500);
+    }
+  }
+
+  &:disabled {
+    &::before {
+      border-color: var(--e-c-mono-500);
+    }
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/icon-button/_icon-button-plain-inverted.scss

@@ -0,0 +1,32 @@
+@mixin icon-button-plain-inverted {
+  &::before {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-mono-00);
+  }
+
+  &:hover {
+    &::before {
+      background-color: var(--e-c-secondary-01-700);
+      border-color: var(--e-c-secondary-01-700);
+    }
+  }
+
+  &:active {
+    &::before {
+      background-color: var(--e-c-secondary-01-900);
+      border-color: var(--e-c-secondary-01-900);
+    }
+  }
+
+  &:disabled {
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/icon-button/_icon-button-plain.scss

@@ -0,0 +1,32 @@
+@mixin icon-button-plain {
+  &::before {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-primary-01-700);
+  }
+
+  &:hover {
+    &::before {
+      background-color: var(--e-c-primary-01-50);
+      border-color: var(--e-c-primary-01-50);
+    }
+  }
+
+  &:active {
+    &::before {
+      background-color: var(--e-c-primary-01-100);
+      border-color: var(--e-c-primary-01-100);
+    }
+  }
+
+  &:disabled {
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/icon-button/icon-button.js

@@ -0,0 +1,12 @@
+import { defineCustomElement } from 'vue'
+import IconButton from './icon-button.vue'
+import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
+import styles from './icon-button.scss?inline'
+
+IconButton.styles = [customElementBaseStyle, styles]
+
+export const IconButtonElement = {
+  register: () => {
+    customElements.define('e-icon-button', defineCustomElement(IconButton))
+  },
+}

package/elements/icon-button/icon-button.scss

@@ -0,0 +1,51 @@
+// Custom ELement base
+@use '../../base/abstracts' as a;
+@use '../../base/custom-element-base';
+@use '../../base/focus-handling';
+@use '../../base/resets';
+@use '../../base/accessibility';
+
+// Icon Button base and variants
+@use './icon-button-base' as *;
+@use './icon-button-filled' as *;
+@use './icon-button-outlined' as *;
+@use './icon-button-plain' as *;
+@use './icon-button-filled-inverted' as *;
+@use './icon-button-outlined-inverted' as *;
+@use './icon-button-plain-inverted' as *;
+
+.icon-button {
+  .icon,
+  e-icon {
+    // Icons must always have this size in button.
+    width: a.rem(24);
+    height: a.rem(24);
+  }
+
+  @include icon-button-base;
+
+  // ---- PRIMARY ----
+  & {
+    @include icon-button-filled;
+  }
+
+  &.outlined {
+    @include icon-button-outlined;
+  }
+
+  &.plain {
+    @include icon-button-plain;
+  }
+
+  &.filled-inverted {
+    @include icon-button-filled-inverted;
+  }
+
+  &.outlined-inverted {
+    @include icon-button-outlined-inverted;
+  }
+
+  &.plain-inverted {
+    @include icon-button-plain-inverted;
+  }
+}

package/elements/icon-button/icon-button.vue

@@ -0,0 +1,41 @@
+<script setup>
+import Icon from '../icon/icon.vue'
+
+defineProps({
+  label: String,
+  icon: String,
+  variant: String,
+  disabled: Boolean,
+  href: String,
+  target: {
+    type: String,
+    default: '_blank',
+  },
+})
+</script>
+
+<template>
+  <template v-if="href">
+    <a :class="['icon-button', variant]" :href="href" :target="target">
+      <Icon v-if="icon" :name="icon" />
+
+      <span class="visually-hidden">
+        {{ label }}
+      </span>
+    </a>
+  </template>
+
+  <template v-else>
+    <button :class="['icon-button', variant]" :disabled="disabled || null">
+      <Icon v-if="icon" :name="icon" />
+
+      <span class="visually-hidden">
+        {{ label }}
+      </span>
+    </button>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+@use './icon-button.scss';
+</style>

package/elements/index.js

@@ -0,0 +1,11 @@
+import { ButtonElement as Button } from './button/button.js'
+import { IconButtonElement as IconButton } from './icon-button/icon-button.js'
+import { IconElement as Icon } from './icon/icon.js'
+import { LoaderElement as Loader } from './loader/loader.js'
+
+export const Elements = {
+  Button,
+  IconButton,
+  Icon,
+  Loader,
+}

package/elements/loader/loader.ce.scss

@@ -0,0 +1,5 @@
+:host {
+  display: inline-block;
+
+  --dot-color: var(--e-c-mono-900);
+}

package/elements/loader/loader.js

@@ -0,0 +1,13 @@
+import { defineCustomElement } from 'vue'
+import Loader from './loader.vue'
+import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
+import ceStyles from './loader.ce.scss?inline'
+import styles from './loader.scss?inline'
+
+Loader.styles = [customElementBaseStyle, ceStyles, styles]
+
+export const LoaderElement = {
+  register: () => {
+    customElements.define('e-loader', defineCustomElement(Loader))
+  },
+}

package/elements/loader/loader.scss

@@ -0,0 +1,106 @@
+$horizontal-width: 64px;
+$vertical-height: 12px;
+
+@keyframes horizontal {
+  0% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(0);
+    opacity: 1;
+    width: 8px;
+  }
+
+  50% {
+    transform: translateX(calc(#{$horizontal-width} / 2 - 8px));
+    opacity: 0.7;
+    width: 16px;
+  }
+
+  80% {
+    transform: translateX(calc(#{$horizontal-width} - 8px));
+    opacity: 1;
+    width: 8px;
+  }
+
+  100% {
+    transform: translateX(calc(#{$horizontal-width} - 8px));
+  }
+}
+
+@keyframes vertical {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(0);
+    opacity: 1;
+    height: 8px;
+  }
+
+  55% {
+    transform: translateY(-#{$vertical-height});
+    opacity: 0.7;
+    height: 16px;
+  }
+
+  60% {
+    transform: translateY(0);
+    opacity: 1;
+    height: 8px;
+  }
+
+  70% {
+    transform: translateY(-4px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/* Default loader styles */
+.loader {
+  position: relative;
+  display: inline-flex;
+
+  --dot-color: var(--e-c-mono-900);
+}
+
+.loader > span {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: var(--dot-color);
+}
+
+/* Horizontal animation */
+.loader.horizontal {
+  width: #{$horizontal-width};
+}
+
+.loader.horizontal > span {
+  transform: translateX(0);
+  animation-name: horizontal;
+  animation-duration: 1s;
+  animation-direction: alternate;
+  animation-timing-function: cubic-bezier(0.4, 0.61, 0.61, 0.4);
+  animation-iteration-count: infinite;
+}
+
+/* Vertical animation */
+.loader.vertical {
+  height: 8px;
+  width: 8px;
+}
+
+.loader.vertical > span {
+  transform: translateY(0);
+  animation-name: vertical;
+  animation-duration: 2000ms;
+  animation-timing-function: cubic-bezier(0.47, 0.52, 0.165, 1.005);
+  animation-iteration-count: infinite;
+}

package/elements/loader/loader.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  anim: {
+    type: String,
+    default: 'horizontal',
+  },
+})
+</script>
+
+<template>
+  <span :class="['loader', anim]">
+    <span></span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+@use './loader.scss';
+</style>

package/globals.js

@@ -0,0 +1,4 @@
+// A possible idea would be to use a cdn when the package is built.
+// Currently we'll use a fixed path for the assets on dev and prod. This must be made available by the application using ui-library.
+export const assetsPath =
+  import.meta.env.DEV === true ? '/static/ui-assets' : '/static/ui-assets'

package/index.js

@@ -0,0 +1 @@
+export * from './elements/'

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@energie360/ui-library",
+  "version": "0.0.3",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./style.css": "./dist/style.css",
+    "./elements/*": "./elements/*"
+  },
+  "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"
+  },
+  "dependencies": {
+    "@energie360/design-tokens": "^1.1.0"
+  },
+  "scripts": {
+    "dev": "NODE_ENV=development vite build --watch --mode developement",
+    "build": "vite build",
+    "prepublish": "npm run build"
+  }
+}

package/style.js

@@ -0,0 +1,2 @@
+// TODO: Is style.css ok? Or rename it?
+import './base/main.scss'

package/utils/math/clamp.js

@@ -0,0 +1,14 @@
+/**
+ * Clamp number to given bounds.
+ *
+ * @example
+ * clamp(123, 50, 110) // -> 110
+ *
+ * @param {Number} num
+ * @param {Number} lower - Lower bound
+ * @param {Number} upper - Upper bound
+ * @returns {Number}
+ */
+export const clamp = (num, lower, upper) => {
+  return Math.min(Math.max(num, lower), upper)
+}

package/utils/math/index.js

@@ -0,0 +1 @@
+export { clamp } from './clamp.js'

package/utils/object/deep-get.js

@@ -0,0 +1,26 @@
+/* eslint no-useless-escape:off */
+// From https://www.30secondsofcode.org/js/s/get-nested-object-value/
+
+/**
+ *
+ * @param {Object} obj
+ * @param {Array} keys
+ * @returns {*}
+ */
+export const deepGet = (obj, keys) =>
+  keys.reduce((xs, x) => xs?.[x] ?? null, obj)
+
+/**
+ *
+ * @param {Object} obj
+ * @param {string} path
+ * @returns {*}
+ */
+export const deepGetByPath = (obj, path) =>
+  deepGet(
+    obj,
+    path
+      .replace(/\[([^\[\]]*)\]/g, '.$1.')
+      .split('.')
+      .filter((t) => t !== ''),
+  )

package/utils/object/index.js

@@ -0,0 +1,2 @@
+export { deepGet } from '/deep-get.js'
+export { deepGetByPath } from '/deep-get.js'

package/utils/translations/index.js

@@ -0,0 +1 @@
+export { translate } from './translate.js'

package/utils/translations/translate.js

@@ -0,0 +1,10 @@
+import { deepGetByPath } from '../object/deep-get.js'
+
+/**
+ *
+ * @param {string} translationKeyPath
+ * @param {string} defaultValue
+ * @returns {string}
+ */
+export const translate = (translationKeyPath, defaultValue = '') =>
+  deepGetByPath(window._EC.translations, translationKeyPath) || defaultValue

package/vite.config.js

@@ -0,0 +1,31 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import autoprefixer from 'autoprefixer'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    cssCodeSplit: true,
+    sourcemap: true,
+    lib: {
+      entry: [resolve(__dirname, 'index.js'), resolve(__dirname, 'style.js')],
+      name: '@energie360/ui-library',
+      formats: ['es'],
+      fileName: (format, entryName) => `${entryName}.js`,
+    },
+  },
+  optimizeDeps: {
+    entries: [],
+  },
+  css: {
+    postcss: {
+      plugins: [autoprefixer],
+    },
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+})