@energie360/ui-library 0.1.0 → 0.1.2

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,41 @@
+<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 v-if="loading" class="button__loader">
+        <ULoader />
+      </span>
+    </button>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+@use './button.scss';
+</style>

package/elements/button-chip/button-chip.scss

@@ -0,0 +1,83 @@
+@use '../../base/abstracts' as a;
+
+@mixin button-chip-normal {
+  color: var(--e-c-primary-01-900);
+  background-color: var(--e-c-primary-01-100);
+
+  &:hover {
+    color: var(--e-c-secondary-01-950);
+    background-color: var(--e-c-primary-01-200);
+  }
+
+  &:active {
+    color: var(--e-c-primary-01-900);
+    background-color: var(--e-c-primary-01-100);
+  }
+
+  &:disabled {
+    color: var(--e-c-mono-700);
+    background-color: var(--e-c-mono-200);
+    cursor: not-allowed;
+  }
+}
+
+@mixin button-chip-inverted {
+  color: var(--e-c-mono-00);
+  background-color: var(--e-c-secondary-01-950);
+
+  &:hover {
+    background-color: var(--e-c-secondary-01-1000);
+  }
+
+  &:disabled {
+    color: var(--e-c-mono-700);
+    background-color: var(--e-c-mono-200);
+    cursor: not-allowed;
+  }
+}
+
+@mixin button-chip-minified {
+  &:not(.inverted) {
+    background-color: transparent;
+  }
+
+  padding: a.rem(6);
+
+  .icon {
+    margin-left: 0;
+  }
+
+  .button-chip__label {
+    @include a.visually-hidden;
+  }
+}
+
+.button-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: a.rem(6) a.rem(16);
+  column-gap: a.rem(4);
+  border-radius: 18px;
+  cursor: pointer;
+  transition:
+    background-color a.$trs-default,
+    color a.$trs-default;
+
+  .icon {
+    margin-left: a.rem(-10);
+  }
+
+  @include a.bp(m) {
+    @include button-chip-minified;
+  }
+
+  @include button-chip-normal;
+
+  &.inverted {
+    @include button-chip-inverted;
+  }
+}
+
+.button-chip__label {
+  @include a.type(200, strong);
+}

package/elements/button-chip/u-button-chip.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+
+enum ButtonChipVariant {
+  normal = 'normal',
+  inverted = 'inverted',
+}
+
+interface Props {
+  variant?: ButtonChipVariant
+  label?: string
+  icon?: string
+  disabled?: boolean
+  href?: string
+  target?: string
+}
+
+const { variant = ButtonChipVariant.normal } = defineProps<Props>()
+</script>
+
+<template>
+  <template v-if="href">
+    <a :class="['button-chip', variant]" :href :target>
+      <UIcon v-if="icon" :name="icon"></UIcon>
+
+      <span class="button-chip__label"
+        ><slot>{{ label }}</slot></span
+      >
+    </a>
+  </template>
+
+  <template v-else>
+    <button :class="['button-chip', variant]" :disabled>
+      <UIcon v-if="icon" :name="icon"></UIcon>
+
+      <span class="button-chip__label"
+        ><slot>{{ label }}</slot></span
+      >
+    </button>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+@use './button-chip.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,141 @@
+@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%;
+
+      // 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 {
+    z-index: -1;
+    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/form-field.types.ts

@@ -0,0 +1,8 @@
+export interface FormFieldBase {
+  label?: string
+  required?: boolean
+  disabled?: boolean
+  error?: boolean
+  errorMessage?: string
+  helpText?: string
+}

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,20 +58,13 @@ const getIcon = (name) => {
   return svgContent.value
 }
 
-defineProps({
-  name: String,
-  inline: Boolean,
-  width: Number,
-  height: Number,
-})
+defineProps<Props>()
 </script>
 
 <template>
   <svg
     aria-hidden="true"
-    :style="
-      width && height ? { width: width + 'px', height: height + 'px' } : false
-    "
+    :style="width && height ? { width: width + 'px', height: height + 'px' } : false"
     :class="['icon', { 'icon-inline': inline }]"
     v-html="getIcon(name)"
   ></svg>

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))
   },
 }