dibk-design 1.1.9 → 1.1.10

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 (11) hide show
  1. package/dist/components/CheckBoxInput.md +36 -36
  2. package/dist/components/CheckBoxList.js +11 -2
  3. package/dist/components/CheckBoxList.md +28 -0
  4. package/dist/components/CheckBoxList.module.scss +14 -2
  5. package/dist/components/CheckBoxListItem.js +1 -1
  6. package/dist/components/RadioButtonInput.md +8 -8
  7. package/dist/components/RadioButtonList.js +11 -2
  8. package/dist/components/RadioButtonList.md +29 -0
  9. package/dist/components/RadioButtonList.module.scss +14 -2
  10. package/dist/components/RadioButtonListItem.js +1 -1
  11. package/package.json +1 -1
package/dist/components/CheckBoxInput.md CHANGED
@@ -2,24 +2,24 @@ Checkbox input example:
2
2
 
3
3
  ```js
4
4
  <div className="flex">
5
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
6
- <span>Label for checked checkbox</span>
7
- </CheckBoxInput>
8
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
9
- <span>Label for checked disabled checkbox</span>
10
- </CheckBoxInput>
11
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
12
- <span>Label for unchecked checkbox</span>
13
- </CheckBoxInput>
14
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
15
- <span>Checked checkbox with content only</span>
16
- </CheckBoxInput>
17
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
18
- <span>Unchecked checkbox with content only</span>
19
- </CheckBoxInput>
20
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
21
- <span>Label for checked checkbox with custom checkmark</span>
22
- </CheckBoxInput>
5
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
6
+ Label for checked checkbox
7
+ </CheckBoxInput>
8
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
9
+ Label for checked disabled checkbox
10
+ </CheckBoxInput>
11
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
12
+ Label for unchecked checkbox
13
+ </CheckBoxInput>
14
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
15
+ Checked checkbox with content only
16
+ </CheckBoxInput>
17
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
18
+ Unchecked checkbox with content only
19
+ </CheckBoxInput>
20
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
21
+ Label for checked checkbox with custom checkmark
22
+ </CheckBoxInput>
23
23
  </div>
24
24
  ```
25
25
 
@@ -29,23 +29,23 @@ Themed Checkbox input example:
29
29
  ```js
30
30
  import customTheme from 'data/customTheme';
31
31
  <div className="flex">
32
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
33
- <span>Label for checked checkbox</span>
34
- </CheckBoxInput>
35
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
36
- <span>Label for checked disabled checkbox</span>
37
- </CheckBoxInput>
38
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
39
- <span>Label for unchecked checkbox</span>
40
- </CheckBoxInput>
41
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
42
- <span>Checked checkbox with content only</span>
43
- </CheckBoxInput>
44
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
45
- <span>Unchecked checkbox with content only</span>
46
- </CheckBoxInput>
47
- <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
48
- <span>Label for checked checkbox with custom checkmark</span>
49
- </CheckBoxInput>
32
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
33
+ Label for checked checkbox
34
+ </CheckBoxInput>
35
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
36
+ Label for checked disabled checkbox
37
+ </CheckBoxInput>
38
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
39
+ Label for unchecked checkbox
40
+ </CheckBoxInput>
41
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
42
+ Checked checkbox with content only
43
+ </CheckBoxInput>
44
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
45
+ Unchecked checkbox with content only
46
+ </CheckBoxInput>
47
+ <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
48
+ Label for checked checkbox with custom checkmark
49
+ </CheckBoxInput>
50
50
  </div>
51
51
  ```
package/dist/components/CheckBoxList.js CHANGED
@@ -7,15 +7,24 @@ exports.default = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
10
12
  var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
11
13
 
12
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
15
 
16
+ // Dependencies
17
+ // Stylesheets
14
18
  var CheckBoxList = function CheckBoxList(props) {
15
- return /*#__PURE__*/_react.default.createElement("ul", {
19
+ var _props$legend;
20
+
21
+ return /*#__PURE__*/_react.default.createElement("fieldset", {
16
22
  className: _CheckBoxListModule.default.checkBoxList
17
- }, props.children);
23
+ }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? /*#__PURE__*/_react.default.createElement("legend", null, props.legend) : null, props.children);
18
24
  };
