@ndla/ui 22.3.0 → 24.1.0

package/lib/index-javascript.js

@@ -23,78 +23,6 @@ Object.defineProperty(exports, "FilterButtons", {
     return _Filter.FilterButtons;
   }
 });
-Object.defineProperty(exports, "SearchOverlay", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchOverlay;
-  }
-});
-Object.defineProperty(exports, "SearchField", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchField;
-  }
-});
-Object.defineProperty(exports, "SearchPage", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchPage;
-  }
-});
-Object.defineProperty(exports, "SearchResult", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResult;
-  }
-});
-Object.defineProperty(exports, "SearchResultAuthor", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResultAuthor;
-  }
-});
-Object.defineProperty(exports, "SearchResultList", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResultList;
-  }
-});
-Object.defineProperty(exports, "SearchResultItem", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchResultItem;
-  }
-});
-Object.defineProperty(exports, "SearchFilter", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchFilter;
-  }
-});
-Object.defineProperty(exports, "SearchFilterList", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchFilterList;
-  }
-});
-Object.defineProperty(exports, "SearchPopoverFilter", {
-  enumerable: true,
-  get: function get() {
-    return _Search.SearchPopoverFilter;
-  }
-});
-Object.defineProperty(exports, "ActiveFilters", {
-  enumerable: true,
-  get: function get() {
-    return _Search.ActiveFilters;
-  }
-});
-Object.defineProperty(exports, "ToggleSearchButton", {
-  enumerable: true,
-  get: function get() {
-    return _Search.ToggleSearchButton;
-  }
-});
 Object.defineProperty(exports, "TopicIntroductionList", {
   enumerable: true,
   get: function get() {
@@ -146,8 +74,6 @@ Object.defineProperty(exports, "CompetenceGoalsDialog", {
 
 var _Filter = require("./Filter");
 
-var _Search = require("./Search");
-
 var _TopicIntroductionList = _interopRequireDefault(require("./TopicIntroductionList"));
 
 var _TopicMenu = _interopRequireWildcard(require("./TopicMenu"));

package/lib/index.d.ts

@@ -89,3 +89,4 @@ export type { Snack, SnackContext } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
 export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';
+export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';

package/lib/index.js

@@ -188,7 +188,12 @@ var _exportNames = {
   BaseSnack: true,
   DefaultSnackbar: true,
   InfoBlock: true,
-  TreeStructure: true
+  TreeStructure: true,
+  SearchField: true,
+  SearchResultList: true,
+  SearchResultItem: true,
+  ActiveFilters: true,
+  ToggleSearchButton: true
 };
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
@@ -1288,6 +1293,36 @@ Object.defineProperty(exports, "TreeStructure", {
     return _TreeStructure.TreeStructure;
   }
 });
+Object.defineProperty(exports, "SearchField", {
+  enumerable: true,
+  get: function get() {
+    return _Search.SearchField;
+  }
+});
+Object.defineProperty(exports, "SearchResultList", {
+  enumerable: true,
+  get: function get() {
+    return _Search.SearchResultList;
+  }
+});
+Object.defineProperty(exports, "SearchResultItem", {
+  enumerable: true,
+  get: function get() {
+    return _Search.SearchResultItem;
+  }
+});
+Object.defineProperty(exports, "ActiveFilters", {
+  enumerable: true,
+  get: function get() {
+    return _Search.ActiveFilters;
+  }
+});
+Object.defineProperty(exports, "ToggleSearchButton", {
+  enumerable: true,
+  get: function get() {
+    return _Search.ToggleSearchButton;
+  }
+});
 
 var _indexJavascript = require("./index-javascript");
 
@@ -1440,6 +1475,8 @@ var _InfoBlock = require("./InfoBlock");
 
 var _TreeStructure = require("./TreeStructure");
 
+var _Search = require("./Search");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

package/lib/locale/messages-en.js

@@ -985,7 +985,7 @@ var messages = _objectSpread(_objectSpread({
     more: 'More options',
     listView: 'List view',
     detailView: 'Detailed listview',
-    shortView: 'Short view',
+    shortView: 'Card view',
     myPage: {
       confirmDeleteAccount: 'Are you sure you want to delete your account?',
       confirmDeleteAccountButton: 'Delete account',
@@ -1016,7 +1016,7 @@ var messages = _objectSpread(_objectSpread({
       newFavourite: 'Recently favourited',
       storageInfo: {
         title: 'How to save your favourite resources from NDLA',
-        text: 'When you wish to save a resource, you can do so by clicking the heart on the top right corner of the page. You will then get an option to store the resource in a folder'
+        text: 'When you wish to save a resource, you can do so by clicking the heart button. You will then get an option to store the resource in a folder'
       },
       folderInfo: {
         title: 'How to organise your favourite resources in folders',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Copied to clipboard',
       addToMyNdla: 'Add to My NDLA',
       addedToMyNdla: 'Added to My NDLA',
-      addedToFolder: 'Resource added to "{{folderName}}"',
+      addedToFolder: 'Resource added to ',
       removedFromFolder: 'Removed from "{{folderName}}"',
       titleUpdated: 'Title updated',
       tagsUpdated: 'Tags updated',

package/lib/locale/messages-nb.js

@@ -985,7 +985,7 @@ var messages = _objectSpread(_objectSpread({
     more: 'Flere valg',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
@@ -1016,7 +1016,7 @@ var messages = _objectSpread(_objectSpread({
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
-        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.'
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjerteknappen der den er tilgjengelig. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Tags oppdatert',

package/lib/locale/messages-nn.js

@@ -985,7 +985,7 @@ var messages = _objectSpread(_objectSpread({
     more: 'Fleire val',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
@@ -1016,7 +1016,7 @@ var messages = _objectSpread(_objectSpread({
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
-        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.'
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjerteknappen der den er tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Tags oppdatert',

package/lib/locale/messages-se.js

@@ -985,7 +985,7 @@ var messages = _objectSpread(_objectSpread({
     more: 'Flere valg',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
@@ -1016,7 +1016,7 @@ var messages = _objectSpread(_objectSpread({
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
-        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.'
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjerteknappen der den er tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Tags oppdatert',

package/lib/locale/messages-sma.js

@@ -985,7 +985,7 @@ var messages = _objectSpread(_objectSpread({
     more: 'Flere valg',
     listView: 'Listevisning',
     detailView: 'Detaljrik listevisning',
-    shortView: 'Kort visning',
+    shortView: 'Kortvisning',
     myPage: {
       confirmDeleteAccount: 'Er du sikker på at du vil slette kontoen?',
       confirmDeleteAccountButton: 'Slett konto',
@@ -1016,7 +1016,7 @@ var messages = _objectSpread(_objectSpread({
       feide: 'Dette henter vi om deg fra Feide',
       storageInfo: {
         title: 'Slik lagrer du dine favorittressurser fra NDLA',
-        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.'
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjerteknappen der den er tilgjengeleg. Du vil da få mulighet til å lagre ressursen i en mappe.'
       },
       folderInfo: {
         title: 'Slik organiserer du dine favorittressurser i mapper',
@@ -1036,7 +1036,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Tags oppdatert',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "22.3.0",
+  "version": "24.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,20 +32,20 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.1",
-    "@ndla/button": "^3.3.1",
+    "@ndla/button": "^3.3.2",
     "@ndla/carousel": "^1.2.16",
     "@ndla/core": "^2.3.4",
-    "@ndla/forms": "^3.1.4",
+    "@ndla/forms": "^3.1.5",
     "@ndla/hooks": "^1.1.5",
     "@ndla/icons": "^1.11.4",
-    "@ndla/licenses": "^5.0.7",
-    "@ndla/modal": "^1.2.18",
-    "@ndla/notion": "^3.1.30",
-    "@ndla/safelink": "^2.2.7",
+    "@ndla/licenses": "^5.0.8",
+    "@ndla/modal": "^1.3.0",
+    "@ndla/notion": "^3.1.32",
+    "@ndla/safelink": "^2.2.8",
     "@ndla/switch": "^0.1.11",
     "@ndla/tabs": "^1.1.15",
-    "@ndla/tooltip": "^2.1.6",
-    "@ndla/types-learningpath-api": "^0.0.12",
+    "@ndla/tooltip": "^2.2.0",
+    "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.0.1",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1c8439d413eefda014a9438d78a34c1639194321"
+  "gitHead": "4b4dab829416f2d642693cbd6dcd5e0beb4b0ed5"
 }

package/src/Article/ArticleAuthorContent.tsx

@@ -78,7 +78,7 @@ const ArticleAuthorContent = ({ showAuthor, authors, onSelectAuthor }: Props) =>
   return (
     <div {...classes()}>
       <div {...classes('author-info')}>
-        {image && <Portrait src={image} alt={name} {...classes('portrait')} />}
+        {image && <Portrait src={image} alt={name} />}
         <section>
           <h1>{name}</h1>
           <hr />

package/src/Article/ArticleFavoritesButton.tsx

@@ -25,8 +25,8 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
   return (
     <Tooltip tooltip={isFavorite ? addToFavoritesLabel : removeFromFavoritesLabel}>
       <IconButtonDualStates
-        ariaLabelActive={t('myNdla.addToFavourites')}
-        ariaLabelInActive={t('myNdla.alreadyFavourited')}
+        ariaLabelActive={t('myNdla.alreadyFavourited')}
+        ariaLabelInActive={t('myNdla.addToFavourites')}
         activeIcon={<Heart />}
         inactiveIcon={<HeartOutline />}
         active={isFavorite}

package/src/AuthorInfo/AuthorInfo.tsx

@@ -7,16 +7,11 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
 import SafeLink from '@ndla/safelink';
+import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import Portrait from '../Portrait';
 
-const classes = new BEMHelper({
-  name: 'author-info',
-  prefix: 'c-',
-});
-
 interface Props {
   authorName: string;
   authorRole: string;
@@ -25,24 +20,63 @@ interface Props {
   image?: string;
 }
 
+const AuthorInfoSection = styled.section`
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: ${spacing.large};
+  font-family: ${fonts.sans};
+  p,
+  a {
+    margin: 0;
+    ${mq.range({ until: breakpoints.tablet })} {
+      ${fonts.sizes('14px', '22px')};
+    }
+  }
+`;
+
+const StyledPortrait = styled(Portrait)`
+  margin-right: ${spacing.large};
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin-right: ${spacing.medium};
+    width: 7rem;
+    height: 7rem;
+    span {
+      width: 7rem;
+      height: 7rem;
+    }
+  }
+  ${mq.range({ until: breakpoints.desktop })} {
+    margin-right: ${spacing.small};
+    width: 4rem;
+    height: 4rem;
+    span {
+      width: 4rem;
+      height: 4rem;
+    }
+  } ;
+`;
+
+const StyledHeading = styled.h1`
+  margin: 0 0 ${spacing.small};
+  ${mq.range({ until: breakpoints.desktop })} {
+    ${fonts.sizes('22px', '22px')};
+  }
+  ${mq.range({ until: breakpoints.tablet })} {
+    ${fonts.sizes('18px', '18px')};
+    margin-bottom: ${spacing.xsmall};
+  }
+`;
+
 const AuthorInfo = ({ authorName, authorRole, email, image, phone }: Props) => (
-  <section {...classes('')}>
-    {image && <Portrait src={image} alt={authorName} modifier="large" {...classes('portrait-image')} />}
+  <AuthorInfoSection>
+    {image && <StyledPortrait src={image} alt={authorName} modifier="large" />}
     <div>
-      <h1 {...classes('heading')}>{authorName}</h1>
+      <StyledHeading>{authorName}</StyledHeading>
       <p>{authorRole}</p>
       {phone && <p>{phone}</p>}
       {email && <SafeLink to={`mailto:${email}`}>{email}</SafeLink>}
     </div>
-  </section>
+  </AuthorInfoSection>
 );
 
-AuthorInfo.propTypes = {
-  authorName: PropTypes.string.isRequired,
-  authorRole: PropTypes.string.isRequired,
-  phone: PropTypes.string,
-  email: PropTypes.string,
-  image: PropTypes.string,
-};
-
 export default AuthorInfo;

package/src/ContentCard/ContentCard.tsx

@@ -1,11 +1,123 @@
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
 import { Play } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import type { SafeLinkProps } from '@ndla/safelink';
+import { breakpoints, colors, fonts, mq, spacing, spacingUnit } from '@ndla/core';
 
-const classes = BEMHelper('c-content-card');
+interface ContentCardContainerProps {
+  columnWidth: number;
+}
+const ContentCardContainer = styled.article<ContentCardContainerProps>`
+  position: relative;
+  display: block;
+  width: ${(p) => `${p.columnWidth}px`};
+`;
+
+const StyledHeading = styled.h1`
+  font-weight: ${fonts.weight.semibold};
+  ${fonts.sizes('14px', '16px')};
+  margin: ${spacing.xsmall} 0;
+  color: ${colors.brand.primary};
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin: ${spacing.small} 0 ${spacing.xsmall};
+    ${fonts.sizes('20px', '22px')};
+  }
+`;
+
+const ContentCardLink = styled(SafeLink)`
+  color: ${colors.text.primary};
+  &:hover,
+  &:focus {
+    ${StyledHeading} {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const ImageWrapper = styled.div`
+  width: 100%;
+  height: 72px;
+  border-radius: 5px;
+  position: relative;
+  overflow: hidden;
+  background: ${colors.background.grayDark};
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: ${spacingUnit * 4.5}px;
+  }
+`;
+
+interface BackgroundImageProps {
+  image: string;
+}
+const BackgroundImage = styled.div<BackgroundImageProps>`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  background-position: center center;
+  background-size: cover;
+  background-image: url(${(p) => p.image});
+`;
+
+const PlayBackground = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  height: 35px;
+  width: 35px;
+  background-color: rgba(0, 0, 0, 0.48);
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 42px;
+    width: 42px;
+  }
+
+  .c-icon {
+    color: ${colors.white};
+    height: 20px;
+    width: 20px;
+    margin-right: -1px;
+
+    ${mq.range({ from: breakpoints.tablet })} {
+      height: 25px;
+      width: 25px;
+    }
+  }
+`;
+
+const StyledContentType = styled.p`
+  ${fonts.sizes('12px', '20px')};
+  position: absolute;
+  left: ${spacing.small};
+  bottom: ${spacing.small};
+  display: inline-block;
+  background: ${colors.brand.greyLightest};
+  border-radius: 2px;
+  font-weight: 600;
+  margin: 0;
+  padding: 0 ${spacing.xxsmall};
+
+  display: none;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: inline-block;
+  }
+`;
+
+const StyledDescription = styled.p`
+  ${fonts.sizes('16px')};
+  line-height: 1.25rem;
+  margin: 0;
+  display: none;
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: block;
+  }
+`;
 
 interface Props {
   title: string;
@@ -18,43 +130,23 @@ interface Props {
 }
 
 const ContentCard = ({ title, text, image, type, isFilm = false, toLinkProps, columnWidth }: Props) => (
-  <article {...classes()} style={{ width: `${columnWidth}px` }}>
-    <SafeLink {...toLinkProps()} title={title} {...classes('link')}>
+  <ContentCardContainer columnWidth={columnWidth}>
+    <ContentCardLink {...toLinkProps()} title={title}>
       <header>
-        <div {...classes('image-wrapper')}>
-          <div
-            {...classes('background-image')}
-            role="img"
-            aria-label={title}
-            style={{
-              backgroundImage: `url(${image})`,
-            }}
-          />
+        <ImageWrapper>
+          <BackgroundImage image={image} role="img" aria-label={title} />
           {isFilm && (
-            <div {...classes('play-background')}>
+            <PlayBackground>
               <Play />
-            </div>
+            </PlayBackground>
           )}
-          <p {...classes('type')}>{type}</p>
-        </div>
-        <h1 {...classes('heading')}>{title}</h1>
+          <StyledContentType>{type}</StyledContentType>
+        </ImageWrapper>
+        <StyledHeading>{title}</StyledHeading>
       </header>
-      <p {...classes('description')}>{text}</p>
-    </SafeLink>
-  </article>
+      <StyledDescription>{text}</StyledDescription>
+    </ContentCardLink>
+  </ContentCardContainer>
 );
 
-ContentCard.propTypes = {
-  title: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  image: PropTypes.string.isRequired,
-  isFilm: PropTypes.bool,
-  toLinkProps: PropTypes.func.isRequired,
-};
-
-ContentCard.defaultProps = {
-  isFilm: false,
-};
-
 export default ContentCard;