feat(lng): Added change language on the fly (#456)

* feat(lng): added change language on the fly * fixed dropdown * applied feedbacks * added translation * updated bundlesize * fixed error * updated snaps * added french language * added language in storage * updated styles * fixed tests
2026-01-17 16:45:49 +07:00 · 2020-04-23 08:20:41 +02:00
parent b17368470d
commit 675ee980ee
21 changed files with 731 additions and 176 deletions
--- a/src/components/Header/HeaderRight.tsx
+++ b/src/components/Header/HeaderRight.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';

 import Button from '../../muiComponents/Button';
 import ThemeContext from '../../design-tokens/ThemeContext';
+import LanguageSwitch from '../LanguageSwitch';

 import { RightSide } from './styles';
 import HeaderToolTip from './HeaderToolTip';
@@ -72,6 +73,7 @@ const HeaderRight: React.FC<Props> = ({
      {!withoutSearch && (
        <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
      )}
+      <LanguageSwitch />
      <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
      <HeaderToolTip
--- a/src/components/Header/snapshots/Header.test.tsx.snap
+++ b/src/components/Header/snapshots/Header.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
-.emotion-24 {
+.emotion-28 {
  background-color: #4b5e40;
  color: #fff;
  min-height: 60px;
@@ -16,29 +16,29 @@ exports[`<Header /> component with logged in state should load the component in
 }

@media (min-width:768px) {
-  .emotion-24 .emotion-13 {
+  .emotion-28 .emotion-13 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

-  .emotion-24 .emotion-17 {
+  .emotion-28 .emotion-17 {
    display: none;
  }

-  .emotion-24 .e1jf5lit4 {
+  .emotion-28 .e1jf5lit4 {
    display: none;
  }
 }

@media (min-width:1024px) {
-  .emotion-24 .emotion-23 {
+  .emotion-28 .emotion-27 {
    padding: 0 20px;
  }

@media (min-width:1275px) {
-    .emotion-24 .emotion-23 {
+    .emotion-28 .emotion-27 {
      max-width: 1240px;
      width: 100%;
      margin: 0 auto;
@@ -46,7 +46,7 @@ exports[`<Header /> component with logged in state should load the component in
 }
 }

-.emotion-22 {
+.emotion-26 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
@@ -124,7 +124,7 @@ exports[`<Header /> component with logged in state should load the component in
  overflow-y: auto;
 }

-.emotion-20 {
+.emotion-24 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@@ -136,16 +136,36 @@ exports[`<Header /> component with logged in state should load the component in
  display: block;
 }

+.emotion-20 {
+  display: none;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-20 {
+    display: inline-block;
+  }
+}
+
 .emotion-18 {
+  display: none;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-18 {
+    display: inline-block;
+  }
+}
+
+.emotion-22 {
  color: #fff;
 }

 <header
-  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
+  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-28 emotion-29 MuiAppBar-colorPrimary"
  data-testid="header"
 >
  <div
-    class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular emotion-26 emotion-27 MuiToolbar-gutters"
  >
    <div
      class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
@@ -214,7 +234,7 @@ exports[`<Header /> component with logged in state should load the component in
      </div>
    </div>
    <div
-      class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular emotion-24 emotion-25 MuiToolbar-gutters"
      data-testid="header-right"
    >
      <button
@@ -241,8 +261,53 @@ exports[`<Header /> component with logged in state should load the component in
          class="MuiTouchRipple-root"
        />
      </button>
+      <div
+        class="emotion-20 emotion-21"
+      >
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
+          tabindex="0"
+          title="Change language"
+          type="button"
+        >
+          <span
+            class="MuiButton-label ForwardRef(Button)-label-322"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+              />
+            </svg>
+            <span
+              class="emotion-18 emotion-19"
+            >
+              English
+            </span>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
      <a
-        class="emotion-18 emotion-19"
+        class="emotion-22 emotion-23"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
        rel="noopener noreferrer"
@@ -359,7 +424,7 @@ exports[`<Header /> component with logged in state should load the component in
 `;

 exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
-.emotion-24 {
+.emotion-28 {
  background-color: #4b5e40;
  color: #fff;
  min-height: 60px;
@@ -374,29 +439,29 @@ exports[`<Header /> component with logged in state should load the component in
 }

@media (min-width:768px) {
-  .emotion-24 .emotion-13 {
+  .emotion-28 .emotion-13 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

-  .emotion-24 .emotion-17 {
+  .emotion-28 .emotion-17 {
    display: none;
  }

-  .emotion-24 .e1jf5lit4 {
+  .emotion-28 .e1jf5lit4 {
    display: none;
  }
 }

@media (min-width:1024px) {
-  .emotion-24 .emotion-23 {
+  .emotion-28 .emotion-27 {
    padding: 0 20px;
  }

@media (min-width:1275px) {
-    .emotion-24 .emotion-23 {
+    .emotion-28 .emotion-27 {
      max-width: 1240px;
      width: 100%;
      margin: 0 auto;
@@ -404,7 +469,7 @@ exports[`<Header /> component with logged in state should load the component in
 }
 }

-.emotion-22 {
+.emotion-26 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
@@ -482,7 +547,7 @@ exports[`<Header /> component with logged in state should load the component in
  overflow-y: auto;
 }

-.emotion-20 {
+.emotion-24 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@@ -494,16 +559,36 @@ exports[`<Header /> component with logged in state should load the component in
  display: block;
 }

+.emotion-20 {
+  display: none;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-20 {
+    display: inline-block;
+  }
+}
+
 .emotion-18 {
+  display: none;
+}
+
+@media screen and (min-width:768px) {
+  .emotion-18 {
+    display: inline-block;
+  }
+}
+
+.emotion-22 {
  color: #fff;
 }

 <header
-  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
+  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-28 emotion-29 MuiAppBar-colorPrimary"
  data-testid="header"
 >
  <div
-    class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular emotion-26 emotion-27 MuiToolbar-gutters"
  >
    <div
      class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
@@ -572,7 +657,7 @@ exports[`<Header /> component with logged in state should load the component in
      </div>
    </div>
    <div
-      class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular emotion-24 emotion-25 MuiToolbar-gutters"
      data-testid="header-right"
    >
      <button
@@ -599,8 +684,53 @@ exports[`<Header /> component with logged in state should load the component in
          class="MuiTouchRipple-root"
        />
      </button>
+      <div
+        class="emotion-20 emotion-21"
+      >
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
+          tabindex="0"
+          title="Change language"
+          type="button"
+        >
+          <span
+            class="MuiButton-label ForwardRef(Button)-label-119"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+              />
+            </svg>
+            <span
+              class="emotion-18 emotion-19"
+            >
+              English
+            </span>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
      <a
-        class="emotion-18 emotion-19"
+        class="emotion-22 emotion-23"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
        rel="noopener noreferrer"