@ndla/ui 37.0.2 → 37.0.5

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-en.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'This resource is accessible only to teachers who are logged in with Feide.'
     },
-    possiblyOutdated: 'The article is outdated'
+    possiblyOutdated: 'The article is outdated',
+    references: 'References'
   },
   competenceGoals: {
     competenceGoal: 'competence-goal',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Play',
     download: 'Download audio',
     reuse: 'Use audio',
     error: {
@@ -1099,7 +1101,7 @@ var messages = _objectSpread(_objectSpread({
           unShare: 'Do you want to stop sharing this folder?'
         },
         description: {
-          copy: 'Copy and share this link:',
+          copy: 'Press the link to copy',
           "private": 'When you share a folder, you create a link which is open to anyone who has the link. You can change the content or stop sharing whenever you want.',
           private2: 'When you share a folder you share all content within the folder, including subfolders and resources',
           shared: 'Now you can share this link to students or other teachers. If you make changes in the folder, they become visible to everybody you have shared the link with.',
@@ -1141,7 +1143,7 @@ var messages = _objectSpread(_objectSpread({
     sharedFolder: {
       info: 'This folder contains learning resources and tasks from NDLA, gathered by a teacher.',
       firstShared: 'The folder was shared for the first time {{date}}',
-      learningpathUnsupported: 'Learning paths cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.',
+      learningpathUnsupported: 'Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.',
       drawerButton: 'Show folders and resources',
       drawerTitle: 'Folders and resources',
       description: {

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-nb.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.'
     },
-    possiblyOutdated: 'Artikkelen er foreldet.'
+    possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {
@@ -1099,7 +1101,7 @@ var messages = _objectSpread(_objectSpread({
           unShare: 'Vil du avslutte deling av denne mappa?'
         },
         description: {
-          copy: 'Kopier og del denne lenka:',
+          copy: 'Trykk på lenke for å kopiere',
           "private": 'Når du deler ei mappe, lager du ei lenke som er åpen for alle som har lenka. Du kan endre innholdet eller avslutte delinga når du ønsker det. ',
           private2: 'Når du deler en mappe deler du alt innholdet i mappen, inkludert undermapper og ressurser',
           shared: 'Nå kan du dele denne lenka med elever eller andre lærere. Hvis du gjør endringer i mappa, blir de synlige for alle du har delt lenka med.',
@@ -1141,7 +1143,7 @@ var messages = _objectSpread(_objectSpread({
     sharedFolder: {
       info: 'Denne mappa inneholder fagstoff og oppgaver fra NDLA, samlet av en lærer. ',
       firstShared: 'Mappa ble delt første gang {{date}}',
-      learningpathUnsupported: 'Læringsstier kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.',
+      learningpathUnsupported: 'Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.',
       drawerButton: 'Vis mapper og ressurser',
       drawerTitle: 'Mapper og ressurser',
       description: {

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-nn.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.'
     },
-    possiblyOutdated: 'Artikkelen er foreldet.'
+    possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'kompetansemål',
@@ -900,7 +901,7 @@ var messages = _objectSpread(_objectSpread({
   frontpageMultidisciplinarySubject: {
     heading: 'Tverrfaglege tema',
     text: 'Dei tre tverrfaglege temaa i læreplanverket tek utgangspunkt i aktuelle samfunnsutfordringar som krev engasjement og innsats frå einskildmenneske og fellesskapet i lokalsamfunnet, nasjonalt og globalt.',
-    linkText: 'Sjå casar for tverrfaglege tema',
+    linkText: 'Sjå caser for tverrfaglege tema',
     publicHealthTopic: 'Folkehelse og livsmeistring',
     democracyTopic: 'Demokrati og medborgarskap',
     sustainableTopic: 'Bærekraftig utvikling',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {
@@ -1099,7 +1101,7 @@ var messages = _objectSpread(_objectSpread({
           unShare: 'Vil du avslutte deling av denne mappa?'
         },
         description: {
-          copy: 'Kopier og del denne lenka:',
+          copy: 'Trykk på lenke for å kopiere',
           "private": 'Når du deler ei mappe, lagar du ei lenke som er open for alle som har lenka. Du kan endre innhaldet eller avslutte delinga når du ønsker det.',
           private2: 'Når du deler ei mappe deler du alt innhaldet i mappa, inkludert undermapper og ressursar',
           shared: 'No kan du dele denne lenka med elevar eller andre lærarar. Dersom du gjer endringar i mappa, blir dei synlege for alle du har delt lenka med.',
@@ -1143,7 +1145,7 @@ var messages = _objectSpread(_objectSpread({
       firstShared: 'Mappa vart delt første gong {{date}}',
       drawerButton: 'Vis mapper og ressursar',
       drawerTitle: 'Mapper og ressursar',
-      learningpathUnsupported: 'Læringsstiar kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
+      learningpathUnsupported: 'Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
         all: 'I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.\n\nDersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk av læraren din, eller du kan bokmerke sida.',
         info1: 'I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.',

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-se.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Dát resursa lea dušše olamuttus oahpaheddjiide geat leat Feide bokte sisaloggejuvvon.'
     },
-    possiblyOutdated: 'Artihkal lea boarásmuvvan.'
+    possiblyOutdated: 'Artihkal lea boarásmuvvan.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'Gealbomihttomearri',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Viečča jietnafiilla',
     reuse: 'Geavat jietnafiilla',
     error: {
@@ -1099,7 +1101,7 @@ var messages = _objectSpread(_objectSpread({
           unShare: 'Háliidat go loahpahit máhpa juogadeami?'
         },
         description: {
-          copy: 'Máŋge ja juoge dán liŋkka:',
+          copy: 'Trykk på lenke for å kopiere',
           "private": 'Go juogát máhpa ráhkadat liŋkka mii lea rabas buohkaide geas lea liŋka. Sáhtát rievdadit sisdoalu dahje loahpahit juogadeami go háliidat.',
           private2: 'Go juogadat máhpa juogát buot máhpa sisdoalu, oktan vuollemáhpaiguin ja resursaiguin',
           shared: 'Dál sáhtát juogadit dán liŋkka ohppiiguin dahje eará oahpaheddjiiguin. Jus rievdadat maidege máhpas šaddá rievdan oinnolaš buohkaide geaidda leat juogadan liŋkka',
@@ -1143,7 +1145,7 @@ var messages = _objectSpread(_objectSpread({
       firstShared: 'Máhppa juogaduvvui vuosttaš geardde {{date}}',
       drawerButton: 'Čájet máhpaid ja resurssaid',
       drawerTitle: 'Máhpat ja resurssat',
-      learningpathUnsupported: 'Oahppanbálgát eai sáhte njuolga čájehuvvot juogaduvvon máhpain. Jus deaddilat liŋkka navigerenfálus gurut bealde, rahpasa bálggis ođđa siiddus.',
+      learningpathUnsupported: 'Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
         all: 'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.\n\nSáhtát bláđet artihkkaliid fálu vehkiin.\n\nJus háliidat gávdnat máhpa maŋŋel fas, sáhtát geavahit seamma liŋkka maid oahpaheaddjis leat ožžon, dahje sáhtát girjemearka bidjat siidui.',
         info1: 'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.',

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

@@ -715,6 +715,7 @@ declare const messages: {
             onlyTeacher: string;
         };
         possiblyOutdated: string;
+        references: string;
     };
     competenceGoals: {
         competenceGoal: string;
@@ -1228,6 +1229,7 @@ declare const messages: {
         };
     };
     audio: {
+        play: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-sma.js

@@ -443,7 +443,8 @@ var messages = _objectSpread(_objectSpread({
     access: {
       onlyTeacher: 'Daate vierhtie ajve dïllesisnie lohkehtæjjide mah tjaangeme Feidine.'
     },
-    possiblyOutdated: 'Artikkelen er foreldet.'
+    possiblyOutdated: 'Artikkelen er foreldet.',
+    references: 'Referanser'
   },
   competenceGoals: {
     competenceGoal: 'maahtoe-ulmie',
@@ -957,6 +958,7 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   audio: {
+    play: 'Spill av',
     download: 'Veedtjh tjoeje-fijlem',
     reuse: 'Nuhtjh tjoeje-fijlem',
     error: {
@@ -1099,7 +1101,7 @@ var messages = _objectSpread(_objectSpread({
           unShare: 'Vil du avslutte deling av denne mappen?'
         },
         description: {
-          copy: 'Kopier og del denne lenken:',
+          copy: 'Trykk på lenke for å kopiere',
           "private": 'Når du deler en mappe lager du en lenke som er åpen for alle som har lenken. Du kan endre innholdet eller avslutte delingen når du ønsker.',
           private2: 'Når du deler en mappe deler du alt innholdet i mappen, inkludert undermapper og ressurser',
           shared: 'Nå kan du dele denne lenken med elever eller andre lærere. Hvis du gjør endringer i mappen vil de bli synlige for alle du har delt lenken med.',
@@ -1143,7 +1145,7 @@ var messages = _objectSpread(_objectSpread({
       firstShared: 'Mappa vart delt første gong {{date}}',
       drawerButton: 'Vis mapper og ressursar',
       drawerTitle: 'Mapper og ressursar',
-      learningpathUnsupported: 'Læringsstiar kan ikke visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
+      learningpathUnsupported: 'Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.',
       description: {
         all: 'I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.\n\nHvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk av læreren din, eller du kan bokmerke sida.',
         info1: 'I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "37.0.2",
+  "version": "37.0.5",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,7 +31,7 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.0",
+    "@ndla/accordion": "^2.2.1",
     "@ndla/article-scripts": "^3.0.17",
     "@ndla/button": "^10.1.0",
     "@ndla/carousel": "^3.1.0",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ebc236f35b3cd624f5fec74672ef8213d58adae"
+  "gitHead": "94f267adcdca7d083503c85cb5721377f5082b21"
 }

package/src/Article/ArticleByline.tsx

@@ -149,14 +149,14 @@ const ArticleByline = ({
       <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
         {licenseBox && (
           <AccordionItem value="rulesForUse">
-            <AccordionHeader>{t('article.useContent')}</AccordionHeader>
+            <AccordionHeader headingLevel="h2">{t('article.useContent')}</AccordionHeader>
             <AccordionContent>{licenseBox}</AccordionContent>
           </AccordionItem>
         )}
 
         {!!footnotes?.length && (
           <AccordionItem value={referencesAccordionId}>
-            <AccordionHeader>Referanser</AccordionHeader>
+            <AccordionHeader headingLevel="h2">{t('article.references')}</AccordionHeader>
             <AccordionContent forceMount>
               <ArticleFootNotes footNotes={footnotes} />
             </AccordionContent>

package/src/AudioPlayer/SpeechControl.tsx

@@ -7,30 +7,10 @@
  */
 
 import React, { useRef } from 'react';
-import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
 import { VolumeUp } from '@ndla/icons/common';
-
-const SpeechPlayButton = styled.button`
-  background: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  cursor: pointer;
-  color: ${colors.brand.primary};
-  margin-right: 0;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: ${colors.brand.secondary};
-  }
-  .c-icon {
-    width: 24px;
-    height: 24px;
-  }
-`;
+import Tooltip from '@ndla/tooltip';
+import { IconButtonV2 } from '@ndla/button';
 
 type Props = {
   src: string;
@@ -38,6 +18,7 @@ type Props = {
 };
 
 const SpeechControl = ({ src, title }: Props) => {
+  const { t } = useTranslation();
   const audioRef = useRef<HTMLAudioElement>(null);
 
   const togglePlay = () => {
@@ -54,9 +35,11 @@ const SpeechControl = ({ src, title }: Props) => {
     <div>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
-      <SpeechPlayButton type="button" onClick={togglePlay}>
-        <VolumeUp role="img" aria-label="play" title="play" />
-      </SpeechPlayButton>
+      <Tooltip tooltip={t('audio.play')}>
+        <IconButtonV2 type="button" onClick={togglePlay} aria-label={t('audio.play')} variant="ghost">
+          <VolumeUp />
+        </IconButtonV2>
+      </Tooltip>
     </div>
   );
 };

package/src/Embed/AudioEmbed.tsx

@@ -7,6 +7,7 @@
  */
 
 import { AudioMetaData, ImageMetaData } from '@ndla/types-embed';
+import { COPYRIGHTED } from '@ndla/licenses';
 //@ts-ignore
 import { Remarkable } from 'remarkable';
 import AudioPlayer from '../AudioPlayer';
@@ -87,7 +88,9 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
         bottomRounded={!data.imageMeta}
         copyright={embed.data.copyright}
       >
-        {HeartButton && <HeartButton embed={embed} />}
+        {HeartButton && embed.data.copyright.license.license.toLowerCase() !== COPYRIGHTED && (
+          <HeartButton embed={embed} />
+        )}
       </EmbedByline>
       {data.imageMeta && (
         <EmbedByline
@@ -98,7 +101,9 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
           bottomRounded
           copyright={data.imageMeta.copyright}
         >
-          {HeartButton && <HeartButton embed={imageMetaToMockEmbed(embed)} />}
+          {HeartButton && data.imageMeta.copyright.license.license.toLowerCase() !== COPYRIGHTED && (
+            <HeartButton embed={imageMetaToMockEmbed(embed)} />
+          )}
         </EmbedByline>
       )}
     </Figure>

package/src/Embed/BrightcoveEmbed.tsx

@@ -10,6 +10,7 @@ import sortBy from 'lodash/sortBy';
 import isNumber from 'lodash/isNumber';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { useEffect, useRef, useState } from 'react';
 import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
@@ -125,7 +126,7 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
             {t(`figure.button.${!showOriginalVideo ? 'original' : 'alternative'}`)}
           </LinkedVideoButton>
         )}
-        {HeartButton && <HeartButton embed={embed} />}
+        {HeartButton && data.copyright?.license.license.toLowerCase() !== COPYRIGHTED && <HeartButton embed={embed} />}
       </EmbedByline>
     </Figure>
   );

package/src/Embed/ConceptEmbed.tsx

@@ -16,6 +16,7 @@ import { Cross } from '@ndla/icons/action';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ConceptMetaData } from '@ndla/types-embed';
 import Tooltip from '@ndla/tooltip';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { Notion as UINotion } from '../Notion';
 import { Figure } from '../Figure';
 import { NotionImage } from '../Notion/NotionImage';
@@ -382,7 +383,7 @@ export const BlockConcept = ({
         />
         {copyright ? (
           <EmbedByline copyright={copyright} bottomRounded topRounded type="concept">
-            {conceptHeartButton}
+            {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
         ) : (
           <BottomBorder />

package/src/Embed/ImageEmbed.tsx

@@ -11,6 +11,7 @@ import { ImageEmbedData, ImageMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
 import { MouseEventHandler, useState } from 'react';
 import { ExpandTwoArrows } from '@ndla/icons/action';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { ArrowCollapse, ChevronDown, ChevronUp } from '@ndla/icons/common';
 import { Figure, FigureType } from '../Figure';
 import Image, { ImageLink } from '../Image';
@@ -152,7 +153,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton }: Props) => {
           bottomRounded
           visibleAlt={previewAlt ? embed.embedData.alt : ''}
         >
-          {HeartButton && <HeartButton embed={embed} />}
+          {HeartButton && data.copyright.license.license.toLowerCase() !== COPYRIGHTED && <HeartButton embed={embed} />}
         </EmbedByline>
       )}
     </Figure>

package/src/Embed/conceptComponents.tsx

@@ -14,6 +14,7 @@ import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
 import { parseMarkdown } from '@ndla/util';
 import styled from '@emotion/styled';
 import { NotionDialogContent, NotionDialogText } from '@ndla/notion';
+import { COPYRIGHTED } from '@ndla/licenses';
 import { Copyright } from '../types';
 import ImageEmbed from './ImageEmbed';
 import BrightcoveEmbed from './BrightcoveEmbed';
@@ -202,7 +203,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
         </ContentPadding>
         {copyright && (
           <EmbedByline copyright={copyright} type="concept">
-            {conceptHeartButton}
+            {copyright.license?.license.toLowerCase() !== COPYRIGHTED && conceptHeartButton}
           </EmbedByline>
         )}
       </div>

package/src/List/OrderedList.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { fonts, spacing, spacingUnit } from '@ndla/core';
+import { fonts, spacing } from '@ndla/core';
 import { forwardRef, HTMLAttributes } from 'react';
 
 export const generateListResets = () => {
@@ -21,24 +21,25 @@ export const generateListResets = () => {
   return styles;
 };
 
-const listSpacing = {
-  xlarge: `${spacingUnit * 2.5}px`,
-  xxlarge: `${spacingUnit * 3}px`,
-};
-
 const StyledOl = styled.ol`
   margin-top: 0;
-  margin-left: 0;
+  margin-left: ${spacing.medium};
   ${fonts.sizes('18px', '29px')};
   list-style-type: none;
+  padding-left: ${spacing.medium} !important;
 
   // Child ordered lists
   ol {
-    padding-left: ${spacing.normal};
+    padding-left: ${spacing.medium};
+    margin-left: 0;
   }
   // List item
   li {
     margin-top: ${spacing.normal};
+
+    p {
+      margin-bottom: ${spacing.normal} !important;
+    }
   }
 
   &[data-type='letters'] {
@@ -49,7 +50,7 @@ const StyledOl = styled.ol`
         position: absolute;
         transform: translateX(-100%);
         content: counter(item, upper-alpha) '.';
-        padding-right: 0.25em;
+        padding-right: ${spacing.nsmall};
       }
 
       > ol[data-type='letters'] {
@@ -57,7 +58,6 @@ const StyledOl = styled.ol`
           content: counter(item, lower-alpha) '.';
         }
         ol[data-type='letters'] {
-          padding-left: ${spacing.normal};
           > li:before {
             content: counter(item, lower-roman) '.';
           }
@@ -73,20 +73,19 @@ const StyledOl = styled.ol`
       &:before {
         position: absolute;
         transform: translateX(-100%);
-        padding-right: 0.25em;
         content: counters(item, '.') '.';
+        padding-right: ${spacing.nsmall};
       }
 
       > ol:not([data-type='letters']) {
-        padding-left: ${spacing.medium};
         > li {
+          padding-left: ${spacing.nsmall};
           > ol:not([data-type='letters']) {
-            padding-left: ${spacing.large};
             > li {
+              padding-left: ${spacing.medium};
               > ol:not([data-type='letters']) {
-                padding-left: ${listSpacing.xlarge};
-                ol:not([data-type='letters']) {
-                  padding-left: ${listSpacing.xxlarge};
+                > li {
+                  padding-left: ${spacing.large};
                 }
               }
             }

package/src/List/UnOrderedList.tsx

@@ -12,6 +12,8 @@ import { forwardRef, HTMLAttributes } from 'react';
 import { generateListResets } from './OrderedList';
 
 const StyledUl = styled.ul`
+  padding-left: ${spacing.small} !important;
+  margin-left: ${spacing.medium} !important;
   > li {
     ::marker {
       color: ${colors.brand.secondary};
@@ -19,15 +21,20 @@ const StyledUl = styled.ul`
   }
   ul {
     list-style-image: none;
-    padding-left: ${spacing.mediumlarge};
+    padding-left: ${spacing.small};
+
+    margin-left: 0 !important;
   }
   margin-top: 0;
-  margin-left: 0;
   ${fonts.sizes('18px', '29px')};
 
   // List item
   li {
+    padding-left: ${spacing.nsmall};
     margin-top: ${spacing.normal};
+    p {
+      margin-bottom: ${spacing.normal} !important;
+    }
   }
 
   // Child unordered lists