diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js index 3d0e73963..118d27d5e 100644 --- a/src/components/DocumentBody.js +++ b/src/components/DocumentBody.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { UnifiedFooter } from '@mdb/consistent-nav'; import { usePresentationMode } from '../hooks/use-presentation-mode'; @@ -9,6 +9,7 @@ import { getMetaFromDirective } from '../utils/get-meta-from-directive'; import { getPlaintext } from '../utils/get-plaintext'; import { getTemplate } from '../utils/get-template'; import useSnootyMetadata from '../utils/use-snooty-metadata'; +import { isBrowser } from '../utils/is-browser'; import Widgets from './Widgets'; import SEO from './SEO'; import FootnoteContext from './Footnote/footnote-context'; @@ -67,11 +68,37 @@ const getAnonymousFootnoteReferences = (index, numAnonRefs) => { return index > numAnonRefs ? [] : [`id${index + 1}`]; }; +const HIDE_UNIFIED_FOOTER_LOCALE = process.env['GATSBY_HIDE_UNIFIED_FOOTER_LOCALE'] === 'true'; +const AVAILABLE_LANGUAGES = ['English', '简体中文']; + const DocumentBody = (props) => { const { location, pageContext: { page, slug, template }, } = props; + + useEffect(() => { + // A workaround to remove the other locale options. + if (!HIDE_UNIFIED_FOOTER_LOCALE) { + const footer = document.getElementById('footer-container'); + const footerUlElement = footer?.querySelector('ul[role=listbox]'); + if (footerUlElement) { + // For DOP-4060 we only want to support English and Simple Chinese (for now) + const availableOptions = Array.from(footerUlElement.childNodes).reduce((accumulator, child) => { + if (AVAILABLE_LANGUAGES.includes(child.textContent)) { + accumulator.push(child); + } + return accumulator; + }, []); + + footerUlElement.innerHTML = null; + availableOptions.forEach((child) => { + footerUlElement.appendChild(child); + }); + } + } + }, []); + const initialization = () => { const pageNodes = getNestedValue(['children'], page) || []; const footnotes = getFootnotes(pageNodes); @@ -90,6 +117,17 @@ const DocumentBody = (props) => { const isInPresentationMode = usePresentationMode()?.toLocaleLowerCase() === 'true'; + const onSelectLocale = (locale) => { + const localeHrefMap = { + 'zh-cn': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/zh-cn/docs-qa/', + 'en-us': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/docs-qa/', + }; + + if (isBrowser) { + window.location.href = localeHrefMap[locale]; + } + }; + return ( <> { {!isInPresentationMode && ( -
- + )} diff --git a/tests/unit/Presentation.test.js b/tests/unit/Presentation.test.js index 0290085b9..7be190d7c 100644 --- a/tests/unit/Presentation.test.js +++ b/tests/unit/Presentation.test.js @@ -10,6 +10,9 @@ jest.mock(`../../src/utils/use-snooty-metadata`, () => { }); describe('DocumentBody', () => { + beforeAll(() => { + jest.spyOn(document, 'querySelector'); + }); it('renders the necessary elements', () => { mockLocation(null); render(); @@ -18,6 +21,12 @@ describe('DocumentBody', () => { expect(footer).toBeVisible(); expect(footer).toMatchSnapshot(); + if (!process.env.GATSBY_HIDE_UNIFIED_FOOTER_LOCALE) { + const languageSelector = screen.getByTestId('options'); + expect(languageSelector).toBeInTheDocument(); + expect(languageSelector.querySelectorAll('li')).toHaveLength(2); + } + const feedbackWidget = screen.getByText('Share Feedback'); expect(feedbackWidget).toBeVisible(); expect(feedbackWidget).toMatchSnapshot(); diff --git a/tests/unit/__snapshots__/Presentation.test.js.snap b/tests/unit/__snapshots__/Presentation.test.js.snap index 571da2e6f..d9300c324 100644 --- a/tests/unit/__snapshots__/Presentation.test.js.snap +++ b/tests/unit/__snapshots__/Presentation.test.js.snap @@ -133,6 +133,132 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } .emotion-7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin-top: 0px; +} + +@media screen and (min-width: 768px) { + .emotion-7 { + margin-top: 24px; + } +} + +.emotion-8 { + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + display: inline-block; + position: relative; +} + +.emotion-9 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + height: 48px; + border: none; + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + font-weight: 300; + background-color: transparent; + padding-left: 0; +} + +.emotion-10 { + font-family: Akzidenz-Grotesk Std; + font-size: 16px; + line-height: 16px; + color: #ffffff; + padding-left: 16px; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; +} + +.emotion-11 { + padding: 0 16px; +} + +.emotion-12 { + -webkit-transform: rotateZ(0.5deg); + -moz-transform: rotateZ(0.5deg); + -ms-transform: rotateZ(0.5deg); + transform: rotateZ(0.5deg); + -webkit-transition: -webkit-transform .15s ease-in-out; + transition: transform .15s ease-in-out; + z-index: 0; +} + +.emotion-13 { + stroke: #ffffff; +} + +.emotion-14 { + visibility: hidden; + position: absolute; + z-index: 1000; + display: none; + width: 100%; + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; + padding: 16px; + line-height: 16px; + font-size: 16px; + color: #ffffff; + font-family: Akzidenz-Grotesk Std; + background-color: #21313c; + border: 1px solid #b8c4c2; + border-radius: 8px; + box-sizing: border-box; + box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15); +} + +.emotion-15 { + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-16 { + cursor: pointer; + padding: 8px; +} + +.emotion-16:not(:last-child) { + margin-bottom: 8px; +} + +.emotion-16:hover { + border-radius: 2px; + background-color: #3d4f58; + color: #0ad05b; +} + +.emotion-18 { box-sizing: border-box; margin: 0; min-width: 0; @@ -144,12 +270,12 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-7 { + .emotion-18 { display: block; } } -.emotion-8 { +.emotion-19 { box-sizing: border-box; margin: 0; min-width: 0; @@ -160,12 +286,12 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-8 { + .emotion-19 { margin-top: 0px; } } -.emotion-9 { +.emotion-20 { font-family: Akzidenz-Grotesk Std; font-weight: 500; font-size: 16px; @@ -175,12 +301,12 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-9 { + .emotion-20 { margin-top: initial; } } -.emotion-10 { +.emotion-21 { list-style: none; margin: 0; padding: 0; @@ -189,16 +315,16 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-10 { + .emotion-21 { display: block; } } -.emotion-11 { +.emotion-22 { margin-bottom: 24px; } -.emotion-12 { +.emotion-23 { color: #ffffff; -webkit-text-decoration: none; text-decoration: none; @@ -216,11 +342,11 @@ exports[`DocumentBody renders the necessary elements 1`] = ` align-items: center; } -.emotion-39 { +.emotion-50 { margin-right: 16px; } -.emotion-58 { +.emotion-69 { box-sizing: border-box; margin: 0; min-width: 0; @@ -233,13 +359,14 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-58 { + .emotion-69 { display: none; } } +
+ +
+ +
+
    +
  • + English +
    • +
  • + 简体中文 +
    • +
+
+
+
© 2023 MongoDB, Inc.

About

Support

Social

© 2023 MongoDB, Inc.