@energie360/ui-library 0.1.1 → 0.1.3

package/components/richtext/richtext.scss

@@ -0,0 +1,208 @@
+@use '../../base/abstracts/' as a;
+@use '../../elements/text-link/text-link.scss' as t;
+
+.richtext {
+  // Spacing rules
+  * + * {
+    margin-top: var(--e-space-3);
+  }
+
+  ul + *,
+  ol + * {
+    margin-top: var(--e-space-8);
+  }
+
+  * + h2,
+  * + h3,
+  * + .richtext__title-large,
+  * + .richtext__title-small {
+    margin-top: var(--e-space-16);
+  }
+
+  * + ul,
+  * + ol {
+    margin-top: var(--e-space-6);
+  }
+
+  @include a.bp(lg) {
+    * + * {
+      margin-top: var(--e-space-2);
+    }
+
+    ul + *,
+    ol + * {
+      margin-top: var(--e-space-6);
+    }
+
+    * + h2,
+    * + h3,
+    * + .richtext__title-large,
+    * + .richtext__title-small {
+      margin-top: var(--e-space-10);
+    }
+  }
+
+  // Element styles
+  h2,
+  .richtext__title-large {
+    @include a.type(700, strong);
+
+    color: var(--e-c-primary-01-500);
+
+    @include a.bp(lg) {
+      @include a.type(400, strong);
+    }
+  }
+
+  h3,
+  .richtext__title-small {
+    @include a.type(400, strong);
+
+    color: var(--e-c-primary-01-500);
+
+    @include a.bp(lg) {
+      @include a.type(300, strong);
+    }
+  }
+
+  p {
+    @include a.type(300);
+
+    @include a.bp(lg) {
+      @include a.type(200);
+    }
+  }
+
+  a {
+    @include t.text-link;
+  }
+
+  ul,
+  ol {
+    @include a.type(300);
+
+    padding-left: var(--e-space-4);
+
+    > li {
+      position: relative;
+    }
+
+    br {
+      font-size: 0; // Firefox hack
+    }
+
+    @include a.bp(lg) {
+      @include a.type(200);
+    }
+  }
+
+  ul {
+    > li {
+      &::before {
+        content: '';
+        position: absolute;
+        top: var(--e-space-2_5);
+        left: calc(var(--e-space-4) * -1);
+        display: block;
+        width: a.rem(8);
+        height: a.rem(8);
+        border-radius: 100%;
+        background-color: var(--e-c-secondary-05-500);
+      }
+
+      @include a.bp(lg) {
+        &::before {
+          top: var(--e-space-2);
+        }
+      }
+    }
+  }
+
+  ol {
+    counter-reset: li;
+
+    > li {
+      counter-increment: li;
+
+      &::before {
+        @include a.type(200, strong);
+
+        content: counter(li);
+        position: absolute;
+        top: 2px;
+        left: calc(var(--e-space-4) * -1);
+        display: block;
+        color: var(--e-c-secondary-05-500);
+        font-weight: 700;
+      }
+    }
+
+    @include a.bp(lg) {
+      > li::before {
+        top: 0;
+      }
+    }
+  }
+
+  u {
+    text-underline-offset: a.rem(4);
+  }
+
+  p,
+  h2,
+  h3,
+  a,
+  li {
+    text-wrap: pretty;
+  }
+
+  // Modifiers
+  &.richtext--inverted {
+    color: var(--e-c-mono-00);
+
+    h2,
+    h3,
+    .richtext__title-small,
+    .richtext__title-large {
+      color: var(--e-c-mono-00);
+    }
+
+    a {
+      @include t.text-link--inverted;
+    }
+
+    ul > li::before {
+      background-color: var(--e-c-mono-00);
+    }
+
+    ol > li::before {
+      color: var(--e-c-mono-00);
+    }
+  }
+
+  // TODO: Spacing between must also be adjusted for richtext--small.
+  &.richtext--small {
+    p {
+      @include a.type(200);
+    }
+
+    ul,
+    ol {
+      @include a.type(200);
+    }
+
+    ul {
+      > li {
+        &::before {
+          top: var(--e-space-2);
+        }
+      }
+    }
+
+    ol {
+      > li::before {
+        top: 0;
+      }
+    }
+  }
+}

package/components/richtext/u-richtext.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  text?: string
+  small?: boolean
+  inverted?: boolean
+}
+
+const { small = false, inverted = false } = defineProps<Props>()
+
+const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': inverted }]
+</script>
+
+<template>
+  <div v-if="text" :class="classes" v-html="text"></div>
+
+  <div v-else :class="classes"><slot></slot></div>
+</template>
+
+<style lang="scss">
+@use './richtext.scss';
+</style>

package/components/table/u-cell-ctas.vue

