@dhis2-ui/segmented-control 8.1.11 → 8.2.2

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 (5) hide show
  1. package/build/cjs/segmented-control.js +33 -25
  2. package/build/cjs/segmented-control.stories.js +8 -5
  3. package/build/es/segmented-control.js +33 -25
  4. package/build/es/segmented-control.stories.js +7 -4
  5. package/package.json +2 -2
package/build/cjs/segmented-control.js CHANGED
@@ -31,39 +31,47 @@ See specification: [Design System](https://github.com/dhis2/design-system/blob/m
31
31
  import { SegmentedControl } from '@dhis2/ui'
32
32
  ```
33
33
  */
34
- const SegmentedControl = ({
35
- options,
36
- selected,
37
- onChange
38
- }) => {
39
- if (!options.map(({
40
- value
41
- }) => value).includes(selected)) {
42
- 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.';
34
+ const SegmentedControl = _ref => {
35
+ let {
36
+ options,
37
+ selected,
38
+ onChange
39
+ } = _ref;
40
+
41
+ if (!options.map(_ref2 => {
42
+ let {
43
+ value
44
+ } = _ref2;
45
+ return value;
46
+ }).includes(selected)) {
47
+ 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.';
43
48
  throw new Error(message);
44
49
  }
45
50
 
46
51
  return /*#__PURE__*/_react.default.createElement("div", {
47
52
  className: _style.default.dynamic([["1782675663", [_uiConstants.colors.grey400, _uiConstants.colors.grey050, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.theme.focus, _uiConstants.colors.grey100, _uiConstants.colors.grey700, _uiConstants.colors.teal800, _uiConstants.colors.teal600, _uiConstants.colors.teal700]]]) + " " + "segmented-control"
48
- }, options.map(({
49
- label,
50
- value,
51
- disabled
52
- }) => /*#__PURE__*/_react.default.createElement("button", {
53
- key: label,
54
- type: "button",
55
- onClick: e => onChange({
56
- value
57
- }, e),
58
- disabled: disabled,
59
- className: _style.default.dynamic([["1782675663", [_uiConstants.colors.grey400, _uiConstants.colors.grey050, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.theme.focus, _uiConstants.colors.grey100, _uiConstants.colors.grey700, _uiConstants.colors.teal800, _uiConstants.colors.teal600, _uiConstants.colors.teal700]]]) + " " + ((0, _classnames.default)('segment', {
60
- selected: value === selected,
53
+ }, options.map(_ref3 => {
54
+ let {
55
+ label,
56
+ value,
61
57
  disabled
62
- }) || "")
63
- }, label)), /*#__PURE__*/_react.default.createElement(_style.default, {
58
+ } = _ref3;
59
+ return /*#__PURE__*/_react.default.createElement("button", {
60
+ key: label,
61
+ type: "button",
62
+ onClick: e => onChange({
63
+ value
64
+ }, e),
65
+ disabled: disabled,
66
+ className: _style.default.dynamic([["1782675663", [_uiConstants.colors.grey400, _uiConstants.colors.grey050, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.theme.focus, _uiConstants.colors.grey100, _uiConstants.colors.grey700, _uiConstants.colors.teal800, _uiConstants.colors.teal600, _uiConstants.colors.teal700]]]) + " " + ((0, _classnames.default)('segment', {
67
+ selected: value === selected,
68
+ disabled
69
+ }) || "")
70
+ }, label);
71
+ }), /*#__PURE__*/_react.default.createElement(_style.default, {
64
72
  id: "1782675663",
65
73
  dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey050, _uiConstants.colors.grey600, _uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.theme.focus, _uiConstants.colors.grey100, _uiConstants.colors.grey700, _uiConstants.colors.teal800, _uiConstants.colors.teal600, _uiConstants.colors.teal700]
66
- }, [".segmented-control.__jsx-style-dynamic-selector{position:relative;z-index:0;}", `.segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;display:inline-block;position:relative;cursor:pointer;font-size:14px;text-align:center;border:1px solid ${_uiConstants.colors.grey400};border-right-width:0;background:${_uiConstants.colors.grey050};color:${_uiConstants.colors.grey600};min-width:72px;max-width:320px;padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp16};}`, `.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):hover,.segment.__jsx-style-dynamic-selector:not(.selected):focus{background:${_uiConstants.colors.grey100};color:${_uiConstants.colors.grey700};}`, ".segment.__jsx-style-dynamic-selector:first-of-type{border-radius:3px 0 0 3px;}", ".segment.__jsx-style-dynamic-selector:last-of-type{border-right-width:1px;border-radius:0 3px 3px 0;}", `.segment.selected.__jsx-style-dynamic-selector{cursor:default;font-weight:600;border:1px solid ${_uiConstants.colors.teal800};background:${_uiConstants.colors.teal600};color:white;}`, ".segment.selected.__jsx-style-dynamic-selector:not(:last-of-type){z-index:1;margin-right:-1px;}", `.segment.selected.__jsx-style-dynamic-selector:focus{background:${_uiConstants.colors.teal700};}`, ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
74
+ }, [".segmented-control.__jsx-style-dynamic-selector{position:relative;z-index:0;}", ".segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;display:inline-block;position:relative;cursor:pointer;font-size:14px;text-align:center;border:1px solid ".concat(_uiConstants.colors.grey400, ";border-right-width:0;background:").concat(_uiConstants.colors.grey050, ";color:").concat(_uiConstants.colors.grey600, ";min-width:72px;max-width:320px;padding:").concat(_uiConstants.spacers.dp8, " ").concat(_uiConstants.spacers.dp16, ";}"), ".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):hover,.segment.__jsx-style-dynamic-selector:not(.selected):focus{background:".concat(_uiConstants.colors.grey100, ";color:").concat(_uiConstants.colors.grey700, ";}"), ".segment.__jsx-style-dynamic-selector:first-of-type{border-radius:3px 0 0 3px;}", ".segment.__jsx-style-dynamic-selector:last-of-type{border-right-width:1px;border-radius:0 3px 3px 0;}", ".segment.selected.__jsx-style-dynamic-selector{cursor:default;font-weight:600;border:1px solid ".concat(_uiConstants.colors.teal800, ";background:").concat(_uiConstants.colors.teal600, ";color:white;}"), ".segment.selected.__jsx-style-dynamic-selector:not(:last-of-type){z-index:1;margin-right:-1px;}", ".segment.selected.__jsx-style-dynamic-selector:focus{background:".concat(_uiConstants.colors.teal700, ";}"), ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
67
75
  };
68
76
 
69
77
  exports.SegmentedControl = SegmentedControl;
package/build/cjs/segmented-control.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.DisabledOption = exports.Default = exports.default = void 0;
6
+ exports.default = exports.DisabledOption = exports.Default = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -11,12 +11,15 @@ var _segmentedControl = require("./segmented-control.js");
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
- const logger = ({
15
- value
16
- }) => console.log(`Selected value: ${value}`);
14
+ const logger = _ref => {
15
+ let {
16
+ value
17
+ } = _ref;
18
+ return console.log("Selected value: ".concat(value));
19
+ };
17
20
 
18
21
  var _default = {
19
- title: 'Actions/Segmented Control',
22
+ title: 'Segmented Control',
20
23
  component: _segmentedControl.SegmentedControl,
21
24
  parameters: {
22
25
  componentSubtitle: 'Allows selection between related options'
package/build/es/segmented-control.js CHANGED
@@ -18,39 +18,47 @@ import { SegmentedControl } from '@dhis2/ui'
18
18
  ```
