dibk-design 0.4.44 → 0.4.47

package/dist/components/Paper.module.scss

@@ -1,18 +1,18 @@
-@import "../style/global.scss";
-
-:local(.paper) {
-  line-height: 1.6;
-  position: relative;
-  width: 100%;
-  background: white;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18);
-  &:not(:local(.noMargin)) {
-    margin: 20px 0;
-  }
-  &:not(:local(.noPadding)) {
-    padding: 12px 12px;
-    @media only screen and (min-width: $screen-sm) {
-      padding: 24px 28px;
-    }
-  }
-}
+@import "../style/global.scss";
+
+:local(.paper) {
+  line-height: 1.6;
+  position: relative;
+  width: 100%;
+  background: white;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18);
+  &:not(:local(.noMargin)) {
+    margin: 20px 0;
+  }
+  &:not(:local(.noPadding)) {
+    padding: 12px 12px;
+    @media only screen and (min-width: $screen-sm) {
+      padding: 24px 28px;
+    }
+  }
+}

package/dist/components/ProgressBar.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ProgressBarModule = _interopRequireDefault(require("./ProgressBar.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ProgressBar = function ProgressBar(_ref) {
+  var progress = _ref.progress,
+      hasErrors = _ref.hasErrors;
+  var scssValueProperty = '--value';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(hasErrors ? _ProgressBarModule.default.hasErrors : ''),
+    role: "progressbar",
+    "aria-valuenow": progress || 0,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    style: _defineProperty({}, scssValueProperty, progress || 0)
+  });
+};
+
+var _default = ProgressBar;
+exports.default = _default;

package/dist/components/ProgressBar.md

@@ -0,0 +1,13 @@
+Progress bar examples:
+
+```js
+<ProgressBar progress={0} />
+<ProgressBar progress={25} />
+<ProgressBar progress={100} />
+```
+
+Progress bar with error example:
+
+```js
+<ProgressBar progress={60} hasErrors />
+```

package/dist/components/ProgressBar.module.scss

@@ -0,0 +1,37 @@
+@import "../style/global.scss";
+
+@keyframes growProgressBar {
+    0%,
+    33% {
+        --pgPercentage: 0;
+    }
+    100% {
+        --pgPercentage: var(--value);
+    }
+}
+
+:local(.progressBar) {
+    --size: 4rem;
+    --fg: #{$color-primary};
+    --bg: #e2e1e0;
+    --pgPercentage: var(--value);
+    animation: growProgressBar 0.25s 1 forwards;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
+        conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: calc(var(--size) / 4);
+    color: var(--fg);
+    flex-shrink: 0;
+    &::before {
+        counter-reset: percentage var(--value);
+        content: counter(percentage) "%";
+    }
+    &:local(.hasErrors) {
+        --fg: #{$color-error};
+    }
+}

package/dist/components/RadioButtonIcon.js

@@ -69,10 +69,14 @@ var RadioButtonIcon = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement("span", {
+      var ariaExpandedIndex = "aria-expanded";
+
+      var props = _defineProperty({
         className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(this.props.checked ? _RadioButtonIconModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonIconModule.default.disabled : '', " ").concat(this.props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ''),
         style: inlineStyle
-      });
+      }, ariaExpandedIndex, this.props.expandable ? this.props.checked.toString() : null);
+
+      return /*#__PURE__*/_react.default.createElement("span", props);
     }
   }]);
 
@@ -84,13 +88,15 @@ RadioButtonIcon.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  hasErrors: _propTypes.default.bool
+  hasErrors: _propTypes.default.bool,
+  expandable: _propTypes.default.bool
 };
 RadioButtonIcon.defaultProps = {
   size: '10px',
   checked: false,
   disabled: false,
-  hasErrors: false
+  hasErrors: false,
+  expandable: false
 };
 var _default = RadioButtonIcon;
 exports.default = _default;

package/dist/components/RadioButtonIcon.md

