@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.
- package/es/ContactBlock/ContactBlock.js +150 -0
- package/es/ContactBlock/index.js +9 -0
- package/es/KeyPerformanceIndicator/KeyPerformanceIndicator.js +57 -0
- package/es/KeyPerformanceIndicator/index.js +9 -0
- package/es/index.js +3 -1
- package/es/locale/messages-en.js +5 -0
- package/es/locale/messages-nb.js +5 -0
- package/es/locale/messages-nn.js +5 -0
- package/es/locale/messages-se.js +5 -0
- package/es/locale/messages-sma.js +5 -0
- package/lib/ContactBlock/ContactBlock.d.ts +20 -0
- package/lib/ContactBlock/ContactBlock.js +154 -0
- package/lib/ContactBlock/index.d.ts +9 -0
- package/lib/ContactBlock/index.js +17 -0
- package/lib/KeyPerformanceIndicator/KeyPerformanceIndicator.d.ts +8 -0
- package/lib/KeyPerformanceIndicator/KeyPerformanceIndicator.js +62 -0
- package/lib/KeyPerformanceIndicator/index.d.ts +1 -0
- package/lib/KeyPerformanceIndicator/index.js +13 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +14 -0
- package/lib/locale/messages-en.d.ts +5 -0
- package/lib/locale/messages-en.js +5 -0
- package/lib/locale/messages-nb.d.ts +5 -0
- package/lib/locale/messages-nb.js +5 -0
- package/lib/locale/messages-nn.d.ts +5 -0
- package/lib/locale/messages-nn.js +5 -0
- package/lib/locale/messages-se.d.ts +5 -0
- package/lib/locale/messages-se.js +5 -0
- package/lib/locale/messages-sma.d.ts +5 -0
- package/lib/locale/messages-sma.js +5 -0
- package/package.json +12 -12
- package/src/ContactBlock/ContactBlock.tsx +144 -0
- package/src/ContactBlock/Contactblock.stories.tsx +88 -0
- package/src/ContactBlock/index.ts +10 -0
- package/src/KeyPerformanceIndicator/KeyPerformanceIndicator.stories.tsx +79 -0
- package/src/KeyPerformanceIndicator/KeyPerformanceIndicator.tsx +66 -0
- package/src/KeyPerformanceIndicator/index.ts +9 -0
- package/src/index.ts +2 -0
- package/src/locale/messages-en.ts +5 -0
- package/src/locale/messages-nb.ts +5 -0
- package/src/locale/messages-nn.ts +5 -0
- package/src/locale/messages-se.ts +5 -0
- 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.
|
|
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.
|
|
36
|
-
"@ndla/carousel": "^3.0.
|
|
35
|
+
"@ndla/button": "^10.0.13",
|
|
36
|
+
"@ndla/carousel": "^3.0.13",
|
|
37
37
|
"@ndla/core": "^3.1.3",
|
|
38
|
-
"@ndla/forms": "^4.2.
|
|
38
|
+
"@ndla/forms": "^4.2.22",
|
|
39
39
|
"@ndla/hooks": "^2.0.4",
|
|
40
|
-
"@ndla/icons": "^2.2.
|
|
40
|
+
"@ndla/icons": "^2.2.13",
|
|
41
41
|
"@ndla/licenses": "^7.0.4",
|
|
42
|
-
"@ndla/modal": "^2.2.
|
|
43
|
-
"@ndla/notion": "^4.2.
|
|
44
|
-
"@ndla/safelink": "^4.0.
|
|
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.
|
|
47
|
-
"@ndla/tooltip": "^4.0.
|
|
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
|
|
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": "
|
|
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',
|