superdesk-ui-framework 3.0.1-beta.6 → 3.0.1-beta.8

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 (71) hide show
  1. package/app/fonts/sd_icons.eot +0 -0
  2. package/app/fonts/sd_icons.svg +14 -7
  3. package/app/fonts/sd_icons.ttf +0 -0
  4. package/app/fonts/sd_icons.woff +0 -0
  5. package/app/styles/_icon-font.scss +7 -0
  6. package/app/styles/_sd-tag-input.scss +1 -0
  7. package/app/styles/components/_sd-grid-item.scss +30 -16
  8. package/app/styles/components/_sd-searchbar.scss +7 -0
  9. package/app/styles/design-tokens/_design-tokens-general.scss +1 -1
  10. package/app/styles/form-elements/_forms-general.scss +64 -5
  11. package/app/styles/form-elements/_inputs.scss +10 -0
  12. package/app/styles/grids/_grid-layout.scss +25 -1
  13. package/app/styles/layout/_basic-layout.scss +2 -2
  14. package/app/styles/layout/_editor.scss +4 -4
  15. package/app/styles/primereact/_pr-dropdown.scss +17 -1
  16. package/app-typescript/components/DurationInput.tsx +37 -4
  17. package/app-typescript/components/EmptyState.tsx +2 -1
  18. package/app-typescript/components/Form/FormRowNew.tsx +41 -0
  19. package/app-typescript/components/Form/index.tsx +1 -0
  20. package/app-typescript/components/Layouts/AuthoringContainer.tsx +2 -1
  21. package/app-typescript/components/LeftMenu.tsx +127 -122
  22. package/app-typescript/components/Lists/TableList.tsx +146 -142
  23. package/app-typescript/components/SearchBar.tsx +28 -9
  24. package/app-typescript/components/TimePicker.tsx +2 -0
  25. package/app-typescript/index.ts +1 -0
  26. package/dist/examples.bundle.css +273 -0
  27. package/dist/examples.bundle.js +28927 -28750
  28. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
  29. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  30. package/dist/playgrounds/react-playgrounds/TestGround.tsx +120 -14
  31. package/dist/react/LeftNavigations.tsx +71 -44
  32. package/dist/react/MultiSelect.tsx +1 -1
  33. package/dist/react/TableList.tsx +84 -82
  34. package/dist/react/TimePicker.tsx +6 -4
  35. package/dist/react/TreeSelect.tsx +1 -1
  36. package/dist/sd_icons.eot +0 -0
  37. package/dist/sd_icons.svg +14 -7
  38. package/dist/sd_icons.ttf +0 -0
  39. package/dist/sd_icons.woff +0 -0
  40. package/dist/superdesk-ui.bundle.css +976 -29
  41. package/dist/superdesk-ui.bundle.js +13975 -2089
  42. package/dist/vendor.bundle.js +23 -23
  43. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
  44. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
  45. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +120 -14
  46. package/examples/pages/react/LeftNavigations.tsx +71 -44
  47. package/examples/pages/react/MultiSelect.tsx +1 -1
  48. package/examples/pages/react/TableList.tsx +84 -82
  49. package/examples/pages/react/TimePicker.tsx +6 -4
  50. package/examples/pages/react/TreeSelect.tsx +1 -1
  51. package/package.json +2 -1
  52. package/react/components/DurationInput.d.ts +2 -1
  53. package/react/components/DurationInput.js +36 -4
  54. package/react/components/EmptyState.d.ts +1 -0
  55. package/react/components/EmptyState.js +1 -1
  56. package/react/components/Form/FormRowNew.d.ts +12 -0
  57. package/react/components/Form/FormRowNew.js +67 -0
  58. package/react/components/Form/index.d.ts +1 -0
  59. package/react/components/Form/index.js +3 -1
  60. package/react/components/Layouts/AuthoringContainer.d.ts +1 -0
  61. package/react/components/Layouts/AuthoringContainer.js +1 -1
  62. package/react/components/LeftMenu.d.ts +3 -1
  63. package/react/components/LeftMenu.js +8 -1
  64. package/react/components/Lists/TableList.d.ts +42 -0
  65. package/react/components/Lists/TableList.js +145 -0
  66. package/react/components/SearchBar.d.ts +2 -1
  67. package/react/components/SearchBar.js +18 -2
  68. package/react/components/TimePicker.d.ts +1 -0
  69. package/react/components/TimePicker.js +1 -1
  70. package/react/index.d.ts +1 -0
  71. package/react/index.js +4 -1
@@ -8,7 +8,7 @@ interface IProps {
8
8
  placeholder: string;
9
9
  focused?: boolean;
10
10
  boxed?: boolean;
11
- onSubmit?(): void;
11
+ onSubmit?(value: string | number): void;
12
12
  }
13
13
 