19
19
  */
20
20
 
21
- export const SegmentedControl = ({
22
- options,
23
- selected,
24
- onChange
25
- }) => {
26
- if (!options.map(({
27
- value
28
- }) => value).includes(selected)) {
29
- 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.';
21
+ export const SegmentedControl = _ref => {
22
+ let {
23
+ options,
24
+ selected,
25
+ onChange
26
+ } = _ref;
27
+
28
+ if (!options.map(_ref2 => {
29
+ let {
30
+ value
31
+ } = _ref2;
32
+ return value;
33
+ }).includes(selected)) {
34
+ 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.';
30
35
  throw new Error(message);
31
36
  }
32
37
 
33
38
  return /*#__PURE__*/React.createElement("div", {
34
39
  className: _JSXStyle.dynamic([["1782675663", [colors.grey400, colors.grey050, colors.grey600, spacers.dp8, spacers.dp16, theme.focus, colors.grey100, colors.grey700, colors.teal800, colors.teal600, colors.teal700]]]) + " " + "segmented-control"
35
- }, options.map(({
36
- label,
37
- value,
38
- disabled
39
- }) => /*#__PURE__*/React.createElement("button", {
40
- key: label,
41
- type: "button",
42
- onClick: e => onChange({
43
- value
44
- }, e),
45
- disabled: disabled,
46
- className: _JSXStyle.dynamic([["1782675663", [colors.grey400, colors.grey050, colors.grey600, spacers.dp8, spacers.dp16, theme.focus, colors.grey100, colors.grey700, colors.teal800, colors.teal600, colors.teal700]]]) + " " + (cx('segment', {
47
- selected: value === selected,
40
+ }, options.map(_ref3 => {
41
+ let {
42
+ label,
43
+ value,
48
44
  disabled
49
- }) || "")
50
- }, label)), /*#__PURE__*/React.createElement(_JSXStyle, {
45
+ } = _ref3;
46
+ return /*#__PURE__*/React.createElement("button", {
47
+ key: label,
48
+ type: "button",
49
+ onClick: e => onChange({
50
+ value
51
+ }, e),
52
+ disabled: disabled,
53
+ className: _JSXStyle.dynamic([["1782675663", [colors.grey400, colors.grey050, colors.grey600, spacers.dp8, spacers.dp16, theme.focus, colors.grey100, colors.grey700, colors.teal800, colors.teal600, colors.teal700]]]) + " " + (cx('segment', {
54
+ selected: value === selected,
55
+ disabled
56
+ }) || "")
57
+ }, label);
58
+ }), /*#__PURE__*/React.createElement(_JSXStyle, {
51
59
  id: "1782675663",
52
60
  dynamic: [colors.grey400, colors.grey050, colors.grey600, spacers.dp8, spacers.dp16, theme.focus, colors.grey100, colors.grey700, colors.teal800, colors.teal600, colors.teal700]
53
- }, [".segmented-control.__jsx-style-dynamic-selector{position:relative;z-index:0;}", `.segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;display:inline-block;position:relative;cursor:pointer;font-size:14px;text-align:center;border:1px solid ${colors.grey400};border-right-width:0;background:${colors.grey050};color:${colors.grey600};min-width:72px;max-width:320px;padding:${spacers.dp8} ${spacers.dp16};}`, `.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):hover,.segment.__jsx-style-dynamic-selector:not(.selected):focus{background:${colors.grey100};color:${colors.grey700};}`, ".segment.__jsx-style-dynamic-selector:first-of-type{border-radius:3px 0 0 3px;}", ".segment.__jsx-style-dynamic-selector:last-of-type{border-right-width:1px;border-radius:0 3px 3px 0;}", `.segment.selected.__jsx-style-dynamic-selector{cursor:default;font-weight:600;border:1px solid ${colors.teal800};background:${colors.teal600};color:white;}`, ".segment.selected.__jsx-style-dynamic-selector:not(:last-of-type){z-index:1;margin-right:-1px;}", `.segment.selected.__jsx-style-dynamic-selector:focus{background:${colors.teal700};}`, ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
61
+ }, [".segmented-control.__jsx-style-dynamic-selector{position:relative;z-index:0;}", ".segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;display:inline-block;position:relative;cursor:pointer;font-size:14px;text-align:center;border:1px solid ".concat(colors.grey400, ";border-right-width:0;background:").concat(colors.grey050, ";color:").concat(colors.grey600, ";min-width:72px;max-width:320px;padding:").concat(spacers.dp8, " ").concat(spacers.dp16, ";}"), ".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):hover,.segment.__jsx-style-dynamic-selector:not(.selected):focus{background:".concat(colors.grey100, ";color:").concat(colors.grey700, ";}"), ".segment.__jsx-style-dynamic-selector:first-of-type{border-radius:3px 0 0 3px;}", ".segment.__jsx-style-dynamic-selector:last-of-type{border-right-width:1px;border-radius:0 3px 3px 0;}", ".segment.selected.__jsx-style-dynamic-selector{cursor:default;font-weight:600;border:1px solid ".concat(colors.teal800, ";background:").concat(colors.teal600, ";color:white;}"), ".segment.selected.__jsx-style-dynamic-selector:not(:last-of-type){z-index:1;margin-right:-1px;}", ".segment.selected.__jsx-style-dynamic-selector:focus{background:".concat(colors.teal700, ";}"), ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
54
62
  };
55
63
  SegmentedControl.propTypes = {
56
64
  /** Options to populate the segmented control */
package/build/es/segmented-control.stories.js CHANGED
@@ -1,12 +1,15 @@
1
1
  import React from 'react';
2
2
  import { SegmentedControl } from './segmented-control.js';
3
3
 
4
- const logger = ({
5
- value
6
- }) => console.log(`Selected value: ${value}`);
4
+ const logger = _ref => {
5
+ let {
6
+ value
7
+ } = _ref;
8
+ return console.log("Selected value: ".concat(value));
9
+ };
7
10
 
8
11
  export default {
9
- title: 'Actions/Segmented Control',
12
+ title: 'Segmented Control',
10
13
  component: SegmentedControl,
11
14
  parameters: {
12
15
  componentSubtitle: 'Allows selection between related options'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/segmented-control",
3
- "version": "8.1.11",
3
+ "version": "8.2.2",
4
4
  "description": "UI Segmented Control",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@dhis2/prop-types": "^3.0.0-beta.1",
35
- "@dhis2/ui-constants": "8.1.11",
35
+ "@dhis2/ui-constants": "8.2.2",
36
36
  "classnames": "^2.3.1",
37
37
  "prop-types": "^15.7.2"
38
38
  },