@ndla/ui 3.2.1-alpha.5 → 3.2.3
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/Article/ArticleAuthorContent.js +1 -2
- package/es/Article/ArticleSideBar.js +42 -14
- package/es/AuthorInfo/AuthorInfo.js +1 -2
- package/es/BackgroundImage/BackgroundImage.js +5 -15
- package/es/ContentLoader/index.js +14 -27
- package/es/Dialog/Dialog.js +10 -28
- package/es/FactBox/FactBox.js +7 -11
- package/es/Figure/Figure.js +13 -41
- package/es/Figure/FigureExpandButton.js +2 -11
- package/es/Figure/FigureLicense.js +4 -24
- package/es/Figure/FigureLicenseDialog.js +2 -20
- package/es/FileList/File.js +0 -13
- package/es/FileList/FileList.js +0 -13
- package/es/Hero/Hero.js +0 -6
- package/es/Image/Image.js +4 -27
- package/es/Image/ImageLink.js +3 -12
- package/es/Image/LazyLoadImage.js +4 -13
- package/es/InfoBox/InfoBox.js +0 -4
- package/es/InfoWidget/InfoWidget.js +2 -21
- package/es/Logo/Logo.js +6 -22
- package/es/Logo/SvgLogo.js +4 -12
- package/es/Masthead/Masthead.js +12 -33
- package/es/NoContentBox/NoContentBox.js +2 -11
- package/es/Portrait/Portrait.js +0 -11
- package/es/RelatedArticleList/RelatedArticleList.js +4 -23
- package/es/ResourcesWrapper/ResourcesTitle.js +0 -4
- package/es/ResourcesWrapper/ResourcesTopicTitle.js +12 -25
- package/es/ResourcesWrapper/ResourcesWrapper.js +2 -11
- package/es/Topic/Topic.js +21 -22
- package/es/Translation/Translation.js +0 -5
- package/es/Translation/TranslationBox.js +7 -3
- package/es/Translation/TranslationLine.js +4 -15
- package/es/index-javascript.js +1 -19
- package/es/index.js +18 -0
- package/es/locale/messages-en.js +4 -0
- package/es/locale/messages-nb.js +5 -1
- package/es/locale/messages-nn.js +5 -1
- package/lib/Article/ArticleSideBar.d.ts +2 -1
- package/lib/Article/ArticleSideBar.js +43 -14
- package/lib/BackgroundImage/BackgroundImage.d.ts +11 -0
- package/lib/BackgroundImage/BackgroundImage.js +5 -17
- package/lib/BackgroundImage/index.d.ts +2 -0
- package/lib/ContentLoader/index.d.ts +20 -0
- package/lib/ContentLoader/index.js +14 -28
- package/lib/Dialog/Dialog.d.ts +23 -0
- package/lib/Dialog/Dialog.js +9 -29
- package/lib/Dialog/index.d.ts +10 -0
- package/lib/FactBox/FactBox.d.ts +16 -0
- package/lib/FactBox/FactBox.js +5 -11
- package/lib/FactBox/index.d.ts +2 -0
- package/lib/Figure/Figure.d.ts +49 -0
- package/lib/Figure/Figure.js +11 -41
- package/lib/Figure/FigureExpandButton.d.ts +16 -0
- package/lib/Figure/FigureExpandButton.js +2 -13
- package/lib/Figure/FigureLicense.d.ts +33 -0
- package/lib/Figure/FigureLicense.js +5 -27
- package/lib/Figure/FigureLicenseDialog.d.ts +29 -0
- package/lib/Figure/FigureLicenseDialog.js +1 -22
- package/lib/Figure/index.d.ts +12 -0
- package/lib/FileList/File.d.ts +7 -0
- package/lib/FileList/File.js +0 -14
- package/lib/FileList/FileList.d.ts +17 -0
- package/lib/FileList/FileList.js +0 -14
- package/lib/FileList/index.d.ts +3 -0
- package/lib/Hero/Hero.d.ts +27 -0
- package/lib/Hero/Hero.js +0 -8
- package/lib/Hero/index.d.ts +9 -0
- package/lib/Image/Image.d.ts +34 -0
- package/lib/Image/Image.js +4 -28
- package/lib/Image/ImageLink.d.ts +18 -0
- package/lib/Image/ImageLink.js +3 -15
- package/lib/Image/LazyLoadImage.d.ts +17 -0
- package/lib/Image/LazyLoadImage.js +3 -13
- package/lib/Image/index.d.ts +12 -0
- package/lib/InfoBox/InfoBox.d.ts +6 -0
- package/lib/InfoBox/InfoBox.js +0 -5
- package/{src/InfoBox/index.js → lib/InfoBox/index.d.ts} +0 -0
- package/lib/InfoWidget/InfoWidget.d.ts +19 -0
- package/lib/InfoWidget/InfoWidget.js +2 -22
- package/lib/InfoWidget/index.d.ts +2 -0
- package/lib/Logo/Logo.d.ts +24 -0
- package/lib/Logo/Logo.js +6 -29
- package/lib/Logo/SvgLogo.d.ts +14 -0
- package/lib/Logo/SvgLogo.js +4 -13
- package/lib/Logo/index.d.ts +9 -0
- package/lib/Masthead/Masthead.d.ts +27 -0
- package/lib/Masthead/Masthead.js +10 -34
- package/lib/Masthead/index.d.ts +10 -0
- package/lib/NoContentBox/NoContentBox.d.ts +14 -0
- package/lib/NoContentBox/NoContentBox.js +1 -11
- package/lib/NoContentBox/index.d.ts +9 -0
- package/lib/Portrait/Portrait.d.ts +15 -0
- package/lib/Portrait/Portrait.js +0 -12
- package/lib/Portrait/index.d.ts +9 -0
- package/lib/RelatedArticleList/RelatedArticleList.d.ts +25 -0
- package/lib/RelatedArticleList/RelatedArticleList.js +2 -23
- package/lib/RelatedArticleList/index.d.ts +10 -0
- package/lib/ResourcesWrapper/ResourcesTitle.d.ts +13 -0
- package/lib/ResourcesWrapper/ResourcesTitle.js +0 -5
- package/lib/ResourcesWrapper/ResourcesTopicTitle.d.ts +13 -0
- package/lib/ResourcesWrapper/ResourcesTopicTitle.js +11 -26
- package/lib/ResourcesWrapper/ResourcesWrapper.d.ts +18 -0
- package/lib/ResourcesWrapper/ResourcesWrapper.js +2 -12
- package/lib/ResourcesWrapper/index.d.ts +11 -0
- package/lib/Topic/Topic.d.ts +3 -2
- package/lib/Topic/Topic.js +20 -20
- package/lib/Translation/Translation.d.ts +14 -0
- package/lib/Translation/Translation.js +0 -6
- package/lib/Translation/TranslationBox.d.ts +10 -0
- package/lib/Translation/TranslationBox.js +6 -2
- package/lib/Translation/TranslationLine.d.ts +16 -0
- package/lib/Translation/TranslationLine.js +4 -22
- package/{src/Translation/index.js → lib/Translation/index.d.ts} +0 -0
- package/lib/index-javascript.js +0 -250
- package/lib/index.d.ts +18 -0
- package/lib/index.js +286 -0
- package/lib/locale/messages-en.d.ts +4 -0
- package/lib/locale/messages-en.js +4 -0
- package/lib/locale/messages-nb.d.ts +4 -0
- package/lib/locale/messages-nb.js +5 -1
- package/lib/locale/messages-nn.d.ts +4 -0
- package/lib/locale/messages-nn.js +5 -1
- package/lib/utils/createUniversalPortal.d.ts +9 -0
- package/package.json +6 -6
- package/src/Article/ArticleAuthorContent.tsx +0 -1
- package/src/Article/ArticleSideBar.tsx +31 -3
- package/src/AuthorInfo/AuthorInfo.tsx +0 -1
- package/src/BackgroundImage/BackgroundImage.tsx +32 -0
- package/src/BackgroundImage/{index.js → index.ts} +0 -0
- package/src/ContentLoader/{index.js → index.tsx} +20 -30
- package/src/Dialog/{Dialog.jsx → Dialog.tsx} +20 -32
- package/src/Dialog/{index.js → index.ts} +0 -0
- package/src/FactBox/{FactBox.jsx → FactBox.tsx} +12 -14
- package/src/FactBox/{index.js → index.ts} +0 -0
- package/src/Figure/{Figure.js → Figure.tsx} +46 -53
- package/src/Figure/{FigureExpandButton.js → FigureExpandButton.tsx} +8 -9
- package/src/Figure/{FigureLicense.js → FigureLicense.tsx} +32 -30
- package/src/Figure/{FigureLicenseDialog.js → FigureLicenseDialog.tsx} +22 -22
- package/src/Figure/{index.js → index.ts} +0 -0
- package/src/FileList/{File.jsx → File.tsx} +8 -18
- package/src/FileList/FileList.tsx +36 -0
- package/src/FileList/{index.js → index.ts} +0 -0
- package/src/Hero/Hero.tsx +58 -0
- package/src/Hero/{index.js → index.ts} +2 -0
- package/src/Image/{Image.jsx → Image.tsx} +40 -30
- package/src/Image/{ImageLink.js → ImageLink.tsx} +11 -12
- package/src/Image/LazyLoadImage.tsx +40 -0
- package/src/Image/__tests__/__snapshots__/Image-test.jsx.snap +4 -3
- package/src/Image/{index.js → index.ts} +1 -0
- package/src/InfoBox/InfoBox.tsx +11 -0
- package/src/InfoBox/index.ts +1 -0
- package/src/InfoWidget/{InfoWidget.jsx → InfoWidget.tsx} +19 -26
- package/src/InfoWidget/{index.js → index.ts} +0 -0
- package/src/Logo/{Logo.jsx → Logo.tsx} +21 -28
- package/src/Logo/{SvgLogo.jsx → SvgLogo.tsx} +8 -14
- package/src/Logo/{index.js → index.ts} +0 -0
- package/src/Masthead/{Masthead.jsx → Masthead.tsx} +33 -35
- package/src/Masthead/{index.js → index.ts} +0 -0
- package/src/NoContentBox/{NoContentBox.jsx → NoContentBox.tsx} +7 -13
- package/src/NoContentBox/{index.js → index.ts} +0 -0
- package/src/Portrait/{Portrait.jsx → Portrait.tsx} +8 -14
- package/src/Portrait/{index.js → index.ts} +0 -0
- package/src/RelatedArticleList/{RelatedArticleList.jsx → RelatedArticleList.tsx} +43 -30
- package/src/RelatedArticleList/{index.js → index.ts} +0 -0
- package/src/ResourcesWrapper/{ResourcesTitle.jsx → ResourcesTitle.tsx} +5 -7
- package/src/ResourcesWrapper/{ResourcesTopicTitle.jsx → ResourcesTopicTitle.tsx} +23 -22
- package/src/ResourcesWrapper/{ResourcesWrapper.jsx → ResourcesWrapper.tsx} +9 -14
- package/src/ResourcesWrapper/{index.js → index.ts} +0 -0
- package/src/Topic/Topic.tsx +3 -4
- package/src/Translation/{Translation.jsx → Translation.tsx} +7 -8
- package/src/Translation/TranslationBox.tsx +20 -0
- package/src/Translation/{TranslationLine.jsx → TranslationLine.tsx} +11 -18
- package/src/Translation/index.ts +3 -0
- package/src/index-javascript.js +0 -33
- package/src/index.ts +43 -0
- package/src/locale/messages-en.ts +4 -0
- package/src/locale/messages-nb.ts +5 -1
- package/src/locale/messages-nn.ts +5 -1
- package/src/utils/{createUniversalPortal.jsx → createUniversalPortal.tsx} +3 -3
- package/es/Image/shapes.js +0 -18
- package/lib/Image/shapes.js +0 -33
- package/src/BackgroundImage/BackgroundImage.jsx +0 -39
- package/src/FileList/FileList.jsx +0 -36
- package/src/Hero/Hero.jsx +0 -38
- package/src/Image/LazyLoadImage.jsx +0 -39
- package/src/Image/shapes.js +0 -21
- package/src/InfoBox/InfoBox.jsx +0 -13
- package/src/Translation/TranslationBox.jsx +0 -12
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import BEMHelper from 'react-bem-helper';
|
|
4
|
-
|
|
5
|
-
import { breakpoints } from '@ndla/util';
|
|
6
|
-
|
|
7
|
-
const classes = BEMHelper('c-background-image');
|
|
8
|
-
|
|
9
|
-
const BackgroundImage = ({ images, showOverlay }) => (
|
|
10
|
-
<div {...classes('', showOverlay)}>
|
|
11
|
-
{images &&
|
|
12
|
-
images.map((image) =>
|
|
13
|
-
image.types.map((type) => (
|
|
14
|
-
<div
|
|
15
|
-
key={`${image.url}${type}`}
|
|
16
|
-
{...classes('background', type)}
|
|
17
|
-
style={{ backgroundImage: `url(${image.url})` }}
|
|
18
|
-
/>
|
|
19
|
-
)),
|
|
20
|
-
)}
|
|
21
|
-
</div>
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
BackgroundImage.propTypes = {
|
|
25
|
-
showOverlay: PropTypes.bool,
|
|
26
|
-
className: PropTypes.string,
|
|
27
|
-
images: PropTypes.arrayOf(
|
|
28
|
-
PropTypes.shape({
|
|
29
|
-
url: PropTypes.string.isRequired,
|
|
30
|
-
types: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(breakpoints))).isRequired,
|
|
31
|
-
}),
|
|
32
|
-
).isRequired,
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
BackgroundImage.defaultProps = {
|
|
36
|
-
showOverlay: false,
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export default BackgroundImage;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import BEMHelper from 'react-bem-helper';
|
|
4
|
-
import File from './File';
|
|
5
|
-
|
|
6
|
-
const classes = BEMHelper('c-file-list');
|
|
7
|
-
|
|
8
|
-
const FileList = ({ files, heading, id }) => (
|
|
9
|
-
<section {...classes()}>
|
|
10
|
-
<h1 {...classes('heading')}>{heading}</h1>
|
|
11
|
-
<ul {...classes('files')}>
|
|
12
|
-
{files.map((file) => (
|
|
13
|
-
<File key={`file-${id}-${file.title}`} file={file} id={id} />
|
|
14
|
-
))}
|
|
15
|
-
</ul>
|
|
16
|
-
</section>
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
FileList.propTypes = {
|
|
20
|
-
id: PropTypes.string.isRequired,
|
|
21
|
-
heading: PropTypes.string.isRequired,
|
|
22
|
-
files: PropTypes.arrayOf(
|
|
23
|
-
PropTypes.shape({
|
|
24
|
-
title: PropTypes.string.isRequired,
|
|
25
|
-
formats: PropTypes.arrayOf(
|
|
26
|
-
PropTypes.shape({
|
|
27
|
-
url: PropTypes.string.isRequired,
|
|
28
|
-
fileType: PropTypes.string.isRequired,
|
|
29
|
-
tooltip: PropTypes.string.isRequired,
|
|
30
|
-
}),
|
|
31
|
-
).isRequired,
|
|
32
|
-
}),
|
|
33
|
-
).isRequired,
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export default FileList;
|
package/src/Hero/Hero.jsx
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2016-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 PropTypes from 'prop-types';
|
|
11
|
-
import BEMHelper from 'react-bem-helper';
|
|
12
|
-
import { ContentTypeShape } from '../shapes';
|
|
13
|
-
|
|
14
|
-
import * as contentTypes from '../model/ContentType';
|
|
15
|
-
|
|
16
|
-
const classes = new BEMHelper({
|
|
17
|
-
name: 'hero',
|
|
18
|
-
prefix: 'c-',
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
export const Hero = ({ children, contentType }) => <div {...classes('', contentType)}>{children || null}</div>;
|
|
22
|
-
|
|
23
|
-
Hero.propTypes = {
|
|
24
|
-
contentType: ContentTypeShape,
|
|
25
|
-
children: PropTypes.node,
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export const SubjectMaterialHero = (props) => <Hero contentType={contentTypes.SUBJECT_MATERIAL} {...props} />;
|
|
29
|
-
export const TasksAndActivitiesHero = (props) => <Hero contentType={contentTypes.TASKS_AND_ACTIVITIES} {...props} />;
|
|
30
|
-
export const AssessmentResourcesHero = (props) => <Hero contentType={contentTypes.ASSESSMENT_RESOURCES} {...props} />;
|
|
31
|
-
export const SubjectHero = (props) => <Hero contentType={contentTypes.SUBJECT} {...props} />;
|
|
32
|
-
export const ExternalLearningResourcesHero = (props) => (
|
|
33
|
-
<Hero contentType={contentTypes.EXTERNAL_LEARNING_RESOURCES} {...props} />
|
|
34
|
-
);
|
|
35
|
-
export const SourceMaterialHero = (props) => <Hero contentType={contentTypes.SOURCE_MATERIAL} {...props} />;
|
|
36
|
-
export const NdlaFilmHero = ({ hasImage, ...rest }) => (
|
|
37
|
-
<Hero {...rest} contentType={hasImage ? 'ndla-film has-image' : 'ndla-film'} />
|
|
38
|
-
);
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2017-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 PropTypes from 'prop-types';
|
|
11
|
-
|
|
12
|
-
// Lazyload image with lazysizes (https://github.com/aFarkas/lazysizes)
|
|
13
|
-
const LazyLoadImage = ({ alt, src, srcSet, lazyLoadSrc, sizes, ...rest }) => [
|
|
14
|
-
<noscript key="noscript">
|
|
15
|
-
<img alt={alt} src={`${src}`} srcSet={srcSet} sizes={sizes} {...rest} />
|
|
16
|
-
</noscript>,
|
|
17
|
-
<img
|
|
18
|
-
alt={alt}
|
|
19
|
-
key="img"
|
|
20
|
-
style={{ width: '100%' }}
|
|
21
|
-
className="lazyload"
|
|
22
|
-
src={lazyLoadSrc}
|
|
23
|
-
data-src={src}
|
|
24
|
-
data-src-set={srcSet}
|
|
25
|
-
data-sizes={sizes}
|
|
26
|
-
{...rest}
|
|
27
|
-
/>,
|
|
28
|
-
];
|
|
29
|
-
|
|
30
|
-
LazyLoadImage.propTypes = {
|
|
31
|
-
alt: PropTypes.string.isRequired,
|
|
32
|
-
src: PropTypes.string.isRequired,
|
|
33
|
-
sizes: PropTypes.string,
|
|
34
|
-
contentType: PropTypes.string,
|
|
35
|
-
srcSet: PropTypes.string,
|
|
36
|
-
lazyLoadSrc: PropTypes.string.isRequired,
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export default LazyLoadImage;
|
package/src/Image/shapes.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2019-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 PropTypes from 'prop-types';
|
|
10
|
-
|
|
11
|
-
export const CropShape = PropTypes.shape({
|
|
12
|
-
startX: PropTypes.number.isRequired,
|
|
13
|
-
startY: PropTypes.number.isRequired,
|
|
14
|
-
endX: PropTypes.number.isRequired,
|
|
15
|
-
endY: PropTypes.number.isRequired,
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
export const FocalPointShape = PropTypes.shape({
|
|
19
|
-
x: PropTypes.number.isRequired,
|
|
20
|
-
y: PropTypes.number.isRequired,
|
|
21
|
-
});
|
package/src/InfoBox/InfoBox.jsx
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import BEMHelper from 'react-bem-helper';
|
|
4
|
-
|
|
5
|
-
const classes = BEMHelper('c-info-box');
|
|
6
|
-
|
|
7
|
-
const InfoBox = ({ children }) => <div {...classes()}>{children}</div>;
|
|
8
|
-
|
|
9
|
-
InfoBox.propTypes = {
|
|
10
|
-
children: PropTypes.node.isRequired,
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default InfoBox;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ArticleTabs } from '@ndla/tabs';
|
|
3
|
-
|
|
4
|
-
const TranslationBox = (props) => (
|
|
5
|
-
<div className="c-translation-box">
|
|
6
|
-
<div className="c-bodybox c-bodybox--translation">
|
|
7
|
-
<ArticleTabs {...props} />
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
10
|
-
);
|
|
11
|
-
|
|
12
|
-
export default TranslationBox;
|