Beds 200/manage notifications modal

.git-blame-ignore-revs

@@ -4,6 +4,8 @@
 # in order to work execute once:
 # git config blame.ignoreRevsFile .git-blame-ignore-revs
 
+#chore(eslint): add `natural sorting` for `json` files 
+f3da99c5c685eae1914aad8513d3b4b2f1cdcaa2
 # style(eslint): add `typescript delimiter` rule
 d6b42edb3f687cad3082a9044bcb71fc39a46176
 # style(eslint): apply `max-len` rule

frontend/.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "conventionalCommits.scopes": [
+    "BcButton",
     "BcLink",
     "BcTablePager",
     "DashboardChartSummaryChartFilter",
@@ -8,16 +9,20 @@
     "NotificationsClientsTable",
     "NotificationsNetworkTable",
     "NotificationsOverview",
+    "a11y",
     "checkout",
     "ci",
+    "csrf",
     "customFetch",
     "dialog",
     "eslint",
     "feature-flags",
     "git",
+    "git-blame-ignore",
     "i18n",
     "mainHeader",
     "notifications",
+    "nuxt.config",
     "qrCode",
     "useNotificationsOverviewStore",
     "useWindowSize",

frontend/assets/css/_breakpoints.scss

@@ -0,0 +1,5 @@
+$breakpoint-sm: 640px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1280px;
+$breakpoint-2xl: 1536px;

frontend/assets/css/main.scss

@@ -96,16 +96,3 @@ svg {
     }
   }
 }
-
-// see https://tailwindcss.com/docs/screen-readers
-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}

frontend/components/bc/BcButton.vue

