@energie360/ui-library 0.1.0 → 0.1.2

package/elements/text-field/text-field.scss

@@ -0,0 +1,30 @@
+@use '../../base/abstracts' as a;
+@use '../form-field' as f;
+
+.text-field {
+  @include f.form-field-base(input);
+  @include f.form-field-states-all(input);
+  @include f.form-field-error;
+  @include f.form-field-suffix-icon;
+  @include f.form-field-prefix-icon;
+
+  .visually-hidden {
+    @include a.visually-hidden;
+  }
+
+  // Type: Password
+  .password-toggle {
+    display: block;
+    border-radius: var(--e-brd-radius-1);
+    color: var(--e-c-primary-01-500);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--e-c-secondary-01-900);
+    }
+
+    &:active {
+      color: var(--e-c-secondary-01-700);
+    }
+  }
+}

package/elements/text-field/text-field.types.ts

@@ -0,0 +1,6 @@
+export enum TextFieldTypes {
+  text = 'text',
+  number = 'number',
+  email = 'email',
+  password = 'password',
+}

package/elements/text-field/u-text-field.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import UIcon from '../icon/u-icon.vue'
+import { TextFieldTypes } from './text-field.types'
+import { computed, ref, useSlots, useTemplateRef, useId, watch } from 'vue'
+import { FormFieldBase } from '../form-field/form-field.types'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props extends FormFieldBase {
+  name: string
+  type?: TextFieldTypes
+  placeholder?: string
+  readonly?: boolean
+  unit?: string
+}
+
+const inputId = useId()
+
+const {
+  disabled = false,
+  readonly = false,
+  required = false,
+  type = TextFieldTypes.text,
+  helpText = '',
+  errorMessage = '',
+} = defineProps<Props>()
+
+const slots = useSlots()
+const model = defineModel<string>()
+
+const input = useTemplateRef('input')
+
+const isFocused = ref(false)
+const isHovering = ref(false)
+const hasValue = ref(false) // only needed for input type 'search'
+const forceFloatLabel = ref(false)
+
+const spacer = '.&nbsp;'
+
+// In some cases we need to change the input type within the component (for example for the password-show behaviour)
+const _inputType = ref(type)
+
+const onFocus = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isFocused.value = true
+}
+
+const onBlur = () => {
+  isFocused.value = false
+}
+
+const onInput = () => {
+  hasValue.value = !!input.value && input.value.value !== ''
+}
+
+const onHover = () => {
+  if (readonly || disabled) {
+    return
+  }
+
+  isHovering.value = true
+}
+
+const onHoverOut = () => {
+  isHovering.value = false
+}
+
+const hasHelpText = computed(() => {
+  return !!helpText || !!slots.helpText || required
+})
+
+const needsHelpTextSpacer = computed(() => {
+  return !!helpText || !!slots.helpText
+})
+
+const onPasswordToggle = () => {
+  _inputType.value =
+    _inputType.value === TextFieldTypes.password ? TextFieldTypes.text : TextFieldTypes.password
+}
+
+const passwordIcon = computed(() => {
+  return _inputType.value === TextFieldTypes.password ? 'password' : 'password-show'
+})
+
+const passwordA11yText = computed(() => {
+  return _inputType.value === TextFieldTypes.password ? 'showPassword' : 'hidePassword'
+})
+
+watch(
+  () => type,
+  () => {
+    if (type === TextFieldTypes.password) {
+      _inputType.value = TextFieldTypes.password
+    } else {
+      _inputType.value = type
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    :class="[
+      'text-field',
+      {
+        required,
+        disabled,
+        readonly,
+        focus: isFocused,
+        hover: isHovering,
+        'has-value': hasValue,
+        'float-label': isFocused || hasValue || placeholder || forceFloatLabel,
+        'has-error': error,
+        'show-help-text': !required || hasHelpText,
+      },
+    ]"
+    @mouseenter="onHover"
+    @mouseleave="onHoverOut"
+  >
+    <div class="wrapper">
+      <div class="label">
+        <slot name="label"
+          ><label :for="inputId">{{ label }}</label></slot
+        >
+      </div>
+
+      <div class="control">
+        <slot
+          ><input
+            :id="inputId"
+            ref="input"
+            v-model="model"
+            :name
+            :type="_inputType"
+            :disabled
+            :readonly
+            :placeholder
+            :required
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+        /></slot>
+
+        <div class="control-border"></div>
+      </div>
+
+      <!-- TYPE: PASSWORD -->
+      <span v-if="type === TextFieldTypes.password" class="suffix-action">
+        <button type="button" class="password-toggle" @click="onPasswordToggle">
+          <span class="visually-hidden">{{ getTranslation(passwordA11yText) }}</span>
+          <UIcon :name="passwordIcon"></UIcon>
+        </button>
+      </span>
+
+      <!-- UNIT -->
+      <span v-if="unit" class="suffix-text">
+        {{ unit }}
+      </span>
+    </div>
+
+    <div class="help-text">
+      <span class="optional-text"
+        >{{ getTranslation('optional')
+        }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
+      ><slot name="helpText">{{ helpText }}</slot>
+    </div>
+
+    <div class="error-messages-container">
+      <slot name="error-message"
+        ><span>{{ errorMessage }}</span></slot
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './text-field.scss';
+</style>

package/elements/text-link/text-link.scss

@@ -0,0 +1,57 @@
+@use '../../base/abstracts' as a;
+
+@mixin text-link {
+  @include a.type(200, strong);
+
+  color: var(--e-c-primary-01-700);
+  text-decoration: underline;
+  text-underline-offset: 0.4em;
+  transition:
+    text-decoration-color a.$trs-default,
+    color a.$trs-default;
+
+  &:hover {
+    text-decoration-color: var(--e-c-primary-01-50);
+  }
+
+  &:active {
+    text-decoration-color: var(--e-c-primary-01-700);
+  }
+}
+
+@mixin text-link--inverted {
+  color: var(--e-c-primary-01-50);
+
+  &:hover {
+    text-decoration-color: var(--e-c-primary-01-200);
+  }
+
+  &:active {
+    text-decoration-color: var(--e-c-primary-01-50);
+  }
+}
+
+@mixin text-link--secondary {
+  text-decoration: none;
+  color: var(--e-c-mono-700);
+
+  &:hover {
+    color: var(--e-c-mono-900);
+  }
+
+  &:active {
+    color: var(--e-c-mono-700);
+  }
+}
+
+.text-link {
+  @include text-link;
+
+  &.inverted {
+    @include text-link--inverted;
+  }
+
+  &.secondary {
+    @include text-link--secondary;
+  }
+}

package/elements/toggle-switch/toggle-switch-small.scss

@@ -0,0 +1,40 @@
+@use '../../base/abstracts' as a;
+
+.toggle-switch.toggle-switch--small {
+  --width: 54px;
+  --height: 28px;
+  --handle-size: 24px;
+  --inner-padding: 2px;
+
+  .toggle-switch__wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: var(--e-space-4);
+  }
+
+  .toggle-switch__handle {
+    padding: 0;
+  }
+
+  .toggle-switch__text {
+    @include a.visually-hidden;
+  }
+
+  .toggle-switch__label {
+    @include a.type(200);
+
+    padding-top: var(--e-space-0_5);
+    padding-bottom: var(--e-space-0_5);
+  }
+
+  &.label-left {
+    .toggle-switch__wrapper {
+      flex-direction: row-reverse;
+    }
+
+    .toggle-switch__label {
+      margin-right: auto;
+    }
+  }
+}

package/elements/toggle-switch/toggle-switch.scss

@@ -0,0 +1,149 @@
+@use '../../base/abstracts/' as a;
+@use './toggle-switch-small';
+
+.toggle-switch {
+  --width: 102px;
+  --height: 48px;
+  --handle-size: 40px;
+  --inner-padding: 4px;
+
+  .toggle-switch__wrapper {
+    display: block;
+    position: relative;
+    width: var(--width);
+    min-height: var(--height);
+
+    input {
+      // So that the focus works nicely.
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  .toggle-switch__toggle {
+    display: flex;
+    width: var(--width);
+    height: var(--height);
+    flex: 0 0 auto;
+    align-items: center;
+    position: relative;
+    background-color: var(--e-c-mono-200);
+    border-radius: calc(var(--height) * 0.5);
+    transition: background-color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  .toggle-switch__handle {
+    position: absolute;
+    padding: a.rem(8);
+    background-color: var(--e-c-mono-00);
+    border-radius: 100%;
+    width: var(--handle-size);
+    height: var(--handle-size);
+    top: var(--inner-padding);
+    left: var(--inner-padding);
+    pointer-events: none;
+    color: var(--e-c-mono-900);
+    transition:
+      transform var(--e-trs-duration-faster) var(--e-trs-easing-default),
+      color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  .toggle-switch__text {
+    @include a.type(200, strong);
+
+    display: block;
+    position: absolute;
+    padding-left: a.rem(8);
+    padding-right: a.rem(8);
+    transition:
+      color var(--e-trs-duration-faster) var(--e-trs-easing-default),
+      opacity var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+    &.yes {
+      left: 16px;
+      opacity: 0;
+    }
+
+    &.no {
+      right: 10px;
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    .toggle-switch__toggle {
+      background-color: var(--e-c-mono-500);
+    }
+  }
+
+  &:active {
+    .toggle-switch__toggle {
+      background-color: var(--e-c-mono-700);
+    }
+
+    .toggle-switch__text {
+      color: var(--e-c-mono-00);
+    }
+  }
+
+  // States
+  &.checked {
+    .toggle-switch__toggle {
+      background-color: var(--e-c-primary-01-900);
+    }
+
+    .toggle-switch__handle {
+      transform: translateX(calc(var(--width) - var(--handle-size) - var(--inner-padding) * 2));
+      color: var(--e-c-primary-01-900);
+    }
+
+    .toggle-switch__text {
+      color: var(--e-c-mono-00);
+
+      &.yes {
+        opacity: 1;
+      }
+
+      &.no {
+        opacity: 0;
+      }
+    }
+
+    &:hover {
+      .toggle-switch__toggle {
+        background-color: var(--e-c-secondary-01-900);
+      }
+
+      .toggle-switch__handle {
+        color: var(--e-c-secondary-01-900);
+      }
+    }
+
+    &:active {
+      .toggle-switch__toggle {
+        background-color: var(--e-c-secondary-01-700);
+      }
+
+      .toggle-switch__handle {
+        color: var(--e-c-secondary-01-700);
+      }
+    }
+  }
+
+  &.disabled,
+  &.disabled.checked {
+    .toggle-switch__handle,
+    .toggle-switch__text {
+      color: var(--e-c-mono-500);
+    }
+
+    .toggle-switch__toggle {
+      background-color: var(--e-c-mono-50);
+    }
+  }
+
+  // // TODO: Do we need readonly styles here?
+  // &.readonly {
+  //   //
+  // }
+}

package/elements/toggle-switch/u-toggle-switch.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UIcon from '../icon/u-icon.vue'
+import { getTranslation } from '../../utils/translations/translate'
+
+export interface ToggleSwitch {
+  name: string
+  label?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  value?: string
+  variant?: 'normal' | 'small'
+  labelPosition?: 'left' | 'right'
+}
+
+const {
+  variant = 'big',
+  labelPosition = 'right',
+  disabled = false,
+  readonly = false,
+  required = false,
+} = defineProps<ToggleSwitch>()
+
+const model = defineModel<boolean>({ default: false })
+
+const iconsMap = {
+  small: ['close-small', 'check-small'],
+  big: ['close', 'mini-check'],
+}
+
+const uncheckIcon = computed(() => iconsMap[variant][0])
+const checkIcon = computed(() => iconsMap[variant][1])
+
+const classes = computed(() => ({
+  checked: model.value,
+  disabled,
+  readonly,
+  [`toggle-switch--${variant}`]: variant,
+  [`label-${labelPosition}`]: labelPosition,
+}))
+</script>
+
+<template>
+  <div :class="['toggle-switch', classes]">
+    <label class="toggle-switch__wrapper">
+      <span class="toggle-switch__toggle">
+        <span class="toggle-switch__text yes" :aria-hidden="model.value ? 'false' : 'true'">{{
+          getTranslation('yes')
+        }}</span>
+        <span class="toggle-switch__text no" :aria-hidden="model.value ? 'true' : 'false'">{{
+          getTranslation('no')
+        }}</span>
+        <span class="toggle-switch__handle">
+          <UIcon :name="model.value ? checkIcon : uncheckIcon" custom-size />
+        </span>
+      </span>
+      {{ label }}
+      <slot name="input"
+        ><input v-model="model" type="checkbox" :name :required :disabled :readonly :value
+      /></slot>
+    </label>
+  </div>
+</template>
+
+<style lang="scss">
+@use './toggle-switch.scss';
+</style>

package/elements/types.ts

@@ -0,0 +1,19 @@
+// TODO: @Dani if you have a better naming please update it.
+
+export interface Cta {
+  label: string
+  href: string
+  target: string
+}
+
+export interface Image {
+  src: string
+  alt: string
+}
+
+export interface SelectOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+  selected?: boolean
+}

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/globals.js

@@ -1,4 +1,3 @@
 // 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/'
+export const assetsPath = import.meta.env.DEV === true ? '/static/ui-assets/' : '/static/ui-assets/'

package/helpers/transition-height.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const onEnter = (el) => {
+  el.hidden = false
+  el.style.height = `${el.scrollHeight}px`
+}
+
+const onAfterEnter = (el) => {
+  el.style.height = 'auto'
+}
+
+const onLeave = (el) => {
+  el.style.height = `${el.scrollHeight}px`
+
+  requestAnimationFrame(() => {
+    el.style.height = '0'
+  })
+}
+</script>
+
+<template>
+  <Transition name="fade" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave">
+    <slot></slot>
+  </Transition>
+</template>
+
+<style scoped lang="scss">
+@use '../base/abstracts' as a;
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: height a.$trs-default;
+  overflow: hidden;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  height: 0;
+}
+</style>

package/i18n/i18n.ts

@@ -0,0 +1,40 @@
+const translations = {
+  DE: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+  FR: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+  IT: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+  EN: {
+    yes: 'Ja',
+    no: 'Nein',
+    optional: 'Optional',
+    increaseValue: 'Wert erhöhen',
+    decreaseValue: 'Wert vermindern',
+    showPassword: 'Passwort anzeigen',
+    hidePassword: 'Passwort verbergen',
+  },
+}
+
+export default translations

package/layout/grid/grid.mixin.scss

@@ -6,8 +6,7 @@ Helper to colculate col width in %.
 Looks complicated because we use grid-gap on the row, which takes away from available width.
  */
 @function col-width($size, $columns, $gutter) {
-  @return math.div(100% - (($columns - 1) * $gutter), $columns) * $size +
-    (($size - 1) * $gutter);
+  @return math.div(100% - (($columns - 1) * $gutter), $columns) * $size + (($size - 1) * $gutter);
 }
 
 @mixin grid-row() {
@@ -63,17 +62,11 @@ $columns: Grid size (in columns). Default is set by global variable $grid-column
 }
 
 // TODO: Change args order -> $prop, $indent, $columns
-@mixin grid-col-space(
-  $indent,
-  $columns: a.$grid-columns,
-  $prop: 'margin-left'
-) {
-  #{$prop}: col-width($indent, $columns, a.$grid-gutter-2xl) +
-    a.$grid-gutter-2xl;
+@mixin grid-col-space($indent, $columns: a.$grid-columns, $prop: 'margin-left') {
+  #{$prop}: col-width($indent, $columns, a.$grid-gutter-2xl) + a.$grid-gutter-2xl;
 
   @include a.bp(lg) {
-    #{$prop}: col-width($indent, $columns, a.$grid-gutter-lg) +
-      a.$grid-gutter-lg;
+    #{$prop}: col-width($indent, $columns, a.$grid-gutter-lg) + a.$grid-gutter-lg;
   }
 
   @include a.bp(m) {