@dhis2-ui/box 9.11.0 → 9.11.1-beta.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 (12) hide show
  1. package/build/cjs/box.e2e.stories.js +19 -0
  2. package/build/cjs/box.js +4 -10
  3. package/build/cjs/{box.stories.js → box.prod.stories.js} +26 -30
  4. package/build/cjs/features/accepts_children/index.js +0 -1
  5. package/build/cjs/features/accepts_multiple_props/index.js +0 -1
  6. package/build/cjs/index.js +0 -1
  7. package/build/es/box.e2e.stories.js +10 -0
  8. package/build/es/box.js +3 -3
  9. package/build/es/{box.stories.js → box.prod.stories.js} +17 -8
  10. package/package.json +5 -5
  11. package/build/cjs/box.stories.e2e.js +0 -14
  12. package/build/es/box.stories.e2e.js +0 -7
package/build/cjs/box.e2e.stories.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.WithChildren = exports.Multiple = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _box = require("./box.js");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ var _default = exports.default = {
11
+ title: 'Box'
12
+ };
13
+ const WithChildren = () => /*#__PURE__*/_react.default.createElement(_box.Box, null, "I am a child");
14
+ exports.WithChildren = WithChildren;
15
+ const Multiple = () => /*#__PURE__*/_react.default.createElement(_box.Box, {
16
+ marginTop: "16px",
17
+ maxWidth: "400px"
18
+ }, "I am a child in a Box.");
19
+ exports.Multiple = Multiple;
package/build/cjs/box.js CHANGED
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Box = void 0;
7
-
8
7
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _react = _interopRequireDefault(require("react"));
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
10
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
16
11
  const Box = _ref => {
17
12
  let {
18
13
  overflow,
@@ -29,13 +24,12 @@ const Box = _ref => {
29
24
  } = _ref;
30
25
  return /*#__PURE__*/_react.default.createElement("div", {
31
26
  "data-test": dataTest,
32
- className: _style.default.dynamic([["3369228338", [marginTop ? "margin-top: ".concat(marginTop, ";") : '', height ? "height: ".concat(height, ";") : '', minHeight ? "min-height: ".concat(minHeight, ";") : '', maxHeight ? "max-height: ".concat(maxHeight, ";") : '', width ? "width: ".concat(width, ";") : '', minWidth ? "min-width: ".concat(minWidth, ";") : '', maxWidth ? "max-width: ".concat(maxWidth, ";") : '', overflow ? "overflow: ".concat(overflow, ";") : '']]]) + " " + (className || "")
27
+ className: _style.default.dynamic([["3369228338", [marginTop ? `margin-top: ${marginTop};` : '', height ? `height: ${height};` : '', minHeight ? `min-height: ${minHeight};` : '', maxHeight ? `max-height: ${maxHeight};` : '', width ? `width: ${width};` : '', minWidth ? `min-width: ${minWidth};` : '', maxWidth ? `max-width: ${maxWidth};` : '', overflow ? `overflow: ${overflow};` : '']]]) + " " + (className || "")
33
28
  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
34
29
  id: "3369228338",
35
- dynamic: [marginTop ? "margin-top: ".concat(marginTop, ";") : '', height ? "height: ".concat(height, ";") : '', minHeight ? "min-height: ".concat(minHeight, ";") : '', maxHeight ? "max-height: ".concat(maxHeight, ";") : '', width ? "width: ".concat(width, ";") : '', minWidth ? "min-width: ".concat(minWidth, ";") : '', maxWidth ? "max-width: ".concat(maxWidth, ";") : '', overflow ? "overflow: ".concat(overflow, ";") : '']
36
- }, ["div.__jsx-style-dynamic-selector{".concat(marginTop ? "margin-top: ".concat(marginTop, ";") : '', " ").concat(height ? "height: ".concat(height, ";") : '', " ").concat(minHeight ? "min-height: ".concat(minHeight, ";") : '', " ").concat(maxHeight ? "max-height: ".concat(maxHeight, ";") : '', " ").concat(width ? "width: ".concat(width, ";") : '', " ").concat(minWidth ? "min-width: ".concat(minWidth, ";") : '', " ").concat(maxWidth ? "max-width: ".concat(maxWidth, ";") : '', " ").concat(overflow ? "overflow: ".concat(overflow, ";") : '', ";}")]));
30
+ dynamic: [marginTop ? `margin-top: ${marginTop};` : '', height ? `height: ${height};` : '', minHeight ? `min-height: ${minHeight};` : '', maxHeight ? `max-height: ${maxHeight};` : '', width ? `width: ${width};` : '', minWidth ? `min-width: ${minWidth};` : '', maxWidth ? `max-width: ${maxWidth};` : '', overflow ? `overflow: ${overflow};` : '']
31
+ }, [`div.__jsx-style-dynamic-selector{${marginTop ? `margin-top: ${marginTop};` : ''} ${height ? `height: ${height};` : ''} ${minHeight ? `min-height: ${minHeight};` : ''} ${maxHeight ? `max-height: ${maxHeight};` : ''} ${width ? `width: ${width};` : ''} ${minWidth ? `min-width: ${minWidth};` : ''} ${maxWidth ? `max-width: ${maxWidth};` : ''} ${overflow ? `overflow: ${overflow};` : ''};}`]));
37
32
  };
