fix(NOJIRA-123): Update embed icons (#686)

* fix(NOJIRA-123): Update embed icons

* chore(NOJIRA-123): Update github actions checkout version

* chore(NOJIRA-123): Update github actions cache version

* chore(NOJIRA-123): Fix close icon color on mobile view

Author: sh-waqar

.github/workflows/codeql-analysis.yml

@@ -35,7 +35,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/pull-request.yml

@@ -16,15 +16,15 @@ jobs:
     name: build-lint-test - node ${{ matrix.node_version }}
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node_version }}
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |
@@ -58,15 +58,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |
@@ -87,16 +87,15 @@ jobs:
     if: github.event.pull_request.head.repo.full_name == github.repository
     steps:
       - name: Check out Git repository
-        uses:
-          actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |

.github/workflows/release.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           # Use custom token from repo secrets to allow semantic release to push commit:
@@ -24,7 +24,7 @@ jobs:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |

.github/workflows/visual.yml

@@ -13,15 +13,15 @@ jobs:
     if: ${{ !github.event.pull_request || github.event.pull_request.head.repo.full_name == github.repository }}
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 20
 
       - name: Get yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache
         with:
           path: |

packages/embed/src/css/popover.scss

@@ -120,20 +120,26 @@
     }
 
     &-close {
-      color: rgba(0, 0, 0, 0.2);
       cursor: pointer;
       margin-left: 4px;
       display: inline-block;
-      width: 20px;
-      height: 20px;
-      font-size: 18px;
       text-align: center;
       position: absolute;
-      top: 8px;
+      top: 12px;
       right: 6px;
 
-      &:hover {
-        color: rgba(0, 0, 0, 0.3);
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      svg path {
+        fill: rgba(0, 0, 0, 0.2);
+        transition: fill 150ms ease-in-out;
+      }
+
+      &:hover svg path {
+        fill: rgba(0, 0, 0, 0.3);
       }
     }
 

packages/embed/src/factories/create-popover/create-popover.ts

@@ -11,6 +11,8 @@ import {
   invokeWithoutDefault,
   addAttributesToElement,
   handlePreventReopenOnClose,
+  closeIconSvg,
+  triggerIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { ButtonProps, EmbedPopup } from '../../base'
@@ -38,7 +40,7 @@ const buildPopover = (width?: number | string, height?: number | string) => {
 const buildCloseIcon = (element = 'span', className = 'tf-v1-popover-button-icon') => {
   const icon = document.createElement(element)
   icon.className = `${className} tf-v1-close-icon`
-  icon.innerHTML = '×'
+  icon.innerHTML = closeIconSvg
   icon.dataset.testid = className
   return icon
 }
@@ -65,13 +67,7 @@ const buildIcon = (customIcon?: string, color?: string) => {
   const triggerIcon = document.createElement('div')
   triggerIcon.className = 'tf-v1-popover-button-icon'
 
-  const svgIcon = `<svg class="default" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M21 0H0V9L10.5743 24V16.5H21C22.6567 16.5 24 15.1567 24 13.5V3C24 1.34325 22.6567 0 21 0ZM7.5
-    9.75C6.672 9.75 6 9.07875 6 8.25C6 7.42125 6.672 6.75 7.5 6.75C8.328 6.75 9 7.42125 9 8.25C9 9.07875 8.328 9.75
-    7.5 9.75ZM12.75 9.75C11.922 9.75 11.25 9.07875 11.25 8.25C11.25 7.42125 11.922 6.75 12.75 6.75C13.578 6.75 14.25
-    7.42125 14.25 8.25C14.25 9.07875 13.578 9.75 12.75 9.75ZM18 9.75C17.172 9.75 16.5 9.07875 16.5 8.25C16.5 7.42125
-    17.172 6.75 18 6.75C18.828 6.75 19.5 7.42125 19.5 8.25C19.5 9.07875 18.828 9.75 18 9.75Z" fill="${fillColor}"></path>
-  </svg>`
+  const svgIcon = triggerIconSvg(fillColor)
 
   const isUrlIcon = customIcon?.startsWith('http')
   triggerIcon.innerHTML = isUrlIcon
@@ -97,7 +93,7 @@ const buildTooltip = (message: string, hide: () => void) => {
   const icon = document.createElement('span')
   icon.className = 'tf-v1-popover-tooltip-close'
   icon.dataset.testid = 'tf-v1-popover-tooltip-close'
-  icon.innerHTML = '&times;'
+  icon.innerHTML = closeIconSvg
   icon.onclick = hide
 
   const textContainer = document.createElement('div')

packages/embed/src/factories/create-popup/create-popup.ts

@@ -9,6 +9,7 @@ import {
   addCustomKeyboardListener,
   invokeWithoutDefault,
   handlePreventReopenOnClose,
+  closeIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { POPUP_SIZE } from '../../constants'
@@ -51,7 +52,7 @@ const buildWrapper = (width?: number | string, height?: number | string, size?:
 const buildCloseButton = (close: () => void) => {
   const closeButton = document.createElement('button')
   closeButton.className = 'tf-v1-close tf-v1-close-icon'
-  closeButton.innerHTML = '×'
+  closeButton.innerHTML = closeIconSvg
   closeButton.ariaLabel = 'Close'
   closeButton.onclick = invokeWithoutDefault(close)
   return closeButton

packages/embed/src/factories/create-sidetab/create-sidetab.ts

@@ -12,6 +12,8 @@ import {
   addAttributesToElement,
   getValueWithUnits,
   handlePreventReopenOnClose,
+  closeIconSvg,
+  triggerIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { ButtonProps, EmbedPopup } from '../../base'
@@ -125,9 +127,7 @@ const buildIcon = (customIcon?: string, backgroundColor?: string, textColor?: st
     triggerIcon.style.height = getValueWithUnits(size)
   }
 
-  const svgIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M21 0H0V9L10.5743 24V16.5H21C22.6567 16.5 24 15.1567 24 13.5V3C24 1.34325 22.6567 0 21 0ZM7.5 9.75C6.672 9.75 6 9.07875 6 8.25C6 7.42125 6.672 6.75 7.5 6.75C8.328 6.75 9 7.42125 9 8.25C9 9.07875 8.328 9.75 7.5 9.75ZM12.75 9.75C11.922 9.75 11.25 9.07875 11.25 8.25C11.25 7.42125 11.922 6.75 12.75 6.75C13.578 6.75 14.25 7.42125 14.25 8.25C14.25 9.07875 13.578 9.75 12.75 9.75ZM18 9.75C17.172 9.75 16.5 9.07875 16.5 8.25C16.5 7.42125 17.172 6.75 18 6.75C18.828 6.75 19.5 7.42125 19.5 8.25C19.5 9.07875 18.828 9.75 18 9.75Z" fill="${fillColor}"></path>
-  </svg>`
+  const svgIcon = triggerIconSvg(fillColor)
 
   const isUrlIcon = customIcon?.startsWith('http')
   triggerIcon.innerHTML = isUrlIcon
@@ -141,7 +141,7 @@ const buildIcon = (customIcon?: string, backgroundColor?: string, textColor?: st
 const buildCloseIcon = (element = 'div', className = 'tf-v1-sidetab-button-icon') => {
   const closeButton = document.createElement(element)
   closeButton.className = `${className} tf-v1-close-icon`
-  closeButton.innerHTML = '&times;'
+  closeButton.innerHTML = closeIconSvg
   closeButton.dataset.testid = className
   return closeButton
 }

packages/embed/src/factories/create-slider/create-slider.ts

@@ -10,6 +10,7 @@ import {
   isInPage,
   invokeWithoutDefault,
   handlePreventReopenOnClose,
+  closeIconSvg,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
 import { SLIDER_POSITION, SLIDER_WIDTH } from '../../constants'
@@ -45,7 +46,7 @@ const buildWrapper = (position: Position, width: number | string) => {
 const buildCloseButton = (close: () => void) => {
   const closeButton = document.createElement('button')
   closeButton.className = 'tf-v1-close tf-v1-close-icon'
-  closeButton.innerHTML = '×'
+  closeButton.innerHTML = closeIconSvg
   closeButton.ariaLabel = 'Close'
   closeButton.onclick = invokeWithoutDefault(close)
   return closeButton

packages/embed/src/utils/close-icon-svg.ts

@@ -0,0 +1,3 @@
+export const closeIconSvg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.293 4.293a1 1 0 0 1 1.414 0L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L10.586 12 4.293 5.707a1 1 0 0 1 0-1.414Z" fill="currentColor"/>
+</svg>`

packages/embed/src/utils/index.ts

@@ -18,3 +18,5 @@ export * from './change-color-opacity'
 export * from './hubspot'
 export * from './invoke-without-default'
 export * from './add-attributes-to-element'
+export * from './close-icon-svg'
+export * from './trigger-icon-svg'

packages/embed/src/utils/trigger-icon-svg.ts

@@ -0,0 +1,16 @@
+export const triggerIconSvg = (
+  fillColor: string
+) => `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.002 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.697l-5.748 3.832A1 1 0 0 1 6.002 22v-3h-2a2 2 0 0 1-2-2V5Zm18 0h-16v12h3a1 1 0 0 1 1 1v2.131l4.445-2.963a1 1 0 0 1 .555-.168h7V5Z"
+      fill=${fillColor}
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 12.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z"
+      fill=${fillColor}
+    />
+  </svg>`