@ndla/ui 41.2.5 → 41.3.0

package/lib/index.d.ts

@@ -7,7 +7,7 @@
  */
 export { default as SectionHeading } from './SectionHeading';
 export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, } from './Embed';
-export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, } from './Article';
+export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from './Article';
 export { default as Table } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
@@ -26,7 +26,7 @@ export { default as FactBox, FactBoxV2 } from './FactBox';
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
 export type { ImageCrop, ImageFocalPoint } from './Image';
 export type { HeroContentType } from './Hero';
-export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, } from './Hero';
+export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, HeroContent, } from './Hero';
 export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from './Filter';
 export { Footer, EditorName, FooterText } from './Footer';
 export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton, } from './Figure';
@@ -98,4 +98,5 @@ export { Grid } from './Grid';
 export type { GridType } from './Grid';
 export { Heading } from './Typography';
 export type { HeadingLevel } from './types';
+export { default as FrontpageArticle } from './FrontpageArticle';
 export { DefinitionTerm, DefinitionDescription } from './DefinitionList';

package/lib/index.js

@@ -64,12 +64,6 @@ Object.defineProperty(exports, "ArticleIntroduction", {
     return _Article.ArticleIntroduction;
   }
 });
-Object.defineProperty(exports, "ArticleSideBar", {
-  enumerable: true,
-  get: function get() {
-    return _Article.ArticleSideBar;
-  }
-});
 Object.defineProperty(exports, "ArticleTitle", {
   enumerable: true,
   get: function get() {
@@ -454,6 +448,12 @@ Object.defineProperty(exports, "FootnoteEmbed", {
     return _Embed.FootnoteEmbed;
   }
 });
+Object.defineProperty(exports, "FrontpageArticle", {
+  enumerable: true,
+  get: function get() {
+    return _FrontpageArticle.default;
+  }
+});
 Object.defineProperty(exports, "FrontpageFilm", {
   enumerable: true,
   get: function get() {
@@ -532,6 +532,12 @@ Object.defineProperty(exports, "Hero", {
     return _Hero.Hero;
   }
 });
+Object.defineProperty(exports, "HeroContent", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.HeroContent;
+  }
+});
 Object.defineProperty(exports, "HomeBreadcrumb", {
   enumerable: true,
   get: function get() {
@@ -1331,6 +1337,7 @@ var _ContactBlock = _interopRequireDefault(require("./ContactBlock"));
 var _CampaignBlock = require("./CampaignBlock");
 var _Grid = require("./Grid");
 var _Typography = require("./Typography");
+var _FrontpageArticle = _interopRequireDefault(require("./FrontpageArticle"));
 var _DefinitionList = require("./DefinitionList");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/locale/messages-en.js

@@ -1165,7 +1165,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'In order to use the My NDLA service you have to be a student or work at a school in a county that partakes in the NDLA collaboration. We ask you not to write offensive or personally sensitive information in text fields. Read our ',
       loginTextLink: 'privacy policy here',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
-      loginResourcePitch: 'Do you want to favorite this page?',
+      loginResourcePitch: 'Do you want to favorite this resource?',
       loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',
       deleteAccount: 'Delete My NDLA',
       welcome: 'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',

package/lib/locale/messages-nb.js

@@ -1166,7 +1166,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'For å kunne bruke tjenesten Min NDLA må du være elev eller jobbe på en skole i et fylke som er med i NDLA-samarbeidet. Vi ber om at du ikke skriver noe støtende, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: {

package/lib/locale/messages-nn.js

@@ -1166,7 +1166,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'For å kunne bruke tjenesten Min NDLA må du vere elev eller jobbe på ein skule i eit fylke som er med i NDLA-samarbeidet. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne resursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! No kan du lagre favorittressursane dine frå NDLA og organisere dei i mapper og med emneknaggar.',
       read: {

package/lib/locale/messages-se.js

@@ -1166,7 +1166,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'Jus galggat sáhttit geavahit bálvalusa Mu NDLA fertet leat oahppi dahje bargat muhtin skuvllas fylkkas mii lea mielde NDLA-ovttasbarggus. Mii bivdit ahte it čále maidege unohasaid, persovdnasensitiivvalaš dieđuid dahje eará persovdnadáhtaid min teakstagieddái. Loga min ',
       loginTextLink: 'personsuodjalusjulggaštusa dákko',
       loginTerms: 'Logge Feide bokte vai oaččut beassanlobi. Go logget sisa de dohkkehat min geavahaneavttuid.',
-      loginResourcePitch: 'Dáhtut go merket siiddu oiddohin?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Bures boahtin NDLA:ii! Dáppe sáhtát fágaávdnasiid ordnet iežat vuogi mielde',
       welcome: 'Bures boahtin Mu NDLA:ii! Dál sáhtát vurket iežat oiddotresurssaid NDLA:s ja ordnet daid nu go dáhtut máhpaide ja fáddágilkoriiguin.',
       read: {

package/lib/locale/messages-sma.js

@@ -1166,7 +1166,7 @@ var messages = _objectSpread(_objectSpread({
       loginText: 'For å kunne bruke tjenesten Min NDLA må du vere elev eller jobbe på ein skule i eit fylke som er med i NDLA-samarbeidet. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
-      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "41.2.5",
+  "version": "41.3.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -36,7 +36,7 @@
     "@ndla/button": "^10.1.9",
     "@ndla/carousel": "^3.1.7",
     "@ndla/core": "^4.1.2",
-    "@ndla/forms": "^4.3.9",
+    "@ndla/forms": "^4.3.10",
     "@ndla/hooks": "^2.0.7",
     "@ndla/icons": "^3.0.5",
     "@ndla/licenses": "^7.0.4",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d5b859163608f1921fa425b333d5bbdd898c64d1"
+  "gitHead": "8f9e3f62713e77a08c6c27442e5567fd4e8282a4"
 }

package/src/Article/ArticleByline.tsx

@@ -85,6 +85,7 @@ const getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {
 const LicenseWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};
+  padding-right: ${spacing.xsmall}}
 `;
 
 const StyledAccordionHeader = styled(AccordionHeader)`

package/src/Article/index.ts

@@ -11,14 +11,12 @@ import ArticleByline from './ArticleByline';
 import ArticleContent from './ArticleContent';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
-import ArticleSideBar from './ArticleSideBar';
 
 export {
   ArticleByline,
   ArticleContent,
   ArticleFootNotes,
   ArticleHeaderWrapper,
-  ArticleSideBar,
   ArticleTitle,
   ArticleIntroduction,
   ArticleWrapper,

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -13,7 +13,7 @@ import {
 } from '@ndla/icons/contentType';
 
 import { MenuBook } from '@ndla/icons/action';
-import { Concept, Media, SquareAudio, SquareVideo } from '@ndla/icons/editor';
+import { Concept, ImageNormal, SquareAudio, SquareVideo } from '@ndla/icons/editor';
 
 import * as contentTypes from '../model/ContentType';
 
@@ -66,7 +66,7 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
       icon = <MultidisciplinaryTopic />;
       break;
     case contentTypes.resourceEmbedTypeMapping.image:
-      icon = <Media />;
+      icon = <ImageNormal />;
       embedResource = true;
       break;
     case contentTypes.resourceEmbedTypeMapping.audio:

package/src/Embed/ImageEmbed.tsx

@@ -22,6 +22,7 @@ interface Props {
   embed: ImageMetaData;
   previewAlt?: boolean;
   heartButton?: HeartButtonType;
+  inGrid?: boolean;
 }
 
 export interface Author {
@@ -98,7 +99,7 @@ const getCrop = (data: ImageEmbedData) => {
 
 const expandedSizes = '(min-width: 1024px) 1024px, 100vw';
 
-const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton }: Props) => {
+const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid }: Props) => {
   const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData.size));
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
   if (embed.status === 'error') {
@@ -133,6 +134,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton }: Props) => {
           sizes={imageSizes ?? sizes}
           alt={altText}
           src={data.image.imageUrl}
+          inGrid={inGrid}
           expandButton={
             <ExpandButton
               size={embedData.size}
@@ -151,6 +153,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton }: Props) => {
           description={embedData.caption ?? data.caption.caption}
           bottomRounded
           visibleAlt={previewAlt ? embed.embedData.alt : ''}
+          inGrid={inGrid}
         >
           {HeartButton && data.copyright.license.license.toLowerCase() !== COPYRIGHTED && <HeartButton embed={embed} />}
         </EmbedByline>

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-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 { ReactNode } from 'react';
+import { breakpoints, fonts, mq, spacing, utils } from '@ndla/core';
+import styled from '@emotion/styled';
+import { Article } from '../types';
+import LayoutItem from '../Layout';
+import { Heading } from '../Typography';
+
+interface Props {
+  article: Article;
+  children?: ReactNode;
+  id: string;
+  isWide?: boolean;
+}
+
+const StyledArticle = styled.article`
+  max-width: 773px;
+  &[data-wide='true'] {
+    max-width: 1100px;
+  }
+`;
+
+const StyledLayoutItem = styled(LayoutItem)`
+  > section {
+    > figure,
+    > iframe {
+      width: 100% !important;
+      left: 0;
+    }
+  }
+`;
+
+const StyledIntroduction = styled.div`
+  font-weight: ${fonts.weight.light};
+  font-family: ${fonts.sans};
+  margin-top: ${spacing.small};
+  ${fonts.sizes('22px', '30px')};
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin-top: ${spacing.mediumlarge};
+    ${fonts.sizes('26px', '36px')};
+  }
+`;
+
+export const FrontpageArticle = ({ article, id, isWide }: Props) => {
+  const { title, introduction, content } = article;
+
+  if (isWide) {
+    return (
+      <StyledArticle data-wide={isWide}>
+        <StyledLayoutItem>{content}</StyledLayoutItem>
+      </StyledArticle>
+    );
+  }
+
+  return (
+    <StyledArticle>
+      <StyledLayoutItem>
+        <Heading id={id} headingStyle="h1" element="h1" margin="normal" tabIndex={-1}>
+          {title}
+        </Heading>
+        <StyledIntroduction>{introduction}</StyledIntroduction>
+      </StyledLayoutItem>
+      <StyledLayoutItem>{content}</StyledLayoutItem>
+    </StyledArticle>
+  );
+};
+
+export default FrontpageArticle;

package/src/FrontpageArticle/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-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 FrontpageArticle from './FrontpageArticle';
+
+export default FrontpageArticle;

package/src/Hero/Hero.stories.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-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 styled from '@emotion/styled';
+import { Meta, StoryFn } from '@storybook/react';
+import { defaultParameters } from '../../../../stories/defaults';
+import { Hero } from './Hero';
+
+const StyledDiv = styled.div`
+  width: 1000px;
+`;
+
+export default {
+  title: 'Components/Hero',
+  component: Hero,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+    layout: 'centered',
+  },
+  args: {
+    contentType: 'assessment-resources',
+  },
+} as Meta<typeof Hero>;
+
+export const HeroStory: StoryFn<typeof Hero> = ({ ...args }) => (
+  <Hero {...args}>
+    <StyledDiv />
+  </Hero>
+);
+
+HeroStory.storyName = 'Hero';

package/src/Hero/Hero.tsx

@@ -6,15 +6,90 @@
  *
  */
 
-import React, { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
+import React, { HTMLAttributes, ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
+import {
+  ASSESSMENT_RESOURCES,
+  EXTERNAL_LEARNING_RESOURCES,
+  SOURCE_MATERIAL,
+  SUBJECT,
+  SUBJECT_MATERIAL,
+  TASKS_AND_ACTIVITIES,
+} from '../model/ContentType';
 
-import * as contentTypes from '../model/ContentType';
+const StyledDiv = styled.div`
+  background-repeat: repeat;
+  background-size: ${spacing.normal};
+  background-color: ${colors.brand.greyLightest};
 
-const classes = new BEMHelper({
-  name: 'hero',
-  prefix: 'c-',
-});
+  ${mq.range({ from: breakpoints.tablet })} {
+    min-height: 246px;
+    padding-bottom: ${spacingUnit * 6.5}px;
+  }
+
+  &[data-contenttype='subject-material'] {
+    background-color: ${colors.subjectMaterial.light};
+  }
+
+  &[data-contenttype='tasks-and-activities'] {
+    background-color: ${colors.tasksAndActivities.background};
+  }
+
+  &[data-contenttype='assessment-resources'] {
+    background-color: ${colors.assessmentResource.background};
+  }
+
+  &[data-contenttype='subject'] {
+    background-color: ${colors.subject.light};
+  }
+
+  &[data-contenttype='external-learning-resources'] {
+    background-color: ${colors.externalLearningResource.background};
+  }
+
+  &[data-contenttype='source-material'] {
+    background-color: ${colors.sourceMaterial.light};
+  }
+
+  &[data-contenttype='beta'] {
+    background-color: ${colors.brand.primary};
+  }
+
+  &[data-contenttype='ndla-film has-image'],
+  &[data-contenttype='ndla-film'] {
+    background: ${colors.ndlaFilm.filmColor};
+
+    ${mq.range({ from: breakpoints.tablet })} {
+      height: 2000px;
+      margin-bottom: -1910px;
+    }
+
+    &[data-contenttype='ndla-film has-image'] {
+      ${mq.range({ from: breakpoints.tablet })} {
+        margin-bottom: -1800px;
+        @media (min-height: 720px) {
+          margin-bottom: -1750px;
+        }
+        @media (min-height: 1020px) {
+          margin-bottom: -1700px;
+        }
+      }
+    }
+
+    ${mq.range({ until: breakpoints.tablet })} {
+      + div article.c-article {
+        margin-left: -${spacing.normal};
+        margin-right: -${spacing.normal};
+        margin-top: 0;
+        background: ${colors.white};
+        padding-left: ${spacing.normal};
+        padding-right: ${spacing.normal};
+        padding-top: ${spacing.large};
+      }
+    }
+  }
+`;
 
 export type HeroContentType =
   | 'subject-material'
@@ -27,32 +102,29 @@ export type HeroContentType =
   | 'topic'
   | 'beta'
   | 'ndla-film'
-  | 'ndla-film has-image';
+  | 'ndla-film has-image'
+  | 'frontpage-article';
 
-interface HeroProps {
-  children?: ReactNode;
+interface HeroProps extends HTMLAttributes<HTMLDivElement> {
   contentType?: HeroContentType;
 }
 
 export const Hero = ({ children, contentType }: HeroProps) => (
-  <div {...classes('', contentType)}>{children || null}</div>
+  <StyledDiv data-contenttype={contentType}>{children || null}</StyledDiv>
 );
 
 interface Props {
   children?: ReactNode;
+  hasImage?: boolean;
 }
-export const SubjectMaterialHero = (props: Props) => <Hero contentType={contentTypes.SUBJECT_MATERIAL} {...props} />;
-export const TasksAndActivitiesHero = (props: Props) => (
-  <Hero contentType={contentTypes.TASKS_AND_ACTIVITIES} {...props} />
-);
-export const AssessmentResourcesHero = (props: Props) => (
-  <Hero contentType={contentTypes.ASSESSMENT_RESOURCES} {...props} />
-);
-export const SubjectHero = (props: Props) => <Hero contentType={contentTypes.SUBJECT} {...props} />;
+export const SubjectMaterialHero = (props: Props) => <Hero contentType={SUBJECT_MATERIAL} {...props} />;
+export const TasksAndActivitiesHero = (props: Props) => <Hero contentType={TASKS_AND_ACTIVITIES} {...props} />;
+export const AssessmentResourcesHero = (props: Props) => <Hero contentType={ASSESSMENT_RESOURCES} {...props} />;
+export const SubjectHero = (props: Props) => <Hero contentType={SUBJECT} {...props} />;
 export const ExternalLearningResourcesHero = (props: Props) => (
-  <Hero contentType={contentTypes.EXTERNAL_LEARNING_RESOURCES} {...props} />
+  <Hero contentType={EXTERNAL_LEARNING_RESOURCES} {...props} />
 );
-export const SourceMaterialHero = (props: Props) => <Hero contentType={contentTypes.SOURCE_MATERIAL} {...props} />;
-export const NdlaFilmHero = ({ hasImage, ...rest }: Props & { hasImage?: boolean }) => (
+export const SourceMaterialHero = (props: Props) => <Hero contentType={SOURCE_MATERIAL} {...props} />;
+export const NdlaFilmHero = ({ hasImage, ...rest }: Props) => (
   <Hero {...rest} contentType={hasImage ? 'ndla-film has-image' : 'ndla-film'} />
 );

package/src/Hero/HeroContent.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-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 styled from '@emotion/styled';
+import { spacing, mq, breakpoints } from '@ndla/core';
+
+export const HeroContent = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  padding: ${spacing.small} 0 ${spacing.small};
+  z-index: 9;
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    min-height: 90px;
+    padding-bottom: ${spacing.xxsmall};
+
+    &[data-image='true'] {
+      min-height: 190px;
+      @media (min-height: 720px) {
+        min-height: 240px;
+      }
+      @media (min-height: 1020px) {
+        min-height: 290px;
+      }
+    }
+  }
+
+  &[data-film='true'] {
+    .c-breadcrumb__item,
+    .c-breadcrumb__item--home:after,
+    a,
+    a:focus,
+    a:hover {
+      color: #fff;
+    }
+  }
+`;

package/src/Hero/index.ts

@@ -16,5 +16,6 @@ export {
   Hero,
   NdlaFilmHero,
 } from './Hero';
+export { HeroContent } from './HeroContent';
 
 export type { HeroContentType } from './Hero';

package/src/Image/Image.tsx

@@ -7,8 +7,8 @@
  */
 
 import React, { ReactNode } from 'react';
+import { colors } from '@ndla/core';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 import LazyLoadImage from './LazyLoadImage';
 
 export interface ImageCrop {
@@ -38,22 +38,30 @@ const getSrcSet = (src: string, crop: ImageCrop | undefined, focalPoint: ImageFo
   return widths.map((width) => `${src}?${makeSrcQueryString(width, crop, focalPoint)} ${width}w`).join(', ');
 };
 
-interface StyledImageWrapperProps {
-  svg?: boolean;
-}
-
-const StyledImageWrapper = styled.div<StyledImageWrapperProps>`
+const StyledImageWrapper = styled.div`
   position: relative;
-  ${({ svg }) => {
-    return (
-      svg &&
-      css`
-      display: flex
-      justify-content: center;
-    `
-    );
-  }}
+
+  &[data-svg='true'] {
+    display: flex;
+    justify-content: center;
+  }
+  &[data-in-grid='true'] {
+    border: 1px solid ${colors.brand.tertiary};
+    border-bottom: 0;
+    border-radius: 4px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+
+const StyledImage = styled.img`
+  &[data-in-grid='true'] {
+    border-radius: 3px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 `;
+
 interface Props {
   alt: string;
   src: string;
@@ -66,6 +74,7 @@ interface Props {
   expandButton?: ReactNode;
   crop?: ImageCrop;
   focalPoint?: ImageFocalPoint;
+  inGrid?: boolean;
 }
 
 const Image = ({
@@ -79,6 +88,7 @@ const Image = ({
   sizes = '(min-width: 1024px) 1024px, 100vw',
   expandButton,
   fallbackWidth = 1024,
+  inGrid,
   ...rest
 }: Props) => {
   const srcSet = rest.srcSet ?? getSrcSet(src, crop, focalPoint);
@@ -86,8 +96,8 @@ const Image = ({
 
   if (contentType && contentType === 'image/gif') {
     return (
-      <StyledImageWrapper>
-        <img alt={alt} src={`${src}`} {...rest} />
+      <StyledImageWrapper data-in-grid={inGrid}>
+        <StyledImage alt={alt} src={`${src}`} {...rest} data-in-grid={inGrid} />
       </StyledImageWrapper>
     );
   }
@@ -107,10 +117,10 @@ const Image = ({
   }
 
   return (
-    <StyledImageWrapper svg={contentType === 'image/svg+xml'}>
+    <StyledImageWrapper data-svg={contentType === 'image/svg+xml'} data-in-grid={inGrid}>
       <picture>
         <source type={contentType} srcSet={srcSet} sizes={sizes} />
-        <img alt={alt} src={`${src}?${queryString}`} {...rest} />
+        <StyledImage alt={alt} src={`${src}?${queryString}`} {...rest} data-in-grid={inGrid} />
       </picture>
       {expandButton}
     </StyledImageWrapper>