@energie360/ui-library 0.1.1 → 0.1.2

package/base/_input-resets.scss

@@ -14,9 +14,7 @@ select {
 input,
 select,
 textarea {
-  @include a.type(
-    200
-  ); // Set this here because of specificity issues (with ::slotted)
+  @include a.type(200); // Set this here because of specificity issues (with ::slotted)
 }
 
 input {
@@ -47,3 +45,11 @@ select {
 textarea {
   resize: vertical;
 }
+
+input[type='number'] {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+}

package/base/_resets.scss

@@ -17,6 +17,11 @@ h6 {
   font-weight: unset;
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
 p,
 figure,
 blockquote {

package/components/accordion-item/accordion-item.scss

@@ -0,0 +1,62 @@
+@use '../../base/abstracts' as a;
+
+.accordion-item {
+  &.inverted {
+    .accordion-item__header {
+      background-color: var(--e-c-mono-00);
+      border-color: var(--e-c-mono-00);
+
+      &:hover {
+        border-color: var(--e-c-secondary-01-100);
+      }
+    }
+
+    .collapsible__header:hover {
+      .accordion-item__header {
+        border-color: var(--e-c-secondary-01-100);
+      }
+    }
+  }
+}
+
+.accordion-item__header {
+  @include a.type(200, strong);
+
+  display: flex;
+  justify-content: space-between;
+  padding: calc(var(--e-space-4) - 2px) calc(var(--e-space-3) - 2px); // Subtract 2px for border
+  grid-gap: var(--e-space-1);
+  background-color: var(--e-c-mono-50);
+  border-radius: var(--e-brd-radius-1);
+  border: 2px solid var(--e-c-mono-50);
+  color: var(--e-c-mono-700);
+  cursor: pointer;
+  transition: border a.$trs-default;
+
+  // Unfortunately this is necessary so that gtm works. awesome...
+  pointer-events: none;
+}
+
+.accordion-item__panel {
+  padding: var(--e-space-4) var(--e-space-3);
+  color: var(--e-c-mono-900);
+}
+
+.accordion-item__icon {
+  line-height: 0;
+
+  .icon {
+    display: inline-block;
+    transition: transform a.$trs-default;
+    perspective-origin: center;
+
+    --fill-color: var(--e-c-primary-01-500);
+  }
+}
+
+// States
+.accordion-item.is-expanded {
+  .accordion-item__icon .icon {
+    transform: rotate(180deg);
+  }
+}

package/components/accordion-item/u-accordion-item.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import UCollapsible from '../collapsible/u-collapsible.vue'
+import UIcon from '../../elements/icon/u-icon.vue'
+import URichtext from '../richtext/u-richtext.vue'
+import { useTemplateRef } from 'vue'
+
+interface Props {
+  header?: string
+  panel?: string
+  level?: number
+  inverted?: boolean
+}
+
+const collapsible = useTemplateRef('collapsible')
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['accordion-item', { 'is-expanded': collapsible?.isExpanded, inverted }]">
+    <UCollapsible ref="collapsible" :level>
+      <template #header>
+        <span class="accordion-item__header">
+          {{ header }}
+          <span class="accordion-item__icon">
+            <UIcon name="chevron-down"></UIcon>
+          </span>
+        </span>
+      </template>
+
+      <template #panel>
+        <slot name="panel">
+          <div class="accordion-item__panel">
+            <URichtext small :text="panel"></URichtext>
+          </div>
+        </slot>
+      </template>
+    </UCollapsible>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use './accordion-item.scss';
+</style>

package/components/card/card.scss

@@ -0,0 +1,58 @@
+@use '../../base/abstracts' as a;
+
+.card {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: var(--e-brd-radius-2);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &::after {
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: var(--e-brd-radius-2);
+    border: 1px solid var(--e-c-mono-200);
+    transition: border var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &.is-active {
+    &::after {
+      border: 3px solid var(--e-c-primary-01-200);
+    }
+  }
+}
+
+// LAYOUT
+.card-header,
+.card-section,
+.card-footer {
+  padding: var(--e-space-6);
+
+  @include a.bp(m) {
+    padding: var(--e-space-5);
+  }
+
+  @include a.bp(s) {
+    padding: var(--e-space-4);
+  }
+}
+
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--e-space-4);
+}
+
+.card-section:last-child:has(.card-hint),
+.card-footer {
+  margin-top: auto; // Make this element stick to bottom of the card.
+}
+
+.card-header + *,
+.card-section + .card-section,
+* + .card-footer {
+  border-top: 1px solid var(--e-c-mono-200);
+}

package/components/card/u-card.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+
+interface Props {
+  active?: boolean
+}
+
+defineProps<Props>()
+
+const isActive = ref(false)
+const toggleActiveCard = (v: boolean) => {
+  isActive.value = v
+}
+
+provide('card', { toggleActiveCard })
+</script>
+
+<template>
+  <section :class="['card', { 'is-active': isActive }]">
+    <slot></slot>
+  </section>
+</template>
+
+<style lang="scss">
+@use './card.scss';
+</style>

package/components/card-header/card-header.scss

@@ -0,0 +1,102 @@
+@use '../../base/abstracts' as a;
+
+$image-col-width: 112px;
+$image-col-width-small: 100px;
+
+:host {
+  display: block;
+  container: card / inline-size;
+}
+
+.card-header {
+  position: relative;
+  display: flex;
+  column-gap: var(--e-space-2);
+
+  @container (max-width: 260px) {
+    flex-direction: column-reverse;
+  }
+}
+
+.title-wrapper {
+  h3,
+  h2 {
+    @include a.type(300, strong);
+  }
+}
+
+.text-wrapper {
+  @include a.type(200);
+}
+
+.logos {
+  display: flex;
+  height: a.rem(32);
+  gap: var(--e-space-3);
+}
+
+.title-wrapper + .text-wrapper,
+* + .logos {
+  margin-top: var(--e-space-1);
+}
+
+.image-col {
+  flex: 0 0 a.rem($image-col-width);
+  max-width: a.rem($image-col-width);
+  margin-left: auto;
+
+  img {
+    width: a.rem(64);
+
+    @include a.bp(lg) {
+      width: a.rem(60);
+    }
+  }
+
+  @container (max-width: 260px) {
+    max-width: a.rem($image-col-width-small);
+    flex-basis: a.rem($image-col-width-small);
+    margin-left: 0;
+    margin-bottom: var(--e-space-2);
+
+    img {
+      width: a.rem(60);
+    }
+  }
+
+  @include a.bp(lg) {
+    flex-basis: a.rem($image-col-width-small);
+  }
+}
+
+.image-background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1;
+  background-color: var(--e-c-primary-01-100);
+  border-radius: 100%;
+}
+
+.badge {
+  @include a.type(100, strong);
+
+  position: absolute;
+  padding: a.rem(6) a.rem(8) a.rem(4);
+  color: var(--e-c-mono-00);
+  background-color: var(--e-c-secondary-05-500);
+  border-radius: var(--e-brd-radius-1);
+  top: a.rem(-16);
+  right: a.rem(-16);
+
+  @include a.bp(m) {
+    top: a.rem(-12);
+    right: a.rem(-12);
+  }
+
+  @include a.bp(s) {
+    top: a.rem(-10);
+    right: a.rem(-10);
+  }
+}

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Image } from '../../elements/types'
+
+interface Props {
+  title?: string
+  text?: string
+  image?: Image
+  logos?: Image[]
+  badge?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-header">
+    <div class="content-col">
+      <div class="title-wrapper">
+        <slot name="title">
+          <h3>{{ title }}</h3>
+        </slot>
+      </div>
+
+      <div class="text-wrapper">
+        <slot name="text">
+          <p>{{ text }}</p>
+        </slot>
+      </div>
+
+      <div v-if="logos" class="logos">
+        <slot name="logos">
+          <img v-for="(img, idx) in logos" :key="idx" :src="img.src" :alt="img.alt" />
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="image || $slots.image" class="image-col">
+      <div class="image-background">
+        <slot name="image"><img v-if="image" :src="image.src" :alt="image.alt" /></slot>
+      </div>
+    </div>
+
+    <div v-if="badge" class="badge">
+      <slot name="badge">{{ badge }}</slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use './card-header.scss';
+</style>

package/components/card-hint/card-hint.scss

@@ -0,0 +1,13 @@
+@use '../../base/abstracts' as a;
+
+.card-hint {
+  h4 {
+    @include a.type(100, weak);
+  }
+
+  p {
+    @include a.type(100, strong);
+
+    color: var(--e-c-secondary-05-500);
+  }
+}

package/components/card-hint/u-card-hint.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  text: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-hint">
+    <slot v-if="title" name="title"
+      ><h4>{{ title }}</h4></slot
+    >
+    <slot v-if="text" name="text"
+      ><p>{{ text }}</p></slot
+    >
+  </div>
+</template>
+
+<style lang="scss">
+@use './card-hint.scss';
+</style>

package/components/card-price/card-price.scss

@@ -0,0 +1,110 @@
+@use '../../base/abstracts' as a;
+
+$image-width: 112px;
+$image-width-small: 100px;
+
+.card-price-wrapper {
+  display: block;
+  container: card / inline-size;
+}
+
+.card-price {
+  display: flex;
+  gap: var(--e-space-6);
+  justify-content: space-between;
+
+  .card-price__price {
+    @include a.type(700, strong);
+  }
+
+  .card-price__subtext {
+    color: var(--e-c-mono-500);
+
+    @include a.type(200);
+  }
+
+  .card-price__description {
+    @include a.type(50);
+
+    margin-top: var(--e-space-4);
+  }
+
+  .card-price__description-duplicate {
+    display: none;
+
+    @include a.type(50);
+  }
+
+  .card-price__widget-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: a.rem($image-width);
+    height: a.rem($image-width);
+    border-radius: 100%;
+    aspect-ratio: 1;
+    background-color: var(--e-c-primary-01-100);
+
+    img {
+      min-width: a.rem(64); // Prevent img from shrinking even if width is set.
+      width: a.rem(64);
+      height: a.rem(64);
+      object-fit: contain;
+    }
+  }
+
+  @container (max-width: 260px) {
+    .card-price__widget-image {
+      width: a.rem($image-width-small);
+      height: a.rem($image-width-small);
+
+      img {
+        min-width: a.rem(60); // Prevent img from shrinking even if width is set.
+        width: a.rem(60);
+        height: a.rem(60);
+      }
+    }
+  }
+
+  @include a.bp(lg) {
+    .card-price__widget-image {
+      width: a.rem($image-width-small);
+      height: a.rem($image-width-small);
+
+      img {
+        min-width: a.rem(60); // Prevent img from shrinking even if width is set.
+        width: a.rem(60);
+        height: a.rem(60);
+      }
+    }
+  }
+
+  @include a.bp(m) {
+    gap: var(--e-space-4);
+
+    &.has-img {
+      flex-wrap: wrap;
+
+      .card-price__description {
+        display: none;
+      }
+
+      .card-price__description-duplicate {
+        display: block;
+        flex: 1 0 100%;
+      }
+    }
+
+    &.has-numeric-stepper {
+      flex-direction: column;
+
+      .card-price__description {
+        display: none;
+      }
+
+      .card-price__description-duplicate {
+        display: block;
+      }
+    }
+  }
+}

package/components/card-price/u-card-price.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+interface Props {
+  priceText: string
+  priceSubtext?: string
+  description?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="card-price-wrapper">
+    <div
+      :class="['card-price', { 'has-img': $slots.image, 'has-numeric-stepper': $slots.stepper }]"
+    >
+      <div class="card-price__left-col">
+        <div class="card-price__price">
+          {{ priceText }}
+        </div>
+
+        <div v-if="priceSubtext" class="card-price__subtext">
+          {{ priceSubtext }}
+        </div>
+
+        <div v-if="description" class="card-price__description">
+          {{ description }}
+        </div>
+      </div>
+
+      <div v-if="$slots.stepper || $slots.image" class="card-price__right-col">
+        <slot v-if="$slots.stepper" name="stepper"></slot>
+
+        <div v-if="$slots.image" class="card-price__widget-image">
+          <slot name="image"></slot>
+        </div>
+      </div>
+
+      <div v-if="description" class="card-price__description-duplicate">
+        {{ description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use './card-price.scss';
+</style>

package/components/card-table/card-table.scss

@@ -0,0 +1,76 @@
+@use '../../base/abstracts' as a;
+
+.card-table-heading {
+  display: flex;
+  column-gap: var(--e-space-2);
+  flex-wrap: wrap;
+  margin-bottom: var(--e-space-4);
+}
+
+.card-table-heading__title,
+.card-table-heading__secondary-title {
+  @include a.type(200, strong);
+}
+
+.card-table-heading__title {
+  color: var(--e-c-primary-01-700);
+}
+
+.card-table {
+  width: 100%;
+
+  td,
+  th {
+    padding: var(--e-space-1) 0;
+
+    > div {
+      display: flex;
+      flex-wrap: nowrap;
+      width: 100%;
+      justify-content: flex-end;
+      column-gap: var(--e-space-2);
+    }
+  }
+
+  th {
+    vertical-align: top;
+
+    @include a.type(100, strong);
+
+    .info {
+      white-space: nowrap;
+
+      @include a.type(100, weak);
+    }
+  }
+
+  td {
+    @include a.type(100, weak);
+  }
+
+  tr {
+    .discount {
+      color: var(--e-c-secondary-05-500);
+    }
+
+    td:nth-child(1),
+    th:nth-child(1) {
+      vertical-align: top;
+      text-align: left;
+      padding-right: var(--e-space-6);
+    }
+
+    td:nth-child(2),
+    th:nth-child(2) {
+      text-align: right;
+    }
+
+    td:nth-child(2) {
+      color: var(--e-c-mono-700);
+    }
+  }
+
+  + .card-table {
+    margin-top: var(--e-space-4);
+  }
+}