14
14
  interface IState {
@@ -16,6 +16,7 @@ interface IState {
16
16
  type: string;
17
17
  focused: boolean;
18
18
  boxed?: boolean;
19
+ keyDown?: boolean;
19
20
  }
20
21
 
21
22
  export class SearchBar extends React.PureComponent<IProps, IState> {
@@ -27,6 +28,7 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
27
28
  focused: this.props.focused ? this.props.focused : false,
28
29
  type: this.props.type ? this.props.type : 'expanded',
29
30
  boxed: this.props.boxed ? this.props.boxed : false,
31
+ keyDown: false,
30
32
  };
31
33
  this.inputRef = React.createRef();
32
34
  }
@@ -57,20 +59,37 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
57
59
  <label className="sd-searchbar__icon"></label>
58
60
  <input id="search-input"
59
61
  ref={(input: any) => (input && this.props.focused) && input.focus()}
60
- className="sd-searchbar__input"
61
- type="text"
62
- placeholder={this.props.placeholder}
63
- value={this.state.inputValue}
64
- onChange={(e) => this.setState({inputValue: e.target.value})}
65
- onFocus={() => this.setState({focused: true})} />
62
+ className="sd-searchbar__input"
63
+ type="text"
64
+ placeholder={this.props.placeholder}
65
+ value={this.state.inputValue}
66
+ onKeyPress={(event) => {
67
+ if (event.key === 'Enter') {
68
+ if (this.props.onSubmit) {
69
+ this.props.onSubmit(this.state.inputValue);
70
+ }
71
+ this.setState({keyDown: true});
72
+ }
73
+ }}
74
+ onKeyUp={(event) => {
75
+ if (event.key === 'Enter') {
76
+ this.setState({keyDown: false});
77
+ }
78
+ }}
79
+ onChange={(event) => this.setState({inputValue: event.target.value})}
80
+ onFocus={() => this.setState({focused: true})} />
66
81
  {this.state.inputValue &&
67
82
  <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
68
83
  <Icon name='remove-sign' />
69
84
  </button>}
70
85
  <button
71
86
  id="sd-searchbar__search-btn"
