OCT-2193 Implement language selector: app

client/src/components/shared/LanguageSelector/LanguageSelector.module.scss

@@ -0,0 +1,3 @@
+.root {
+  width: 12rem !important;
+}

client/src/components/shared/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,37 @@
+import React, { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import InputSelect from 'components/ui/InputSelect';
+import { Option } from 'components/ui/InputSelect/types';
+import Svg from 'components/ui/Svg';
+import { earth } from 'svg/misc';
+
+import styles from './LanguageSelector.module.scss';
+
+const LanguageSelector = (): ReactElement => {
+  const { t, i18n } = useTranslation('translation');
+
+  const languageOptions: Option[] = [
+    {
+      label: t('languageSelector.english'),
+      value: 'en-EN',
+    },
+    {
+      label: t('languageSelector.spanish'),
+      value: 'es-Es',
+    },
+  ];
+
+  return (
+    <InputSelect
+      className={styles.root}
+      Icon={<Svg img={earth} size={1.2} />}
+      onChange={option => i18n.changeLanguage(option!.value)}
+      options={languageOptions}
+      selectedOption={languageOptions.find(({ value }) => value === i18n.language)}
+      variant="topselect"
+    />
+  );
+};
+
+export default LanguageSelector;

client/src/components/shared/LanguageSelector/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './LanguageSelector';

client/src/components/shared/Layout/LanguageSelectorWrapped/LanguageSelectorWrapped.module.scss

@@ -0,0 +1,3 @@
+.root {
+  height: 5.28rem;
+}

client/src/components/shared/Layout/LanguageSelectorWrapped/LanguageSelectorWrapped.tsx

@@ -0,0 +1,15 @@
+import cx from 'classnames';
+import React, { FC } from 'react';
+
+import LanguageSelector from 'components/shared/LanguageSelector';
+
+import styles from './LanguageSelectorWrapped.module.scss';
+import LanguageSelectorWrappedProps from './types';
+
+const LanguageSelectorWrapped: FC<LanguageSelectorWrappedProps> = ({ className }) => (
+  <div className={cx(styles.root, className)}>
+    <LanguageSelector />
+  </div>
+);
+
+export default LanguageSelectorWrapped;

client/src/components/shared/Layout/LanguageSelectorWrapped/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './LanguageSelectorWrapped';

client/src/components/shared/Layout/LanguageSelectorWrapped/types.ts

@@ -0,0 +1,3 @@
+export default interface LanguageSelectorWrappedProps {
+  className?: string;
+}

client/src/components/shared/Layout/LayoutFooter/LayoutFooter.module.scss

@@ -93,6 +93,19 @@
   }
 }
 
