@ndla/ui 3.3.9 → 3.3.14

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 (184) hide show
  1. package/es/Article/Article.js +23 -1
  2. package/es/Article/ArticleNotions.js +80 -32
  3. package/es/Breadcrumblist/Breadcrumblist.js +14 -10
  4. package/es/CloseButton/CloseButton.js +62 -0
  5. package/es/CloseButton/index.js +9 -0
  6. package/es/Figure/Figure.js +3 -1
  7. package/es/Frontpage/FrontpageAllSubjects.js +7 -7
  8. package/es/Frontpage/FrontpageProgramMenu.js +10 -10
  9. package/es/Frontpage/FrontpageSearch.js +2 -4
  10. package/es/MediaList/MediaList.js +22 -73
  11. package/es/MessageBox/MessageBox.js +146 -78
  12. package/es/MessageBox/MessageBoxTag.js +37 -0
  13. package/es/MessageBox/index.js +3 -1
  14. package/es/NDLAFilm/AboutNdlaFilm.js +6 -17
  15. package/es/NDLAFilm/AllMoviesAlphabetically.js +11 -11
  16. package/es/NDLAFilm/CategorySelect.js +17 -18
  17. package/es/NDLAFilm/FilmContentCard.js +8 -22
  18. package/es/NDLAFilm/FilmContentCardTags.js +4 -8
  19. package/es/NDLAFilm/FilmMovieList.js +6 -21
  20. package/es/NDLAFilm/FilmMovieSearch.js +18 -26
  21. package/es/NDLAFilm/FilmSlideshow.js +2 -1
  22. package/es/NDLAFilm/MovieGrid.js +10 -19
  23. package/es/NDLAFilm/VisualElement.js +22 -29
  24. package/es/Programme/Programme.js +15 -8
  25. package/es/Search/SearchResultSleeve.js +12 -15
  26. package/es/SearchTypeResult/SearchFieldHeader.js +5 -5
  27. package/es/SearchTypeResult/SearchHeader.js +9 -9
  28. package/es/SearchTypeResult/SearchItem.js +19 -19
  29. package/es/SearchTypeResult/SearchNotionItem.js +12 -12
  30. package/es/SearchTypeResult/SearchNotionsResult.js +9 -14
  31. package/es/TopicIntroductionList/TopicIntroduction.js +14 -33
  32. package/es/TopicIntroductionList/TopicIntroductionList.js +6 -23
  33. package/es/TopicIntroductionList/TopicIntroductionShortcuts.js +71 -110
  34. package/es/TopicIntroductionList/TopicShortcutItem.js +0 -9
  35. package/es/all.css +1 -4
  36. package/es/index-javascript.js +1 -5
  37. package/es/index.js +6 -1
  38. package/es/locale/messages-en.js +10 -0
  39. package/es/locale/messages-nb.js +10 -0
  40. package/es/locale/messages-nn.js +10 -0
  41. package/es/shapes.js +0 -6
  42. package/lib/Article/Article.d.ts +3 -1
  43. package/lib/Article/Article.js +25 -3
  44. package/lib/Article/ArticleNotions.js +79 -30
  45. package/lib/Breadcrumblist/Breadcrumblist.d.ts +2 -1
  46. package/lib/Breadcrumblist/Breadcrumblist.js +15 -10
  47. package/lib/CloseButton/CloseButton.d.ts +6 -0
  48. package/lib/CloseButton/CloseButton.js +69 -0
  49. package/lib/CloseButton/index.d.ts +9 -0
  50. package/lib/CloseButton/index.js +15 -0
  51. package/lib/Figure/Figure.js +3 -1
  52. package/lib/Frontpage/FrontpageAllSubjects.d.ts +1 -1
  53. package/lib/Frontpage/FrontpageAllSubjects.js +7 -7
  54. package/lib/Frontpage/FrontpageProgramMenu.js +10 -10
  55. package/lib/Frontpage/FrontpageSearch.d.ts +3 -5
  56. package/lib/Frontpage/FrontpageSearch.js +2 -4
  57. package/lib/MediaList/MediaList.d.ts +48 -0
  58. package/lib/MediaList/MediaList.js +24 -78
  59. package/lib/MediaList/index.d.ts +8 -0
  60. package/lib/MessageBox/MessageBox.d.ts +22 -6
  61. package/lib/MessageBox/MessageBox.js +146 -77
  62. package/lib/MessageBox/MessageBoxTag.d.ts +12 -0
  63. package/lib/MessageBox/MessageBoxTag.js +44 -0
  64. package/lib/MessageBox/index.d.ts +3 -1
  65. package/lib/MessageBox/index.js +22 -2
  66. package/lib/NDLAFilm/AboutNdlaFilm.d.ts +15 -0
  67. package/lib/NDLAFilm/AboutNdlaFilm.js +6 -18
  68. package/lib/NDLAFilm/AllMoviesAlphabetically.d.ts +2 -2
  69. package/lib/NDLAFilm/AllMoviesAlphabetically.js +11 -11
  70. package/lib/NDLAFilm/CategorySelect.d.ts +11 -0
  71. package/lib/NDLAFilm/CategorySelect.js +20 -19
  72. package/lib/NDLAFilm/FilmContentCard.d.ts +11 -0
  73. package/lib/NDLAFilm/FilmContentCard.js +8 -23
  74. package/lib/NDLAFilm/FilmContentCardTags.d.ts +7 -0
  75. package/lib/NDLAFilm/FilmContentCardTags.js +4 -9
  76. package/lib/NDLAFilm/FilmMovieList.d.ts +19 -0
  77. package/lib/NDLAFilm/FilmMovieList.js +5 -21
  78. package/lib/NDLAFilm/FilmMovieSearch.d.ts +21 -0
  79. package/lib/NDLAFilm/FilmMovieSearch.js +25 -30
  80. package/lib/NDLAFilm/FilmSlideshow.d.ts +5 -5
  81. package/lib/NDLAFilm/MovieGrid.d.ts +13 -0
  82. package/lib/NDLAFilm/MovieGrid.js +9 -21
  83. package/lib/NDLAFilm/SlideshowIndicator.d.ts +2 -2
  84. package/lib/NDLAFilm/VisualElement.d.ts +16 -0
  85. package/lib/NDLAFilm/VisualElement.js +22 -30
  86. package/lib/NDLAFilm/index.d.ts +14 -0
  87. package/lib/NDLAFilm/types.d.ts +6 -4
  88. package/lib/Programme/Programme.d.ts +2 -1
  89. package/lib/Programme/Programme.js +18 -9
  90. package/lib/Search/SearchResultSleeve.d.ts +4 -6
  91. package/lib/Search/SearchResultSleeve.js +10 -11
  92. package/lib/SearchTypeResult/SearchFieldHeader.d.ts +3 -3
  93. package/lib/SearchTypeResult/SearchFieldHeader.js +5 -5
  94. package/lib/SearchTypeResult/SearchHeader.d.ts +3 -3
  95. package/lib/SearchTypeResult/SearchHeader.js +9 -9
  96. package/lib/SearchTypeResult/SearchItem.d.ts +2 -3
  97. package/lib/SearchTypeResult/SearchItem.js +19 -19
  98. package/lib/SearchTypeResult/SearchNotionItem.d.ts +1 -1
  99. package/lib/SearchTypeResult/SearchNotionItem.js +12 -12
  100. package/lib/SearchTypeResult/SearchNotionsResult.js +8 -13
  101. package/lib/SearchTypeResult/index.d.ts +1 -0
  102. package/lib/TopicIntroductionList/TopicIntroduction.d.ts +21 -0
  103. package/lib/TopicIntroductionList/TopicIntroduction.js +16 -36
  104. package/lib/TopicIntroductionList/TopicIntroductionList.d.ts +35 -0
  105. package/lib/TopicIntroductionList/TopicIntroductionList.js +6 -25
  106. package/lib/TopicIntroductionList/TopicIntroductionShortcuts.d.ts +8 -0
  107. package/lib/TopicIntroductionList/TopicIntroductionShortcuts.js +72 -110
  108. package/lib/TopicIntroductionList/TopicShortcutItem.d.ts +6 -0
  109. package/lib/TopicIntroductionList/TopicShortcutItem.js +0 -11
  110. package/lib/TopicIntroductionList/index.d.ts +9 -0
  111. package/lib/all.css +1 -4
  112. package/lib/index-javascript.js +3 -137
  113. package/lib/index.d.ts +6 -1
  114. package/lib/index.js +178 -0
  115. package/lib/locale/messages-en.d.ts +10 -0
  116. package/lib/locale/messages-en.js +10 -0
  117. package/lib/locale/messages-nb.d.ts +10 -0
  118. package/lib/locale/messages-nb.js +10 -0
  119. package/lib/locale/messages-nn.d.ts +10 -0
  120. package/lib/locale/messages-nn.js +10 -0
  121. package/lib/shapes.js +1 -10
  122. package/lib/types.d.ts +2 -2
  123. package/package.json +12 -12
  124. package/src/Article/Article.tsx +17 -0
  125. package/src/Article/ArticleNotions.tsx +10 -7
  126. package/src/Breadcrumblist/Breadcrumblist.tsx +5 -3
  127. package/src/CloseButton/CloseButton.tsx +40 -0
  128. package/src/CloseButton/index.ts +11 -0
  129. package/src/Figure/Figure.tsx +2 -1
  130. package/src/Figure/component.figure.scss +37 -3
  131. package/src/Frontpage/FrontpageAllSubjects.tsx +2 -2
  132. package/src/Frontpage/FrontpageProgramMenu.tsx +1 -0
  133. package/src/Frontpage/FrontpageSearch.tsx +3 -7
  134. package/src/MediaList/MediaList.tsx +158 -0
  135. package/src/MediaList/{index.js → index.ts} +0 -0
  136. package/src/MessageBox/MessageBox.tsx +117 -96
  137. package/src/MessageBox/MessageBoxTag.tsx +35 -0
  138. package/src/MessageBox/index.ts +3 -1
  139. package/src/NDLAFilm/{AboutNdlaFilm.jsx → AboutNdlaFilm.tsx} +19 -18
  140. package/src/NDLAFilm/AllMoviesAlphabetically.tsx +3 -3
  141. package/src/NDLAFilm/{CategorySelect.jsx → CategorySelect.tsx} +23 -20
  142. package/src/NDLAFilm/{FilmContentCard.jsx → FilmContentCard.tsx} +21 -21
  143. package/src/NDLAFilm/{FilmContentCardTags.jsx → FilmContentCardTags.tsx} +7 -7
  144. package/src/NDLAFilm/{FilmMovieList.jsx → FilmMovieList.tsx} +17 -27
  145. package/src/NDLAFilm/FilmMovieSearch.tsx +71 -0
  146. package/src/NDLAFilm/FilmSlideshow.tsx +7 -6
  147. package/src/NDLAFilm/MovieGrid.tsx +76 -0
  148. package/src/NDLAFilm/SlideshowIndicator.tsx +2 -2
  149. package/src/NDLAFilm/VisualElement.tsx +40 -0
  150. package/src/NDLAFilm/{index.js → index.ts} +0 -0
  151. package/src/NDLAFilm/types.ts +7 -4
  152. package/src/Programme/Programme.tsx +7 -3
  153. package/src/Search/SearchResultSleeve.tsx +7 -19
  154. package/src/SearchTypeResult/SearchFieldHeader.tsx +3 -3
  155. package/src/SearchTypeResult/SearchHeader.tsx +3 -3
  156. package/src/SearchTypeResult/SearchItem.tsx +4 -5
  157. package/src/SearchTypeResult/SearchNotionItem.tsx +1 -2
  158. package/src/SearchTypeResult/SearchNotionsResult.tsx +3 -8
  159. package/src/SearchTypeResult/index.ts +2 -0
  160. package/src/TopicIntroductionList/{TopicIntroduction.jsx → TopicIntroduction.tsx} +22 -35
  161. package/src/TopicIntroductionList/{TopicIntroductionList.jsx → TopicIntroductionList.tsx} +32 -26
  162. package/src/TopicIntroductionList/TopicIntroductionShortcuts.tsx +71 -0
  163. package/src/TopicIntroductionList/{TopicShortcutItem.jsx → TopicShortcutItem.tsx} +5 -13
  164. package/src/TopicIntroductionList/{index.js → index.ts} +0 -0
  165. package/src/index-javascript.js +0 -30
  166. package/src/index.ts +33 -1
  167. package/src/locale/messages-en.ts +14 -0
  168. package/src/locale/messages-nb.ts +14 -0
  169. package/src/locale/messages-nn.ts +14 -0
  170. package/src/shapes.js +0 -7
  171. package/src/types.ts +2 -2
  172. package/es/NDLAFilm/interfaces.js +0 -0
  173. package/es/NDLAFilm/shapes.js +0 -15
  174. package/lib/NDLAFilm/interfaces.d.ts +0 -10
  175. package/lib/NDLAFilm/interfaces.js +0 -1
  176. package/lib/NDLAFilm/shapes.d.ts +0 -15
  177. package/lib/NDLAFilm/shapes.js +0 -30
  178. package/src/MediaList/MediaList.jsx +0 -182
  179. package/src/NDLAFilm/FilmMovieSearch.jsx +0 -66
  180. package/src/NDLAFilm/MovieGrid.jsx +0 -75
  181. package/src/NDLAFilm/VisualElement.jsx +0 -48
  182. package/src/NDLAFilm/interfaces.ts +0 -10
  183. package/src/NDLAFilm/shapes.ts +0 -17
  184. package/src/TopicIntroductionList/TopicIntroductionShortcuts.jsx +0 -92