19
25
 
26
+ CheckBoxList.propTypes = {
27
+ legend: _propTypes.default.string
28
+ };
20
29
  var _default = CheckBoxList;
21
30
  exports.default = _default;
package/dist/components/CheckBoxList.md CHANGED
@@ -24,3 +24,31 @@ import CheckBoxListItem from "lib/components/CheckBoxListItem";
24
24
  </CheckBoxListItem>
25
25
  </CheckBoxList>;
26
26
  ```
27
+
28
+
29
+ Ordered List with legend example:
30
+
31
+ ```js
32
+ import CheckBoxListItem from "lib/components/CheckBoxListItem";
33
+ <CheckBoxList legend="Checkbox list legend">
34
+ <CheckBoxListItem
35
+ onChange={() => {
36
+ console.log("onchange");
37
+ }}
38
+ checked={true}
39
+ name="checkboxlist-with-legend"
40
+ id="checkboxListWithLegend-listItem-1"
41
+ >
42
+ Label for checked checkbox
43
+ </CheckBoxListItem>
44
+ <CheckBoxListItem
45
+ onChange={() => {
46
+ console.log("onchange");
47
+ }}
48
+ name="checkboxlist-with-legend"
49
+ id="checkboxListWithLegend-listItem-2"
50
+ >
51
+ Label for unchecked checkbox
52
+ </CheckBoxListItem>
53
+ </CheckBoxList>;
54
+ ```
package/dist/components/CheckBoxList.module.scss CHANGED
@@ -1,5 +1,17 @@
1
- :local(.checkBoxList) {
1
+ @import "../style/global.scss";
2
+
3
+ :local(fieldset.checkBoxList) {
2
4
  margin: 0;
3
5
  padding: 0;
4
- list-style: none;
6
+ border: none;
7
+ :local(legend) {
8
+ color: #000;
9
+ display: block;
10
+ font-size: 1rem;
11
+ font-weight: bold;
12
+ line-height: 1.2;
13
+ margin-bottom: 2px;
14
+ font-family: $default-font;
15
+ overflow-wrap: break-word;
16
+ }
5
17
  }
package/dist/components/CheckBoxListItem.js CHANGED
@@ -34,7 +34,7 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
34
34
  theme: props.theme,
35
35
  checkmarkCharacter: props.checkmarkCharacter
36
36
  };
37
- return /*#__PURE__*/_react.default.createElement("li", {
37
+ return /*#__PURE__*/_react.default.createElement("div", {
38
38
  className: listItemClassNameString
39
39
  }, /*#__PURE__*/_react.default.createElement(_CheckBoxInput.default, inputProps, props.children));
40
40
  };
package/dist/components/RadioButtonInput.md CHANGED
@@ -2,10 +2,10 @@ Radio button input example:
2
2
 
3
3
  ```js
4
4
  <div className="flex">
5
- <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-1" checked={true}><span>Checked radio button</span></RadioButtonInput>
6
- <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2"><span>Unchecked radio button</span></RadioButtonInput>
7
- <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-3" checked={true} disabled={true}><span>Checked disabled radio button</span></RadioButtonInput>
8
- <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" disabled={true}><span>Unchecked disabled radio button</span></RadioButtonInput>
5
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-1" checked={true}>Checked radio button</RadioButtonInput>
6
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2">Unchecked radio button</RadioButtonInput>
7
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-3" checked={true} disabled={true}>Checked disabled radio button</RadioButtonInput>
8
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" disabled={true}>Unchecked disabled radio button</RadioButtonInput>
9
9
  </div>
