@energie360/ui-library 0.1.0 → 0.1.1

package/elements/button/_button-base.scss

@@ -38,7 +38,7 @@
     pointer-events: none;
   }
 
-  &[loading] {
+  &.loading {
     cursor: default;
   }
 

package/elements/button/_button-filled-inverted.scss

@@ -24,13 +24,13 @@
   }
 
   &:active,
-  &[loading] {
+  &.loading {
     background-color: var(--e-c-primary-01-200);
     border-color: var(--e-c-primary-01-200);
   }
 
-  &.disabled:not([loading]),
-  &:disabled:not([loading]) {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     color: var(--e-c-mono-700);
 
     .icon,

package/elements/button/_button-filled.scss

@@ -19,13 +19,13 @@
   }
 
   &:active,
-  &[loading] {
+  &.loading {
     background-color: var(--e-c-secondary-01-700);
     border-color: var(--e-c-secondary-01-700);
   }
 
-  &.disabled:not([loading]),
-  &:disabled:not([loading]) {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     background-color: var(--e-c-mono-500);
     border-color: var(--e-c-mono-500);
   }

package/elements/button/_button-outlined-inverted.scss

@@ -19,13 +19,13 @@
   }
 
   &:active,
-  &[loading] {
+  &.loading {
     background-color: transparent;
     border-color: var(--e-c-primary-01-500);
   }
 
-  &.disabled:not([loading]),
-  &:disabled:not([loading]) {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     color: var(--e-c-mono-500);
     border: 2px solid var(--e-c-mono-500);
     background-color: transparent;

package/elements/button/_button-outlined.scss

@@ -19,13 +19,13 @@
   }
 
   &:active,
-  &[loading] {
+  &.loading {
     background-color: transparent;
     border-color: var(--e-c-primary-01-500);
   }
 
-  &.disabled:not([loading]),
-  &:disabled:not([loading]) {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     border-color: var(--e-c-mono-500);
     background-color: transparent;
     color: var(--e-c-mono-500);

package/elements/button/_button-plain.scss

@@ -29,8 +29,8 @@
     }
   }
 
-  &.disabled:not([loading]),
-  &:disabled:not([loading]) {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     background: none;
     color: var(--e-c-mono-500);
 
@@ -40,7 +40,7 @@
     }
   }
 
-  &[loading] {
+  &.loading {
     .loader,
     e-loader {
       --dot-color: var(--e-c-secondary-01-700);

package/elements/button/_button-secondary-outlined.scss

@@ -19,13 +19,13 @@
   }
 
   &:active,
-  &[loading] {
+  &.loading {
     background-color: transparent;
     border-color: var(--e-c-secondary-02-200);
   }
 
-  &.disabled:not([loading]),
-  &:disabled:not([loading]) {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     border-color: var(--e-c-mono-500);
     background-color: transparent;
     color: var(--e-c-mono-500);

package/elements/button/button.js

@@ -1,5 +1,5 @@
 import { defineCustomElement } from 'vue'
-import Button from './button.vue'
+import Button from './u-button.vue'
 import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
 import styles from './button.scss?inline'
 
@@ -7,6 +7,6 @@ Button.styles = [customElementBaseStyle, styles]
 
 export const ButtonElement = {
   register: () => {
-    customElements.define('e-button', defineCustomElement(Button))
+    customElements.define('u-button', defineCustomElement(Button))
   },
 }

package/elements/button/button.scss

@@ -57,7 +57,7 @@
   }
 
   // States
-  &[loading] {
+  &.loading {
     color: transparent;
 
     .icon,

package/elements/button/u-button.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+import ULoader from '../loader/u-loader.vue'
+
+// TODO: use enums for variant prop.
+interface ButtonProps {
+  label?: string
+  loading?: boolean
+  disabled?: boolean
+  icon?: string
+  href?: string
+  target?: string
+  variant?: string
+}
+
+defineProps<ButtonProps>()
+</script>
+
+<template>
+  <template v-if="href">
+    <a :class="['button', variant]" :href :target>
+      <UIcon v-if="icon" :name="icon"></UIcon>
+      <slot>{{ label }}</slot>
+    </a>
+  </template>
+
+  <template v-else>
+    <button
+      :class="['button', variant, { loading: loading }]"
+      :disabled="disabled || null"
+    >
+      <UIcon v-if="icon" :name="icon" />
+      <slot>{{ label }}</slot>
+
+      <span class="button__loader" v-if="loading">
+        <ULoader />
+      </span>
+    </button>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+@use './button.scss';
+</style>

package/elements/elements.js

@@ -0,0 +1,35 @@
+// All `elements` Custom Elements. Needs some refactoring.
+
+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'
+
+/**
+ * These exports allow best tree-shaking behaviour.
+ * Obviously you'll have to import 'manually' all the elements you need.
+ *
+ * @example
+ * import { IconButton } from '@energie360/ui-library'
+ * IconButton.register()
+ */
+export { Button, IconButton, Icon, Loader }
+
+/**
+ * With this export you get all the elements. Meaning all the elements will be inlcuded in your bundle, even if you register only one element.
+ *
+ * @example
+ * import { Elements } from '@energie360/ui-library'
+ * Elements.Button.register()
+ */
+
+/**
+ *
+ * @type {{IconButton: {register: function(): void}, Button: {register: function(): void}, Loader: {register: function(): void}, Icon: {register: function(): void}}}
+ */
+export const Elements = {
+  Button,
+  IconButton,
+  Icon,
+  Loader,
+}

package/elements/form-field/form-field-base.scss

@@ -0,0 +1,142 @@
+@use '../../base/abstracts' as a;
+
+@mixin form-field-base($el: input) {
+  .wrapper {
+    position: relative;
+  }
+
+  .label {
+    @include a.type(200);
+
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: var(--e-space-3);
+    padding: 0 var(--e-space-1);
+    color: var(--e-c-mono-700);
+    transform: translateY(-50%);
+    background-color: var(--e-c-mono-00);
+    border-radius: var(--e-brd-radius-1);
+    transition:
+      top a.$trs-default,
+      left a.$trs-default,
+      font-size a.$trs-default,
+      color a.$trs-default,
+      line-height a.$trs-default;
+  }
+
+  .control {
+    position: relative;
+
+    #{$el} {
+      padding: var(--e-space-3) var(--e-space-4);
+      transition: box-shadow a.$trs-default;
+      width: 100%;
+      color: transparent;
+
+      // This gives the focus-outline also a rounded border.
+      border-radius: var(--e-brd-radius-2);
+
+      @if $el == 'input' {
+        // For some reason `<input type="date">` adds more height.
+        // So we fix the height here.
+        height: a.rem(48);
+      }
+
+      @if $el == 'textarea' {
+        display: block;
+        min-height: a.rem(100);
+      }
+    }
+  }
+
+  .control-border {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--e-brd-radius-2);
+    border: 1px solid var(--e-c-mono-900);
+  }
+
+  .error-messages-container,
+  .help-text {
+    margin-top: var(--e-space-1);
+    padding-left: var(--e-space-4);
+    color: var(--e-c-mono-700);
+  }
+
+  .error-messages-container {
+    display: none;
+    color: var(--e-c-signal-03-700);
+
+    @include a.type(50, strong);
+  }
+
+  .help-text {
+    display: none;
+
+    @include a.type(50);
+  }
+
+  // STATES (Same for all input types)
+  &.float-label {
+    .label {
+      @include a.type(50);
+
+      top: a.rem(1);
+      color: var(--e-c-mono-900);
+    }
+
+    .control {
+      #{$el} {
+        color: var(--e-c-mono-900);
+      }
+    }
+  }
+
+  &.show-help-text {
+    .help-text {
+      display: block;
+    }
+  }
+
+  &.hover,
+  &.focus {
+    .control-border {
+      border: 2px solid var(--e-c-primary-01-900);
+    }
+  }
+
+  &.focus.float-label {
+    .label {
+      color: var(--e-c-primary-01-900);
+    }
+  }
+
+  // Layout Modifiers
+  &.layout-compact {
+    .label {
+      left: var(--e-space-2);
+    }
+
+    .error-messages-container,
+    .help-text {
+      padding-left: var(--e-space-3);
+    }
+
+    .control-border {
+      opacity: 0;
+    }
+
+    .control {
+      #{$el} {
+        height: a.rem(40);
+        padding: var(--e-space-2) var(--e-space-3) var(--e-space-2)
+          var(--e-space-3);
+      }
+    }
+  }
+}

package/elements/form-field/form-field-error.scss

@@ -0,0 +1,20 @@
+@mixin form-field-error {
+  &.has-error,
+  &.has-error.float-label {
+    .label {
+      color: var(--e-c-signal-03-700);
+    }
+
+    .control-border {
+      border: 2px solid var(--e-c-signal-03-700);
+    }
+
+    .help-text {
+      display: none;
+    }
+
+    .error-messages-container {
+      display: block;
+    }
+  }
+}

package/elements/form-field/form-field-prefix-suffix.scss

@@ -0,0 +1,80 @@
+@use '../../base/abstracts' as a;
+
+@mixin form-field-prefix-icon {
+  .prefix-icon {
+    position: absolute;
+    top: 50%;
+    left: var(--e-space-4);
+    transform: translateY(-50%);
+  }
+
+  &:has(.prefix-icon) {
+    .label {
+      left: var(--e-space-12);
+    }
+
+    &.float-label {
+      .label {
+        left: var(--e-space-3);
+      }
+    }
+
+    .control input {
+      padding-left: var(--e-space-12);
+    }
+  }
+
+  // LAYOUT: compact
+  &.layout-compact {
+    .prefix-icon {
+      left: 0;
+    }
+
+    &:has(.prefix-icon) {
+      .control input {
+        padding-left: var(--e-space-8);
+      }
+    }
+  }
+}
+
+@mixin form-field-suffix-icon {
+  .suffix-action,
+  .suffix-text,
+  .suffix-icon {
+    position: absolute;
+    top: 50%;
+    right: var(--e-space-4);
+    transform: translateY(-50%);
+  }
+
+  .suffix-text {
+    @include a.type(200);
+  }
+
+  .suffix-icon {
+    color: var(--e-c-primary-01-700);
+    pointer-events: none;
+  }
+
+  &.focus,
+  &.hover {
+    .suffix-icon {
+      color: var(--e-c-primary-01-900);
+    }
+  }
+
+  &.has-error {
+    .suffix-icon {
+      color: var(--e-c-signal-03-700);
+    }
+  }
+
+  &:has(.suffix-text),
+  &:has(.suffix-icon) {
+    // A suffix only makes sense for an <input>. That's why we select only input here.
+    .control input {
+      padding-right: var(--e-space-12);
+    }
+  }
+}

package/elements/form-field/form-field-states.scss

@@ -0,0 +1,59 @@
+@mixin form-field-required {
+  &.required {
+    .optional-text {
+      display: none;
+    }
+  }
+}
+
+@mixin form-field-disabled($el: input) {
+  &.disabled {
+    .control-border {
+      border-color: var(--e-c-mono-500);
+    }
+
+    .label {
+      color: var(--e-c-mono-500);
+    }
+
+    .control {
+      #{$el} {
+        color: var(--e-c-mono-500);
+      }
+    }
+
+    .error-messages-container,
+    .help-text {
+      color: var(--e-c-mono-500);
+    }
+  }
+}
+
+@mixin form-field-readonly($el: input) {
+  &.readonly {
+    .control-border {
+      border-color: var(--e-c-mono-200);
+    }
+
+    .label {
+      color: var(--e-c-mono-700);
+    }
+
+    .control {
+      #{$el} {
+        color: var(--e-c-mono-700);
+      }
+    }
+
+    .error-messages-container,
+    .help-text {
+      color: var(--e-c-mono-700);
+    }
+  }
+}
+
+@mixin form-field-states-all($el: input) {
+  @include form-field-disabled($el);
+  @include form-field-readonly($el);
+  @include form-field-required;
+}