@@ -1,66 +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 { OneColumn } from '@ndla/ui';
13
- import SafeLink from '@ndla/safelink';
14
- import { withTranslation } from 'react-i18next';
15
- import CategorySelect from './CategorySelect';
16
-
17
- import { topicShape } from './shapes';
18
-
19
- const classes = new BEMHelper({
20
- name: 'film-moviesearch',
21
- prefix: 'c-',
22
- });
23
-
24
- const classesMovieList = new BEMHelper({
25
- name: 'film-movielist',
26
- prefix: 'c-',
27
- });
28
-
29
- const FilmMovieSearch = ({ topics, t, ...props }) => (
30
- <div {...classes('')}>
31
- <OneColumn>
32
- <div {...classes('topic-navigation')}>
33
- <h2 {...classesMovieList('heading', '', 'u-12/12 u-4/12@tablet')}>{t('ndlaFilm.subjectsInMovies')}:</h2>
34
- <nav className="u-12/12 u-8/12@tablet">
35
- <ul>
36
- {topics.map((topic) => (
37
- <li key={topic.id}>
38
- <SafeLink to={topic.path} key={topic.id}>
39
- <span>{topic.name}</span>
40
- </SafeLink>
41
- </li>
42
- ))}
43
- </ul>
44
- </nav>
45
- </div>
46
- <CategorySelect {...props} />
47
- </OneColumn>
48
- </div>
49
- );
50
-
51
- FilmMovieSearch.propTypes = {
52
- topics: PropTypes.arrayOf(topicShape),
53
- onChangeResourceType: PropTypes.func.isRequired,
54
- resourceTypeSelected: PropTypes.shape({
55
- name: PropTypes.string,
56
- id: PropTypes.string,
57
- }),
58
- ariaControlId: PropTypes.string.isRequired,
59
- t: PropTypes.func.isRequired,
60
- };
61
-
62
- FilmMovieSearch.defaultProps = {
63
- topics: [],
64
- };
65
-
66
- export default withTranslation()(FilmMovieSearch);
@@ -1,75 +0,0 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import BEMHelper from 'react-bem-helper';
4
- import { css } from '@emotion/core';
5
- import { withTranslation } from 'react-i18next';
6
- import FilmContentCard from './FilmContentCard';
7
-
8
- const movieListClasses = new BEMHelper({
9
- name: 'film-movielist',
10
- prefix: 'c-',
11
- });
12
-
13
- const MovieGrid = ({
14
- resourceTypeName,
15
- fetchingMoviesByType,
16
- moviesByType,
17
- resourceTypes,
18
- loadingPlaceholderHeight,
19
- autoSizedProps,
20
- resizeThumbnailImages,
21
- t,
22
- }) => (
23
- <section>
24
- <h1
25
- {...movieListClasses('heading')}
26
- css={css`
27
- margin-left: ${autoSizedProps.margin}px;
28
- `}>
29
- {resourceTypeName && resourceTypeName.name}
30
- <small>
31
- {fetchingMoviesByType
32
- ? t('ndlaFilm.loadingMovies')
33
- : `${moviesByType.length} ${t('ndlaFilm.movieMatchInCategory')}`}
34
- </small>
35
- </h1>
36
- <div
37
- {...movieListClasses('movie-listing')}
38
- css={css`
39
- margin-left: ${autoSizedProps.margin}px;
40
- `}>
41
- {fetchingMoviesByType && (
42
- <div
43
- css={css`
44
- height: ${loadingPlaceholderHeight};
45
- `}
46
- />
47
- )}
48
- {!fetchingMoviesByType &&
49
- moviesByType.map((movie) => (
50
- <FilmContentCard
51
- hideTags
52
- movie={movie}
53
- columnWidth={autoSizedProps.columnWidth}
54
- distanceBetweenItems={autoSizedProps.distanceBetweenItems}
55
- resourceTypes={resourceTypes}
56
- resizeThumbnailImages={resizeThumbnailImages}
57
- />
58
- ))}
59
- </div>
60
- </section>
61
- );
62
-
63
- MovieGrid.propTypes = {
64
- autoSizedProps: PropTypes.shape({}),
65
- resourceTypeName: PropTypes.shape({
66
- name: PropTypes.string,
67
- }),
68
- fetchingMoviesByType: PropTypes.bool,
69
- moviesByType: PropTypes.array,
70
- classes: PropTypes.func,
71
- resourceTypes: PropTypes.array,
72
- loadingPlaceholderHeight: PropTypes.string,
73
- };
74
-
75
- export default withTranslation()(MovieGrid);
@@ -1,48 +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 React from 'react';
10
- import PropTypes from 'prop-types';
11
- import { Image } from '@ndla/ui';
12
- import styled from '@emotion/styled';
13
-
14
- const StylediFrame = styled.iframe`
15
- height: 100%;
16
- width: 100%;
17
- border: 0;
18
- margin: 0;
19
- padding: 0;
20
- `;
21
-
22
- const VisualElement = ({ visualElement }) => {
23
- switch (visualElement.type) {
24
- case 'image':
25
- return <Image src={visualElement.url} alt={visualElement.alt} />;
26
- case 'brightcove':
27
- return (
28
- <StylediFrame
29
- allowfullscreen="true"
30
- webkitallowfullscreen="true"
31
- mozallowfullscreen="true"
32
- src={visualElement.url}
33
- />
34
- );
35
- default:
36
- return null;
37
- }
38
- };
39
-
40
- VisualElement.propTypes = {
41
- visualElement: PropTypes.shape({
42
- url: PropTypes.string,
43
- alt: PropTypes.string,
44
- type: PropTypes.string,
45
- }).isRequired,
46
- };
47
-
48
- export default VisualElement;
@@ -1,10 +0,0 @@
1
- export interface NDLAMovie {
2
- id: string;
3
- metaDescription: string;
4
- title: string;
5
- metaImage: {
6
- url: string;
7
- alt: string;
8
- };
9
- path: string;
10
- }
@@ -1,17 +0,0 @@
1
- import PropTypes from 'prop-types';
2
-
3
- export const movieShape = PropTypes.shape({
4
- id: PropTypes.string.isRequired,
5
- metaDescription: PropTypes.string.isRequired,
6
- title: PropTypes.string.isRequired,
7
- metaImage: PropTypes.shape({
8
- url: PropTypes.string.isRequired,
9
- alt: PropTypes.string.isRequired,
10
- }),
11
- path: PropTypes.string.isRequired,
12
- });
13
-
14
- export const topicShape = PropTypes.shape({
15
- id: PropTypes.string,
16
- name: PropTypes.string,
17
- });
@@ -1,92 +0,0 @@
1
- import React, { Component } from 'react';
2
- import PropTypes from 'prop-types';
3
- import BEMHelper from 'react-bem-helper';
4
- import { Forward } from '@ndla/icons/common';
5
-
6
- import ShortcutItem from './TopicShortcutItem';
7
-
8
- import { ShortcutShape } from '../shapes';
9
-
10
- const classes = new BEMHelper({
11
- name: 'topic-shortcuts',
12
- prefix: 'c-',
13
- });
14
-
15
- class TopicIntroductionShortcuts extends Component {
16
- constructor(props) {
17
- super(props);
18
- this.state = {
19
- open: props.alwaysExpanded,
20
- returned: false,
21
- showButtonText: true,
22
- };
23
- this.handleOnToggle = this.handleOnToggle.bind(this);
24
- }
25
-
26
- handleOnToggle(open) {
27
- this.setState({
28
- open,
29
- showButtonText: !open,
30
- returned: !open,
31
- });
32
- }
33
-
34
- render() {
35
- const { shortcuts, messages, id, alwaysExpanded } = this.props;
36
- const { open, returned, showButtonText } = this.state;
37
-
38
- let onMouseEnter = null;
39
- let onMouseLeave = null;
40
-
41
- let buttonView = null;
42
-
43
- if (!alwaysExpanded) {
44
- onMouseEnter = () => this.handleOnToggle(true);
45
- onMouseLeave = () => this.handleOnToggle(false);
46
-
47
- buttonView = (
48
- <button
49
- type="button"
50
- aria-expanded={this.state.open}
51
- aria-label={messages.toggleButtonText}
52
- aria-controls={id}
53
- {...classes('button', returned ? 're-enter' : '')}
54
- onClick={() => {
55
- this.handleOnToggle(!open);
56
- }}>
57
- <Forward />
58
- {showButtonText && <span {...classes('label')}>{messages.toggleButtonText}</span>}
59
- </button>
60
- );
61
- }
62
- return (
63
- <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...classes()}>
64
- {buttonView}
65
- {open && (
66
- <ul className={classes('list', open ? 'visible' : '').className}>
67
- {shortcuts.map((shortcut) => (
68
- <li {...classes('item')} key={shortcut.id}>
69
- <ShortcutItem shortcut={shortcut} />
70
- </li>
71
- ))}
72
- </ul>
73
- )}
74
- </div>
75
- );
76
- }
77
- }
78
-
79
- TopicIntroductionShortcuts.propTypes = {
80
- id: PropTypes.string.isRequired,
81
- alwaysExpanded: PropTypes.bool,
82
- messages: PropTypes.shape({
83
- toggleButtonText: PropTypes.string.isRequired,
84
- }),
85
- shortcuts: PropTypes.arrayOf(ShortcutShape).isRequired,
86
- };
87
-
88
- TopicIntroductionShortcuts.defaultProps = {
89
- alwaysExpanded: false,
90
- };
91
-
92
- export default TopicIntroductionShortcuts;