@ndla/article-converter 2.0.11 → 2.2.0

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 (4) hide show
  1. package/es/plugins/divPlugin.js +11 -1
  2. package/lib/plugins/divPlugin.js +10 -0
  3. package/package.json +5 -5
  4. package/src/plugins/divPlugin.tsx +12 -1
package/es/plugins/divPlugin.js CHANGED
@@ -20,7 +20,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
20
20
 
21
21
  import partition from 'lodash/partition';
22
22
  import { domToReact, attributesToProps } from 'html-react-parser';
23
- import { FileListV2, RelatedArticleListV2 } from '@ndla/ui';
23
+ import { FileListV2, RelatedArticleListV2, Grid } from '@ndla/ui';
24
24
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
25
25
  import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
26
26
  import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
@@ -57,6 +57,16 @@ export var divPlugin = function divPlugin(node, opts) {
57
57
  className: "".concat(_props.className, " c-bodybox--contains-table"),
58
58
  children: domToReact(node.children, opts)
59
59
  }));
60
+ } else if (node.attribs['data-type'] === 'grid' && node.children.length > 0) {
61
+ var _props2 = attributesToProps(node.attribs);
62
+ var columns = Number.parseInt(_props2['data-columns']);
63
+ var border = _props2['data-border'];
64
+ return _jsx(Grid, _objectSpread(_objectSpread({
65
+ border: border,
66
+ columns: columns
67
+ }, _props2), {}, {
68
+ children: domToReact(node.children, opts)
69
+ }));
60
70
  }
61
71
  return null;
62
72
  };
package/lib/plugins/divPlugin.js CHANGED
@@ -60,6 +60,16 @@ var divPlugin = function divPlugin(node, opts) {
60
60
  className: "".concat(_props.className, " c-bodybox--contains-table"),
61
61
  children: (0, _htmlReactParser.domToReact)(node.children, opts)
62
62
  }));
63
+ } else if (node.attribs['data-type'] === 'grid' && node.children.length > 0) {
64
+ var _props2 = (0, _htmlReactParser.attributesToProps)(node.attribs);
65
+ var columns = Number.parseInt(_props2['data-columns']);
66
+ var border = _props2['data-border'];
67
+ return (0, _jsxRuntime.jsx)(_ui.Grid, _objectSpread(_objectSpread({
68
+ border: border,
69
+ columns: columns
70
+ }, _props2), {}, {
71
+ children: (0, _htmlReactParser.domToReact)(node.children, opts)
72
+ }));
63
73
  }
64
74
  return null;
65
75
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/article-converter",
3
- "version": "2.0.11",
3
+ "version": "2.2.0",
4
4
  "description": "Transforms NDLA articles into extended html versions",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -30,19 +30,19 @@
30
30
  "@ndla/types-embed": "^2.0.2"
31
31
  },
32
32
  "dependencies": {
33
- "@ndla/code": "^2.2.4",
34
- "@ndla/ui": "^37.1.4",
33
+ "@ndla/code": "^2.2.6",
34
+ "@ndla/ui": "^39.0.0",
35
35
  "html-react-parser": "^3.0.8",
36
36
  "lodash": "^4.17.20"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@emotion/react": "^11.10.4",
40
40
  "@emotion/styled": "^11.10.4",
41
- "react": "^16.9.0 || ^17.0.0",
41
+ "react": ">= 16.8.0",
42
42
  "react-i18next": "^11.18.6"
43
43
  },
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "77675e3df78c7dd48d9790cdd1adfceab56e355e"
47
+ "gitHead": "72e986568cbd38a53cb3d9e2e189d4e309fbb302"
48
48
  }
package/src/plugins/divPlugin.tsx CHANGED
@@ -8,8 +8,9 @@
8
8
 
9
9
  import partition from 'lodash/partition';
10
10
  import { domToReact, attributesToProps, Element } from 'html-react-parser';
11
- import { FileListV2, RelatedArticleListV2 } from '@ndla/ui';
11
+ import { FileListV2, RelatedArticleListV2, Grid, GridType } from '@ndla/ui';
12
12
  import { PluginType } from './types';
13
+
13
14
  export const divPlugin: PluginType = (node, opts) => {
14
15
  if (node.attribs['data-type'] === 'related-content' && node.children.length) {
15
16
  const props = attributesToProps(node.attribs);
@@ -45,6 +46,16 @@ export const divPlugin: PluginType = (node, opts) => {
45
46
  {domToReact(node.children, opts)}
46
47
  </div>
47
48
  );
49
+ } else if (node.attribs['data-type'] === 'grid' && node.children.length > 0) {
50
+ const props = attributesToProps(node.attribs);
51
+ const columns = Number.parseInt(props['data-columns']) as GridType['columns'];
52
+ const border = props['data-border'] as GridType['border'];
53
+ return (
54
+ <Grid border={border} columns={columns} {...props}>
55
+ {/* @ts-ignore */}
56
+ {domToReact(node.children, opts)}
57
+ </Grid>
58
+ );
48
59
  }
49
60
  return null;
50
61
  };