@@ -15,13 +15,8 @@ defineProps<Props>()
 
 <template>
   <div class="cell-ctas">
-    <template v-for="cta in ctas">
-      <UButton
-        variant="plain"
-        :icon="cta.icon"
-        :href="cta.href"
-        :target="cta.target"
-      >
+    <template v-for="(cta, idx) in ctas" :key="idx">
+      <UButton variant="plain" :icon="cta.icon" :href="cta.href" :target="cta.target">
         <span class="button-label">{{ cta.label }}</span>
       </UButton>
     </template>

package/components/table/u-cell-icon-group.vue

@@ -18,7 +18,7 @@ defineProps<Props>()
 
 <template>
   <div class="cell-icon-group">
-    <template v-for="item in icons">
+    <template v-for="(item, idx) in icons" :key="idx">
       <UTooltip :title="item.title">
         <UIcon :name="item.icon" :class="[`icon-color-${item.color}`]"></UIcon>
       </UTooltip>

package/components/table/u-cell-icon-text.vue

@@ -4,7 +4,7 @@ import UIcon from '../../elements/icon/u-icon.vue'
 
 interface Props extends TableCellBase {
   icon: string
-  iconColor: TableCellIconColor
+  iconColor?: TableCellIconColor
 }
 
 const { iconColor = TableCellIconColor.grey } = defineProps<Props>()

package/components/table/u-cell-progress-bar.vue

@@ -12,7 +12,7 @@ const { labelPosition = 'top' } = defineProps<Props>()
 
 <template>
   <div :class="['cell-progress-bar', `label-position-${labelPosition}`]">
-    <p class="progress-bar-label" v-if="label">{{ label }}</p>
+    <p v-if="label" class="progress-bar-label">{{ label }}</p>
     <UProgressBar :value="value"></UProgressBar>
   </div>
 </template>

package/components/table/u-table-cell.vue

@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import {
-  TableCellBase,
-  TableCellHAlign,
-  TableCellTextStyle,
-  TableCellVAlign,
-} from './table.type'
+import { TableCellBase, TableCellHAlign, TableCellTextStyle, TableCellVAlign } from './table.type'
 import UIcon from '../../elements/icon/u-icon.vue'
 import UTooltip from '../tooltip/u-tooltip.vue'
 
@@ -23,18 +18,13 @@ const {
 <template>
   <div
     role="cell"
-    :class="[
-      'table-cell',
-      `h-align-${hAlign}`,
-      `v-align-${vAlign}`,
-      { 'has-tooltip': infoText },
-    ]"
+    :class="['table-cell', `h-align-${hAlign}`, `v-align-${vAlign}`, { 'has-tooltip': infoText }]"
   >
     <div :class="['cell-content', `text-${textStyle}`]">
       <slot>{{ text }}</slot>
     </div>
 
-    <div class="info-tooltip" v-if="infoText">
+    <div v-if="infoText" class="info-tooltip">
       <UTooltip :title="infoText">
         <UIcon name="info"></UIcon>
       </UTooltip>

package/components/table/u-table-heading.vue

@@ -9,10 +9,7 @@ const { hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
 </script>
 
 <template>
-  <div
-    role="cell"
-    :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]"
-  >
+  <div role="cell" :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]">
     <div class="cell-content">
       <slot :text="text">{{ text }}</slot>
     </div>

package/components/tooltip/{popover.js → popover.ts}

@@ -1,6 +1,26 @@
 import { getViewportDimensions } from './viewport'
 import { getOffsetParentPosition } from './dom'
 
