@energie360/ui-library 0.1.4 → 0.1.5

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

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { useRadioGroup } from '../radio-group/radio-group-composables'
 
-const activeSelectChip = ref(null)
-const updateActiveSelectChip = (id: string): void => {
-  activeSelectChip.value = id
-}
+const model = defineModel<string>()
 
-provide('select-chip-group', {
-  activeSelectChip,
-  updateActiveSelectChip,
+useRadioGroup({
+  model,
+  provideKey: 'select-chip-group',
 })
 </script>
 

package/i18n/i18n.ts

@@ -1,3 +1,4 @@
+// TODO: translate this, dude!!
 const translations = {
   DE: {
     yes: 'Ja',
@@ -7,6 +8,7 @@ const translations = {
     decreaseValue: 'Wert vermindern',
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
+    close: 'Schliessen',
   },
   FR: {
     yes: 'Ja',
@@ -16,6 +18,7 @@ const translations = {
     decreaseValue: 'Wert vermindern',
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
+    close: 'Fermer',
   },
   IT: {
     yes: 'Ja',
@@ -25,6 +28,7 @@ const translations = {
     decreaseValue: 'Wert vermindern',
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
+    close: 'Chiudere',
   },
   EN: {
     yes: 'Ja',
@@ -34,6 +38,7 @@ const translations = {
     decreaseValue: 'Wert vermindern',
     showPassword: 'Passwort anzeigen',
     hidePassword: 'Passwort verbergen',
+    close: 'Close',
   },
 }
 

package/layout/split/split.scss

@@ -6,7 +6,10 @@ $split-top-bar-height-mobile: 72px;
 
 .split {
   position: relative;
+  display: flex;
+  flex-direction: column;
   padding-left: 50%;
+  min-height: 100vh;
 
   @include a.bp(lg) {
     display: grid;
@@ -86,6 +89,8 @@ $split-top-bar-height-mobile: 72px;
 }
 
 .split__footer {
+  margin-top: auto;
+
   @include a.bp(lg) {
     grid-area: footer;
   }

package/modules/feedback/feedback-animations.scss

@@ -0,0 +1,32 @@
+.fade-in {
+  animation: fadeIn var(--e-trs-duration-fast) var(--e-trs-easing-default);
+}
+
+/* stylelint-disable keyframes-name-pattern */
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Fade (in) Feedback Transition for Feedback Form & Vote Buttons */
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all var(--e-trs-duration-fast) var(--e-trs-easing-default);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-leave-active {
+  position: absolute;
+}

package/modules/feedback/feedback-form.scss

@@ -0,0 +1,12 @@
+.feedback-form {
+  background-color: var(--e-c-mono-00);
+  border-radius: var(--e-brd-radius-2);
+  border: 1px solid var(--e-c-mono-100);
+  bottom: var(--e-space-10);
+  box-shadow: var(--e-elevation-xl);
+  padding-top: var(--e-space-3);
+}
+
+.sections-container {
+  position: relative;
+}

package/modules/feedback/feedback-vote-buttons.scss

@@ -0,0 +1,73 @@
+@use '../../base/abstracts' as a;
+@use './feedback-animations';
+
+.vote-buttons-wrapper {
+  transition: all var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  background-color: var(--e-c-primary-01-700);
+  border-radius: var(--e-brd-radius-2);
+  box-shadow: var(--e-elevation-xl);
+  color: var(--e-c-mono-00);
+  padding: var(--e-space-8);
+  position: relative;
+
+  --fill-color: var(--e-c-mono-00);
+
+  // Overlay effect
+  margin-bottom: calc(var(--e-space-3) * -1);
+  transform: translateZ(0);
+
+  &.feedback-finished {
+    padding-top: var(--e-space-10);
+  }
+
+  @include a.bp(m) {
+    padding: var(--e-space-6);
+    padding-bottom: var(--e-space-8);
+  }
+}
+
+.feedback-title {
+  @include a.type(300, strong);
+
+  @include a.bp(m) {
+    width: calc(100% - var(--e-space-7));
+  }
+}
+
+.finish-text {
+  @include a.type(300, strong);
+
+  margin-top: var(--e-space-6);
+}
+
+.feedback-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--e-space-6);
+  padding-bottom: var(--e-space-2);
+}
+
+.feedback-button {
+  align-items: center;
+  background-color: var(--e-c-mono-200);
+  border-radius: var(--e-space-12);
+  color: var(--e-c-primary-01-700);
+  display: flex;
+  height: var(--e-space-12);
+  justify-content: center;
+  width: var(--e-space-12);
+  opacity: 0.5;
+
+  &:hover {
+    background-color: var(--e-c-mono-00);
+  }
+
+  &.filled {
+    opacity: 1;
+    background-color: var(--e-c-mono-00);
+  }
+}
+
+.vote-buttons-wrapper:has(.finish-text) .feedback-buttons {
+  margin-top: var(--e-space-2);
+}

package/modules/feedback/feedback.scss

@@ -0,0 +1,31 @@
+@use '../../base/abstracts' as a;
+@use './feedback-animations';
+
+.feedback-wrapper {
+  position: fixed;
+
+  // There is no space-13...
+  bottom: calc(var(--e-space-10) + var(--e-space-3));
+  right: var(--e-space-10);
+  width: 440px;
+
+  @include a.bp(m) {
+    width: calc(100% - var(--e-space-10));
+    bottom: var(--e-space-8);
+    right: var(--e-space-5);
+  }
+}
+
+/* Close Feedback / Fade out Transition */
+.fade-out-move,
+.fade-out-enter-active,
+.fade-out-leave-active {
+  transition: all var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.fade-out-leave-active {
+  position: absolute;
+  width: 100%;
+}

package/modules/feedback/types/feedback.type.ts

@@ -0,0 +1,33 @@
+export interface FeedbackData {
+  title: string
+  voteButtons: FeedbackFormVoteButton[]
+  voteFinishText: string
+  finishedViewText?: string
+}
+
+export interface FeedbackFormVoteData {
+  title: string
+  finishText: string
+  hasForm: boolean
+  voteButtons: FeedbackFormVoteButton[]
+}
+
+export interface FeedbackFormVoteButton {
+  label: string
+  rating: number
+  icon: string
+}
+
+export interface FeedbackFormSections {
+  title: string
+  references: string[]
+}
+
+export interface FeedbackPayloadKeys {
+  feature: string
+  path: string
+  reference: string
+}
+export interface FeedbackPayload {
+  rating: number
+}

package/modules/feedback/u-feedback-close.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import UIcon from '../../elements/icon/u-icon.vue'
+import { getTranslation } from '../../utils/translations/translate'
+
+const { color = 'primary-01-700' } = defineProps<{ color?: string }>()
+defineEmits<{ close: [] }>()
+
+const closeColor = computed(() => `var(--e-c-${color})`)
+</script>
+
+<template>
+  <div class="feedback-close-wrapper">
+    <button type="button" :aria-label="getTranslation('close')" @click="$emit('close')">
+      <UIcon name="close" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.feedback-close-wrapper {
+  position: absolute;
+  padding: var(--e-space-2);
+  right: var(--e-space-2);
+  top: var(--e-space-2);
+
+  button {
+    cursor: pointer;
+    color: v-bind('closeColor');
+  }
+}
+</style>

package/modules/feedback/u-feedback-finish-view.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import UFeedbackClose from './u-feedback-close.vue'
+defineProps<{ text: string }>()
+defineEmits<{ close: [] }>()
+</script>
+
+<template>
+  <div class="finish-text-wrapper">
+    <UFeedbackClose color="mono-00" @close="$emit('close')" />
+    <h3 class="finish-text-title">
+      {{ text }}
+    </h3>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../../base/abstracts' as a;
+
+.finish-text-wrapper {
+  border-radius: var(--e-brd-radius-2);
+  box-shadow: var(--e-elevation-xl);
+  padding: var(--e-space-6);
+  background-color: var(--e-c-primary-01-700);
+  color: var(--e-c-mono-00);
+  --fill-color: var(--e-c-mono-00);
+}
+
+.finish-text-title {
+  @include a.type(300, strong);
+}
+</style>

package/modules/feedback/u-feedback-form.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import UFeedbackClose from './u-feedback-close.vue'
+
+defineEmits<{ close: [] }>()
+</script>
+
+<template>
+  <div class="feedback-form">
+    <div class="sections-container">
+      <slot />
+      <UFeedbackClose @close="$emit('close')" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./feedback-form.scss" />

package/modules/feedback/u-feedback-vote-buttons.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import UIconButton from '../../elements/icon-button/u-icon-button.vue'
+import UFeedbackClose from './u-feedback-close.vue'
+import type { FeedbackPayload, FeedbackFormVoteData } from './types/feedback.type'
+
+const { hasForm, finishText } = defineProps<FeedbackFormVoteData>()
+const emits = defineEmits<{
+  'send-feedback': [value: FeedbackPayload['rating']]
+  close: []
+  'animation-finished': []
+}>()
+
+const selectedVote = ref<FeedbackPayload['rating'] | null>(null)
+const showCloseButton = computed(() => (!hasForm ? true : !finishText))
+
+function onSendFeedback(value: FeedbackPayload['rating']) {
+  selectedVote.value = value
+  emits('send-feedback', value)
+}
+
+function setFilledClass(value: FeedbackPayload['rating']) {
+  return selectedVote.value === null || selectedVote.value === value
+}
+</script>
+
+<template>
+  <TransitionGroup
+    tag="div"
+    name="fade"
+    :class="['vote-buttons-wrapper', { 'feedback-finished': showCloseButton }]"
+    @after-leave="$emit('animation-finished')"
+  >
+    <UFeedbackClose v-if="showCloseButton" key="close" color="mono-00" @close="$emit('close')" />
+
+    <h3 v-if="!finishText" key="title" class="feedback-title">
+      {{ title }}
+    </h3>
+
+    <div key="voteButtons" class="feedback-buttons">
+      <UIconButton
+        v-for="{ label, rating, icon } in voteButtons"
+        :key="rating"
+        variant="filled-inverted"
+        :label
+        :icon
+        class="feedback-button"
+        :class="{ filled: setFilledClass(rating) }"
+        @click="onSendFeedback(rating)"
+      />
+    </div>
+
+    <h3 v-if="finishText" key="finishText" class="finish-text">
+      {{ finishText }}
+    </h3>
+  </TransitionGroup>
+</template>
+
+<style lang="scss" scoped src="./feedback-vote-buttons.scss" />

package/modules/feedback/u-feedback.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue'
+import UFeedbackForm from './u-feedback-form.vue'
+import FeedbackFinishedView from './u-feedback-finish-view.vue'
+import FeedbackVoteButtons from './u-feedback-vote-buttons.vue'
+import type { FeedbackData, FeedbackPayload } from './types/feedback.type'
+
+const { voteFinishText, finishedViewText = '' } = defineProps<FeedbackData>()
+const emits = defineEmits<{ close: []; 'send-feedback': [value: FeedbackPayload['rating']] }>()
+
+const showForm = ref(false)
+const isFormSlotted = computed(() => useSlots().default !== undefined)
+const showFeedbackForm = computed(() => showForm.value && isFormSlotted.value)
+
+// Fire animation and when it's done, emit close event
+const isFeedbackHidden = ref(false)
+function onCloseEvent() {
+  isFeedbackHidden.value = true
+}
+
+const showFeedback = ref(true)
+function closeFeedback() {
+  emits('close')
+  showFeedback.value = false
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <TransitionGroup
+      v-if="showFeedback"
+      tag="div"
+      :name="isFeedbackHidden ? 'fade-out' : 'fade'"
+      :class="['feedback-wrapper', 'fade-in']"
+      @after-leave="closeFeedback"
+    >
+      <div :key="`${isFeedbackHidden}`">
+        <div v-if="!finishedViewText">
+          <FeedbackVoteButtons
+            :finish-text="voteFinishText"
+            :title
+            :has-form="isFormSlotted"
+            :vote-buttons="voteButtons"
+            @animation-finished="showForm = true"
+            @close="onCloseEvent"
+            @send-feedback="$emit('send-feedback', $event)"
+          />
+          <UFeedbackForm v-if="showFeedbackForm" @close="onCloseEvent">
+            <slot />
+          </UFeedbackForm>
+        </div>
+        <FeedbackFinishedView v-else :text="finishedViewText" @close="onCloseEvent" />
+      </div>
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped src="./feedback.scss" />

package/modules/footer/footer.scss

@@ -44,34 +44,31 @@
   grid-gap: var(--e-space-12);
 }
 
-.footer__top-column {
-  white-space: nowrap;
-
-  &:nth-child(3) {
-    margin-right: auto;
-  }
-
-  &.service {
-    white-space: wrap;
+.footer__addresses-column {
+  margin-right: auto;
+}
 
-    @include a.bp(lg) {
-      a {
-        display: block;
-      }
-    }
-  }
+.footer__addresses {
+  display: flex;
+  column-gap: var(--e-space-12);
 
   @include a.type(200);
 
   a {
     @include t.text-link--secondary;
 
+    white-space: nowrap;
     font-weight: var(--e-type-weight-strong);
     -webkit-font-smoothing: antialiased; // This is an exception. Usually we only use this for large heading text.
   }
 
+  @include a.bp(lg) {
+    @include a.type(100);
+  }
+
   @include a.bp(m) {
-    flex: 1 0 100%;
+    flex-direction: column;
+    row-gap: var(--e-space-6);
   }
 }
 

package/modules/footer/u-footer.vue

@@ -11,16 +11,10 @@ const { variant = 'normal' } = defineProps<Props>()
     <div class="footer__top">
       <div class="footer__container">
         <div class="footer__top-row">
-          <div class="footer__top-column">
-            <slot name="address"></slot>
-          </div>
-
-          <div class="footer__top-column">
-            <slot name="contact"></slot>
-          </div>
-
-          <div class="footer__top-column service">
-            <slot name="service"></slot>
+          <div class="footer__addresses-column">
+            <div class="footer__addresses">
+              <slot name="addressColumns"></slot>
+            </div>
           </div>
 
           <div class="footer__top-right-column">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -17,7 +17,8 @@
     "./wizard": "./wizard/index.js",
     "./wizard/*": "./wizard/*",
     "./utility/elements/*": "./dist/elements/*",
-    "./utility/layout/*": "./dist/layout/*"
+    "./utility/layout/*": "./dist/layout/*",
+    "./abstracts": "./base/abstracts/index.scss"
   },
   "keywords": [],
   "author": "",