@decisiv/ui-components 2.0.1-alpha.209 → 2.0.1-alpha.210

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 (63) hide show
  1. package/lib/atoms/OptionsList/Option/styles.d.ts +1 -1
  2. package/lib/components/Badge/types.d.ts +1 -1
  3. package/lib/components/Link/DisabledLink.d.ts +1 -1
  4. package/lib/components/Link/styles.d.ts +3 -3
  5. package/lib/components/List/BaseCell/index.d.ts +6 -0
  6. package/lib/components/List/BaseCell/index.d.ts.map +1 -0
  7. package/lib/components/List/BaseCell/index.js +17 -0
  8. package/lib/components/List/BaseCell/index.test.js +33 -0
  9. package/lib/components/List/BaseCell/styles.d.ts +198 -0
  10. package/lib/components/List/BaseCell/styles.d.ts.map +1 -0
  11. package/lib/components/List/BaseCell/styles.js +26 -0
  12. package/lib/components/List/ContentContainer/index.d.ts +19 -0
  13. package/lib/components/List/ContentContainer/index.d.ts.map +1 -0
  14. package/lib/components/List/ContentContainer/index.js +78 -0
  15. package/lib/components/List/ContentContainer/index.test.js +102 -0
  16. package/lib/components/List/DefaultCell/index.d.ts +7 -0
  17. package/lib/components/List/DefaultCell/index.d.ts.map +1 -0
  18. package/lib/components/List/DefaultCell/index.js +26 -0
  19. package/lib/components/List/LabelContainer/index.d.ts +9 -0
  20. package/lib/components/List/LabelContainer/index.d.ts.map +1 -0
  21. package/lib/components/List/LabelContainer/index.js +38 -0
  22. package/lib/components/List/LabelContainer/index.test.js +105 -0
  23. package/lib/components/List/LabelContainer/styles.d.ts +4 -0
  24. package/lib/components/List/LabelContainer/styles.d.ts.map +1 -0
  25. package/lib/components/List/LabelContainer/styles.js +28 -0
  26. package/lib/components/List/ListItem/index.d.ts +8 -0
  27. package/lib/components/List/ListItem/index.d.ts.map +1 -0
  28. package/lib/components/List/ListItem/index.js +41 -0
  29. package/lib/components/List/ListItem/index.test.js +76 -0
  30. package/lib/components/List/ListItem/schema.d.ts +4 -0
  31. package/lib/components/List/ListItem/schema.d.ts.map +1 -0
  32. package/lib/components/List/ListItem/schema.js +30 -0
  33. package/lib/components/List/ListItem/styles.d.ts +2 -0
  34. package/lib/components/List/ListItem/styles.d.ts.map +1 -0
  35. package/lib/components/List/ListItem/styles.js +23 -0
  36. package/lib/components/List/constants.d.ts +14 -0
  37. package/lib/components/List/constants.d.ts.map +1 -0
  38. package/lib/components/List/constants.js +22 -0
  39. package/lib/components/List/index.d.ts +14 -0
  40. package/lib/components/List/index.d.ts.map +1 -0
  41. package/lib/components/List/index.js +64 -0
  42. package/lib/components/List/index.test.js +64 -0
  43. package/lib/components/List/schema.d.ts +4 -0
  44. package/lib/components/List/schema.d.ts.map +1 -0
  45. package/lib/components/List/schema.js +26 -0
  46. package/lib/components/List/styles.d.ts +198 -0
  47. package/lib/components/List/styles.d.ts.map +1 -0
  48. package/lib/components/List/styles.js +34 -0
  49. package/lib/components/List/types.d.ts +14 -0
  50. package/lib/components/List/types.d.ts.map +1 -0
  51. package/lib/components/List/types.js +5 -0
  52. package/lib/components/Popover/Arrow.d.ts +2 -2
  53. package/lib/components/Tag/propTypes.d.ts +1 -1
  54. package/lib/components/TopNav/Menu/index.d.ts +1 -1
  55. package/lib/components/TopNav/index.d.ts +1 -1
  56. package/lib/components/index.d.ts +1 -0
  57. package/lib/components/index.d.ts.map +1 -1
  58. package/lib/components/index.js +24 -1
  59. package/lib/types/index.d.ts +2 -0
  60. package/lib/types/index.d.ts.map +1 -0
  61. package/lib/types/index.js +5 -0
  62. package/lib/utils/commonUIColors.d.ts +2 -2
  63. package/package.json +2 -2
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+
3
+ var _react = _interopRequireDefault(require("react"));
4
+
5
+ var _react2 = require("@testing-library/react");
6
+
7
+ var _index = _interopRequireDefault(require("./index"));
8
+
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+
11
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
12
+
13
+ function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
14
+
15
+ describe('LabelContainer', function () {
16
+ it('renders the correct label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
17
+ var _render, getByText;
18
+
19
+ return regeneratorRuntime.wrap(function _callee$(_context) {
20
+ while (1) {
21
+ switch (_context.prev = _context.next) {
22
+ case 0:
23
+ _render = (0, _react2.render)(_react.default.createElement(_index.default, {
24
+ label: "Test Label"
25
+ })), getByText = _render.getByText;
26
+ expect(getByText(/test label/i)).toBeInTheDocument();
27
+
28
+ case 2:
29
+ case "end":
30
+ return _context.stop();
31
+ }
32
+ }
33
+ }, _callee);
34
+ })));
35
+ describe('when onDotClick is passed', function () {
36
+ it('renders dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
37
+ var _render2, getByLabelText;
38
+
39
+ return regeneratorRuntime.wrap(function _callee2$(_context2) {
40
+ while (1) {
41
+ switch (_context2.prev = _context2.next) {
42
+ case 0:
43
+ _render2 = (0, _react2.render)(_react.default.createElement(_index.default, {
44
+ label: "Test Label",
45
+ onHistoryClick: function onHistoryClick() {},
46
+ historyLabel: "Label Action"
47
+ })), getByLabelText = _render2.getByLabelText;
48
+ expect(getByLabelText(/label action/i)).toBeInTheDocument();
49
+
50
+ case 2:
51
+ case "end":
52
+ return _context2.stop();
53
+ }
54
+ }
55
+ }, _callee2);
56
+ })));
57
+ it('trigger callback when clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
58
+ var mockCallback, _render3, getByLabelText;
59
+
60
+ return regeneratorRuntime.wrap(function _callee3$(_context3) {
61
+ while (1) {
62
+ switch (_context3.prev = _context3.next) {
63
+ case 0:
64
+ mockCallback = jest.fn();
65
+ _render3 = (0, _react2.render)(_react.default.createElement(_index.default, {
66
+ label: "Test Label",
67
+ onHistoryClick: mockCallback,
68
+ historyLabel: "Action"
69
+ })), getByLabelText = _render3.getByLabelText;
70
+
71
+ _react2.fireEvent.click(getByLabelText('Action'));
72
+
73
+ expect(mockCallback).toHaveBeenCalledTimes(1);
74
+
75
+ case 4:
76
+ case "end":
77
+ return _context3.stop();
78
+ }
79
+ }
80
+ }, _callee3);
81
+ })));
82
+ });
83
+ describe('when onDotClick is NOT passed', function () {
84
+ it('does not render dot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
85
+ var _render4, queryByLabelText;
86
+
87
+ return regeneratorRuntime.wrap(function _callee4$(_context4) {
88
+ while (1) {
89
+ switch (_context4.prev = _context4.next) {
90
+ case 0:
91
+ _render4 = (0, _react2.render)(_react.default.createElement(_index.default, {
92
+ label: "Test Label",
93
+ historyLabel: "Label Action"
94
+ })), queryByLabelText = _render4.queryByLabelText;
95
+ expect(queryByLabelText(/label action/i)).not.toBeInTheDocument();
96
+
97
+ case 2:
98
+ case "end":
99
+ return _context4.stop();
100
+ }
101
+ }
102
+ }, _callee4);
103
+ })));
104
+ });
105
+ });
@@ -0,0 +1,4 @@
1
+ export declare const Dot: import("styled-components").StyledComponent<"button", any, {
2
+ type: "button";
3
+ }, "type">;
4
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/List/LabelContainer/styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,GAAG;;UAoBf,CAAC"}
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Dot = void 0;
7
+
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+
10
+ var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
11
+
12
+ var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
13
+
14
+ var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
15
+
16
+ var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ /* eslint-disable import/prefer-default-export */
21
+ var Dot = _styledComponents.default.button.attrs({
22
+ type: 'button'
23
+ }).withConfig({
24
+ displayName: "styles__Dot",
25
+ componentId: "sc-1n5twvs-0"
26
+ })(["padding:0;margin-left:", ";width:", ";min-width:", ";height:", ";max-height:", ";background-color:", ";border:none;cursor:pointer;border-radius:50%;&:hover{background-color:", ";}"], (0, _rem.default)(_spacing.default.base * 0.1), (0, _rem.default)(_spacing.default.base * 0.7), (0, _rem.default)(_spacing.default.base * 0.7), (0, _rem.default)(_spacing.default.base * 0.7), (0, _rem.default)(_spacing.default.base * 0.7), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean));
27
+
28
+ exports.Dot = Dot;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { ContentContainerProps, ValueType } from '../ContentContainer';
3
+ import { LabelContainerProps } from '../LabelContainer';
4
+ export interface ListItemProps<T extends ValueType> extends Omit<LabelContainerProps, 'onHistoryClick'>, ContentContainerProps<T> {
5
+ onHistoryClick?: (value?: T) => void;
6
+ }
7
+ export default function ListItem<T extends ValueType = string>({ label, onHistoryClick, historyLabel, tooltipText, Component, defaultViewState, value, }: ListItemProps<T>): JSX.Element;
8
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListItem/index.tsx"],"names":[],"mappings":";AAEA,OAAyB,EACvB,qBAAqB,EACrB,SAAS,EACV,MAAM,qBAAqB,CAAC;AAC7B,OAAuB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,CAChD,SAAQ,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACjD,qBAAqB,CAAC,CAAC,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,EAAE,EAC7D,KAAK,EACL,cAAc,EACd,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,KAAK,GACN,EAAE,aAAa,CAAC,CAAC,CAAC,eAoBlB"}
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ListItem;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _ContentContainer = _interopRequireDefault(require("../ContentContainer"));
11
+
12
+ var _LabelContainer = _interopRequireDefault(require("../LabelContainer"));
13
+
14
+ var _styles = require("./styles");
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
19
+
20
+ function ListItem(_ref) {
21
+ var label = _ref.label,
22
+ onHistoryClick = _ref.onHistoryClick,
23
+ historyLabel = _ref.historyLabel,
24
+ tooltipText = _ref.tooltipText,
25
+ Component = _ref.Component,
26
+ defaultViewState = _ref.defaultViewState,
27
+ value = _ref.value;
28
+ var handleOnDotClick = (0, _react.useCallback)(function () {
29
+ if (onHistoryClick) onHistoryClick(value);
30
+ }, [onHistoryClick, value]);
31
+ return _react.default.createElement(_styles.Container, null, _react.default.createElement(_LabelContainer.default, {
32
+ label: label,
33
+ onHistoryClick: onHistoryClick ? handleOnDotClick : undefined,
34
+ historyLabel: historyLabel,
35
+ tooltipText: tooltipText
36
+ }), _react.default.createElement(_ContentContainer.default, {
37
+ Component: Component,
38
+ defaultViewState: defaultViewState,
39
+ value: value
40
+ }));
41
+ }
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+
3
+ var _react = _interopRequireDefault(require("react"));
4
+
5
+ var _react2 = require("@testing-library/react");
6
+
7
+ var _LabelContainer = _interopRequireDefault(require("../LabelContainer"));
8
+
9
+ var _ContentContainer = _interopRequireDefault(require("../ContentContainer"));
10
+
11
+ var _ = _interopRequireDefault(require("."));
12
+
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+
15
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
16
+
17
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
18
+
19
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
20
+
21
+ describe('ListItem', function () {
22
+ var defaultProps = {
23
+ label: 'Test Label',
24
+ Component: function Component() {
25
+ return _react.default.createElement("div", null, "Test children");
26
+ },
27
+ value: 'Test Value',
28
+ defaultViewState: 'form'
29
+ };
30
+ beforeEach(function () {
31
+ jest.clearAllMocks();
32
+ });
33
+ it('renders with required props', function () {
34
+ var _render = (0, _react2.render)(_react.default.createElement(_.default, defaultProps)),
35
+ container = _render.container;
36
+
37
+ expect(container.firstChild).toBeInTheDocument();
38
+ });
39
+ it('passes label props to LabelCell', function () {
40
+ // Mock the LabelCell component to verify props
41
+ jest.spyOn(_react.default, 'createElement');
42
+
43
+ var labelProps = _objectSpread({}, defaultProps, {
44
+ onHistoryClick: jest.fn(),
45
+ historyLabel: 'Dot aria label'
46
+ });
47
+
48
+ (0, _react2.render)(_react.default.createElement(_.default, labelProps)); // Verify LabelCell was called with the correct props
49
+
50
+ expect(_react.default.createElement).toHaveBeenCalledWith(_LabelContainer.default, expect.objectContaining({
51
+ label: labelProps.label,
52
+ onHistoryClick: expect.any(Function),
53
+ historyLabel: labelProps.historyLabel
54
+ }));
55
+ });
56
+ it('passes content props to ContentCell', function () {
57
+ // Mock the ContentCell component to verify props
58
+ jest.spyOn(_react.default, 'createElement');
59
+
60
+ var contentProps = _objectSpread({}, defaultProps, {
61
+ Component: function Component() {
62
+ return _react.default.createElement("span", null, "Custom Component");
63
+ },
64
+ value: 'Test Value',
65
+ defaultViewState: 'form'
66
+ });
67
+
68
+ (0, _react2.render)(_react.default.createElement(_.default, contentProps)); // Verify ContentCell was called with the correct props
69
+
70
+ expect(_react.default.createElement).toHaveBeenCalledWith(_ContentContainer.default, expect.objectContaining({
71
+ Component: contentProps.Component,
72
+ value: contentProps.value,
73
+ defaultViewState: contentProps.defaultViewState
74
+ }));
75
+ });
76
+ });
@@ -0,0 +1,4 @@
1
+ export declare const makeLinkSchemaPropTypes: () => object;
2
+ declare const schema: any;
3
+ export default schema;
4
+ //# sourceMappingURL=schema.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListItem/schema.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,uBAAuB,cA2BlC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAyC,CAAC;AAItD,eAAe,MAAM,CAAC"}
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.makeLinkSchemaPropTypes = void 0;
7
+
8
+ var _reactDesc = require("react-desc");
9
+
10
+ var _constants = require("../constants");
11
+
12
+ // @ts-ignore no module typings
13
+ var makeLinkSchemaPropTypes = function makeLinkSchemaPropTypes() {
14
+ return {
15
+ Component: _reactDesc.PropTypes.func.description('Custom component to render the list item content. If not provided, DefaultCell will be used.').defaultValue('DefaultCell'),
16
+ defaultViewState: _reactDesc.PropTypes.oneOf(Object.values(_constants.VIEW_STATES)).description('Initial display state of the list item. Controls whether the item appears in view, or edit state.').defaultValue(_constants.VIEW_STATES.VIEW),
17
+ historyLabel: _reactDesc.PropTypes.string.description('Accessibility label for the dot/action indicator, used by screen readers.'),
18
+ label: _reactDesc.PropTypes.string.description('Primary text label displayed for the list item.').isRequired,
19
+ onHistoryClick: _reactDesc.PropTypes.func.description('Callback function triggered when the dot/action indicator is clicked.'),
20
+ value: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.bool, _reactDesc.PropTypes.object]).description('The value associated with this list item. The value will be passed to the Component as a prop.')
21
+ };
22
+ };
23
+
24
+ exports.makeLinkSchemaPropTypes = makeLinkSchemaPropTypes;
25
+ var schema = (0, _reactDesc.describe)({
26
+ displayName: 'List.Item'
27
+ });
28
+ schema.propTypes = makeLinkSchemaPropTypes();
29
+ var _default = schema;
30
+ exports.default = _default;
@@ -0,0 +1,2 @@
1
+ export declare const Container: import("styled-components").StyledComponent<"div", any, import("../../Flex").FlexComponentProps, never>;
2
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListItem/styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,yGAOrB,CAAC"}
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Container = void 0;
7
+
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+
10
+ var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
11
+
12
+ var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
13
+
14
+ var _Flex = _interopRequireDefault(require("../../Flex"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ /* eslint-disable import/prefer-default-export */
19
+ var Container = (0, _styledComponents.default)(_Flex.default).withConfig({
20
+ displayName: "styles__Container",
21
+ componentId: "sc-1fwz17n-0"
22
+ })(["display:contents;&:not(:last-of-type){border-bottom:1px solid ", ";}"], (0, _toColorString.default)(_color.default.base.halfMoon));
23
+ exports.Container = Container;
@@ -0,0 +1,14 @@
1
+ export declare const VARIANTS: {
2
+ readonly ZEBRA: "zebra";
3
+ readonly WHITE: "white";
4
+ readonly GREY: "grey";
5
+ };
6
+ export declare const SIZES: {
7
+ readonly SMALL: "small";
8
+ readonly MEDIUM: "medium";
9
+ };
10
+ export declare const VIEW_STATES: {
11
+ readonly FORM: "form";
12
+ readonly VIEW: "view";
13
+ };
14
+ //# sourceMappingURL=constants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/List/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;CAIX,CAAC;AAEX,eAAO,MAAM,KAAK;;;CAGR,CAAC;AAEX,eAAO,MAAM,WAAW;;;CAGd,CAAC"}
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.VIEW_STATES = exports.SIZES = exports.VARIANTS = void 0;
7
+ var VARIANTS = {
8
+ ZEBRA: 'zebra',
9
+ WHITE: 'white',
10
+ GREY: 'grey'
11
+ };
12
+ exports.VARIANTS = VARIANTS;
13
+ var SIZES = {
14
+ SMALL: 'small',
15
+ MEDIUM: 'medium'
16
+ };
17
+ exports.SIZES = SIZES;
18
+ var VIEW_STATES = {
19
+ FORM: 'form',
20
+ VIEW: 'view'
21
+ };
22
+ exports.VIEW_STATES = VIEW_STATES;
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { ListProps } from './types';
3
+ import ListItem from './ListItem';
4
+ export { useListItemContent } from './ContentContainer';
5
+ export declare const ListContext: React.Context<Required<Pick<ListProps, "size">>>;
6
+ declare function List({ variant, size, children, }: ListProps): JSX.Element;
7
+ declare namespace List {
8
+ var BaseCell: typeof import("./BaseCell").default;
9
+ var DefaultCell: typeof import("./DefaultCell").default;
10
+ var Item: typeof ListItem;
11
+ }
12
+ export default List;
13
+ export declare const useList: () => Required<Pick<ListProps, "size">>;
14
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,SAAS,EAAoB,MAAM,SAAS,CAAC;AAKtD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAKlC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,eAAO,MAAM,WAAW,kDAEtB,CAAC;AAEH,iBAAwB,IAAI,CAAC,EAC3B,OAAwB,EACxB,IAAmB,EACnB,QAAQ,GACT,EAAE,SAAS,eAeX;kBAnBuB,IAAI;;;;;eAAJ,IAAI;AAqB5B,eAAO,MAAM,OAAO,yCAEnB,CAAC"}
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = List;
7
+ Object.defineProperty(exports, "useListItemContent", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _ContentContainer.useListItemContent;
11
+ }
12
+ });
13
+ exports.useList = exports.ListContext = void 0;
14
+
15
+ var _react = _interopRequireWildcard(require("react"));
16
+
17
+ var _constants = require("./constants");
18
+
19
+ var _BaseCell = _interopRequireDefault(require("./BaseCell"));
20
+
21
+ var _ListItem = _interopRequireDefault(require("./ListItem"));
22
+
23
+ var _styles = require("./styles");
24
+
25
+ var _DefaultCell = _interopRequireDefault(require("./DefaultCell"));
26
+
27
+ var _ContentContainer = require("./ContentContainer");
28
+
29
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
30
+
31
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
32
+
33
+ var ListContext = (0, _react.createContext)({
34
+ size: _constants.SIZES.MEDIUM
35
+ });
36
+ exports.ListContext = ListContext;
37
+
38
+ function List(_ref) {
39
+ var _ref$variant = _ref.variant,
40
+ variant = _ref$variant === void 0 ? _constants.VARIANTS.ZEBRA : _ref$variant,
41
+ _ref$size = _ref.size,
42
+ size = _ref$size === void 0 ? _constants.SIZES.MEDIUM : _ref$size,
43
+ children = _ref.children;
44
+ var values = (0, _react.useMemo)(function () {
45
+ return {
46
+ size: size
47
+ };
48
+ }, [size]);
49
+ return _react.default.createElement(ListContext.Provider, {
50
+ value: values
51
+ }, _react.default.createElement(_styles.Container, {
52
+ variant: variant,
53
+ fontSize: size
54
+ }, children));
55
+ }
56
+
57
+ var useList = function useList() {
58
+ return (0, _react.useContext)(ListContext);
59
+ };
60
+
61
+ exports.useList = useList;
62
+ List.BaseCell = _BaseCell.default;
63
+ List.DefaultCell = _DefaultCell.default;
64
+ List.Item = _ListItem.default;
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ var _react = _interopRequireDefault(require("react"));
4
+
5
+ var _react2 = require("@testing-library/react");
6
+
7
+ var _reactHooks = require("@testing-library/react-hooks");
8
+
9
+ var _ = _interopRequireWildcard(require("."));
10
+
11
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
12
+
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+
15
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
16
+
17
+ function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
18
+
19
+ describe('List', function () {
20
+ it('renders children', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
21
+ var _render, getByText;
22
+
23
+ return regeneratorRuntime.wrap(function _callee$(_context) {
24
+ while (1) {
25
+ switch (_context.prev = _context.next) {
26
+ case 0:
27
+ _render = (0, _react2.render)(_react.default.createElement(_.default, {
28
+ size: "small"
29
+ }, _react.default.createElement("div", null, "Testing"))), getByText = _render.getByText;
30
+ expect(getByText(/testing/i)).toBeInTheDocument();
31
+
32
+ case 2:
33
+ case "end":
34
+ return _context.stop();
35
+ }
36
+ }
37
+ }, _callee);
38
+ })));
39
+ it('exposes size configuration', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
40
+ var _renderHook, result;
41
+
42
+ return regeneratorRuntime.wrap(function _callee2$(_context2) {
43
+ while (1) {
44
+ switch (_context2.prev = _context2.next) {
45
+ case 0:
46
+ _renderHook = (0, _reactHooks.renderHook)(_.useList, {
47
+ // eslint-disable-next-line react/prop-types
48
+ wrapper: function wrapper(_ref3) {
49
+ var children = _ref3.children;
50
+ return _react.default.createElement(_.default, {
51
+ size: "small"
52
+ }, _react.default.createElement("div", null, children));
53
+ }
54
+ }), result = _renderHook.result;
55
+ expect(result.current.size).toBe('small');
56
+
57
+ case 2:
58
+ case "end":
59
+ return _context2.stop();
60
+ }
61
+ }
62
+ }, _callee2);
63
+ })));
64
+ });
@@ -0,0 +1,4 @@
1
+ export declare const makeLinkSchemaPropTypes: () => object;
2
+ declare const schema: any;
3
+ export default schema;
4
+ //# sourceMappingURL=schema.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/List/schema.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,uBAAuB,cAUlC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAoC,CAAC;AAIjD,eAAe,MAAM,CAAC"}
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.makeLinkSchemaPropTypes = void 0;
7
+
8
+ var _reactDesc = require("react-desc");
9
+
10
+ var _constants = require("./constants");
11
+
12
+ // @ts-ignore no module typings
13
+ var makeLinkSchemaPropTypes = function makeLinkSchemaPropTypes() {
14
+ return {
15
+ variant: _reactDesc.PropTypes.oneOf(Object.values(_constants.VARIANTS)).description('Defines the visual pattern applied to list rows. Use "zebra" for alternating row colors.').defaultValue(_constants.VARIANTS.ZEBRA),
16
+ size: _reactDesc.PropTypes.oneOf(Object.values(_constants.SIZES)).description('Controls the size and spacing of list items.').defaultValue(_constants.SIZES.MEDIUM)
17
+ };
18
+ };
19
+
20
+ exports.makeLinkSchemaPropTypes = makeLinkSchemaPropTypes;
21
+ var schema = (0, _reactDesc.describe)({
22
+ displayName: 'List'
23
+ });
24
+ schema.propTypes = makeLinkSchemaPropTypes();
25
+ var _default = schema;
26
+ exports.default = _default;