@ndla/ui 35.0.28 → 35.1.1

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 (43) hide show
  1. package/es/ContactBlock/ContactBlock.js +150 -0
  2. package/es/ContactBlock/index.js +9 -0
  3. package/es/KeyPerformanceIndicator/KeyPerformanceIndicator.js +57 -0
  4. package/es/KeyPerformanceIndicator/index.js +9 -0
  5. package/es/index.js +3 -1
  6. package/es/locale/messages-en.js +5 -0
  7. package/es/locale/messages-nb.js +5 -0
  8. package/es/locale/messages-nn.js +5 -0
  9. package/es/locale/messages-se.js +5 -0
  10. package/es/locale/messages-sma.js +5 -0
  11. package/lib/ContactBlock/ContactBlock.d.ts +20 -0
  12. package/lib/ContactBlock/ContactBlock.js +154 -0
  13. package/lib/ContactBlock/index.d.ts +9 -0
  14. package/lib/ContactBlock/index.js +17 -0
  15. package/lib/KeyPerformanceIndicator/KeyPerformanceIndicator.d.ts +8 -0
  16. package/lib/KeyPerformanceIndicator/KeyPerformanceIndicator.js +62 -0
  17. package/lib/KeyPerformanceIndicator/index.d.ts +1 -0
  18. package/lib/KeyPerformanceIndicator/index.js +13 -0
  19. package/lib/index.d.ts +2 -0
  20. package/lib/index.js +14 -0
  21. package/lib/locale/messages-en.d.ts +5 -0
  22. package/lib/locale/messages-en.js +5 -0
  23. package/lib/locale/messages-nb.d.ts +5 -0
  24. package/lib/locale/messages-nb.js +5 -0
  25. package/lib/locale/messages-nn.d.ts +5 -0
  26. package/lib/locale/messages-nn.js +5 -0
  27. package/lib/locale/messages-se.d.ts +5 -0
  28. package/lib/locale/messages-se.js +5 -0
  29. package/lib/locale/messages-sma.d.ts +5 -0
  30. package/lib/locale/messages-sma.js +5 -0
  31. package/package.json +12 -12
  32. package/src/ContactBlock/ContactBlock.tsx +144 -0
  33. package/src/ContactBlock/Contactblock.stories.tsx +88 -0
  34. package/src/ContactBlock/index.ts +10 -0
  35. package/src/KeyPerformanceIndicator/KeyPerformanceIndicator.stories.tsx +79 -0
  36. package/src/KeyPerformanceIndicator/KeyPerformanceIndicator.tsx +66 -0
  37. package/src/KeyPerformanceIndicator/index.ts +9 -0
  38. package/src/index.ts +2 -0
  39. package/src/locale/messages-en.ts +5 -0
  40. package/src/locale/messages-nb.ts +5 -0
  41. package/src/locale/messages-nn.ts +5 -0
  42. package/src/locale/messages-se.ts +5 -0
  43. package/src/locale/messages-sma.ts +5 -0
