Merge pull request #89 from Azure/users/v-aryapparov/add-feedback-link

add feedback link
Azure · Sep 15, 2023 · 36c8ef3 · 36c8ef3
2 parents 6faa573 + 97277b5
commit 36c8ef3
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 36 deletions.
diff --git a/src/common/translations/en.js b/src/common/translations/en.js
@@ -64,6 +64,8 @@ const en = {
     'exterior': 'Exterior',
     'facility.levels': 'Facility Levels',
     'facility.name': 'Facility name',
+    'feedback': 'Feedback',
+    'feedback.link': 'Feedback link',
     'geography': 'Geography',
     'file.name': 'File name',
     'geography.europe': 'Europe',

diff --git a/src/components/top-bar/__snapshots__/top-bar.test.js.snap b/src/components/top-bar/__snapshots__/top-bar.test.js.snap
@@ -51,12 +51,25 @@ Object {
 }
 
 .emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  margin-right: 1.25rem;
+}
+
+.emotion-6 {
   color: white;
-  margin: 0 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.emotion-6:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 <body>
     <div>
       <div
@@ -79,23 +92,28 @@ Object {
             Azure Maps Creator
           </span>
         </div>
-        <a
-          aria-label="docs.link"
+        <div
           class="emotion-5"
-          href="https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2"
-          rel="noreferrer"
-          target="_blank"
         >
-          docs
-           
-          <i
-            aria-hidden="true"
-            class="root-106"
-            data-icon-name="NavigateExternalInline"
+          <a
+            aria-label="docs.link"
+            class="emotion-6"
+            href="https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2"
+            rel="noreferrer"
+            target="_blank"
           >
-            
-          </i>
-        </a>
+            docs
+          </a>
+          <a
+            aria-label="feedback.link"
+            class="emotion-6"
+            href="https://feedback.azure.com/d365community/post/fc834083-0925-ec11-b6e6-000d3a4f09d0?page=1&sort=newest"
+            rel="noreferrer"
+            target="_blank"
+          >
+            feedback
+          </a>
+        </div>
       </div>
     </div>
   </body>,
@@ -147,12 +165,25 @@ Object {
 }
 
 .emotion-5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 1rem;
+  margin-right: 1.25rem;
+}
+
+.emotion-6 {
   color: white;
-  margin: 0 1.25rem;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.emotion-6:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 <div>
     <div
       class="emotion-0"
@@ -174,23 +205,28 @@ Object {
           Azure Maps Creator
         </span>
       </div>
-      <a
-        aria-label="docs.link"
+      <div
         class="emotion-5"
-        href="https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2"
-        rel="noreferrer"
-        target="_blank"
       >
-        docs
-         
-        <i
-          aria-hidden="true"
-          class="root-106"
-          data-icon-name="NavigateExternalInline"
+        <a
+          aria-label="docs.link"
+          class="emotion-6"
+          href="https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2"
+          rel="noreferrer"
+          target="_blank"
+        >
+          docs
+        </a>
+        <a
+          aria-label="feedback.link"
+          class="emotion-6"
+          href="https://feedback.azure.com/d365community/post/fc834083-0925-ec11-b6e6-000d3a4f09d0?page=1&sort=newest"
+          rel="noreferrer"
+          target="_blank"
         >
-          
-        </i>
-      </a>
+          feedback
+        </a>
+      </div>
     </div>
   </div>,
   "debug": [Function],

diff --git a/src/components/top-bar/top-bar.js b/src/components/top-bar/top-bar.js
@@ -1,16 +1,17 @@
 import { useTranslation } from 'react-i18next';
-import { Icon } from '@fluentui/react/lib/Icon';
 
 import {
   azMapsCreatorTextStyle,
   barStyle,
   docLink,
+  linksContainer,
   logoContainer,
   msftAzureTextStyle,
   splitterStyle,
 } from './top-bar.style';
 
 const docsLink = 'https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2';
+const feedbackLink = 'https://feedback.azure.com/d365community/post/fc834083-0925-ec11-b6e6-000d3a4f09d0?page=1&sort=newest';
 
 const TopBar = () => {
   const { t } = useTranslation();
@@ -22,10 +23,14 @@ const TopBar = () => {
         <span className={splitterStyle}/>
         <span className={azMapsCreatorTextStyle}>Azure Maps Creator</span>
       </div>
-      <a className={docLink} href={docsLink} target='_blank' rel='noreferrer' aria-label={t('docs.link')}>
-        {t('docs')}&nbsp;
-        <Icon iconName='NavigateExternalInline' />
-      </a>
+      <div className={linksContainer}>
+        <a className={docLink} href={docsLink} target='_blank' rel='noreferrer' aria-label={t('docs.link')}>
+          {t('docs')}
+        </a>
+        <a className={docLink} href={feedbackLink} target='_blank' rel='noreferrer' aria-label={t('feedback.link')}>
+          {t('feedback')}
+        </a>
+      </div>
     </div>
   );
 };

diff --git a/src/components/top-bar/top-bar.style.js b/src/components/top-bar/top-bar.style.js
@@ -36,6 +36,14 @@ export const logoContainer = css`
 
 export const docLink = css`
   color: white;
-  margin: 0 1.25rem;
   text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const linksContainer = css`
+  display: flex;
+  gap: 1rem;
+  margin-right: 1.25rem;
 `;