superdesk-ui-framework 4.0.23 → 4.0.25
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.
- package/.github/CODEOWNERS +1 -0
- package/.github/workflows/test.yml +3 -3
- package/app/index.js +1 -0
- package/app/styles/_big-icon-font.scss +1 -1
- package/app/styles/_boxed-list.scss +60 -24
- package/app/styles/_design-tokens.scss +3 -0
- package/app/styles/_helpers.scss +5 -1
- package/app/styles/_labels.scss +82 -71
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_calendar-week-day.scss +97 -0
- package/app/styles/design-tokens/_brand-colors.scss +32 -0
- package/app/styles/design-tokens/_new-colors.scss +18 -0
- package/app/styles/design-tokens/_primitives.scss +161 -0
- package/app/styles/design-tokens/_semantic-colors.scss +145 -0
- package/app/styles/form-elements/_checkbox.scss +15 -0
- package/app-typescript/components/Button.tsx +3 -0
- package/app-typescript/components/Lists/BoxedList.tsx +2 -0
- package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +36 -0
- package/app-typescript/components/RadioButtonGroup.tsx +1 -1
- package/app-typescript/components/avatar/avatar-image.tsx +8 -1
- package/app-typescript/index.ts +1 -0
- package/dist/components/BoxedList.tsx +27 -2
- package/dist/components/RadioGroup.tsx +26 -3
- package/dist/examples.bundle.js +1341 -1175
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +117 -0
- package/dist/superdesk-ui.bundle.css +519 -222
- package/dist/superdesk-ui.bundle.js +982 -897
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/components/BoxedList.tsx +27 -2
- package/examples/pages/components/RadioGroup.tsx +26 -3
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +117 -0
- package/package.json +1 -1
- package/react/components/Button.d.ts +1 -0
- package/react/components/Button.js +2 -0
- package/react/components/Lists/BoxedList.d.ts +1 -0
- package/react/components/Lists/BoxedList.js +1 -0
- package/react/components/Lists/CalendarWeekDayItem.d.ts +15 -0
- package/react/components/Lists/CalendarWeekDayItem.js +67 -0
- package/react/components/RadioButtonGroup.js +1 -1
- package/react/components/avatar/avatar-image.js +1 -1
- package/react/index.d.ts +1 -0
- package/react/index.js +3 -1
|
@@ -4,6 +4,7 @@ import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdow
|
|
|
4
4
|
import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
|
|
5
5
|
import * as Form from '../../../../app-typescript/components/Form';
|
|
6
6
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
7
|
+
import { CalendarWeekDayItem } from '../../../../app-typescript/components//Lists/CalendarWeekDayItem';
|
|
7
8
|
|
|
8
9
|
interface IProps {
|
|
9
10
|
children?: React.ReactNode;
|
|
@@ -193,6 +194,122 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
193
194
|
<IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
|
|
194
195
|
</ButtonGroup>
|
|
195
196
|
|
|
197
|
+
<div className='calendar-user-week-row mb-2 p-2'>
|
|
198
|
+
<div className='calendar-week-day__container'>
|
|
199
|
+
<CalendarWeekDayItem coloredBg={true}>
|
|
200
|
+
<Avatar
|
|
201
|
+
size="medium"
|
|
202
|
+
imageUrl={null}
|
|
203
|
+
initials="112"
|
|
204
|
+
displayName="Ido Borneman"
|
|
205
|
+
/>
|
|
206
|
+
<Text size='medium' className='mt-1 mb-0-5 line-height-sm'>Ido Borneman</Text>
|
|
207
|
+
<Text size='small' color='light'>@COR110</Text>
|
|
208
|
+
</CalendarWeekDayItem>
|
|
209
|
+
</div>
|
|
210
|
+
<div className='calendar-week-day__container'>
|
|
211
|
+
<CalendarWeekDayItem state='success' coloredBg={true} disabled={true}>
|
|
212
|
+
<Text size='small'>All day</Text>
|
|
213
|
+
<div className='d-flex flex-wrap gap-0-5 mt-1'>
|
|
214
|
+
<Label text='Antwerpen' type='success' style='translucent'/>
|
|
215
|
+
<Label text='Mechelan' type='success' style='translucent'/>
|
|
216
|
+
<Label text='Turnhout' type='success' style='translucent'/>
|
|
217
|
+
</div>
|
|
218
|
+
</CalendarWeekDayItem>
|
|
219
|
+
</div>
|
|
220
|
+
<div className='calendar-week-day__container d-flex flex-col gap-0-5'>
|
|
221
|
+
<CalendarWeekDayItem state='alert' coloredBg={true}>
|
|
222
|
+
<Text size='small'>Not available</Text>
|
|
223
|
+
</CalendarWeekDayItem>
|
|
224
|
+
</div>
|
|
225
|
+
<div className='calendar-week-day__container'>
|
|
226
|
+
<CalendarWeekDayItem state='warning' coloredBg={true} hidden={true}>
|
|
227
|
+
<Text size='small'>20:00-23:30</Text>
|
|
228
|
+
<div className='d-flex flex-wrap gap-0-5 mt-1'>
|
|
229
|
+
<Label text='Antwerpen' type='warning' style='translucent'/>
|
|
230
|
+
<Label text='Mechelan' type='warning' style='translucent'/>
|
|
231
|
+
<Label text='Turnhout' type='warning' style='translucent'/>
|
|
232
|
+
</div>
|
|
233
|
+
</CalendarWeekDayItem>
|
|
234
|
+
<CalendarWeekDayItem state='warning' coloredBg={true}>
|
|
235
|
+
<Text size='small'>20:00-23:30</Text>
|
|
236
|
+
<div className='d-flex flex-wrap gap-0-5 mt-1'>
|
|
237
|
+
<Label text='Antwerpen' type='warning' style='translucent'/>
|
|
238
|
+
<Label text='Mechelan' type='warning' style='translucent'/>
|
|
239
|
+
<Label text='Turnhout' type='warning' style='translucent'/>
|
|
240
|
+
</div>
|
|
241
|
+
</CalendarWeekDayItem>
|
|
242
|
+
</div>
|
|
243
|
+
<div className='calendar-week-day__container'>
|
|
244
|
+
<CalendarWeekDayItem state='success' coloredBg={true}>
|
|
245
|
+
<Text size='small'>All day</Text>
|
|
246
|
+
<div className='d-flex flex-wrap gap-0-5 mt-1'>
|
|
247
|
+
<Label text='Antwerpen' type='success' style='translucent'/>
|
|
248
|
+
<Label text='Mechelan' type='success' style='translucent'/>
|
|
249
|
+
<Label text='Turnhout' type='success' style='translucent'/>
|
|
250
|
+
</div>
|
|
251
|
+
</CalendarWeekDayItem>
|
|
252
|
+
</div>
|
|
253
|
+
<div className='calendar-week-day__container d-flex flex-col gap-0-5'>
|
|
254
|
+
<CalendarWeekDayItem state='success' coloredBg={true}>
|
|
255
|
+
<Text size='small'>All day</Text>
|
|
256
|
+
<div className='d-flex flex-wrap gap-0-5 mt-1'>
|
|
257
|
+
<Label text='Antwerpen' type='success' style='translucent'/>
|
|
258
|
+
<Label text='Mechelan' type='success' style='translucent'/>
|
|
259
|
+
<Label text='Turnhout' type='success' style='translucent'/>
|
|
260
|
+
</div>
|
|
261
|
+
</CalendarWeekDayItem>
|
|
262
|
+
</div>
|
|
263
|
+
<div className='calendar-week-day__container'>
|
|
264
|
+
<CalendarWeekDayItem state='alert' coloredBg={true}>
|
|
265
|
+
<Text size='small'>Not available</Text>
|
|
266
|
+
</CalendarWeekDayItem>
|
|
267
|
+
</div>
|
|
268
|
+
<div className='calendar-week-day__container'>
|
|
269
|
+
<CalendarWeekDayItem state='alert' coloredBg={true}>
|
|
270
|
+
<Text size='small'>Not available</Text>
|
|
271
|
+
</CalendarWeekDayItem>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<BoxedList>
|
|
276
|
+
<BoxedListItem type='success' density="compact" coloredBg>
|
|
277
|
+
<div className='d-flex items-center gap-1'>
|
|
278
|
+
<Avatar
|
|
279
|
+
size="small"
|
|
280
|
+
imageUrl={null}
|
|
281
|
+
initials="JL"
|
|
282
|
+
displayName="Jeffrey Lebowski"
|
|
283
|
+
/>
|
|
284
|
+
<div>12</div>
|
|
285
|
+
</div>
|
|
286
|
+
</BoxedListItem>
|
|
287
|
+
<BoxedListItem type='warning' density="compact" coloredBg>
|
|
288
|
+
<div className='d-flex items-center gap-1'>
|
|
289
|
+
<Avatar
|
|
290
|
+
size="small"
|
|
291
|
+
imageUrl={null}
|
|
292
|
+
initials="JL"
|
|
293
|
+
displayName="Jeffrey Lebowski"
|
|
294
|
+
/>
|
|
295
|
+
<div>11</div>
|
|
296
|
+
</div>
|
|
297
|
+
</BoxedListItem>
|
|
298
|
+
<BoxedListItem type='alert' density="compact" coloredBg>
|
|
299
|
+
<div className='d-flex items-center gap-1'>
|
|
300
|
+
<Avatar
|
|
301
|
+
size="small"
|
|
302
|
+
imageUrl={null}
|
|
303
|
+
initials="JL"
|
|
304
|
+
displayName="Jeffrey Lebowski"
|
|
305
|
+
/>
|
|
306
|
+
<div>11</div>
|
|
307
|
+
</div>
|
|
308
|
+
</BoxedListItem>
|
|
309
|
+
</BoxedList>
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
196
313
|
<div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFour ? 'new-collapse-box--open' : ''}`}>
|
|
197
314
|
{/* Header */}
|
|
198
315
|
<div className='new-collapse-box__header'>
|