Add Polish to language selectors

For: openstax/openstax.org#2349
openstax · Nov 3, 2023 · b0b164a · b0b164a
1 parent 03e83e4
commit b0b164a
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 12 deletions.
diff --git a/src/app/components/language-selector/language-selector.js b/src/app/components/language-selector/language-selector.js
@@ -8,9 +8,12 @@ import './language-selector.scss';
 // You can't use a variable for id
 const languageFromLocale = {
     en: () => <FormattedMessage id="en" defaultMessage="English" />,
-    es: () => <FormattedMessage id="es" defaultMessage="Spanish" />
+    es: () => <FormattedMessage id="es" defaultMessage="Spanish" />,
+    pl: () => <FormattedMessage id="pl" defaultMessage="Polish" />
 };
 
+const polishSite = 'https://openstax.pl/podreczniki';
+
 const NoLanguage = () => null;
 
 export function useLanguageText(locale) {
@@ -29,6 +32,16 @@ export function LanguageLink({locale, slug}) {
     const LanguageText = useLanguageText(locale);
     const href = slug ? `/subjects/${slug}/` : locale;
 
+    // Magic: handle Polish specially
+    if (locale === 'pl') {
+        return (
+            // eslint-disable-next-line react/jsx-no-target-blank
+            <a href={polishSite} target="_blank">
+                <LanguageText />
+            </a>
+        );
+    }
+
     return (
         <a href={href} onClick={onClick}>
             <LanguageText />
@@ -59,11 +72,17 @@ export function LanguageSelectorWrapper({children}) {
     );
 }
 
-export default function LanguageSelector({LeadIn, otherLocales, LinkPresentation=LanguageLink}) {
+export default function LanguageSelector({
+    LeadIn, otherLocales=[], LinkPresentation=LanguageLink, addPolish=false
+}) {
     const {language} = useLanguageContext();
     const LanguageText = useLanguageText(language);
 
-    if (!otherLocales || otherLocales.length < 1) {
+    if (addPolish) {
+        otherLocales.push('pl');
+    }
+
+    if (otherLocales.length < 1) {
         return null;
     }
 

diff --git a/src/app/components/language-selector/language-selector.scss b/src/app/components/language-selector/language-selector.scss
@@ -4,7 +4,6 @@
     align-items: center;
     column-gap: 1rem;
     display: flex;
-    line-height: 1.9rem;
 
     @include wider-than($tablet-max) {
         justify-content: center;

diff --git a/src/app/components/shell/header/menus/main-menu/main-menu.js b/src/app/components/shell/header/menus/main-menu/main-menu.js
@@ -77,11 +77,17 @@ function SubjectsMenu() {
                 />
             ))}
             {pathname.startsWith('/details/books') ? null : (
-                <LanguageSelectorWrapper>
-                    <FormattedMessage id='view' defaultMessage='View' />{' '}
-                    <LanguageLink locale={otherLocale} />
-                </LanguageSelectorWrapper>
-            )}
+                <React.Fragment>
+                    <LanguageSelectorWrapper>
+                        <FormattedMessage id='view' defaultMessage='View' />{' '}
+                        <LanguageLink locale={otherLocale} />
+                    </LanguageSelectorWrapper>
+                    <LanguageSelectorWrapper>
+                        <FormattedMessage id='view' defaultMessage='View' />{' '}
+                        <LanguageLink locale='pl' />
+                    </LanguageSelectorWrapper>
+                </React.Fragment>
+        )}
             {language === 'en' ? <React.Fragment><hr /><K12MenuItem /></React.Fragment> : null}
         </Dropdown>
     );

diff --git a/src/app/lang/en.js b/src/app/lang/en.js
@@ -2,13 +2,15 @@ export default {
     en: 'English',
     es: 'Spanish',
     and: 'and',
+    pl: 'Polish',
     option: 'option',
     options: 'options',
     fewer: 'fewer',
     more: 'more',
     pageAvailableIn: 'This page is available in',
     bookAvailableIn: 'This textbook is available in',
     weHaveBooksIn: 'We have textbooks in',
+    weAlsoHave: 'We also have books in',
     getTheBook: 'Get the book',
     summary: 'Summary',
     recommended: 'Recommended',

diff --git a/src/app/lang/es.js b/src/app/lang/es.js
@@ -1,6 +1,7 @@
 export default {
     en: 'inglés',
     es: 'español',
+    pl: 'polaco',
     and: 'y',
     option: 'opción',
     options: 'opciones',
@@ -9,6 +10,7 @@ export default {
     pageAvailableIn: 'Esta página está disponible en',
     bookAvailableIn: 'Este libro de texto está disponible en',
     weHaveBooksIn: 'Tenemos libros de texto en',
+    weAlsoHave: 'También tenemos libros en',
     getTheBook: 'Obtener el libro',
     summary: 'Resumen',
     recommended: 'Recomendado',

diff --git a/src/app/pages/subjects/new/language-selector-section.js b/src/app/pages/subjects/new/language-selector-section.js
@@ -2,11 +2,11 @@ import React from 'react';
 import LanguageSelector from '~/components/language-selector/language-selector';
 import {FormattedMessage} from 'react-intl';
 
-export default function LanguageSelectorSection({otherLocales}) {
+export default function LanguageSelectorSection(props) {
     return (
         <section className='language-selector-section'>
             <div className='content'>
-                <LanguageSelector LeadIn={LeadIn} otherLocales={otherLocales} />
+                <LanguageSelector LeadIn={LeadIn} {...props} />
             </div>
         </section>
     );

diff --git a/src/app/pages/subjects/new/specific/context.js b/src/app/pages/subjects/new/specific/context.js
@@ -15,7 +15,7 @@ function useContextValue(slug) {
 
             const {subjects, title} = data;
 
-            if (subjects && title) {
+            if (subjects && title && subjects[title]) {
                 return Object.entries(subjects[title].categories);
             }
             console.warn('Specific subjects and title need to be defined');

diff --git a/src/app/pages/subjects/new/specific/translation-selector.tsx b/src/app/pages/subjects/new/specific/translation-selector.tsx
@@ -45,11 +45,26 @@ export default function TranslationSelector({
                     otherLocales={otherLocales}
                     LinkPresentation={LinkPresentation}
                 />
+                <div className='language-selector'>
+                    <span>
+                        <PolishLeadIn />{' '}
+                        <LanguageLink locale='pl' slug='' />
+                    </span>
+                </div>
             </div>
         </section>
     );
 }
 
+function PolishLeadIn() {
+    return (
+        <FormattedMessage
+            id='weAlsoHave'
+            defaultMessage='We also have books in'
+        />
+    );
+}
+
 function LeadIn() {
     return (
         <FormattedMessage

diff --git a/src/app/pages/subjects/new/subjects.js b/src/app/pages/subjects/new/subjects.js
@@ -47,6 +47,7 @@ export function SubjectsPage() {
             <JITLoad
                 importFn={importLanguageSelector}
                 otherLocales={otherLocales}
+                addPolish={true}
             />
             <JITLoad importFn={importSubjectsListing} />
             <JITLoad importFn={importTutorAd} />