@@ -1,41 +1,41 @@
-Regular radio button icons example:
-
-```js
-<RadioButtonIcon />
-<RadioButtonIcon checked={true} />
-<RadioButtonIcon disabled={true} />
-<RadioButtonIcon checked={true} disabled={true} />
-<RadioButtonIcon hasErrors={true} />
-<RadioButtonIcon hasErrors={true} disabled={true} />
-<RadioButtonIcon checked={true} hasErrors={true} />
-<RadioButtonIcon checked={true} hasErrors={true} disabled={true} />
-```
-
-Themed Regular radio button icons example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-  <RadioButtonIcon theme={customTheme}/>
-  <RadioButtonIcon checked={true} theme={customTheme} />
-  <RadioButtonIcon theme={customTheme} disabled={true} />
-  <RadioButtonIcon checked={true} theme={customTheme} disabled={true} />
-  <RadioButtonIcon hasErrors={true} theme={customTheme} />
-  <RadioButtonIcon hasErrors={true} disabled={true} theme={customTheme} />
-  <RadioButtonIcon checked={true} hasErrors={true} theme={customTheme} />
-  <RadioButtonIcon checked={true} hasErrors={true} disabled={true} theme={customTheme} />
-</React.Fragment>
-```
-
-Radio button icons with custom size example:
-
-```js
-<RadioButtonIcon size='36px' />
-<RadioButtonIcon size='36px' checked={true} />
-<RadioButtonIcon size='36px' disabled={true} />
-<RadioButtonIcon size='36px' checked={true} disabled={true} />
-<RadioButtonIcon size='36px' hasErrors={true} />
-<RadioButtonIcon size='36px' hasErrors={true} disabled={true} />
-<RadioButtonIcon size='36px' checked={true} hasErrors={true} />
-<RadioButtonIcon size='36px' checked={true} hasErrors={true} disabled={true} />
-```
+Regular radio button icons example:
+
+```js
+<RadioButtonIcon />
+<RadioButtonIcon checked={true} />
+<RadioButtonIcon disabled={true} />
+<RadioButtonIcon checked={true} disabled={true} />
+<RadioButtonIcon hasErrors={true} />
+<RadioButtonIcon hasErrors={true} disabled={true} />
+<RadioButtonIcon checked={true} hasErrors={true} />
+<RadioButtonIcon checked={true} hasErrors={true} disabled={true} />
+```
+
+Themed Regular radio button icons example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+  <RadioButtonIcon theme={customTheme}/>
+  <RadioButtonIcon checked={true} theme={customTheme} />
+  <RadioButtonIcon theme={customTheme} disabled={true} />
+  <RadioButtonIcon checked={true} theme={customTheme} disabled={true} />
+  <RadioButtonIcon hasErrors={true} theme={customTheme} />
+  <RadioButtonIcon hasErrors={true} disabled={true} theme={customTheme} />
+  <RadioButtonIcon checked={true} hasErrors={true} theme={customTheme} />
+  <RadioButtonIcon checked={true} hasErrors={true} disabled={true} theme={customTheme} />
+</React.Fragment>
+```
+
+Radio button icons with custom size example:
+
+```js
+<RadioButtonIcon size='36px' />
+<RadioButtonIcon size='36px' checked={true} />
+<RadioButtonIcon size='36px' disabled={true} />
+<RadioButtonIcon size='36px' checked={true} disabled={true} />
+<RadioButtonIcon size='36px' hasErrors={true} />
+<RadioButtonIcon size='36px' hasErrors={true} disabled={true} />
+<RadioButtonIcon size='36px' checked={true} hasErrors={true} />
+<RadioButtonIcon size='36px' checked={true} hasErrors={true} disabled={true} />
+```

package/dist/components/RadioButtonIcon.module.scss

