@mirweb/mir-web-components 2.3.7 → 2.3.9

package/dist/assets/scss/globals.scss

@@ -49,6 +49,23 @@
         box-shadow: 0 0 15px $blue-600;
       }
     }
+
+    &-danger {
+      min-width: 120px;
+      padding: 3px 15px;
+      background-color: #dd564d;
+      color: $white;
+      border-radius: 0.4rem;
+      transition: $transition-background-color, $transition-box-shadow;
+
+      &:hover,
+      &:active,
+      &:focus,
+      &:target {
+        background-color: darken(#dd564d, 10%);
+        box-shadow: $box-shadow;
+      }
+    }
   }
 
   &--secondary {

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

@@ -13,6 +13,7 @@ import { computed } from "vue";
 const VARIANTS = {
   primary: "primary",
   primaryDark: "primary-dark",
+  primaryDanger: "primary-danger",
   secondary: "secondary",
   close: "close",
   next: "next",

package/dist/components/organisms/header/header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header__wrapper">
-    <nav>
+    <nav aria-label="Main navigation">
       <!-- Main nav -->
       <div class="nav-wrapper">
         <div class="mir-link-logo">
@@ -12,11 +12,7 @@
         <div class="secondary-nav-items">
           <!-- dropdown menu -->
           <div v-if="useDropdown" id="menu-dropdown" ref="dropdownDiv">
-            <button
-              class="nav-dropdown-btn"
-              aria-label="Toggle Dropdown"
-              @click="toggleDropDown"
-            >
+            <button class="nav-dropdown-btn" @click="toggleDropDown">
               <slot name="dropdown-title"></slot>
               <img
                 v-if="showDropDown === false"
@@ -64,7 +60,7 @@
           >
             <button
               class="nav-portal-switcher-btn"
-              aria-label="Toggle Portal"
+              aria-label="Toggle Portal Switcher"
               @click="togglePortalSwitcher"
             >
               <img
@@ -86,7 +82,10 @@
                 >
                   <atom-link link-type="regular">
                     <a :href="link.link" @click="showDropDown = false">
-                      <img :src="link.icon" />
+                      <img
+                        :src="link.icon"
+                        :alt="link.alt ? link.alt : 'portal icon'"
+                      />
                       <div>{{ link.name }}</div></a
                     >
                   </atom-link>
@@ -106,7 +105,7 @@
             </div>
             <button
               v-if="isAuthenticated"
-              aria-label="Toggle Profile"
+              aria-label="Toggle Profile Dropdown"
               class="nav-profile-dropdown-btn"
               @click="toggleProfileDropdown"
             >
@@ -155,7 +154,7 @@
           <!-- Mobile Portal switcher -->
           <div
             v-if="usePortalSwitcher"
-            id="menu-portal-switcher"
+            id="menu-portal-switcher-mobile"
             class="menu-portal-switcher-wrapper"
           >
             <button
@@ -196,7 +195,10 @@
                 >
                   <atom-link link-type="regular">
                     <a :href="link.link" @click="showDropDown = false">
-                      <img :src="link.icon" />
+                      <img
+                        :src="link.icon"
+                        :alt="link.alt ? link.alt : 'portal icon'"
+                      />
                       <div>{{ link.name }}</div></a
                     >
                   </atom-link>
@@ -206,7 +208,7 @@
           </div>
           <button
             class="mobile-burger-wrapper"
-            aria-label="Toggle menu"
+            aria-label="Toggle mobile menu"
             @click.prevent="toggleBurger"
           >
             <img
@@ -266,7 +268,12 @@ const props = defineProps({
     default: false,
   },
   portals: {
-    type: Array as () => Array<{ name: string; icon: string; link: string }>,
+    type: Array as () => Array<{
+      name: string;
+      icon: string;
+      link: string;
+      alt?: string;
+    }>,
     default: () => [],
   },
   showProfileDropDown: {
@@ -320,7 +327,10 @@ onMounted(() => {
     if (!(e.target as HTMLElement).closest("#menu-dropdown")) {
       showDropDown.value = false;
     }
-    if (!(e.target as HTMLElement).closest("#menu-portal-switcher")) {
+    if (
+      !(e.target as HTMLElement).closest("#menu-portal-switcher") &&
+      !(e.target as HTMLElement).closest("#menu-portal-switcher-mobile")
+    ) {
       showPortalSwitcherDropDown.value = false;
     }
     if (!(e.target as HTMLElement).closest("#menu-profile-dropdown")) {

package/dist/main.css

@@ -1 +1 @@
-*:where(:not(html,iframe,canvas,img,svg,video,audio,div.card):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}html{line-height:1.15;-webkit-text-size-adjust:100%;font-size:16px}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}code,kbd,samp{font-family:monospace,monospace;font-size:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}h1{font-size:44px;line-height:52px;font-family:"Oscine",sans-serif;font-weight:300;color:#0c0931}@media screen and (min-width: 581px){h1{font-size:3.75rem;line-height:66px}}h2{font-size:1.875rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:36px;color:#0c0931}h3{font-size:1.375rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:27px;color:#0c0931}h4{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:600;line-height:24px;color:#0c0931}p{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:24px;color:#0c0931}small{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}button{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:600}a{font-size:inherit;font-family:"OpenSans",sans-serif}label{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}.button{border:none;cursor:pointer;font-weight:600;text-align:center;display:inline-block;vertical-align:middle;font-size:.875rem;line-height:27px}.button:disabled{opacity:.3;cursor:auto;pointer-events:none}.button--primary{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary:hover,.button--primary:active,.button--primary:focus,.button--primary:target{background-color:#105aa8;box-shadow:0px 0px 15px #cbeefa}.button--primary-dark{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary-dark:hover,.button--primary-dark:active,.button--primary-dark:focus,.button--primary-dark:target{background-color:#105aa8;box-shadow:0 0 15px #1a76bc}.button--secondary{min-width:120px;padding:3px 15px;color:#1a76bc;border:1px solid #1a76bc;border-radius:.4rem;transition:color .3s ease,border .3s ease}.button--secondary:hover,.button--secondary:active,.button--secondary:focus,.button--secondary:target{color:#105aa8;border:1px solid #105aa8}.button--secondary-dark{color:#fff;border:1px solid #fff;min-width:120px;padding:3px 15px;border-radius:.4rem}.font-size-xxsm{font-size:.75rem}.font-size-xsm{font-size:.875rem}.font-size-sm{font-size:1rem}.font-size-md{font-size:1.375rem}.font-size-lg{font-size:1.875rem}.font-size-xlg{font-size:3.75rem}.product-sub-nav-wrapper__inner{padding:2px 30px 10px 30px}@media screen and (min-width: 984px){.product-sub-nav-wrapper__inner{padding:1em 0 1em 0}}.product-sub-nav-wrapper h3{font-weight:700;color:#003087;font-size:1.875rem}.product-sub-nav--items-wrapper{width:100%}@media screen and (min-width: 984px){.product-sub-nav--items-wrapper{width:auto}}.splide__slide{color:#0c0931}.mirsaic--light{background-image:url("https://a.storyblok.com/f/230581/1202x489/1cad3b882a/mirsaic-light.svg?cv=1695126163505"),linear-gradient(155deg, #effafe 0%, #ffffff 60%);background-repeat:repeat-x,no-repeat;background-size:984px auto,100% 763px;background-position:center top}.mirsaic--dark{background-image:url("https://a.storyblok.com/f/230581/1202x489/e76c5d687c/mirsaic-dark.svg?cv=1695126163753"),linear-gradient(155deg, #143a67 0%, #0c0931 100%);background-repeat:repeat-x,no-repeat;background-size:984px,cover;background-position:center top}table{width:100%;font-family:"OpenSans",sans-serif;font-size:1rem}table strong{font-weight:600}table a{color:#1a76bc;text-decoration:underline}table thead{background-color:#cbeefa}table thead th{padding:10px}table tbody td{padding:20px 10px}table tbody tr:nth-child(odd) td{background-color:#effafe}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Lt.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Rg.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Bd.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
+*:where(:not(html,iframe,canvas,img,svg,video,audio,div.card):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert}html{line-height:1.15;-webkit-text-size-adjust:100%;font-size:16px}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}code,kbd,samp{font-family:monospace,monospace;font-size:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}h1{font-size:44px;line-height:52px;font-family:"Oscine",sans-serif;font-weight:300;color:#0c0931}@media screen and (min-width: 581px){h1{font-size:3.75rem;line-height:66px}}h2{font-size:1.875rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:36px;color:#0c0931}h3{font-size:1.375rem;font-family:"Oscine",sans-serif;font-weight:300;line-height:27px;color:#0c0931}h4{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:600;line-height:24px;color:#0c0931}p{font-size:1rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:24px;color:#0c0931}small{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}button{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:600}a{font-size:inherit;font-family:"OpenSans",sans-serif}label{font-size:.875rem;font-family:"OpenSans",sans-serif;font-weight:300;line-height:20px}.button{border:none;cursor:pointer;font-weight:600;text-align:center;display:inline-block;vertical-align:middle;font-size:.875rem;line-height:27px}.button:disabled{opacity:.3;cursor:auto;pointer-events:none}.button--primary{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary:hover,.button--primary:active,.button--primary:focus,.button--primary:target{background-color:#105aa8;box-shadow:0px 0px 15px #cbeefa}.button--primary-dark{min-width:120px;padding:3px 15px;background-color:#1a76bc;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary-dark:hover,.button--primary-dark:active,.button--primary-dark:focus,.button--primary-dark:target{background-color:#105aa8;box-shadow:0 0 15px #1a76bc}.button--primary-danger{min-width:120px;padding:3px 15px;background-color:#dd564d;color:#fff;border-radius:.4rem;transition:background-color .3s ease,box-shadow .3s ease}.button--primary-danger:hover,.button--primary-danger:active,.button--primary-danger:focus,.button--primary-danger:target{background-color:#cf3228;box-shadow:0px 0px 15px #cbeefa}.button--secondary{min-width:120px;padding:3px 15px;color:#1a76bc;border:1px solid #1a76bc;border-radius:.4rem;transition:color .3s ease,border .3s ease}.button--secondary:hover,.button--secondary:active,.button--secondary:focus,.button--secondary:target{color:#105aa8;border:1px solid #105aa8}.button--secondary-dark{color:#fff;border:1px solid #fff;min-width:120px;padding:3px 15px;border-radius:.4rem}.font-size-xxsm{font-size:.75rem}.font-size-xsm{font-size:.875rem}.font-size-sm{font-size:1rem}.font-size-md{font-size:1.375rem}.font-size-lg{font-size:1.875rem}.font-size-xlg{font-size:3.75rem}.product-sub-nav-wrapper__inner{padding:2px 30px 10px 30px}@media screen and (min-width: 984px){.product-sub-nav-wrapper__inner{padding:1em 0 1em 0}}.product-sub-nav-wrapper h3{font-weight:700;color:#003087;font-size:1.875rem}.product-sub-nav--items-wrapper{width:100%}@media screen and (min-width: 984px){.product-sub-nav--items-wrapper{width:auto}}.splide__slide{color:#0c0931}.mirsaic--light{background-image:url("https://a.storyblok.com/f/230581/1202x489/1cad3b882a/mirsaic-light.svg?cv=1695126163505"),linear-gradient(155deg, #effafe 0%, #ffffff 60%);background-repeat:repeat-x,no-repeat;background-size:984px auto,100% 763px;background-position:center top}.mirsaic--dark{background-image:url("https://a.storyblok.com/f/230581/1202x489/e76c5d687c/mirsaic-dark.svg?cv=1695126163753"),linear-gradient(155deg, #143a67 0%, #0c0931 100%);background-repeat:repeat-x,no-repeat;background-size:984px,cover;background-position:center top}table{width:100%;font-family:"OpenSans",sans-serif;font-size:1rem}table strong{font-weight:600}table a{color:#1a76bc;text-decoration:underline}table thead{background-color:#cbeefa}table thead th{padding:10px}table tbody td{padding:20px 10px}table tbody tr:nth-child(odd) td{background-color:#effafe}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Lt.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Rg.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Oscine";src:url("/fonts/Oscine_Bd.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"OpenSans";src:url("/fonts/OpenSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mirweb/mir-web-components",
   "private": false,
-  "version": "2.3.7",
+  "version": "2.3.9",
   "type": "module",
   "files": [
     "dist"