@mirweb/mir-web-components 1.15.3 → 2.0.0

package/dist/assets/scss/normalize.scss

@@ -0,0 +1,393 @@
+@use "../../assets/scss/variables.scss" as *;
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  font-size: 16px; // 1rem = 16px
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  //margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  //font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}
+
+h1 {
+  font-size: 44px;
+  line-height: 52px;
+  font-family: $font-oscine;
+  font-weight: 300;
+  color: $blue-900;
+
+  @include sm {
+    font-size: $font-size-xlg;
+    line-height: $line-height-xlg;
+  }
+}
+h2 {
+  font-size: $font-size-lg;
+  font-family: $font-oscine;
+  font-weight: 300;
+  line-height: $line-height-lg;
+  color: $blue-900;
+}
+h3 {
+  font-size: $font-size-md;
+  font-family: $font-oscine;
+  font-weight: 300;
+  line-height: $line-height-md;
+  color: $blue-900;
+}
+h4 {
+  font-size: $font-size-sm;
+  font-family: $font-opensans;
+  font-weight: 600;
+  line-height: $line-height-sm;
+  color: $blue-900;
+}
+p {
+  font-size: $font-size-sm;
+  font-family: $font-opensans;
+  font-weight: 300;
+  line-height: $line-height-sm;
+  color: $blue-900;
+}
+small {
+  font-size: $font-size-xsm;
+  font-family: $font-opensans;
+  font-weight: 300;
+  line-height: $line-height-xsm;
+}
+button {
+  font-size: $font-size-xsm;
+  font-family: $font-opensans;
+  font-weight: 600;
+}
+a {
+  font-size: inherit;
+  font-family: $font-opensans;
+}
+label {
+  font-size: $font-size-xsm;
+  font-family: $font-opensans;
+  font-weight: 300;
+  line-height: $line-height-xsm;
+}

package/dist/assets/scss/reset.scss

@@ -0,0 +1,102 @@
+/***
+    The new CSS reset - version 1.8.4 (last updated 14.2.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+*:where(
+    :not(html, iframe, canvas, img, svg, video, audio, div.card):not(
+        svg *,
+        symbol *
+      )
+  ) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input,
+textarea {
+  -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+  all: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* remove default dot (•) sign */
+::marker {
+  content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+: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;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+  all: revert;
+}

package/dist/assets/scss/variables.scss

@@ -0,0 +1,95 @@
+// color variables
+$white: #ffffff;
+
+$grey-100: #f5f6f6;
+$grey-200: #e4e6ea;
+$grey-300: #dee2e6;
+$grey-400: #ced4da;
+$grey-500: #adafaf;
+$grey-600: #626767;
+$grey-700: #495057;
+$grey-800: #343a40;
+$grey-900: #212529;
+
+$blue-000: #f9fdff;
+$blue-100: #effafe;
+$blue-200: #e2f5fc;
+$blue-300: #cbeefa;
+$blue-400: #72c7e7;
+$blue-500: #56a0d3;
+$blue-600: #1a76bc;
+$blue-700: #105aa8;
+$blue-800: #003087;
+$blue-900: #0c0931;
+
+$warning: #dd564d;
+
+$font-oscine: "Oscine", sans-serif;
+$font-opensans: "OpenSans", sans-serif;
+// body variables
+
+// typography
+$font-size-xxsm: 0.75rem; // 12px
+$font-size-xsm: 0.875rem; // 14px
+$font-size-sm: 1rem; // 16px
+$font-size-md: 1.375rem; // 22px
+$font-size-lg: 1.875rem; // 30px
+$font-size-xlg: 3.75rem; // 60px
+
+// line height
+$line-height-xsm: 20px;
+$line-height-sm: 24px;
+$line-height-md: 27px;
+$line-height-lg: 36px;
+$line-height-xlg: 66px;
+
+// animation variables
+$transition-box-shadow: box-shadow 0.3s ease;
+$transition-color: color 0.3s ease;
+$transition-border: border 0.3s ease;
+$transition-background-color: background-color 0.3s ease;
+$transition-width-height:
+  width 0.3s ease,
+  height 0.3s ease;
+
+// border variables
+$border-width: 1px;
+$border-color: $blue-600;
+$border-radius: 0.4rem; // 6px
+
+// box shadow variables
+$box-shadow: 0px 0px 15px $blue-300;
+
+// content area width
+
+$max-width: 984px;
+
+// media breakpoints
+$screen-md-min: 581px;
+$screen-lg-min: 984px;
+$screen-xl-min: 1312px; // 984px + 2 grids on each side
+
+$padding-desktop: 60px 0px;
+$padding-mobile: 30px 30px;
+$extra-margin-desktop-bg: 60px 0px;
+$extra-margin-mobile-bg: 30px 0px;
+
+// media devices
+
+@mixin sm {
+  @media screen and (min-width: #{$screen-md-min}) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media screen and (min-width: #{$screen-lg-min}) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media screen and (min-width: #{$screen-xl-min}) {
+    @content;
+  }
+}

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

@@ -0,0 +1,81 @@
+<template>
+  <button
+    :class="['button', 'button--' + selectedVariant]"
+    :aria-label="ariaLabel"
+  >
+    {{ selectedVariant === "close" ? "" : buttonText }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const VARIANTS = {
+  primary: "primary",
+  primaryDark: "primary-dark",
+  secondary: "secondary",
+  close: "close",
+  next: "next",
+  previous: "previous",
+} as const;
+
+type Variant = keyof typeof VARIANTS;
+
+export type Props = {
+  variant: Variant;
+  ariaLabel: string;
+  buttonText?: string;
+};
+const props = withDefaults(defineProps<Props>(), {
+  variant: "primary",
+  ariaLabel: "Button",
+  buttonText: "",
+});
+
+const selectedVariant = computed(() => VARIANTS[props.variant]);
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.button {
+  &--close {
+    background-image: url("https://a.storyblok.com/f/230581/9x9/e4fb715dc9/close.svg?cv=1695125714598");
+    height: 16px;
+    width: 16px;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  &--next,
+  &--previous {
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    background-color: $blue-600;
+    background-repeat: no-repeat;
+    transition: $transition-background-color;
+    cursor: pointer;
+
+    &:disabled {
+      background-color: $blue-300;
+      cursor: auto;
+    }
+
+    &:hover:enabled,
+    &:focus:enabled,
+    &:active:enabled {
+      background-color: $blue-700;
+    }
+  }
+
+  &--next {
+    background-image: url("https://a.storyblok.com/f/230581/21x21/7d4e94b064/direction-right.svg?cv=1695125714214");
+    background-position: 55%;
+  }
+
+  &--previous {
+    background-image: url("https://a.storyblok.com/f/230581/21x21/2078c0df8c/direction-left.svg?cv=1695125714250");
+    background-position: 45%;
+  }
+}
+</style>