bfg-common 1.2.67 → 1.2.68

package/components/common/feedback/Buttons.vue

@@ -1,227 +1,232 @@
-<template>
-  <div class="buttons">
-    <div class="buttons-info">
-      <div class="icon-wrap">
-        <atoms-the-icon
-          id="showHelpInfo"
-          fill="#0072a3"
-          width="24px"
-          height="24px"
-          name="info-circle"
-          @click="isShowHelpInfo = !isShowHelpInfo"
-        />
-      </div>
-      <span class="info-text">{{ localization.helpUsImprove }}</span>
-    </div>
-    <atoms-tooltip-signpost
-      v-if="isShowHelpInfo"
-      test-id="feedback-button"
-      elem-id="showHelpInfo"
-      class="help-info"
-      @hide="isShowHelpInfo = false"
-    >
-      <h3>{{ localization.feedbackHelp }}</h3>
-      <p>
-        {{ localization.anyFeedbackYouProvideMay }}
-      </p>
-    </atoms-tooltip-signpost>
-    <div class="buttons-body">
-      <span class="text">{{ localization.selectAType }}</span>
-      <div class="button-wrap">
-        <button
-          v-for="item in props.items"
-          id="feedback-button"
-          :key="item.key"
-          :class="[
-            'btn btn-outline feedback-button',
-            { active: item.key === props.select },
-          ]"
-          @click="onSelect(item.key)"
-        >
-          <atoms-the-icon2
-            class="feedback-icon btn-icon has-solid clr-i-outline clr-i-outline-path-2"
-            :name="item.iconName"
-          />
-          <span>{{ item.text }}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_FeedbackButtonsItem } from './models/interfaces'
-import { UI_I_Localization } from '~/models/interfaces'
-
-const props = defineProps<{
-  select: number | null
-  items: UI_I_FeedbackButtonsItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'update:select', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onSelect = (value: number): void => {
-  emits('update:select', value)
-}
-const isShowHelpInfo = ref(false)
-</script>
-
-<style scoped lang="scss">
-.buttons {
-  .buttons-info {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 20px;
-
-    :deep(.icon-info-standart) {
-      width: 20px !important;
-      min-width: 20px !important;
-      height: 20px;
-      min-height: 20px;
-    }
-    .icon-wrap {
-      cursor: pointer;
-      height: 24px;
-      width: 24px;
-      .info-icon {
-        height: 24px;
-      }
-    }
-
-    .info-text {
-      margin-left: 5px;
-    }
-  }
-  .buttons-body {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin-bottom: 20px;
-    .text {
-      padding-top: 5px;
-      min-width: 140px;
-      margin-right: 10px;
-    }
-    .email {
-      width: 100%;
-    }
-    .button-wrap {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      font-size: 13px;
-      font-weight: 400;
-      letter-spacing: normal;
-
-      .btn {
-        transform: translate(0, 3px);
-        text-transform: capitalize;
-        padding: 5px;
-        .text {
-          color: var(--icon-fill-hover-color);
-        }
-
-        &.btn-outline.feedback-button {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-        &.btn-outline.feedback-button .feedback-icon {
-          width: 16px;
-          height: 16px;
-          margin-right: 3px;
-        }
-
-        color: var(--icon-fill-color);
-        border: 1px solid var(--btn-border-color);
-        border-bottom: 5px solid var(--btn-border-color);
-        .has-solid.clr-i-outline.clr-i-outline-path-2 {
-          fill: var(--icon-fill-color);
-        }
-      }
-    }
-    .button-wrap {
-      .btn.btn-outline.feedback-button:hover {
-        transform: translate(0px, 0px);
-        color: var(--icon-fill-hover-color);
-        border: 1px solid var(--btn-border-hover-color);
-        border-bottom: 5px solid var(--btn-border-hover-color);
-        .has-solid.clr-i-outline.clr-i-outline-path-2 {
-          fill: var(--icon-fill-hover-color);
-        }
-      }
-      .btn.btn-outline.feedback-button.active {
-        border: 1px solid var(--btn-border-hover-color);
-        border-bottom: 5px solid var(--btn-border-hover-color);
-      }
-    }
-
-    &__last {
-      margin-top: -20px;
-    }
-  }
-}
-.tooltip {
-  position: relative;
-  display: inline-block;
-
-  & .tooltiptext {
-    text-align: center;
-    padding: 5px 2px;
-    border-radius: 2px;
-    border: 1px solid var(--global-font-color);
-    color: var(--global-font-color);
-    background-color: var(--global-bg-color);
-    position: absolute;
-    z-index: 1;
-  }
-}
-.help-info {
-  display: block;
-  text-align: left;
-  width: 360px;
-  color: var(--modal-first-title);
-
-  h3 {
-    font-size: 22px;
-    color: inherit;
-    margin-top: 0px;
-    text-transform: capitalize;
-  }
-
-  p {
-    margin-top: 24px;
-    text-transform: none;
-    white-space: break-spaces;
-  }
-  a {
-    color: var(--a-link-color);
-    text-decoration: none;
-  }
-}
-</style>
-<style>
-:root {
-  --modal-secondary-title: #565656;
-  --modal-first-title: #565656;
-  --icon-fill-color: #1d1c1c;
-  --icon-fill-hover-color: rgb(0, 121, 184);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: #dedede;
-  --a-link-color: #0072a3;
-}
-:root.dark-theme {
-  --modal-secondary-title: #e9ecef;
-  --modal-first-title: #adbbc4;
-  --icon-fill-color: rgb(233, 236, 239);
-  --icon-fill-hover-color: rgb(73, 175, 217);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: rgb(14, 22, 27);
-  --a-link-color: #4aaed9;
-}
-</style>
+<template>
+  <div class="buttons">
+    <div class="buttons-info">
+      <div class="icon-wrap">
+        <atoms-the-icon
+          id="showHelpInfo"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowHelpInfo = !isShowHelpInfo"
+        />
+      </div>
+      <span class="info-text">{{ localization.helpUsImprove }}</span>
+    </div>
+    <atoms-tooltip-signpost
+      v-if="isShowHelpInfo"
+      test-id="feedback-button"
+      elem-id="showHelpInfo"
+      class="help-info"
+      @hide="isShowHelpInfo = false"
+    >
+      <h3>{{ localization.feedbackHelp }}</h3>
+      <p>
+        {{ localization.anyFeedbackYouProvideMay }}
+        <a id="privacy-notice-link" target="_blank" href="#">
+          {{ localization.procurator }} Privacy Notice.
+        </a>
+
+        {{ localization.youAreResponsibleForObfuscatingOrRemoving }}
+      </p>
+    </atoms-tooltip-signpost>
+    <div class="buttons-body">
+      <span class="text">{{ localization.selectAType }}</span>
+      <div class="button-wrap">
+        <button
+          v-for="item in props.items"
+          id="feedback-button"
+          :key="item.key"
+          :class="[
+            'btn btn-outline feedback-button',
+            { active: item.key === props.select },
+          ]"
+          @click="onSelect(item.key)"
+        >
+          <atoms-the-icon2
+            class="feedback-icon btn-icon has-solid clr-i-outline clr-i-outline-path-2"
+            :name="item.iconName"
+          />
+          <span>{{ item.text }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_FeedbackButtonsItem } from './models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  select: number | null
+  items: UI_I_FeedbackButtonsItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:select', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelect = (value: number): void => {
+  emits('update:select', value)
+}
+const isShowHelpInfo = ref(false)
+</script>
+
+<style scoped lang="scss">
+.buttons {
+  .buttons-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+
+    :deep(.icon-info-standart) {
+      width: 20px !important;
+      min-width: 20px !important;
+      height: 20px;
+      min-height: 20px;
+    }
+    .icon-wrap {
+      cursor: pointer;
+      height: 24px;
+      width: 24px;
+      .info-icon {
+        height: 24px;
+      }
+    }
+
+    .info-text {
+      margin-left: 5px;
+    }
+  }
+  .buttons-body {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    .text {
+      padding-top: 5px;
+      min-width: 140px;
+      margin-right: 10px;
+    }
+    .email {
+      width: 100%;
+    }
+    .button-wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: 13px;
+      font-weight: 400;
+      letter-spacing: normal;
+
+      .btn {
+        transform: translate(0, 3px);
+        text-transform: capitalize;
+        padding: 5px;
+        .text {
+          color: var(--icon-fill-hover-color);
+        }
+
+        &.btn-outline.feedback-button {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+        &.btn-outline.feedback-button .feedback-icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 3px;
+        }
+
+        color: var(--icon-fill-color);
+        border: 1px solid var(--btn-border-color);
+        border-bottom: 5px solid var(--btn-border-color);
+        .has-solid.clr-i-outline.clr-i-outline-path-2 {
+          fill: var(--icon-fill-color);
+        }
+      }
+    }
+    .button-wrap {
+      .btn.btn-outline.feedback-button:hover {
+        transform: translate(0px, 0px);
+        color: var(--icon-fill-hover-color);
+        border: 1px solid var(--btn-border-hover-color);
+        border-bottom: 5px solid var(--btn-border-hover-color);
+        .has-solid.clr-i-outline.clr-i-outline-path-2 {
+          fill: var(--icon-fill-hover-color);
+        }
+      }
+      .btn.btn-outline.feedback-button.active {
+        border: 1px solid var(--btn-border-hover-color);
+        border-bottom: 5px solid var(--btn-border-hover-color);
+      }
+    }
+
+    &__last {
+      margin-top: -20px;
+    }
+  }
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  & .tooltiptext {
+    text-align: center;
+    padding: 5px 2px;
+    border-radius: 2px;
+    border: 1px solid var(--global-font-color);
+    color: var(--global-font-color);
+    background-color: var(--global-bg-color);
+    position: absolute;
+    z-index: 1;
+  }
+}
+.help-info {
+  display: block;
+  text-align: left;
+  width: 360px;
+  color: var(--modal-first-title);
+
+  h3 {
+    font-size: 22px;
+    color: inherit;
+    margin-top: 0px;
+    text-transform: capitalize;
+  }
+
+  p {
+    margin-top: 24px;
+    text-transform: none;
+    white-space: break-spaces;
+  }
+  a {
+    color: var(--a-link-color);
+    text-decoration: none;
+  }
+}
+</style>
+<style>
+:root {
+  --modal-secondary-title: #565656;
+  --modal-first-title: #565656;
+  --icon-fill-color: #1d1c1c;
+  --icon-fill-hover-color: rgb(0, 121, 184);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: #dedede;
+  --a-link-color: #0072a3;
+}
+:root.dark-theme {
+  --modal-secondary-title: #e9ecef;
+  --modal-first-title: #adbbc4;
+  --icon-fill-color: rgb(233, 236, 239);
+  --icon-fill-hover-color: rgb(73, 175, 217);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: rgb(14, 22, 27);
+  --a-link-color: #4aaed9;
+}
+</style>