@ndla/ui 50.7.2 → 50.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.7.2",
+  "version": "50.8.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.17",
-    "@ndla/button": "^12.0.22",
-    "@ndla/carousel": "^4.0.22",
-    "@ndla/core": "^4.3.2",
-    "@ndla/dropdown-menu": "^1.0.22",
-    "@ndla/forms": "^5.2.12",
+    "@ndla/accordion": "^3.0.19",
+    "@ndla/button": "^12.0.24",
+    "@ndla/carousel": "^4.0.24",
+    "@ndla/core": "^4.3.3",
+    "@ndla/dropdown-menu": "^1.0.23",
+    "@ndla/forms": "^5.2.14",
     "@ndla/hooks": "^2.1.4",
-    "@ndla/icons": "^5.0.1",
+    "@ndla/icons": "^5.0.3",
     "@ndla/licenses": "^7.2.4",
-    "@ndla/modal": "^5.0.21",
-    "@ndla/notion": "^6.0.22",
-    "@ndla/safelink": "^4.1.47",
-    "@ndla/select": "^3.2.8",
-    "@ndla/switch": "^1.1.28",
-    "@ndla/tabs": "^3.2.8",
-    "@ndla/tooltip": "^6.0.10",
-    "@ndla/typography": "^0.4.5",
+    "@ndla/modal": "^5.0.23",
+    "@ndla/notion": "^6.0.24",
+    "@ndla/safelink": "^4.1.49",
+    "@ndla/select": "^3.2.10",
+    "@ndla/switch": "^1.1.29",
+    "@ndla/tabs": "^3.2.9",
+    "@ndla/tooltip": "^6.0.11",
+    "@ndla/typography": "^0.4.6",
     "@ndla/util": "^4.0.3",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.11",
+    "@ndla/types-embed": "^4.0.12",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e7073784c24f3d52c8632a7e1e14954667f74897"
+  "gitHead": "e5630a5aabe1bb29936ed0308dc2b8e5620cf8f9"
 }

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -32,8 +32,7 @@ interface AutoCollapseProps {
 }
 
 const StyledListItem = styled.li<AutoCollapseProps>`
-  margin-bottom: 0;
-  margin-left: 0;
+  padding: 0;
   display: inline-flex;
   align-items: center;
   :before {

package/src/CampaignBlock/CampaignBlock.tsx

@@ -29,9 +29,9 @@ interface Props {
     language: string;
   };
   headingLevel?: HeadingLevel;
-  url?: {
-    url: string;
-    text: string;
+  url: {
+    url?: string;
+    text?: string;
   };
   image?: Image;
   imageSide?: 'left' | 'right';
@@ -104,7 +104,7 @@ const CampaignBlock = ({
         <StyledDescription lang={description.language === 'nb' ? 'no' : description.language}>
           {description.text}
         </StyledDescription>
-        {url && (
+        {url.url && (
           <StyledLink to={getPossiblyRelativeUrl(url.url, path)}>
             {url.text}
             <Forward />

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -36,7 +36,6 @@ const GoalsInfo = styled.p`
 `;
 
 const GoalList = styled.ul`
