@dhis2-ui/segmented-control 9.10.3 → 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 (6) hide show
  1. package/build/cjs/index.js +0 -1
  2. package/build/cjs/segmented-control.js +5 -17
  3. package/build/cjs/{segmented-control.stories.js → segmented-control.prod.stories.js} +6 -17
  4. package/build/es/segmented-control.js +4 -8
  5. package/build/es/{segmented-control.stories.js → segmented-control.prod.stories.js} +1 -5
  6. package/package.json +5 -5
package/build/cjs/index.js CHANGED
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SegmentedControl", {
9
9
  return _segmentedControl.SegmentedControl;
10
10
  }
11
11
  });
12
-
13
12
  var _segmentedControl = require("./segmented-control.js");
package/build/cjs/segmented-control.js CHANGED
@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.SegmentedControl = void 0;
7
-
8
7
  var _style = _interopRequireDefault(require("styled-jsx/style"));
9
-
10
8
  var _uiConstants = require("@dhis2/ui-constants");
11
-
12
9
  var _classnames = _interopRequireDefault(require("classnames"));
13
-
14
10
  var _propTypes = require("prop-types");
15
-
16
11
  var _react = _interopRequireDefault(require("react"));
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
20
13
  /**
21
14
  A segmented control is used to select between options that relate to another
22
15
  area of content. All of the options in a segmented control should be closely related.
@@ -31,6 +24,7 @@ See specification: [Design System](https://github.com/dhis2/design-system/blob/m
31
24
  import { SegmentedControl } from '@dhis2/ui'
32
25
  ```
33
26
  */
27
+
34
28
  const SegmentedControl = _ref => {
35
29
  let {
36
30
  options,
@@ -38,17 +32,15 @@ const SegmentedControl = _ref => {
38
32
  onChange,
39
33
  ariaLabel
40
34
  } = _ref;
41
-
42
35
  if (!options.map(_ref2 => {
43
36
  let {
44
37
  value
45
38
  } = _ref2;
46
39
  return value;
47
40
  }).includes(selected)) {
48
- const message = "There is no option with the value: \"".concat(selected, "\". ") + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
41
+ const message = `There is no option with the value: "${selected}". ` + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
49
42
  throw new Error(message);
50
43
  }
51
-
52
44
  return /*#__PURE__*/_react.default.createElement("ul", {
53
45
  "aria-label": ariaLabel,
54
46
  className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]]) + " " + "segmented-control"
@@ -59,7 +51,7 @@ const SegmentedControl = _ref => {
59
51
  disabled
60
52
  } = _ref3;
61
53
  return /*#__PURE__*/_react.default.createElement("li", {
62
- key: "option-".concat(value),
54
+ key: `option-${value}`,
63
55
  className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]])
64
56
  }, /*#__PURE__*/_react.default.createElement("button", {
65
57
  type: "button",
@@ -75,9 +67,8 @@ const SegmentedControl = _ref => {
75
67
  }), /*#__PURE__*/_react.default.createElement(_style.default, {
76
68
  id: "3664972916",
77
69
  dynamic: [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]
78
- }, [".segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:".concat(_uiConstants.colors.grey300, ";border-radius:5px;padding:2px;}"), ".segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:".concat(_uiConstants.colors.grey700, ";min-width:72px;max-width:320px;height:100%;padding:6px ").concat(_uiConstants.spacers.dp12, ";}"), ".segment.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", ".segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:".concat(_uiConstants.colors.grey400, ";color:").concat(_uiConstants.colors.grey900, ";}"), ".segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:".concat(_uiConstants.elevations.e100, ";background:").concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";}"), ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
70
+ }, [`.segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:${_uiConstants.colors.grey300};border-radius:5px;padding:2px;}`, `.segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:${_uiConstants.colors.grey700};min-width:72px;max-width:320px;height:100%;padding:6px ${_uiConstants.spacers.dp12};}`, `.segment.__jsx-style-dynamic-selector:focus{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`, ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `.segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:${_uiConstants.colors.grey400};color:${_uiConstants.colors.grey900};}`, `.segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:${_uiConstants.elevations.e100};background:${_uiConstants.colors.white};color:${_uiConstants.colors.grey900};}`, ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
79
71
  };
80
-
81
72
  exports.SegmentedControl = SegmentedControl;
82
73
  SegmentedControl.propTypes = {
83
74
  /** Options to populate the segmented control */
@@ -86,13 +77,10 @@ SegmentedControl.propTypes = {
86
77
  value: _propTypes.PropTypes.string.isRequired,
87
78
  disabled: _propTypes.PropTypes.bool
88
79
  })).isRequired,
