@mirweb/mir-web-components 1.15.3 → 2.0.0

package/dist/components/atoms/label/label.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="label__wrapper">
+    <span
+      :aria-label="ariaLabel"
+      :label-dark="labelDark"
+      :class="labelDark ? 'label--dark' : 'label--light'"
+    >
+      {{ text }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+export type Props = {
+  text: string;
+  labelDark?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  labelDark: false,
+});
+
+const ariaLabel = computed(() => `Label: ${props.text}`);
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.label {
+  &--dark {
+    background-color: $blue-800;
+    color: $white;
+  }
+  &--light {
+    background-color: $blue-200;
+    color: $blue-900;
+  }
+
+  &__wrapper {
+    span {
+      display: inline-block;
+      height: 27px;
+      padding: 0px 10px;
+      font-size: $font-size-xxsm;
+      line-height: $line-height-md;
+      font-family: $font-opensans;
+      border-radius: 3px;
+    }
+  }
+}
+</style>

package/dist/components/atoms/link/link.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="link__wrapper">
+    <div
+      v-bind="attrs"
+      class="mir-link"
+      :class="[
+        selectedLinkType,
+        disabled ? 'disabled' : '',
+        selectedUnderline,
+        arrow ? 'link-arrow' : '',
+      ]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+
+const LINKTYPES = {
+  primary: "mir-link--btn button button--primary",
+  primary_dark: "mir-link--btn button button--primary-dark",
+  secondary: "mir-link--btn button button--secondary",
+  secondary_dark: "mir-link--btn button button--secondary-dark",
+  regular: "regular-link",
+  regular_dark: "regular-link-dark",
+  regular_light: "regular-link-light",
+  regular_blue: "regular-link-blue",
+} as const;
+
+type LinkType = keyof typeof LINKTYPES;
+
+const UNDERLINE = {
+  hover: "underline-hover",
+  true: "add-underline",
+  false: "remove-underline",
+} as const;
+
+type Underline = keyof typeof UNDERLINE;
+
+export type Props = {
+  linkType: LinkType;
+  arrow?: boolean;
+  underline?: Underline;
+  disabled?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  linkType: "regular",
+  arrow: false,
+  underline: "false",
+  disabled: false,
+});
+
+const selectedLinkType = computed(() => LINKTYPES[props.linkType]);
+const selectedUnderline = computed(() => UNDERLINE[props.underline]);
+
+const attrs = computed(() => {
+  const { ...rest } = toRefs(props);
+  return rest;
+});
+</script>
+
+<style lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.link {
+  &__wrapper {
+    .mir-link {
+      a {
+        display: inline-block;
+        cursor: pointer;
+        width: fit-content;
+      }
+      &--btn {
+        a {
+          font-size: $font-size-xsm;
+          font-family: $font-opensans;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}
+
+.link-arrow {
+  a {
+    position: relative;
+    &:hover::after {
+      transform: translate(5px);
+    }
+
+    &::after {
+      content: "";
+      background-image: url("https://a.storyblok.com/f/230581/5x10/53d983a1cb/link-arrow.svg?cv=1695125713966");
+      background-repeat: no-repeat;
+      position: absolute;
+      height: 10px;
+      width: 5px;
+      bottom: 4.2px;
+      margin-left: 7px;
+      transition: transform 0.2s ease-out;
+    }
+  }
+}
+
+@keyframes slideRight {
+  0% {
+  }
+  100% {
+    transform: translate(5px);
+  }
+}
+
+.remove-underline a {
+  text-decoration: none;
+}
+.add-underline a {
+  text-decoration: underline;
+}
+.underline-hover a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.regular-link a {
+  color: $blue-900;
+  &:hover,
+  &:active,
+  &:focus,
+  &:target {
+    transition: $transition-color;
+    color: $blue-600;
+  }
+}
+.regular-link-dark a {
+  color: $white;
+}
+.regular-link-light a {
+  color: $blue-600;
+  font-weight: 500;
+  &:hover,
+  &:active,
+  &:focus,
+  &:target {
+    transition: $transition-color;
+    color: $blue-700;
+  }
+}
+
+.regular-link-blue a {
+  color: $blue-800;
+}
+
+.regular-link:focus a {
+  outline: 2px solid $blue-400;
+  outline-offset: 2px;
+}
+
+.disabled a {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>

package/dist/components/atoms/radio-button/radio-button.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="radio__wrapper" :class="disabled ? 'disabled' : ''">
+    <input
+      :id="id"
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="checked"
+      :disabled="disabled"
+      :required="required"
+      class="radio__radio"
+      @change="onChange"
+    />
+    <label :for="id" class="radio__label" :class="required ? 'required' : ''">
+      <span class="radiomark"></span>
+      <slot></slot>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export type Props = {
+  name: string;
+  value: string | number | boolean;
+  checked: boolean;
+  disabled: boolean;
+  id: string;
+  required: boolean;
+};
+
+withDefaults(defineProps<Props>(), {
+  name: "radio",
+  value: "value",
+  checked: false,
+  disabled: false,
+  id: "radio",
+  required: false,
+});
+
+const emit = defineEmits(["input"]);
+
+const onChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit("input", target.checked);
+};
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.required {
+  &::after {
+    content: " *";
+    display: inline-block;
+  }
+}
+
+.radio {
+  &__radio {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked ~ .radio__label .radiomark {
+      background-color: $blue-800;
+      border-color: $grey-400;
+      &:after {
+        display: block;
+      }
+    }
+  }
+
+  &__label {
+    position: relative;
+    padding-left: 30px;
+    cursor: pointer;
+    user-select: none;
+    .radiomark:after {
+      left: 4px;
+      top: 4px;
+      width: 10px;
+      height: 10px;
+      background-color: $white;
+      border-radius: 50%;
+    }
+  }
+}
+
+.radiomark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: $white;
+  border-radius: 50%;
+  border: 1px solid $grey-400;
+
+  &::after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+}
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+</style>

package/dist/components/atoms/select/select.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="select__wrapper">
+    <label
+      :for="id"
+      :class="[required ? 'required' : '', disabled ? 'disabled' : '']"
+      >{{ label }}</label
+    >
+    <select
+      :id="id"
+      :class="disabled ? 'disabled' : ''"
+      :disabled="disabled"
+      :name="name"
+      :value="modelValue"
+      @change="
+        $emit('update:modelValue', ($event.target as HTMLSelectElement).value);
+        ($event.target as HTMLSelectElement).blur();
+      "
+    >
+      <option
+        v-for="option in options"
+        :key="option.value"
+        :value="option.value"
+      >
+        {{ option.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Option {
+  value: string;
+  text: string;
+}
+
+export type Props = {
+  id: string;
+  name: string;
+  options: Array<Option>;
+  modelValue: string;
+  label: string;
+  required: boolean;
+  disabled: boolean;
+};
+
+withDefaults(defineProps<Props>(), {
+  required: false,
+  disabled: false,
+});
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.select {
+  &__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;
+      }
+    }
+
+    select {
+      width: 100%;
+      padding: 10px 15px;
+      border-radius: $border-radius;
+      border: 1px solid $grey-400;
+      font-family: $font-opensans;
+      font-size: $font-size-xsm;
+      line-height: 21px;
+      cursor: pointer;
+      height: 42px;
+      appearance: none;
+      font-weight: 300;
+      background-image: url("https://a.storyblok.com/f/230581/9x6/8cecdca15f/arrow-down.svg?cv=1695125714195");
+      background-repeat: no-repeat;
+      background-position: center right 15px;
+      background-color: $white;
+
+      &:hover,
+      &:target,
+      &:focus,
+      &:active {
+        border: 1px solid $blue-500;
+        border-radius: $border-radius;
+        box-shadow: $box-shadow;
+        transition: $transition-box-shadow;
+        transition: $transition-border;
+      }
+
+      &:focus-within {
+        background-image: url("https://a.storyblok.com/f/230581/9x6/0fd60539b9/arrow-up.svg?cv=1695125714780");
+      }
+
+      &.disabled {
+        background-color: $grey-100;
+        color: $grey-400;
+        pointer-events: none;
+        fill: $grey-400;
+      }
+    }
+  }
+}
+</style>

package/dist/components/atoms/select-multiple/select-multiple.vue

@@ -0,0 +1,210 @@
+<template>
+  <div v-click-outside="collapse" class="dropdown">
+    <button
+      class="dropdown-button"
+      :class="{ clicked: isOpen }"
+      :style="{ 'z-index': isOpen ? 2 : 0 }"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      @click="isOpen = !isOpen"
+    >
+      <slot name="button">{{ label }}</slot>
+    </button>
+    <div
+      :class="{ hidden: !isOpen, 'adjust-height': adjustHeight }"
+      class="dropdown-content"
+    >
+      <atom-checkbox
+        v-for="option in options"
+        :id="option.value"
+        :key="option.value"
+        :name="option.text"
+        :required="false"
+        :disabled="false"
+        :value="option.value"
+        :checked="
+          selectedOptions.includes(option.value) ||
+          selectedOptions.includes(option.text)
+        "
+        @input="handleInput(option.value, option.text)"
+      >
+        {{ option.text }}
+      </atom-checkbox>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomCheckbox from "../../atoms/checkbox/checkbox.vue";
+import { ref, computed } from "vue";
+import { vClickOutside } from "../../../directives/clickOutside";
+
+const isOpen = ref(false);
+
+export type Props = {
+  label: string;
+  options: Array<{ value: string; text: string }>;
+  selectedOptions: Array<string>;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "",
+  options: () => [],
+  selectedOptions: () => [],
+});
+
+const emit = defineEmits<{
+  (e: "filter", value: string): void;
+  (e: "remove-filter", value: string): void;
+}>();
+
+/**
+ * Handles the input value and text for the select-multiple component.
+ * If the value or text is not already selected, it emits a "filter" event with the value.
+ * If the value is already selected, it emits a "remove-filter" event with the value.
+ *
+ * @param {string} value - The value of the selected option.
+ * @param {string} text - The text of the selected option.
+ */
+function handleInput(value: string, text: string) {
+  if (
+    !props.selectedOptions.includes(value) &&
+    !props.selectedOptions.includes(text)
+  ) {
+    emit("filter", value);
+  } else {
+    emit("remove-filter", value);
+  }
+}
+
+function collapse() {
+  isOpen.value = false;
+}
+
+const adjustHeight = computed(() => {
+  return props.options.length > 8;
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  flex: 1;
+
+  @media screen and (min-width: 581px) {
+    flex: none;
+  }
+
+  &-button {
+    padding: 10px 15px;
+    border-radius: 0.4rem;
+    border: 1px solid #ced4da;
+    font-family: $font-opensans;
+    font-size: 0.875rem;
+    line-height: 21px;
+    cursor: pointer;
+    height: 42px;
+    appearance: none;
+    font-weight: 300;
+    background-image: url(https://a.storyblok.com/f/230581/9x6/8cecdca15f/arrow-down.svg?cv=1695125714195);
+    background-repeat: no-repeat;
+    background-position: center right 15px;
+    background-color: #fff;
+    width: 100%;
+    padding-right: 60px;
+    position: relative;
+    text-transform: capitalize;
+
+    &:after {
+      content: "";
+      display: none;
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: white;
+      z-index: 1;
+    }
+    &:hover,
+    &:focus {
+      box-shadow: $box-shadow;
+    }
+    &:active {
+      box-shadow: none;
+    }
+
+    &.clicked {
+      box-shadow: none;
+
+      &:hover,
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.dropdown-content {
+  position: absolute;
+  background-color: white;
+  border: 1px solid #ced4da;
+  position: absolute;
+  width: 100%;
+  top: 42px;
+  left: 0;
+  z-index: 1;
+  width: max-content;
+  min-width: 100%;
+  border-radius: 0 6px 6px 6px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 15px;
+
+  :deep(.checkbox__label) {
+    padding-right: 15px;
+  }
+
+  &.adjust-height {
+    max-height: max-content;
+
+    @include md {
+      max-height: 260px;
+      padding: 15px 30px 15px 15px;
+    }
+  }
+}
+
+.dropdown-button[aria-expanded="true"]::after {
+  display: block;
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background-color: white;
+}
+
+.dropdown-button[aria-expanded="true"] {
+  border-radius: 6px 6px 0 0;
+  background-image: url(https://a.storyblok.com/f/230581/9x6/0fd60539b9/arrow-up.svg);
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  :deep(label) {
+    display: block;
+    width: max-content;
+  }
+}
+.hidden {
+  display: none;
+}
+</style>