+export type Placement =
+  | 'top-right'
+  | 'top-left'
+  | 'top-center'
+  | 'bottom-right'
+  | 'bottom-left'
+  | 'bottom-center'
+export interface PopoverPositionParams {
+  placement?: Placement
+  offset?: number
+  viewportPadding?: number
+}
+
+export interface PopoverPosition {
+  top: number
+  left: number
+  topCorrection: number
+  leftCorrection: number
+}
+
 const defaultOptions = {
   offset: 0,
   viewportPadding: 0,
@@ -13,23 +33,25 @@ const defaultOptions = {
  *
  * @param {Element} refEl
  * @param {Element} popoverEl
- * @param {Object} options - Options object
- * @param {number} options.offset - offset to refEl in px
- * @param {number} options.viewportPadding - Padding to viewport in px
- * @param {string} options.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ * @param {Object} opts - Options object
+ * @param {number} opts.offset - offset to refEl in px
+ * @param {number} opts.viewportPadding - Padding to viewport in px
+ * @param {string} opts.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
  */
-export const getPopoverPosition = (refEl, popoverEl, options = {}) => {
-  options = Object.assign({}, defaultOptions, options)
+export const getPopoverPosition = (
+  refEl: HTMLElement,
+  popoverEl: HTMLElement,
+  opts: PopoverPositionParams,
+) => {
+  const options = Object.assign({}, defaultOptions, opts)
 
   const refRect = refEl.getBoundingClientRect()
   let popoverRect = popoverEl.getBoundingClientRect()
 
-  const offsetParent = getOffsetParentPosition(refEl)
+  const { top: offsetTop, left: offsetLeft } = getOffsetParentPosition(refEl)
 
-  let top
-  let left
-  const offsetTop = offsetParent.top
-  const offsetLeft = offsetParent.left
+  let top = 0
+  let left = 0
   const { vpWidth } = getViewportDimensions()
   const docHeight = document.documentElement.scrollHeight
   const scrollY = window.scrollY
@@ -46,7 +68,6 @@ export const getPopoverPosition = (refEl, popoverEl, options = {}) => {
     case 'top-right':
       top = offsetTop - popoverRect.height - options.offset
       left = offsetLeft + refRect.width - popoverRect.width
-      // console.log(left)
       break
 
     case 'top-left':
@@ -77,10 +98,7 @@ export const getPopoverPosition = (refEl, popoverEl, options = {}) => {
   const leftDiff = refRect.left - offsetLeft
   if (left + leftDiff < options.viewportPadding) {
     left = 0 - leftDiff + options.viewportPadding
-  } else if (
-    left + leftDiff + popoverRect.width >
-    vpWidth - options.viewportPadding
-  ) {
+  } else if (left + leftDiff + popoverRect.width > vpWidth - options.viewportPadding) {
     left = vpWidth - leftDiff - popoverRect.width - options.viewportPadding
   }
 
@@ -88,23 +106,15 @@ export const getPopoverPosition = (refEl, popoverEl, options = {}) => {
   const topDiff = refRect.top - offsetTop
   if (top + topDiff + scrollY < options.viewportPadding) {
     // popover is too high.
-    // console.log('too high')
     // Switch position to bottom
     top = offsetTop + refRect.height + options.offset
-  } else if (
-    top + topDiff + scrollY + popoverRect.height >
-    docHeight - options.viewportPadding
-  ) {
+  } else if (top + topDiff + scrollY + popoverRect.height > docHeight - options.viewportPadding) {
     // popover is too low.
-    // console.log('too low')
     // Swith position to top.
     top = offsetTop - popoverRect.height - options.offset
   }
 
-  return {
-    top,
-    left,
-  }
+  return { top, left }
 }
 
 /**
@@ -112,21 +122,26 @@ export const getPopoverPosition = (refEl, popoverEl, options = {}) => {
  *
  * @param {Element} refEl
  * @param {Element} popoverEl
- * @param {Object} options - Options object
- * @param {number} options.offset - offset to refEl in px
- * @param {number} options.viewportPadding - Padding to viewport in px
- * @param {string} options.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+ * @param {Object} opts - Options object
+ * @param {number} opts.offset - offset to refEl in px
+ * @param {number} opts.viewportPadding - Padding to viewport in px
+ * @param {string} opts.placement - One of the following keywords: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
  */
-export const getPopoverPositionBody = (refEl, popoverEl, options = {}) => {
-  options = Object.assign({}, defaultOptions, options)
+export function getPopoverPositionBody(
+  refEl: HTMLElement,
+  popoverEl: HTMLElement,
+  opts: PopoverPositionParams,
+): PopoverPosition {
+  const options = Object.assign({}, defaultOptions, opts)
 
   const refRect = refEl.getBoundingClientRect()
   let popoverRect = popoverEl.getBoundingClientRect()
 
-  let top
-  let left
+  let top = 0
+  let left = 0
   const topCorrection = 0
   let leftCorrection = 0
+
   const scrollY = window.scrollY
   const scrollX = window.scrollX
   const { vpWidth } = getViewportDimensions()
@@ -146,7 +161,6 @@ export const getPopoverPositionBody = (refEl, popoverEl, options = {}) => {
     case 'top-right':
       // top = offsetTop - popoverRect.height - options.offset
       // left = offsetLeft + refRect.width - popoverRect.width
-      // console.log(left)
       break
 
     case 'top-left':
@@ -183,18 +197,12 @@ export const getPopoverPositionBody = (refEl, popoverEl, options = {}) => {
     left = options.viewportPadding
   } else if (left + popoverRect.width > vpWidth - options.viewportPadding) {
     // too right
-    leftCorrection =
-      vpWidth - options.viewportPadding - popoverRect.width - left
+    leftCorrection = vpWidth - options.viewportPadding - popoverRect.width - left
     left = vpWidth - options.viewportPadding - popoverRect.width
   }
 
   // Check top or bottom overflow
   // TODO: Add these corrections
 
-  return {
-    top,
-    left,
-    leftCorrection,
-    topCorrection,
-  }
+  return { top, left, leftCorrection, topCorrection }
 }

package/components/tooltip/u-tooltip.vue

@@ -1,88 +1,68 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { getPopoverPositionBody } from './popover'
+import type { PopoverPositionParams } from './popover'
 
-interface Props {
+interface Props extends PopoverPositionParams {
   title: string
-  placement?:
-    | 'top-right'
-    | 'top-left'
-    | 'top-center'
-    | 'bottom-right'
-    | 'bottom-left'
-    | 'bottom-center'
-  offset?: number
-  viewportPadding?: number
 }
 
-const {
-  placement = 'top-center',
-  offset = 12,
-  viewportPadding = 20,
-} = defineProps<Props>()
+const { placement = 'top-center', offset = 12, viewportPadding = 20 } = defineProps<Props>()
 
-const tooltip = ref(null)
-const root = ref(null)
-const pointer = ref(null)
+const tooltip = ref<HTMLDivElement | null>(null)
+const root = ref<HTMLSpanElement | null>(null)
+const pointer = ref<HTMLSpanElement | null>(null)
+const isTooltipVisible = ref<boolean>(false)
 
-const showTooltip = () => {
-  const popoverPosition = getPopoverPositionBody(root.value, tooltip.value, {
-    offset,
-    placement,
-    viewportPadding,
-  })
-
-  // Set position
-  tooltip.value.style.top = `${popoverPosition.top}px`
-  tooltip.value.style.left = `${popoverPosition.left}px`
-
-  // Fix pointer position if necessary
-  if (popoverPosition.leftCorrection) {
-    pointer.value.style.transform = `translateX(${popoverPosition.leftCorrection * -1}px)`
-  }
-
-  tooltip.value.ariaHidden = 'false'
-  tooltip.value.classList.toggle('tooltip--open', true)
+// On desktop (or non-touch devices) mouse events will be fired before the pointer events.
+// For mobile and touch devices it's th opposite, pointer events will be fired first.
+// This way we can detect on what device we are and handle the behaviour accordingly.
+function hideTooltip() {
+  isTooltipVisible.value = false
 }
 
-const hideTooltip = () => {
-  const onTransitionend = () => {
-    tooltip.value.removeEventListener('transitionend', onTransitionend)
-
-    tooltip.value.style.top = ''
-    tooltip.value.style.left = ''
-    pointer.value.style.transform = ''
-  }
-
-  tooltip.value.addEventListener('transitionend', onTransitionend)
-
-  tooltip.value.ariaHidden = 'true'
-  tooltip.value.classList.toggle('tooltip--open', false)
+function showTooltip() {
+  updatePositions()
+  isTooltipVisible.value = true
 }
 
-// On desktop (or non-touch devices) mouse events will be fired before the pointer events.
-// For mobile and touch devices it's th opposite, pointer events will be fired first.
-// This way we can detect on what device we are and handle the behaviour accordingly.
-const onMouseenter = () => {
-  showTooltip()
+function onTransitionend() {
+  if (isTooltipVisible.value) return
+  updatePositions(true)
+  isTooltipVisible.value = false
 }
 
-const onMouseleave = () => {
-  hideTooltip()
+function updatePositions(resetPositions = false) {
+  const { top, left, leftCorrection } = getPopoverPositionBody(root.value!, tooltip.value!, {
+    offset,
+    placement,
+    viewportPadding,
+  })
+
+  tooltip.value!.style.top = resetPositions ? '' : `${top}px`
+  tooltip.value!.style.left = resetPositions ? '' : `${left}px`
+  // Fix pointer position if necessary
+  pointer.value!.style.transform =
+    !resetPositions && leftCorrection ? `translateX(${leftCorrection * -1}px)` : ''
 }
 </script>
 
 <template>
-  <span @mouseenter="onMouseenter" @mouseleave="onMouseleave" ref="root">
-    <slot></slot>
+  <span ref="root" @mouseenter="showTooltip" @mouseleave="hideTooltip">
+    <slot />
   </span>
 
   <Teleport to="body">
-    <div ref="tooltip" class="tooltip">
+    <div
+      ref="tooltip"
+      :class="['tooltip', { 'tooltip--open': isTooltipVisible }]"
+      :aria-hidden="!isTooltipVisible"
+      @transitionend="onTransitionend"
+    >
       <div class="tooltip__content">
         {{ title }}
       </div>
-      <span class="tooltip__pointer" ref="pointer"></span>
+      <span ref="pointer" class="tooltip__pointer" />
     </div>
   </Teleport>
 </template>