@ndla/ui 30.2.2 → 30.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.2.2",
+  "version": "30.3.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "59dd89b5b9e2fac70fab88afc61953673f6c4bfa"
+  "gitHead": "f9ee8725e9d18a8bf738babad7d4b65ee50a9cab"
 }

package/src/MultidisciplinarySubject/MultidisciplinarySubject.tsx

@@ -90,9 +90,10 @@ type Props = {
   children: ReactNode;
   totalCardCount: number;
   hideCards?: boolean;
+  id?: string;
 };
 
-export const MultidisciplinarySubject = ({ cards, children, totalCardCount, hideCards }: Props) => {
+export const MultidisciplinarySubject = ({ cards, children, totalCardCount, hideCards, id }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledWrapper>
@@ -100,7 +101,9 @@ export const MultidisciplinarySubject = ({ cards, children, totalCardCount, hide
         <OneColumn wide>
           <Header>
             <LayoutItem layout="extend">
-              <Heading>{t('frontpageMultidisciplinarySubject.heading')}</Heading>
+              <Heading id={id} tabIndex={-1}>
+                {t('frontpageMultidisciplinarySubject.heading')}
+              </Heading>
               <InfoText>{t('frontpageMultidisciplinarySubject.text')}</InfoText>
             </LayoutItem>
             <Illustration />

package/src/Resource/BlockResource.tsx

@@ -89,6 +89,8 @@ const ImageWrapper = styled.div`
   overflow: hidden;
   align-items: center;
   img {
+    object-fit: cover;
+    aspect-ratio: 4/3;
     min-width: 100%;
   }
 `;

package/src/Resource/ListResource.tsx

@@ -106,6 +106,7 @@ const TagsandActionMenu = styled.div<TagsAndActionProps>`
   grid-template-columns: 1fr auto auto;
   align-items: center;
   align-self: flex-start;
+  justify-items: flex-end;
   margin: -${spacing.small} -${(props) => (props.hasMenuButton ? spacing.small : 0)} 0 0;
   ${mq.range({ until: breakpoints.mobileWide })} {
     margin: 0 -${(props) => (props.hasMenuButton ? spacing.small : 0)} -${spacing.small} 0;

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -39,18 +39,21 @@ const Introduction = styled.p`
   }
 `;
 
-type Props = {
+interface Props {
+  id?: string;
   title: string;
   introduction: string;
   topics: ItemProps[];
   onSelectTopic?: (event: MouseEvent<HTMLElement>, id?: string) => void;
-};
+}
 
-const ToolboxInfo = ({ title, introduction, topics, onSelectTopic }: Props) => {
+const ToolboxInfo = ({ title, introduction, topics, onSelectTopic, id }: Props) => {
   const { t } = useTranslation();
   return (
     <>
-      <Heading>{title}</Heading>
+      <Heading id={id} tabIndex={-1}>
+        {title}
+      </Heading>
       <Introduction>{introduction}</Introduction>
       <NavigationBox
         items={topics}

package/src/Topic/Topic.tsx

@@ -215,6 +215,7 @@ type VisualElementProps = {
 };
 
 export type TopicProps = {
+  id?: string;
   topic?: {
     title: string;
     introduction: string;
@@ -241,6 +242,7 @@ export type TopicProps = {
 };
 
 const Topic = ({
+  id,
   topic,
   subTopics,
   onSubTopicSelected,
@@ -323,7 +325,7 @@ const Topic = ({
                   )}
                 </TopicHeaderVisualElementWrapper>
               )}
-              <TopicHeading invertedStyle={invertedStyle}>
+              <TopicHeading invertedStyle={invertedStyle} id={id} tabIndex={-1}>
                 <StyledHeadingText>{topic.title}</StyledHeadingText>
                 {isAdditionalTopic && (
                   <StyledAdditionalResource>