@citygross/components 0.16.9 → 0.16.11

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 (14) hide show
  1. package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts +1 -0
  2. package/build/cjs/components/src/components/AddressBlock/AddressBlock.js +1 -1
  3. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js +4 -5
  4. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js.map +1 -1
  5. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js +3 -1
  6. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
  7. package/build/cjs/components/src/components/RadioListItem/RadioListItem.js +1 -1
  8. package/build/es/components/src/components/AddressBlock/AddressBlock.js +1 -1
  9. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js +6 -7
  10. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js.map +1 -1
  11. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js +3 -2
  12. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
  13. package/build/es/components/src/components/RadioListItem/RadioListItem.js +1 -1
  14. package/package.json +2 -2
package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts CHANGED
@@ -2,3 +2,4 @@ import type { TCheckbox } from './Checkbox';
2
2
  import type { TOptionInputContainer } from '../FormElement.types';
3
3
  export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOptionInputContainer & Pick<TCheckbox, "alignItems">, never>;
4
4
  export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
+ export declare const CheckboxInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
package/build/cjs/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -47,11 +47,11 @@ require('../Flex/Flex.styles.js');
47
47
  require('../Form/Form.styles.js');
48
48
  require('../FormControl/FormControl.js');
49
49
  require('../FormElements/FormElement.types.js');
50
- require('../ScreenReader/ScreenReader.styles.js');
51
50
  require('../FormElements/FormElement.styles.js');
52
51
  require('../FormElements/Checkbox/Checkbox.styles.js');
53
52
  require('../FormElements/Input/Input.js');
54
53
  require('../FormElements/InputOld/InputOld.styles.js');
54
+ require('../ScreenReader/ScreenReader.styles.js');
55
55
  require('../FormElements/Radio/Radio.styles.js');
56
56
  require('../FormElements/Select/Select.styles.js');
57
57
  require('../FormElements/Switch/Switch.styles.js');
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -7,7 +7,6 @@ var React = require('react');
7
7
  var icons = require('@citygross/icons');
8
8
  var typography = require('@citygross/typography');
9
9
  var formElement = require('../../../helpers/form-element.js');
10
- var ScreenReader = require('../../ScreenReader/ScreenReader.js');
11
10
  var FormElement_styles = require('../FormElement.styles.js');
12
11
  var Checkbox_styles = require('./Checkbox.styles.js');
13
12
 
@@ -19,11 +18,11 @@ var Checkbox = function (_a) {
19
18
  var alignItems = _a.alignItems, checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = _tslib.__rest(_a, ["alignItems", "checked", "disabled", "hideLabel", "label"]);
20
19
  var _b = formElement.getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = _tslib.__rest(_b, ["iconColor", "labelColor"]);
21
20
  return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
22
- React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
23
- React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { attributes: attributes, alignItems: alignItems },
21
+ React__default["default"].createElement(Checkbox_styles.CheckboxInput, _tslib.__assign({ "aria-label": label, checked: checked, disabled: disabled, type: "checkbox" }, props)),
22
+ React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { "aria-hidden": "true", attributes: attributes, alignItems: alignItems },
24
23
  React__default["default"].createElement(Checkbox_styles.IconContainer, null,
25
- React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor, "aria-hidden": "true" }))),
26
- hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(typography.BodyText, { color: labelColor }, label))));
24
+ React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor }))),
25
+ !hideLabel && (React__default["default"].createElement(typography.BodyText, { "aria-hidden": "true", color: labelColor }, label))));
27
26
  };
28
27
 
29
28
  exports.Checkbox = Checkbox;
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js CHANGED
@@ -38,8 +38,10 @@ var CheckboxContainer = styled__default["default"].div(templateObject_2 || (temp
38
38
  return styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "], ["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, FormElement_styles.OptionInputWrapper);
39
39
  });
40
40
  var IconContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"])));
41
- var templateObject_1, templateObject_2, templateObject_3;
41
+ var CheckboxInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n"], ["\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n"])));
42
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
42
43
 
43
44
  exports.CheckboxContainer = CheckboxContainer;
45
+ exports.CheckboxInput = CheckboxInput;
44
46
  exports.IconContainer = IconContainer;
