@energie360/ui-library 0.1.15 → 0.1.16

package/components/navigation-panel-tile/navigation-panel-tile.scss

@@ -21,7 +21,7 @@
     }
   }
 
-  &.greyed:not(.disabled):not(:hover):not(.active) {
+  &.greyed:not(.disabled, :hover, .active) {
     background-color: var(--e-c-mono-50);
     border-color: var(--e-c-mono-200);
   }

package/components/navigation-panel-tile/u-navigation-panel-tile.vue

@@ -2,20 +2,18 @@
 import { computed } from 'vue'
 import { UIcon } from '../../elements'
 
-enum IconBadge {
-  Inactive = 'inactive',
-}
+type IconBadge = 'inactive'
 
 interface Props {
-  title: string
-  description: string
-  icon: string
-  iconBadge?: IconBadge
-  href?: string
-  target?: string
   active?: boolean
-  greyed?: boolean
+  description?: string
   disabled?: boolean
+  greyed?: boolean
+  href?: string
+  icon?: string
+  iconBadge?: IconBadge
+  target?: string
+  title?: string
 }
 
 const {
@@ -38,13 +36,19 @@ const tag = computed(() => (href ? 'a' : 'div'))
   >
     <div class="navigation-panel-tile__text-column">
       <div class="navigation-panel-tile__title">
-        {{ title }}
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div class="navigation-panel-tile__description">
+        <slot name="description">
+          <div v-if="description" v-html="description" />
+        </slot>
       </div>
-      <div class="navigation-panel-tile__description" v-html="description" />
     </div>
 
     <div class="navigation-panel-tile__icon-column">
-      <div class="navigation-panel-tile__icon-wrapper">
+      <div v-if="icon" class="navigation-panel-tile__icon-wrapper">
         <span v-if="iconBadge" :class="['badge', iconBadge]" />
 
         <UIcon :name="icon" />

package/components/richtext/_wizard.scss

@@ -0,0 +1,26 @@
+@use '../../base/abstracts' as a;
+
+.richtext.richtext--wizard {
+  // Spacing rules
+  * + * {
+    margin-top: var(--e-spac-2);
+  }
+
+  * + h2,
+  * + h3,
+  * + .richtext__title-large,
+  * + .richtext__title-small {
+    margin-top: var(--e-space-6);
+  }
+
+  h2,
+  .richtext__title-large {
+    @include a.type(300, strong);
+
+    color: var(--e-c-mono-900);
+
+    @include a.bp(lg) {
+      @include a.type(200, strong);
+    }
+  }
+}

package/components/richtext/richtext.scss

@@ -1,4 +1,5 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
+@use './wizard';
 
 .richtext {
   // Spacing rules

package/elements/checkbox/checkbox.scss

@@ -0,0 +1,150 @@
+@use '../../base/abstracts/' as a;
+
+.checkbox {
+  &.disabled {
+    .checkbox__label {
+      color: var(--e-c-mono-500);
+    }
+  }
+
+  &.error {
+    .checkbox__label {
+      color: var(--e-c-signal-03-700);
+    }
+
+    .checkbox__input-icon::after {
+      border: 2px solid var(--e-c-signal-03-700);
+    }
+
+    .checkbox__error-text {
+      display: block;
+    }
+  }
+
+  &.checkbox--error {
+    .checkbox__error-text {
+      display: block;
+    }
+  }
+}
+
+.checkbox__wrapper {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  column-gap: var(--e-space-1);
+}
+
+.checkbox__label {
+  @include a.type(200);
+
+  order: 2;
+  flex: 0 0 calc(100% - #{a.rem(34 + 4)});
+  padding-top: a.rem(5);
+}
+
+.checkbox__input {
+  z-index: 0;
+  order: 1;
+  position: relative;
+  width: a.rem(34);
+  height: a.rem(34);
+
+  input {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--e-brd-radius-1);
+
+    // States
+    &:hover:not(:disabled) + .checkbox__input-icon {
+      background-color: var(--e-c-mono-50);
+
+      &::after {
+        border-color: var(--e-c-primary-01-900);
+      }
+    }
+
+    &:active:not(:disabled) + .checkbox__input-icon {
+      background-color: var(--e-c-primary-01-50);
+    }
+
+    &:focus + .checkbox__input-icon {
+      &::after {
+        border-color: var(--e-c-primary-01-900);
+      }
+    }
+
+    &:checked + .checkbox__input-icon {
+      &::after {
+        border-color: var(--e-c-primary-01-900);
+        background-color: var(--e-c-primary-01-900);
+      }
+
+      svg {
+        position: relative;
+        z-index: 1;
+        fill: var(--e-c-mono-00);
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:disabled + .checkbox__input-icon {
+      &::after {
+        border-color: var(--e-c-mono-500);
+      }
+    }
+
+    &:disabled:checked + .checkbox__input-icon {
+      &::after {
+        background-color: var(--e-c-mono-500);
+      }
+    }
+  }
+}
+
+.checkbox__error-text {
+  @include a.type(50, strong);
+
+  order: 3;
+  display: none;
+  margin-top: var(--e-space-1);
+  padding-left: a.rem(34 + 4);
+  color: var(--e-c-signal-03-700);
+}
+
+.checkbox__input-icon {
+  z-index: -1;
+  position: absolute;
+  inset: 0;
+  border-radius: 100%;
+  background-color: transparent;
+  padding: a.rem(8);
+  transition: background-color var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+  svg {
+    display: block;
+    fill: transparent;
+    transition: fill var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: a.rem(18);
+    height: a.rem(18);
+    border: 2px solid var(--e-c-mono-700);
+    border-radius: var(--e-brd-radius-1);
+    transition:
+      border var(--e-trs-duration-faster) var(--e-trs-easing-default),
+      background var(--e-trs-duration-faster) var(--e-trs-easing-default);
+  }
+}

package/elements/checkbox/u-checkbox.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useId } from 'vue'
+
+interface Props {
+  name: string
+  label?: string
+  error: boolean
+  disabled: boolean
+  errorMessage?: string
+}
+
+const { errorMessage = '' } = defineProps<Props>()
+
+const model = defineModel<boolean>()
+const cId = `checkbox-${useId()}`
+</script>
+
+<template>
+  <div :class="['checkbox', { disabled, error }]">
+    <div class="checkbox__wrapper">
+      <label :for="cId" class="checkbox__label">
+        <slot name="label">{{ label }}</slot>
+      </label>
+
+      <div class="checkbox__input">
+        <input :id="cId" v-model="model" type="checkbox" :name :disabled v-bind="$attrs" />
+
+        <div class="checkbox__input-icon">
+          <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+            <path d="m7 14.42-5-5 1.41-1.41L7 11.59 14.59 4 16 5.42l-9 9Z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+
+    <div class="checkbox__error-text">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./checkbox.scss"></style>

package/elements/index.js

@@ -19,3 +19,6 @@ export { default as USpectro } from './spectro/u-spectro.vue'
 export { default as UTextField } from './text-field/u-text-field.vue'
 export { default as UTextarea } from './textarea/u-textarea.vue'
 export { default as UToggleSwitch } from './toggle-switch/u-toggle-switch.vue'
+export { default as UCheckbox } from './checkbox/u-checkbox.vue'
+export { default as USelectTile } from './select-tile/u-select-tile.vue'
+export { default as USelectTiles } from './select-tiles/u-select-tiles.vue'

package/elements/radio/radio.scss

@@ -1,7 +1,96 @@
+@use '../../base/abstracts/' as a;
+
 .radio {
-  display: block;
+  @include a.type(200);
+
+  display: inline-flex;
+  position: relative;
+  column-gap: var(--e-space-1);
+  align-items: center;
+
+  &:hover:not(.disabled) {
+    .radio__icon::before {
+      background-color: var(--e-c-primary-01-50);
+    }
+
+    .radio__icon::after {
+      border-color: var(--e-c-secondary-01-900);
+    }
+  }
+
+  &.disabled {
+    pointer-events: none;
+    color: var(--e-c-mono-500);
+  }
 }
 
 .radio__control {
-  appearance: radio;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: a.rem(40);
+  height: a.rem(40);
+  border-radius: 100%;
+
+  &:focus + .radio__icon {
+    &::before {
+      background-color: var(--e-c-primary-01-50);
+    }
+  }
+
+  &:active + .radio__icon {
+    &::before {
+      background-color: var(--e-c-primary-01-100);
+    }
+  }
+
+  &:checked + .radio__icon {
+    &::after {
+      border-color: var(--e-c-secondary-01-900);
+      border-width: 5px;
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+
+    + .radio__icon::after {
+      border-color: var(--e-c-mono-200);
+    }
+
+    &:checked + .radio__icon::after {
+      border-width: 2px;
+      background-color: var(--e-c-mono-200);
+      box-shadow: 0 0 0 3px var(--e-c-mono-00) inset;
+    }
+  }
+}
+
+.radio__icon {
+  position: relative;
+  display: inline-block;
+  width: a.rem(40);
+  height: a.rem(40);
+  line-height: 1;
+  vertical-align: middle;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 100%;
+    transition: background a.$trs-default;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - #{a.rem(10)});
+    left: calc(50% - #{a.rem(10)});
+    width: a.rem(20);
+    height: a.rem(20);
+    border-radius: 100%;
+    border: 2px solid var(--e-c-mono-900);
+    transition: border a.$trs-default;
+  }
 }

package/elements/radio/u-radio.vue

@@ -16,8 +16,7 @@ const { onChange } = useRadio({ model })
 </script>
 
 <template>
-  <div class="radio">
-    <label>{{ label }}</label>
+  <label :class="['radio', { checked: model === value, disabled }]">
     <input
       v-model="model"
       class="radio__control"
@@ -27,7 +26,11 @@ const { onChange } = useRadio({ model })
       :disabled
       @change="onChange"
     />
-  </div>
+
+    <span class="radio__icon"></span>
+
+    <span>{{ label }}</span>
+  </label>
 </template>
 
 <style lang="scss" src="./radio.scss"></style>

package/elements/radio-group/radio-group.scss

@@ -1,3 +1,31 @@
+@use '../../base/abstracts/' as a;
+
 .radio-group {
   display: block;
+
+  &.error {
+    .radio-group__error-message {
+      display: block;
+    }
+  }
+}
+
+.radio-group__title {
+  @include a.type(200, strong);
+
+  margin-bottom: var(--e-space-3);
+}
+
+.radio-group__items {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: var(--e-space-3) var(--e-space-10);
+}
+
+.radio-group__error-message {
+  @include a.type(50, strong);
+
+  display: none;
+  margin-top: var(--e-space-1);
+  color: var(--e-c-signal-03-700);
 }

package/elements/radio-group/u-radio-group.vue

@@ -1,15 +1,35 @@
 <script setup lang="ts">
 import { useRadioGroup } from './radio-group-composables'
 
+interface Props {
+  title?: string
+  error?: boolean
+  errorMessage?: string
+}
+
+defineProps<Props>()
+
 const model = defineModel<string>()
 
 useRadioGroup({ model })
 </script>
 
 <template>
-  <div class="radio-group">
-    <slot></slot>
-  </div>
+  <fieldset :class="['radio-group', { error }]">
+    <legend v-if="title" class="radio-group__title">
+      <h3>
+        <slot name="title">{{ title }}</slot>
+      </h3>
+    </legend>
+
+    <div class="radio-group__items">
+      <slot></slot>
+    </div>
+
+    <div class="radio-group__error-message">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
+  </fieldset>
 </template>
 
 <style lang="scss" src="./radio-group.scss"></style>

package/elements/select-chip/select-chip.scss

@@ -14,5 +14,6 @@
     position: absolute;
     inset: 0;
     cursor: pointer;
+    border-radius: 24px;
   }
 }

package/elements/select-chip/u-select-chip.vue

@@ -29,7 +29,7 @@ const classes = computed(() =>
 <template>
   <div class="select-chip">
     <label :class="classes" class="select-chip__button button">
-      <UIcon v-if="model === value" name="mini-check"></UIcon>
+      <UIcon v-if="model === value" name="mini-check" />
       {{ label }}
 
       <slot>
@@ -39,6 +39,6 @@ const classes = computed(() =>
   </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 @use './select-chip.scss';
 </style>

package/elements/select-chips/select-chips.scss

@@ -1,5 +1,23 @@
+@use '../../base/abstracts/' as a;
+
 .select-chips {
+  &.error {
+    .select-chips__error-message {
+      display: block;
+    }
+  }
+}
+
+.select-chips__items {
   display: flex;
   flex-wrap: wrap;
   gap: var(--e-space-6);
 }
+
+.select-chips__error-message {
+  @include a.type(50, strong);
+
+  display: none;
+  margin-top: var(--e-space-1);
+  color: var(--e-c-signal-03-700);
+}

package/elements/select-chips/u-select-chips.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { useRadioGroup } from '../radio-group/radio-group-composables'
 
+interface Props {
+  error?: boolean
+  errorMessage?: string
+}
+
+defineProps<Props>()
+
 const model = defineModel<string>()
 
 useRadioGroup({
@@ -10,11 +17,17 @@ useRadioGroup({
 </script>
 
 <template>
-  <div class="select-chips">
-    <slot></slot>
+  <div :class="['select-chips', { error }]">
+    <div class="select-chips__items">
+      <slot></slot>
+    </div>
+
+    <div class="select-chips__error-message">
+      <slot name="error-message">{{ errorMessage }}</slot>
+    </div>
   </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 @use './select-chips.scss';
 </style>