@laerdal/life-react-components 1.2.1-dev.1.full → 1.2.1-dev.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 (28) hide show
  1. package/dist/esm/List/ListRow.js +186 -165
  2. package/dist/esm/List/ListRow.js.map +1 -1
  3. package/dist/esm/List/__tests__/ListRow.tests.js +6 -48
  4. package/dist/esm/List/__tests__/ListRow.tests.js.map +1 -1
  5. package/dist/esm/List/index.js +1 -2
  6. package/dist/esm/List/index.js.map +1 -1
  7. package/dist/js/List/ListRow.d.ts +11 -8
  8. package/dist/js/List/ListRow.js +77 -120
  9. package/dist/js/List/ListRow.js.map +1 -1
  10. package/dist/js/List/__tests__/ListRow.tests.js +7 -58
  11. package/dist/js/List/__tests__/ListRow.tests.js.map +1 -1
  12. package/dist/js/List/index.d.ts +1 -2
  13. package/dist/js/List/index.js +0 -8
  14. package/dist/js/List/index.js.map +1 -1
  15. package/dist/umd/List/ListRow.js +201 -167
  16. package/dist/umd/List/ListRow.js.map +1 -1
  17. package/dist/umd/List/__tests__/ListRow.tests.js +8 -51
  18. package/dist/umd/List/__tests__/ListRow.tests.js.map +1 -1
  19. package/dist/umd/List/index.js +5 -8
  20. package/dist/umd/List/index.js.map +1 -1
  21. package/package.json +1 -1
  22. package/dist/esm/List/ListRowDropdown.js +0 -125
  23. package/dist/esm/List/ListRowDropdown.js.map +0 -1
  24. package/dist/js/List/ListRowDropdown.d.ts +0 -9
  25. package/dist/js/List/ListRowDropdown.js +0 -131
  26. package/dist/js/List/ListRowDropdown.js.map +0 -1
  27. package/dist/umd/List/ListRowDropdown.js +0 -202
  28. package/dist/umd/List/ListRowDropdown.js.map +0 -1
package/dist/esm/List/ListRow.js CHANGED
@@ -1,219 +1,240 @@
1
1
  import _pt from "prop-types";
2
+
3
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+
2
5
  import * as React from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { IconButton } from '../Button';
5
- import { ArrowDropDown, MoreVertical } from '../icons/systemicons/SystemIcons';
6
+ import styled from 'styled-components';
6
7
  import { COLORS, ComponentTextStyle } from '../styles';
