@energie360/ui-library 0.0.4 → 0.1.1

package/base/_resets.scss

@@ -13,6 +13,8 @@ h5,
 h6 {
   margin: 0;
   text-wrap: balance;
+  font-size: unset;
+  font-weight: unset;
 }
 
 p,

package/base/abstracts/_mixins.scss

@@ -60,11 +60,6 @@ $letter-spacings: (
       -moz-osx-font-smoothing: grayscale;
     }
   }
-
-  @media print {
-    font-size: calc(var(--e-type-size-#{$size}) * 0.75);
-    line-height: calc(var(--e-type-line-height-#{$size}) * 0.75);
-  }
 }
 
 // This mixin will simply add an animated background.
@@ -78,3 +73,14 @@ $letter-spacings: (
   overflow: hidden;
   color: transparent;
 }
+
+// From https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f
+@mixin line-height-crop($line-height) {
+  &::before {
+    content: '';
+    display: block;
+    height: 0;
+    width: 0;
+    margin-top: calc((1 - #{$line-height}) * 0.5em);
+  }
+}

package/base/main-base.scss

@@ -4,6 +4,7 @@ This must be loaded before all other styles.
 */
 
 @use './resets';
+@use './input-resets';
 @use './html';
 @use './body';
 @use './focus-handling';

package/components/icon-text-block/icon-text-block.scss

@@ -0,0 +1,55 @@
+@use '../../base/abstracts/' as a;
+
+.icon-text-block {
+  display: flex;
+  gap: var(--e-space-6);
+  align-items: center;
+
+  @include a.bp(m) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .illu-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: a.rem(120);
+    height: a.rem(120);
+    border-radius: 100%;
+    background-color: var(--e-c-primary-01-50);
+
+    @include a.bp(m) {
+      width: a.rem(104);
+      height: a.rem(104);
+    }
+  }
+
+  .illustration {
+    width: a.rem(56);
+    height: a.rem(56);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--e-space-2);
+  }
+
+  .title {
+    @include a.type(300, strong);
+
+    @include a.bp(m) {
+      @include a.type(200, strong);
+    }
+  }
+
+  .description {
+    @include a.type(300);
+
+    @include a.bp(m) {
+      @include a.type(200);
+    }
+  }
+}

package/components/icon-text-block/u-icon-text-block.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ImageBase } from '../../elements/image/u-image.vue'
+
+interface Props {
+  title: string
+  description?: string
+  image: ImageBase
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="icon-text-block">
+    <div class="illu-wrapper">
+      <img
+        class="illustration"
+        aria-hidden="true"
+        :src="image.src"
+        :alt="image.alt"
+      />
+    </div>
+    <div class="content">
+      <h2 class="title">{{ title }}</h2>
+      <p class="description" v-html="description"></p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './icon-text-block.scss';
+</style>

package/components/icon-text-block-group/icon-text-block-group.scss

@@ -0,0 +1,5 @@
+.icon-text-block-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--e-space-10);
+}

package/components/icon-text-block-group/u-icon-text-block-group.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="icon-text-block-group">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './icon-text-block-group.scss';
+</style>

package/components/index.js

@@ -0,0 +1,14 @@
+/**
+ * It's not recommended to import components from this file, because tree-shaking won't work then.
+ * -> https://vite.dev/guide/performance#avoid-barrel-files
+ */
+export { default as UIconTextBlock } from './icon-text-block/u-icon-text-block.vue'
+export { default as UIconTextBlockGroup } from './icon-text-block-group/u-icon-text-block-group.vue'
+export { default as UTable } from './table/u-table.vue'
+export { default as UTableHeader } from './table/u-table-header.vue'
+export { default as UTableRow } from './table/u-table-row.vue'
+export { default as UTableCell } from './table/u-table-cell.vue'
+export { default as UTableHeading } from './table/u-table-heading.vue'
+export { default as UCellIconText } from './table/u-cell-icon-text.vue'
+export { default as UCellCtas } from './table/u-cell-ctas.vue'
+export { default as UTooltip } from './tooltip/u-tooltip.vue'

package/components/panel/panel.scss

@@ -0,0 +1,70 @@
+@use '../../base/abstracts' as a;
+
+.panel{
+  position: relative;
+  padding: var(--e-space-14) a.rem(400) a.rem(88) var(--e-space-14);
+  box-shadow: var(--e-elevation-md);
+  background-color: var(--e-c-mono-00);
+  border-radius: var(--e-brd-radius-3);
+  border: 1px solid var(--e-c-mono-200);
+  overflow: hidden;
+
+  @include a.bp('2xl') {
+    padding: var(--e-space-10) a.rem(344) a.rem(72) var(--e-space-10);
+  }
+
+  @include a.bp('lg') {
+    padding: var(--e-space-6) var(--e-space-6) a.rem(104) var(--e-space-6);
+  }
+}
+
+.title {
+  margin-bottom: var(--e-space-3);
+
+  h2 {
+    @include a.type(500, strong);
+  }
+
+  @include a.bp(lg) {
+    margin-bottom: var(--e-space-2);
+
+    h2 {
+      @include a.type(300, strong);
+    }
+  }
+}
+
+.text {
+  @include a.type(300);
+
+  @include a.bp(lg) {
+    @include a.type(200);
+  }
+}
+
+.panel-spectro {
+  pointer-events: none;
+  position: absolute;
+  top: calc(50% - 700px);
+  right: a.rem(-1560 + 400);
+  width: a.rem(1560);
+  height: a.rem(1560);
+  user-select: none;
+
+  @include a.bp('2xl') {
+    right: a.rem(-1400 + 344);
+    width: a.rem(1400);
+    height: a.rem(1400);
+  }
+
+  @include a.bp(lg) {
+    top: calc(100% - 95px);
+    right: -180px;
+    width: a.rem(600);
+    height: a.rem(600);
+  }
+
+  @include a.bp(s) {
+    right: calc(50% - 300px);
+  }
+}

package/components/panel/u-panel.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import USpectro from "../../elements/spectro/u-spectro.vue";
+import {Image} from "../../elements/types";
+
+interface Props {
+  title?: string
+  text?: string
+  useSpectro?: boolean,
+  image?: Image
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <aside class="panel">
+    <div v-if="useSpectro" class="panel-spectro">
+      <USpectro/>
+    </div>
+
+    <div class="content">
+      <div class="title">
+        <h2>
+          <slot name="title">{{title}}</slot>
+        </h2>
+      </div>
+
+      <div class="text">
+        <slot name="text"><div v-html="text"></div></slot>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped lang="scss">
+@use './panel.scss';
+</style>

package/components/progress-bar/progress-bar.scss

@@ -0,0 +1,37 @@
+@use '../../base/abstracts' as a;
+
+.progress-bar {
+  display: flex;
+  align-items: center;
+  column-gap: a.rem(4);
+  height: a.rem(10);
+  width: #{a.rem(64 + 4 + 10)}; // progress-track + space + icon
+
+  &.full-width {
+    width: 100%;
+
+    .progress-track {
+      width: calc(100% - #{a.rem(4 + 10)});
+    }
+  }
+}
+
+.progress-track {
+  width: a.rem(64);
+  min-width: a.rem(64);
+  height: a.rem(4);
+  background-color: var(--e-c-mono-100);
+  border-radius: a.rem(4);
+  overflow: hidden;
+}
+
+.progress-position {
+  height: 100%;
+  background-color: var(--e-c-primary-01-500);
+}
+
+.star-icon {
+  width: a.rem(10);
+  height: a.rem(10);
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234BA528' d='M4.822 1.35a.2.2 0 0 1 .356 0l.975 1.909a.2.2 0 0 0 .147.107l2.117.336a.2.2 0 0 1 .11.34L7.012 5.557a.2.2 0 0 0-.056.173l.334 2.118a.2.2 0 0 1-.288.21L5.09 7.085a.2.2 0 0 0-.182 0L3 8.058a.2.2 0 0 1-.29-.209l.335-2.118a.2.2 0 0 0-.056-.173L1.473 4.041a.2.2 0 0 1 .11-.339L3.7 3.366a.2.2 0 0 0 .147-.107l.975-1.91Z'/%3E%3C/svg%3E");
+}

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  value: number
+  fullWidth?: boolean
+}
+
+const { fullWidth = false } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['progress-bar', { 'full-width': fullWidth }]">
+    <div class="progress-track">
+      <div class="progress-position" :style="{ width: `${value}%` }"></div>
+    </div>
+    <div class="star-icon" v-if="value >= 100"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './progress-bar.scss';
+</style>

package/components/table/cell-ctas.scss

@@ -0,0 +1,12 @@
+@use '../../base/abstracts' as a;
+
+.cell-ctas {
+  display: flex;
+  column-gap: var(--e-space-2);
+
+  .button-label {
+    @include a.bp(m) {
+      @include a.visually-hidden;
+    }
+  }
+}

package/components/table/cell-icon-group.scss

@@ -0,0 +1,12 @@
+@use './table-cell.mixins' as c;
+
+.cell-icon-group {
+  display: flex;
+  column-gap: var(--e-space-2);
+
+  @each $name, $color-var in c.$table-cell-icon-colors {
+    .icon-color-#{$name} {
+      color: #{$color-var};
+    }
+  }
+}

package/components/table/cell-icon-text.scss

@@ -0,0 +1,22 @@
+@use '../../base/abstracts' as a;
+@use './table-cell.mixins' as c;
+
+.cell-icon-text {
+  display: flex;
+  align-items: center;
+  column-gap: var(--e-space-2);
+
+  @each $name, $color-var in c.$table-cell-icon-colors {
+    &.icon-color-#{$name} .icon {
+      color: #{$color-var};
+    }
+  }
+
+  @include a.type(100);
+}
+
+.cell-text {
+  @include a.bp(m) {
+    @include a.visually-hidden;
+  }
+}