72
- className="sd-searchbar__search-btn"
73
- onSubmit={() => this.props.onSubmit}>
87
+ className={`sd-searchbar__search-btn ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
88
+ onClick={() => {
89
+ if (this.props.onSubmit) {
90
+ this.props.onSubmit(this.state.inputValue);
91
+ }
92
+ }}>
74
93
  <Icon name='chevron-right-thin' />
75
94
  </button>
76
95
  </div>
@@ -6,6 +6,7 @@ import { InputWrapper } from './Form';
6
6
  interface IProps {
7
7
  value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
8
8
  onChange(valueNext: string): void;
9
+ allowSeconds?: boolean;
9
10
  disabled?: boolean;
10
11
  inlineLabel?: boolean;
11
12
  required?: boolean;
@@ -49,6 +50,7 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
49
50
  id={this.htmlId}
50
51
  aria-labelledby={this.htmlId + 'label'}
51
52
  type="time"
53
+ step={this.props.allowSeconds ? 1 : undefined}
52
54
  className="sd-input__input"
53
55
  value={this.props.value}
54
56
  required={this.props.required}
@@ -88,6 +88,7 @@ export { Time } from './components/Text/Time';
88
88
  export { Heading } from './components/Text/Heading';
89
89
  export { BottomNav } from './components/Navigation/BottomNav';
90
90
  export { TreeSelect } from './components/TreeSelect';
91
+ export { TableList, TableListItem } from './components/Lists/TableList';
91
92
  export { ContentListItem } from './components/Lists/ContentList';
92
93
 
93
94
  // declare non-typescript exports to prevent errors
@@ -10832,6 +10832,279 @@ doc-react-playground {
10832
10832
  --icon-base-size: 64px
10833
10833
  ; }
10834
10834
 
10835
+ .icon-photo-cancel:before {
10836
+ content: ""; }
10837
+
10838
+ .icon-photo-cancel.color--default {
10839
+ color: var(--color-icon-default); }
10840
+
10841
+ .icon-photo-cancel.color--primary {
10842
+ color: var(--sd-colour-primary) !important; }
10843
+
10844
+ .icon-photo-cancel.color--success {
10845
+ color: var(--sd-colour-success) !important; }
10846
+
10847
+ .icon-photo-cancel.color--warning {
10848
+ color: var(--sd-colour-warning) !important; }
10849
+
10850
+ .icon-photo-cancel.color--alert {
10851
+ color: var(--sd-colour-alert) !important; }
10852
+
10853
+ .icon-photo-cancel.color--highlight {
10854
+ color: var(--sd-colour-highlight) !important; }
10855
+
10856
+ .icon-photo-cancel.color--light {
10857
+ color: var(--color-text-lighter) !important; }
10858
+
10859
+ .icon-photo-cancel.color--white {
10860
+ color: #e2e5e9 !important; }
10861
+
10862
+ .icon-photo-cancel.scale--2x {
10863
+ --icon-base-size: 32px
10864
+ ; }
10865
+
10866
+ .icon-photo-cancel.scale--3x {
10867
+ --icon-base-size: 48px
10868
+ ; }
10869
+
10870
+ .icon-photo-cancel.scale--4x {
10871
+ --icon-base-size: 64px
10872
+ ; }
10873
+
10874
+ .icon-video-cancel:before {
10875
+ content: ""; }
10876
+
10877
+ .icon-video-cancel.color--default {
10878
+ color: var(--color-icon-default); }
10879
+
10880
+ .icon-video-cancel.color--primary {
10881
+ color: var(--sd-colour-primary) !important; }
10882
+
10883
+ .icon-video-cancel.color--success {
10884
+ color: var(--sd-colour-success) !important; }
10885
+
10886
+ .icon-video-cancel.color--warning {
10887
+ color: var(--sd-colour-warning) !important; }
10888
+
10889
+ .icon-video-cancel.color--alert {
10890
+ color: var(--sd-colour-alert) !important; }
10891
+
10892
+ .icon-video-cancel.color--highlight {
10893
+ color: var(--sd-colour-highlight) !important; }
10894
+
10895
+ .icon-video-cancel.color--light {
10896
+ color: var(--color-text-lighter) !important; }
10897
+
10898
+ .icon-video-cancel.color--white {
10899
+ color: #e2e5e9 !important; }
10900
+
10901
+ .icon-video-cancel.scale--2x {
10902
+ --icon-base-size: 32px
10903
+ ; }
10904
+
10905
+ .icon-video-cancel.scale--3x {
10906
+ --icon-base-size: 48px
10907
+ ; }
10908
+
10909
+ .icon-video-cancel.scale--4x {
10910
+ --icon-base-size: 64px
10911
+ ; }
10912
+
10913
+ .icon-text-cancel:before {
10914
+ content: ""; }
10915
+
10916
+ .icon-text-cancel.color--default {
10917
+ color: var(--color-icon-default); }
10918
+
10919
+ .icon-text-cancel.color--primary {
10920
+ color: var(--sd-colour-primary) !important; }
10921
+
10922
+ .icon-text-cancel.color--success {
10923
+ color: var(--sd-colour-success) !important; }
10924
+
10925
+ .icon-text-cancel.color--warning {
10926
+ color: var(--sd-colour-warning) !important; }
10927
+
10928
+ .icon-text-cancel.color--alert {
10929
+ color: var(--sd-colour-alert) !important; }
10930
+
10931
+ .icon-text-cancel.color--highlight {
10932
+ color: var(--sd-colour-highlight) !important; }
10933
+
10934
+ .icon-text-cancel.color--light {
10935
+ color: var(--color-text-lighter) !important; }
10936
+
10937
+ .icon-text-cancel.color--white {
10938
+ color: #e2e5e9 !important; }
10939
+
10940
+ .icon-text-cancel.scale--2x {
10941
+ --icon-base-size: 32px
10942
+ ; }
10943
+
10944
+ .icon-text-cancel.scale--3x {
10945
+ --icon-base-size: 48px
10946
+ ; }
10947
+
10948
+ .icon-text-cancel.scale--4x {
10949
+ --icon-base-size: 64px
10950
+ ; }
10951
+
10952
+ .icon-file-cancel:before {
10953
+ content: ""; }
10954
+
10955
+ .icon-file-cancel.color--default {
10956
+ color: var(--color-icon-default); }
10957
+
10958
+ .icon-file-cancel.color--primary {
10959
+ color: var(--sd-colour-primary) !important; }
10960
+
10961
+ .icon-file-cancel.color--success {
10962
+ color: var(--sd-colour-success) !important; }
10963
+
10964
+ .icon-file-cancel.color--warning {
10965
+ color: var(--sd-colour-warning) !important; }
10966
+
10967
+ .icon-file-cancel.color--alert {
10968
+ color: var(--sd-colour-alert) !important; }
10969
+
10970
+ .icon-file-cancel.color--highlight {
10971
+ color: var(--sd-colour-highlight) !important; }
10972
+
10973
+ .icon-file-cancel.color--light {
10974
+ color: var(--color-text-lighter) !important; }
10975
+
10976
+ .icon-file-cancel.color--white {
10977
+ color: #e2e5e9 !important; }
10978
+
10979
+ .icon-file-cancel.scale--2x {
10980
+ --icon-base-size: 32px
10981
+ ; }
10982
+
10983
+ .icon-file-cancel.scale--3x {
10984
+ --icon-base-size: 48px
10985
+ ; }
10986
+
10987
+ .icon-file-cancel.scale--4x {
10988
+ --icon-base-size: 64px
10989
+ ; }
10990
+
10991
+ .icon-audio-cancel:before {
10992
+ content: ""; }
10993
+
10994
+ .icon-audio-cancel.color--default {
10995
+ color: var(--color-icon-default); }
10996
+
10997
+ .icon-audio-cancel.color--primary {
10998
+ color: var(--sd-colour-primary) !important; }
10999
+
11000
+ .icon-audio-cancel.color--success {
11001
+ color: var(--sd-colour-success) !important; }
11002
+
11003
+ .icon-audio-cancel.color--warning {
11004
+ color: var(--sd-colour-warning) !important; }
11005
+
11006
+ .icon-audio-cancel.color--alert {
11007
+ color: var(--sd-colour-alert) !important; }
11008
+
11009
+ .icon-audio-cancel.color--highlight {
11010
+ color: var(--sd-colour-highlight) !important; }
11011
+
11012
+ .icon-audio-cancel.color--light {
11013
+ color: var(--color-text-lighter) !important; }
11014
+
11015
+ .icon-audio-cancel.color--white {
11016
+ color: #e2e5e9 !important; }
11017
+
11018
+ .icon-audio-cancel.scale--2x {
11019
+ --icon-base-size: 32px
11020
+ ; }
11021
+
11022
+ .icon-audio-cancel.scale--3x {
11023
+ --icon-base-size: 48px
11024
+ ; }
11025
+
11026
+ .icon-audio-cancel.scale--4x {
11027
+ --icon-base-size: 64px
11028
+ ; }
11029
+
11030
+ .icon-list-alt-cancel:before {
11031
+ content: ""; }
11032
+
11033
+ .icon-list-alt-cancel.color--default {
11034
+ color: var(--color-icon-default); }
11035
+
11036
+ .icon-list-alt-cancel.color--primary {
11037
+ color: var(--sd-colour-primary) !important; }
11038
+
11039
+ .icon-list-alt-cancel.color--success {
11040
+ color: var(--sd-colour-success) !important; }
11041
+
11042
+ .icon-list-alt-cancel.color--warning {
11043
+ color: var(--sd-colour-warning) !important; }
11044
+
11045
+ .icon-list-alt-cancel.color--alert {
11046
+ color: var(--sd-colour-alert) !important; }
11047
+
11048
+ .icon-list-alt-cancel.color--highlight {
11049
+ color: var(--sd-colour-highlight) !important; }
11050
+
11051
+ .icon-list-alt-cancel.color--light {
11052
+ color: var(--color-text-lighter) !important; }
11053
+
11054
+ .icon-list-alt-cancel.color--white {
11055
+ color: #e2e5e9 !important; }
11056
+
11057
+ .icon-list-alt-cancel.scale--2x {
11058
+ --icon-base-size: 32px
11059
+ ; }
11060
+
11061
+ .icon-list-alt-cancel.scale--3x {
11062
+ --icon-base-size: 48px
11063
+ ; }
11064
+
11065
+ .icon-list-alt-cancel.scale--4x {
11066
+ --icon-base-size: 64px
11067
+ ; }
11068
+
11069
+ .icon-post-cancel:before {
11070
+ content: ""; }
11071
+
11072
+ .icon-post-cancel.color--default {
11073
+ color: var(--color-icon-default); }
11074
+
11075
+ .icon-post-cancel.color--primary {
11076
+ color: var(--sd-colour-primary) !important; }
11077
+
11078
+ .icon-post-cancel.color--success {
11079
+ color: var(--sd-colour-success) !important; }
11080
+
11081
+ .icon-post-cancel.color--warning {
11082
+ color: var(--sd-colour-warning) !important; }
11083
+
11084
+ .icon-post-cancel.color--alert {
11085
+ color: var(--sd-colour-alert) !important; }
11086
+
11087
+ .icon-post-cancel.color--highlight {
11088
+ color: var(--sd-colour-highlight) !important; }
11089
+
11090
+ .icon-post-cancel.color--light {
11091
+ color: var(--color-text-lighter) !important; }
11092
+
11093
+ .icon-post-cancel.color--white {
11094
+ color: #e2e5e9 !important; }
11095
+
11096
+ .icon-post-cancel.scale--2x {
11097
+ --icon-base-size: 32px
11098
+ ; }
11099
+
11100
+ .icon-post-cancel.scale--3x {
11101
+ --icon-base-size: 48px
11102
+ ; }
11103
+
11104
+ .icon-post-cancel.scale--4x {
11105
+ --icon-base-size: 64px
11106
+ ; }
11107
+
10835
11108
  .icn-mix {
10836
11109
  position: relative;
10837
11110
  display: inline-block;