@ndla/ui 19.2.0 → 20.0.3

package/lib/index.d.ts

@@ -34,7 +34,6 @@ export type { FigureType } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader, } from './LearningPaths';
 export { Translation, TranslationLine, TranslationBox } from './Translation';
-export { default as Spinner } from './Spinner';
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';

package/lib/index.js

@@ -83,7 +83,6 @@ var _exportNames = {
   Translation: true,
   TranslationLine: true,
   TranslationBox: true,
-  Spinner: true,
   SearchResultSleeve: true,
   ContentTypeResult: true,
   SearchFieldForm: true,
@@ -650,12 +649,6 @@ Object.defineProperty(exports, "TranslationBox", {
     return _Translation.TranslationBox;
   }
 });
-Object.defineProperty(exports, "Spinner", {
-  enumerable: true,
-  get: function get() {
-    return _Spinner["default"];
-  }
-});
 Object.defineProperty(exports, "SearchResultSleeve", {
   enumerable: true,
   get: function get() {
@@ -1336,8 +1329,6 @@ var _LearningPaths = require("./LearningPaths");
 
 var _Translation = require("./Translation");
 
-var _Spinner = _interopRequireDefault(require("./Spinner"));
-
 var _SearchResultSleeve = _interopRequireDefault(require("./Search/SearchResultSleeve"));
 
 var _ContentTypeResult = _interopRequireDefault(require("./Search/ContentTypeResult"));

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

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -93,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             feide: string;
             newFavourite: string;
             storageInfo: {
@@ -964,8 +970,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-en.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Open menu',
     close: 'Close menu'
   },
+  cancel: 'Cancel',
   close: 'Close',
   title: 'Title',
+  save: 'Save',
   image: {
     altText: 'Alt-text',
     caption: 'Caption',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Folder',
       "delete": 'Delete',
-      edit: 'Edit'
+      edit: 'Edit',
+      missingName: 'Folder name required'
     },
     confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
@@ -986,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Ask us in the chat'
       },
       wishToDelete: 'Do you wish to delete your account?',
-      terms: 'terms of use',
+      terms: {
+        terms: 'Terms of use',
+        term1: 'Do not write personal or sensitive information in text fields.',
+        term2: 'Do not write offensive statements in text fields.',
+        term3: 'NDLA reserves the right to update or remove resources if they are not up to date.'
+      },
       feide: 'We have retrieved this information from Feide',
       newFavourite: 'Recently favourited',
       storageInfo: {

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

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -93,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {
@@ -966,6 +972,8 @@ declare const messages: {
     };
     close: string;
     title: string;
+    cancel: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-nb.js

@@ -825,6 +825,8 @@ var messages = _objectSpread(_objectSpread({
   },
   close: 'Lukk',
   title: 'Tittel',
+  cancel: 'Avbryt',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bildetekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
@@ -986,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikke skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikke skriv noe støtende i tekstfelt.',
+        term3: 'NDLA forbeholder seg retten til å oppdatere eller eventuelt slette ressurser dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

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

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -93,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {
@@ -964,8 +970,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-nn.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',
@@ -986,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikkje skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikkje skriv noko støytande i tekstfelt.',
+        term3: 'NDLA atterhald seg retten til å oppdatere eller eventuelt slette ressursar dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

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

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -93,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {
@@ -964,8 +970,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-se.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
@@ -986,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikke skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikke skriv noe støtende i tekstfelt.',
+        term3: 'NDLA forbeholder seg retten til å oppdatere eller eventuelt slette ressurser dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

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

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -93,7 +94,12 @@ declare const messages: {
                 ask: string;
             };
             wishToDelete: string;
-            terms: string;
+            terms: {
+                terms: string;
+                term1: string;
+                term2: string;
+                term3: string;
+            };
             newFavourite: string;
             feide: string;
             storageInfo: {
@@ -964,8 +970,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-sma.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
@@ -986,7 +989,12 @@ var messages = _objectSpread(_objectSpread({
         ask: 'Spør oss i chatten'
       },
       wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
-      terms: 'vilkår for bruk',
+      terms: {
+        terms: 'Vilkår for bruk',
+        term1: 'Ikke skriv personsensitiv informasjon eller persondata i tekstfelt.',
+        term2: 'Ikke skriv noe støtende i tekstfelt.',
+        term3: 'NDLA forbeholder seg retten til å oppdatere eller eventuelt slette ressurser dersom disse blir utdatert.'
+      },
       newFavourite: 'Nylig lagt til',
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "19.2.0",
+  "version": "20.0.3",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.1.2",
-    "@ndla/carousel": "^1.2.11",
-    "@ndla/core": "^2.3.0",
+    "@ndla/button": "^3.1.5",
+    "@ndla/carousel": "^1.2.14",
+    "@ndla/core": "^2.3.2",
+    "@ndla/forms": "^3.1.2",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.10.0",
-    "@ndla/licenses": "^5.0.2",
-    "@ndla/modal": "^1.2.12",
-    "@ndla/notion": "^3.1.22",
-    "@ndla/safelink": "^2.2.0",
-    "@ndla/switch": "^0.1.7",
-    "@ndla/tabs": "^1.1.10",
-    "@ndla/tooltip": "^2.1.2",
+    "@ndla/icons": "^1.11.2",
+    "@ndla/licenses": "^5.0.5",
+    "@ndla/modal": "^1.2.15",
+    "@ndla/notion": "^3.1.25",
+    "@ndla/safelink": "^2.2.3",
+    "@ndla/switch": "^0.1.9",
+    "@ndla/tabs": "^1.1.13",
+    "@ndla/tooltip": "^2.1.4",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5f018a6a78778970d0d448896de96bb16e970fab"
+  "gitHead": "fd7915eee936f4d2450c1263e4830a7bda29d49a"
 }

package/src/LearningPaths/LearningPathMenu.tsx

@@ -76,6 +76,7 @@ export type StepProps = {
 };
 
 interface Props {
+  onToggleAddToFavorites?: () => void;
   learningsteps: StepProps[];
   name: string;
   lastUpdated: string;
@@ -109,6 +110,7 @@ const LearningPathMenu = ({
   learningPathURL,
   invertedStyle,
   cookies,
+  onToggleAddToFavorites,
 }: Props) => {
   const { t } = useTranslation();
   const [isOpen, toggleOpenState] = useState(false);
@@ -129,7 +131,13 @@ const LearningPathMenu = ({
                 </StyledToggleMenubutton>
               </Tooltip>
             </div>
-            <LearningPathMenuIntro isOpen={isOpen} name={name} invertedStyle={invertedStyle} />
+            <LearningPathMenuIntro
+              isOpen={isOpen}
+              name={name}
+              invertedStyle={invertedStyle}
+              id={learningPathId}
+              onToggleAddToFavorites={onToggleAddToFavorites}
+            />
             <LearningPathMenuContent
               learningsteps={learningsteps}
               learningPathId={learningPathId}

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
+import { ArticleFavoritesButton } from '../Article';
 
 const StyledInfoHeader = styled.p`
   ${typography.smallHeading}
@@ -94,18 +95,30 @@ const StyledIntroHeader = styled.h1`
   margin: ${spacing.small} 0 ${spacing.normal};
 `;
 
+const StyledRow = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+`;
+
 interface Props {
   isOpen: boolean;
   invertedStyle?: boolean;
   name: string;
+  onToggleAddToFavorites?: () => void;
+  id: number;
 }
 
-const LearningPathMenuIntro = ({ isOpen, name, invertedStyle }: Props) => {
+const LearningPathMenuIntro = ({ isOpen, name, invertedStyle, onToggleAddToFavorites, id }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>
       <div>
-        <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
+        <StyledRow>
+          <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
+          {onToggleAddToFavorites && (
+            <ArticleFavoritesButton onToggleAddToFavorites={onToggleAddToFavorites} articleId={id.toString()} />
+          )}
+        </StyledRow>
         <StyledIntroHeader>{name}</StyledIntroHeader>
       </div>
     </StyledMenuIntro>

package/src/Masthead/Masthead.tsx

@@ -95,7 +95,10 @@ export const Masthead = ({
       )}
       <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
         {messages?.map((message) => (
-          <MessageBanner showCloseButton={message.closable} onClose={() => onCloseAlert?.(message.number)}>
+          <MessageBanner
+            key={message.number}
+            showCloseButton={message.closable}
+            onClose={() => onCloseAlert?.(message.number)}>
             {message.content}
           </MessageBanner>
         ))}

package/src/Messages/MessageBanner.tsx

@@ -24,7 +24,7 @@ const MessageBannerWrapper = styled.div<WrapperProps>`
   padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
   background: ${colors.support.yellowLight};
   color: ${colors.brand.greyDark};
-  border: none;
+  border-bottom: solid 1px ${colors.white};
 `;
 
 const TextWrapper = styled.div`

package/src/MyNdla/Resource/FolderInput.tsx

@@ -10,24 +10,17 @@ import styled from '@emotion/styled';
 import { IconButton } from '@ndla/button';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { Cross } from '@ndla/icons/action';
-import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import React, { ChangeEvent, KeyboardEvent, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing } from '@ndla/core';
+import { Input } from '@ndla/forms';
+import { css } from '@emotion/core';
 
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
   colors.brand.tertiary,
 )}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
 
-const FolderInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: ${spacing.small};
-
-  background-image: ${borderStyle};
-`;
-
 const StyledFolderIcon = styled.span`
   display: flex;
   padding: ${spacing.small};
@@ -38,29 +31,33 @@ const StyledFolderIcon = styled.span`
   }
 `;
 
-const StyledInput = styled.input`
-  color: ${colors.brand.primary};
-  outline: none;
+const inputWrapperStyle = css`
+  padding: ${spacing.small};
+  background: none;
+  background-image: ${borderStyle};
   border: none;
-  margin-right: auto;
-  line-height: 1.75em;
+`;
 
-  ::selection {
-    background: ${colors.brand.lighter};
+const StyledInput = styled(Input)`
+  && {
+    line-height: 1.75em;
+    color: ${colors.brand.primary};
+    ::selection {
+      background: ${colors.brand.lighter};
+    }
   }
 `;
 
 interface Props {
   onAddFolder: (name: string) => void;
   onClose: () => void;
-  autoFocus?: boolean;
+  autoSelect?: boolean;
 }
 
-const FolderInput = ({ onAddFolder, onClose, autoFocus }: Props) => {
+const FolderInput = ({ onAddFolder, onClose, autoSelect }: Props) => {
   const { t } = useTranslation();
   const newFolderText = t('treeStructure.newFolder.defaultName');
   const [input, setInput] = useState<string>(newFolderText);
-  const [mounted, setMounted] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -68,36 +65,36 @@ const FolderInput = ({ onAddFolder, onClose, autoFocus }: Props) => {
   };
 
   const onKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && input) {
+    if (e.key === 'Enter' && input.trim()) {
       e.preventDefault();
       onAddFolder(input);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
     }
   };
 
-  useEffect(() => {
-    if (mounted && autoFocus) {
-      inputRef.current?.select();
-    } else {
-      setMounted(true);
-    }
-  }, [mounted, autoFocus]);
-
   return (
-    <FolderInputWrapper>
-      <StyledFolderIcon>
-        <FolderOutlined />
-      </StyledFolderIcon>
-      <StyledInput
-        ref={inputRef}
-        value={input}
-        onChange={handleInputChange}
-        onKeyDown={onKeydown}
-        aria-label={newFolderText}
-      />
-      <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
-        <Cross />
-      </IconButton>
-    </FolderInputWrapper>
+    <StyledInput
+      autoSelect={autoSelect}
+      customCss={inputWrapperStyle}
+      warningText={!input.trim() ? t('myNdla.folder.missingName') : undefined}
+      ref={inputRef}
+      value={input}
+      onChange={handleInputChange}
+      onKeyDown={onKeydown}
+      aria-label={newFolderText}
+      iconLeft={
+        <StyledFolderIcon>
+          <FolderOutlined />
+        </StyledFolderIcon>
+      }
+      iconRight={
+        <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
+          <Cross />
+        </IconButton>
+      }
+    />
   );
 };
 

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -12,8 +12,8 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { breakpoints, mq, spacing, spacingUnit, fonts, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
+import { Spinner } from '@ndla/icons';
 import { OneColumn } from '../Layout';
-import Spinner from '../Spinner';
 import NavigationArrow, { StyledNavigationArrow } from './NavigationArrow';
 import SlideshowIndicator from './SlideshowIndicator';
 import { MovieType } from './types';

package/src/Resource/ListResource.tsx

@@ -88,6 +88,7 @@ const StyledImageWrapper = styled.div<StyledImageProps>`
     width: 54px;
     height: 40px;
   }
+  overflow: hidden;
 `;
 
 const StyledImage = styled(Image)`