@energie360/ui-library 0.1.0 → 0.1.2

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/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,28 @@
+<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, 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>
+  </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, idx) in icons" :key="idx">
+      <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>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import UProgressBar from '../progress-bar/u-progress-bar.vue'
+
+interface Props {
+  label?: string
+  value: number
+  labelPosition?: 'top' | 'right'
+}
+
+const { labelPosition = 'top' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['cell-progress-bar', `label-position-${labelPosition}`]">
+    <p v-if="label" class="progress-bar-label">{{ label }}</p>
+    <UProgressBar :value="value"></UProgressBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './cell-progress-bar.scss';
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { TableCellBase, TableCellHAlign, TableCellTextStyle, TableCellVAlign } from './table.type'
+import UIcon from '../../elements/icon/u-icon.vue'
+import UTooltip from '../tooltip/u-tooltip.vue'
+
+interface Props extends TableCellBase {
+  infoText?: string
+  textStyle?: TableCellTextStyle
+}
+
+const {
+  textStyle = TableCellTextStyle.normal,
+  hAlign = TableCellHAlign.left,
+  vAlign = TableCellVAlign.center,
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    role="cell"
+    :class="['table-cell', `h-align-${hAlign}`, `v-align-${vAlign}`, { 'has-tooltip': infoText }]"
+  >
+    <div :class="['cell-content', `text-${textStyle}`]">
+      <slot>{{ text }}</slot>
+    </div>
+
+    <div v-if="infoText" class="info-tooltip">
+      <UTooltip :title="infoText">
+        <UIcon name="info"></UIcon>
+      </UTooltip>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-cell.scss';
+</style>

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

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

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  text?: string
+  hAlign?: 'left' | 'center' | 'right'
+  vAlign?: 'top' | 'center' | 'bottom'
+}
+
+const { hAlign = 'left', vAlign = 'top' } = defineProps<Props>()
+</script>
+
+<template>
+  <div role="cell" :class="['table-heading', `h-align-${hAlign}`, `v-align-${vAlign}`]">
+    <div class="cell-content">
+      <slot :text="text">{{ text }}</slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-heading.scss';
+</style>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+interface Props {
+  highlight?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div role="row" :class="['table-row', { highlight }]">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table-row.scss';
+</style>

package/components/table/u-table.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="table-scroll-wrapper">
+    <div role="table" class="table">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './table.scss';
+</style>