@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.
Files changed (54) hide show
  1. package/es/Embed/AudioEmbed.js +1 -6
  2. package/es/Embed/BrightcoveEmbed.js +3 -6
  3. package/es/Embed/ImageEmbed.js +2 -5
  4. package/es/FileList/File.js +6 -9
  5. package/es/FileList/FileList.js +4 -5
  6. package/es/FileList/FileV2.js +0 -2
  7. package/es/ProgrammeCard/ProgrammeCard.js +5 -11
  8. package/es/Table/Table.js +26 -14
  9. package/es/locale/messages-en.js +2 -4
  10. package/es/locale/messages-nb.js +2 -4
  11. package/es/locale/messages-nn.js +2 -4
  12. package/es/locale/messages-se.js +2 -4
  13. package/es/locale/messages-sma.js +2 -4
  14. package/lib/Embed/AudioEmbed.js +1 -6
  15. package/lib/Embed/BrightcoveEmbed.js +3 -6
  16. package/lib/Embed/ImageEmbed.js +2 -5
  17. package/lib/FileList/File.d.ts +1 -2
  18. package/lib/FileList/File.js +6 -9
  19. package/lib/FileList/FileList.js +4 -5
  20. package/lib/FileList/FileV2.d.ts +1 -2
  21. package/lib/FileList/FileV2.js +0 -2
  22. package/lib/ProgrammeCard/ProgrammeCard.js +5 -11
  23. package/lib/Table/Table.js +26 -14
  24. package/lib/locale/messages-en.d.ts +0 -2
  25. package/lib/locale/messages-en.js +2 -4
  26. package/lib/locale/messages-nb.d.ts +0 -2
  27. package/lib/locale/messages-nb.js +2 -4
  28. package/lib/locale/messages-nn.d.ts +0 -2
  29. package/lib/locale/messages-nn.js +2 -4
  30. package/lib/locale/messages-se.d.ts +0 -2
  31. package/lib/locale/messages-se.js +2 -4
  32. package/lib/locale/messages-sma.d.ts +0 -2
  33. package/lib/locale/messages-sma.js +2 -4
  34. package/package.json +3 -3
  35. package/src/Embed/AudioEmbed.stories.tsx +0 -4
  36. package/src/Embed/AudioEmbed.tsx +2 -6
  37. package/src/Embed/BrightcoveEmbed.stories.tsx +0 -3
  38. package/src/Embed/BrightcoveEmbed.tsx +2 -3
  39. package/src/Embed/ConceptEmbed.stories.tsx +0 -5
  40. package/src/Embed/ExternalEmbed.stories.tsx +0 -2
  41. package/src/Embed/H5pEmbed.stories.tsx +0 -2
  42. package/src/Embed/IframeEmbed.stories.tsx +0 -4
  43. package/src/Embed/ImageEmbed.stories.tsx +0 -2
  44. package/src/Embed/ImageEmbed.tsx +1 -4
  45. package/src/FileList/File.tsx +4 -7
  46. package/src/FileList/FileList.tsx +1 -1
  47. package/src/FileList/FileV2.tsx +1 -3
  48. package/src/ProgrammeCard/ProgrammeCard.tsx +3 -18
  49. package/src/Table/Table.tsx +5 -2
  50. package/src/locale/messages-en.ts +1 -3
  51. package/src/locale/messages-nb.ts +1 -3
  52. package/src/locale/messages-nn.ts +1 -3
  53. package/src/locale/messages-se.ts +1 -3
  54. package/src/locale/messages-sma.ts +1 -3
@@ -158,8 +158,6 @@ declare const messages: {
158
158
  description: {
159
159
  all: string;
160
160
  info1: string;
161
- info2: string;
162
- info3: string;
163
161
  };
164
162
  willOpenInNewTab: string;
165
163
  };
@@ -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.\n\nDersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.',
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
  },
@@ -158,8 +158,6 @@ declare const messages: {
158
158
  description: {
159
159
  all: string;
160
160
  info1: string;
161
- info2: string;
162
- info3: string;
163
161
  };
164
162
  willOpenInNewTab: string;
165
163
  };
@@ -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.\n\nDersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.',
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
  },
@@ -158,8 +158,6 @@ declare const messages: {
158
158
  description: {
159
159
  all: string;
160
160
  info1: string;
161
- info2: string;
162
- info3: string;
163
161
  };
164
162
  willOpenInNewTab: string;
165
163
  };
@@ -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.\n\nHvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk, eller du kan bokmerke sida.',
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.17",
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": "^2.0.7",
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": "cc00ada009ed0eb59d1c5a7efc8efa04897a071b"
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
  },
@@ -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, seq } = embed;
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 id={figureId} type="full">
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, seq } = embed;
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 id={figureId} type={isConcept ? 'full-column' : 'full'} resizeIframe>
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
  },
@@ -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, seq } = embed;
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
  >
@@ -31,11 +31,9 @@ const FileLink = styled(SafeLink)`
31
31
  }
32
32
  `;
33
33
 
34
- const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id: string, isDeadLink: 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} aria-describedby={formatId}>
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, id }: Props) => {
77
+ const File = ({ file }: Props) => {
81
78
  const formatLinks = file.formats.map((format, index) =>
82
- renderFormat(format, file.title, index === 0, id, !file.fileExists),
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} id={id} />
58
+ <File key={`file-${id}-${file.title}`} file={file} />
59
59
  ))}
60
60
  </FilesList>
61
61
  </FileListSection>
@@ -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, id, fileExists, fileType }: Props) => {
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: none;
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
- <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
- )}
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
  );
@@ -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
- <div>
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
- </div>
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.\n\nIf you want to come back to the folder later, you can use the link you received or bookmark the page.',
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.\n\nHvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk eller bokmerke sida.',
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.\n\nDersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.',
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.\n\nDersom du vil finne igjen mappa seinare, kan du bruke lenka du fekk, eller du kan bokmerke sida.',
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.\n\nHvis du vil finne igjen mappa seinere, kan du bruke lenka du fikk, eller du kan bokmerke sida.',
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
  },