@ausbom/form 0.4.29 → 0.4.31

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.
@@ -1 +1 @@
1
- "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _RadioSelected=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/RadioSelected24"));var _RadioUnselected=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/RadioUnselected24"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Radio=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Radio,_React$PureComponent);var _super=_createSuper(Radio);function Radio(){(0,_classCallCheck2["default"])(this,Radio);return _super.apply(this,arguments)}(0,_createClass2["default"])(Radio,[{key:"render",value:function render(){var _ref=this.props,id=_ref.id,className=_ref.className,innerRef=_ref.innerRef,label=_ref.label,restProps=(0,_objectWithoutProperties2["default"])(_ref,["id","className","innerRef","label"]);var classes=(0,_classnames["default"])(className,"bom-form-radio");return/*#__PURE__*/_react["default"].createElement("div",{className:classes},/*#__PURE__*/_react["default"].createElement("input",(0,_extends2["default"])({className:"bom-form-radio__input","data-testid":"bom-radio-input",id:id,type:"radio",ref:innerRef},restProps)),/*#__PURE__*/_react["default"].createElement("label",{className:"bom-form-radio__label","data-testid":"bom-radio-label",htmlFor:id},/*#__PURE__*/_react["default"].createElement("span",{className:"bom-form-radio-focus"},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{"aria-hidden":true,className:"bom-form-radio-icon bom-form-radio-icon--checked",icon:_RadioSelected["default"],size:24}),/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{"aria-hidden":true,className:"bom-form-radio-icon bom-form-radio-icon--unchecked",icon:_RadioUnselected["default"],size:24})),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-form-radio__label-text"},label)))}}]);return Radio}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Radio,"defaultProps",{});var RadioWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(Radio,(0,_extends2["default"])({innerRef:ref},props))});RadioWithRef.displayName="Radio";var _default=RadioWithRef;exports["default"]=_default;
1
+ "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Radio=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Radio,_React$PureComponent);var _super=_createSuper(Radio);function Radio(){(0,_classCallCheck2["default"])(this,Radio);return _super.apply(this,arguments)}(0,_createClass2["default"])(Radio,[{key:"render",value:function render(){var _ref=this.props,id=_ref.id,className=_ref.className,innerRef=_ref.innerRef,label=_ref.label,restProps=(0,_objectWithoutProperties2["default"])(_ref,["id","className","innerRef","label"]);var classes=(0,_classnames["default"])(className,"bom-form-radio",{"bom-form-radio--disabled":restProps.disabled});return/*#__PURE__*/_react["default"].createElement("label",{className:classes},/*#__PURE__*/_react["default"].createElement("input",(0,_extends2["default"])({"data-testid":"bom-radio-input",id:id,type:"radio",ref:innerRef},restProps)),label)}}]);return Radio}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Radio,"defaultProps",{});var RadioWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(Radio,(0,_extends2["default"])({innerRef:ref},props))});RadioWithRef.displayName="Radio";var _default=RadioWithRef;exports["default"]=_default;
@@ -3,53 +3,103 @@
3
3
 
4
4
  .bom-form-radio {
5
5
  display: flex;
6
- }
6
+ align-items: center;
7
+ padding: 2px 0;
8
+ cursor: pointer;
7
9
 
8
- .bom-form-radio__input {
9
- @include visuallyhidden();
10
- }
10
+ @include bom-type-scale($size: 'type-14', $line: 'paragraph');
11
11
 
12
- .bom-form-radio-focus {
13
- display: block;
14
- border: 2px solid transparent;
15
- border-radius: 50%;
16
- margin-left: -2px;
17
- }
12
+ &--disabled {
13
+ opacity: 0.6;
14
+ cursor: not-allowed;
15
+ }
18
16
 
