@mirweb/mir-web-components 1.15.2 → 2.0.0

package/dist/components/atoms/slider/slider.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <div class="slider__wrapper">
+      <div class="slider__label">
+        <label :for="id" :class="[variant, '']">{{ label }}</label
+        ><i
+          v-if="information"
+          role="button"
+          :class="[variant, 'slider__information']"
+          :aria-label="informationLabel"
+          tabindex="0"
+          aria-haspopup="dialog"
+          @click="showModal = !showModal"
+          @keyup.enter="showModal = !showModal"
+        ></i>
+      </div>
+
+      <div class="slider__content">
+        <span :class="[variant, 'slider__minmax']">{{ min }}</span>
+        <input
+          :id="id"
+          ref="slider"
+          type="range"
+          :name="name"
+          :value="modelValue"
+          :min="min"
+          :step="step"
+          :max="max"
+          :class="variant"
+          @input="
+            ({ target }) =>
+              (sliderValue = parseFloat((target as HTMLInputElement).value))
+          "
+        />
+        <span :class="[variant, 'slider__minmax']">{{ max }}</span>
+      </div>
+      <span :class="[variant, 'slider__value']">{{ modelValue }}</span>
+    </div>
+    <molecule-modal
+      v-if="information"
+      :show="showModal"
+      @update:show="showModal = $event"
+    >
+      <p class="modal-information">{{ information }}</p>
+    </molecule-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from "vue";
+import MoleculeModal from "../../molecules/modal/modal.vue";
+
+const VARIANTS = { light: "light", dark: "dark" } as const;
+
+type Variant = keyof typeof VARIANTS;
+
+export type Props = {
+  label: string;
+  id: string;
+  name: string;
+  modelValue: number;
+  min: number;
+  max: number;
+  step: string;
+  variant: Variant;
+  information: string;
+  informationLabel: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  step: "1",
+  variant: "light",
+  information: "",
+  informationLabel: "Additional information",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const sliderValue = ref(props.modelValue);
+const slider = ref<HTMLInputElement>();
+const showModal = ref(false);
+const getProgress = (value: number, min: number, max: number) => {
+  return ((value - min) / (max - min)) * 100;
+};
+
+const setCSSProgress = (progress: number) => {
+  slider.value?.style.setProperty("--ProgressPercent", `${progress}%`);
+};
+
+watchEffect(() => {
+  if (slider.value) {
+    emit("update:modelValue", sliderValue.value);
+    const progress = getProgress(sliderValue.value, props.min, props.max);
+    let extraWidth = (50 - progress) / 100;
+    setCSSProgress(progress + extraWidth);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.slider {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  &__label {
+    font-size: $font-size-xsm;
+    margin-bottom: 7px;
+    display: flex;
+
+    label {
+      font-weight: 300;
+    }
+  }
+
+  &__information {
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    height: 21px;
+    width: 21px;
+    margin-left: 7px;
+
+    &.light {
+      background-image: url("https://a.storyblok.com/f/230581/22x22/31d1e5f857/info-dark-blue.svg?cv=1695125825975");
+      &:hover,
+      &:focus,
+      &:active,
+      &:target {
+        background-image: url("https://a.storyblok.com/f/230581/22x22/00b84adecf/info-blue.svg?cv=1695125825586");
+        transition: $transition-color;
+      }
+    }
+
+    &.dark {
+      background-image: url("https://a.storyblok.com/f/230581/22x22/a1d6e51695/info-white.svg?cv=1695125825722");
+      &:hover,
+      &:focus,
+      &:active,
+      &:target {
+        background-image: url("https://a.storyblok.com/f/230581/22x22/00b84adecf/info-blue.svg?cv=1695125825586");
+        transition: $transition-color;
+      }
+    }
+  }
+
+  &__minmax {
+    font-family: $font-opensans;
+    font-size: $font-size-xsm;
+    font-weight: 300;
+    width: 24px;
+
+    &:first-child {
+      margin-right: 10px;
+      text-align: right;
+    }
+
+    &:last-child {
+      margin-left: 10px;
+      text-align: left;
+    }
+  }
+
+  &__content {
+    --trackHeight: 3px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+
+    input[type="range"] {
+      position: relative;
+      appearance: none;
+      cursor: pointer;
+      border-radius: 999px;
+      z-index: 0;
+      width: 100%;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: var(--ProgressPercent, 100%);
+        height: 100%;
+        pointer-events: none;
+        border-radius: 999px;
+      }
+
+      &::-webkit-slider-runnable-track {
+        appearance: none;
+        height: var(--trackHeight);
+        border-radius: 999px;
+      }
+
+      &::-moz-range-track {
+        appearance: none;
+        height: var(--trackHeight);
+        border-radius: 999px;
+      }
+
+      &::-webkit-slider-thumb {
+        position: relative;
+        top: 50%;
+        transform: translate(0, -50%);
+        width: 15px;
+        height: 15px;
+        border-radius: 999px;
+        pointer-events: all;
+        appearance: none;
+        z-index: 1;
+        transition:
+          width 0.15s ease,
+          height 0.15s ease;
+      }
+
+      &::-moz-range-thumb {
+        position: relative;
+        width: 15px;
+        height: 15px;
+        border: none;
+        border-radius: 999px;
+        pointer-events: all;
+        appearance: none;
+        z-index: 1;
+        transition:
+          width 0.15s ease,
+          height 0.15s ease;
+      }
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:target {
+        &::-webkit-slider-thumb {
+          width: 20px;
+          height: 20px;
+          transition:
+            width 0.15s ease,
+            height 0.15s ease;
+        }
+        &::-moz-range-thumb {
+          width: 20px;
+          height: 20px;
+          transition:
+            width 0.15s ease,
+            height 0.15s ease;
+        }
+      }
+    }
+  }
+
+  &__value {
+    font-family: $font-opensans;
+    font-size: $font-size-xsm;
+    font-weight: 700;
+  }
+}
+
+.light {
+  color: $blue-900;
+
+  &::before {
+    background: $blue-900;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: $blue-200;
+  }
+
+  &::-moz-range-track {
+    background: $blue-200;
+  }
+
+  &::-moz-range-progress {
+    background: $blue-900;
+  }
+
+  &::-webkit-slider-thumb {
+    background: $blue-900;
+  }
+
+  &::-moz-range-thumb {
+    background: $blue-900;
+  }
+}
+
+.dark {
+  color: $white;
+
+  &::before {
+    background: $white;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: $blue-600;
+  }
+
+  &::-moz-range-track {
+    background: $blue-600;
+  }
+
+  &::-moz-range-progress {
+    background: $white;
+  }
+
+  &::-webkit-slider-thumb {
+    background: $white;
+  }
+
+  &::-moz-range-thumb {
+    background: $white;
+  }
+}
+.modal-information {
+  padding: 15px;
+  font-family: $font-opensans;
+}
+</style>

package/dist/components/atoms/text-field/text-field.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="text-field__wrapper">
+    <label
+      :for="id"
+      :class="[
+        required ? 'required' : '',
+        disabled ? 'disabled' : '',
+        search ? 'search' : '',
+      ]"
+      >{{ label }}</label
+    >
+    <div v-if="selectedType === 'password'">
+      <input
+        :id="id"
+        ref="passwordField"
+        :type="passwordFieldType"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :required="required"
+        :disabled="disabled"
+        :name="fieldName"
+        @input="
+          $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+        "
+      />
+      <i
+        role="button"
+        :class="[passwordFieldIcon]"
+        aria-controls="password"
+        :aria-expanded="!hidePassword"
+        @click="hidePassword = !hidePassword"
+      ></i>
+    </div>
+    <input
+      v-else
+      :id="id"
+      ref="textField"
+      :type="selectedType"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :required="required"
+      :class="[
+        invalid ? 'invalid' : '',
+        valid ? 'valid' : '',
+        search ? 'search' : '',
+      ]"
+      :disabled="disabled"
+      :name="fieldName"
+      @input="
+        $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+    />
+    <button v-if="search" class="search"></button>
+    <strong v-if="errorMessage" class="errorMessage">{{ errorMessage }}</strong>
+    <span v-if="helperText" class="helperText">{{ helperText }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+
+const TYPES = {
+  text: "text",
+  email: "email",
+  password: "password",
+  number: "number",
+  tel: "tel",
+  url: "url",
+  search: "search",
+} as const;
+
+type Type = keyof typeof TYPES;
+
+export type Props = {
+  type: Type;
+  fieldName?: string;
+  modelValue: string;
+  placeholder?: string;
+  label?: string;
+  id: string;
+  disabled?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  errorMessage?: string;
+  helperText?: string;
+  search?: boolean;
+  valid?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  fieldName: "",
+  placeholder: "",
+  label: "",
+  disabled: false,
+  required: false,
+  invalid: false,
+  errorMessage: "",
+  helperText: "",
+  search: false,
+  valid: false,
+});
+
+const selectedType = computed(() => TYPES[props.type]);
+
+defineEmits(["update:modelValue"]);
+
+const hidePassword = ref(true);
+const passwordFieldIcon = computed(() =>
+  hidePassword.value ? "showPassword" : "hidePassword",
+);
+const passwordFieldType = computed(() =>
+  hidePassword.value ? "password" : "text",
+);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.text-field {
+  &__wrapper {
+    label {
+      font-family: $font-opensans;
+      font-size: $font-size-xsm;
+      margin-bottom: 7px;
+      display: block;
+      font-weight: 300;
+
+      &.disabled {
+        color: $grey-600;
+      }
+
+      &.required::after {
+        content: "\00a0*";
+        display: inline-block;
+      }
+
+      &.search {
+        display: none;
+      }
+    }
+
+    // Types: text, email, password & url
+
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    input[type="number"],
+    input[type="tel"],
+    input[type="url"] {
+      width: 100%;
+      height: 42px;
+      line-height: 19px;
+      border: 1px solid $grey-400;
+      font-family: $font-opensans;
+      font-size: $font-size-xsm;
+      border-radius: $border-radius;
+      outline: none;
+      padding: 10px 15px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      font-weight: 300;
+
+      &:hover,
+      &:active,
+      &:focus,
+      &:target {
+        box-shadow: $box-shadow;
+        border: 1px solid $blue-500;
+        transition: $transition-box-shadow;
+        transition: $transition-border;
+      }
+
+      &:focus {
+        & ~ .helperText {
+          color: $blue-500;
+          transition: $transition-color;
+          display: block;
+          visibility: visible;
+        }
+      }
+
+      &:disabled,
+      &:read-only {
+        background-color: $grey-100;
+        border: 1px solid $grey-400;
+        pointer-events: none;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:target {
+          box-shadow: none;
+        }
+      }
+
+      &.invalid {
+        border: 1px solid $warning;
+        box-shadow: none;
+        color: $warning;
+        transition: $transition-color;
+        transition: $transition-border;
+        background: $grey-100 right 15px center no-repeat
+          url("https://a.storyblok.com/f/230581/22x22/ff2897a955/info-red.svg?cv=1695125825848");
+      }
+
+      &.valid {
+        transition: $transition-color;
+        transition: $transition-border;
+        background: right 15px center no-repeat
+          url("https://a.storyblok.com/f/230581/22x23/1669b6b82d/done.svg?cv=1695125826015");
+      }
+
+      &.search {
+        background: no-repeat
+          url("https://a.storyblok.com/f/230581/21x21/ebbdca38d3/search-icon.svg?cv=1695125825901");
+        background-position: 30px 25.5px;
+        background-size: 21px;
+        text-indent: 50px;
+        height: 72px;
+      }
+
+      &::placeholder {
+        color: $grey-400;
+      }
+    }
+
+    .showPassword {
+      background-image: url("https://a.storyblok.com/f/230581/21x21/5876ed1137/visible.svg?cv=1695125825884");
+      height: 15px;
+      width: 21px;
+      float: right;
+      margin-right: 15px;
+      margin-top: -27px;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      position: relative;
+      vertical-align: middle;
+    }
+
+    .hidePassword {
+      background-image: url("https://a.storyblok.com/f/230581/21x21/171d9c4bb2/hidden.svg?cv=1695125825708");
+      height: 19px;
+      width: 21px;
+      float: right;
+      margin-right: 15px;
+      margin-top: -32px;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      vertical-align: middle;
+      position: relative;
+    }
+
+    .errorMessage {
+      color: $warning;
+      font-family: $font-opensans;
+      font-size: $font-size-xsm;
+      margin-top: 7px;
+      display: block;
+      font-weight: 700;
+    }
+
+    .helperText {
+      font-family: $font-opensans;
+      font-size: $font-size-xsm;
+      margin-top: 7px;
+      display: none;
+      visibility: hidden;
+      font-weight: 300;
+    }
+  }
+}
+</style>