@energie360/ui-library 0.1.31 → 0.1.32

package/components/hint/hint.scss

@@ -111,6 +111,42 @@
   }
 }
 
+@mixin type-error {
+  background-color: var(--e-c-signal-03-100);
+  color: var(--e-c-signal-03-900);
+
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.1396 0C15.4048 0 15.6592 0.105542 15.8467 0.292969L21.707 6.15332C21.8945 6.34084 22 6.59522 22 6.86035V15.1396C22 15.4048 21.8945 15.6592 21.707 15.8467L15.8467 21.707C15.6592 21.8945 15.4048 22 15.1396 22H6.86035C6.59522 22 6.34084 21.8945 6.15332 21.707L0.292969 15.8467C0.105542 15.6592 0 15.4048 0 15.1396V6.86035C0 6.59522 0.105542 6.34084 0.292969 6.15332L6.15332 0.292969C6.34084 0.105542 6.59522 0 6.86035 0H15.1396ZM11 14C10.4477 14 10 14.4477 10 15C10 15.5523 10.4477 16 11 16H11.0098C11.5621 16 12.0098 15.5523 12.0098 15C12.0098 14.4477 11.5621 14 11.0098 14H11ZM11 6C10.4477 6 10 6.44772 10 7V11C10 11.5523 10.4477 12 11 12C11.5523 12 12 11.5523 12 11V7C12 6.44772 11.5523 6 11 6Z' fill='%23FF0C3E'/%3E%3C/svg%3E");
+  }
+
+  .hint__richtext {
+    margin-left: var(--e-space-9);
+
+    @include a.bp(lg) {
+      margin-left: 0;
+    }
+  }
+
+  // override some richtext styles.
+  .richtext {
+    a {
+      color: inherit;
+
+      &:active,
+      &:hover {
+        text-decoration-color: var(--e-c-signal-03-100);
+      }
+    }
+  }
+
+  .hint__link {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+}
+
 .hint {
   position: relative;
   padding: var(--e-space-5) var(--e-space-4);
@@ -178,4 +214,8 @@
   &.hint--legal {
     @include type-legal;
   }
+
+  &.hint--error {
+    @include type-error;
+  }
 }

package/components/hint/u-hint.vue

@@ -3,7 +3,7 @@ import { URichtext } from '../'
 import { Cta } from '../../elements/types'
 
 interface Props {
-  type?: 'neutral' | 'warning' | 'legal'
+  type?: 'neutral' | 'warning' | 'legal' | 'error'
   label?: string
   link?: Cta
   text?: string
@@ -59,4 +59,13 @@ const { label = '', link = undefined, text = '', type = 'neutral' } = defineProp
     }
   }
 }
+
+.hint--error {
+  .hint__richtext a {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-03-100);
+    }
+  }
+}
 </style>

package/modules/index.js

@@ -9,3 +9,4 @@ export { default as UToast, toast } from './toast/u-toast.vue'
 export { default as UDialog } from './dialog/u-dialog.vue'
 export { default as USearchFilter } from './search-filter/u-search-filter.vue'
 export { default as UContentTitle } from './content-title/u-content-title.vue'
+export { default as ULoginAnimation } from './login-animation/u-login-animation.vue'

package/modules/login-animation/butterfly-sprite.json

@@ -0,0 +1,9 @@
+[
+  [0,0],
+  [202, 0],
+  [404, 0],
+  [606, 0],
+  [808, 0],
+  [1010, 0],
+  [1212, 0]
+]

package/modules/login-animation/login-animation.scss

@@ -0,0 +1,65 @@
+@use '../../base/abstracts' as a;
+
+$sprite-width: 52px;
+$sprite-height: 77px;
+$sprite-width-mobile: 40px;
+$sprite-height-mobile: 59px;
+
+@keyframes island-image {
+  0% {
+    transform: translateY(-10px);
+  }
+
+  100% {
+    transform: translateY(10px);
+  }
+}
+
+.login-animation {
+  background-color: var(--e-c-secondary-01-1000);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login-animation__image {
+  position: relative;
+  max-width: 680px;
+  margin: 0 60px;
+
+  img {
+    user-select: none;
+    pointer-events: none;
+    display: block;
+    width: 100%;
+    animation-name: island-image;
+    animation-iteration-count: infinite;
+    animation-duration: 1.6s;
+    animation-direction: alternate;
+    animation-timing-function: ease-in-out;
+  }
+
+  @include a.bp(lg) {
+    margin: 0 40px;
+  }
+
+  @include a.bp(m) {
+    margin: 0 20px;
+  }
+}
+
+.login-animation__sprite {
+  position: absolute;
+  z-index: 1;
+  top: calc(50% - (#{$sprite-height} / 2) + 10%);
+  left: calc(50% - (#{$sprite-width} / 2) + 10%);
+
+  @include a.bp(m) {
+    width: $sprite-width-mobile;
+    height: $sprite-height-mobile;
+  }
+
+  &.flip {
+  }
+}

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

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { USpriteAnimation } from '../../components'
+import { useTemplateRef, ref } from 'vue'
+import butterflySpritePositions from './butterfly-sprite.json'
+import butterflySprite from './butterfly-sprite.png'
+import { gsap } from 'gsap'
+
+const butterfly = useTemplateRef('butterfly')
+const butterflyWrapper = useTemplateRef('butterflyWrapper')
+const container = useTemplateRef('container')
+const mouseRightSide = ref(true)
+
+const onSpriteReady = () => {
+  butterfly.value.playLoop()
+}
+
+const onMouseleave = () => {
+  gsap.to(butterflyWrapper.value, {
+    x: 0,
+    y: 0,
+    ease: 'power2',
+    duration: 4,
+    overwrite: true,
+  })
+}
+
+const onMousemove = (e) => {
+  const { left, top, width, height } = container.value.getBoundingClientRect()
+
+  const halfW = width / 2
+  const halfH = height / 2
+  const mouseX = e.x - left
+  const mouseY = e.y - top
+
+  mouseRightSide.value = mouseX > halfW
+
+  const x = gsap.utils.interpolate(-halfW, halfW, mouseX / width)
+  const y = gsap.utils.interpolate(-halfH, halfH, mouseY / height)
+
+  gsap.to(butterflyWrapper.value, {
+    x: x,
+    y: y,
+    duration: 4,
+    ease: 'power1',
+    overwrite: true,
+  })
+}
+</script>
+
+<template>
+  <div class="login-animation">
+    <div
+      ref="container"
+      class="login-animation__image"
+      @mousemove="onMousemove"
+      @mouseleave="onMouseleave"
+    >
+      <div ref="butterflyWrapper" :class="['login-animation__sprite', { flip: !mouseRightSide }]">
+        <USpriteAnimation
+          ref="butterfly"
+          :style="{
+            transform: mouseRightSide ? 'scaleX(1)' : 'scaleX(-1)',
+          }"
+          :spritesheet-path="butterflySprite"
+          :frame-positions="butterflySpritePositions"
+          :frame-width="202"
+          :frame-height="300"
+          :width="52"
+          :height="77"
+          :duration="1000"
+          @ready="onSpriteReady"
+        />
+      </div>
+      <img src="/static/ui-assets/images/forest.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./login-animation.scss"></style>

package/package.json

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