feat: Remove ionicons v2 dependency on widget (#3402)

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -25,12 +25,12 @@
         @keyup.enter="onSubmit"
       />
       <button
-        class="button"
+        class="button small"
         :disabled="isButtonDisabled"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
         <spinner v-if="isUpdating && feedback" />
-        <i v-else class="ion-ios-arrow-forward" />
+        <fluent-icon v-else icon="chevron-right" />
       </button>
     </form>
   </div>
@@ -40,10 +40,12 @@
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner';
 import { CSAT_RATINGS } from 'shared/constants/messages';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
   components: {
     Spinner,
+    FluentIcon,
   },
   props: {
     messageContentAttributes: {

app/javascript/shared/components/FluentIcon/Index.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path :d="icons[`${icon}-${type}`]" fill="currentColor" />
+  </svg>
+</template>
+<script>
+import icons from './icons.json';
+
+export default {
+  name: 'FluentIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: String,
+      default: '20px',
+    },
+    type: {
+      type: String,
+      default: 'outline',
+    },
+  },
+  data() {
+    return { icons };
+  },
+};
+</script>

app/javascript/shared/components/FluentIcon/icons.json

@@ -0,0 +1,11 @@
+{
+  "arrow-right-outline": "M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z",
+  "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
+  "chevron-right-outline": "M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z",
+  "dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
+  "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
+  "emoji-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
+  "link-outline": "M9.25 7a.75.75 0 0 1 .11 1.492l-.11.008H7a3.5 3.5 0 0 0-.206 6.994L7 15.5h2.25a.75.75 0 0 1 .11 1.492L9.25 17H7a5 5 0 0 1-.25-9.994L7 7h2.25ZM17 7a5 5 0 0 1 .25 9.994L17 17h-2.25a.75.75 0 0 1-.11-1.492l.11-.008H17a3.5 3.5 0 0 0 .206-6.994L17 8.5h-2.25a.75.75 0 0 1-.11-1.492L14.75 7H17ZM7 11.25h10a.75.75 0 0 1 .102 1.493L17 12.75H7a.75.75 0 0 1-.102-1.493L7 11.25h10H7Z",
+  "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
+  "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z"
+}

app/javascript/survey/assets/scss/woot.scss

@@ -7,7 +7,6 @@
 @import 'widget/assets/scss/mixins';
 @import 'widget/assets/scss/forms';
 @import 'shared/assets/fonts/widget_fonts';
-@import '~shared/assets/stylesheets/ionicons';
 
 html,
 body {

app/javascript/widget/assets/scss/_utilities.scss

@@ -0,0 +1,3 @@
+.icon-button {
+  @include button-size;
+}

app/javascript/widget/assets/scss/_variables.scss

@@ -84,7 +84,6 @@ Roboto,
 Tahoma,
 Arial,
 sans-serif;
-$ionicons-font-path: '~ionicons/fonts';
 
 // Break points
 $break-point-medium: 667px;

app/javascript/widget/assets/scss/woot.scss

@@ -6,8 +6,8 @@
 @import 'buttons';
 @import 'mixins';
 @import 'forms';
+@import 'utilities';
 @import 'shared/assets/fonts/widget_fonts';
-@import '~shared/assets/stylesheets/ionicons';
 @import '~spinkit/scss/spinners/7-three-bounce';
 
 html,

app/javascript/widget/components/ChatAttachment.vue

@@ -4,10 +4,10 @@
     accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
     @input-file="onFileUpload"
   >
-    <span class="attachment-button">
+    <button class="icon-button flex items-center justify-center">
-      <i v-if="!isUploading.image" class="ion-android-attach" />
+      <fluent-icon v-if="!isUploading.image" icon="attach" />
       <spinner v-if="isUploading" size="small" />
-    </span>
+    </button>
   </file-upload>
 </template>
 
@@ -17,9 +17,9 @@ import Spinner from 'shared/components/Spinner.vue';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 export default {
-  components: { FileUpload, Spinner },
+  components: { FluentIcon, FileUpload, Spinner },
   props: {
     onAttach: {
       type: Function,
@@ -66,28 +66,6 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
-
-.attachment-button {
-  @include button-size;
-
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  position: relative;
-  width: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  i {
-    font-size: $font-size-large;
-    color: $color-gray;
-  }
-}
-</style>
 <style lang="scss">
 .file-uploads .attachment-button + label {
   cursor: pointer;

app/javascript/widget/components/ChatInputWrap.vue

@@ -23,13 +23,13 @@
       />
       <button
         v-if="hasEmojiPickerEnabled"
-        class="emoji-toggle"
+        class="icon-button flex justify-center items-center"
         aria-label="Emoji picker"
-        @click="toggleEmojiPicker()"
+        @click="toggleEmojiPicker"
       >
-        <i
+        <fluent-icon
-          class="icon ion-happy-outline"
+          icon="emoji"
-          :class="{ active: showEmojiPicker }"
+          :class="{ 'text-woot-500': showEmojiPicker }"
         />
       </button>
       <emoji-input
@@ -50,11 +50,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
-import ChatSendButton from 'widget/components/ChatSendButton.vue';
+
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
-import ResizableTextArea from 'shared/components/ResizableTextArea';
+import ChatSendButton from 'widget/components/ChatSendButton.vue';
-import EmojiInput from 'shared/components/emoji/EmojiInput';
 import configMixin from '../mixins/configMixin';
+import EmojiInput from 'shared/components/emoji/EmojiInput';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
 
 export default {
   name: 'ChatInputWrap',
@@ -62,6 +64,7 @@ export default {
     ChatAttachmentButton,
     ChatSendButton,
     EmojiInput,
+    FluentIcon,
     ResizableTextArea,
   },
   mixins: [clickaway, configMixin],
@@ -178,14 +181,6 @@ export default {
   }
 }
 
-.emoji-toggle {
-  @include button-size;
-
-  font-size: $font-size-large;
-  color: $color-gray;
-  cursor: pointer;
-}
-
 .emoji-dialog {
   right: $space-one;
 }

app/javascript/widget/components/ChatSendButton.vue

@@ -2,23 +2,21 @@
   <button
     type="submit"
     :disabled="disabled"
-    class="send-button ml-1"
+    class="icon-button flex items-center justify-center ml-1"
     @click="onClick"
   >
-    <i
+    <fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
-      v-if="!loading"
-      class="ion-android-send icon-holder"
-      :style="`color: ${color}`"
-    />
     <spinner v-else size="small" />
   </button>
 </template>
 
 <script>
 import Spinner from 'shared/components/Spinner.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
   components: {
+    FluentIcon,
     Spinner,
   },
   props: {
@@ -41,24 +39,3 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.send-button {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  position: relative;
-  padding-right: $space-smaller;
-
-  .icon-holder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: $font-size-big;
-    font-weight: $font-weight-medium;
-  }
-}
-</style>

app/javascript/widget/components/FileBubble.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="file message-text__wrap">
+  <div class="file flex flex-row items-center p-3 cursor-pointer">
     <div class="icon-wrap">
-      <i class="ion-document-text"></i>
+      <fluent-icon icon="document" size="28" />
     </div>
     <div class="meta">
       <div class="title">
         {{ title }}
       </div>
-      <div class="link-wrap">
+      <div class="link-wrap mb-1">
         <a
           class="download"
           rel="noreferrer noopener nofollow"
@@ -22,7 +22,12 @@
 </template>
 
 <script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
 export default {
+  components: {
+    FluentIcon,
+  },
   props: {
     url: {
       type: String,
@@ -61,11 +66,6 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 
 .file {
-  display: flex;
-  flex-direction: row;
-  padding: $space-slab;
-  cursor: pointer;
-
   .icon-wrap {
     font-size: $font-size-mega;
     color: $color-woot;

app/javascript/widget/components/HeaderActions.vue

@@ -5,24 +5,27 @@
       class="button transparent compact new-window--button "
       @click="popoutWindow"
     >
-      <span class="ion-android-open"></span>
+      <fluent-icon icon="open" size="22" class="text-black-900" />
     </button>
     <button
       class="button transparent compact close-button"
       :class="{
         'rn-close-button': isRNWebView,
       }"
+      @click="closeWindow"
     >
-      <span class="ion-android-close" @click="closeWindow"></span>
+      <fluent-icon icon="dismiss" size="24" class="text-black-900" />
     </button>
   </div>
 </template>
 <script>
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { buildPopoutURL } from '../helpers/urlParamsHelper';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
   name: 'HeaderActions',
+  components: { FluentIcon },
   props: {
     showPopoutButton: {
       type: Boolean,
@@ -85,10 +88,6 @@ export default {
   span {
     color: $color-heading;
     font-size: $font-size-large;
-
-    &.ion-android-close {
-      font-size: $font-size-big;
-    }
   }
 
   .close-button {

app/javascript/widget/components/template/Article.vue

@@ -2,10 +2,13 @@
   <div v-if="!!items.length" class="chat-bubble agent">
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
-        <span class="title">
+        <span class="title flex items-center text-black-900 font-medium">
-          <i class="ion-link icon"></i>{{ item.title }}
+          <fluent-icon icon="link" class="mr-1" />
+          <span>{{ item.title }}</span>
+        </span>
+        <span class="description">
+          {{ truncateMessage(item.description) }}
         </span>
-        <span class="description">{{ truncateMessage(item.description) }}</span>
       </a>
     </div>
   </div>
@@ -13,8 +16,12 @@
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
+  components: {
+    FluentIcon,
+  },
   mixins: [messageFormatterMixin],
   props: {
     items: {
@@ -38,18 +45,6 @@ export default {
     text-decoration: none;
   }
 
-  .title {
-    color: $color-woot;
-    display: block;
-    font-weight: $font-weight-medium;
-
-    .icon {
-      color: $color-body;
-      font-size: $font-size-medium;
-      padding-right: $space-small;
-    }
-  }
-
   .description {
     display: block;
     margin-top: $space-smaller;

app/javascript/widget/components/template/EmailInput.vue

@@ -3,7 +3,7 @@
     <form
       v-if="!hasSubmitted"
       class="email-input-group"
-      @submit.prevent="onSubmit()"
+      @submit.prevent="onSubmit"
     >
       <input
         v-model.trim="email"
@@ -14,12 +14,12 @@
         @keyup.enter="onSubmit"
       />
       <button
-        class="button"
+        class="button small"
         :disabled="$v.email.$invalid"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
-        <i v-if="!isUpdating" class="ion-ios-arrow-forward" />
+        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
-        <spinner v-else />
+        <spinner v-else class="mx-2" />
       </button>
     </form>
   </div>
@@ -27,11 +27,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner';
 import { required, email } from 'vuelidate/lib/validators';
 
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import Spinner from 'shared/components/Spinner';
+
 export default {
   components: {
+    FluentIcon,
     Spinner,
   },
   props: {

app/javascript/widget/views/Unread.vue

@@ -6,8 +6,10 @@
         class="button small close-unread-button"
         @click="closeFullView"
       >
-        <i class="ion-android-close" />
+        <div class="flex items-center">
+          <fluent-icon class="mr-1" icon="dismiss" size="12" />
           {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        </div>
       </button>
     </div>
     <div class="unread-messages">
@@ -29,8 +31,10 @@
         class="button clear-button"
         @click="openFullView"
       >
-        <i class="ion-arrow-right-c" />
+        <div class="flex items-center">
+          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
           {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
+        </div>
       </button>
     </div>
   </div>
@@ -38,14 +42,16 @@
 
 <script>
 import { IFrameHelper } from 'widget/helpers/utils';
-import UnreadMessage from 'widget/components/UnreadMessage.vue';
-
-import configMixin from '../mixins/configMixin';
 import { mapGetters } from 'vuex';
+import configMixin from '../mixins/configMixin';
+
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import UnreadMessage from 'widget/components/UnreadMessage.vue';
 
 export default {
   name: 'Unread',
   components: {
+    FluentIcon,
     UnreadMessage,
   },
   mixins: [configMixin],