feat: add 'Microsoft value' section to fly-over

src/App.test.jsx

@@ -18,6 +18,15 @@ describe('App', () => {
     expect(within(panel).getByText('Conditional Access')).toBeInTheDocument();
   });
 
+  it('shows the Microsoft value statement for a mapped product', async () => {
+    const user = userEvent.setup();
+    render(<App />);
+    await user.click(screen.getByRole('button', { name: /T11/ }));
+    const panel = screen.getByRole('complementary');
+    expect(within(panel).getAllByText('Microsoft-meerwaarde:').length).toBeGreaterThan(0);
+    expect(within(panel).getByText(/5 MB per gebruiker per dag/)).toBeInTheDocument();
+  });
+
   it('shows the standards mapping for a mapped measure', async () => {
     const user = userEvent.setup();
     render(<App />);

src/components/MeasureDetailPanel.jsx

@@ -160,6 +160,24 @@ export default function MeasureDetailPanel({
               {item.a5Adds && (
                 <span className="mapping__a5tag">{t(lang, 'a5Badge')}</span>
               )}
+              {localized(item, 'value', lang) && (
+                <p className="mapping__value">
+                  <span className="mapping__value-label">
+                    {t(lang, 'microsoftValue')}:
+                  </span>{' '}
+                  {localized(item, 'value', lang)}
+                  {item.valueUrl && (
+                    <a
+                      className="mapping__value-src"
+                      href={item.valueUrl}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      {t(lang, 'valueSource')} ↗
+                    </a>
+                  )}
+                </p>
+              )}
               {item.docsUrl && (
                 <a
                   className="mapping__link"

src/components/PrintDocument.jsx

@@ -104,6 +104,13 @@ export default function PrintDocument({ lang }) {
                       {item.docsUrl && (
                         <span className="print-mapping__url">{item.docsUrl}</span>
                       )}
+                      {localized(item, 'value', lang) && (
+                        <span className="print-mapping__value">
+                          <strong>{t(lang, 'microsoftValue')}:</strong>{' '}
+                          {localized(item, 'value', lang)}
+                          {item.valueUrl && ` (${item.valueUrl})`}
+                        </span>
+                      )}
                     </li>
                   ))}
                 </ul>

src/data/export.js

@@ -102,6 +102,11 @@ function measureMarkdown(measure, lang) {
       const tierLabel = `${ms.tier}${ms.a5Adds ? '+' : ''}`;
       const docs = ms.docsUrl ? ` — [${t(lang, 'openDocs')}](${ms.docsUrl})` : '';
       lines.push(`- **${ms.name}** (${tierLabel})${docs}`);
+      const value = localized(ms, 'value', lang);
+      if (value) {
+        const src = ms.valueUrl ? ` ([${t(lang, 'valueSource')}](${ms.valueUrl}))` : '';
+        lines.push(`  - _${t(lang, 'microsoftValue')}:_ ${value}${src}`);
+      }
     });
     lines.push('');
   }

src/i18n/strings.js

@@ -38,6 +38,8 @@ export const ui = {
     a5Badge: 'A5-meerwaarde',
     measures: 'maatregelen',
     microsoftMapping: 'Microsoft-koppeling',
+    microsoftValue: 'Microsoft-meerwaarde',
+    valueSource: 'Bron',
     referencesTitle: 'Meer lezen',
     guidanceTitle: 'Praktische richtlijnen',
     guidanceWhy: 'Waarom dit belangrijk is',
@@ -142,6 +144,8 @@ export const ui = {
     a5Badge: 'A5 value-add',
     measures: 'measures',
     microsoftMapping: 'Microsoft mapping',
+    microsoftValue: 'Microsoft value',
+    valueSource: 'Source',
     referencesTitle: 'Further reading',
     guidanceTitle: 'Practical guidance',
     guidanceWhy: 'Why it matters',
@@ -247,6 +251,8 @@ export const ui = {
     a5Badge: 'Valeur ajoutée A5',
     measures: 'mesures',
     microsoftMapping: 'Correspondance Microsoft',
+    microsoftValue: 'Valeur Microsoft',
+    valueSource: 'Source',
     referencesTitle: 'Pour aller plus loin',
     guidanceTitle: 'Conseils pratiques',
     guidanceWhy: "Pourquoi c'est important",

src/styles/index.css

@@ -727,6 +727,27 @@ body {
   border-radius: 999px;
   padding: 2px 9px;
 }
+.mapping__value {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--ink-soft, #444);
+}
+.mapping__value-label {
+  font-weight: 700;
+  color: var(--a5);
+}
+.mapping__value-src {
+  display: inline-block;
+  margin-left: 6px;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--accent-ink);
+  text-decoration: none;
+}
+.mapping__value-src:hover {
+  text-decoration: underline;
+}
 .mapping__link {
   font-size: 12.5px;
   font-weight: 600;
@@ -2113,6 +2134,12 @@ body {
     color: #5a6478;
     word-break: break-all;
   }
+  .print-mapping__value {
+    width: 100%;
+    font-size: 9pt;
+    color: #2f3645;
+    line-height: 1.4;
+  }
   .print-standards__controls {
     font-size: 9.5pt;
     color: #5a6478;