10
10
  ```
11
11
 
@@ -15,16 +15,16 @@ Themed Radio button input example:
15
15
  import customTheme from 'data/customTheme';
16
16
  <div className="flex">
17
17
  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-1" checked={true} theme={customTheme}>
18
- <span>Checked radio button</span>
18
+ Checked radio button
19
19
  </RadioButtonInput>
20
20
  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-2" theme={customTheme}>
21
- <span>Unchecked radio button</span>
21
+ Unchecked radio button
22
22
  </RadioButtonInput>
23
23
  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-3" checked={true} theme={customTheme} disabled={true}>
24
- <span>Checked disabled radio button</span>
24
+ Checked disabled radio button
25
25
  </RadioButtonInput>
26
26
  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-4" theme={customTheme} disabled={true}>
27
- <span>Unchecked disabled radio button</span>
27
+ Unchecked disabled radio button
28
28
  </RadioButtonInput>
29
29
  </div>
30
30
  ```
package/dist/components/RadioButtonList.js CHANGED
@@ -7,15 +7,24 @@ exports.default = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
10
12
  var _RadioButtonListModule = _interopRequireDefault(require("./RadioButtonList.module.scss"));
11
13
 
12
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
15
 
16
+ // Dependencies
17
+ // Stylesheets
14
18
  var RadioButtonList = function RadioButtonList(props) {
15
- return /*#__PURE__*/_react.default.createElement("ul", {
19
+ var _props$legend;
20
+
21
+ return /*#__PURE__*/_react.default.createElement("fieldset", {
16
22
  className: _RadioButtonListModule.default.radioButtonList
17
- }, props.children);
23
+ }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? /*#__PURE__*/_react.default.createElement("legend", null, props.legend) : null, props.children);
18
24
  };
19
25
 
26
+ RadioButtonList.propTypes = {
27
+ legend: _propTypes.default.string
28
+ };
20
29
  var _default = RadioButtonList;
21
30
  exports.default = _default;
package/dist/components/RadioButtonList.md CHANGED
@@ -26,3 +26,32 @@ import RadioButtonListItem from "lib/components/RadioButtonListItem";
26
26
  </RadioButtonListItem>
27
27
  </RadioButtonList>;
28
28
  ```
29
+
30
+ Ordered List with legend example:
31
+
32
+ ```js
33
+ import RadioButtonListItem from "lib/components/RadioButtonListItem";
34
+ <RadioButtonList legend="Radio button list legend">
35
+ <RadioButtonListItem
36
+ onChange={() => {
37
+ console.log("onchange");
38
+ }}
39
+ inputValue="value 1"
40
+ name="radio-button-list-with-legend-list-item"
41
+ id="radioButtonListWithLegend-listItem-1"
42
+ checked={true}
43
+ >
44
+ Checked radio button
45
+ </RadioButtonListItem>
46
+ <RadioButtonListItem
47
+ onChange={() => {
48
+ console.log("onchange");
49
+ }}
50
+ inputValue="value 2"
51
+ name="radio-button-list-with-legend-list-item"
52
+ id="radioButtonListWithLegend-listItem-1"
53
+ >
54
+ Unchecked radio button
55
+ </RadioButtonListItem>
56
+ </RadioButtonList>;
57
+ ```
package/dist/components/RadioButtonList.module.scss CHANGED
@@ -1,5 +1,17 @@
1
- :local(.radioButtonList) {
1
+ @import "../style/global.scss";
2
+
3
+ :local(fieldset.radioButtonList) {
2
4
  margin: 0;
3
5
  padding: 0;
4
- list-style: none;
6
+ border: none;
7
+ :local(legend) {
8
+ color: #000;
9
+ display: block;
10
+ font-size: 1rem;
11
+ font-weight: bold;
12
+ line-height: 1.2;
13
+ margin-bottom: 2px;
14
+ font-family: $default-font;
15
+ overflow-wrap: break-word;
16
+ }
5
17
  }
package/dist/components/RadioButtonListItem.js CHANGED
@@ -35,7 +35,7 @@ var RadioButtonListItem = function RadioButtonListItem(props) {
35
35
  name: props.name,
36
36
  theme: props.theme
37
37
  };
38
- return /*#__PURE__*/_react.default.createElement("li", {
38
+ return /*#__PURE__*/_react.default.createElement("div", {
39
39
  className: listItemClassNameString
40
40
  }, /*#__PURE__*/_react.default.createElement(_RadioButtonInput.default, inputProps, props.children));
41
41
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "1.1.9",
3
+ "version": "1.1.10",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",