package/elements/form-field/index.scss

@@ -0,0 +1,4 @@
+@forward 'form-field-base';
+@forward './form-field-states';
+@forward 'form-field-error';
+@forward 'form-field-prefix-suffix';

package/elements/icon/icon.js

@@ -1,5 +1,5 @@
 import { defineCustomElement } from 'vue'
-import Icon from './icon.vue'
+import Icon from './u-icon.vue'
 import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
 import ceStyles from './icon.ce.scss?inline'
 import styles from './icon.scss?inline'
@@ -8,6 +8,6 @@ Icon.styles = [customElementBaseStyle, ceStyles, styles]
 
 export const IconElement = {
   register: () => {
-    customElements.define('e-icon', defineCustomElement(Icon))
+    customElements.define('u-icon', defineCustomElement(Icon))
   },
 }

package/elements/icon/{icon.vue → u-icon.vue}

@@ -1,7 +1,14 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 import { assetsPath } from '../../globals.js'
 
+interface Props {
+  name: string
+  inline?: boolean
+  width?: number
+  height?: number
+}
+
 /**
  * Path prefix for icons.
  */
@@ -19,18 +26,12 @@ const svgPlaceholder = `
   <svg width="24" height="24"></svg>
 `
 
-/**
- * @typedef { import('vue').Ref } Ref
- */
-let svgContent = ref(svgPlaceholder)
+const svgContent = ref(svgPlaceholder)
 
 /**
  * Fetches an icon from the assets folder. Or if already fecthed gets it from `iconMap`.
- *
- * @param {string} name - Icon name (without extension)
- * @returns {Ref}
  */