38
-
39
33
  exports.Box = Box;
40
34
  Box.defaultProps = {
41
35
  dataTest: 'dhis2-uicore-box'
package/build/cjs/{box.stories.js → box.prod.stories.js} RENAMED
@@ -4,15 +4,17 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = exports.Width = exports.Overflow = exports.MinWidth = exports.MinHeight = exports.MaxWidth = exports.MaxHeight = exports.Height = exports.Default = void 0;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _box = require("./box.js");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ const description = `
11
+ A box for creating some layout on the page.
11
12
 
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
- const description = "\nA box for creating some layout on the page.\n\n```js\nimport { Box } from '@dhis2/ui'\n```\n";
15
- var _default = {
13
+ \`\`\`js
14
+ import { Box } from '@dhis2/ui'
15
+ \`\`\`
16
+ `;
17
+ var _default = exports.default = {
16
18
  title: 'Box',
17
19
  component: _box.Box,
18
20
  parameters: {
@@ -23,22 +25,17 @@ var _default = {
23
25
  }
24
26
  }
25
27
  };
26
- exports.default = _default;
27
-
28
28
  const Template = args => /*#__PURE__*/_react.default.createElement(_box.Box, args);
29
-
30
- const Default = Template.bind({});
31
- exports.Default = Default;
29
+ const Default = exports.Default = Template.bind({});
32
30
  Default.args = {
33
31
  children: 'I am a child in a Box.'
34
32
  };
35
- const Height = Template.bind({});
36
- exports.Height = Height;
37
- Height.args = { ...Default.args,
33
+ const Height = exports.Height = Template.bind({});
34
+ Height.args = {
35
+ ...Default.args,
38
36
  height: '250px'
39
37
  };
40
- const MaxHeight = Template.bind({});
41
- exports.MaxHeight = MaxHeight;
38
+ const MaxHeight = exports.MaxHeight = Template.bind({});
42
39
  MaxHeight.args = {
43
40
  children: /*#__PURE__*/_react.default.createElement("p", {
44
41
  style: {
@@ -47,28 +44,27 @@ MaxHeight.args = {
47
44
  }, "I am a tall child in a low Box."),
48
45
  maxHeight: '250px'
49
46
  };
50
- const MinHeight = Template.bind({});
51
- exports.MinHeight = MinHeight;
52
- MinHeight.args = { ...Default.args,
47
+ const MinHeight = exports.MinHeight = Template.bind({});
48
+ MinHeight.args = {
49
+ ...Default.args,
53
50
  minHeight: '50vh'
54
51
  };
55
- const Width = Template.bind({});
56
- exports.Width = Width;
57
- Width.args = { ...Default.args,
52
+ const Width = exports.Width = Template.bind({});
53
+ Width.args = {
54
+ ...Default.args,
58
55
  width: '250px'
59
56
  };
60
- const MinWidth = Template.bind({});
61
- exports.MinWidth = MinWidth;
62
- MinWidth.args = { ...Default.args,
57
+ const MinWidth = exports.MinWidth = Template.bind({});
58
+ MinWidth.args = {
59
+ ...Default.args,
63
60
  minWidth: '50vh'
64
61
  };
65
- const MaxWidth = Template.bind({});
66
- exports.MaxWidth = MaxWidth;
67
- MaxWidth.args = { ...Default.args,
62
+ const MaxWidth = exports.MaxWidth = Template.bind({});
63
+ MaxWidth.args = {
64
+ ...Default.args,
68
65
  maxWidth: '50vh'
69
66
  };
70
- const Overflow = Template.bind({});
71
- exports.Overflow = Overflow;
67
+ const Overflow = exports.Overflow = Template.bind({});
72
68
  Overflow.args = {
73
69
  maxHeight: '250px',
74
70
  overflow: 'scroll',
package/build/cjs/features/accepts_children/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
4
-
5
4
  (0, _cypressCucumberPreprocessor.Given)('a Box with children is rendered', () => {
6
5
  cy.visitStory('Box', 'With children');
7
6
  cy.get('[data-test="dhis2-uicore-box"]').should('be.visible');
package/build/cjs/features/accepts_multiple_props/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
4
-
5
4
  (0, _cypressCucumberPreprocessor.Given)('a Box with multiple props is rendered', () => {
6
5
  cy.visitStory('Box', 'Multiple');
7
6
  cy.get('[data-test="dhis2-uicore-box"]').should('be.visible');
package/build/cjs/index.js CHANGED
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Box", {
9
9
  return _box.Box;
10
10
  }
11
11
  });
12
-
13
12
  var _box = require("./box.js");
package/build/es/box.e2e.stories.js ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { Box } from './box.js';
3
+ export default {
4
+ title: 'Box'
5
+ };
6
+ export const WithChildren = () => /*#__PURE__*/React.createElement(Box, null, "I am a child");
7
+ export const Multiple = () => /*#__PURE__*/React.createElement(Box, {
8
+ marginTop: "16px",
9
+ maxWidth: "400px"
10
+ }, "I am a child in a Box.");
package/build/es/box.js CHANGED
@@ -17,11 +17,11 @@ export const Box = _ref => {
17
17
  } = _ref;
18
18
  return /*#__PURE__*/React.createElement("div", {
19
19
  "data-test": dataTest,
20
- className: _JSXStyle.dynamic([["3369228338", [marginTop ? "margin-top: ".concat(marginTop, ";") : '', height ? "height: ".concat(height, ";") : '', minHeight ? "min-height: ".concat(minHeight, ";") : '', maxHeight ? "max-height: ".concat(maxHeight, ";") : '', width ? "width: ".concat(width, ";") : '', minWidth ? "min-width: ".concat(minWidth, ";") : '', maxWidth ? "max-width: ".concat(maxWidth, ";") : '', overflow ? "overflow: ".concat(overflow, ";") : '']]]) + " " + (className || "")
20
+ className: _JSXStyle.dynamic([["3369228338", [marginTop ? `margin-top: ${marginTop};` : '', height ? `height: ${height};` : '', minHeight ? `min-height: ${minHeight};` : '', maxHeight ? `max-height: ${maxHeight};` : '', width ? `width: ${width};` : '', minWidth ? `min-width: ${minWidth};` : '', maxWidth ? `max-width: ${maxWidth};` : '', overflow ? `overflow: ${overflow};` : '']]]) + " " + (className || "")
21
21
  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
22
22
  id: "3369228338",
23
- dynamic: [marginTop ? "margin-top: ".concat(marginTop, ";") : '', height ? "height: ".concat(height, ";") : '', minHeight ? "min-height: ".concat(minHeight, ";") : '', maxHeight ? "max-height: ".concat(maxHeight, ";") : '', width ? "width: ".concat(width, ";") : '', minWidth ? "min-width: ".concat(minWidth, ";") : '', maxWidth ? "max-width: ".concat(maxWidth, ";") : '', overflow ? "overflow: ".concat(overflow, ";") : '']
24
- }, ["div.__jsx-style-dynamic-selector{".concat(marginTop ? "margin-top: ".concat(marginTop, ";") : '', " ").concat(height ? "height: ".concat(height, ";") : '', " ").concat(minHeight ? "min-height: ".concat(minHeight, ";") : '', " ").concat(maxHeight ? "max-height: ".concat(maxHeight, ";") : '', " ").concat(width ? "width: ".concat(width, ";") : '', " ").concat(minWidth ? "min-width: ".concat(minWidth, ";") : '', " ").concat(maxWidth ? "max-width: ".concat(maxWidth, ";") : '', " ").concat(overflow ? "overflow: ".concat(overflow, ";") : '', ";}")]));
23
+ dynamic: [marginTop ? `margin-top: ${marginTop};` : '', height ? `height: ${height};` : '', minHeight ? `min-height: ${minHeight};` : '', maxHeight ? `max-height: ${maxHeight};` : '', width ? `width: ${width};` : '', minWidth ? `min-width: ${minWidth};` : '', maxWidth ? `max-width: ${maxWidth};` : '', overflow ? `overflow: ${overflow};` : '']
24
+ }, [`div.__jsx-style-dynamic-selector{${marginTop ? `margin-top: ${marginTop};` : ''} ${height ? `height: ${height};` : ''} ${minHeight ? `min-height: ${minHeight};` : ''} ${maxHeight ? `max-height: ${maxHeight};` : ''} ${width ? `width: ${width};` : ''} ${minWidth ? `min-width: ${minWidth};` : ''} ${maxWidth ? `max-width: ${maxWidth};` : ''} ${overflow ? `overflow: ${overflow};` : ''};}`]));
25
25
  };
26
26
  Box.defaultProps = {
27
27
  dataTest: 'dhis2-uicore-box'
package/build/es/{box.stories.js → box.prod.stories.js} RENAMED
@@ -1,6 +1,12 @@
1
1
  import React from 'react';
2
2
  import { Box } from './box.js';
3
- const description = "\nA box for creating some layout on the page.\n\n```js\nimport { Box } from '@dhis2/ui'\n```\n";
3
+ const description = `
4
+ A box for creating some layout on the page.
5
+
6
+ \`\`\`js
7
+ import { Box } from '@dhis2/ui'
8
+ \`\`\`
9
+ `;
4
10
  export default {
5
11
  title: 'Box',
6
12
  component: Box,
@@ -12,15 +18,14 @@ export default {
12
18
  }
13
19
  }
14
20
  };
15
-
16
21
  const Template = args => /*#__PURE__*/React.createElement(Box, args);
17
-
18
22
  export const Default = Template.bind({});
19
23
  Default.args = {
20
24
  children: 'I am a child in a Box.'
21
25
  };
22
26
  export const Height = Template.bind({});
23
- Height.args = { ...Default.args,
27
+ Height.args = {
28
+ ...Default.args,
24
29
  height: '250px'
25
30
  };
26
31
  export const MaxHeight = Template.bind({});
@@ -33,19 +38,23 @@ MaxHeight.args = {
33
38
  maxHeight: '250px'
34
39
  };
35
40
  export const MinHeight = Template.bind({});
36
- MinHeight.args = { ...Default.args,
41
+ MinHeight.args = {
42
+ ...Default.args,
37
43
  minHeight: '50vh'
38
44
  };
39
45
  export const Width = Template.bind({});
40
- Width.args = { ...Default.args,
46
+ Width.args = {
47
+ ...Default.args,
41
48
  width: '250px'
42
49
  };
43
50
  export const MinWidth = Template.bind({});
44
- MinWidth.args = { ...Default.args,
51
+ MinWidth.args = {
52
+ ...Default.args,
45
53
  minWidth: '50vh'
46
54
  };
47
55
  export const MaxWidth = Template.bind({});
48
- MaxWidth.args = { ...Default.args,
56
+ MaxWidth.args = {
57
+ ...Default.args,
49
58
  maxWidth: '50vh'
50
59
  };
51
60
  export const Overflow = Template.bind({});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/box",
3
- "version": "9.11.0",
3
+ "version": "9.11.1-beta.1",
4
4
  "description": "UI Box",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,18 +22,18 @@
22
22
  "access": "public"
23
23
  },
24
24
  "scripts": {
25
- "start": "start-storybook -c ../../storybook/config --port 5000",
25
+ "start": "storybook dev -c ../../storybook/config --port 5000",
26
26
  "build": "d2-app-scripts build",
27
27
  "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
28
28
  },
29
29
  "peerDependencies": {
30
- "react": "^16.8",
31
- "react-dom": "^16.8",
30
+ "react": "^16.13",
31
+ "react-dom": "^16.13",
32
32
  "styled-jsx": "^4"
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.1.2",
36
- "@dhis2/ui-constants": "9.11.0",
36
+ "@dhis2/ui-constants": "9.11.1-beta.1",
37
37
  "classnames": "^2.3.1",
38
38
  "prop-types": "^15.7.2"
39
39
  },
package/build/cjs/box.stories.e2e.js DELETED
@@ -1,14 +0,0 @@
1
- "use strict";
2
-
3
- var _react = require("@storybook/react");
4
-
5
- var _react2 = _interopRequireDefault(require("react"));
6
-
7
- var _box = require("./box.js");
8
-
9
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
-
11
- (0, _react.storiesOf)('Box', module).add('With children', () => /*#__PURE__*/_react2.default.createElement(_box.Box, null, "I am a child")).add('Multiple', () => /*#__PURE__*/_react2.default.createElement(_box.Box, {
12
- marginTop: "16px",
13
- maxWidth: "400px"
14
- }, "I am a child in a Box."));
package/build/es/box.stories.e2e.js DELETED
@@ -1,7 +0,0 @@
1
- import { storiesOf } from '@storybook/react';
2
- import React from 'react';
3
- import { Box } from './box.js';
4
- storiesOf('Box', module).add('With children', () => /*#__PURE__*/React.createElement(Box, null, "I am a child")).add('Multiple', () => /*#__PURE__*/React.createElement(Box, {
5
- marginTop: "16px",
6
- maxWidth: "400px"
7
- }, "I am a child in a Box."));