@@ -80,6 +80,8 @@ declare const messages: {
80
80
  folder: string;
81
81
  delete: string;
82
82
  edit: string;
83
+ updated: string;
84
+ defaultPageDescription: string;
83
85
  missingName: string;
84
86
  folderDeleted: string;
85
87
  folderCreated: string;
@@ -90,6 +92,7 @@ declare const messages: {
90
92
  onDragEndMissingOver: string;
91
93
  onDragCancel: string;
92
94
  dragHandle: string;
95
+ sharedWarning: string;
93
96
  sharing: {
94
97
  share: string;
95
98
  shared: string;
@@ -1182,6 +1185,8 @@ declare const messages: {
1182
1185
  title: string;
1183
1186
  cancel: string;
1184
1187
  save: string;
1188
+ photo: string;
1189
+ email: string;
1185
1190
  image: {
1186
1191
  altText: string;
1187
1192
  caption: string;
@@ -925,6 +925,8 @@ var messages = _objectSpread(_objectSpread({
925
925
  title: 'Tihttel',
926
926
  cancel: 'Botkke',
927
927
  save: 'Vurke',
928
+ photo: 'Foto',
929
+ email: 'E-post',
928
930
  image: {
929
931
  altText: 'Molssaevttolaš teaksta',
930
932
  caption: 'Govvateaksta',
@@ -1066,6 +1068,8 @@ var messages = _objectSpread(_objectSpread({
1066
1068
  folder: 'Máhppa',
1067
1069
  "delete": 'Sihko máhpa',
1068
1070
  edit: 'Rievdat máhpa',
1071
+ updated: 'Mappa har blitt oppdatert',
1072
+ defaultPageDescription: 'Legg til beskrivelse ved å redigere mappa',
1069
1073
  missingName: 'Čále nama máhppii',
1070
1074
  folderDeleted: '"{{folderName}}" lea sihkkojuvvon',
1071
1075
  folderCreated: '"{{folderName}}" lea ráhkaduvvon',
@@ -1076,6 +1080,7 @@ var messages = _objectSpread(_objectSpread({
1076
1080
  onDragEndMissingOver: 'Máhppa {{name}} lea luitojuvvon',
1077
1081
  onDragCancel: 'Sirdin botkejuvvui. Máhppa {{name}} lea luitojuvvon.',
1078
1082
  dragHandle: 'Ordne máhpa {{name}}',
1083
+ sharedWarning: 'Navn og beskrivelse blir synlig for alle du deler mappen med',
1079
1084
  sharing: {
1080
1085
  share: 'Juoge máhpa',
1081
1086
  shared: 'Juogaduvvon',
@@ -80,6 +80,8 @@ declare const messages: {
80
80
  folder: string;
81
81
  delete: string;
82
82
  edit: string;
83
+ updated: string;
84
+ defaultPageDescription: string;
83
85
  missingName: string;
84
86
  folderDeleted: string;
85
87
  folderCreated: string;
@@ -90,6 +92,7 @@ declare const messages: {
90
92
  onDragEndMissingOver: string;
91
93
  onDragCancel: string;
92
94
  dragHandle: string;
95
+ sharedWarning: string;
93
96
  sharing: {
94
97
  share: string;
95
98
  shared: string;
@@ -1182,6 +1185,8 @@ declare const messages: {
1182
1185
  title: string;
1183
1186
  cancel: string;
1184
1187
  save: string;
1188
+ photo: string;
1189
+ email: string;
1185
1190
  image: {
1186
1191
  altText: string;
1187
1192
  caption: string;
@@ -925,6 +925,8 @@ var messages = _objectSpread(_objectSpread({
925
925
  title: 'Tihtele',
926
926
  cancel: 'Orrejh',
927
927
  save: 'Vöörhkh',
928
+ photo: 'Foto',
929
+ email: 'E-post',
928
930
  image: {
929
931
  altText: 'Alt-tekst',
930
932
  caption: 'Bildetekst',
@@ -1066,6 +1068,8 @@ var messages = _objectSpread(_objectSpread({
1066
1068
  folder: 'Mappe',
1067
1069
  "delete": 'Slett mappe',
1068
1070
  edit: 'Rediger mappe',
1071
+ updated: 'Mappa har blitt oppdatert',
1072
+ defaultPageDescription: 'Legg til beskrivelse ved å redigere mappa',
1069
1073
  missingName: 'Skriv navn på mappe',
1070
1074
  folderDeleted: '"{{folderName}}" er slettet',
1071
1075
  folderCreated: '"{{folderName}}" er oppretta',
@@ -1076,6 +1080,7 @@ var messages = _objectSpread(_objectSpread({
1076
1080
  onDragEndMissingOver: 'Mappa blei sloppe',
1077
1081
  onDragCancel: 'Flytting avbrutt. Mappa {{name}} blei sloppe',
1078
1082
  dragHandle: 'Sorter mappen {{name}}',
1083
+ sharedWarning: 'Navn og beskrivelse blir synlig for alle du deler mappen med',
1079
1084
  sharing: {
1080
1085
  share: 'Del mappe',
1081
1086
  shared: 'Delt',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
- "version": "35.0.28",
3
+ "version": "35.1.1",
4
4
  "description": "UI component library for NDLA.",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -32,19 +32,19 @@
32
32
  ],
33
33
  "dependencies": {
34
34
  "@ndla/article-scripts": "^3.0.17",
35
- "@ndla/button": "^10.0.12",
36
- "@ndla/carousel": "^3.0.12",
35
+ "@ndla/button": "^10.0.13",
36
+ "@ndla/carousel": "^3.0.13",
37
37
  "@ndla/core": "^3.1.3",
38
- "@ndla/forms": "^4.2.21",
38
+ "@ndla/forms": "^4.2.22",
39
39
  "@ndla/hooks": "^2.0.4",
40
- "@ndla/icons": "^2.2.12",
40
+ "@ndla/icons": "^2.2.13",
41
41
  "@ndla/licenses": "^7.0.4",
42
- "@ndla/modal": "^2.2.16",
43
- "@ndla/notion": "^4.2.18",
44
- "@ndla/safelink": "^4.0.22",
42
+ "@ndla/modal": "^2.2.17",
43
+ "@ndla/notion": "^4.2.19",
44
+ "@ndla/safelink": "^4.0.23",
45
45
  "@ndla/switch": "^1.0.9",
46
- "@ndla/tabs": "^2.1.19",
47
- "@ndla/tooltip": "^4.0.20",
46
+ "@ndla/tabs": "^2.1.20",
47
+ "@ndla/tooltip": "^4.0.21",
48
48
  "@ndla/util": "^3.1.12",
49
49
  "@radix-ui/react-accordion": "1.1.0",
50
50
  "@radix-ui/react-dropdown-menu": "2.0.2",
@@ -75,7 +75,7 @@
75
75
  "devDependencies": {
76
76
  "@babel/plugin-proposal-optional-chaining": "^7.11.0",
77
77
  "@ndla/types-backend": "0.2.1",
78
- "@ndla/types-embed": "^1.0.11",
78
+ "@ndla/types-embed": "^1.1.0",
79
79
  "@types/reach__dialog": "^0.1.0",
80
80
  "css-loader": "^6.7.3",
81
81
  "mini-css-extract-plugin": "^2.7.5",
@@ -86,5 +86,5 @@
86
86
  "publishConfig": {
87
87
  "access": "public"
88
88
  },
89
- "gitHead": "5409272e9cd733486c528ae68d576721e25d4674"
89
+ "gitHead": "3dc484701c98f3d9c26f44eff1013ae603e3cfed"
90
90
  }
@@ -0,0 +1,144 @@
1
+ /**
2
+ * Copyright (c) 2023-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ import { css } from '@emotion/react';
10
+ import styled from '@emotion/styled';
11
+ import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
12
+ import { spacing, fonts, colors, mq, breakpoints, misc } from '@ndla/core';
13
+ import { BlobPointy, BlobRound } from '@ndla/icons/common';
14
+ import { useTranslation } from 'react-i18next';
15
+ import concat from 'lodash/concat';
16
+ import { errorSvgSrc } from '../Embed/ImageEmbed';
17
+
18
+ interface Props {
19
+ image?: IImageMetaInformationV3;
20
+ jobTitle: string;
21
+ description: string;
22
+ blobColor?: 'pink' | 'green';
23
+ blob?: 'pointy' | 'round';
24
+ imageWidth?: number;
25
+ name: string;
26
+ email: string;
27
+ }
28
+ const CardWrapper = styled.div`
29
+ display: flex;
30
+ flex-direction: column;
31
+ padding: 0 0 ${spacing.medium} ${spacing.medium};
32
+ font-family: ${fonts.sans};
33
+ justify-content: center;
34
+ border-radius: ${misc.borderRadius};
35
+ border: 1px solid ${colors.brand.lighter};
36
+ margin-top: ${spacing.mediumlarge};
37
+ ${mq.range({ from: breakpoints.tabletWide })} {
38
+ flex-direction: row;
39
+ padding: 0 0 ${spacing.medium} ${spacing.medium};
40
+ gap: ${spacing.nsmall};
41
+ }
42
+ `;
43
+
44
+ const StyledHeader = styled.div`
45
+ ${fonts.sizes('22px', '30px')};
46
+ font-weight: ${fonts.weight.bold};
47
+ margin: 0 0 ${spacing.xsmall} 0;
48
+ padding-top: ${spacing.medium};
49
+ `;
50
+
51
+ const StyledDescriptionInformation = styled.div`
52
+ display: flex;
53
+ overflow-wrap: anywhere;
54
+ color: ${colors.text.light};
55
+ gap: ${spacing.xxsmall};
56
+ `;
57
+ const EmailLink = styled.a`
58
+ color: ${colors.text.light};
59
+ text-decoration-color: ${colors.text.light};
60
+ text-decoration-style: solid;
61
+ text-decoration: underline;
62
+ box-shadow: unset;
63
+ `;
64
+
65
+ const SummaryBlock = styled.p`
66
+ font-family: ${fonts.serif};
67
+ padding: 0 ${spacing.medium} 0 0;
68
+ ${mq.range({ from: breakpoints.tabletWide })} {
69
+ padding-top: 0;
70
+ }
71
+ `;
72
+
73
+ const ContentWrapper = styled.div`
74
+ display: flex;
75
+ overflow: hidden;
76
+ justify-content: space-between;
77
+ `;
78
+
79
+ const BlobWrapper = styled.div`
80
+ height: 180px;
81
+ width: 90px;
82
+ `;
83
+
84
+ const ImageWrapper = styled.div`
85
+ aspect-ratio: 16/9;
86
+ display: flex;
87
+ flex-direction: column;
88
+ gap: ${spacing.small};
89
+ padding: ${spacing.medium} ${spacing.medium} 0 0;
90
+
91
+ ${mq.range({ from: breakpoints.tabletWide })} {
92
+ padding-right: 0;
93
+ }
94
+ `;
95
+
96
+ const blobStyle = css`
97
+ width: 165px;
98
+ height: 180px;
99
+ transform: translate(10%, 0);
100
+ `;
101
+ const Email = styled.div`
102
+ min-width: 60px;
103
+ `;
104
+ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = 'green', blob = 'pointy' }: Props) => {
105
+ const { t } = useTranslation();
106
+ const isGreenBlob = blobColor === 'green';
107
+ const Blob = blob === 'pointy' ? BlobPointy : BlobRound;
108
+ const authors = concat(image?.copyright.processors, image?.copyright.creators, image?.copyright.rightsholders);
109
+
110
+ return (
111
+ <CardWrapper>
112
+ <ImageWrapper>
113
+ {image ? (
114
+ <>
115
+ <img alt={image.alttext.alttext} src={`${image.image.imageUrl}?width=286`} />
116
+ {`${t('photo')}: ${authors.reduce((acc, name) => (acc = `${acc} ${name?.name}`), '')} ${
117
+ image.copyright.license.license
118
+ }`}
119
+ </>
120
+ ) : (
121
+ <img alt={t('image.error.url')} src={errorSvgSrc} />
122
+ )}
123
+ </ImageWrapper>
124
+ <div>
125
+ <ContentWrapper>
126
+ <div>
127
+ <StyledHeader>{name}</StyledHeader>
128
+ <StyledDescriptionInformation>{jobTitle}</StyledDescriptionInformation>
129
+ <StyledDescriptionInformation>
130
+ <Email>{`${t('email')}:`}</Email>
131
+ <EmailLink href={`mailto:${email}?subject=Contact us`}>{email}</EmailLink>
132
+ </StyledDescriptionInformation>
133
+ </div>
134
+ <BlobWrapper>
135
+ <Blob css={blobStyle} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
136
+ </BlobWrapper>
137
+ </ContentWrapper>
138
+ <SummaryBlock>{description}</SummaryBlock>
139
+ </div>
140
+ </CardWrapper>
141
+ );
142
+ };
143
+
144
+ export default ContactBlock;
@@ -0,0 +1,88 @@
1
+ /**
2
+ * Copyright (c) 2023-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ import React from 'react';
10
+ import { Meta, StoryFn } from '@storybook/react';
11
+ import ContactBlock from './ContactBlock';
12
+ import { defaultParameters } from '../../../../stories/defaults';
13
+
14
+ export default {
15
+ title: 'Enkle komponenter/Kontaktblokk',
16
+ component: ContactBlock,
17
+ tags: ['autodocs'],
18
+ args: {
19
+ image: {
20
+ id: '65750',
21
+ metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65750',
22
+ title: {
23
+ title: 'Sigurd Trageton',
24
+ language: 'nb',
25
+ },
26
+ alttext: {
27
+ alttext: 'Sigurd Trageton',
28
+ language: 'nb',
29
+ },
30
+ copyright: {
31
+ license: {
32
+ license: 'CC-BY-SA-4.0',
33
+ description: 'Creative Commons Attribution-ShareAlike 4.0 International',
34
+ url: 'https://creativecommons.org/licenses/by-sa/4.0/',
35
+ },
36
+ origin: '',
37
+ creators: [
38
+ {
39
+ type: 'photographer',
40
+ name: 'Tom Knudsen',
41
+ },
42
+ ],
43
+ processors: [],
44
+ rightsholders: [],
45
+ },
46
+ tags: {
47
+ tags: ['Sigurd', 'Trageton', 'Portrett'],
48
+ language: 'nb',
49
+ },
50
+ caption: {
51
+ caption: 'Sigurd Trageton',
52
+ language: 'nb',
53
+ },
54
+ supportedLanguages: ['nb', 'nn'],
55
+ created: '2023-03-29T07:15:50Z',
56
+ createdBy: 'f-jBTU8O8kYbUW20lMeIuTSv',
57
+ modelRelease: 'not-set',
58
+ image: {
59
+ fileName: 'RVrVQIKh.jpg',
60
+ size: 404340,
61
+ contentType: 'image/jpeg',
62
+ imageUrl: 'https://api.test.ndla.no/image-api/raw/RVrVQIKh.jpg',
63
+ dimensions: {
64
+ width: 1600,
65
+ height: 2000,
66
+ },
67
+ language: 'nb',
68
+ },
69
+ },
70
+ jobTitle: 'Daglig leder og ansvarlig redaktør, Vestland fylkeskommune',
71
+ description:
72
+ 'Sigurd har variert ledererfaring fra utdanningssektoren, både fra videregående skole, nasjonalt senter og fra universitets/høgskolesektoren. Ansvarsområdene dekker bl.a. utdanning/opplæring/studiekvalitet, økonomi, HR, stratgi og IT-utvikling/-drift.',
73
+ name: 'Sigurd Trageton',
74
+ email: 'sigurd@ndla.no',
75
+ blobColor: 'green',
76
+ blob: 'pointy',
77
+ },
78
+ parameters: {
79
+ ...defaultParameters,
80
+ layout: 'centered',
81
+ },
82
+ } as Meta<typeof ContactBlock>;
83
+
84
+ export const ContactBlockStory: StoryFn<typeof ContactBlock> = ({ ...args }) => {
85
+ return <ContactBlock {...args} />;
86
+ };
87
+
88
+ ContactBlockStory.storyName = 'Kontaktblokk';
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright (c) 2023-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ import ContactBlock from './ContactBlock';
9
+
10
+ export default ContactBlock;
@@ -0,0 +1,79 @@
1
+ /**
2
+ * Copyright (c) 2023-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ import React from 'react';
10
+ import { Meta, StoryFn } from '@storybook/react';
11
+ import { defaultParameters } from '../../../../stories/defaults';
12
+ import KeyPerformanceIndicator from './KeyPerformanceIndicator';
13
+
14
+ export default {
15
+ title: 'Enkle komponenter/Nøkkeltall',
16
+ component: KeyPerformanceIndicator,
17
+ tags: ['autodocs'],
18
+ parameters: {
19
+ ...defaultParameters,
20
+ layout: 'centered',
21
+ },
22
+ args: {
23
+ title: '500',
24
+ subTitle: 'TVERRFAGLIGE RESSURSER',
25
+ image: {
26
+ id: '65797',
27
+ metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65797',
28
+ title: {
29
+ title: 'Nøkkeltall tverrfaglig',
30
+ language: 'nb',
31
+ },
32
+ alttext: {
33
+ alttext: 'Nøkkeltall tverrfaglig',
34
+ language: 'nb',
35
+ },
36
+ copyright: {
37
+ license: {
38
+ license: 'PD',
39
+ description: 'Public Domain Mark',
40
+ url: 'https://creativecommons.org/about/pdm',
41
+ },
42
+ origin: 'NDLA',
43
+ creators: [
44
+ {
45
+ type: 'artist',
46
+ name: 'Hedvig',
47
+ },
48
+ ],
49
+ processors: [],
50
+ rightsholders: [],
51
+ },
52
+ tags: {
53
+ tags: ['Nøkkeltall', 'Tverrfaglig', 'svg'],
54
+ language: 'nb',
55
+ },
56
+ caption: {
57
+ caption: '',
58
+ language: 'nb',
59
+ },
60
+ supportedLanguages: ['nb'],
61
+ created: '2023-04-18T11:20:34Z',
62
+ createdBy: 'f-jBTU8O8kYbUW20lMeIuTSv',
63
+ modelRelease: 'not-set',
64
+ image: {
65
+ fileName: 'wMowCjRg.svg',
66
+ size: 43278,
67
+ contentType: 'image/svg+xml',
68
+ imageUrl: 'https://api.test.ndla.no/image-api/raw/wMowCjRg.svg',
69
+ language: 'nb',
70
+ },
71
+ },
72
+ },
73
+ } as Meta<typeof KeyPerformanceIndicator>;
74
+
75
+ export const KeyPerformanceIndicatorStory: StoryFn<typeof KeyPerformanceIndicator> = ({ ...args }) => {
76
+ return <KeyPerformanceIndicator {...args} />;
77
+ };
78
+
79
+ KeyPerformanceIndicatorStory.storyName = 'Nøkkeltall';
@@ -0,0 +1,66 @@
1
+ /*
2
+ * Copyright (c) 2023-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ import styled from '@emotion/styled';
10
+ import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
11
+ import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
12
+
13
+ const ContentWrapper = styled.div`
14
+ display: flex;
15
+ flex-direction: column;
16
+ justify-content: center;
17
+ align-items: center;
18
+ padding: ${spacing.small};
19
+ align-items: center;
20
+ `;
21
+
22
+ const StyledImage = styled.img`
23
+ max-width: 150px;
24
+ `;
25
+
26
+ const TitleWrapper = styled.div`
27
+ color: ${colors.text.primary};
28
+ font-family: ${fonts.sans};
29
+ font-weight: ${fonts.weight.bold};
30
+ overflow-wrap: break-word;
31
+ ${fonts.sizes('38px', '48px')};
32
+ ${mq.range({ until: breakpoints.tabletWide })} {
33
+ ${fonts.sizes('30px', '36px')};
34
+ }
35
+ max-width: 240px;
36
+ `;
37
+
38
+ const SubTitleWrapper = styled.div`
39
+ overflow-wrap: 'break-word';
40
+ ${mq.range({ until: breakpoints.tabletWide })} {
41
+ padding-top: ${spacing.xxsmall};
42
+ ${fonts.sizes('18px', '29px')};
43
+ color: ${colors.text.primary};
44
+ font-weight: ${fonts.weight.normal};
45
+ font-family: ${fonts.sans};
46
+ }
47
+ max-width: 240px;
48
+ `;
49
+
50
+ interface Props {
51
+ image?: IImageMetaInformationV3;
52
+ title: string;
53
+ subTitle: string;
54
+ }
55
+
56
+ const KeyPerformanceIndicator = ({ image, title, subTitle }: Props) => {
57
+ return (
58
+ <ContentWrapper>
59
+ <StyledImage src={image?.image.imageUrl} alt={image?.alttext.alttext} />
60
+ <TitleWrapper>{title}</TitleWrapper>
61
+ <SubTitleWrapper>{subTitle}</SubTitleWrapper>
62
+ </ContentWrapper>
63
+ );
64
+ };
65
+
66
+ export default KeyPerformanceIndicator;
@@ -0,0 +1,9 @@
1
+ /*
2
+ * Copyright (c) 2023-present, NDLA.
3
+ *
4
+ * This source code is licensed under the GPLv3 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+
9
+ export { default as KeyPerformanceIndicator } from './KeyPerformanceIndicator';
package/src/index.ts CHANGED
@@ -271,3 +271,5 @@ export type { TreeStructureProps } from './TreeStructure';
271
271
  export { SearchField, SearchResultList, SearchResultItem, ActiveFilters, ToggleSearchButton } from './Search';
272
272
  export { default as LetterFilter } from './LetterFilter';
273
273
  export { BlogPostV2 } from './BlogPost';
274
+ export { KeyPerformanceIndicator } from './KeyPerformanceIndicator';
275
+ export { default as ContactBlock } from './ContactBlock';
@@ -964,6 +964,8 @@ const messages = {
964
964
  loading: 'Loading',
965
965
  title: 'Title',
966
966
  save: 'Save',
967
+ photo: 'Photo',
968
+ email: 'Email',
967
969
  image: {
968
970
  altText: 'Alt-text',
969
971
  caption: 'Caption',
@@ -1106,6 +1108,8 @@ const messages = {
1106
1108
  folder: 'Folder',
1107
1109
  delete: 'Delete folder',
1108
1110
  edit: 'Edit folder',
1111
+ updated: 'Folder updated',
1112
+ defaultPageDescription: 'Add a description by editing the folder',
1109
1113
  missingName: 'Folder name required',
1110
1114
  folderDeleted: '"{{folderName}}" deleted',
1111
1115
  folderCreated: '"{{folderName}} created',
@@ -1116,6 +1120,7 @@ const messages = {
1116
1120
  onDragEndMissingOver: 'The folder {{name}} was dropped',
1117
1121
  onDragCancel: 'Dragging was cancelled. The folder {{name}} was dropped',
1118
1122
  dragHandle: 'Drag the folder {{name}}',
1123
+ sharedWarning: 'Name and description will be visible for everyone you share the folder with',
1119
1124
  sharing: {
1120
1125
  share: 'Share folder',
1121
1126
  shared: 'Shared',
@@ -963,6 +963,8 @@ const messages = {
963
963
  title: 'Tittel',
964
964
  cancel: 'Avbryt',
965
965
  save: 'Lagre',
966
+ photo: 'Foto',
967
+ email: 'E-post',
966
968
  image: {
967
969
  altText: 'Alt-tekst',
968
970
  caption: 'Bildetekst',
@@ -1105,6 +1107,8 @@ const messages = {
1105
1107
  folder: 'Mappe',
1106
1108
  delete: 'Slett mappe',
1107
1109
  edit: 'Rediger mappe',
1110
+ updated: 'Mappen har blitt oppdatert',
1111
+ defaultPageDescription: 'Legg til beskrivelse ved å redigere mappen',
1108
1112
  missingName: 'Skriv navn på mappe',
1109
1113
  folderDeleted: '"{{folderName}}" er slettet',
1110
1114
  folderCreated: '"{{folderName}}" er opprettet',
@@ -1115,6 +1119,7 @@ const messages = {
1115
1119
  onDragEndMissingOver: 'Mappen {{name}} ble sluppet',
1116
1120
  onDragCancel: 'Flytting avbrutt. Mappen {{name}} ble sluppet',
1117
1121
  dragHandle: 'Sorter mappen {{name}}',
1122
+ sharedWarning: 'Navn og beskrivelse blir synlig for alle du deler mappen med',
1118
1123
  sharing: {
1119
1124
  share: 'Del mappe',
1120
1125
  shared: 'Delt',
@@ -963,6 +963,8 @@ const messages = {
963
963
  loading: 'Laster',
964
964
  title: 'Tittel',
965
965
  save: 'Lagre',
966
+ photo: 'Foto',
967
+ email: 'E-post',
966
968
  image: {
967
969
  altText: 'Alt-tekst',
968
970
  caption: 'Bilettekst',
@@ -1105,6 +1107,8 @@ const messages = {
1105
1107
  folder: 'Mappe',
1106
1108
  delete: 'Slett mappe',
1107
1109
  edit: 'Rediger mappe',
1110
+ updated: 'Mappa har blitt oppdatert',
1111
+ defaultPageDescription: 'Legg til skildring ved å redigere mappa',
1108
1112
  missingName: 'Skriv namn på mappe',
1109
1113
  folderDeleted: '"{{folderName}}" er sletta',
1110
1114
  folderCreated: '"{{folderName}}" er oppretta',
@@ -1115,6 +1119,7 @@ const messages = {
1115
1119
  onDragEndMissingOver: 'Mappa blei sleppt',
1116
1120
  onDragCancel: 'Flytting avbrutt. Mappa {{name}} blei sleppt',
1117
1121
  dragHandle: 'Sorter mappa {{name}}',
1122
+ sharedWarning: 'Namn og skildring blir synleg for alle du deler mappa med',
1118
1123
  sharing: {
1119
1124
  share: 'Del mappe',
1120
1125
  shared: 'Delt',
@@ -964,6 +964,8 @@ const messages = {
964
964
  title: 'Tihttel',
965
965
  cancel: 'Botkke',
966
966
  save: 'Vurke',
967
+ photo: 'Foto',
968
+ email: 'E-post',
967
969
  image: {
968
970
  altText: 'Molssaevttolaš teaksta',
969
971
  caption: 'Govvateaksta',
@@ -1106,6 +1108,8 @@ const messages = {
1106
1108
  folder: 'Máhppa',
1107
1109
  delete: 'Sihko máhpa',
1108
1110
  edit: 'Rievdat máhpa',
1111
+ updated: 'Mappa har blitt oppdatert',
1112
+ defaultPageDescription: 'Legg til beskrivelse ved å redigere mappa',
1109
1113
  missingName: 'Čále nama máhppii',
1110
1114
  folderDeleted: '"{{folderName}}" lea sihkkojuvvon',
1111
1115
  folderCreated: '"{{folderName}}" lea ráhkaduvvon',
@@ -1116,6 +1120,7 @@ const messages = {
1116
1120
  onDragEndMissingOver: 'Máhppa {{name}} lea luitojuvvon',
1117
1121
  onDragCancel: 'Sirdin botkejuvvui. Máhppa {{name}} lea luitojuvvon.',
1118
1122
  dragHandle: 'Ordne máhpa {{name}}',
1123
+ sharedWarning: 'Navn og beskrivelse blir synlig for alle du deler mappen med',
1119
1124
  sharing: {
1120
1125
  share: 'Juoge máhpa',
1121
1126
  shared: 'Juogaduvvon',