-const getIcon = (name) => {
+const getIcon = (name: string): string => {
   // Check if icon has already been fetched.
   if (iconMap.has(name)) {
     svgContent.value = iconMap.get(name)
@@ -57,12 +58,7 @@ const getIcon = (name) => {
   return svgContent.value
 }
 
-defineProps({
-  name: String,
-  inline: Boolean,
-  width: Number,
-  height: Number,
-})
+defineProps<Props>()
 </script>
 
 <template>

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

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

package/elements/icon-button/{icon-button.vue → u-icon-button.vue}

@@ -1,23 +1,22 @@
-<script setup>
-import Icon from '../icon/icon.vue'
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
 
-defineProps({
-  label: String,
-  icon: String,
-  variant: String,
-  disabled: Boolean,
-  href: String,
-  target: {
-    type: String,
-    default: '_blank',
-  },
-})
+interface Props {
+  label?: string
+  icon: string
+  variant?: string
+  disabled?: boolean
+  href?: string
+  target?: string
+}
+
+const { target = '_blank', variant = 'filled' } = defineProps<Props>()
 </script>
 
 <template>
   <template v-if="href">
     <a :class="['icon-button', variant]" :href="href" :target="target">
-      <Icon v-if="icon" :name="icon" />
+      <UIcon v-if="icon" :name="icon" />
 
       <span class="visually-hidden">
         <slot>{{ label }}</slot>
@@ -27,7 +26,7 @@ defineProps({
 
   <template v-else>
     <button :class="['icon-button', variant]" :disabled="disabled || null">
-      <Icon v-if="icon" :name="icon" />
+      <UIcon v-if="icon" :name="icon" />
 
       <span class="visually-hidden">
         <slot>{{ label }}</slot>

package/elements/image/image.scss

@@ -0,0 +1,3 @@
+.image {
+  // TODO: migrate `img` element.
+}

package/elements/image/u-image.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Image } from '../types'
+
+interface Props extends Image {}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <picture>
+    <img class="image" :src :alt />
+  </picture>
+</template>
+
+<style lang="scss" scoped>
+@use './image.scss';
+</style>