@@ -39,7 +39,7 @@ const shouldAppearDisabled = computed(
 </template>
 
 <style lang="scss" scoped>
-.bc-button--secondary {
+button.bc-button--secondary {
   border-color: var(--button-secondary-border-color);
   background-color: var(--button-secondary-background-color);
   color: var(--button-secondary-color);
@@ -52,7 +52,7 @@ const shouldAppearDisabled = computed(
     border-color: var(--button-secondary-border-color);
   }
 }
-.bc-button--disabled {
+button.bc-button--disabled {
   &,
   &:hover,
   &:focus {

frontend/components/bc/BcButtonIcon.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 
 <template>
   <button class="bc-button-icon">
-    <span class="sr-only">{{ props.srText }}</span>
+    <BcScreenreaderOnly>{{ props.srText }}</BcScreenreaderOnly>
     <slot />
   </button>
 </template>

frontend/components/bc/BcContentFilter.vue

@@ -58,9 +58,9 @@ const handleClick = () => {
       :class="{ filter_visible: isFilterVisible }"
       @click="handleClick"
     >
-      <span class="sr-only">
+      <BcScreenreaderOnly>
         {{ !isFilterVisible ? $t('filter.open') : $t('filter.close') }}
-      </span>
+      </BcScreenreaderOnly>
       <FontAwesomeIcon :icon="faMagnifyingGlass" />
     </Button>
   </div>

frontend/components/bc/BcLinkImage.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { RouterLinkProps } from 'vue-router'
+
+defineProps<{
+  screenreaderText: string,
+  to: RouterLinkProps['to'],
+}>()
+</script>
+
+<template>
+  <NuxtLink :to>
+    <BcScreenreaderOnly>
+      {{ screenreaderText }}
+    </BcScreenreaderOnly>
+    <slot />
+  </NuxtLink>
+</template>
+
+<style scoped lang="scss"></style>

frontend/components/bc/BcListSection.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{ hasBorderTop?: boolean }>()
+</script>
+
+<template>
+  <div
+    class="bc-list-section"
+    :class="{ 'has-border-top': hasBorderTop }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+$gap: 15px;
+.bc-list-section {
+  display: grid;
+  padding-block: $gap;
+  grid-template-columns: 3fr auto 2fr;
+  gap: $gap;
+  align-items: center;
+}
+.has-border-top {
+  border-top: 1px solid var(--dark-grey);
+}
+</style>

frontend/components/bc/BcScreenreaderOnly.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{
+  tag?:
+    'div'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'span',
+}>()
+</script>
+
+<template>
+  <component :is="tag ?? 'span'" class="bc-screenreader-only">
+    <slot />
+  </component>
+</template>
+
+<style scoped lang="scss">
+// see https://tailwindcss.com/docs/screen-readers
+.bc-screenreader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>

frontend/components/bc/BcSlider.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const value = defineModel<number>({ required: true })
+defineProps<{
+  max?: number,
+  min?: number,
+  step?: number,
+}>()
+</script>
+
+<template>
+  <input
+    v-model.number="value"
+    :min
+    :max
+    :step
+    class="bc-slider"
+    type="range"
+    v-bind="$attrs"
+  >
+</template>
+
+<style scoped lang="scss">
+  $heightTrack: 0.25rem;
+  $backgroundColor: var(--primary-orange);
+  $backgroundColor--disabled: var(--grey);
+  $borderRadius: 1rem;
+  $border: 0.1px solid $backgroundColor;
+  $backgroundColorThumb: var(--light-grey);
+  $thumbSize: 1.25rem;
+
+  .bc-slider {
+    width: 100%;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline-style: solid;
+      outline-offset: 3px;
+      border-radius: 2px;
+    }
+
+    &::-webkit-slider-runnable-track {
+      background: $backgroundColor;
+      height: $heightTrack;
+      border-radius: $borderRadius;
+      border: $border;
+      display: inline-flex;
+    }
+     &[disabled]::-webkit-slider-runnable-track{
+      background: $backgroundColor--disabled;
+      border-color: $backgroundColor--disabled
+    }
+
+    &::-moz-range-track {
+      background: $backgroundColor;
+      height: $heightTrack;
+      border-radius: $borderRadius;
+    }
+    &[disabled]::-moz-range-track {
+      background: $backgroundColor--disabled;
+    }
+
+    $opticalCorrection: 1px;
+    &::-webkit-slider-thumb {
+      appearance: none;
+      background-color: $backgroundColorThumb;
+      width: $thumbSize;
+      height: $thumbSize;
+      border-radius: 50%;
+      border: 2px solid $backgroundColor;
+      margin-top: calc($heightTrack / 2 - $thumbSize / 2 - $opticalCorrection);
+    }
+    &[disabled]::-webkit-slider-thumb {
+      border-color: $backgroundColor--disabled;
+    }
+
+    &::-moz-range-thumb {
+      $thumbSize: 1rem;
+      appearance: none;
+      background-color: $backgroundColorThumb;
+      width: $thumbSize;
+      height: $thumbSize;
+      border-radius: 50%;
+      border: 2px solid $backgroundColor;
+    }
+    &[disabled]::-moz-range-thumb {
+      border-color: $backgroundColor--disabled;
+    }
+  }
+</style>

frontend/components/bc/BcText.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tag?: 'p' | 'span',
+    variant?: 'base' | 'lg',
+  }>(), {
+    tag: 'span',
+    variant: 'base',
+  },
+)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :class="{
+      'variant-lg': variant === 'lg',
+    }"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped lang="scss">
+@use '~/assets/css/breakpoints' as *;
+
+.variant-lg {
+  font-family: "Montserrat";
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.2;
+
+  @media (min-width: $breakpoint-sm) {
+    font-size: 1.5rem;
+  }
+}
+</style>

frontend/components/bc/BcTextNumber.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * Should prevent layout shift, e.g. when the value changes from 1 to 2 or 3 to 4 digits
+ *
+ * @example `10` should occuy the same space as ` 9`
+ */
+defineProps<{
+  minWidth: `${number}ch`,
+  prefix?: string,
+  suffix?: string,
+}>()
+</script>
+
+<template>
+  <span class="bc-text-number">
+    <span v-if="prefix">
+      {{ prefix }}
+    </span>
+    <span class="bc-text-number__value">
+      <slot />
+    </span>
+    <span v-if="suffix">
+      {{ suffix }}
+    </span>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.bc-text-number {
+  white-space: nowrap;
+}
+.bc-text-number__value {
+  display: inline-block;
+  min-width: v-bind(minWidth);
+  text-align: end;
+}
+</style>

frontend/components/bc/premium/BcPremiumGem.vue

@@ -1,16 +1,28 @@
 <script lang="ts" setup>
 import { faGem } from '@fortawesome/pro-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+defineProps<{
+  screenreaderText?: string,
+  toolTipText?: string,
+  tooltipWidth?: `${number}%` | `${number}px`,
+}>()
 </script>
 
 <template>
-  <BcTooltip :text="$t('premium.subscribe')">
+  <BcTooltip
+    :tooltip-width
+    :text="toolTipText ?? $t('premium.subscribe')"
+  >
     <BcLink
-      :to="`/pricing`"
+      to="/pricing"
       target="_blank"
       class="link"
     >
       <div>
+        <LazyBcScreenreaderOnly v-if="screenreaderText">
+          {{ screenreaderText }}
+        </LazyBcScreenreaderOnly>
         <FontAwesomeIcon
           :icon="faGem"
           class="gem"