@dhis2-ui/card 9.10.3 → 9.11.1-beta.1

package/build/cjs/card.e2e.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _card = require("./card.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Card'
+};
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement("span", null, "I am a child"), /*#__PURE__*/_react.default.createElement("span", null, "I am a child"), /*#__PURE__*/_react.default.createElement("span", null, "I am a child"));
+exports.WithChildren = WithChildren;

package/build/cjs/card.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Card = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Card = _ref => {
   let {
     className,
@@ -29,9 +22,8 @@ const Card = _ref => {
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3454125090",
     dynamic: [_uiConstants.colors.white, _uiConstants.elevations.e100]
-  }, ["div.__jsx-style-dynamic-selector{display:inline-block;position:relative;width:100%;height:100%;border-radius:3px;background:".concat(_uiConstants.colors.white, ";box-shadow:").concat(_uiConstants.elevations.e100, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:inline-block;position:relative;width:100%;height:100%;border-radius:3px;background:${_uiConstants.colors.white};box-shadow:${_uiConstants.elevations.e100};}`]));
 };
-
 exports.Card = Card;
 Card.defaultProps = {
   dataTest: 'dhis2-uicore-card'

package/build/cjs/card.prod.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _box = require("@dhis2-ui/box");
+var _react = _interopRequireDefault(require("react"));
+var _card = require("./card.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const subtitle = `
+A card is a container element for grouping together
+and separating blocks of content.
+`;
+const description = `
+Use a card where there is content that can be grouped together.
+Cards are most often useful when this grouped content may be repeated,
+for example with items on a dashboard, or different sections of patient
+information displayed in a profile.
+
+Note that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.
+
+\`\`\`js
+import { Card } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
+  title: 'Card',
+  component: _card.Card,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+const Default = args => /*#__PURE__*/_react.default.createElement(_box.Box, {
+  width: "358px",
+  height: "358px"
+}, /*#__PURE__*/_react.default.createElement(_card.Card, args));
+exports.Default = Default;

package/build/cjs/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Card with children is rendered', () => {
   cy.visitStory('Card', 'With children');
   cy.get('[data-test="dhis2-uicore-card"]').should('be.visible');

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Card", {
     return _card.Card;
   }
 });
-
 var _card = require("./card.js");

package/build/es/card.e2e.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Card } from './card.js';
+export default {
+  title: 'Card'
+};
+export const WithChildren = () => /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("span", null, "I am a child"), /*#__PURE__*/React.createElement("span", null, "I am a child"), /*#__PURE__*/React.createElement("span", null, "I am a child"));

package/build/es/card.js

@@ -3,7 +3,6 @@ import { colors, elevations } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const Card = _ref => {
   let {
     className,
@@ -16,9 +15,8 @@ const Card = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3454125090",
     dynamic: [colors.white, elevations.e100]
-  }, ["div.__jsx-style-dynamic-selector{display:inline-block;position:relative;width:100%;height:100%;border-radius:3px;background:".concat(colors.white, ";box-shadow:").concat(elevations.e100, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{display:inline-block;position:relative;width:100%;height:100%;border-radius:3px;background:${colors.white};box-shadow:${elevations.e100};}`]));
 };
-
 Card.defaultProps = {
   dataTest: 'dhis2-uicore-card'
 };

package/build/es/card.prod.stories.js

@@ -0,0 +1,35 @@
+import { Box } from '@dhis2-ui/box';
+import React from 'react';
+import { Card } from './card.js';
+const subtitle = `
+A card is a container element for grouping together
+and separating blocks of content.
+`;
+const description = `
+Use a card where there is content that can be grouped together.
+Cards are most often useful when this grouped content may be repeated,
+for example with items on a dashboard, or different sections of patient
+information displayed in a profile.
+
+Note that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.
+
+\`\`\`js
+import { Card } from '@dhis2/ui'
+\`\`\`
+`;
+export default {
+  title: 'Card',
+  component: Card,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+export const Default = args => /*#__PURE__*/React.createElement(Box, {
+  width: "358px",
+  height: "358px"
+}, /*#__PURE__*/React.createElement(Card, args));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/card",
-    "version": "9.10.3",
+    "version": "9.11.1-beta.1",
     "description": "UI Card",
     "repository": {
         "type": "git",
@@ -22,18 +22,18 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.10.3",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/card.stories.e2e.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _card = require("./card.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('Card', module).add('With children', () => /*#__PURE__*/_react2.default.createElement(_card.Card, null, /*#__PURE__*/_react2.default.createElement("span", null, "I am a child"), /*#__PURE__*/_react2.default.createElement("span", null, "I am a child"), /*#__PURE__*/_react2.default.createElement("span", null, "I am a child")));

package/build/cjs/card.stories.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-
-var _box = require("@dhis2-ui/box");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _card = require("./card.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const subtitle = "\nA card is a container element for grouping together\nand separating blocks of content.\n";
-const description = "\nUse a card where there is content that can be grouped together.\nCards are most often useful when this grouped content may be repeated,\nfor example with items on a dashboard, or different sections of patient\ninformation displayed in a profile.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { Card } from '@dhis2/ui'\n```\n";
-var _default = {
-  title: 'Card',
-  component: _card.Card,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  }
-};
-exports.default = _default;
-
-const Default = args => /*#__PURE__*/_react.default.createElement(_box.Box, {
-  width: "358px",
-  height: "358px"
-}, /*#__PURE__*/_react.default.createElement(_card.Card, args));
-
-exports.Default = Default;

package/build/es/card.stories.e2e.js

@@ -1,4 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { Card } from './card.js';
-storiesOf('Card', module).add('With children', () => /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("span", null, "I am a child"), /*#__PURE__*/React.createElement("span", null, "I am a child"), /*#__PURE__*/React.createElement("span", null, "I am a child")));

package/build/es/card.stories.js

@@ -1,21 +0,0 @@
-import { Box } from '@dhis2-ui/box';
-import React from 'react';
-import { Card } from './card.js';
-const subtitle = "\nA card is a container element for grouping together\nand separating blocks of content.\n";
-const description = "\nUse a card where there is content that can be grouped together.\nCards are most often useful when this grouped content may be repeated,\nfor example with items on a dashboard, or different sections of patient\ninformation displayed in a profile.\n\nNote that it requires a parent, like [Box](../?path=/docs/layout-box--default), to define its size.\n\n```js\nimport { Card } from '@dhis2/ui'\n```\n";
-export default {
-  title: 'Card',
-  component: Card,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  }
-};
-export const Default = args => /*#__PURE__*/React.createElement(Box, {
-  width: "358px",
-  height: "358px"
-}, /*#__PURE__*/React.createElement(Card, args));