@ndla/ui 42.0.3 → 42.0.5

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

@@ -262,9 +262,11 @@ declare const messages: {
         contact: string;
         help: string;
     };
-    programme: {
+    programmes: {
+        header: string;
+        description: string;
         grades: string;
-        accordianHeader: string;
+        accordionHeader: string;
     };
     embed: {
         conceptListError: string;

package/lib/locale/messages-en.js

@@ -1264,9 +1264,11 @@ var messages = _objectSpread(_objectSpread({
     contact: 'Contact',
     help: 'Help'
   },
-  programme: {
+  programmes: {
+    header: 'View our educational programmes',
+    description: 'We strive to offer the best learning resources within traditional and new media.',
     grades: 'Grades',
-    accordianHeader: 'All educational programmes'
+    accordionHeader: 'All educational programmes'
   },
   embed: {
     conceptListError: 'Failed to show concept list',

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

@@ -262,9 +262,11 @@ declare const messages: {
         contact: string;
         help: string;
     };
-    programme: {
+    programmes: {
+        header: string;
+        description: string;
         grades: string;
-        accordianHeader: string;
+        accordionHeader: string;
     };
     embed: {
         conceptListError: string;

package/lib/locale/messages-nb.js

@@ -1262,9 +1262,11 @@ var messages = _objectSpread(_objectSpread({
     contact: 'Kontakt',
     help: 'Hjelp'
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
     grades: 'Trinn',
-    accordianHeader: 'Alle utdanningsprogram'
+    accordionHeader: 'Alle utdanningsprogram'
   },
   embed: {
     conceptListError: 'Klarte ikke å vise forklaringsliste',

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

@@ -262,9 +262,11 @@ declare const messages: {
         contact: string;
         help: string;
     };
-    programme: {
+    programmes: {
+        header: string;
+        description: string;
         grades: string;
-        accordianHeader: string;
+        accordionHeader: string;
     };
     embed: {
         conceptListError: string;

package/lib/locale/messages-nn.js

@@ -1262,9 +1262,11 @@ var messages = _objectSpread(_objectSpread({
     contact: 'Kontakt',
     help: 'Hjelp'
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby dei beste læringsressursane innan tradisjonelle og nye media.',
     grades: 'Trinn',
-    accordianHeader: 'Alle utdanningsprogram'
+    accordionHeader: 'Alle utdanningsprogram'
   },
   embed: {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',

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

@@ -262,9 +262,11 @@ declare const messages: {
         contact: string;
         help: string;
     };
-    programme: {
+    programmes: {
+        header: string;
+        description: string;
         grades: string;
-        accordianHeader: string;
+        accordionHeader: string;
     };
     embed: {
         conceptListError: string;

package/lib/locale/messages-se.js

@@ -1262,9 +1262,11 @@ var messages = _objectSpread(_objectSpread({
     contact: 'Váldde oktavuođa',
     help: 'Veahket'
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
     grades: 'Ceahkki',
-    accordianHeader: 'Alle utdanningsprogram'
+    accordionHeader: 'Alle utdanningsprogram'
   },
   embed: {
     conceptListError: 'Ii sáhttán čájehit čilgehuslisttu',

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

@@ -262,9 +262,11 @@ declare const messages: {
         contact: string;
         help: string;
     };
-    programme: {
+    programmes: {
+        header: string;
+        description: string;
         grades: string;
-        accordianHeader: string;
+        accordionHeader: string;
     };
     embed: {
         conceptListError: string;

package/lib/locale/messages-sma.js

@@ -1262,9 +1262,11 @@ var messages = _objectSpread(_objectSpread({
     contact: 'Kontakt',
     help: 'Hjelp'
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
     grades: 'Trinn',
-    accordianHeader: 'Alle utdanningsprogram'
+    accordionHeader: 'Alle utdanningsprogram'
   },
   embed: {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "42.0.3",
+  "version": "42.0.5",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ac4799295c3e85112df9074b5c6f5e23f0adc04"
+  "gitHead": "b355806f2071434f06fb2e0205dcdb4dccb4d7e4"
 }

package/src/List/OrderedList.tsx

@@ -41,51 +41,60 @@ const StyledOl = styled.ol`
       margin-bottom: ${spacing.nsmall} !important;
     }
   }
+  counter-reset: level1;
 
   &[data-type='letters'] {
-    counter-reset: item 0;
     > li {
-      counter-increment: item;
       &:before {
-        position: absolute;
-        transform: translateX(-100%);
-        content: counter(item, upper-alpha) '.';
-        padding-right: ${spacing.nsmall};
+        content: counter(level1, upper-alpha) '.';
       }
 
       > ol[data-type='letters'] {
         > li:before {
-          content: counter(item, lower-alpha) '.';
+          content: counter(level1, lower-alpha) '.';
         }
         ol[data-type='letters'] {
           > li:before {
-            content: counter(item, lower-roman) '.';
+            content: counter(level1, lower-roman) '.';
           }
         }
       }
     }
   }
 
-  &:not([data-type='letters']) {
-    counter-reset: item 0;
-    > li {
-      counter-increment: item;
-      &:before {
-        position: absolute;
-        transform: translateX(-100%);
-        content: counters(item, '.') '.';
-        padding-right: ${spacing.nsmall};
-      }
+  > li {
+    counter-increment: level1;
+    &:before {
+      position: absolute;
+      transform: translateX(-100%);
+      content: counter(level1, decimal) '.';
+      padding-right: ${spacing.nsmall};
+    }
 
-      > ol:not([data-type='letters']) {
-        > li {
-          padding-left: ${spacing.nsmall};
-          > ol:not([data-type='letters']) {
-            > li {
-              padding-left: ${spacing.medium};
-              > ol:not([data-type='letters']) {
-                > li {
-                  padding-left: ${spacing.large};
+    > ol:not([data-type='letters']) {
+      counter-reset: level2;
+      > li {
+        padding-left: ${spacing.nsmall};
+        counter-increment: level2;
+        &:before {
+          content: counter(level1, decimal) '.' counter(level2, decimal) '.';
+        }
+        > ol:not([data-type='letters']) {
+          counter-reset: level3;
+          > li {
+            padding-left: ${spacing.medium};
+            counter-increment: level3;
+            &:before {
+              content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.';
+            }
+            > ol:not([data-type='letters']) {
+              counter-reset: level4;
+              > li {
+                padding-left: ${spacing.large};
+                counter-increment: level4;
+                &:before {
+                  content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.'
+                    counter(level4, decimal) '.';
                 }
               }
             }

package/src/Programme/ProgrammeSubjects.tsx

@@ -24,7 +24,7 @@ const GradesMenu = styled.ul`
 
 export type GradesProps = {
   selectedGrade?: string;
-  grades: {
+  grades?: {
     missingProgrammeSubjects?: boolean;
     name: string;
     categories?: {
@@ -45,14 +45,14 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
   const { t } = useTranslation();
 
   const grade = useMemo(
-    () => grades.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades[0],
+    () => grades?.find((grade) => grade.name.toLowerCase() === selectedGrade) ?? grades?.[0],
     [grades, selectedGrade],
   );
 
   return (
     <>
-      <GradesMenu aria-label={t('programme.grades')}>
-        {grades.map((item) => {
+      <GradesMenu aria-label={t('programmes.grades')}>
+        {grades?.map((item) => {
           const current = item.name.toLowerCase() === selectedGrade;
           return (
             <li key={item.name}>
@@ -69,8 +69,8 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
           );
         })}
       </GradesMenu>
-      {grade.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
-      {grade.categories?.map((category) => (
+      {grade?.missingProgrammeSubjects && <MessageBox>{t('messageBoxInfo.noContent')}</MessageBox>}
+      {grade?.categories?.map((category) => (
         <NavigationBox key={category.name} heading={category.name} items={category.subjects} onClick={onNavigate} />
       ))}
     </>

package/src/ProgrammeCard/ProgrammeCard.tsx

@@ -20,8 +20,8 @@ export interface Programme {
     title: string;
     language: string;
   };
-  desktopImage: Image;
-  mobileImage: Image;
+  narrowImage?: Image;
+  wideImage?: Image;
   url: string;
 }
 
@@ -79,11 +79,11 @@ const StyledTitle = styled.span`
   }
 `;
 
-const ProgrammeCard = ({ title, desktopImage, mobileImage, url }: Programme) => {
+const ProgrammeCard = ({ title, narrowImage, wideImage, url }: Programme) => {
   return (
     <StyledCardContainer to={url}>
-      <StyledImg data-is-mobile="false" src={desktopImage.src} alt={desktopImage.alt} />
-      <StyledImg data-is-mobile="true" src={mobileImage.src} alt={mobileImage.alt} />
+      {narrowImage && <StyledImg data-is-mobile="false" src={narrowImage.src} alt={narrowImage.alt} />}
+      {wideImage && <StyledImg data-is-mobile="true" src={wideImage.src} alt={wideImage.alt} />}
       <StyledTitle>{title.title}</StyledTitle>
     </StyledCardContainer>
   );

package/src/global/components/component.bodybox.scss

@@ -31,22 +31,6 @@
   }
 }
 
-/* Hacks for complex content fetched inside bodybox */
-.c-bodybox > ul:not([class]),
-.c-bodybox :not(li) > ul:not([class]) {
-  @include mq(desktop) {
-    margin-left: $spacing;
-  }
-}
-
-.c-bodybox > ol:not([class]),
-.c-bodybox :not(li) > ol:not([class]),
-.c-bodybox .ol-list--roman {
-  @include mq(desktop) {
-    margin-left: $spacing--large;
-  }
-}
-
 .c-bodybox {
   .c-figure {
     width: 100% !important;

package/src/locale/messages-en.ts

@@ -1307,9 +1307,11 @@ const messages = {
     contact: 'Contact',
     help: 'Help',
   },
-  programme: {
+  programmes: {
+    header: 'View our educational programmes',
+    description: 'We strive to offer the best learning resources within traditional and new media.',
     grades: 'Grades',
-    accordianHeader: 'All educational programmes',
+    accordionHeader: 'All educational programmes',
   },
   embed: {
     conceptListError: 'Failed to show concept list',

package/src/locale/messages-nb.ts

@@ -1303,9 +1303,11 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
     grades: 'Trinn',
-    accordianHeader: 'Alle utdanningsprogram',
+    accordionHeader: 'Alle utdanningsprogram',
   },
   embed: {
     conceptListError: 'Klarte ikke å vise forklaringsliste',

package/src/locale/messages-nn.ts

@@ -1303,9 +1303,11 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby dei beste læringsressursane innan tradisjonelle og nye media.',
     grades: 'Trinn',
-    accordianHeader: 'Alle utdanningsprogram',
+    accordionHeader: 'Alle utdanningsprogram',
   },
   embed: {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',

package/src/locale/messages-se.ts

@@ -1304,9 +1304,11 @@ const messages = {
     contact: 'Váldde oktavuođa',
     help: 'Veahket',
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
     grades: 'Ceahkki',
-    accordianHeader: 'Alle utdanningsprogram',
+    accordionHeader: 'Alle utdanningsprogram',
   },
   embed: {
     conceptListError: 'Ii sáhttán čájehit čilgehuslisttu',

package/src/locale/messages-sma.ts

@@ -1308,9 +1308,11 @@ const messages = {
     contact: 'Kontakt',
     help: 'Hjelp',
   },
-  programme: {
+  programmes: {
+    header: 'Se våre utdanningsprogram',
+    description: 'Vi ønsker å tilby de beste læringsressursene innen tradisjonelle og nye medier.',
     grades: 'Trinn',
-    accordianHeader: 'Alle utdanningsprogram',
+    accordionHeader: 'Alle utdanningsprogram',
   },
   embed: {
     conceptListError: 'Klarte ikkje å vise forklaringsliste',