superdesk-ui-framework 2.4.17 → 2.4.18

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 (17) hide show
  1. package/app/styles/_accessibility.scss +3 -2
  2. package/app-typescript/components/Input.tsx +8 -3
  3. package/app-typescript/components/Select.tsx +6 -3
  4. package/app-typescript/components/Tag.tsx +2 -2
  5. package/dist/examples.bundle.js +28 -9
  6. package/dist/react/Inputs.tsx +20 -2
  7. package/dist/react/Selects.tsx +23 -1
  8. package/dist/superdesk-ui.bundle.css +3 -2
  9. package/dist/superdesk-ui.bundle.js +9 -4
  10. package/examples/pages/react/Inputs.tsx +20 -2
  11. package/examples/pages/react/Selects.tsx +23 -1
  12. package/package.json +1 -1
  13. package/react/components/Input.d.ts +2 -1
  14. package/react/components/Input.js +4 -1
  15. package/react/components/Select.d.ts +2 -1
  16. package/react/components/Select.js +4 -2
  17. package/react/components/Tag.js +1 -1
package/app/styles/_accessibility.scss CHANGED
@@ -1,9 +1,10 @@
1
1
  .a11y-only {
2
- position: absolute;
2
+ position: absolute !important;
3
3
  top: 0;
4
4
  z-index: -1;
5
5
  pointer-events: none;
6
6
  opacity: 0;
7
- height: 1px;
7
+ height: 1px !important;
8
+ width: 1px !important;
8
9
  overflow: hidden;
9
10
  }
package/app-typescript/components/Input.tsx CHANGED
@@ -4,7 +4,7 @@ import nextId from "react-id-generator";
4
4
 
5
5
  interface IProps {
6
6
  value?: string;
7
- label?: string;
7
+ label: string;
8
8
  maxLength?: number;
9
9
  info?: string;
10
10
  error?: string;
@@ -12,6 +12,7 @@ interface IProps {
12
12
  disabled?: boolean;
13
13
  invalid?: boolean;
14
14
  inlineLabel?: boolean;
15
+ labelHidden?: boolean;
15
16
  onChange(newValue: string): void;
16
17
  }
17
18
 
@@ -50,11 +51,15 @@ export class Input extends React.Component<IProps, IState> {
50
51
  'sd-input--disabled': this.props.disabled,
51
52
  'sd-input--invalid': this.props.invalid || this.state.invalid,
52
53
  });
54
+ const labelClasses = classNames('sd-input__label', {
55
+ 'a11y-only': this.props.labelHidden,
56
+ });
53
57
 
54
58
  return (
55
59
  <div className={classes}>
56
- {this.props.label ? <label className='sd-input__label'
57
- htmlFor={this.htmlId} id={this.htmlId + 'label'}>{this.props.label}</label> : null}
60
+ <label className={labelClasses} htmlFor={this.htmlId} id={this.htmlId + 'label'}>
61
+ {this.props.label}
62
+ </label>
58
63
 
59
64
  <input className='sd-input__input'
60
65
  type='text'
package/app-typescript/components/Select.tsx CHANGED
@@ -4,13 +4,14 @@ import nextId from "react-id-generator";
4
4
 
5
5
  interface ISelect {
6
6
  value?: string;
7
- label?: string;
7
+ label: string;
8
8
  info?: string;
9
9
  error?: string;
10
10
  required?: boolean;
11
11
  disabled?: boolean;
12
12
  invalid?: boolean;
13
13
  inlineLabel?: boolean;
14
+ labelHidden?: boolean;
14
15
  onChange(newValue: string): void;
15
16
  }
16
17
 
@@ -45,11 +46,13 @@ class Select extends React.Component<ISelect, IState> {
45
46
  'sd-input--disabled': this.props.disabled,
46
47
  'sd-input--invalid': this.props.invalid || this.state.invalid,
47
48
  });
49
+ const labelClasses = classNames('sd-input__label', {
50
+ 'a11y-only': this.props.labelHidden,
51
+ });
48
52
 