@@ -1,44 +1,44 @@
-@import "../style/global.scss";
-
-:local(.radioButtonIcon) {
-  @include border-radius(50%);
-  @include transition(all 0.1s ease-in-out);
-  @include box-sizing(content-box);
-  display: inline-block;
-  vertical-align: middle;
-  min-width: 10px;
-  width: 10px;
-  height: 10px;
-  background: white;
-  margin-right: 0.4em;
-  margin-top: 2px;
-  border: 0.3em solid white;
-  cursor: pointer;
-
-  &:not(:local(.hasErrors)) {
-    @include box-shadow(0 0 0 1px #afaba8);
-  }
-  &:local(.hasErrors) {
-    @include box-shadow(0 0 2px 1px #9d2024);
-  }
-
-  &:local(.checked) {
-    background: $color-primary;
-    &:local(.hasErrors) {
-      background: #9d2024;
-    }
-    &:not(:local(.hasErrors)) {
-      @include box-shadow(0 0 0 1px $color-dark-blue);
-    }
-    &:local(.hasErrors) {
-      @include box-shadow(0 0 2px 1px #9d2024);
-    }
-  }
-  &:local(.disabled) {
-    opacity: 0.5;
-    border-color: #bfbfbf;
-    &:not(&:local(.checked)) {
-      background: #bfbfbf;
-    }
-  }
-}
+@import "../style/global.scss";
+
+:local(.radioButtonIcon) {
+  @include border-radius(50%);
+  @include transition(all 0.1s ease-in-out);
+  @include box-sizing(content-box);
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 10px;
+  width: 10px;
+  height: 10px;
+  background: white;
+  margin-right: 0.4em;
+  margin-top: 2px;
+  border: 0.3em solid white;
+  cursor: pointer;
+
+  &:not(:local(.hasErrors)) {
+    @include box-shadow(0 0 0 1px #afaba8);
+  }
+  &:local(.hasErrors) {
+    @include box-shadow(0 0 2px 1px #9d2024);
+  }
+
+  &:local(.checked) {
+    background: $color-primary;
+    &:local(.hasErrors) {
+      background: #9d2024;
+    }
+    &:not(:local(.hasErrors)) {
+      @include box-shadow(0 0 0 1px $color-dark-blue);
+    }
+    &:local(.hasErrors) {
+      @include box-shadow(0 0 2px 1px #9d2024);
+    }
+  }
+  &:local(.disabled) {
+    opacity: 0.5;
+    border-color: #bfbfbf;
+    &:not(&:local(.checked)) {
+      background: #bfbfbf;
+    }
+  }
+}

package/dist/components/RadioButtonInput.js

@@ -58,7 +58,8 @@ var RadioButtonInput = /*#__PURE__*/function (_React$Component) {
         checked: this.props.checked,
         disabled: this.props.disabled,
         theme: this.props.theme,
-        hasErrors: this.props.hasErrors
+        hasErrors: this.props.hasErrors,
+        expandable: this.props.expandable
       }), /*#__PURE__*/_react.default.createElement("input", {
         type: "radio",
         onChange: this.props.onChange,
@@ -82,14 +83,16 @@ RadioButtonInput.propTypes = {
   onChange: _propTypes.default.func,
   contentOnly: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  hasErrors: _propTypes.default.bool
+  hasErrors: _propTypes.default.bool,
+  expandable: _propTypes.default.bool
 };
 RadioButtonInput.defaultProps = {
   name: '',
   checked: false,
   disabled: false,
   contentOnly: false,
-  hasErrors: false
+  hasErrors: false,
+  expandable: false
 };
 var _default = RadioButtonInput;
 exports.default = _default;

package/dist/components/RadioButtonInput.md

@@ -1,30 +1,32 @@
-Radio button input example:
-
-```js
-<div className="flex">
-<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>
-<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2"><span>Unchecked radio button</span></RadioButtonInput>
-<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>
-<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>
-</div>
-```
-
-Themed Radio button input example:
-
-```js
-import customTheme from 'data/customTheme';
-<div className="flex">
-  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-1" checked={true} theme={customTheme}>
-    <span>Checked radio button</span>
-  </RadioButtonInput>
-  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-2" theme={customTheme}>
-    <span>Unchecked radio button</span>
-  </RadioButtonInput>
-  <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}>
-    <span>Checked disabled radio button</span>
-  </RadioButtonInput>
-  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-4" theme={customTheme} disabled={true}>
-    <span>Unchecked disabled radio button</span>
-  </RadioButtonInput>
-</div>
-```
+Radio button input example:
+
+```js
+<div className="flex">
+<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>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2"><span>Unchecked radio button</span></RadioButtonInput>
+<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>
+<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>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" checked={false} expandable={true}><span>Unchecked expandable radio button </span></RadioButtonInput>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" checked={true} expandable={true}><span>Checked expandable radio button </span></RadioButtonInput>
+</div>
+```
+
+Themed Radio button input example:
+
+```js
+import customTheme from 'data/customTheme';
+<div className="flex">
+  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-1" checked={true} theme={customTheme}>
+    <span>Checked radio button</span>
+  </RadioButtonInput>
+  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-2" theme={customTheme}>
+    <span>Unchecked radio button</span>
+  </RadioButtonInput>
+  <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}>
+    <span>Checked disabled radio button</span>
+  </RadioButtonInput>
+  <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-4" theme={customTheme} disabled={true}>
+    <span>Unchecked disabled radio button</span>
+  </RadioButtonInput>
+</div>
+```

package/dist/components/RadioButtonInput.module.scss

@@ -1,26 +1,26 @@
-@import "../style/global.scss";
-
-:local(.radioButtonInput) {
-  display: flex;
-  cursor: pointer;
-  margin-right: 1em;
-
-  &:not(:local(.contentOnly)):not(:local(.disabled)) {
-    cursor: pointer;
-    input {
-      cursor: pointer;
-    }
-  }
-
-
-  &:local(.hasErrors) {
-    span {
-      color: #9d2024;
-    }
-  }
-
-  input[type="radio"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.radioButtonInput) {
+  display: flex;
+  cursor: pointer;
+  margin-right: 1em;
+
+  &:not(:local(.contentOnly)):not(:local(.disabled)) {
+    cursor: pointer;
+    input {
+      cursor: pointer;
+    }
+  }
+
+
+  &:local(.hasErrors) {
+    span {
+      color: #9d2024;
+    }
+  }
+
+  input[type="radio"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/RadioButtonListItem.md

@@ -1,70 +1,70 @@
-Radio button list item example:
-
-```js
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-1" checked={true}>
-  Checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-2">
-  Unchecked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-3" checked={true} disabled={true}>
-  Disabled checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-4" disabled={true}>
-  Disabled Unchecked radio button
-</RadioButtonListItem>
-```
-
-Radio button with errors list item example:
-
-```js
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-1" checked={true} hasErrors={true}>
-  Checked radio button with errors
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-2" hasErrors={true}>
-  Unchecked radio button with errors
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-3" checked={true} disabled={true} hasErrors={true}>
-  Disabled checked radio button with errors
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-4" disabled={true} hasErrors={true}>
-  Disabled Unchecked radio button with errors
-</RadioButtonListItem>
-```
-
-Compact radio button list item example:
-
-```js
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-1" checked={true} compact>
-  Checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-2" compact>
-  Unchecked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-3" checked={true} compact disabled={true}>
-  Disabled checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-4" compact disabled={true}>
-  Disabled unchecked radio button
-</RadioButtonListItem>
-```
-
-Themed Radio button list item example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-1" checked={true} theme={customTheme}>
-    Checked radio button
-  </RadioButtonListItem>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-2" theme={customTheme}>
-    Unchecked radio button
-  </RadioButtonListItem>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-3" checked={true} theme={customTheme} disabled={true}>
-    Disabled checked radio button
-  </RadioButtonListItem>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-4" theme={customTheme} disabled={true}>
-    Disabled unchecked radio button
-  </RadioButtonListItem>
-</React.Fragment>
-```
+Radio button list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-1" checked={true}>
+  Checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-2">
+  Unchecked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-3" checked={true} disabled={true}>
+  Disabled checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-4" disabled={true}>
+  Disabled Unchecked radio button
+</RadioButtonListItem>
+```
+
+Radio button with errors list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-1" checked={true} hasErrors={true}>
+  Checked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-2" hasErrors={true}>
+  Unchecked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-3" checked={true} disabled={true} hasErrors={true}>
+  Disabled checked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-4" disabled={true} hasErrors={true}>
+  Disabled Unchecked radio button with errors
+</RadioButtonListItem>
+```
+
+Compact radio button list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-1" checked={true} compact>
+  Checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-2" compact>
+  Unchecked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-3" checked={true} compact disabled={true}>
+  Disabled checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-4" compact disabled={true}>
+  Disabled unchecked radio button
+</RadioButtonListItem>
+```
+
+Themed Radio button list item example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-1" checked={true} theme={customTheme}>
+    Checked radio button
+  </RadioButtonListItem>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-2" theme={customTheme}>
+    Unchecked radio button
+  </RadioButtonListItem>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-3" checked={true} theme={customTheme} disabled={true}>
+    Disabled checked radio button
+  </RadioButtonListItem>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-4" theme={customTheme} disabled={true}>
+    Disabled unchecked radio button
+  </RadioButtonListItem>
+</React.Fragment>
+```