19
- .bom-form-radio__label {
20
- cursor: pointer;
21
- display: inline-flex;
17
+ input[type="radio"]:disabled {
18
+ cursor: not-allowed;
19
+ }
22
20
 
23
- .bom-form-radio-icon--checked {
24
- display: none;
21
+ input[type="radio"] {
22
+ appearance: none;
23
+ background-color: get-palette-color('neutral.white');
24
+ margin: 0;
25
+ margin-right: 14px;
26
+ cursor: pointer;
27
+ color: get-palette-color('neutral.charcoalDark');
28
+ width: 24px;
29
+ height: 24px;
30
+ border: 1px solid get-palette-color('neutral.charcoalDark');
31
+ border-radius: 50%;
32
+ display: grid;
33
+ place-content: center;
25
34
  }
26
- }
27
35
 
28
- .bom-form-radio__input:checked + .bom-form-radio__label {
29
- .bom-form-radio-icon--checked {
30
- display: block;
36
+ input[type="radio"]::before {
37
+ content: "";
38
+ width: 12px;
39
+ height: 12px;
40
+ border-radius: 50%;
41
+ transform: scale(0);
42
+ transition: 120ms transform ease-in-out;
43
+ box-shadow: inset 16px 16px get-palette-color('neutral.charcoalDark');
31
44
  }
32
45
 
33
- .bom-form-radio-icon--unchecked {
34
- display: none;
46
+ input[type="radio"]:checked::before {
47
+ transform: scale(1);
48
+ }
49
+
50
+ input[type="radio"]:focus {
51
+ outline: max(2px, 2.4px) solid get-palette-color('secondary.focusBlue');
52
+ outline-offset: max(2px, 2.4px);
53
+ }
54
+
55
+ // NOTE: These styles have been retained for backwards compatibility with older versions of the radio button component
56
+ .bom-form-radio__input {
57
+ @include visuallyhidden();
35
58
  }
36
- }
37
59
 
38
- .bom-form-radio__input:focus + .bom-form-radio__label {
39
60
  .bom-form-radio-focus {
40
- box-shadow: 0 0 0 2px get-palette-color('secondary.focusBlue');
41
- height: 28px;
61
+ display: block;
62
+ border: 2px solid transparent;
63
+ border-radius: 50%;
64
+ margin-left: -2px;
42
65
  }
43
- }
44
66
 
45
- .bom-form-radio__input:disabled + .bom-form-radio__label {
46
- cursor: not-allowed;
47
- opacity: 0.6;
48
- }
67
+ .bom-form-radio__label {
68
+ cursor: pointer;
69
+ display: inline-flex;
49
70
 
50
- .bom-form-radio__label-text {
51
- margin-left: 12px;
52
- margin-top: 2px;
71
+ .bom-form-radio-icon--checked {
72
+ display: none;
73
+ }
74
+ }
53
75
 
54
- @include bom-type-scale($size: 'type-14', $line: 'paragraph');
76
+ .bom-form-radio__input:checked + .bom-form-radio__label {
77
+ .bom-form-radio-icon--checked {
78
+ display: block;
79
+ }
80
+
81
+ .bom-form-radio-icon--unchecked {
82
+ display: none;
83
+ }
84
+ }
85
+
86
+ .bom-form-radio__input:focus + .bom-form-radio__label {
87
+ .bom-form-radio-focus {
88
+ box-shadow: 0 0 0 2px get-palette-color('secondary.focusBlue');
89
+ height: 28px;
90
+ }
91
+ }
92
+
93
+ .bom-form-radio__input:disabled + .bom-form-radio__label {
94
+ cursor: not-allowed;
95
+ opacity: 0.6;
96
+ }
97
+
98
+ .bom-form-radio__label-text {
99
+ margin-left: 12px;
100
+ margin-top: 2px;
101
+
102
+ @include bom-type-scale($size: 'type-14', $line: 'paragraph');
103
+ }
104
+ // END NOTE
55
105
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ausbom/form",
3
- "version": "0.4.29",
3
+ "version": "0.4.31",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "",
@@ -42,5 +42,5 @@
42
42
  "@ausbom/icon": "^0.19.1",
43
43
  "@ausbom/styles": "^0.12.0"
44
44
  },
45
- "gitHead": "49de099637a56e5bd4cba2e6c9060a41b5fb0544"
45
+ "gitHead": "834040533dcace9396d4cad533d77eb1f18b2b4c"
46
46
  }