49
53
  return (
50
54
  <div className={classes}>
51
- {this.props.label ?
52
- <label className='sd-input__label' htmlFor={this.htmlId}>{this.props.label}</label> : null}
55
+ <label className={labelClasses} htmlFor={this.htmlId}>{this.props.label}</label>
53
56
 
54
57
  <select className='sd-input__select'
55
58
  id={this.htmlId}
package/app-typescript/components/Tag.tsx CHANGED
@@ -16,11 +16,11 @@ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick }: IProps)
16
16
  'tag-label--square': shape === 'square',
17
17
  });
18
18
  return (
19
- <div className={classes} key={keyValue}>
19
+ <span className={classes} key={keyValue}>
20
20
  {text}
21
21
  {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
22
22
  <i className='icon-close-small'></i>
23
23
  </button> : null}
24
- </div>
24
+ </span>
25
25
  );
26
26
  };
package/dist/examples.bundle.js CHANGED
@@ -61041,8 +61041,11 @@ var Input = /** @class */ (function (_super) {
61041
61041
  'sd-input--disabled': this.props.disabled,
61042
61042
  'sd-input--invalid': this.props.invalid || this.state.invalid,
61043
61043
  });
61044
+ var labelClasses = classnames_1.default('sd-input__label', {
61045
+ 'a11y-only': this.props.labelHidden,
61046
+ });
61044
61047
  return (React.createElement("div", { className: classes },
61045
- this.props.label ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label) : null,
61048
+ React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
61046
61049
  React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
61047
61050
  this.props.maxLength ?
61048
61051
  React.createElement("div", { className: 'sd-input__char-count' },
@@ -61132,9 +61135,11 @@ var Select = /** @class */ (function (_super) {
61132
61135
  'sd-input--disabled': this.props.disabled,
61133
61136
  'sd-input--invalid': this.props.invalid || this.state.invalid,
61134
61137
  });
61138
+ var labelClasses = classnames_1.default('sd-input__label', {
61139
+ 'a11y-only': this.props.labelHidden,
61140
+ });
61135
61141
  return (React.createElement("div", { className: classes },
61136
- this.props.label ?
61137
- React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
61142
+ React.createElement("label", { className: labelClasses, htmlFor: this.htmlId }, this.props.label),
61138
61143
  React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
61139
61144
  React.createElement("div", { className: 'sd-input__message-box' },
61140
61145
  this.props.info && !this.props.invalid && !this.state.invalid ?
@@ -72826,7 +72831,7 @@ exports.Tag = function (_a) {
72826
72831
  _b["tag-label--" + shade] = shade && shade !== 'light',
72827
72832
  _b['tag-label--square'] = shape === 'square',
72828
72833
  _b));
72829
- return (React.createElement("div", { className: classes, key: keyValue },
72834
+ return (React.createElement("span", { className: classes, key: keyValue },
72830
72835
  text,
72831
72836
  !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
72832
72837
  React.createElement("i", { className: 'icon-close-small' })) : null));
@@ -105011,7 +105016,7 @@ var InputsDoc = /** @class */ (function (_super) {
105011
105016
  React.createElement("p", { className: 'docs-page__paragraph' }),
105012
105017
  React.createElement(Markup.ReactMarkup, null,
105013
105018
  React.createElement(Markup.ReactMarkupPreview, null,
105014
- React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
105019
+ React.createElement("div", { className: 'docs-page__content-row' },
105015
105020
  React.createElement("div", { className: 'form__row' },
105016
105021
  React.createElement(app_typescript_1.CheckGroup, null,
105017
105022
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.required, label: { text: 'Required input' }, onChange: function (value) { _this.setState({ required: value }); } }),
@@ -105019,7 +105024,11 @@ var InputsDoc = /** @class */ (function (_super) {
105019
105024
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.invalid, label: { text: 'Invalid input' }, onChange: function (value) { _this.setState({ invalid: value }); } }),
105020
105025
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
105021
105026
  React.createElement("div", { className: 'form__row' },
105022
- React.createElement(app_typescript_1.Input, { label: 'Input label', value: 'This is some value', maxLength: 30, error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, onChange: function (value) { } })))),
105027
+ React.createElement(app_typescript_1.Input, { label: 'Input label', value: 'This is the value', maxLength: 30, error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, onChange: function (value) { } }))),
105028
+ React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
105029
+ React.createElement("p", { className: "docs-page__paragraph" }, "// Hidden label"),
105030
+ React.createElement("div", { className: 'form__row' },
105031
+ React.createElement(app_typescript_1.Input, { label: 'Hidden input label', value: 'Lorem ipsum input', maxLength: 30, error: 'This is an error message', info: 'This is a hint message', inlineLabel: true, labelHidden: true, required: false, disabled: false, invalid: false, onChange: function (value) { } })))),
105023
105032
  React.createElement(Markup.ReactMarkupCode, null, "\n <Input label='Input label'\n value='This is some value'\n maxLength={30}\n error='This is error message'\n info='This is some hint message'\n inlineLabel={false}\n required={true}\n disabled={false}\n invalid={false}\n onChange={(value) => {}} />\n ")),
105024
105033
  React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
105025
105034
  React.createElement(app_typescript_1.PropsList, null,
@@ -105029,6 +105038,7 @@ var InputsDoc = /** @class */ (function (_super) {
105029
105038
  React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Hint text' }),
105030
105039
  React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error text' }),
105031
105040
  React.createElement(app_typescript_1.Prop, { name: 'inlineLabel', isRequired: false, type: 'boolean', default: 'false', description: 'Position labels as inline' }),
105041
+ React.createElement(app_typescript_1.Prop, { name: 'labelHidden', isRequired: false, type: 'boolean', default: 'false', description: 'Hide the label. The label will still be accessible to screen-readers.' }),
105032
105042
  React.createElement(app_typescript_1.Prop, { name: 'required', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as required' }),
105033
105043
  React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as disabled' }),
105034
105044
  React.createElement(app_typescript_1.Prop, { name: 'invalid', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as invalid' }))));
@@ -105279,7 +105289,7 @@ var InputsDoc = /** @class */ (function (_super) {
105279
105289
  React.createElement("p", { className: 'docs-page__paragraph' }),
105280
105290
  React.createElement(Markup.ReactMarkup, null,
105281
105291
  React.createElement(Markup.ReactMarkupPreview, null,
105282
- React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
105292
+ React.createElement("div", { className: 'docs-page__content-row' },
105283
105293
  React.createElement("div", { className: 'form__row' },
105284
105294
  React.createElement(app_typescript_1.CheckGroup, null,
105285
105295
  React.createElement(app_typescript_1.Checkbox, { checked: this.state.required, label: { text: 'Required input' }, onChange: function (value) { _this.setState({ required: value }); } }),
@@ -105289,7 +105299,15 @@ var InputsDoc = /** @class */ (function (_super) {
105289
105299
  React.createElement("div", { className: 'form__row' },
105290
105300
  React.createElement(app_typescript_1.Select, { label: 'Select label', value: 'Option 2', error: 'This is error message', info: 'This is some hint message', inlineLabel: this.state.inlineLabel, required: this.state.required, disabled: this.state.disabled, invalid: this.state.invalid, onChange: function (value) { console.log(value); } },
105291
105301
  React.createElement(app_typescript_1.Option, null, "Option 1"),
105292
- React.createElement(app_typescript_1.Option, null, "Option 2"))))),
105302
+ React.createElement(app_typescript_1.Option, null, "Option 2")))),
105303
+ React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
105304
+ React.createElement("p", { className: "docs-page__paragraph" }, "// Hidden label"),
105305
+ React.createElement("div", { className: 'form__row' },
105306
+ React.createElement(app_typescript_1.Select, { label: 'Hidden select label', value: 'Option 1', error: 'Error message', info: 'This is a hint message', inlineLabel: true, labelHidden: true, required: false, disabled: false, invalid: this.state.invalid, onChange: function (value) { console.log(value); } },
105307
+ React.createElement(app_typescript_1.Option, null, "Option 1"),
105308
+ React.createElement(app_typescript_1.Option, null, "Option 2"),
105309
+ React.createElement(app_typescript_1.Option, null, "Option 3"),
105310
+ React.createElement(app_typescript_1.Option, null, "Option 4"))))),
105293
105311
  React.createElement(Markup.ReactMarkupCode, null, "\n <Select label='Select label'\n value='Option 2'\n error='This is error message'\n info='This is some hint message'\n inlineLabel={false}\n required={true}\n disabled={false}\n invalid={false}\n onChange={(value) => {}}>\n <Option value=\"option-1\">Option 1</option>\n <Option value=\"option-2\">Option 2</option>\n </Select>\n ")),
105294
105312
  React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
105295
105313
  React.createElement(app_typescript_1.PropsList, null,
@@ -105298,6 +105316,7 @@ var InputsDoc = /** @class */ (function (_super) {
105298
105316
  React.createElement(app_typescript_1.Prop, { name: 'info', isRequired: false, type: 'string', default: '/', description: 'Hint text' }),
105299
105317
  React.createElement(app_typescript_1.Prop, { name: 'error', isRequired: false, type: 'string', default: '/', description: 'Error text' }),
105300
105318
  React.createElement(app_typescript_1.Prop, { name: 'inlineLabel', isRequired: false, type: 'boolean', default: 'false', description: 'Position labels as inline' }),
105319
+ React.createElement(app_typescript_1.Prop, { name: 'labelHidden', isRequired: false, type: 'boolean', default: 'false', description: 'Hide the label. The label will still be accessible to screen-readers.' }),
105301
105320
  React.createElement(app_typescript_1.Prop, { name: 'required', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as required' }),
105302
105321
  React.createElement(app_typescript_1.Prop, { name: 'disabled', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as disabled' }),
105303
105322
  React.createElement(app_typescript_1.Prop, { name: 'invalid', isRequired: false, type: 'boolean', default: 'false', description: 'Mark field as invalid' }))));
@@ -111524,7 +111543,7 @@ exports.MenuDocs = MenuDocs;
111524
111543
  /* 480 */
111525
111544
  /***/ (function(module, exports) {
111526
111545
 
111527
- module.exports = {"name":"superdesk-ui-framework","version":"2.4.17","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc && npm run lint","build-ui":"webpack && tsc && npm run lint","lint":"eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","prepublish":"patch-package"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"^4.5.3","patch-package":"6.2.0","prismjs":"^1.17.1","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"^3.5.1","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-4","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","popper.js":"1.14.4","primeicons":"2.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3"}}
111546
+ module.exports = {"name":"superdesk-ui-framework","version":"2.4.18","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc && npm run lint","build-ui":"webpack && tsc && npm run lint","lint":"eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","prepublish":"patch-package"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"^4.5.3","patch-package":"6.2.0","prismjs":"^1.17.1","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"^3.5.1","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-4","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","popper.js":"1.14.4","primeicons":"2.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3"}}
111528
111547
 
111529
111548
  /***/ }),
111530
111549
  /* 481 */
package/dist/react/Inputs.tsx CHANGED
@@ -33,7 +33,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
33
33
  <p className='docs-page__paragraph'></p>
34
34
  <Markup.ReactMarkup>
35
35
  <Markup.ReactMarkupPreview>
36
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
36
+ <div className='docs-page__content-row'>
37
37
  <div className='form__row'>
38
38
  <CheckGroup>
39
39
  <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
@@ -45,7 +45,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
45
45
 
46
46
  <div className='form__row'>
47
47
  <Input label='Input label'
48
- value='This is some value'
48
+ value='This is the value'
49
49
  maxLength={30}
50
50
  error='This is error message'
51
51
  info='This is some hint message'
@@ -57,6 +57,23 @@ export default class InputsDoc extends React.Component<{}, IState> {
57
57
  </div>
58
58
  </div>
59
59
 
60
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
61
+ <p className="docs-page__paragraph">// Hidden label</p>
62
+ <div className='form__row'>
63
+ <Input label='Hidden input label'
64
+ value='Lorem ipsum input'
65
+ maxLength={30}
66
+ error='This is an error message'
67
+ info='This is a hint message'
68
+ inlineLabel={true}
69
+ labelHidden={true}
70
+ required={false}
71
+ disabled={false}
72
+ invalid={false}
73
+ onChange={(value) => {}} />
74
+ </div>
75
+ </div>
76
+
60
77
  </Markup.ReactMarkupPreview>
61
78
  <Markup.ReactMarkupCode>{`
62
79
  <Input label='Input label'
@@ -80,6 +97,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
80
97
  <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
81
98
  <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
82
99
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
100
+ <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
83
101
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
84
102
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
85
103
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
package/dist/react/Selects.tsx CHANGED
@@ -37,7 +37,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
37
37
  <p className='docs-page__paragraph'></p>
38
38
  <Markup.ReactMarkup>
39
39
  <Markup.ReactMarkupPreview>
40
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
40
+ <div className='docs-page__content-row'>
41
41
  <div className='form__row'>
42
42
  <CheckGroup>
43
43
  <Checkbox checked={this.state.required} label={{ text: 'Required input' }} onChange={(value) => { this.setState({ required: value }) }} />
@@ -63,6 +63,27 @@ export default class InputsDoc extends React.Component<{}, IState> {
63
63
  </div>
64
64
  </div>
65
65
 
66
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
67
+ <p className="docs-page__paragraph">// Hidden label</p>
68
+ <div className='form__row'>
69
+ <Select label='Hidden select label'
70
+ value='Option 1'
71
+ error='Error message'
72
+ info='This is a hint message'
73
+ inlineLabel={true}
74
+ labelHidden={true}
75
+ required={false}
76
+ disabled={false}
77
+ invalid={this.state.invalid}
78
+ onChange={(value) => { console.log(value) }}>
79
+ <Option>Option 1</Option>
80
+ <Option>Option 2</Option>
81
+ <Option>Option 3</Option>
82
+ <Option>Option 4</Option>
83
+ </Select>
84
+ </div>
85
+ </div>
86
+
66
87
  </Markup.ReactMarkupPreview>
67
88
  <Markup.ReactMarkupCode>{`
68
89
  <Select label='Select label'
@@ -87,6 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
87
108
  <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
88
109
  <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
89
110
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
111
+ <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
90
112
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
91
113
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
92
114
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
package/dist/superdesk-ui.bundle.css CHANGED
@@ -19092,12 +19092,13 @@ tags-input {
19092
19092
  opacity: 1 !important; }
19093
19093
 
19094
19094
  .a11y-only {
19095
- position: absolute;
19095
+ position: absolute !important;
19096
19096
  top: 0;
19097
19097
  z-index: -1;
19098
19098
  pointer-events: none;
19099
19099
  opacity: 0;
19100
- height: 1px;
19100
+ height: 1px !important;
19101
+ width: 1px !important;
19101
19102
  overflow: hidden; }
19102
19103
 
19103
19104
  .sd-popover {
package/dist/superdesk-ui.bundle.js CHANGED
@@ -60284,8 +60284,11 @@ var Input = /** @class */ (function (_super) {
60284
60284
  'sd-input--disabled': this.props.disabled,
60285
60285
  'sd-input--invalid': this.props.invalid || this.state.invalid,
60286
60286
  });
60287
+ var labelClasses = classnames_1.default('sd-input__label', {
60288
+ 'a11y-only': this.props.labelHidden,
60289
+ });
60287
60290
  return (React.createElement("div", { className: classes },
60288
- this.props.label ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label) : null,
60291
+ React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
60289
60292
  React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
60290
60293
  this.props.maxLength ?
60291
60294
  React.createElement("div", { className: 'sd-input__char-count' },
@@ -60375,9 +60378,11 @@ var Select = /** @class */ (function (_super) {
60375
60378
  'sd-input--disabled': this.props.disabled,
60376
60379
  'sd-input--invalid': this.props.invalid || this.state.invalid,
60377
60380
  });
60381
+ var labelClasses = classnames_1.default('sd-input__label', {
60382
+ 'a11y-only': this.props.labelHidden,
60383
+ });
60378
60384
  return (React.createElement("div", { className: classes },
60379
- this.props.label ?
60380
- React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
60385
+ React.createElement("label", { className: labelClasses, htmlFor: this.htmlId }, this.props.label),
60381
60386
  React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
60382
60387
  React.createElement("div", { className: 'sd-input__message-box' },
60383
60388
  this.props.info && !this.props.invalid && !this.state.invalid ?
@@ -72069,7 +72074,7 @@ exports.Tag = function (_a) {
72069
72074
  _b["tag-label--" + shade] = shade && shade !== 'light',
72070
72075
  _b['tag-label--square'] = shape === 'square',
72071
72076
  _b));
72072
- return (React.createElement("div", { className: classes, key: keyValue },
72077
+ return (React.createElement("span", { className: classes, key: keyValue },
72073
72078
  text,
72074
72079
  !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
72075
72080
  React.createElement("i", { className: 'icon-close-small' })) : null));
package/examples/pages/react/Inputs.tsx CHANGED
@@ -33,7 +33,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
33
33
  <p className='docs-page__paragraph'></p>
34
34
  <Markup.ReactMarkup>
35
35
  <Markup.ReactMarkupPreview>
36
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
36
+ <div className='docs-page__content-row'>
37
37
  <div className='form__row'>
38
38
  <CheckGroup>
39
39
  <Checkbox checked={this.state.required} label={{text:'Required input'}} onChange={(value) => {this.setState({required: value})}} />
@@ -45,7 +45,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
45
45
 
46
46
  <div className='form__row'>
47
47
  <Input label='Input label'
48
- value='This is some value'
48
+ value='This is the value'
49
49
  maxLength={30}
50
50
  error='This is error message'
51
51
  info='This is some hint message'
@@ -57,6 +57,23 @@ export default class InputsDoc extends React.Component<{}, IState> {
57
57
  </div>
58
58
  </div>
59
59
 
60
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
61
+ <p className="docs-page__paragraph">// Hidden label</p>
62
+ <div className='form__row'>
63
+ <Input label='Hidden input label'
64
+ value='Lorem ipsum input'
65
+ maxLength={30}
66
+ error='This is an error message'
67
+ info='This is a hint message'
68
+ inlineLabel={true}
69
+ labelHidden={true}
70
+ required={false}
71
+ disabled={false}
72
+ invalid={false}
73
+ onChange={(value) => {}} />
74
+ </div>
75
+ </div>
76
+
60
77
  </Markup.ReactMarkupPreview>
61
78
  <Markup.ReactMarkupCode>{`
62
79
  <Input label='Input label'
@@ -80,6 +97,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
80
97
  <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
81
98
  <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
82
99
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
100
+ <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
83
101
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
84
102
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
85
103
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
package/examples/pages/react/Selects.tsx CHANGED
@@ -37,7 +37,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
37
37
  <p className='docs-page__paragraph'></p>
38
38
  <Markup.ReactMarkup>
39
39
  <Markup.ReactMarkupPreview>
40
- <div className='docs-page__content-row docs-page__content-row--no-margin'>
40
+ <div className='docs-page__content-row'>
41
41
  <div className='form__row'>
42
42
  <CheckGroup>
43
43
  <Checkbox checked={this.state.required} label={{ text: 'Required input' }} onChange={(value) => { this.setState({ required: value }) }} />
@@ -63,6 +63,27 @@ export default class InputsDoc extends React.Component<{}, IState> {
63
63
  </div>
64
64
  </div>
65
65
 
66
+ <div className='docs-page__content-row docs-page__content-row--no-margin'>
67
+ <p className="docs-page__paragraph">// Hidden label</p>
68
+ <div className='form__row'>
69
+ <Select label='Hidden select label'
70
+ value='Option 1'
71
+ error='Error message'
72
+ info='This is a hint message'
73
+ inlineLabel={true}
74
+ labelHidden={true}
75
+ required={false}
76
+ disabled={false}
77
+ invalid={this.state.invalid}
78
+ onChange={(value) => { console.log(value) }}>
79
+ <Option>Option 1</Option>
80
+ <Option>Option 2</Option>
81
+ <Option>Option 3</Option>
82
+ <Option>Option 4</Option>
83
+ </Select>
84
+ </div>
85
+ </div>
86
+
66
87
  </Markup.ReactMarkupPreview>
67
88
  <Markup.ReactMarkupCode>{`
68
89
  <Select label='Select label'
@@ -87,6 +108,7 @@ export default class InputsDoc extends React.Component<{}, IState> {
87
108
  <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
88
109
  <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
89
110
  <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
111
+ <Prop name='labelHidden' isRequired={false} type='boolean' default='false' description='Hide the label. The label will still be accessible to screen-readers.'/>
90
112
  <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required' />
91
113
  <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
92
114
  <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "2.4.17",
3
+ "version": "2.4.18",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Input.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  interface IProps {
3
3
  value?: string;
4
- label?: string;
4
+ label: string;
5
5
  maxLength?: number;
6
6
  info?: string;
7
7
  error?: string;
@@ -9,6 +9,7 @@ interface IProps {
9
9
  disabled?: boolean;
10
10
  invalid?: boolean;
11
11
  inlineLabel?: boolean;
12
+ labelHidden?: boolean;
12
13
  onChange(newValue: string): void;
13
14
  }
14
15
  interface IState {
package/react/components/Input.js CHANGED
@@ -66,8 +66,11 @@ var Input = /** @class */ (function (_super) {
66
66
  'sd-input--disabled': this.props.disabled,
67
67
  'sd-input--invalid': this.props.invalid || this.state.invalid,
68
68
  });
69
+ var labelClasses = classnames_1.default('sd-input__label', {
70
+ 'a11y-only': this.props.labelHidden,
71
+ });
69
72
  return (React.createElement("div", { className: classes },
70
- this.props.label ? React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label) : null,
73
+ React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label' }, this.props.label),
71
74
  React.createElement("input", { className: 'sd-input__input', type: 'text', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId + 'label', onChange: this.handleChange, disabled: this.props.disabled }),
72
75
  this.props.maxLength ?
73
76
  React.createElement("div", { className: 'sd-input__char-count' },
package/react/components/Select.d.ts CHANGED
@@ -1,13 +1,14 @@
1
1
  import * as React from 'react';
2
2
  interface ISelect {
3
3
  value?: string;
4
- label?: string;
4
+ label: string;
5
5
  info?: string;
6
6
  error?: string;
7
7
  required?: boolean;
8
8
  disabled?: boolean;
9
9
  invalid?: boolean;
10
10
  inlineLabel?: boolean;
11
+ labelHidden?: boolean;
11
12
  onChange(newValue: string): void;
12
13
  }
13
14
  interface IState {
package/react/components/Select.js CHANGED
@@ -63,9 +63,11 @@ var Select = /** @class */ (function (_super) {
63
63
  'sd-input--disabled': this.props.disabled,
64
64
  'sd-input--invalid': this.props.invalid || this.state.invalid,
65
65
  });
66
+ var labelClasses = classnames_1.default('sd-input__label', {
67
+ 'a11y-only': this.props.labelHidden,
68
+ });
66
69
  return (React.createElement("div", { className: classes },
67
- this.props.label ?
68
- React.createElement("label", { className: 'sd-input__label', htmlFor: this.htmlId }, this.props.label) : null,
70
+ React.createElement("label", { className: labelClasses, htmlFor: this.htmlId }, this.props.label),
69
71
  React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-label": this.props.label, "aria-describedby": this.htmlId, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
70
72
  React.createElement("div", { className: 'sd-input__message-box' },
71
73
  this.props.info && !this.props.invalid && !this.state.invalid ?
package/react/components/Tag.js CHANGED
@@ -32,7 +32,7 @@ exports.Tag = function (_a) {
32
32
  _b["tag-label--" + shade] = shade && shade !== 'light',
33
33
  _b['tag-label--square'] = shape === 'square',
34
34
  _b));
35
- return (React.createElement("div", { className: classes, key: keyValue },
35
+ return (React.createElement("span", { className: classes, key: keyValue },
36
36
  text,
37
37
  !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
38
38
  React.createElement("i", { className: 'icon-close-small' })) : null));