@ndla/ui 44.0.14 → 44.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/CampaignBlock/CampaignBlock.js +10 -6
- package/es/Embed/ImageEmbed.js +10 -3
- package/es/KeyFigure/KeyFigure.js +6 -4
- package/es/List/OrderedList.js +3 -3
- package/es/List/UnOrderedList.js +1 -2
- package/es/MyNdla/Resource/Folder.js +7 -7
- package/es/ProgrammeCard/ProgrammeCard.js +7 -3
- package/lib/CampaignBlock/CampaignBlock.js +10 -6
- package/lib/Embed/ImageEmbed.js +11 -4
- package/lib/KeyFigure/KeyFigure.js +6 -4
- package/lib/List/OrderedList.d.ts +1 -1
- package/lib/List/OrderedList.js +3 -3
- package/lib/List/UnOrderedList.js +1 -2
- package/lib/MyNdla/Resource/Folder.js +7 -7
- package/lib/ProgrammeCard/ProgrammeCard.js +7 -3
- package/package.json +2 -2
- package/src/CampaignBlock/CampaignBlock.tsx +2 -2
- package/src/Embed/ImageEmbed.tsx +8 -1
- package/src/KeyFigure/KeyFigure.tsx +1 -1
- package/src/List/OrderedList.tsx +6 -4
- package/src/List/UnOrderedList.tsx +0 -3
- package/src/MyNdla/Resource/Folder.tsx +1 -1
- package/src/ProgrammeCard/ProgrammeCard.tsx +6 -2
|
@@ -60,7 +60,7 @@ interface Props {
|
|
|
60
60
|
const KeyFigure = ({ image, title, subtitle }: Props) => {
|
|
61
61
|
return (
|
|
62
62
|
<ContentWrapper>
|
|
63
|
-
<StyledImage src={image?.src} alt={image?.alt} />
|
|
63
|
+
<StyledImage src={image?.src} width={250} height={200} alt={image?.alt} />
|
|
64
64
|
<TitleWrapper>{title}</TitleWrapper>
|
|
65
65
|
<SubTitleWrapper>{subtitle}</SubTitleWrapper>
|
|
66
66
|
</ContentWrapper>
|
package/src/List/OrderedList.tsx
CHANGED
|
@@ -10,11 +10,11 @@ import styled from '@emotion/styled';
|
|
|
10
10
|
import { fonts, spacing } from '@ndla/core';
|
|
11
11
|
import { forwardRef, HTMLAttributes } from 'react';
|
|
12
12
|
|
|
13
|
-
export const generateListResets = () => {
|
|
13
|
+
export const generateListResets = (counterName: string) => {
|
|
14
14
|
let styles = '';
|
|
15
15
|
for (let $i = 0; $i < 50; $i++) {
|
|
16
16
|
styles += `
|
|
17
|
-
ol
|
|
17
|
+
&.ol-reset-${$i} { counter-reset: ${counterName} ${$i - 1}; }
|
|
18
18
|
`;
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -42,6 +42,7 @@ const StyledOl = styled.ol`
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
counter-reset: level1;
|
|
45
|
+
${generateListResets('level1')};
|
|
45
46
|
|
|
46
47
|
&[data-type='letters'] {
|
|
47
48
|
> li {
|
|
@@ -73,6 +74,7 @@ const StyledOl = styled.ol`
|
|
|
73
74
|
|
|
74
75
|
> ol:not([data-type='letters']) {
|
|
75
76
|
counter-reset: level2;
|
|
77
|
+
${generateListResets('level2')};
|
|
76
78
|
> li {
|
|
77
79
|
padding-left: ${spacing.nsmall};
|
|
78
80
|
counter-increment: level2;
|
|
@@ -81,6 +83,7 @@ const StyledOl = styled.ol`
|
|
|
81
83
|
}
|
|
82
84
|
> ol:not([data-type='letters']) {
|
|
83
85
|
counter-reset: level3;
|
|
86
|
+
${generateListResets('level3')};
|
|
84
87
|
> li {
|
|
85
88
|
padding-left: ${spacing.medium};
|
|
86
89
|
counter-increment: level3;
|
|
@@ -89,6 +92,7 @@ const StyledOl = styled.ol`
|
|
|
89
92
|
}
|
|
90
93
|
> ol:not([data-type='letters']) {
|
|
91
94
|
counter-reset: level4;
|
|
95
|
+
${generateListResets('level4')};
|
|
92
96
|
> li {
|
|
93
97
|
padding-left: ${spacing.large};
|
|
94
98
|
counter-increment: level4;
|
|
@@ -103,8 +107,6 @@ const StyledOl = styled.ol`
|
|
|
103
107
|
}
|
|
104
108
|
}
|
|
105
109
|
}
|
|
106
|
-
// List reset classes
|
|
107
|
-
${generateListResets()}
|
|
108
110
|
`;
|
|
109
111
|
|
|
110
112
|
interface Props extends HTMLAttributes<HTMLOListElement> {
|
|
@@ -37,9 +37,6 @@ const StyledUl = styled.ul`
|
|
|
37
37
|
margin-bottom: ${spacing.nsmall} !important;
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
|
-
|
|
41
|
-
// List reset classes
|
|
42
|
-
${generateListResets()}
|
|
43
40
|
`;
|
|
44
41
|
|
|
45
42
|
const UnOrderedList = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ children, ...rest }, ref) => {
|
|
@@ -86,8 +86,12 @@ const StyledTitle = styled.span`
|
|
|
86
86
|
const ProgrammeCard = ({ title, narrowImage, wideImage, url }: Programme) => {
|
|
87
87
|
return (
|
|
88
88
|
<StyledCardContainer to={url}>
|
|
89
|
-
{narrowImage &&
|
|
90
|
-
|
|
89
|
+
{narrowImage && (
|
|
90
|
+
<StyledImg data-is-mobile="false" height={280} width={250} src={narrowImage.src} alt={narrowImage.alt} />
|
|
91
|
+
)}
|
|
92
|
+
{wideImage && (
|
|
93
|
+
<StyledImg data-is-mobile="true" height={280} width={250} src={wideImage.src} alt={wideImage.alt} />
|
|
94
|
+
)}
|
|
91
95
|
<StyledTitle>{title.title}</StyledTitle>
|
|
92
96
|
</StyledCardContainer>
|
|
93
97
|
);
|