+.newsletterAndLanguageSelector {
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+}
+
+.languageSelector {
+  @media #{$phone-down} {
+    align-self: flex-start;
+    margin-top: 4rem;
+  }
+}
+
 .newsletterWrapper {
   width: 100%;
   display: flex;

client/src/components/shared/Layout/LayoutFooter/LayoutFooter.tsx

@@ -2,6 +2,7 @@ import cx from 'classnames';
 import React, { FC, memo, useLayoutEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import LanguageSelectorWrapped from 'components/shared/Layout/LanguageSelectorWrapped';
 import Svg from 'components/ui/Svg';
 import {
   BLOG_POST,
@@ -24,7 +25,7 @@ import LayoutFooterProps from './types';
 
 const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'layout.footer' });
-  const { isDesktop } = useMediaQuery();
+  const { isDesktop, isMobile } = useMediaQuery();
   const newsletterRef = useRef<HTMLDivElement>(null);
   const dataTestRoot = 'LayoutFooter';
 
@@ -69,6 +70,7 @@ const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
 
   return (
     <div className={cx(styles.root, className)} data-test={dataTestRoot}>
+      {isMobile && <LanguageSelectorWrapped />}
       <div className={styles.wrapper}>
         <div className={styles.info}>
           <Svg dataTest={`${dataTestRoot}__Logo`} img={octantSemiTransparent} size={4.8} />
@@ -104,13 +106,12 @@ const LayoutFooter: FC<LayoutFooterProps> = ({ className }) => {
         </div>
       </div>
       <div className={styles.newsletterWrapper}>
-        <div
-          ref={newsletterRef}
-          className={styles.newsletter}
-          data-test={`${dataTestRoot}__newsletter`}
-        />
-        <div className={styles.newsletterText} data-test={`${dataTestRoot}__newsletterText`}>
-          {t('newsletterText')}
+        <div className={styles.newsletterAndLanguageSelector}>
+          <div className={styles.newsletterWrapper}>
+            <div ref={newsletterRef} className={styles.newsletter} />
+            <div className={styles.newsletterText}>{t('newsletterText')}</div>
+          </div>
+          {!isMobile && <LanguageSelectorWrapped />}
         </div>
       </div>
     </div>

client/src/components/ui/InputSelect/InputSelect.module.scss

@@ -4,7 +4,7 @@
   position: relative;
 
   &.variant-- {
-    &underselect {
+    &belowselect, &topselect {
       width: 20rem;
       height: 4rem;
     }
@@ -19,10 +19,35 @@
   cursor: pointer;
   justify-content: space-between;
 
+  .labelWrapper {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      display: flex;
+      align-items: center;
+      margin-right: 0.8rem;
+
+      &.variant-- {
+        &topselect {
+          stroke: $color-octant-grey5;
+        }
+      }
+    }
+  }
+
   .chevron {
     margin: 0 1.8rem 0 1rem;
     width: 3.6rem;
 
+    &.variant-- {
+      &topselect {
+        path {
+          stroke: $color-octant-grey5;
+        }
+      }
+    }
+
     &.isMenuOpen {
       transform: rotateX(180deg);
       transition: 0.3s all;
@@ -37,32 +62,59 @@
         padding: 0.2rem 0.8rem;
       }
     }
-    &underselect {
+    &belowselect, &topselect {
       $labelPaddingVertical: 0.2rem;
       $labelPaddingHorizontal: 1.6rem;
 
-      font-size: $font-size-12;
       font-weight: $font-weight-semibold;
-      background: $color-octant-grey8;
-      border-radius: $border-radius-16;
-      border: 0.1rem solid transparent;
 
       .label {
         padding: $labelPaddingVertical $labelPaddingHorizontal;
+
+        &.hasIcon {
+          padding-left: 0;
+        }
       }
+    }
+    &belowselect {
+      background: $color-octant-grey8;
+      border-radius: $border-radius-16;
+      border: 0.1rem solid transparent;
+      font-size: $font-size-12;
 
       &:hover {
         border-color: $color-octant-grey2;
       }
     }
+    &topselect {
+      color: $color-octant-grey5;
+      font-size: $font-size-14;
+
+      &:hover {
+        color: $color-octant-grey13;
+
+        .icon {
+          stroke: $color-octant-grey13;
+        }
+
+        .chevron path {
+          stroke: $color-octant-grey13;
+        }
+      }
+    }
   }
 }
 
 .overlay {
   position: absolute;
 
   @media #{$tablet-down} {
-    @include overlay(100%, 100%);
+    &.isVariantFullWidthOnMobile {
+      @include overlay(100%, 100%, true);
+    }
+    &:not(.isVariantFullWidthOnMobile) {
+      @include overlay(100%, 100%, false);
+    }
   }
 }
 
@@ -72,27 +124,43 @@
   bottom: 0;
   right: 0;
   margin: 0;
-  padding: 2.4rem 0;
   border-radius: $border-radius-16;
   z-index: $z-index-6;
   box-shadow: $box-shadow-1;
   height: auto;
   width: 100%;
   background: $color-white;
 
-  @media #{$desktop-up} {
-    position: absolute;
-    width: 12.8rem;
-    padding: 1.6rem 0;
-    bottom: auto;
+  &.variant-- {
+    &topselect {
+      position: absolute;
+      width: 14.4rem;
+      bottom: 100%;
+      left: 50%;
+      transform: translate(-50%) !important;
+      padding: 0.8rem 0;
+    }
 
+    &overselect, &belowselect {
+      padding: 2.4rem 0;
+    }
+  }
+
+  @media #{$desktop-up} {
     &.variant-- {
+      &overselect, &underselect {
+        position: absolute;
+        width: 12.8rem;
+        padding: 1.6rem 0;
+        bottom: auto;
+      }
+
       &overselect {
         top: -2rem;
         right: -0.73rem;
       }
 
-      &underselect {
+      &belowselect {
         width: 100%;
         top: 5rem;
       }
@@ -128,17 +196,25 @@
   }
 
   @media #{$desktop-up} {
-    font-size: $font-size-12;
-    height: 3.2rem;
-    padding-left: 0;
+    &.variant-- {
+      &belowselect, &overselect {
+        font-size: $font-size-12;
+        height: 3.2rem;
+        padding-left: 0;
+      }
+    }
   }
 
   &:hover {
     background: $color-octant-grey6;
   }
 
   &.variant-- {
-    &overselect {
+    &topselect {
+      font-size: $font-size-14;
+    }
+
+    &topselect, &overselect {
       .iconTick {
         left: 2.5rem;
       }
@@ -147,7 +223,7 @@
         justify-content: center;
       }
     }
-    &underselect {
+    &belowselect {
       flex-direction: row-reverse;
       padding: 0 5.6rem;