@pinuts/bsr-uikit-relaunch 0.2.13 → 0.2.16

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 (11) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/items/BSRAddressSelector/BSRAutocompleteField.js +1 -1
  3. package/dist/items/eventWizardItems/EventDatePicker/Header.js +1 -1
  4. package/dist/items/eventWizardItems/EventPicker/Components/CheckboxField.js +1 -1
  5. package/dist/items/eventWizardItems/EventPicker/Components/RadioField.js +1 -1
  6. package/dist/items/eventWizardItems/EventPicker/EventPicker.d.ts.map +1 -1
  7. package/dist/items/eventWizardItems/EventPicker/EventPicker.js +3 -2
  8. package/dist/items/eventWizardItems/shared/PickerFieldsetLegend.js +1 -1
  9. package/dist/styles/_ariakit_combobox.scss +244 -232
  10. package/dist/styles/_form.scss +20 -0
  11. package/package.json +1 -1
package/dist/items/BSRAddressSelector/BSRAutocompleteField.js CHANGED
@@ -223,7 +223,7 @@ const BSRAutocompleteField = _ref => {
223
223
  className: `btn ${_BSRAddressSelectorModule.default.comboboxArrow}`,
224
224
  store: combobox
225
225
  })), filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
226
- className: `${_BSRAddressSelectorModule.default.comboboxPopoverWrapper}`
226
+ className: `${_BSRAddressSelectorModule.default.comboboxPopoverWrapper} comboboxPopoverWrapper`
227
227
  }, /*#__PURE__*/_react.default.createElement(_react2.ComboboxPopover, {
228
228
  store: combobox,
229
229
  gutter: 4,
package/dist/items/eventWizardItems/EventDatePicker/Header.js CHANGED
@@ -17,7 +17,7 @@ const Header = props => {
17
17
  infoButton
18
18
  } = props;
19
19
  return /*#__PURE__*/_react.default.createElement("div", {
20
- className: "pi-header d-sm-flex align-items-center p-3 bg-secondary mb-1 mt-4"
20
+ className: "pi-header d-sm-flex align-items-center p-3 mb-1 mt-4"
21
21
  }, /*#__PURE__*/_react.default.createElement("div", {
22
22
  className: "w-75"
23
23
  }, /*#__PURE__*/_react.default.createElement("h4", null, headline)), infoText && /*#__PURE__*/_react.default.createElement(_InfoModal.default, {
package/dist/items/eventWizardItems/EventPicker/Components/CheckboxField.js CHANGED
@@ -61,7 +61,7 @@ const CheckboxField = props => {
61
61
  const hasDescription = !!infobadge || !!subtitle;
62
62
  const descriptionId = hasDescription ? `desc-${inputProps.id}` : null;
63
63
  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
64
- className: "pi-checkbox custom-control custom-checkbox border mb-1"
64
+ className: "pi-checkbox custom-control custom-checkbox border mb-1 w-100"
65
65
  }, /*#__PURE__*/_react.default.createElement("input", _extends({
66
66
  className: "custom-control-input"
67
67
  }, field, inputProps, {
package/dist/items/eventWizardItems/EventPicker/Components/RadioField.js CHANGED
@@ -41,7 +41,7 @@ const RadioField = _ref => {
41
41
  const hasDescription = !!infobadge || !!usedSubtitle;
42
42
  const descriptionId = hasDescription ? `desc-${inputProps.id}` : null;
43
43
  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
44
- className: "pi-radio custom-control custom-radio border mb-1"
44
+ className: "pi-radio custom-control custom-radio border mb-1 w-100"
45
45
  }, /*#__PURE__*/_react.default.createElement("input", _extends({
46
46
  className: "custom-control-input"
47
47
  }, field, inputProps, {
package/dist/items/eventWizardItems/EventPicker/EventPicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EventPicker.d.ts","sourceRoot":"","sources":["../../../../src/items/eventWizardItems/EventPicker/EventPicker.jsx"],"names":[],"mappings":";AASA;;sBAyEC;;;;;;kBAlFiB,OAAO;2BACE,YAAY"}
1
+ {"version":3,"file":"EventPicker.d.ts","sourceRoot":"","sources":["../../../../src/items/eventWizardItems/EventPicker/EventPicker.jsx"],"names":[],"mappings":";AASA;;sBA8EC;;;;;;kBAvFiB,OAAO;2BACE,YAAY"}
package/dist/items/eventWizardItems/EventPicker/EventPicker.js CHANGED
@@ -31,6 +31,7 @@ const EventPicker = _ref => {
31
31
  className
32
32
  } = inputProps;
33
33
  let renderedEvents = [];
34
+ const fieldSetClassName = _formBuilder.utils.getClassNames([className, 'event-picker']);
34
35
  const groupName = name || id;
35
36
  if (singleSelection && !singleSelectionCheckbox) {
36
37
  renderedEvents = events.map(_ref2 => {
@@ -87,7 +88,7 @@ const EventPicker = _ref => {
87
88
  // alles in ein fieldset packen
88
89
  // https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/
89
90
  return /*#__PURE__*/_react.default.createElement("fieldset", {
90
- className: className
91
+ className: fieldSetClassName
91
92
  }, /*#__PURE__*/_react.default.createElement(_PickerFieldsetLegend.default, {
92
93
  groupName: groupName,
93
94
  headline: headline,
@@ -98,7 +99,7 @@ const EventPicker = _ref => {
98
99
  role: "group",
99
100
  "aria-labelledby": `selectGroup-${groupName}`
100
101
  }, /*#__PURE__*/_react.default.createElement("ul", {
101
- className: "checkboxes"
102
+ className: "checkboxes picker-list"
102
103
  }, renderedEvents)) : /*#__PURE__*/_react.default.createElement("h2", null, "Keine Veranstaltungen an diesem Termin w\xE4hlbar"));
103
104
  };
104
105
  EventPicker.propTypes = {
package/dist/items/eventWizardItems/shared/PickerFieldsetLegend.js CHANGED
@@ -20,7 +20,7 @@ const PickerFieldsetLegend = props => {
20
20
  locationPicker
21
21
  } = props;
22
22
  return /*#__PURE__*/_react.default.createElement("legend", {
23
- id: `selectGroup-${groupName}`
23
+ id: `selectGroup-${groupName} `
24
24
  }, headline, locationPicker && /*#__PURE__*/_react.default.createElement(_LocationPicker.default, null), infoText && /*#__PURE__*/_react.default.createElement(_InfoModal.default, {
25
25
  headline: headline,
26
26
  infoText: infoText,
package/dist/styles/_ariakit_combobox.scss CHANGED
@@ -1,279 +1,291 @@
1
1
  @import "./variables/_variables.scss";
2
2
 
3
-
4
3
  .comboboxWrapper {
5
- position: relative;
6
- display: flex !important;
7
- align-items: center;
8
- justify-content: center;
9
-
10
- .combobox {
11
- border: 0;
12
- outline: 0;
13
- width: 100%;
14
- padding-left: 0;
15
- padding-right: 0;
16
- padding-top: 0;
17
- padding-bottom: 0;
18
- border-radius: $base-gap;
19
- text-overflow: ellipsis;
20
- }
21
-
22
- .combobox:focus{
23
- border: $bsr-black-90;
24
- }
25
-
26
- .combobox[data-focus-visible] {
27
- outline: $bsr-black-90;
28
- }
29
-
30
- input {
31
- height: 100%;
32
- text-overflow: ellipsis;
33
- }
34
-
35
- input:focus {
36
- border: $bsr-black-90;
37
- }
4
+ position: relative;
5
+ display: flex !important;
6
+ align-items: center;
7
+ justify-content: center;
8
+
9
+ .combobox {
10
+ border: 0;
11
+ outline: 0;
12
+ width: 100%;
13
+ padding-left: 0;
14
+ padding-right: 0;
15
+ padding-top: 0;
16
+ padding-bottom: 0;
17
+ border-radius: $base-gap;
18
+ text-overflow: ellipsis;
19
+ }
20
+
21
+ .combobox:focus {
22
+ border: $bsr-black-90;
23
+ }
24
+
25
+ .combobox[data-focus-visible] {
26
+ outline: $bsr-black-90;
27
+ }
28
+
29
+ input {
30
+ height: 100%;
31
+ text-overflow: ellipsis;
32
+ }
33
+
34
+ input:focus {
35
+ border: $bsr-black-90;
36
+ }
37
+
38
+ button {
39
+ height: 100%;
40
+ //width: $input-button-width;
41
+ border-radius: 0.125rem;
42
+ padding: 0px !important;
43
+ background-color: transparent !important;
38
44
 
39
- button {
45
+ &.comboboxCancel {
46
+ svg {
47
+ width: 1.25rem;
40
48
  height: 100%;
41
- //width: $input-button-width;
42
- border-radius: 0.125rem;
43
- padding: 0px !important;
49
+ color: $bsr-grey-100;
50
+ stroke-width: 1.25pt;
51
+ }
52
+ &:focus {
44
53
  background-color: transparent !important;
54
+ }
55
+ }
45
56
 
46
- &.comboboxCancel {
47
- svg {
48
- width: 1.25rem;
49
- height: 100%;
50
- color: $bsr-grey-100;
51
- stroke-width:1.25pt;
52
- }
53
- &:focus {
54
- background-color: transparent !important;
55
- }
56
- }
57
-
58
- &:active {
59
- box-shadow: none !important;
60
- }
57
+ &:active {
58
+ box-shadow: none !important;
61
59
  }
60
+ }
62
61
 
63
- // BMSK-AddresdField
64
- &.focused, &:focus, &:focus-within {
65
- box-shadow: $bsr-shadow-default !important;
66
- background-color: $white;
67
- }
62
+ // BMSK-AddresdField
63
+ &.focused,
64
+ &:focus,
65
+ &:focus-within {
66
+ box-shadow: $bsr-shadow-default !important;
67
+ background-color: $white;
68
+ }
68
69
 
69
- &.dark {
70
- background-color: $bsr-light-brown-100;
71
- }
70
+ &.dark {
71
+ background-color: $bsr-light-brown-100;
72
+ }
72
73
  }
73
74
 
74
75
  .comboboxCancel {
75
- width: fit-content;
76
- background-color: transparent !important;
77
- svg {
78
- width: 1.25rem;
79
- height: 100%;
80
- color: $bsr-grey-100;
81
- stroke-width: 1.25pt;
82
- }
76
+ width: fit-content;
77
+ background-color: transparent !important;
78
+ svg {
79
+ width: 1.25rem;
80
+ height: 100%;
81
+ color: $bsr-grey-100;
82
+ stroke-width: 1.25pt;
83
+ }
83
84
  }
84
85
 
85
86
  .comboboxPopoverWrapper {
87
+ // popover darf kein outline haben
88
+ :focus-visible {
89
+ outline: 0;
90
+ border: 0;
91
+ }
92
+
93
+ .popover {
94
+ position: absolute;
95
+ top: -3px;
96
+ left: 0;
97
+ z-index: 1000;
98
+ display: block;
99
+ max-width: none;
100
+ box-shadow: $bsr-shadow-default;
101
+ border-radius: $border-radius;
102
+ }
103
+
104
+ div[role="listbox"] {
105
+ overflow-x: hidden;
106
+ // border-radius: $border-radius;
107
+ border-top-left-radius: 0;
108
+ border-top-right-radius: 0;
109
+ border-top: none;
110
+ // border-color: currentColor;
111
+ //max-height: min(var(--popover-available-height, $popover-max-height), $popover-max-height);
112
+ //max-height: $popover-max-height;
113
+ padding: 0.3rem;
114
+ transform: translatey(0.6rem) translatex(-1rem);
86
115
 
87
- // popover darf kein outline haben
88
- :focus-visible {
89
- outline: 0;
90
- border: 0;
91
- }
116
+ div[role="option"] {
117
+ font-weight: $sub-headline-font-size;
118
+ white-space: normal;
92
119
 
93
- .popover {
94
- position: absolute;
95
- top: -3px;
96
- left: 0;
97
- z-index: 1000;
98
- display: block;
99
- max-width: none;
100
- box-shadow: $bsr-shadow-default;
101
- border-radius: $border-radius;
102
- }
120
+ &:active,
121
+ &:hover {
122
+ color: $bsr-black-90 !important;
123
+ }
103
124
 
104
- div[role="listbox"] {
105
- overflow-x: hidden;
106
- border-radius: $border-radius;
107
- border-color: currentColor;
108
- //max-height: min(var(--popover-available-height, $popover-max-height), $popover-max-height);
109
- //max-height: $popover-max-height;
110
- padding: 0.3rem;
111
-
112
- div[role="option"] {
113
- font-weight: $sub-headline-font-size;
114
- white-space: normal;
115
-
116
- &:active, &:hover {
117
- color: $bsr-black-90 !important;
118
- }
119
-
120
- &[aria-selected=true], &[aria-selected=true].selected {
121
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px $primary;
122
- border-color: $primary;
123
- outline: 0;
124
-
125
- &:active, &:hover {
126
- color: $white;
127
- }
128
- }
129
-
130
- &[aria-selected=true].selected {
131
- background-color: $primary !important;
132
- color: $white;
133
- }
134
- &.selected {
135
- box-shadow: none;
136
- background-color: $primary !important;
137
- color: $white;
138
-
139
- &:hover {
140
- color: $white !important;
141
- }
142
- &::after {
143
- content: "✔";
144
- margin-inline-start: 0.5rem;
145
- }
146
- }
125
+ &[aria-selected="true"],
126
+ &[aria-selected="true"].selected {
127
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px $primary;
128
+ border-color: $primary;
129
+ outline: 0;
130
+
131
+ &:active,
132
+ &:hover {
133
+ color: $white;
134
+ }
135
+ }
136
+
137
+ &[aria-selected="true"].selected {
138
+ background-color: $primary !important;
139
+ color: $white;
140
+ }
141
+ &.selected {
142
+ box-shadow: none;
143
+ background-color: $primary !important;
144
+ color: $white;
145
+
146
+ &:hover {
147
+ color: $white !important;
147
148
  }
149
+ &::after {
150
+ content: "✔";
151
+ margin-inline-start: 0.5rem;
152
+ }
153
+ }
148
154
  }
155
+ }
149
156
  }
150
157
 
151
158
  .rowDark {
152
- .comboboxWrapper {
153
- .comboboxArrow, .comboboxCancel {
154
- background-color: transparent;
155
- }
159
+ .comboboxWrapper {
160
+ .comboboxArrow,
161
+ .comboboxCancel {
162
+ background-color: transparent;
156
163
  }
164
+ }
157
165
  }
158
166
 
159
167
  .disabled {
160
- pointer-events: none;
161
- background-color: $bsr-grey-100;
168
+ pointer-events: none;
169
+ background-color: $bsr-grey-100;
162
170
  }
163
171
 
164
172
  // Tags for MultiSelectField
165
173
  .tagGrid {
166
- display: flex;
167
- flex-direction: row;
168
- align-items: center;
169
- justify-content: flex-start;
170
- width: 100%;
171
- height: fit-content;
172
- min-height: 3rem;
173
- padding: 0;
174
+ display: flex;
175
+ flex-direction: row;
176
+ align-items: center;
177
+ justify-content: flex-start;
178
+ width: 100%;
179
+ height: fit-content;
180
+ min-height: 3rem;
181
+ padding: 0;
182
+
183
+ &.focused,
184
+ &:focus-within,
185
+ &:focus {
186
+ box-shadow: $bsr-shadow-default !important;
187
+ background-color: $white;
188
+ }
174
189
 
175
- &.focused, &:focus-within, &:focus {
176
- box-shadow: $bsr-shadow-default !important;
177
- background-color: $white;
190
+ .inputRow {
191
+ width: 100%;
192
+ overflow: auto;
193
+ display: flex;
194
+ flex-wrap: wrap;
195
+ max-height: 3rem;
196
+
197
+ .tag {
198
+ background-color: $bsr-grey-100;
199
+ border: 0;
200
+ border-radius: 1rem;
201
+ margin-inline: 0.25rem;
202
+ margin-block: 0.25rem;
203
+
204
+ &:first-child {
205
+ margin-inline-start: 0.5rem;
206
+ }
178
207
  }
179
208
 
180
- .inputRow {
181
- width: 100%;
182
- overflow: auto;
183
- display: flex;
184
- flex-wrap: wrap;
185
- max-height: 3rem;
186
-
187
- .tag {
188
- background-color: $bsr-grey-100;
189
- border: 0;
190
- border-radius: 1rem;
191
- margin-inline: 0.25rem;
192
- margin-block: 0.25rem;
193
-
194
- &:first-child {
195
- margin-inline-start: 0.5rem;;
196
- }
197
- }
209
+ .tagRemove {
210
+ padding-inline-start: 0.5rem;
211
+ font-weight: 600;
212
+ font-size: 0.8rem;
213
+ }
198
214
 
199
- .tagRemove {
200
- padding-inline-start: 0.5rem;
201
- font-weight: 600;
202
- font-size: 0.8rem;
203
- }
204
-
205
- .combobox {
206
- border: 0;
207
- padding: 0.375rem 0.75rem;
208
- border-radius: 0.25rem;
209
- flex-grow: 1;
210
-
211
- &:focus, &:active, &:hover {
212
- outline: none;
213
- }
214
- }
215
+ .combobox {
216
+ border: 0;
217
+ padding: 0.375rem 0.75rem;
218
+ border-radius: 0.25rem;
219
+ flex-grow: 1;
220
+
221
+ &:focus,
222
+ &:active,
223
+ &:hover {
224
+ outline: none;
225
+ }
215
226
  }
227
+ }
216
228
  }
217
229
 
218
230
  .comboboxMultiSelectPopover {
219
- position: relative;
220
- top: -2px;
221
- z-index: 10000;
222
- display: flex;
223
- flex-direction: column;
224
- overflow: auto;
225
- overscroll-behavior: contain;
226
- //border: 1px solid $popover-border-color !important;
227
- border-radius: $border-radius;
228
-
229
- background-color: $white;
230
- padding: 0.4rem;
231
- padding-top: 0.4rem;
232
- color: hsl(204 4% 0%);
233
- outline: 2px solid transparent;
234
- outline-offset: 2px;
235
- //box-shadow: $popover-box-shadow;
236
- //max-height: $popover-max-height;
237
-
238
- div[data-active-item=true] {
239
- box-shadow: $bsr-shadow-default;
240
- border-color: $primary;
241
- outline: 0;
231
+ position: relative;
232
+ top: -2px;
233
+ z-index: 10000;
234
+ display: flex;
235
+ flex-direction: column;
236
+ overflow: auto;
237
+ overscroll-behavior: contain;
238
+ //border: 1px solid $popover-border-color !important;
239
+ border-radius: $border-radius;
240
+
241
+ background-color: $white;
242
+ padding: 0.4rem;
243
+ padding-top: 0.4rem;
244
+ color: hsl(204 4% 0%);
245
+ outline: 2px solid transparent;
246
+ outline-offset: 2px;
247
+ //box-shadow: $popover-box-shadow;
248
+ //max-height: $popover-max-height;
249
+
250
+ div[data-active-item="true"] {
251
+ box-shadow: $bsr-shadow-default;
252
+ border-color: $primary;
253
+ outline: 0;
254
+ }
255
+ div[role="option"] {
256
+ font-weight: 600;
257
+ border-radius: 0.25rem;
258
+ padding: 0.25rem;
259
+
260
+ &:focus,
261
+ &:hover {
262
+ background-color: $bsr-brown-100;
263
+ color: $bsr-black-90;
264
+ cursor: pointer;
242
265
  }
243
- div[role=option] {
244
-
245
- font-weight: 600;
246
- border-radius: 0.25rem;
247
- padding: 0.25rem;
248
-
249
- &:focus, &:hover {
250
- background-color: $bsr-brown-100;
251
- color: $bsr-black-90;
252
- cursor: pointer;
253
- }
254
266
 
255
- &[aria-selected=true] {
256
- background-color: $primary;
257
- color: $white;
258
- border-color: $primary;
259
- outline: 0;
260
- }
267
+ &[aria-selected="true"] {
268
+ background-color: $primary;
269
+ color: $white;
270
+ border-color: $primary;
271
+ outline: 0;
272
+ }
261
273
 
262
- &:not(:last-child) {
263
- margin-bottom: 0.25rem;
264
- }
274
+ &:not(:last-child) {
275
+ margin-bottom: 0.25rem;
276
+ }
265
277
 
266
- &[aria-selected="true"].selected {
267
- &::after {
268
- content: "✔";
269
- margin-inline-start: 0.5rem;
270
- }
271
- }
272
- }
278
+ &[aria-selected="true"].selected {
279
+ &::after {
280
+ content: "✔";
281
+ margin-inline-start: 0.5rem;
282
+ }
283
+ }
284
+ }
273
285
  }
274
286
 
275
287
  .pagination {
276
- button[role="combobox"]{
277
- height: fit-content;
278
- }
279
- }
288
+ button[role="combobox"] {
289
+ height: fit-content;
290
+ }
291
+ }
package/dist/styles/_form.scss CHANGED
@@ -530,3 +530,23 @@ form input[type="checkbox"] + label:before {
530
530
  cursor: default;
531
531
  }
532
532
  }
533
+
534
+ .event-picker {
535
+ legend {
536
+ display: flex;
537
+ align-items: center;
538
+ justify-content: space-between;
539
+ }
540
+ .pi-info {
541
+ display: flex;
542
+ align-items: center;
543
+ }
544
+ .picker-list {
545
+ gap: 0;
546
+ padding-left: 0;
547
+
548
+ li:before {
549
+ display: none;
550
+ }
551
+ }
552
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pinuts/bsr-uikit-relaunch",
3
- "version": "0.2.13",
3
+ "version": "0.2.16",
4
4
  "private": false,
5
5
  "description": "BSR UI-KIT Relaunch",
6
6
  "main": "dist/index.js",