@ndla/ui 34.0.0 → 34.1.0

package/lib/locale/messages-en.d.ts

@@ -934,6 +934,7 @@ declare const messages: {
         copyCode: string;
     };
     ndlaFilm: {
+        heading: string;
         slideBackwardsLabel: string;
         slideForwardsLabel: string;
         movieMatchInCategory: string;
@@ -980,6 +981,7 @@ declare const messages: {
             shortFilm: string;
             all: string;
         };
+        allMovieGroupTitleLabel: string;
         moreAboutNdlaFilm: {
             header: string;
             firstParagraph: string;

package/lib/locale/messages-en.js

@@ -399,7 +399,7 @@ var messages = _objectSpread(_objectSpread({
   article: {
     edition: 'Edition',
     publisher: 'Publisher',
-    lastUpdated: 'Last updated',
+    lastUpdated: 'Last revised date',
     closeLabel: 'Close',
     useContent: 'Cite or use',
     additionalLabel: 'Additional content',
@@ -729,6 +729,7 @@ var messages = _objectSpread(_objectSpread({
     copyCode: 'Copy code'
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll backwards',
     slideForwardsLabel: 'Scroll forwards',
     movieMatchInCategory: 'Matches',
@@ -775,6 +776,7 @@ var messages = _objectSpread(_objectSpread({
       shortFilm: 'Short film',
       all: 'All movies A-Z'
     },
+    allMovieGroupTitleLabel: 'Movies starting with {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph: "The films in the film service are taken from Norwegian and international film heritage and are linked to curricula in several subjects. They have been selected by NDLA's editors in collaboration with Norgesfilm AS.",

package/lib/locale/messages-nb.d.ts

@@ -934,6 +934,7 @@ declare const messages: {
         copyCode: string;
     };
     ndlaFilm: {
+        heading: string;
         slideBackwardsLabel: string;
         slideForwardsLabel: string;
         movieMatchInCategory: string;
@@ -980,6 +981,7 @@ declare const messages: {
             shortFilm: string;
             all: string;
         };
+        allMovieGroupTitleLabel: string;
         moreAboutNdlaFilm: {
             header: string;
             firstParagraph: string;

package/lib/locale/messages-nb.js

@@ -397,7 +397,7 @@ var messages = _objectSpread(_objectSpread({
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.'
   },
   article: {
-    lastUpdated: 'Sist oppdatert',
+    lastUpdated: 'Sist faglig oppdatert',
     edition: 'Utgave',
     publisher: 'Utgiver',
     useContent: 'Regler for bruk',
@@ -729,6 +729,7 @@ var messages = _objectSpread(_objectSpread({
     copyCode: 'Kopier kode til utklippstavle'
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll bakover',
     slideForwardsLabel: 'Scroll fremover',
     movieMatchInCategory: 'Treff',
@@ -775,6 +776,7 @@ var messages = _objectSpread(_objectSpread({
       shortFilm: 'Kortfilm',
       all: 'Alle filmer A-Å'
     },
+    allMovieGroupTitleLabel: 'Filmer som starter på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph: 'Filmene i filmtjenesten er hentet fra norsk og internasjonal filmarv og kobles mot læreplaner i flere fag. De er valgt ut av NDLAs redaksjoner i samarbeid med Norgesfilm AS.',

package/lib/locale/messages-nn.d.ts

@@ -491,6 +491,7 @@ declare const messages: {
                 name: string;
             };
         };
+        errorDescription: string;
         film: {
             header: string;
             text: string;
@@ -498,7 +499,6 @@ declare const messages: {
             linkLabel: string;
         };
         blog: string;
-        errorDescription: string;
     };
     toolboxPage: {
         introduction: string;
@@ -567,8 +567,8 @@ declare const messages: {
         error: string;
         noCoreResourcesAvailableUnspecific: string;
         noCoreResourcesAvailable: string;
-        toggleFilterLabel: string;
         activateAdditionalResources: string;
+        toggleFilterLabel: string;
         label: string;
         allResources: string;
         shortcutButtonText: string;
@@ -934,6 +934,7 @@ declare const messages: {
         copyCode: string;
     };
     ndlaFilm: {
+        heading: string;
         slideBackwardsLabel: string;
         slideForwardsLabel: string;
         movieMatchInCategory: string;
@@ -980,6 +981,7 @@ declare const messages: {
             shortFilm: string;
             all: string;
         };
+        allMovieGroupTitleLabel: string;
         moreAboutNdlaFilm: {
             header: string;
             firstParagraph: string;

package/lib/locale/messages-nn.js

@@ -295,14 +295,14 @@ var messages = _objectSpread(_objectSpread({
         name: 'Følg oss'
       }
     },
+    errorDescription: 'Orsak, ein feil oppstod under lasting av faga.',
     film: {
       header: 'NDLA film',
       text: 'NDLA film er ei teneste i samarbeid med Norgesfilm. Denne tenesta lar deg sjå ei rekkje spelefilmar, kortfilmar, dokumentarar og seriar. Du kan òg sjå undervisningsfilm og filmklipp. Velkomen inn i filmen si verd!',
       textShort: 'Velkomen inn i filmen si verd!',
       linkLabel: 'Gå til NDLA film'
     },
-    blog: 'Frå bloggen',
-    errorDescription: 'Orsak, ein feil oppstod under lasting av faga.'
+    blog: 'Frå bloggen'
   },
   toolboxPage: {
     introduction: 'Kva vil det seie å arbeide utforskande? Korleis kan du lære betre? Kva skal til for å få gruppearbeid til å fungere? I Verktøykassa finn både elevar og lærerar ressursar som er aktuelle for alle fag, og som støtter opp under læringsarbeid og utvikling av kunnskap, ferdigheter og forståing.'
@@ -350,7 +350,7 @@ var messages = _objectSpread(_objectSpread({
       back: 'Tilbake',
       additionalFilterLabel: 'Tilleggsressursar',
       contentTypeResultsShowMore: (_contentTypeResultsSh = {}, _defineProperty(_contentTypeResultsSh, contentTypes.SUBJECT_MATERIAL, 'Vis meir fagstoff'), _defineProperty(_contentTypeResultsSh, contentTypes.TASKS_AND_ACTIVITIES, 'Vis fleire oppgåver og aktivitetar'), _defineProperty(_contentTypeResultsSh, contentTypes.LEARNING_PATH, 'Vis fleire læringsstiar'), _defineProperty(_contentTypeResultsSh, contentTypes.ASSESSMENT_RESOURCES, 'Vis fleire vurderingsressursar'), _defineProperty(_contentTypeResultsSh, contentTypes.SOURCE_MATERIAL, 'Vis fleire kjeldemateriale'), _defineProperty(_contentTypeResultsSh, contentTypes.EXTERNAL_LEARNING_RESOURCES, 'Vis fleire eksterne læringsressursar'), _defineProperty(_contentTypeResultsSh, "unGrouped", 'Vis fleire ressursar'), _contentTypeResultsSh),
-      contentTypeResultsShowLess: (_contentTypeResultsSh2 = {}, _defineProperty(_contentTypeResultsSh2, contentTypes.SUBJECT_MATERIAL, 'Vis mindre fagstoff'), _defineProperty(_contentTypeResultsSh2, contentTypes.TASKS_AND_ACTIVITIES, 'Vis færre oppgåver og aktivitetar'), _defineProperty(_contentTypeResultsSh2, contentTypes.LEARNING_PATH, 'Vis færre læringsstiar'), _defineProperty(_contentTypeResultsSh2, contentTypes.LEARNING_PATH, 'Vis færre læringsstiar'), _defineProperty(_contentTypeResultsSh2, contentTypes.ASSESSMENT_RESOURCES, 'Vis færre vurderingsressursar'), _defineProperty(_contentTypeResultsSh2, contentTypes.SOURCE_MATERIAL, 'Vis færre kjeldemateriale'), _defineProperty(_contentTypeResultsSh2, contentTypes.EXTERNAL_LEARNING_RESOURCES, 'Vis færre eksterne læringsressursar'), _defineProperty(_contentTypeResultsSh2, "unGrouped", 'Vis færre ressursar'), _contentTypeResultsSh2),
+      contentTypeResultsShowLess: (_contentTypeResultsSh2 = {}, _defineProperty(_contentTypeResultsSh2, contentTypes.SUBJECT_MATERIAL, 'Vis mindre fagstoff'), _defineProperty(_contentTypeResultsSh2, contentTypes.TASKS_AND_ACTIVITIES, 'Vis færre oppgåver og aktivitetar'), _defineProperty(_contentTypeResultsSh2, contentTypes.LEARNING_PATH, 'Vis færre læringsstiar'), _defineProperty(_contentTypeResultsSh2, contentTypes.ASSESSMENT_RESOURCES, 'Vis færre vurderingsressursar'), _defineProperty(_contentTypeResultsSh2, contentTypes.SOURCE_MATERIAL, 'Vis færre kjeldemateriale'), _defineProperty(_contentTypeResultsSh2, contentTypes.EXTERNAL_LEARNING_RESOURCES, 'Vis færre eksterne læringsressursar'), _defineProperty(_contentTypeResultsSh2, "unGrouped", 'Vis færre ressursar'), _contentTypeResultsSh2),
       contentTypeResultsNoHit: (_contentTypeResultsNo = {}, _defineProperty(_contentTypeResultsNo, contentTypes.SUBJECT_MATERIAL, 'Ikkje noko fagstoff'), _defineProperty(_contentTypeResultsNo, contentTypes.TASKS_AND_ACTIVITIES, 'Ingen oppgåver'), _defineProperty(_contentTypeResultsNo, contentTypes.LEARNING_PATH, 'Ingen læringsstiar'), _defineProperty(_contentTypeResultsNo, contentTypes.ASSESSMENT_RESOURCES, 'Ingen vurderingsressursar'), _defineProperty(_contentTypeResultsNo, contentTypes.SOURCE_MATERIAL, 'Ingen kjeldemateriale'), _defineProperty(_contentTypeResultsNo, contentTypes.EXTERNAL_LEARNING_RESOURCES, 'Ingen eksterne læringsressursar'), _defineProperty(_contentTypeResultsNo, "unGrouped", 'Ingen ressursar'), _contentTypeResultsNo)
     }
   },
@@ -362,8 +362,8 @@ var messages = _objectSpread(_objectSpread({
     error: 'Orsak, ein del av innhaldet kunne ikkje visast.',
     noCoreResourcesAvailableUnspecific: 'Det er ikkje noko kjernestoff tilgjengeleg.',
     noCoreResourcesAvailable: 'Det er ikkje noko kjernestoff tilgjengeleg for {{name}}.',
-    toggleFilterLabel: 'Tilleggsressursar',
     activateAdditionalResources: 'Tilleggsressursar',
+    toggleFilterLabel: 'Tilleggsressursar',
     label: 'Læringsressursar',
     allResources: 'Ressursar',
     shortcutButtonText: 'Lærestoff',
@@ -397,7 +397,7 @@ var messages = _objectSpread(_objectSpread({
     frontPageExpired: 'Utgåtte fag blir det ikkje undervist i lenger, men det kan framleis vere mogleg å ta eksamen i faget som privatist.'
   },
   article: {
-    lastUpdated: 'Sist oppdatert',
+    lastUpdated: 'Sist faglig oppdatert',
     edition: 'Utgåve',
     publisher: 'Utgjevar',
     closeLabel: 'Lukk',
@@ -729,6 +729,7 @@ var messages = _objectSpread(_objectSpread({
     copyCode: 'Kopier kode til utklippstavle'
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll bakover',
     slideForwardsLabel: 'Scroll framover',
     movieMatchInCategory: 'Treff',
@@ -775,6 +776,7 @@ var messages = _objectSpread(_objectSpread({
       shortFilm: 'Kortfilm',
       all: 'Alle filmar A-Å'
     },
+    allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph: 'Filmane i filmtenesta er henta frå norsk og internasjonal filmarv og er kopla mot læreplanar i fleire fag. Dei er valde av redaksjonane til NDLA i samarbeid med Norgesfilm AS.',

package/lib/locale/messages-se.d.ts

@@ -934,6 +934,7 @@ declare const messages: {
         copyCode: string;
     };
     ndlaFilm: {
+        heading: string;
         slideBackwardsLabel: string;
         slideForwardsLabel: string;
         movieMatchInCategory: string;
@@ -980,6 +981,7 @@ declare const messages: {
             shortFilm: string;
             all: string;
         };
+        allMovieGroupTitleLabel: string;
         moreAboutNdlaFilm: {
             header: string;
             firstParagraph: string;

package/lib/locale/messages-se.js

@@ -729,6 +729,7 @@ var messages = _objectSpread(_objectSpread({
     copyCode: 'Máŋge koda vuorkátávvalii'
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Rulle maŋos',
     slideForwardsLabel: 'Rulle ovddas',
     movieMatchInCategory: 'Deaivan',
@@ -775,6 +776,7 @@ var messages = _objectSpread(_objectSpread({
       shortFilm: 'Oanehis filbma',
       all: 'Buot filmmat A-Å'
     },
+    allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Filbma',
       firstParagraph: 'Filmmat filbmabálvalusas leat vižžouvvon norgga ja riikkaidgaskasaš filbmaárbbis ja leat čadnon oahppoplánaide máŋgga fágas. Dat leat válljejuvvon NDLA doaimmahusgottiin ovttasráđiid Norgesfilm AS:ain.',

package/lib/locale/messages-sma.d.ts

@@ -934,6 +934,7 @@ declare const messages: {
         copyCode: string;
     };
     ndlaFilm: {
+        heading: string;
         slideBackwardsLabel: string;
         slideForwardsLabel: string;
         movieMatchInCategory: string;
@@ -980,6 +981,7 @@ declare const messages: {
             shortFilm: string;
             all: string;
         };
+        allMovieGroupTitleLabel: string;
         moreAboutNdlaFilm: {
             header: string;
             firstParagraph: string;

package/lib/locale/messages-sma.js

@@ -397,7 +397,7 @@ var messages = _objectSpread(_objectSpread({
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.'
   },
   article: {
-    lastUpdated: 'Sist oppdatert',
+    lastUpdated: 'Sist faglig oppdatert',
     edition: 'Utgave',
     publisher: 'Utgiver',
     useContent: 'Regler for bruk',
@@ -729,6 +729,7 @@ var messages = _objectSpread(_objectSpread({
     copyCode: 'Kopier kode til utklippstavle'
   },
   ndlaFilm: {
+    heading: 'NDLA film',
     slideBackwardsLabel: 'Scroll bakover',
     slideForwardsLabel: 'Scroll fremover',
     movieMatchInCategory: 'Treff',
@@ -775,6 +776,7 @@ var messages = _objectSpread(_objectSpread({
       shortFilm: 'Kortfilm',
       all: 'Alle filmer A-Å'
     },
+    allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
       header: 'NDLA Film',
       firstParagraph: 'Filmene i filmtjenesten er hentet fra norsk og internasjonal filmarv og kobles mot læreplaner i flere fag. De er valgt ut av NDLAs redaksjoner i samarbeid med Norgesfilm AS.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "34.0.0",
+  "version": "34.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,21 +32,22 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.14",
-    "@ndla/button": "^9.0.0",
-    "@ndla/carousel": "^2.1.1",
-    "@ndla/core": "^3.0.3",
-    "@ndla/forms": "^4.1.11",
+    "@ndla/button": "^9.0.1",
+    "@ndla/carousel": "^3.0.0",
+    "@ndla/core": "^3.1.0",
+    "@ndla/forms": "^4.2.0",
     "@ndla/hooks": "^1.2.0",
-    "@ndla/icons": "^2.1.1",
-    "@ndla/licenses": "^6.1.6",
-    "@ndla/modal": "^2.2.2",
-    "@ndla/notion": "^4.1.13",
-    "@ndla/safelink": "^4.0.2",
-    "@ndla/switch": "^1.0.3",
-    "@ndla/tabs": "^2.1.1",
-    "@ndla/tooltip": "^4.0.4",
+    "@ndla/icons": "^2.2.0",
+    "@ndla/licenses": "^6.1.7",
+    "@ndla/modal": "^2.2.3",
+    "@ndla/notion": "^4.1.14",
+    "@ndla/safelink": "^4.0.3",
+    "@ndla/switch": "^1.0.4",
+    "@ndla/tabs": "^2.1.2",
+    "@ndla/tooltip": "^4.0.5",
     "@ndla/types-learningpath-api": "^0.0.17",
     "@ndla/util": "^3.1.9",
+    "@radix-ui/react-dropdown-menu": "2.0.2",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -82,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "db3f35560206bd927b474e4809cfe2d5eff1b7e7"
+  "gitHead": "4d0730c32a5a72e492a281daf6447cd42c45f629"
 }

package/src/Figure/Figure.tsx

@@ -126,11 +126,14 @@ interface FigureCaptionProps {
   };
 }
 
-const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {
+const Figure = ({ children, type = 'full', resizeIframe, className, ...rest }: Props) => {
   const typeClass = type === 'full-column' ? 'c-figure--full-column' : `u-float-${type}`;
   const right = ['small-right', 'xsmall-right'].includes(type);
   return (
-    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe, right }, typeClass)} {...rest}>
+    <figure
+      data-sizetype={type}
+      {...classes('', { resize: !!resizeIframe, right }, `${typeClass} ${className ?? ''}`)}
+      {...rest}>
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );
@@ -156,6 +159,7 @@ interface Props {
   type?: FigureType;
   resizeIframe?: boolean;
   noFigcaption?: boolean;
+  className?: string;
 }
 
 export default Figure;

package/src/FileList/File.tsx

@@ -6,7 +6,7 @@ import Tooltip from '@ndla/tooltip';
 import React from 'react';
 import { FileFormat, FileType } from './FileList';
 
-const LinkText = styled.span`
+const LinkTextWrapper = styled.div`
   & > span {
     box-shadow: inset 0 -1px;
   }
@@ -26,7 +26,7 @@ const FileLink = styled(SafeLink)`
   &:hover,
   &:focus,
   &:active {
-    ${LinkText} {
+    ${LinkTextWrapper} {
       box-shadow: none;
     }
   }
@@ -50,9 +50,9 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
     <FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat} aria-describedby={formatId}>
       <Download />
       <Tooltip tooltip={format.tooltip}>
-        <LinkText>
+        <LinkTextWrapper>
           <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
-        </LinkText>
+        </LinkTextWrapper>
       </Tooltip>
     </FileLink>
   );

package/src/LanguageSelector/LanguageSelector.stories.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { LanguageSelector } from '@ndla/ui';
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
+import { defaultParameters } from '../../../../stories/defaults';
+export default {
+  title: 'Enkle komponenter/LanguageSelector',
+  component: LanguageSelector,
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    locales: ['en', 'nb', 'nn'],
+    inverted: false,
+    // eslint-disable-next-line no-console
+    onSelect: (locale) => console.log(`selected ${locale}`),
+  },
+} as ComponentMeta<typeof LanguageSelector>;
+
+interface ButtonWrapperProps {
+  inverted?: boolean;
+}
+
+const shouldForwardProp = (p: string) => p !== 'inverted';
+
+const ButtonWrapper = styled('div', { shouldForwardProp })<ButtonWrapperProps>`
+  background-color: ${(p) => p.inverted && colors.brand.primary};
+  padding: ${spacing.normal};
+`;
+
+export const LanguageSelectorStory: ComponentStory<typeof LanguageSelector> = (args) => {
+  return (
+    <ButtonWrapper inverted={args.inverted}>
+      <LanguageSelector {...args} />
+    </ButtonWrapper>
+  );
+};
+
+LanguageSelectorStory.storyName = 'LanguageSelector';

package/src/LanguageSelector/LanguageSelector.tsx

@@ -1,175 +1,96 @@
 /**
- * Copyright (c) 2019-present, NDLA.
+ * Copyright (c) 2022-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
  * LICENSE file in the root directory of this source tree.
  *
  */
 
-import React, { useState } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import FocusTrapReact from 'focus-trap-react';
-import { ButtonV2 as Button } from '@ndla/button';
-import { spacing, misc, colors, mq, breakpoints, animations, fonts, spacingUnit } from '@ndla/core';
-import { ChevronDown } from '@ndla/icons/common';
+import React from 'react';
+import { Root, Trigger, Item, Content, Portal, Arrow } from '@radix-ui/react-dropdown-menu';
+import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
-import LanguageSelectorContent from './LanguageSelectorContent';
-
-type StyledWrapperProps = {
-  alwaysVisible?: boolean;
-};
-
-const StyledWrapper = styled.div<StyledWrapperProps>`
-  position: relative;
-  ${(props) =>
-    !props.alwaysVisible &&
-    css`
-      ${mq.range({ until: breakpoints.wide })} {
-        display: none;
-      }
-    `}
-`;
+import { ChevronDown } from '@ndla/icons/common';
+import styled from '@emotion/styled';
+import { colors, fonts, spacing } from '@ndla/core';
 
-type StyledModalProps = {
-  animateIn: boolean;
-  centered?: boolean;
-};
+interface Props<T extends string> {
+  locales: T[];
+  onSelect: (locale: T) => void;
+  inverted?: boolean;
+}
 
-const StyledModal = styled.div<StyledModalProps>`
-  background: ${colors.brand.light};
-  position: absolute;
+const PopoverContent = styled(Content)`
   z-index: 9999;
-  right: 0;
-  top: ${-spacingUnit * 0.75}px;
-  padding: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.normal};
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
-  border-radius: ${misc.borderRadius};
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  ${(props) =>
-    props.animateIn &&
-    css`
-      ${animations.fadeInTop(animations.durations.superFast)}
-    `};
-  ${(props) =>
-    props.centered &&
-    css`
-      right: calc(50% - 225px);
-      left: calc(50% - 225px);
-      ${mq.range({ until: breakpoints.mobileWide })} {
-        right: calc(50% - 150px);
-        left: calc(50% - 150px);
-      }
-    `};
-  nav {
-    width: 100%;
-    padding: ${spacing.medium} ${spacing.large} ${spacing.small};
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    ul {
-      margin: 0 ${spacing.large};
-      padding: 0;
-      list-style: none;
-      li {
-        margin: 0 0 ${spacing.xsmall};
-        padding: 0;
-      }
-      button {
-        border: none;
-        width: 100%;
-        padding: ${spacingUnit / 2 + 5}px ${spacingUnit * 2.5}px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: ${misc.borderRadius};
-      }
-    }
-  }
+  overflow: hidden;
+  background-color: ${colors.brand.greyLightest};
+  border-radius: ${spacing.small};
+  border: 1px solid ${colors.brand.tertiary};
+  fill: ${colors.brand.tertiary};
 `;
 
-const StyledSpan = styled.span`
-  font-weight: ${fonts.weight.semibold};
+const LanguageChoice = styled(ButtonV2)`
+  padding: ${spacing.small};
+  border-radius: 0;
+  gap: ${spacing.normal};
+  justify-content: space-between;
+  border: 0;
+  :not(:last-of-type) {
+    border-bottom: 1px solid ${colors.brand.tertiary};
+  }
 `;
 
-type Props = {
-  options: {
-    [key: string]: {
-      name: string;
-      url: string;
-    };
-  };
-  currentLanguage: string;
-  inverted?: boolean;
-  invertedOutlineLargeScreensOnly?: boolean;
-  outline?: boolean;
-  center?: boolean;
-  alwaysVisible?: boolean;
-};
-
-interface StyledButtonProps {
-  outline?: boolean;
-  inverted?: boolean;
-}
+const ActivityIndicator = styled.div`
+  width: ${spacing.normal};
+  height: ${spacing.normal};
+  border: 1.5px solid currentColor;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 
-const shouldForwardProp = (name: string) => name !== 'outline';
+const ActiveIndicator = styled.div`
+  width: 50%;
+  height: 50%;
+  background-color: currentColor;
+  border-radius: 100%;
+`;
 
-const StyledButton = styled(Button, { shouldForwardProp })<StyledButtonProps>`
-  border-color: ${({ inverted, outline }) =>
-    outline ? (inverted ? colors.white : colors.brand.primary) : 'transparent'};
+const Text = styled.span`
+  ${fonts.sizes('20px', '24px')};
+  font-weight: ${fonts.weight.semibold};
 `;
 
-const LanguageSelector = ({ currentLanguage, outline, center, inverted, alwaysVisible }: Props) => {
+const LanguageSelector = <T extends string>({ locales, onSelect, inverted }: Props<T>) => {
   const { t, i18n } = useTranslation();
-  const [infoLocale, setInfoLocale] = useState(i18n.language);
-  const [isOpen, setIsOpen] = useState(false);
   return (
-    <StyledWrapper alwaysVisible={alwaysVisible}>
-      <StyledButton
-        outline={outline}
-        inverted={inverted}
-        shape="pill"
-        size="medium"
-        colorTheme="lighter"
-        variant="ghost"
-        onClick={() => setIsOpen(true)}>
-        <StyledSpan>
-          {t(`languages.prefixChangeLanguage`)}: {t(`languages.${infoLocale}`)}
-        </StyledSpan>
-        <ChevronDown />
-      </StyledButton>
-
-      {isOpen && (
-        <FocusTrapReact
-          active
-          focusTrapOptions={{
-            onDeactivate: () => {
-              setIsOpen(false);
-            },
-            clickOutsideDeactivates: true,
-            escapeDeactivates: true,
-          }}>
-          <StyledModal animateIn={isOpen} centered={center}>
-            <Button
-              variant="link"
-              onClick={() => {
-                setIsOpen(false);
-              }}>
-              {t('masthead.menu.close')}
-            </Button>
-            <LanguageSelectorContent
-              currentLanguage={currentLanguage}
-              setInfoLocale={setInfoLocale}
-              infoLocale={infoLocale}
-              close={() => setIsOpen(false)}
-            />
-          </StyledModal>
-        </FocusTrapReact>
-      )}
-    </StyledWrapper>
+    <Root>
+      <Trigger asChild>
+        <ButtonV2 variant="outline" shape="pill" inverted={inverted} aria-label={t('footer.selectLanguage')}>
+          {t(`languages.prefixChangeLanguage`)} <ChevronDown />
+        </ButtonV2>
+      </Trigger>
+      <Portal>
+        <PopoverContent>
+          <Arrow aria-hidden />
+          {locales.map((locale) => (
+            <Item asChild key={locale}>
+              <LanguageChoice
+                role="link"
+                variant="ghost"
+                aria-label={t(`changeLanguage.${locale}`)}
+                onClick={() => onSelect(locale)}>
+                <Text>{t(`languages.${locale}`)}</Text>
+                <ActivityIndicator>{i18n.language === locale && <ActiveIndicator />}</ActivityIndicator>
+              </LanguageChoice>
+            </Item>
+          ))}
+        </PopoverContent>
+      </Portal>
+    </Root>
   );
 };