Skip to content

Commit

Permalink
Merge pull request #157 from Azure/users/tejitpabari/creator-deprecat…
Browse files Browse the repository at this point in the history 
…ion-changes

Adding deprecation banner
  • Loading branch information
@tejitpabari99
tejitpabari99 authored Dec 4, 2024
2 parents d03a50d + 1fb0e5b commit 380f489
Show file tree
Hide file tree
Showing 8 changed files with 244 additions and 72 deletions.
3 changes: 3 additions & 0 deletions src/common/translations/en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ const en = {
'diagnostic.package': 'Diagnostic Package',
docs: 'Documentation',
'docs.link': 'Link to documentation',
'deprecation.text': 'The Azure Maps Creator indoor map service is now deprecated and will be retired on 9/30/25. For more information, see',
'deprecation.link.text': 'End of Life Announcement of Azure Maps Creator',
'deprecation.link': 'https://aka.ms/AzureMapsCreatorDeprecation',
download: 'Download',
'download.diagnostics': 'Download Diagnostics',
'dwg.layers': 'DWG Layers',
Expand Down
262 changes: 196 additions & 66 deletions src/components/top-bar/__snapshots__/top-bar.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,49 +70,114 @@ Object {
text-decoration: underline;
}
.emotion-8 {
background: #efd9fd;
color: red;
height: 2rem;
border-radius: 0.625rem;
margin: 0.625rem;
padding: 0.125rem;
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-9 {
font-size: 1rem;
}
.emotion-10 {
color: red;
}
<body>
<div>
<div
class="emotion-0"
>
<div>
<div
class="emotion-1"
class="emotion-0"
>
<span
class="emotion-2"
<div
class="emotion-1"
>
Microsoft Azure
</span>
<span
class="emotion-3"
/>
<span
class="emotion-4"
<span
class="emotion-2"
>
Microsoft Azure
</span>
<span
class="emotion-3"
/>
<span
class="emotion-4"
>
Azure Maps Creator
</span>
</div>
<div
class="emotion-5"
>
Azure Maps Creator
</span>
<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"
>
feedback
</a>
</div>
</div>
<div
class="emotion-5"
style="display: flex; justify-content: center; align-items: center;"
>
<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"
<div
class="emotion-8"
>
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>
<i
aria-hidden="true"
class="root-106"
data-icon-name="error"
>
</i>
 
<span
class="emotion-9"
>
deprecation.text
 
<a
aria-label="deprecation.link"
class="emotion-10"
href="deprecation.link"
rel="noreferrer"
target="_blank"
>
deprecation.link.text
</a>
</span>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -184,48 +249,113 @@ Object {
text-decoration: underline;
}
.emotion-8 {
background: #efd9fd;
color: red;
height: 2rem;
border-radius: 0.625rem;
margin: 0.625rem;
padding: 0.125rem;
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-9 {
font-size: 1rem;
}
.emotion-10 {
color: red;
}
<div>
<div
class="emotion-0"
>
<div>
<div
class="emotion-1"
class="emotion-0"
>
<span
class="emotion-2"
<div
class="emotion-1"
>
Microsoft Azure
</span>
<span
class="emotion-3"
/>
<span
class="emotion-4"
<span
class="emotion-2"
>
Microsoft Azure
</span>
<span
class="emotion-3"
/>
<span
class="emotion-4"
>
Azure Maps Creator
</span>
</div>
<div
class="emotion-5"
>
Azure Maps Creator
</span>
<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"
>
feedback
</a>
</div>
</div>
<div
class="emotion-5"
style="display: flex; justify-content: center; align-items: center;"
>
<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"
<div
class="emotion-8"
>
feedback
</a>
<i
aria-hidden="true"
class="root-106"
data-icon-name="error"
>
</i>
 
<span
class="emotion-9"
>
deprecation.text
 
<a
aria-label="deprecation.link"
class="emotion-10"
href="deprecation.link"
rel="noreferrer"
target="_blank"
>
deprecation.link.text
</a>
</span>
</div>
</div>
</div>
</div>,
Expand Down
20 changes: 20 additions & 0 deletions src/components/top-bar/top-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import { useTranslation } from 'react-i18next';
import {
azMapsCreatorTextStyle,
barStyle,
deprecationBarStyle,
deprecationTextStyle,
deprecationLinkStyle,
docLink,
linksContainer,
logoContainer,
msftAzureTextStyle,
splitterStyle,
} from './top-bar.style';

import { Icon } from '@fluentui/react/lib/Icon';

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';
Expand All @@ -19,6 +24,7 @@ const TopBar = () => {
const { isPlacesPreview } = useFeatureFlags();

return (
<div>
<div className={barStyle}>
<div className={logoContainer}>
<span className={msftAzureTextStyle}>Microsoft Azure</span>
Expand All @@ -36,6 +42,20 @@ const TopBar = () => {
</a>
</div>
</div>
<div style={{display:'flex', justifyContent: 'center', alignItems: 'center'}}>
<div className={deprecationBarStyle}>
<Icon iconName="error"/>&nbsp;
<span className={deprecationTextStyle}>
{t('deprecation.text')}&nbsp;
<a className={deprecationLinkStyle} href={t('deprecation.link')} target="_blank" rel="noreferrer" aria-label={t('deprecation.link')}>
{t('deprecation.link.text')}
</a>
</span>

</div>
</div>

</div>
);
};

Expand Down
23 changes: 23 additions & 0 deletions src/components/top-bar/top-bar.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,29 @@ export const barStyle = css`
box-shadow: 0px 0px 0.625rem ${color.shadow};
`;

export const deprecationBarStyle = css`
background: #efd9fd;
color: red;
height: 2rem;
border-radius: 0.625rem;
margin: 0.625rem;
padding: 0.125rem;
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
`;

export const deprecationTextStyle = css`
font-size: ${fontSize.xl};
`;

export const deprecationLinkStyle = css`
color: red;
`;

export const msftAzureTextStyle = css`
font-weight: ${fontWeight.semibold};
font-size: ${fontSize.lg};
Expand Down
2 changes: 0 additions & 2 deletions src/pages/conversion/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ exports[`Conversion should render component 1`] = `
Object {
"asFragment": [Function],
"baseElement": .emotion-0 {
position: fixed;
top: 5.5rem;
height: calc(100% - 5.5rem - 2px);
width: calc(100% - 2.5rem);
Expand Down Expand Up @@ -307,7 +306,6 @@ Object {
</div>
</body>,
"container": .emotion-0 {
position: fixed;
top: 5.5rem;
height: calc(100% - 5.5rem - 2px);
width: calc(100% - 2.5rem);
Expand Down
Loading

0 comments on commit 380f489

Please sign in to comment.