@ndla/ui 44.0.17 → 44.0.19
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/Embed/AudioEmbed.js +1 -6
- package/es/Embed/BrightcoveEmbed.js +3 -6
- package/es/Embed/ImageEmbed.js +2 -5
- package/es/FileList/File.js +6 -9
- package/es/FileList/FileList.js +4 -5
- package/es/FileList/FileV2.js +0 -2
- package/es/ProgrammeCard/ProgrammeCard.js +5 -11
- package/es/Table/Table.js +26 -14
- package/es/locale/messages-en.js +2 -4
- package/es/locale/messages-nb.js +2 -4
- package/es/locale/messages-nn.js +2 -4
- package/es/locale/messages-se.js +2 -4
- package/es/locale/messages-sma.js +2 -4
- package/lib/Embed/AudioEmbed.js +1 -6
- package/lib/Embed/BrightcoveEmbed.js +3 -6
- package/lib/Embed/ImageEmbed.js +2 -5
- package/lib/FileList/File.d.ts +1 -2
- package/lib/FileList/File.js +6 -9
- package/lib/FileList/FileList.js +4 -5
- package/lib/FileList/FileV2.d.ts +1 -2
- package/lib/FileList/FileV2.js +0 -2
- package/lib/ProgrammeCard/ProgrammeCard.js +5 -11
- package/lib/Table/Table.js +26 -14
- package/lib/locale/messages-en.d.ts +0 -2
- package/lib/locale/messages-en.js +2 -4
- package/lib/locale/messages-nb.d.ts +0 -2
- package/lib/locale/messages-nb.js +2 -4
- package/lib/locale/messages-nn.d.ts +0 -2
- package/lib/locale/messages-nn.js +2 -4
- package/lib/locale/messages-se.d.ts +0 -2
- package/lib/locale/messages-se.js +2 -4
- package/lib/locale/messages-sma.d.ts +0 -2
- package/lib/locale/messages-sma.js +2 -4
- package/package.json +3 -3
- package/src/Embed/AudioEmbed.stories.tsx +0 -4
- package/src/Embed/AudioEmbed.tsx +2 -6
- package/src/Embed/BrightcoveEmbed.stories.tsx +0 -3
- package/src/Embed/BrightcoveEmbed.tsx +2 -3
- package/src/Embed/ConceptEmbed.stories.tsx +0 -5
- package/src/Embed/ExternalEmbed.stories.tsx +0 -2
- package/src/Embed/H5pEmbed.stories.tsx +0 -2
- package/src/Embed/IframeEmbed.stories.tsx +0 -4
- package/src/Embed/ImageEmbed.stories.tsx +0 -2
- package/src/Embed/ImageEmbed.tsx +1 -4
- package/src/FileList/File.tsx +4 -7
- package/src/FileList/FileList.tsx +1 -1
- package/src/FileList/FileV2.tsx +1 -3
- package/src/ProgrammeCard/ProgrammeCard.tsx +3 -18
- package/src/Table/Table.tsx +5 -2
- package/src/locale/messages-en.ts +1 -3
- package/src/locale/messages-nb.ts +1 -3
- package/src/locale/messages-nn.ts +1 -3
- package/src/locale/messages-se.ts +1 -3
- package/src/locale/messages-sma.ts +1 -3
|
@@ -1157,10 +1157,8 @@ var messages = _objectSpread(_objectSpread({
|
|
|
1157
1157
|
drawerTitle: 'Mapper og ressursar',
|
|
1158
1158
|
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.',
|
|
1159
1159
|
description: {
|
|
1160
|
-
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
|
|
1161
|
-
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.'
|
|
1162
|
-
info2: 'Du kan bla i artiklane ved å bruke menyen.',
|
|
1163
|
-
info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.'
|
|
1160
|
+
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.',
|
|
1161
|
+
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.'
|
|
1164
1162
|
},
|
|
1165
1163
|
willOpenInNewTab: 'Opnast i ny fane.'
|
|
1166
1164
|
},
|
|
@@ -1157,10 +1157,8 @@ var messages = _objectSpread(_objectSpread({
|
|
|
1157
1157
|
drawerTitle: 'Máhpat ja resurssat',
|
|
1158
1158
|
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.',
|
|
1159
1159
|
description: {
|
|
1160
|
-
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
|
|
1161
|
-
info1: 'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.'
|
|
1162
|
-
info2: 'Sáhtát bláđet artihkkaliid fálu vehkiin.',
|
|
1163
|
-
info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.'
|
|
1160
|
+
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.',
|
|
1161
|
+
info1: 'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.'
|
|
1164
1162
|
},
|
|
1165
1163
|
willOpenInNewTab: 'Åpnes i ny fane.'
|
|
1166
1164
|
},
|
|
@@ -1157,10 +1157,8 @@ var messages = _objectSpread(_objectSpread({
|
|
|
1157
1157
|
drawerTitle: 'Mapper og ressursar',
|
|
1158
1158
|
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.',
|
|
1159
1159
|
description: {
|
|
1160
|
-
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
|
|
1161
|
-
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.'
|
|
1162
|
-
info2: 'Du kan bla i artiklane ved å bruke menyen.',
|
|
1163
|
-
info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.'
|
|
1160
|
+
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.',
|
|
1161
|
+
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.'
|
|
1164
1162
|
},
|
|
1165
1163
|
willOpenInNewTab: 'Åpnes i ny fane.'
|
|
1166
1164
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "44.0.
|
|
3
|
+
"version": "44.0.19",
|
|
4
4
|
"description": "UI component library for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"devDependencies": {
|
|
74
74
|
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
|
|
75
75
|
"@ndla/types-backend": "^0.2.5",
|
|
76
|
-
"@ndla/types-embed": "^
|
|
76
|
+
"@ndla/types-embed": "^3.0.0",
|
|
77
77
|
"css-loader": "^6.7.3",
|
|
78
78
|
"mini-css-extract-plugin": "^2.7.5",
|
|
79
79
|
"sass-loader": "^13.2.2",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "b434bf6b25ea0dbd3606bdd6456476cb8e528025"
|
|
87
87
|
}
|
|
@@ -203,7 +203,6 @@ export const AudioEmbedStory: StoryObj<typeof AudioEmbed> = {
|
|
|
203
203
|
embed: {
|
|
204
204
|
resource: 'audio',
|
|
205
205
|
status: 'success',
|
|
206
|
-
seq: 1,
|
|
207
206
|
embedData: embedData,
|
|
208
207
|
data: successData,
|
|
209
208
|
},
|
|
@@ -216,7 +215,6 @@ export const AudioEmbedFailed: StoryObj<typeof AudioEmbed> = {
|
|
|
216
215
|
embed: {
|
|
217
216
|
resource: 'audio',
|
|
218
217
|
status: 'error',
|
|
219
|
-
seq: 1,
|
|
220
218
|
embedData: embedData,
|
|
221
219
|
},
|
|
222
220
|
},
|
|
@@ -228,7 +226,6 @@ export const Podcast: StoryObj<typeof AudioEmbed> = {
|
|
|
228
226
|
embed: {
|
|
229
227
|
resource: 'audio',
|
|
230
228
|
status: 'success',
|
|
231
|
-
seq: 1,
|
|
232
229
|
embedData: podcastEmbedData,
|
|
233
230
|
data: podcastSuccessData,
|
|
234
231
|
},
|
|
@@ -241,7 +238,6 @@ export const PodcastFailed: StoryObj<typeof AudioEmbed> = {
|
|
|
241
238
|
embed: {
|
|
242
239
|
resource: 'audio',
|
|
243
240
|
status: 'error',
|
|
244
|
-
seq: 1,
|
|
245
241
|
embedData: podcastEmbedData,
|
|
246
242
|
},
|
|
247
243
|
},
|
package/src/Embed/AudioEmbed.tsx
CHANGED
|
@@ -39,8 +39,6 @@ const imageMetaToMockEmbed = (
|
|
|
39
39
|
): Extract<ImageMetaData, { status: 'success' }> => ({
|
|
40
40
|
resource: 'image',
|
|
41
41
|
status: 'success',
|
|
42
|
-
// Make sure the seq is unused. It's rarely used, but it's nice to ensure uniqueness.
|
|
43
|
-
seq: imageMeta.seq + 0.1,
|
|
44
42
|
// We check that this exists where the function is used.
|
|
45
43
|
data: imageMeta.data.imageMeta!,
|
|
46
44
|
embedData: {
|
|
@@ -55,7 +53,7 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
|
|
|
55
53
|
return <EmbedErrorPlaceholder type={embed.embedData.type === 'standard' ? 'audio' : 'podcast'} />;
|
|
56
54
|
}
|
|
57
55
|
|
|
58
|
-
const { data, embedData
|
|
56
|
+
const { data, embedData } = embed;
|
|
59
57
|
|
|
60
58
|
if (embedData.type === 'minimal') {
|
|
61
59
|
return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;
|
|
@@ -69,10 +67,8 @@ const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
|
|
|
69
67
|
|
|
70
68
|
const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
|
|
71
69
|
|
|
72
|
-
const figureId = `figure-${seq}-${data.id}`;
|
|
73
|
-
|
|
74
70
|
return (
|
|
75
|
-
<Figure
|
|
71
|
+
<Figure type="full">
|
|
76
72
|
<AudioPlayer
|
|
77
73
|
description={data.podcastMeta?.introduction ?? ''}
|
|
78
74
|
img={img}
|
|
@@ -82,7 +82,6 @@ const metaData: BrightcoveData = {
|
|
|
82
82
|
|
|
83
83
|
const visuallyInterpretedEmbedMetaData: BrightcoveMetaData = {
|
|
84
84
|
resource: 'brightcove',
|
|
85
|
-
seq: 3,
|
|
86
85
|
status: 'success',
|
|
87
86
|
embedData: {
|
|
88
87
|
resource: 'brightcove',
|
|
@@ -183,7 +182,6 @@ export const BrightcoveEmbedStory: StoryObj<typeof BrightcoveEmbed> = {
|
|
|
183
182
|
embed: {
|
|
184
183
|
resource: 'brightcove',
|
|
185
184
|
status: 'success',
|
|
186
|
-
seq: 1,
|
|
187
185
|
embedData: embedData,
|
|
188
186
|
data: metaData,
|
|
189
187
|
},
|
|
@@ -203,7 +201,6 @@ export const BrightcoveFailed: StoryObj<typeof BrightcoveEmbed> = {
|
|
|
203
201
|
embed: {
|
|
204
202
|
resource: 'brightcove',
|
|
205
203
|
status: 'error',
|
|
206
|
-
seq: 1,
|
|
207
204
|
embedData: embedData,
|
|
208
205
|
},
|
|
209
206
|
},
|
|
@@ -86,18 +86,17 @@ const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props)
|
|
|
86
86
|
</EmbedErrorPlaceholder>
|
|
87
87
|
);
|
|
88
88
|
}
|
|
89
|
-
const { data
|
|
89
|
+
const { data } = embed;
|
|
90
90
|
|
|
91
91
|
const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
|
|
92
92
|
|
|
93
|
-
const figureId = `figure-${seq}-${data.id}`;
|
|
94
93
|
const originalVideoProps = getIframeProps(embedData, data.sources);
|
|
95
94
|
const alternativeVideoProps = linkedVideoId
|
|
96
95
|
? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)
|
|
97
96
|
: undefined;
|
|
98
97
|
|
|
99
98
|
return (
|
|
100
|
-
<Figure
|
|
99
|
+
<Figure type={isConcept ? 'full-column' : 'full'} resizeIframe>
|
|
101
100
|
<div className="brightcove-video">
|
|
102
101
|
<BrightcoveIframe
|
|
103
102
|
ref={iframeRef}
|
|
@@ -72,7 +72,6 @@ const conceptMetaData: ConceptData['concept'] = {
|
|
|
72
72
|
const visualElementData: ConceptData['visualElement'] = {
|
|
73
73
|
resource: 'image',
|
|
74
74
|
status: 'success',
|
|
75
|
-
seq: 6,
|
|
76
75
|
embedData: {
|
|
77
76
|
resource: 'image',
|
|
78
77
|
resourceId: '52863',
|
|
@@ -170,7 +169,6 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
|
|
|
170
169
|
embed: {
|
|
171
170
|
resource: 'concept',
|
|
172
171
|
status: 'success',
|
|
173
|
-
seq: 1,
|
|
174
172
|
embedData: blockEmbedData,
|
|
175
173
|
data: blockMetaData,
|
|
176
174
|
},
|
|
@@ -183,7 +181,6 @@ export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
|
|
|
183
181
|
embed: {
|
|
184
182
|
resource: 'concept',
|
|
185
183
|
status: 'error',
|
|
186
|
-
seq: 1,
|
|
187
184
|
embedData: blockEmbedData,
|
|
188
185
|
},
|
|
189
186
|
},
|
|
@@ -195,7 +192,6 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
|
|
|
195
192
|
embed: {
|
|
196
193
|
resource: 'concept',
|
|
197
194
|
status: 'success',
|
|
198
|
-
seq: 1,
|
|
199
195
|
embedData: inlineEmbedData,
|
|
200
196
|
data: blockMetaData,
|
|
201
197
|
},
|
|
@@ -208,7 +204,6 @@ export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
|
|
|
208
204
|
embed: {
|
|
209
205
|
resource: 'concept',
|
|
210
206
|
status: 'error',
|
|
211
|
-
seq: 1,
|
|
212
207
|
embedData: inlineEmbedData,
|
|
213
208
|
},
|
|
214
209
|
},
|
|
@@ -66,7 +66,6 @@ export const Regular: StoryObj<typeof ExternalEmbed> = {
|
|
|
66
66
|
embed: {
|
|
67
67
|
resource: 'external',
|
|
68
68
|
status: 'success',
|
|
69
|
-
seq: 8,
|
|
70
69
|
embedData: embedData,
|
|
71
70
|
data: metaData,
|
|
72
71
|
},
|
|
@@ -78,7 +77,6 @@ export const Failed: StoryObj<typeof ExternalEmbed> = {
|
|
|
78
77
|
embed: {
|
|
79
78
|
resource: 'external',
|
|
80
79
|
status: 'error',
|
|
81
|
-
seq: 3,
|
|
82
80
|
embedData: embedData,
|
|
83
81
|
},
|
|
84
82
|
},
|
|
@@ -72,7 +72,6 @@ export const Regular: StoryObj<typeof H5pEmbed> = {
|
|
|
72
72
|
embed: {
|
|
73
73
|
resource: 'h5p',
|
|
74
74
|
status: 'success',
|
|
75
|
-
seq: 5,
|
|
76
75
|
embedData: embedData,
|
|
77
76
|
data: metaData,
|
|
78
77
|
},
|
|
@@ -84,7 +83,6 @@ export const Failed: StoryObj<typeof H5pEmbed> = {
|
|
|
84
83
|
embed: {
|
|
85
84
|
resource: 'h5p',
|
|
86
85
|
status: 'error',
|
|
87
|
-
seq: 3,
|
|
88
86
|
embedData: embedData,
|
|
89
87
|
},
|
|
90
88
|
},
|
|
@@ -47,7 +47,6 @@ export const Regular: StoryObj<typeof IframeEmbed> = {
|
|
|
47
47
|
embed: {
|
|
48
48
|
resource: 'iframe',
|
|
49
49
|
status: 'success',
|
|
50
|
-
seq: 3,
|
|
51
50
|
embedData: embedData,
|
|
52
51
|
data: {},
|
|
53
52
|
},
|
|
@@ -59,7 +58,6 @@ export const Failed: StoryObj<typeof IframeEmbed> = {
|
|
|
59
58
|
embed: {
|
|
60
59
|
resource: 'iframe',
|
|
61
60
|
status: 'error',
|
|
62
|
-
seq: 3,
|
|
63
61
|
embedData: embedData,
|
|
64
62
|
},
|
|
65
63
|
},
|
|
@@ -132,7 +130,6 @@ export const OpensInNewWindow: StoryObj<typeof IframeEmbed> = {
|
|
|
132
130
|
embed: {
|
|
133
131
|
resource: 'iframe',
|
|
134
132
|
status: 'success',
|
|
135
|
-
seq: 4,
|
|
136
133
|
embedData: opensInNewEmbedData,
|
|
137
134
|
data: opensInnewMetaData,
|
|
138
135
|
},
|
|
@@ -144,7 +141,6 @@ export const OpensInNewWindowFailed: StoryObj<typeof IframeEmbed> = {
|
|
|
144
141
|
embed: {
|
|
145
142
|
resource: 'iframe',
|
|
146
143
|
status: 'error',
|
|
147
|
-
seq: 4,
|
|
148
144
|
embedData: opensInNewEmbedData,
|
|
149
145
|
},
|
|
150
146
|
},
|
|
@@ -111,7 +111,6 @@ export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
|
|
|
111
111
|
embed: {
|
|
112
112
|
resource: 'image',
|
|
113
113
|
status: 'success',
|
|
114
|
-
seq: 1,
|
|
115
114
|
embedData: embedData,
|
|
116
115
|
data: metaData,
|
|
117
116
|
},
|
|
@@ -124,7 +123,6 @@ export const Failed: StoryObj<typeof ImageEmbed> = {
|
|
|
124
123
|
embed: {
|
|
125
124
|
resource: 'image',
|
|
126
125
|
status: 'error',
|
|
127
|
-
seq: 1,
|
|
128
126
|
embedData: embedData,
|
|
129
127
|
},
|
|
130
128
|
},
|
package/src/Embed/ImageEmbed.tsx
CHANGED
|
@@ -111,7 +111,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path
|
|
|
111
111
|
return <EmbedErrorPlaceholder type={'image'} figureType={figureType} />;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
const { data, embedData
|
|
114
|
+
const { data, embedData } = embed;
|
|
115
115
|
|
|
116
116
|
const altText = embedData.alt || '';
|
|
117
117
|
|
|
@@ -121,13 +121,10 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path
|
|
|
121
121
|
const focalPoint = getFocalPoint(embedData);
|
|
122
122
|
const crop = getCrop(embedData);
|
|
123
123
|
|
|
124
|
-
const figureId = `figure-${seq}-${data.id}`;
|
|
125
|
-
|
|
126
124
|
const isCopyrighted = data.copyright.license.license.toLowerCase() === COPYRIGHTED;
|
|
127
125
|
|
|
128
126
|
return (
|
|
129
127
|
<Figure
|
|
130
|
-
id={figureId}
|
|
131
128
|
type={imageSizes ? undefined : figureType}
|
|
132
129
|
className={imageSizes ? `c-figure--${embedData.align} expanded` : ''}
|
|
133
130
|
>
|
package/src/FileList/File.tsx
CHANGED
|
@@ -31,11 +31,9 @@ const FileLink = styled(SafeLink)`
|
|
|
31
31
|
}
|
|
32
32
|
`;
|
|
33
33
|
|
|
34
|
-
const renderFormat = (format: FileFormat, title: string, isPrimary: boolean,
|
|
34
|
+
const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, isDeadLink: boolean) => {
|
|
35
35
|
const titleWithFormat = `${title} (${format.fileType.toUpperCase()})`;
|
|
36
36
|
|
|
37
|
-
const formatId = `${id}_${format.fileType}`;
|
|
38
|
-
|
|
39
37
|
if (isDeadLink) {
|
|
40
38
|
return (
|
|
41
39
|
<span key={format.url}>
|
|
@@ -46,7 +44,7 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
|
|
|
46
44
|
}
|
|
47
45
|
|
|
48
46
|
return (
|
|
49
|
-
<FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat}
|
|
47
|
+
<FileLink key={format.url} to={format.url} target="_blank" aria-label={titleWithFormat}>
|
|
50
48
|
<Download />
|
|
51
49
|
<Tooltip tooltip={format.tooltip}>
|
|
52
50
|
<LinkTextWrapper>
|
|
@@ -58,7 +56,6 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
|
|
|
58
56
|
};
|
|
59
57
|
|
|
60
58
|
interface Props {
|
|
61
|
-
id: string;
|
|
62
59
|
file: FileType;
|
|
63
60
|
}
|
|
64
61
|
|
|
@@ -77,9 +74,9 @@ const FileListItem = styled.li`
|
|
|
77
74
|
}
|
|
78
75
|
`;
|
|
79
76
|
|
|
80
|
-
const File = ({ file
|
|
77
|
+
const File = ({ file }: Props) => {
|
|
81
78
|
const formatLinks = file.formats.map((format, index) =>
|
|
82
|
-
renderFormat(format, file.title, index === 0,
|
|
79
|
+
renderFormat(format, file.title, index === 0, !file.fileExists),
|
|
83
80
|
);
|
|
84
81
|
|
|
85
82
|
return <FileListItem key={file.title}>{formatLinks}</FileListItem>;
|
|
@@ -55,7 +55,7 @@ const FileList = ({ files, heading, id }: Props) => (
|
|
|
55
55
|
<FileListHeading>{heading}</FileListHeading>
|
|
56
56
|
<FilesList>
|
|
57
57
|
{files.map((file) => (
|
|
58
|
-
<File key={`file-${id}-${file.title}`} file={file}
|
|
58
|
+
<File key={`file-${id}-${file.title}`} file={file} />
|
|
59
59
|
))}
|
|
60
60
|
</FilesList>
|
|
61
61
|
</FileListSection>
|
package/src/FileList/FileV2.tsx
CHANGED
|
@@ -10,19 +10,17 @@ import { useTranslation } from 'react-i18next';
|
|
|
10
10
|
import File from './File';
|
|
11
11
|
|
|
12
12
|
interface Props {
|
|
13
|
-
id: string;
|
|
14
13
|
title: string;
|
|
15
14
|
url: string;
|
|
16
15
|
fileExists: boolean;
|
|
17
16
|
fileType: string;
|
|
18
17
|
}
|
|
19
18
|
|
|
20
|
-
const FileV2 = ({ title, url,
|
|
19
|
+
const FileV2 = ({ title, url, fileExists, fileType }: Props) => {
|
|
21
20
|
const { t } = useTranslation();
|
|
22
21
|
const tooltip = `${t('download')} ${url.split('/').pop()}`;
|
|
23
22
|
return (
|
|
24
23
|
<File
|
|
25
|
-
id={id}
|
|
26
24
|
file={{
|
|
27
25
|
title,
|
|
28
26
|
fileExists,
|
|
@@ -47,21 +47,10 @@ const StyledCardContainer = styled(SafeLink)`
|
|
|
47
47
|
`;
|
|
48
48
|
|
|
49
49
|
const StyledImg = styled.img`
|
|
50
|
-
display:
|
|
50
|
+
display: block;
|
|
51
51
|
flex: 1;
|
|
52
52
|
border-radius: ${misc.borderRadius} ${misc.borderRadius} 0 0;
|
|
53
53
|
width: 100%;
|
|
54
|
-
|
|
55
|
-
&[data-is-mobile='true'] {
|
|
56
|
-
${mq.range({ until: breakpoints.tablet })} {
|
|
57
|
-
display: block;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
&[data-is-mobile='false'] {
|
|
61
|
-
${mq.range({ from: breakpoints.tablet })} {
|
|
62
|
-
display: block;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
54
|
`;
|
|
66
55
|
|
|
67
56
|
const StyledTitle = styled.span`
|
|
@@ -86,12 +75,8 @@ const StyledTitle = styled.span`
|
|
|
86
75
|
const ProgrammeCard = ({ title, narrowImage, wideImage, url }: Programme) => {
|
|
87
76
|
return (
|
|
88
77
|
<StyledCardContainer to={url}>
|
|
89
|
-
{narrowImage &&
|
|
90
|
-
|
|
91
|
-
)}
|
|
92
|
-
{wideImage && (
|
|
93
|
-
<StyledImg data-is-mobile="true" height={280} width={250} src={wideImage.src} alt={wideImage.alt} />
|
|
94
|
-
)}
|
|
78
|
+
{narrowImage && <StyledImg height={280} width={250} src={narrowImage.src} alt={narrowImage.alt} />}
|
|
79
|
+
{wideImage && <StyledImg height={330} width={120} src={wideImage.src} alt={wideImage.alt} />}
|
|
95
80
|
<StyledTitle>{title.title}</StyledTitle>
|
|
96
81
|
</StyledCardContainer>
|
|
97
82
|
);
|
package/src/Table/Table.tsx
CHANGED
|
@@ -194,6 +194,9 @@ export const TableStyling = css`
|
|
|
194
194
|
const TableWrapper = styled.div`
|
|
195
195
|
display: flex;
|
|
196
196
|
justify-content: center;
|
|
197
|
+
`;
|
|
198
|
+
|
|
199
|
+
const OverflowWrapper = styled.div`
|
|
197
200
|
overflow-x: auto;
|
|
198
201
|
`;
|
|
199
202
|
|
|
@@ -242,13 +245,13 @@ const Table = ({ children, id, ...rest }: Props) => {
|
|
|
242
245
|
|
|
243
246
|
return (
|
|
244
247
|
<TableWrapper>
|
|
245
|
-
<
|
|
248
|
+
<OverflowWrapper>
|
|
246
249
|
<LeftScrollBorder data-block={scrollPosition === 'end' || scrollPosition === 'center'} />
|
|
247
250
|
<table ref={tableRef} id={id} onScroll={onScroll} css={TableStyling} {...rest}>
|
|
248
251
|
{children}
|
|
249
252
|
</table>
|
|
250
253
|
<RightScrollBorder data-block={scrollPosition === 'start' || scrollPosition === 'center'} />
|
|
251
|
-
</
|
|
254
|
+
</OverflowWrapper>
|
|
252
255
|
</TableWrapper>
|
|
253
256
|
);
|
|
254
257
|
};
|
|
@@ -1203,11 +1203,9 @@ const messages = {
|
|
|
1203
1203
|
drawerButton: 'Show folders and resources',
|
|
1204
1204
|
drawerTitle: 'Folders and resources',
|
|
1205
1205
|
description: {
|
|
1206
|
-
all: 'In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles
|
|
1206
|
+
all: 'In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.',
|
|
1207
1207
|
info1:
|
|
1208
1208
|
'In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.',
|
|
1209
|
-
info2: 'You can use the menu to navigate through the articles.',
|
|
1210
|
-
info3: 'If you want to come back to the folder later, you can use the link you received or bookmark the page.',
|
|
1211
1209
|
},
|
|
1212
1210
|
willOpenInNewTab: 'Opens in a new tab.',
|
|
1213
1211
|
},
|
|
@@ -1200,11 +1200,9 @@ const messages = {
|
|
|
1200
1200
|
drawerButton: 'Vis mapper og ressurser',
|
|
1201
1201
|
drawerTitle: 'Mapper og ressurser',
|
|
1202
1202
|
description: {
|
|
1203
|
-
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
|
|
1203
|
+
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.',
|
|
1204
1204
|
info1:
|
|
1205
1205
|
'I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.',
|
|
1206
|
-
info2: 'Du kan bla i artiklene ved å bruke menyen.',
|
|
1207
|
-
info3: 'Hvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk eller bokmerke sida.',
|
|
1208
1206
|
},
|
|
1209
1207
|
willOpenInNewTab: 'Åpnes i ny fane.',
|
|
1210
1208
|
},
|
|
@@ -1200,11 +1200,9 @@ const messages = {
|
|
|
1200
1200
|
learningpathUnsupported:
|
|
1201
1201
|
'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.',
|
|
1202
1202
|
description: {
|
|
1203
|
-
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
|
|
1203
|
+
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.',
|
|
1204
1204
|
info1:
|
|
1205
1205
|
'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.',
|
|
1206
|
-
info2: 'Du kan bla i artiklane ved å bruke menyen.',
|
|
1207
|
-
info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.',
|
|
1208
1206
|
},
|
|
1209
1207
|
willOpenInNewTab: 'Opnast i ny fane.',
|
|
1210
1208
|
},
|
|
@@ -1201,11 +1201,9 @@ const messages = {
|
|
|
1201
1201
|
learningpathUnsupported:
|
|
1202
1202
|
'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.',
|
|
1203
1203
|
description: {
|
|
1204
|
-
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
|
|
1204
|
+
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.',
|
|
1205
1205
|
info1:
|
|
1206
1206
|
'Dán máhpas gávnnat fágaávdnasiid ja bargobihtáid NDLAs. Oahpaheaddji lea čohkken artihkkaliid ja bidjan daid ortnetvurrui.',
|
|
1207
|
-
info2: 'Sáhtát bláđet artihkkaliid fálu vehkiin.',
|
|
1208
|
-
info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.',
|
|
1209
1207
|
},
|
|
1210
1208
|
willOpenInNewTab: 'Åpnes i ny fane.',
|
|
1211
1209
|
},
|
|
@@ -1205,11 +1205,9 @@ const messages = {
|
|
|
1205
1205
|
learningpathUnsupported:
|
|
1206
1206
|
'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.',
|
|
1207
1207
|
description: {
|
|
1208
|
-
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
|
|
1208
|
+
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.',
|
|
1209
1209
|
info1:
|
|
1210
1210
|
'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.',
|
|
1211
|
-
info2: 'Du kan bla i artiklane ved å bruke menyen.',
|
|
1212
|
-
info3: 'Dersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.',
|
|
1213
1211
|
},
|
|
1214
1212
|
willOpenInNewTab: 'Åpnes i ny fane.',
|
|
1215
1213
|
},
|