@ndla/ui 11.1.5 → 12.0.0

package/lib/locale/messages-nb.js

@@ -487,7 +487,7 @@ var messages = _objectSpread(_objectSpread({
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',

package/lib/locale/messages-nn.js

@@ -487,7 +487,7 @@ var messages = _objectSpread(_objectSpread({
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettstader',
+    footerLinksHeader: 'Andre NDLA-nettstader',
     footerInfo: 'Nettstaden er utarbeida av NDLA med open kjeldekode.',
     footerEditiorInChief: 'Ansvarleg redaktør: ',
     footerManagingEditor: 'Utgåveansvarleg: ',

package/lib/locale/messages-se.js

@@ -487,7 +487,7 @@ var messages = _objectSpread(_objectSpread({
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',

package/lib/locale/messages-sma.js

@@ -487,7 +487,7 @@ var messages = _objectSpread(_objectSpread({
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "11.1.5",
+  "version": "12.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -36,9 +36,9 @@
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.4",
     "@ndla/icons": "^1.7.0",
-    "@ndla/licenses": "^4.1.0",
+    "@ndla/licenses": "^4.1.1",
     "@ndla/modal": "^1.2.7",
-    "@ndla/notion": "^3.1.4",
+    "@ndla/notion": "^3.1.5",
     "@ndla/safelink": "^1.1.7",
     "@ndla/switch": "^0.1.5",
     "@ndla/tabs": "^1.1.5",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "12c85e9d1f1e9f9e482e3bb8edd093fade651809"
+  "gitHead": "28f46a3c20d71e0148dc35e1d24dc13f97cc3a31"
 }

package/src/Article/component.article.scss

@@ -25,7 +25,7 @@
   position: relative;
 
   mjx-stretchy-v > mjx-ext > mjx-c {
-    transform: scaleY(200) translateY(0.075em);
+    transform: scaleY(100) translateY(0.075em);
   }
 
   > section > p {

package/src/ResourceBox/ResourceBox.tsx

@@ -7,7 +7,7 @@
  *
  */
 import React from 'react';
-import { breakpoints, fonts, mq, colors } from '@ndla/core';
+import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Launch } from '@ndla/icons/common';
 import { LicenseByline } from '@ndla/licenses';
@@ -17,18 +17,18 @@ import Image from '../Image';
 
 const ResourceBoxContainer = styled.div`
   display: flex;
-  padding: 20px;
+  position: relative;
+  padding: ${spacing.nsmall};
   border-radius: 5px;
   border: 1px solid ${colors.brand.light};
-  position: relative;
   font-family: ${fonts.sans};
   box-shadow: 0px 20px 35px -15px rgba(32, 88, 143, 0.15);
-  gap: 40px;
+  gap: ${spacing.medium};
 
   ${mq.range({ until: breakpoints.desktop })} {
     gap: 0;
     flex-direction: column;
-    padding-top: 30px;
+    padding-top: ${spacing.medium};
     text-align: center;
   }
 `;
@@ -41,40 +41,34 @@ const Title = styled.h3`
 
 const Caption = styled.p`
   font-size: ${fonts.sizes(14)};
-  max-width: 600px;
-
-  ${mq.range({ until: breakpoints.desktop })} {
-    line-height: 22px;
-  }
 `;
 
-const TextWrapper = styled.div`
+const ContentWrapper = styled.div`
+  flex-basis: 0;
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   ${mq.range({ until: breakpoints.desktop })} {
     align-items: center;
-    padding-top: 10px;
+    padding-top: ${spacing.small};
   }
 `;
 
 const StyledButton = styled(SafeLinkButton)`
+  display: flex;
+  gap: ${spacing.xxsmall};
+  align-items: center;
   border: 1px solid ${colors.brand.tertiary};
   :hover {
     background-color: ${colors.brand.primary};
     border: 1px solid ${colors.brand.primary};
-    color: white;
+    color: ${colors.white};
   }
 `;
 
-const StyledLaunchIcon = styled(Launch)`
-  margin-left: 8px;
-  height: 15px;
-  width: 15px;
-`;
-
-const ImageWrapper = styled.div`
-  img {
+const StyledImage = styled(Image)`
+  && {
     object-fit: cover;
     width: 134px;
     height: 134px;
@@ -88,46 +82,49 @@ const ImageWrapper = styled.div`
 `;
 
 const LincenseWrapper = styled.div`
-  top: 9px;
   position: absolute;
-  right: 1px;
-  ul {
-    margin-right: 0;
-  }
+  top: 9px;
+  right: 0;
 `;
 
-type Props = {
-  image: string;
+interface ImageMeta {
+  src: string;
+  alt: string;
+}
+
+interface Props {
+  image: ImageMeta;
   title: string;
   caption: string;
   licenseRights: string[];
-  authors?: { name: string }[];
+  authors?: string[];
   locale?: string;
   url: string;
-};
+}
+
 export const ResourceBox = ({ image, title, caption, licenseRights, locale, authors, url }: Props) => {
   const { t } = useTranslation();
   return (
     <ResourceBoxContainer>
       <LincenseWrapper>
         <LicenseByline licenseRights={licenseRights} locale={locale} marginRight color={colors.brand.tertiary}>
-          <div className="c-figure__byline-author-buttons">
-            <span className="c-figure__byline-authors">{authors?.map((author) => author.name).join(' ')}</span>
-          </div>
+          {authors && authors.length > 0 && (
+            <div className="c-figure__byline-author-buttons">
+              <span className="c-figure__byline-authors">{authors.join(' ')}</span>
+            </div>
+          )}
         </LicenseByline>
       </LincenseWrapper>
-      <ImageWrapper>
-        <Image alt={title} src={image} />
-      </ImageWrapper>
-      <TextWrapper>
+      <StyledImage src={image.src} alt={image.alt} />
+      <ContentWrapper>
         <Title>{title}</Title>
         <Caption>{caption}</Caption>
 
         <StyledButton to={url} target="_blank" outline borderShape="rounded">
           {t('license.other.itemImage.ariaLabel')}
-          <StyledLaunchIcon aria-hidden />
+          <Launch aria-hidden />
         </StyledButton>
-      </TextWrapper>
+      </ContentWrapper>
     </ResourceBoxContainer>
   );
 };

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import parse from 'html-react-parser';
 
@@ -173,13 +173,14 @@ export type SearchItemProps = {
   img?: { url: string; alt: string };
   labels?: string[];
   type?: ContentType;
+  children?: ReactNode;
 };
 export type SearchItemType = {
   item: SearchItemProps;
   type?: ContentType;
 };
 const SearchItem = ({ item, type }: SearchItemType) => {
-  const { title, url, ingress, contexts, img = null, labels = [] } = item;
+  const { title, url, ingress, contexts, img = null, labels = [], children } = item;
 
   const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
 
@@ -209,6 +210,7 @@ const SearchItem = ({ item, type }: SearchItemType) => {
             {contexts && contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
           </ContextWrapper>
         </ItemLink>
+        {children}
       </ItemWrapper>
     </Container>
   );

package/src/locale/messages-nb.ts

@@ -518,7 +518,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',

package/src/locale/messages-nn.ts

@@ -519,7 +519,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettstader',
+    footerLinksHeader: 'Andre NDLA-nettstader',
     footerInfo: 'Nettstaden er utarbeida av NDLA med open kjeldekode.',
     footerEditiorInChief: 'Ansvarleg redaktør: ',
     footerManagingEditor: 'Utgåveansvarleg: ',

package/src/locale/messages-se.ts

@@ -518,7 +518,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',

package/src/locale/messages-sma.ts

@@ -518,7 +518,7 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA nettsteder',
+    footerLinksHeader: 'Andre NDLA-nettsteder',
     footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
     footerEditiorInChief: 'Ansvarlig redaktør: ',
     footerManagingEditor: 'Utgaveansvarlig: ',