@energie360/ui-library 1.1.0 → 1.2.0

package/elements/button-tile/button-tile.scss

@@ -29,4 +29,9 @@
 .button-tile__left {
   display: flex;
   flex-direction: column;
+  hyphens: auto;
+}
+
+.button-tile__right {
+  flex: 0 0 auto;
 }

package/elements/numeric-stepper/numeric-stepper.scss

@@ -98,7 +98,7 @@
 }
 
 .error-message-container {
-  @include a.type(50);
+  @include a.type(50, strong);
 
   display: none;
   margin-top: var(--e-space-1);

package/elements/select-tiles/select-tiles.scss

@@ -1,6 +1,13 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
 .select-tiles {
+  // Modifiers
+  &.columns-3 {
+    .select-tiles__items {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
   &.error {
     .select-tiles__error-message {
       display: block;
@@ -11,10 +18,10 @@
 .select-tiles__items {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-gap: var(--e-space-10);
+  gap: var(--e-space-10);
 
   @include a.bp(lg) {
-    grid-gap: var(--e-space-4);
+    gap: var(--e-space-4);
   }
 
   @include a.bp(m) {

package/elements/select-tiles/u-select-tiles.vue

@@ -4,9 +4,10 @@ import { useRadioGroup } from '../radio-group/radio-group-composables'
 interface Props {
   error?: boolean
   errorMessage?: string
+  columns?: 2 | 3
 }
 
-defineProps<Props>()
+const { columns = 2, errorMessage = '' } = defineProps<Props>()
 
 const model = defineModel<string>()
 
@@ -17,7 +18,7 @@ useRadioGroup({
 </script>
 
 <template>
-  <div :class="['select-tiles', { error }]">
+  <div :class="['select-tiles', `columns-${columns}`, { error }]">
     <div class="select-tiles__items">
       <slot></slot>
     </div>

package/globals.js

@@ -6,6 +6,6 @@
 // TODO: Find a more 'generic' way to set an environment variable when using/developing the library.
 // In the meantime we'll just use this fixed path for the ui-assets.
 
-const assetsPathPrefix = import.meta.env.VITE_ASSETS_PATH_PREFIX || ''
+const assetsPathPrefix = import.meta?.env ? import.meta.env.VITE_ASSETS_PATH_PREFIX || '' : ''
 
 export const assetsPath = assetsPathPrefix + '/static/ui-assets/'

package/modules/login-animation/u-login-animation.vue

@@ -71,7 +71,7 @@ const onMousemove = (e: MouseEvent) => {
           @ready="onSpriteReady"
         />
       </div>
-      <img :src="`${assetsPath}images/forest.png`" alt="" />
+      <img :src="`${assetsPath}images/forest.png`" alt="Forest background" />
     </div>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

package/utils/translations/translate.js

@@ -9,7 +9,15 @@ const getLanguage = () => {
 }
 
 export const getTranslation = (key, replace) => {
-  let translation = translations[getLanguage()][key]
+  const currentLanguage = getLanguage()
+
+  let translation
+
+  if (currentLanguage in translations) {
+    translation = translations[currentLanguage][key]
+  } else {
+    translation = translations[DEFAULT_LANGUAGE][key]
+  }
 
   if (replace) {
     for (key in replace) {

package/wizard/wizard-layout/u-wizard-layout.vue

@@ -1,5 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  embedded?: boolean
+}
+
+defineProps<Props>()
+</script>
+
 <template>
-  <div class="container">
+  <div :class="['container', { embedded }]">
     <div class="wizard-layout">
       <slot />
     </div>

package/wizard/wizard-layout/wizard-layout.scss

@@ -5,19 +5,24 @@
 .container {
   @include c.grid-container;
 
+  --e-wizard-wrapper-top: #{a.rem(dt.$space-28)};
+  --e-wizard-wrapper-bottom: #{a.rem(dt.$space-28)};
+  --e-wizard-block-bottom: #{a.rem(dt.$space-16)};
+  --e-wizard-block-between: #{a.rem(dt.$space-6)};
+
   // TODO: Can we do this differently?
   &.embedded {
     padding-left: 0;
     padding-right: 0;
+
+    .wizard-layout {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
   }
 }
 
 .wizard-layout {
-  --e-wizard-wrapper-top: #{a.rem(dt.$space-28)};
-  --e-wizard-wrapper-bottom: #{a.rem(dt.$space-28)};
-  --e-wizard-block-bottom: #{a.rem(dt.$space-16)};
-  --e-wizard-block-between: #{a.rem(dt.$space-6)};
-
   padding-top: var(--e-wizard-wrapper-top);
   padding-bottom: var(--e-wizard-wrapper-bottom);