45
47
  //# sourceMappingURL=Checkbox.styles.js.map
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  function RadioListItem(_a) {
14
14
  var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
15
15
  var defaultTabIndex = isDisabled ? -1 : selected ? 0 : -1;
16
- return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return utils.selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
16
+ return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return utils.selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
17
17
  React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
18
18
  React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
19
19
  React__default["default"].createElement(RadioListItem_styles.LabelContentWrapper, null,
package/build/es/components/src/components/AddressBlock/AddressBlock.js CHANGED
@@ -43,11 +43,11 @@ import '../Flex/Flex.styles.js';
43
43
  import '../Form/Form.styles.js';
44
44
  import '../FormControl/FormControl.js';
45
45
  import '../FormElements/FormElement.types.js';
46
- import '../ScreenReader/ScreenReader.styles.js';
47
46
  import '../FormElements/FormElement.styles.js';
48
47
  import '../FormElements/Checkbox/Checkbox.styles.js';
49
48
  import '../FormElements/Input/Input.js';
50
49
  import '../FormElements/InputOld/InputOld.styles.js';
50
+ import '../ScreenReader/ScreenReader.styles.js';
51
51
  import '../FormElements/Radio/Radio.styles.js';
52
52
  import '../FormElements/Select/Select.styles.js';
53
53
  import '../FormElements/Switch/Switch.styles.js';
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -3,19 +3,18 @@ import React from 'react';
3
3
  import { Icons } from '@citygross/icons';
4
4
  import { BodyText } from '@citygross/typography';
5
5
  import { getColorAttributes } from '../../../helpers/form-element.js';
6
- import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
7
- import { OptionInputWrapper, HiddenInput } from '../FormElement.styles.js';
8
- import { CheckboxContainer, IconContainer } from './Checkbox.styles.js';
6
+ import { OptionInputWrapper } from '../FormElement.styles.js';
7
+ import { CheckboxInput, CheckboxContainer, IconContainer } from './Checkbox.styles.js';
9
8
 
10
9
  var Checkbox = function (_a) {
11
10
  var alignItems = _a.alignItems, checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = __rest(_a, ["alignItems", "checked", "disabled", "hideLabel", "label"]);
12
11
  var _b = getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = __rest(_b, ["iconColor", "labelColor"]);
13
12
  return (React.createElement(OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
14
- React.createElement(HiddenInput, __assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
15
- React.createElement(CheckboxContainer, { attributes: attributes, alignItems: alignItems },
13
+ React.createElement(CheckboxInput, __assign({ "aria-label": label, checked: checked, disabled: disabled, type: "checkbox" }, props)),
14
+ React.createElement(CheckboxContainer, { "aria-hidden": "true", attributes: attributes, alignItems: alignItems },
16
15
  React.createElement(IconContainer, null,
17
- React.createElement(Icons.CheckMark, { color: iconColor, "aria-hidden": "true" }))),
18
- hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor }, label))));
16
+ React.createElement(Icons.CheckMark, { color: iconColor }))),
17
+ !hideLabel && (React.createElement(BodyText, { "aria-hidden": "true", color: labelColor }, label))));
19
18
  };
20
19
 
21
20
  export { Checkbox };
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js CHANGED
@@ -30,7 +30,8 @@ var CheckboxContainer = styled.div(templateObject_2 || (templateObject_2 = __mak
30
30
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "], ["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, OptionInputWrapper);
31
31
  });
32
32
  var IconContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"])));
33
- var templateObject_1, templateObject_2, templateObject_3;
33
+ var CheckboxInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n"], ["\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n"])));
34
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
34
35
 
35
- export { CheckboxContainer, IconContainer };
36
+ export { CheckboxContainer, CheckboxInput, IconContainer };
36
37
  //# sourceMappingURL=Checkbox.styles.js.map
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/RadioListItem/RadioListItem.js CHANGED
@@ -5,7 +5,7 @@ import { selectKeyboardEventHandler } from '@citygross/utils';
5
5
  function RadioListItem(_a) {
6
6
  var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, tabIndex = _a.tabIndex, onFocus = _a.onFocus, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown;
7
7
  var defaultTabIndex = isDisabled ? -1 : selected ? 0 : -1;
8
- return (React.createElement(BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
8
+ return (React.createElement(BaseRadioListItemContainer, { tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : defaultTabIndex, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onFocus: onFocus, onBlur: onBlur, onKeyDown: function (event) { return selectKeyboardEventHandler({ event: event, isDisabled: isDisabled, onClick: onClick, value: value, onKeyDown: onKeyDown }); } },
9
9
  React.createElement(RadioFlex, { wrapMobile: wrapMobile },
10
10
  React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
11
11
  React.createElement(LabelContentWrapper, null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.16.9",
3
+ "version": "0.16.11",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
75
75
  "react-slick": "^0.30.1",
76
76
  "slick-carousel": "^1.8.1"
77
77
  },
78
- "gitHead": "f6af57ad43e1cc8676aa12961b9f69749d99b9f9"
78
+ "gitHead": "f4b3df2cb8f60117b69784a990336d28e8570817"
79
79
  }