89
-
90
80
  /** An option to select; should match the `value` property of the option to be selected */
91
81
  selected: _propTypes.PropTypes.string.isRequired,
92
-
93
82
  /** Called with the signature `({ value: string }, event)` */
94
83
  onChange: _propTypes.PropTypes.func.isRequired,
95
-
96
84
  /** Used to provide an accessible label to a segmented control without a visible label */
97
85
  ariaLabel: _propTypes.PropTypes.string
98
86
  };
package/build/cjs/{segmented-control.stories.js → segmented-control.prod.stories.js} RENAMED
@@ -4,21 +4,16 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = exports.LongLabels = exports.DisabledOption = exports.Default = void 0;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _segmentedControl = require("./segmented-control.js");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
10
  const logger = _ref => {
15
11
  let {
16
12
  value
17
13
  } = _ref;
18
- return console.log("Selected value: ".concat(value));
14
+ return console.log(`Selected value: ${value}`);
19
15
  };
20
-
21
- var _default = {
16
+ var _default = exports.default = {
22
17
  title: 'Segmented Control',
23
18
  component: _segmentedControl.SegmentedControl,
24
19
  parameters: {
@@ -40,14 +35,9 @@ var _default = {
40
35
  ariaLabel: 'Segmented control label'
41
36
  }
42
37
  };
43
- exports.default = _default;
44
-
45
38
  const Template = args => /*#__PURE__*/_react.default.createElement(_segmentedControl.SegmentedControl, args);
46
-
47
- const Default = Template.bind({});
48
- exports.Default = Default;
49
- const DisabledOption = Template.bind({});
50
- exports.DisabledOption = DisabledOption;
39
+ const Default = exports.Default = Template.bind({});
40
+ const DisabledOption = exports.DisabledOption = Template.bind({});
51
41
  DisabledOption.args = {
52
42
  options: [{
53
43
  label: 'One',
@@ -62,8 +52,7 @@ DisabledOption.args = {
62
52
  }],
63
53
  selected: 'THREE'
64
54
  };
65
- const LongLabels = Template.bind({});
66
- exports.LongLabels = LongLabels;
55
+ const LongLabels = exports.LongLabels = Template.bind({});
67
56
  LongLabels.args = {
68
57
  options: [{
69
58
  label: 'Program configuration, security, and distribution',
package/build/es/segmented-control.js CHANGED
@@ -3,6 +3,7 @@ import { colors, elevations, spacers, theme } from '@dhis2/ui-constants';
3
3
  import cx from 'classnames';
4
4
  import { PropTypes } from 'prop-types';
5
5
  import React from 'react';
6
+
6
7
  /**
7
8
  A segmented control is used to select between options that relate to another
8
9
  area of content. All of the options in a segmented control should be closely related.
@@ -25,17 +26,15 @@ export const SegmentedControl = _ref => {
25
26
  onChange,
26
27
  ariaLabel
27
28
  } = _ref;
28
-
29
29
  if (!options.map(_ref2 => {
30
30
  let {
31
31
  value
32
32
  } = _ref2;
33
33
  return value;
34
34
  }).includes(selected)) {
35
- const message = "There is no option with the value: \"".concat(selected, "\". ") + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
35
+ const message = `There is no option with the value: "${selected}". ` + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
36
36
  throw new Error(message);
37
37
  }
38
-
39
38
  return /*#__PURE__*/React.createElement("ul", {
40
39
  "aria-label": ariaLabel,
41
40
  className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]]) + " " + "segmented-control"
@@ -46,7 +45,7 @@ export const SegmentedControl = _ref => {
46
45
  disabled
47
46
  } = _ref3;
48
47
  return /*#__PURE__*/React.createElement("li", {
49
- key: "option-".concat(value),
48
+ key: `option-${value}`,
50
49
  className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]])
51
50
  }, /*#__PURE__*/React.createElement("button", {
52
51
  type: "button",
@@ -62,7 +61,7 @@ export const SegmentedControl = _ref => {
62
61
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
63
62
  id: "3664972916",
64
63
  dynamic: [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]
65
- }, [".segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:".concat(colors.grey300, ";border-radius:5px;padding:2px;}"), ".segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:".concat(colors.grey700, ";min-width:72px;max-width:320px;height:100%;padding:6px ").concat(spacers.dp12, ";}"), ".segment.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", ".segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:".concat(colors.grey400, ";color:").concat(colors.grey900, ";}"), ".segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:".concat(elevations.e100, ";background:").concat(colors.white, ";color:").concat(colors.grey900, ";}"), ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
64
+ }, [`.segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:${colors.grey300};border-radius:5px;padding:2px;}`, `.segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:${colors.grey700};min-width:72px;max-width:320px;height:100%;padding:6px ${spacers.dp12};}`, `.segment.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};outline-offset:-3px;}`, ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `.segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:${colors.grey400};color:${colors.grey900};}`, `.segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:${elevations.e100};background:${colors.white};color:${colors.grey900};}`, ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
66
65
  };
67
66
  SegmentedControl.propTypes = {
68
67
  /** Options to populate the segmented control */
@@ -71,13 +70,10 @@ SegmentedControl.propTypes = {
71
70
  value: PropTypes.string.isRequired,
72
71
  disabled: PropTypes.bool
73
72
  })).isRequired,
74
-
75
73
  /** An option to select; should match the `value` property of the option to be selected */
76
74
  selected: PropTypes.string.isRequired,
77
-
78
75
  /** Called with the signature `({ value: string }, event)` */
79
76
  onChange: PropTypes.func.isRequired,
80
-
81
77
  /** Used to provide an accessible label to a segmented control without a visible label */
82
78
  ariaLabel: PropTypes.string
83
79
  };
package/build/es/{segmented-control.stories.js → segmented-control.prod.stories.js} RENAMED
@@ -1,13 +1,11 @@
1
1
  import React from 'react';
2
2
  import { SegmentedControl } from './segmented-control.js';
3
-
4
3
  const logger = _ref => {
5
4
  let {
6
5
  value
7
6
  } = _ref;
8
- return console.log("Selected value: ".concat(value));
7
+ return console.log(`Selected value: ${value}`);
9
8
  };
10
-
11
9
  export default {
12
10
  title: 'Segmented Control',
13
11
  component: SegmentedControl,
@@ -30,9 +28,7 @@ export default {
30
28
  ariaLabel: 'Segmented control label'
31
29
  }
32
30
  };
33
-
34
31
  const Template = args => /*#__PURE__*/React.createElement(SegmentedControl, args);
35
-
36
32
  export const Default = Template.bind({});
37
33
  export const DisabledOption = Template.bind({});
38
34
  DisabledOption.args = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/segmented-control",
3
- "version": "9.10.3",
3
+ "version": "9.11.1-beta.1",
4
4
  "description": "UI Segmented Control",
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.10.3",
36
+ "@dhis2/ui-constants": "9.11.1-beta.1",
37
37
  "classnames": "^2.3.1",
38
38
  "prop-types": "^15.7.2"
39
39
  },