7
- import ListRowDropdown from './ListRowDropdown';
8
- import { ComponentSStyling } from '../styles/typography';
8
+ import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
9
+ import { TooltipWrapper } from '../Tooltips';
10
+ import { DropdownButton } from '../Dropdown';
11
+ import { SystemIcons } from '../icons';
12
+ import { Size } from '../types';
13
+ const Row = styled.div`
14
+ display: flex;
15
+ flex-direction: row;
16
+ align-items: center;
17
+ justify-content: center;
18
+ border-bottom: 1px solid ${COLORS.neutral_100};
19
+ box-sizing: border-box;
20
+ position: relative;
9
21
 
10
- const handleListHeight = size => {
11
- switch (size) {
12
- case 'small':
13
- return '48px;';
22
+ color: ${COLORS.neutral_600};
23
+ background-color: ${COLORS.white};
14
24
 
15
- case 'medium':
16
- return '56px;';
17
25
 
18
- default:
19
- return '64px;';
26
+ cursor: default;
27
+
28
+ &.interactive {
29
+ cursor: pointer;
30
+ }
31
+
32
+ &.interactive.disabled {
33
+ cursor: not-allowed;
20
34
  }
21
- };
22
35
 
23
- const RowWrapper = styled.div`
24
- &:nth-child(even) {
25
- background-color: ${props => props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20};
36
+ &.interactive:hover:not(.in-action):not(.disabled) {
37
+ background-color: ${COLORS.primary_20};
38
+ color: ${COLORS.primary_700};
26
39
  }
27
40
 
28
- .interaction {
29
- :hover {
30
- background-color: white;
41
+ &.interactive:active:not(.in-action):not(.disabled) {
42
+ background-color: ${COLORS.primary_100};
43
+ color: ${COLORS.primary_800};
44
+ box-shadow: none;
45
+ }
46
+
47
+ &.interactive:focus {
48
+ outline: none;
49
+ box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
50
+ z-index: 1;
51
+ }
52
+
53
+ &.disabled {
54
+ .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {
55
+ color: ${COLORS.neutral_300};
31
56
  }
57
+ }
58
+
59
+
60
+ &.small {
61
+ min-height: 48px;
62
+ padding: 0 8px;
32
63
 
33
- :focus {
34
- background-color: white;
64
+ .list-item-icon {
65
+ margin-right: 8px;
35
66
  }
36
67
 
37
- :active {
38
- background-color: white;
68
+ .list-item-main-text {
69
+ ${ComponentSStyling(ComponentTextStyle.Regular, null)}
70
+ }
71
+
72
+ .list-item-actions {
73
+ margin-right: -8px;
39
74
  }
40
75
  }
41
- `;
42
- const DisabledState = css`
43
- pointer-events: none;
44
- background-color: white;
45
- `;
46
- const EditRow = styled.div`
47
- display: flex;
48
- justify-content: space-between;
49
- padding: 8px 12px;
50
- align-items: center;
51
76
 
52
- ${props => props.disabled ? DisabledState : ''}
77
+ &.medium {
78
+ min-height: 56px;
79
+ padding: 0 12px;
53
80
 
54
- height : ${props => handleListHeight(props.size)}
81
+ .list-item-icon {
82
+ margin-right: 12px;
83
+ }
55
84
 
56
- .user-actions {
57
- display: flex;
58
- position: relative;
59
- align-items: center;
60
- }
85
+ .list-item-main-text {
86
+ ${ComponentMStyling(ComponentTextStyle.Regular, null)}
87
+ }
61
88
 
62
- .somePaddingForAlignment {
63
- padding: 0 3px 0 0;
89
+ .list-item-actions {
90
+ margin-right: -12px;
91
+ }
64
92
  }
65
93
 
66
- &:hover {
67
- background-color: ${COLORS.primary_20};
68
- }
94
+ &.large {
95
+ min-height: 64px;
96
+ padding: 0 16px;
97
+
98
+ .list-item-icon {
99
+ margin-right: 16px;
100
+ }
101
+
102
+ .list-item-main-text {
103
+ ${ComponentLStyling(ComponentTextStyle.Regular, null)}
104
+ }
69
105
 
70
- &:focus {
71
- background-color: white;
72
- box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;
106
+ .list-item-actions {
107
+ margin-right: -16px;
108
+ }
73
109
  }
74
-
75
- &:active {
76
- background-color: ${COLORS.primary_100};
110
+
111
+ &.overlay {
112
+ padding: 0 4px;
113
+
114
+ .list-item-actions {
115
+ margin-right: -4px;
116
+ }
77
117
  }
78
- `;
79
- const LeftSection = styled.div`
80
- display: flex;
81
- flex-direction: row;
82
- align-items: center;
83
118
 
84
- ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}
119
+ .list-item-icon {
120
+ width: 24px;
121
+ height: 24px;
85
122
 
86
- svg {
87
- margin-right: 12px;
123
+ svg {
124
+ width: 24px;
125
+ height: 24px;
126
+ }
88
127
  }
89
- `;
90
- const MainInfo = styled.div`
91
- margin: auto 1em auto 0;
92
- display: flex;
93
- flex-direction: column;
94
- `;
95
- const RightSection = styled.div`
96
- text-align: center;
97
- display: flex;
98
- flex-direction: row-reverse;
99
- `;
100
- const Note = styled.div`
101
- margin: auto;
102
- `;
103
- const ButtonWrapper = styled.div`
104
- outline: none;
105
- `;
106
- const UserDropdownButton = styled(IconButton)`
107
- display: flex;
108
- text-decoration: none;
109
- outline: none;
110
- div {
111
- outline: none;
128
+
129
+ .list-item-content {
130
+ flex-grow: 1;
131
+ display: flex;
132
+ flex-direction: column;
112
133
  }
113
134
 
114
- &:hover > div {
115
- background-color : ${COLORS.primary_20};
116
- border-radius: 18px;
135
+ .list-item-main-text {
117
136
  }
118
137
 
119
- &:focus > div {
120
- box-shadow:0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;
121
- border-radius: 18px;
122
- background: ${COLORS.white};
138
+ .list-item-secondary-text {
139
+ ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}
123
140
  }
124
141
 
125
- &:active > div {
126
- background-color : ${COLORS.primary_100};
127
- border-radius: 18px;
142
+ .list-item-note {
143
+ color: ${COLORS.neutral_600};
144
+ word-break: initial;
145
+ ${ComponentXSStyling(ComponentTextStyle.Regular, null)}
128
146
  }
129
- `;
130
147
 
131
- const renderTextData = (mainInfo, variant) => {
132
- if (variant == 'two-line') {
133
- return /*#__PURE__*/React.createElement(MainInfo, {
134
- "data-hj-suppress": true
135
- }, mainInfo, /*#__PURE__*/React.createElement("small", null, "some secondary text"));
136
- } else {
137
- return /*#__PURE__*/React.createElement(MainInfo, {
138
- "data-hj-suppress": true
139
- }, mainInfo);
148
+ .list-item-note.with-tooltip {
149
+ cursor: pointer;
150
+
151
+ > div {
152
+ text-decoration-line: underline;
153
+ text-decoration-style: dashed;
154
+ text-underline-offset: 1px;
155
+ text-decoration-thickness: 1px;
156
+ }
140
157
  }
141
- };
142
158
 
143
- const renderDropdown = (variant, size) => {
144
- switch (variant) {
145
- case 'overlay':
146
- return /*#__PURE__*/React.createElement("div", {
147
- tabIndex: -1
148
- }, /*#__PURE__*/React.createElement(ArrowDropDown, {
149
- size: size,
150
- color: COLORS.neutral_500
151
- }));
152
-
153
- default:
154
- return /*#__PURE__*/React.createElement("div", {
155
- tabIndex: -1
156
- }, /*#__PURE__*/React.createElement(MoreVertical, {
157
- size: size,
158
- color: COLORS.neutral_500
159
- }));
159
+ .list-item-actions {
160
+ color: ${COLORS.neutral_600};
161
+ display: flex;
162
+ align-items: center;
163
+
164
+ button div {
165
+ background-color: transparent;
166
+ }
160
167
  }
161
- };
168
+ `;
162
169
 
163
170
  const ListRow = ({
164
171
  key,
165
- Icon,
166
- mainInfo,
167
- dropdownOptions,
168
- disableDifferentBackgroundforEvenNumbers,
169
- size,
170
- variant,
172
+ size = Size.Medium,
173
+ variant = 'normal',
174
+ icon,
175
+ mainText,
176
+ secondaryText,
177
+ dropdown,
171
178
  note,
172
- disabled
179
+ noteTooltip,
180
+ disabled = false,
181
+ action
173
182
  }) => {
174
- const color = COLORS.black;
175
- const [dropdownActive, setDropdownActive] = React.useState(false);
176
- return /*#__PURE__*/React.createElement(RowWrapper, {
177
- disableDifferentBackgroundforEvenNumbers: disableDifferentBackgroundforEvenNumbers
178
- }, /*#__PURE__*/React.createElement(EditRow, {
183
+ const [inAction, setInAction] = React.useState(false);
184
+
185
+ const handleKeyPress = e => {
186
+ if (e.key === 'Enter') {
187
+ action && action();
188
+ }
189
+ };
190
+
191
+ const rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat(`${variant} `).concat(`${size}`);
192
+ return /*#__PURE__*/React.createElement(Row, {
179
193
  key: key,
180
- size: size,
181
- variant: variant,
182
- disabled: disabled,
183
- disableDifferentBackgroundforEvenNumbers: disableDifferentBackgroundforEvenNumbers,
184
- className: dropdownActive ? 'interaction' : ''
185
- }, /*#__PURE__*/React.createElement(LeftSection, {
186
- color: color,
194
+ tabIndex: !!action && !disabled ? 0 : undefined,
195
+ className: rowClassName,
196
+ onKeyPress: e => !disabled && handleKeyPress(e),
197
+ onClick: e => {
198
+ !disabled && action && action();
199
+ },
187
200
  "data-hj-suppress": true
188
- }, Icon && /*#__PURE__*/React.createElement(Icon, {
189
- size: "22px",
190
- color: color,
191
- className: "somePaddingForAlignment"
192
- }), renderTextData(mainInfo, variant)), /*#__PURE__*/React.createElement(RightSection, null, /*#__PURE__*/React.createElement(ButtonWrapper, {
193
- className: "user-actions"
194
- }, /*#__PURE__*/React.createElement(UserDropdownButton, {
195
- variant: "secondary",
196
- shape: "circular",
197
- action: () => {
198
- setDropdownActive(true);
199
- }
200
- }, renderDropdown(variant, size)), dropdownActive && /*#__PURE__*/React.createElement(ListRowDropdown, {
201
- size: size,
202
- closeDropdown: () => setDropdownActive(false),
203
- options: dropdownOptions
204
- })), /*#__PURE__*/React.createElement(Note, null, note))));
201
+ }, !!icon && /*#__PURE__*/React.createElement("div", {
202
+ className: 'list-item-icon'
203
+ }, icon), /*#__PURE__*/React.createElement("div", {
204
+ className: 'list-item-content'
205
+ }, /*#__PURE__*/React.createElement("div", {
206
+ className: 'list-item-main-text'
207
+ }, mainText), !!secondaryText && /*#__PURE__*/React.createElement("div", {
208
+ className: 'list-item-secondary-text'
209
+ }, secondaryText)), !!note && /*#__PURE__*/React.createElement(React.Fragment, null, !!noteTooltip && /*#__PURE__*/React.createElement("div", {
210
+ className: 'list-item-note with-tooltip'
211
+ }, /*#__PURE__*/React.createElement(TooltipWrapper, {
212
+ label: noteTooltip,
213
+ size: size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small,
214
+ position: 'top',
215
+ withArrow: true
216
+ }, note)), !noteTooltip && /*#__PURE__*/React.createElement("div", {
217
+ className: 'list-item-note'
218
+ }, note)), !!dropdown && /*#__PURE__*/React.createElement("div", {
219
+ className: 'list-item-actions',
220
+ onMouseEnter: () => setInAction(!dropdown?.disabled),
221
+ onMouseLeave: () => setInAction(false)
222
+ }, /*#__PURE__*/React.createElement(DropdownButton, _extends({}, dropdown, {
223
+ disabled: disabled || dropdown.disabled,
224
+ icon: variant === 'overlay' ? /*#__PURE__*/React.createElement(SystemIcons.ArrowDropDown, null) : /*#__PURE__*/React.createElement(SystemIcons.MoreVertical, null)
225
+ }))));
205
226
  };
206
227
 
207
228
  ListRow.propTypes = {
208
229
  key: _pt.string,
209
- Icon: _pt.any,
210
- mainInfo: _pt.any.isRequired,
211
- dropdownOptions: _pt.array.isRequired,
212
- disableDifferentBackgroundforEvenNumbers: _pt.bool,
213
- size: _pt.oneOf(['small', 'medium', 'large']).isRequired,
214
- variant: _pt.oneOf(['one-line', 'two-line', 'overlay']).isRequired,
230
+ variant: _pt.oneOf(['normal', 'overlay']),
231
+ icon: _pt.node,
232
+ mainText: _pt.string.isRequired,
233
+ secondaryText: _pt.string,
215
234
  note: _pt.string,
216
- disabled: _pt.bool.isRequired
235
+ noteTooltip: _pt.string,
236
+ disabled: _pt.bool,
237
+ action: _pt.func
217
238
  };
218
239
  export default ListRow;
219
240
  //# sourceMappingURL=ListRow.js.map
package/dist/esm/List/ListRow.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","css","IconButton","ArrowDropDown","MoreVertical","COLORS","ComponentTextStyle","ListRowDropdown","ComponentSStyling","handleListHeight","size","RowWrapper","div","props","disableDifferentBackgroundforEvenNumbers","neutral_20","DisabledState","EditRow","disabled","primary_20","primary_100","LeftSection","Regular","MainInfo","RightSection","Note","ButtonWrapper","UserDropdownButton","white","renderTextData","mainInfo","variant","renderDropdown","neutral_500","ListRow","key","Icon","dropdownOptions","note","color","black","dropdownActive","setDropdownActive","useState"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {Button, IconButton} from '../Button';\nimport {ArrowDropDown, MoreVertical} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {ListRowDropdownOption} from '../types';\n\nimport ListRowDropdown from './ListRowDropdown';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst handleListHeight = (size:string) => {\n switch(size)\n {\n case 'small' : return '48px;';\n case 'medium' : return '56px;';\n default : return '64px;';\n }\n}\n\nconst RowWrapper = styled.div<{disableDifferentBackgroundforEvenNumbers:boolean|undefined}>`\n &:nth-child(even) {\n background-color: ${props => (props.disableDifferentBackgroundforEvenNumbers ? 'inherit' : COLORS.neutral_20)};\n }\n\n .interaction {\n :hover {\n background-color: white;\n }\n\n :focus {\n background-color: white;\n }\n\n :active { \n background-color: white;\n }\n }\n`;\n\nconst DisabledState = css`\n pointer-events: none;\n background-color: white;\n`;\n\nconst EditRow = styled.div<ListRowProps>`\n display: flex;\n justify-content: space-between;\n padding: 8px 12px;\n align-items: center;\n\n ${props => props.disabled ? DisabledState : ''}\n\n height : ${props => handleListHeight(props.size) }\n\n .user-actions {\n display: flex;\n position: relative;\n align-items: center;\n }\n\n .somePaddingForAlignment {\n padding: 0 3px 0 0;\n }\n\n &:hover { \n background-color: ${COLORS.primary_20}; \n }\n\n &:focus { \n background-color: white;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1; \n }\n \n &:active { \n background-color: ${COLORS.primary_100};\n }\n`;\n\nconst LeftSection = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n svg {\n margin-right: 12px;\n }\n`;\n\nconst MainInfo = styled.div`\n margin: auto 1em auto 0;\n display: flex;\n flex-direction: column;\n`;\n\nconst RightSection = styled.div`\n text-align: center;\n display: flex;\n flex-direction: row-reverse;\n`;\n\nconst Note = styled.div`\n margin: auto;\n`;\n\nconst ButtonWrapper = styled.div`\n outline: none;\n`;\n\nconst UserDropdownButton = styled(IconButton)`\n display: flex;\n text-decoration: none;\n outline: none;\n div {\n outline: none;\n }\n\n &:hover > div {\n background-color : ${COLORS.primary_20};\n border-radius: 18px;\n }\n\n &:focus > div {\n box-shadow:0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n border-radius: 18px;\n background: ${COLORS.white};\n }\n\n &:active > div {\n background-color : ${COLORS.primary_100};\n border-radius: 18px;\n }\n`;\n\ntype Props = {\n key?: string;\n Icon?: any;\n mainInfo: any;\n dropdownOptions: ListRowDropdownOption[];\n disableDifferentBackgroundforEvenNumbers?: boolean;\n size: 'small' | 'medium' | 'large';\n variant: 'one-line' | 'two-line' | 'overlay';\n note?: string;\n disabled: boolean;\n};\n\nconst renderTextData = (mainInfo: any, variant?: string) => {\n if(variant == 'two-line'){\n return (\n <MainInfo data-hj-suppress>{mainInfo}\n <small>some secondary text</small>\n </MainInfo>\n )\n }\n else{\n return (\n <MainInfo data-hj-suppress>{mainInfo}</MainInfo>\n )\n }\n}\n\nconst renderDropdown = (variant: string, size: string) =>{\n switch(variant){\n case 'overlay' : return (\n <div tabIndex={-1}>\n <ArrowDropDown size={size} color={COLORS.neutral_500} />\n </div>\n );\n \n default : return (\n <div tabIndex={-1}>\n <MoreVertical size={size} color={COLORS.neutral_500} />\n </div>\n );\n }\n \n}\n\nconst ListRow: React.FunctionComponent<Props> = ({ key, Icon, mainInfo, dropdownOptions, disableDifferentBackgroundforEvenNumbers, size, variant, note, disabled }: Props) => {\n const color = COLORS.black;\n const [dropdownActive, setDropdownActive] = React.useState<Boolean>(false);\n\n return (\n <RowWrapper disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}>\n <EditRow key={key} size={size} variant = {variant} disabled = {disabled}\n disableDifferentBackgroundforEvenNumbers={disableDifferentBackgroundforEvenNumbers}\n className={(dropdownActive?'interaction':'')}>\n <LeftSection color={color} data-hj-suppress>\n {Icon && <Icon size=\"22px\" color={color} className=\"somePaddingForAlignment\" />}\n { renderTextData(mainInfo, variant) }\n </LeftSection>\n\n <RightSection>\n <ButtonWrapper className=\"user-actions\">\n <UserDropdownButton\n variant=\"secondary\"\n shape='circular'\n action={() => {\n setDropdownActive(true);\n }}>\n {\n renderDropdown(variant, size)\n }\n </UserDropdownButton>\n {dropdownActive && <ListRowDropdown size={size} closeDropdown={() => setDropdownActive(false)} options={dropdownOptions} />}\n </ButtonWrapper>\n\n <Note>\n {note}\n </Note>\n </RightSection>\n </EditRow>\n </RowWrapper>\n );\n};\n\nexport default ListRow;\n\ntype ListRowProps = {\n disableDifferentBackgroundforEvenNumbers? : boolean;\n size: string;\n variant: string;\n disabled: boolean;\n}"],"file":"ListRow.js"}
1
+ {"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Regular","ListRow","key","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","inAction","setInAction","useState","handleKeyPress","e","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA,MAAMC,GAAG,GAAGZ,MAAM,CAACa,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BZ,MAAM,CAACa,WAAY;AAChD;AACA;AACA;AACA,WAAWb,MAAM,CAACc,WAAY;AAC9B,sBAAsBd,MAAM,CAACe,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBf,MAAM,CAACgB,UAAW;AAC1C,aAAahB,MAAM,CAACiB,WAAY;AAChC;AACA;AACA;AACA,wBAAwBjB,MAAM,CAACkB,WAAY;AAC3C,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAenB,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACH,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACF,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQnB,iBAAiB,CAACD,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AA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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n position: relative;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n\n &.interactive:focus {\n outline: none;\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n z-index: 1;\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\n\ntype Props = {\n key?: string;\n size?: Size;\n variant?: 'normal' | 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n key,\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`);\n\n return (\n <Row key={key}\n tabIndex={!!action && !disabled ? 0 : undefined}\n className={rowClassName}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n disabled={disabled || dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
package/dist/esm/List/__tests__/ListRow.tests.js CHANGED
@@ -1,61 +1,19 @@
1
1
  import React from 'react';
2
2
  import { render } from '@testing-library/react';
3
3
  import { ListRow } from '../index';
4
- import { Institute } from '../../icons/systemicons/SystemIcons';
4
+ import { Size } from '../../types';
5
+ import { SystemIcons } from '../../icons';
5
6
  describe('<ListRow />', () => {
6
7
  it('Renders', async () => {
7
8
  const {
8
9
  getByText
9
10
  } = render( /*#__PURE__*/React.createElement(ListRow, {
10
- Icon: Institute,
11
- mainInfo: /*#__PURE__*/React.createElement("div", null, "Laerdal Medical AS"),
12
- dropdownOptions: [{
13
- label: 'Option 1',
14
- action: () => {},
15
- key: 'Test1'
16
- }, {
17
- label: 'Option 2',
18
- action: () => {},
19
- key: 'Test2'
20
- }],
21
- variant: "one-line",
22
- size: "small",
11
+ icon: /*#__PURE__*/React.createElement(SystemIcons.Institute, null),
12
+ mainText: 'Laerdal Medical AS',
13
+ size: Size.Small,
23
14
  disabled: false
24
- }, "Menu 1"));
15
+ }));
25
16
  expect(getByText('Laerdal Medical AS')).toBeDefined();
26
17
  });
27
- it('When menu is clicked, it opens', async () => {
28
- const {
29
- getByRole,
30
- getByText
31
- } = render( /*#__PURE__*/React.createElement(ListRow, {
32
- Icon: Institute,
33
- mainInfo: /*#__PURE__*/React.createElement("div", null, "Laerdal Medical AS"),
34
- dropdownOptions: [{
35
- label: 'Option 1',
36
- action: () => {},
37
- key: 'Test1'
38
- }, {
39
- label: 'Option 2',
40
- action: () => {},
41
- key: 'Test2'
42
- }],
43
- variant: "two-line",
44
- size: "large",
45
- disabled: true
46
- }, "Menu 1")); //expect(getByText('Option 1')).not.toBeDefined();
47
-
48
- getByRole('button').click();
49
- expect(getByText('Option 1')).toBeDefined();
50
- });
51
- /*it('Renders with required input if specified', async () => {
52
- const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" required />);
53
- expect(getByPlaceholderText('Placeholder').required).toBe(true);
54
- });
55
- it('Renders with inital value if specified', async () => {
56
- const initialValue = 'Contact';
57
- const { getByPlaceholderText } = render(<DropdownFilter id="Dropdown" list={list} placeholder="Placeholder" initalValue={initialValue} />);
58
- expect(getByPlaceholderText('Placeholder').value).toBe(initialValue);
59
- });*/
60
18
  });
61
19
  //# sourceMappingURL=ListRow.tests.js.map
package/dist/esm/List/__tests__/ListRow.tests.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["React","render","ListRow","Institute","describe","it","getByText","label","action","key","expect","toBeDefined","getByRole","click"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,OAAT,QAAwB,UAAxB;AACA,SAASC,SAAT,QAA0B,qCAA1B;AAEAC,QAAQ,CAAC,aAAD,EAAgB,MAAM;AAC5BC,EAAAA,EAAE,CAAC,SAAD,EAAY,YAAY;AACxB,UAAM;AAAEC,MAAAA;AAAF,QAAgBL,MAAM,eAC1B,oBAAC,OAAD;AACE,MAAA,IAAI,EAAEE,SADR;AAEE,MAAA,QAAQ,eAAE,sDAFZ;AAGE,MAAA,eAAe,EAAE,CACf;AAAEI,QAAAA,KAAK,EAAE,UAAT;AAAqBC,QAAAA,MAAM,EAAE,MAAM,CAAE,CAArC;AAAuCC,QAAAA,GAAG,EAAE;AAA5C,OADe,EAEf;AAAEF,QAAAA,KAAK,EAAE,UAAT;AAAqBC,QAAAA,MAAM,EAAE,MAAM,CAAE,CAArC;AAAuCC,QAAAA,GAAG,EAAE;AAA5C,OAFe,CAHnB;AAOE,MAAA,OAAO,EAAC,UAPV;AAQE,MAAA,IAAI,EAAC,OARP;AASE,MAAA,QAAQ,EAAE;AATZ,gBAD0B,CAA5B;AAeAC,IAAAA,MAAM,CAACJ,SAAS,CAAC,oBAAD,CAAV,CAAN,CAAwCK,WAAxC;AACD,GAjBC,CAAF;AAmBAN,EAAAA,EAAE,CAAC,gCAAD,EAAmC,YAAY;AAC/C,UAAM;AAAEO,MAAAA,SAAF;AAAaN,MAAAA;AAAb,QAA2BL,MAAM,eACrC,oBAAC,OAAD;AACE,MAAA,IAAI,EAAEE,SADR;AAEE,MAAA,QAAQ,eAAE,sDAFZ;AAGE,MAAA,eAAe,EAAE,CACf;AAAEI,QAAAA,KAAK,EAAE,UAAT;AAAqBC,QAAAA,MAAM,EAAE,MAAM,CAAE,CAArC;AAAuCC,QAAAA,GAAG,EAAE;AAA5C,OADe,EAEf;AAAEF,QAAAA,KAAK,EAAE,UAAT;AAAqBC,QAAAA,MAAM,EAAE,MAAM,CAAE,CAArC;AAAuCC,QAAAA,GAAG,EAAE;AAA5C,OAFe,CAHnB;AAOE,MAAA,OAAO,EAAC,UAPV;AAQE,MAAA,IAAI,EAAC,OARP;AASE,MAAA,QAAQ,EAAE;AATZ,gBADqC,CAAvC,CAD+C,CAgB/C;;AACAG,IAAAA,SAAS,CAAC,QAAD,CAAT,CAAoBC,KAApB;AACAH,IAAAA,MAAM,CAACJ,SAAS,CAAC,UAAD,CAAV,CAAN,CAA8BK,WAA9B;AACD,GAnBC,CAAF;AAqBA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEC,CAnDO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { ListRow } from '../index';\nimport { Institute } from '../../icons/systemicons/SystemIcons';\n\ndescribe('<ListRow />', () => {\n it('Renders', async () => {\n const { getByText } = render(\n <ListRow\n Icon={Institute}\n mainInfo={<div>Laerdal Medical AS</div>}\n dropdownOptions={[\n { label: 'Option 1', action: () => {}, key: 'Test1' },\n { label: 'Option 2', action: () => {}, key: 'Test2' },\n ]}\n variant='one-line'\n size='small'\n disabled={false}\n >\n Menu 1\n </ListRow>,\n );\n expect(getByText('Laerdal Medical AS')).toBeDefined();\n });\n\n it('When menu is clicked, it opens', async () => {\n const { getByRole, getByText } = render(\n <ListRow\n Icon={Institute}\n mainInfo={<div>Laerdal Medical AS</div>}\n dropdownOptions={[\n { label: 'Option 1', action: () => {}, key: 'Test1' },\n { label: 'Option 2', action: () => {}, key: 'Test2' },\n ]}\n variant='two-line'\n size='large'\n disabled={true}>\n Menu 1\n </ListRow>,\n );\n\n //expect(getByText('Option 1')).not.toBeDefined();\n getByRole('button').click();\n expect(getByText('Option 1')).toBeDefined();\n });\n\n /*it('Renders with required input if specified', async () => {\n const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" required />);\n expect(getByPlaceholderText('Placeholder').required).toBe(true);\n });\n\n it('Renders with inital value if specified', async () => {\n const initialValue = 'Contact';\n const { getByPlaceholderText } = render(<DropdownFilter id=\"Dropdown\" list={list} placeholder=\"Placeholder\" initalValue={initialValue} />);\n expect(getByPlaceholderText('Placeholder').value).toBe(initialValue);\n });*/\n});\n"],"file":"ListRow.tests.js"}
1
+ {"version":3,"sources":["../../../../src/List/__tests__/ListRow.tests.tsx"],"names":["React","render","ListRow","Size","SystemIcons","describe","it","getByText","Small","expect","toBeDefined"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,QAAqB,wBAArB;AACA,SAAQC,OAAR,QAAsB,UAAtB;AACA,SAAQC,IAAR,QAAmB,aAAnB;AACA,SAAQC,WAAR,QAA0B,aAA1B;AAEAC,QAAQ,CAAC,aAAD,EAAgB,MAAM;AAC5BC,EAAAA,EAAE,CAAC,SAAD,EAAY,YAAY;AACxB,UAAM;AAACC,MAAAA;AAAD,QAAcN,MAAM,eACxB,oBAAC,OAAD;AACE,MAAA,IAAI,eAAE,oBAAC,WAAD,CAAa,SAAb,OADR;AAEE,MAAA,QAAQ,EAAE,oBAFZ;AAGE,MAAA,IAAI,EAAEE,IAAI,CAACK,KAHb;AAIE,MAAA,QAAQ,EAAE;AAJZ,MADwB,CAA1B;AAOAC,IAAAA,MAAM,CAACF,SAAS,CAAC,oBAAD,CAAV,CAAN,CAAwCG,WAAxC;AACD,GATC,CAAF;AAUD,CAXO,CAAR","sourcesContent":["import React from 'react';\nimport {render} from '@testing-library/react';\nimport {ListRow} from '../index';\nimport {Size} from '../../types';\nimport {SystemIcons} from '../../icons';\n\ndescribe('<ListRow />', () => {\n it('Renders', async () => {\n const {getByText} = render(\n <ListRow\n icon={<SystemIcons.Institute/>}\n mainText={'Laerdal Medical AS'}\n size={Size.Small}\n disabled={false}/>,\n );\n expect(getByText('Laerdal Medical AS')).toBeDefined();\n });\n});\n"],"file":"ListRow.tests.js"}
package/dist/esm/List/index.js CHANGED
@@ -1,4 +1,3 @@
1
1
  import ListRow from './ListRow';
2
- import ListRowDropdown from './ListRowDropdown';
3
- export { ListRow, ListRowDropdown };
2
+ export { ListRow };
4
3
  //# sourceMappingURL=index.js.map
package/dist/esm/List/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/List/index.ts"],"names":["ListRow","ListRowDropdown"],"mappings":"AAAA,OAAOA,OAAP,MAAoB,WAApB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AAEA,SAASD,OAAT,EAAkBC,eAAlB","sourcesContent":["import ListRow from './ListRow';\nimport ListRowDropdown from './ListRowDropdown';\n\nexport { ListRow, ListRowDropdown };\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/List/index.ts"],"names":["ListRow"],"mappings":"AAAA,OAAOA,OAAP,MAAoB,WAApB;AAEA,SAAQA,OAAR","sourcesContent":["import ListRow from './ListRow';\n\nexport {ListRow};\n"],"file":"index.js"}
package/dist/js/List/ListRow.d.ts CHANGED
@@ -1,15 +1,18 @@
1
1
  import * as React from 'react';
2
- import { ListRowDropdownOption } from '../types';
2
+ import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
3
+ import { Size } from '../types';
3
4
  declare type Props = {
4
5
  key?: string;
5
- Icon?: any;
6
- mainInfo: any;
7
- dropdownOptions: ListRowDropdownOption[];
8
- disableDifferentBackgroundforEvenNumbers?: boolean;
9
- size: 'small' | 'medium' | 'large';
10
- variant: 'one-line' | 'two-line' | 'overlay';
6
+ size?: Size;
7
+ variant?: 'normal' | 'overlay';
8
+ icon?: React.ReactNode;
9
+ mainText: string;
10
+ secondaryText?: string;
11
+ dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;
11
12
  note?: string;
12
- disabled: boolean;
13
+ noteTooltip?: string;
14
+ disabled?: boolean;
15
+ action?: () => void;
13
16
  };
14
17
  declare const ListRow: React.FunctionComponent<Props>;
15
18
  export default ListRow;