-  margin: 0;
   padding: 0;
   list-style-type: none;
 `;

package/src/CompetenceGoalTab/styles.ts

@@ -21,6 +21,7 @@ export const ListItemContent = styled.div`
 export const GoalItem = styled.li`
   margin: ${spacing.medium} 0;
   border-bottom: 1px solid ${colors.brand.neutral7};
+  padding: 0;
 `;
 
 export const GoalsHeading = styled.h3`

package/src/Embed/conceptComponents.tsx

@@ -160,7 +160,6 @@ const StyledList = styled.ul`
   align-items: center;
   list-style: none;
   > li {
-    margin: 0;
     font-family: ${fonts.sans};
     font-weight: ${fonts.weight.semibold};
     border-radius: ${misc.borderRadius};

package/src/FileList/FileList.tsx

@@ -33,7 +33,6 @@ const FileListHeaderWrapper = styled.div`
 `;
 
 const FilesList = styled.ul`
-  margin: 0;
   padding: 0;
 `;
 

package/src/Filter/FilterButtons.tsx

@@ -35,7 +35,6 @@ const StyledButtonElementWrapper = styled.div`
 
 const StyledList = styled.ul`
   list-style: none;
-  margin: 0;
   padding: 0;
   ${mq.range({ from: breakpoints.tablet })} {
     column-count: 2;
@@ -47,7 +46,7 @@ const StyledList = styled.ul`
   }
 `;
 const StyledListItem = styled.li`
-  margin-bottom: 0;
+  padding-bottom: 0;
   break-inside: avoid;
 `;
 

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -26,15 +26,15 @@ const StyledList = styled.ul`
   padding: 0;
   ${mq.range({ from: breakpoints.tablet })} {
     column-count: 2;
-    column-gap: 20px;
+    gap: 20px;
   }
   ${mq.range({ from: breakpoints.tabletWide })} {
     column-count: 3;
-    column-gap: 20px;
+    gap: 20px;
   }
 `;
 const StyledListItem = styled.li`
-  margin-bottom: 0;
+  padding: 0;
   break-inside: avoid;
 `;
 

package/src/LearningPaths/LearningPathInformation.tsx

@@ -20,6 +20,9 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
   background: transparent;
   max-width: 720px;
   margin: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.xsmall} 0 !important;
+  ul {
+    padding-left: ${spacing.normal};
+  }
   ${mq.range({ from: breakpoints.desktop })} {
     margin: ${spacingUnit * 0.75}px ${spacing.normal} ${spacing.xsmall} 0 !important;
     padding: ${spacing.normal} ${spacing.large} ${spacing.large} ${spacing.xxlarge};
@@ -30,9 +33,6 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
   ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
     margin: 0;
     padding: ${spacing.small} ${spacing.normal};
-    ul {
-      padding: 0 ${spacingUnit * 0.75}px;
-    }
   }
   ${mq.range({ from: breakpoints.tablet })} {
     ${(props) =>
@@ -45,8 +45,7 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
 
 const LicenseWrapper = styled.div`
   ul {
-    margin-left: 0;
-    margin-bottom: ${spacing.small};
+    padding-left: 0;
   }
 `;
 

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -27,7 +27,7 @@ type StyledMenuItemProps = {
 };
 
 const StyledMenuItem = styled.li<StyledMenuItemProps>`
-  margin: 0;
+  padding: 0;
   a {
     box-shadow: none;
     display: inline-flex;
@@ -153,7 +153,6 @@ type StyledNavigationProps = {
 const StyledNavigation = styled.nav<StyledNavigationProps>`
   > ul {
     list-style: none;
-    margin: 0;
     padding: 0;
   }
   margin-bottom: ${spacing.medium};

package/src/LinkBlock/LinkBlockSection.tsx

@@ -20,10 +20,8 @@ const StyledList = styled.ul`
   gap: ${spacing.small};
   list-style: none;
   padding: 0px;
-  margin: 0px;
   li {
     padding: 0px;
-    margin: 0px;
   }
 `;
 

package/src/List/OrderedList.stories.tsx

@@ -49,7 +49,7 @@ export const Default: StoryObj = {};
 
 export const Letters: StoryObj = {
   args: {
-    'data-type': 'letters',
+    type: 'letters',
   },
 };
 
@@ -69,7 +69,7 @@ export const WithNumbersAndLetters: StoryFn = () => (
             <li>Listepunkt 2</li>
             <li>
               Listepunkt 3
-              <OrderedList data-type="letters">
+              <OrderedList>
                 <li>Listepunkt 1</li>
                 <li>Listepunkt 2</li>
                 <li>Listepunkt 3</li>
@@ -84,7 +84,7 @@ export const WithNumbersAndLetters: StoryFn = () => (
 );
 
 export const StartingAtFive: StoryFn = () => (
-  <OrderedList start={5} className="ol-reset-5">
+  <OrderedList start={5} data-type="letters" className="ol-reset-5">
     <li>Listepunkt 1</li>
     <li>Listepunkt 2</li>
     <li>
@@ -99,7 +99,7 @@ export const StartingAtFive: StoryFn = () => (
             <li>Listepunkt 2</li>
             <li>
               Listepunkt 3
-              <OrderedList className="ol-reset-5" data-type="letters" start={5}>
+              <OrderedList className="ol-reset-5" start={5}>
                 <li>Listepunkt 1</li>
                 <li>Listepunkt 2</li>
                 <li>Listepunkt 3</li>
@@ -112,3 +112,26 @@ export const StartingAtFive: StoryFn = () => (
     <li>Listepunkt 4</li>
   </OrderedList>
 );
+
+export const NoStyle: StoryFn = () => (
+  <ol>
+    <li>Listepunkt 1</li>
+    <li>Listepunkt 2</li>
+    <li>
+      Listepunkt 3
+      <ol>
+        <li>Listepunkt 1</li>
+        <li>Listepunkt 2</li>
+        <li>
+          Listepunkt 3
+          <ol>
+            <li>Listepunkt 1</li>
+            <li>Listepunkt 2</li>
+            <li>Listepunkt 3</li>
+          </ol>
+        </li>
+      </ol>
+    </li>
+    <li>Listepunkt 4</li>
+  </ol>
+);

package/src/List/OrderedList.tsx

@@ -7,6 +7,7 @@
  */
 
 import { forwardRef, HTMLAttributes } from 'react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { fonts, spacing } from '@ndla/core';
 
@@ -21,65 +22,62 @@ export const generateListResets = (counterName: string) => {
   return styles;
 };
 
-const StyledOl = styled.ol`
-  margin-top: 0;
-  margin-left: ${spacing.normal};
-  ${fonts.sizes('18px', '29px')};
-  list-style-type: none;
-  padding-left: ${spacing.medium} !important;
-
-  // Child ordered lists
-  ol {
-    padding-left: ${spacing.medium};
-    margin-left: 0;
-  }
-  // List item
-  li {
-    margin-top: ${spacing.nsmall};
+export const LetterCSS = css`
+  padding-left: ${spacing.medium};
+  > li {
+    counter-increment: level1;
 
-    p {
-      margin-bottom: ${spacing.nsmall} !important;
+    :before {
+      content: counter(level1, upper-alpha) '.';
     }
-  }
-  counter-reset: level1;
-  ${generateListResets('level1')};
-
-  &[data-type='letters'] {
-    > li {
-      &:before {
-        content: counter(level1, upper-alpha) '.';
-      }
-
-      > ol[data-type='letters'] {
-        > li:before {
+    > ol[data-type='letters'] {
+      > li {
+        :before {
           content: counter(level1, lower-alpha) '.';
         }
-        ol[data-type='letters'] {
-          > li:before {
-            content: counter(level1, lower-roman) '.';
+        > ol[data-type='letters'] {
+          padding-left: 0;
+          > li {
+            padding-left: ${spacing.normal};
+            :before {
+              left: ${spacing.small};
+              position: absolute;
+              content: counter(level1, lower-roman) '.';
+              transform: translateX(-100%);
+            }
+            > ol[data-type='letters'] {
+              padding-left: 0;
+              > li {
+                padding-left: ${spacing.normal};
+                :before {
+                  left: ${spacing.small};
+                  position: absolute;
+                  content: counter(level1, lower-roman) '.';
+                  transform: translateX(-100%);
+                }
+              }
+            }
           }
         }
       }
     }
   }
+`;
 
+export const NumberCSS = css`
+  padding-left: ${spacing.normal};
   > li {
-    min-height: ${spacing.normal};
     counter-increment: level1;
-    &:before {
-      position: absolute;
-      transform: translateX(-100%);
+    :before {
       content: counter(level1, decimal) '.';
-      padding-right: ${spacing.nsmall};
     }
-
     > ol:not([data-type='letters']) {
       counter-reset: level2;
       ${generateListResets('level2')};
       > li {
         padding-left: ${spacing.nsmall};
         counter-increment: level2;
-        &:before {
+        :before {
           content: counter(level1, decimal) '.' counter(level2, decimal) '.';
         }
         > ol:not([data-type='letters']) {
@@ -88,7 +86,7 @@ const StyledOl = styled.ol`
           > li {
             padding-left: ${spacing.medium};
             counter-increment: level3;
-            &:before {
+            :before {
               content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.';
             }
             > ol:not([data-type='letters']) {
@@ -97,7 +95,7 @@ const StyledOl = styled.ol`
               > li {
                 padding-left: ${spacing.large};
                 counter-increment: level4;
-                &:before {
+                :before {
                   content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.'
                     counter(level4, decimal) '.';
                 }
@@ -110,6 +108,38 @@ const StyledOl = styled.ol`
   }
 `;
 
+const StyledOl = styled.ol`
+  ${fonts.sizes('18px', '29px')};
+  ${generateListResets('level1')};
+  padding: 0;
+  list-style-type: none;
+  counter-reset: level1;
+
+  margin-left: ${spacing.normal};
+
+  > li {
+    margin-top: ${spacing.nsmall};
+    padding-top: 0;
+    position: relative;
+    ::before {
+      position: absolute;
+      left: -${spacing.normal};
+    }
+    > ol {
+      padding-bottom: 0;
+      margin-left: 0;
+    }
+  }
+
+  &:not([data-type='letters']) {
+    ${NumberCSS}
+  }
+
+  &[data-type='letters'] {
+    ${LetterCSS}
+  }
+`;
+
 interface Props extends HTMLAttributes<HTMLOListElement> {
   type?: 'letters';
   start?: number;

package/src/List/UnOrderedList.tsx

@@ -11,14 +11,12 @@ import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 
 const StyledUl = styled.ul`
-  padding-left: ${spacing.nsmall} !important;
-  margin-left: ${spacing.normal} !important;
-  margin-top: 0;
+  padding-left: ${spacing.nsmall};
+  margin-left: ${spacing.normal};
   ${fonts.sizes('18px', '29px')};
 
   ul {
-    padding-left: ${spacing.nsmall};
-    margin-left: 0 !important;
+    margin-left: 0;
   }
 
   > li {
@@ -28,11 +26,9 @@ const StyledUl = styled.ul`
   }
   // List item
   li {
+    padding-top: 0;
     padding-left: ${spacing.nsmall};
     margin-top: ${spacing.nsmall};
-    p {
-      margin-bottom: ${spacing.nsmall} !important;
-    }
   }
 `;
 

package/src/List/UnorderedList.stories.tsx

@@ -44,3 +44,26 @@ export const Default: StoryFn = () => (
     <li>Listepunkt 4</li>
   </UnOrderedList>
 );
+
+export const NoStyle: StoryFn = () => (
+  <ul>
+    <li>Listepunkt 1</li>
+    <li>Listepunkt 2</li>
+    <li>
+      Listepunkt 3
+      <ul>
+        <li>Listepunkt 1</li>
+        <li>Listepunkt 2</li>
+        <li>
+          Listepunkt 3
+          <ul>
+            <li>Listepunkt 1</li>
+            <li>Listepunkt 2</li>
+            <li>Listepunkt 3</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Listepunkt 4</li>
+  </ul>
+);

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -33,9 +33,11 @@ const StyledUl = styled.ul`
   display: flex;
   flex-direction: column;
   list-style-type: none;
+  padding-bottom: ${spacing.nsmall};
   li {
     flex: 1;
     width: 100%;
+    padding-bottom: ${spacing.xsmall};
     a {
       color: ${colors.white};
       &:hover,

package/src/Navigation/NavigationBox.tsx

@@ -36,26 +36,28 @@ const StyledHeading = styled(Heading)`
 
 const StyledList = styled.ul`
   list-style: none;
-  margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.xxsmall};
 
   &[data-direction='horizontal'] {
     ${mq.range({ from: breakpoints.tablet })} {
       column-count: 2;
-      column-gap: 20px;
+      gap: 20px;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
     }
     ${mq.range({ from: breakpoints.tabletWide })} {
       column-count: 3;
-      column-gap: 20px;
+      gap: 20px;
       grid-template-columns: repeat(3, 1fr);
     }
   }
 `;
 
 const StyledListItem = styled.li`
-  margin-bottom: 0;
+  padding: 0;
   break-inside: avoid;
 
   &[data-direction='floating'] {
@@ -67,15 +69,6 @@ const StyledListItem = styled.li`
   }
 `;
 
-const StyledSpacingElement = styled.span`
-  display: block;
-  width: 100%;
-  height: 2px;
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 20px;
-  }
-`;
-
 const StyledButtonContent = styled.span`
   display: flex;
   width: 100%;
@@ -247,7 +240,6 @@ export const NavigationBox = ({
                 </StyledButtonContent>
               </ListElementType>
             </StyledListElementWrapper>
-            {listDirection !== 'floating' && <StyledSpacingElement />}
           </StyledListItem>
         ))}
       </StyledList>

package/src/Programme/ProgrammeSubjects.tsx

@@ -17,8 +17,10 @@ import { NavigationBox } from '../Navigation';
 const GradesMenu = styled.ul`
   display: flex;
   gap: ${spacing.small};
+  padding-left: 0;
   li {
     list-style: none;
+    padding: 0;
   }
 `;
 

package/src/Resource/resourceComponents.tsx

@@ -58,7 +58,6 @@ export const resourceHeadingStyle = css`
 const StyledTagList = styled.ul`
   list-style: none;
   display: flex;
-  margin: 0;
   margin-left: ${spacing.small};
   padding: 2px;
   gap: ${spacing.xsmall};
@@ -69,7 +68,7 @@ const StyledTagList = styled.ul`
 `;
 
 const StyledTagListElement = styled.li`
-  margin: 0;
+  padding: 0;
   ${fonts.sizes(14)};
 `;
 

package/src/ResourceGroup/ResourceList.tsx

@@ -16,7 +16,6 @@ import { Resource } from '../types';
 
 const StyledResourceList = styled.ul`
   list-style: none;
-  margin: 0;
   padding: 0;
   font-family: ${fonts.sans};
 `;

package/src/Search/ActiveFilters.tsx

@@ -73,10 +73,10 @@ const StyledActiveFilterWrapper = styled('li')`
   margin-bottom: ${spacing.xsmall};
 
   ${mq.range({ from: breakpoints.tabletWide })} {
-    margin: 0 ${spacing.small} 0 0;
+    padding: 0 ${spacing.small} 0 0;
 
     &:last-of-type {
-      margin-right: 0;
+      padding-right: 0;
     }
   }
 `;

package/src/Search/ContentTypeResultStyles.tsx

@@ -95,7 +95,6 @@ export const StyledListItem = styled.li<StyledListItemProps>`
 export const StyledList = styled.ul<inMenuProps>`
   list-style: none;
   padding: 0;
-  margin: 0;
   ${(props) => {
     if (props.animateList && props.animateList > 0) {
       return animations.toggledContentWithSwitchAnimation(

package/src/Search/SearchResult.tsx

@@ -137,7 +137,7 @@ const StyledSubjects = styled.div`
   }
 
   li {
-    margin: 0;
+    padding: 0;
     position: relative;
     line-height: 1rem;
 
@@ -332,10 +332,9 @@ const EmptyResultList = styled.article`
 
 const ResultList = styled.ul`
   list-style: none;
-  margin: 0;
   padding: 0;
   ${mq.range({ from: breakpoints.desktop })} {
-    margin: ${spacing.medium} 0 0 0;
+    padding: ${spacing.medium} 0 0 0;
   }
 `;
 

package/src/Search/component.search-result.scss

@@ -293,7 +293,6 @@
       align-items: center;
       flex-wrap: wrap;
       list-style: none;
-      margin: 0;
       padding: 0;
     }