package/components/table/cell-progress-bar.scss

@@ -0,0 +1,23 @@
+@use '../../base/abstracts' as a;
+
+.cell-progress-bar {
+  &.label-position-top {
+    .progress-bar-label {
+      @include a.line-height-crop(var(--e-type-line-height-100));
+
+      margin-bottom: var(--e-space-0_5);
+    }
+  }
+
+  &.label-position-right {
+    display: flex;
+    column-gap: var(--e-space-1);
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
+
+.progress-bar-label {
+  @include a.type(100);
+}

package/components/table/table-cell.mixins.scss

@@ -0,0 +1,60 @@
+@use '../../base/abstracts' as a;
+
+@mixin table-cell-base {
+  display: table-cell;
+  padding: var(--e-space-4);
+  height: a.rem(56);
+
+  @include a.type(100);
+
+  @include a.bp(m) {
+    height: auto;
+  }
+
+  &.has-tooltip {
+    .cell-content {
+      width: calc(100% - #{a.rem(24 + 8)});
+    }
+  }
+
+  .cell-content {
+    display: inline-flex;
+    column-gap: var(--e-space-2);
+    min-height: a.rem(24);
+  }
+
+  // Horizontal align options
+  &.h-align-left {
+    text-align: left;
+  }
+
+  &.h-align-center {
+    text-align: center;
+  }
+
+  &.h-align-right {
+    text-align: right;
+  }
+
+  // Vertical align options
+  &.v-align-top {
+    vertical-align: top;
+  }
+
+  &.v-align-center {
+    vertical-align: middle;
+  }
+
+  &.v-align-bottom {
+    vertical-align: bottom;
+  }
+}
+
+$table-cell-icon-colors: (
+  'black': var(--e-c-mono-900),
+  'grey': var(--e-c-mono-500),
+  'red': var(--e-c-signal-03-500),
+  'orange': var(--e-c-signal-02-500),
+  'blue': var(--e-c-secondary-05-500),
+  'green': var(--e-c-signal-01-500),
+);

package/components/table/table-cell.scss

@@ -0,0 +1,24 @@
+@use '../../base/abstracts' as a;
+@use './table-cell.mixins' as c;
+
+.table-cell {
+  @include c.table-cell-base;
+}
+
+.cell-content {
+  // Text Styles
+  &.text-normal {
+    font-weight: var(--e-type-weight-weak);
+  }
+
+  &.text-bold {
+    font-weight: var(--e-type-weight-strong);
+  }
+}
+
+.info-tooltip {
+  margin-left: var(--e-space-2);
+  float: inline-end;
+  vertical-align: middle;
+  color: var(--e-c-secondary-05-500);
+}

package/components/table/table-header.scss

@@ -0,0 +1,5 @@
+@use '../../base/abstracts' as a;
+
+.table-header {
+  display: table-header-group;
+}

package/components/table/table-heading.scss

@@ -0,0 +1,8 @@
+@use '../../base/abstracts' as a;
+@use './table-cell.mixins' as c;
+
+.table-heading {
+  font-weight: var(--e-type-weight-strong);
+
+  @include c.table-cell-base;
+}

package/components/table/table-row.scss

@@ -0,0 +1,20 @@
+@use '../../base/abstracts' as a;
+
+.table-row {
+  display: table-row;
+  border-bottom: 1px solid var(--e-c-mono-100);
+
+  &.highlight {
+    background-color: var(--e-c-mono-50);
+  }
+
+  &.mobile-layout-card {
+    @include a.bp(m) {
+      display: grid;
+      gap: var(--e-space-2);
+      padding: var(--e-space-4);
+      border: 1px solid var(--e-c-mono-200);
+      border-radius: var(--e-brd-radius-2);
+    }
+  }
+}

package/components/table/table.scss

@@ -0,0 +1,12 @@
+@use '../../base/abstracts' as a;
+
+.table {
+  display: table;
+  border-collapse: collapse;
+  width: 100%;
+  min-width: a.rem(500);
+}
+
+.table-scroll-wrapper {
+  overflow-x: auto;
+}

package/components/table/table.type.ts

@@ -0,0 +1,31 @@
+export interface TableCellBase {
+  text?: string
+  hAlign?: TableCellHAlign
+  vAlign?: TableCellVAlign
+}
+
+export enum TableCellHAlign {
+  left = 'left',
+  center = 'center',
+  right = 'right',
+}
+
+export enum TableCellVAlign {
+  top = 'top',
+  center = 'center',
+  bottom = 'bottom',
+}
+
+export enum TableCellIconColor {
+  black = 'black',
+  grey = 'grey',
+  red = 'red',
+  orange = 'orange',
+  blue = 'blue',
+  green = 'green',
+}
+
+export enum TableCellTextStyle {
+  normal = 'normal',
+  bold = 'bold',
+}

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Cta } from '../../elements/types'
+import UButton from '../../elements/button/u-button.vue'
+
+interface CellCta extends Cta {
+  icon: string
+}
+
+interface Props {
+  ctas: CellCta[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="cell-ctas">
+    <template v-for="cta in ctas">
+      <UButton
+        variant="plain"
+        :icon="cta.icon"
+        :href="cta.href"
+        :target="cta.target"
+      >
+        <span class="button-label">{{ cta.label }}</span>
+      </UButton>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './cell-ctas.scss';
+</style>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import UIcon from '../../elements/icon/u-icon.vue'
+import UTooltip from '../tooltip/u-tooltip.vue'
+import { TableCellIconColor } from './table.type'
+
+interface IconItem {
+  icon: string
+  title: string
+  color: TableCellIconColor
+}
+
+interface Props {
+  icons: IconItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="cell-icon-group">
+    <template v-for="item in icons">
+      <UTooltip :title="item.title">
+        <UIcon :name="item.icon" :class="[`icon-color-${item.color}`]"></UIcon>
+      </UTooltip>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './cell-icon-group.scss';
+</style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { TableCellBase, TableCellIconColor } from './table.type'
+import UIcon from '../../elements/icon/u-icon.vue'
+
+interface Props extends TableCellBase {
+  icon: string
+  iconColor: TableCellIconColor
+}
+
+const { iconColor = TableCellIconColor.grey } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['cell-icon-text', `icon-color-${iconColor}`]">
+    <UIcon :name="icon"></UIcon>
+
+    <span class="cell-text">{{ text }}</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './cell-icon-text.scss';
+</style>