dibk-design 4.5.0 → 5.0.0

package/dist/components/PDF.scss

@@ -12,6 +12,8 @@ $font-size-table-header: 15px;
 $font-size-table-data: 16px;
 $font-size-checkbox: 20px;
 
+$line-height-default: 22.5px;
+
 $height-checkbox: 22px;
 $width-checkbox: 22px;
 
@@ -62,7 +64,6 @@ body {
     font-family: Carlito, sans-serif;
     color: #000;
     font-size: $font-size-body;
-    line-height: 1.25em;
     font-weight: normal;
     font-style: normal;
 }
@@ -79,6 +80,7 @@ body {
     font-family: Carlito, sans-serif;
     color: #000;
     font-size: $font-size-body;
+    line-height: $line-height-default;
 }
 @page {
     size: A4 portrait;
@@ -324,8 +326,8 @@ body {
     }
 
     blockquote {
-        background: $color-secondary-x-light;
-        border-left: $border-left-width-blockquote solid $color-secondary;
+        background: var(--color-secondary-x-light, $color-secondary-x-light);
+        border-left: $border-left-width-blockquote solid var(--color-secondary-text, $color-secondary-text);
         margin: $margin-vertical-blockquote $margin-horizontal-blockquote;
         padding: 0.5em $padding-horizontal-blockquote;
         min-height: $min-height-blockquote;
@@ -405,6 +407,7 @@ body {
     padding-left: 0.2cm;
     padding-right: 0.2cm;
     font-size: calc($font-size-body * $scaling-for-signed-documents);
+    line-height: calc($line-height-default * $scaling-for-signed-documents);
     div.content-container {
         .heading-logo {
             width: calc($heading-logo-width * $scaling-for-signed-documents);
@@ -510,8 +513,9 @@ body {
         }
 
         blockquote {
-            background: $color-secondary-x-light;
-            border-left: calc($border-left-width-blockquote * $scaling-for-signed-documents) solid $color-secondary;
+            background: var(--color-secondary-x-light, $color-secondary-x-light);
+            border-left: calc($border-left-width-blockquote * $scaling-for-signed-documents) solid
+                var(--color-secondary-text, $color-secondary-text);
             margin: calc($margin-vertical-blockquote * $scaling-for-signed-documents)
                 calc($margin-horizontal-blockquote * $scaling-for-signed-documents);
             padding: 0.5em calc($padding-horizontal-blockquote * $scaling-for-signed-documents);

package/dist/components/ProgressBar.module.scss

@@ -2,7 +2,7 @@
 
 .progressBar {
     --size: 4rem;
-    --fg: #{$color-primary};
+    --fg: #{var(--color-primary, $color-primary)};
     --bg: #e2e1e0;
     --pgPercentage: var(--value);
     width: var(--size);
@@ -21,6 +21,6 @@
         content: counter(percentage) "%";
     }
     &.hasErrors {
-        --fg: #{$color-error};
+        --fg: #{var(--color-error, $color-error)};
     }
 }

package/dist/components/RadioButtonIcon.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _theme = require("../functions/theme");
 var _RadioButtonIconModule = _interopRequireDefault(require("./RadioButtonIcon.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const RadioButtonIcon = props => {
@@ -14,13 +13,6 @@ const RadioButtonIcon = props => {
     height: props.size,
     width: props.size
   };
-  if (props.theme && props.checked) {
-    inlineStyle = {
-      ...inlineStyle,
-      [!props.hasErrors && "background"]: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"),
-      [!props.hasErrors && "boxShadow"]: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"))
-    };
-  }
   const radioButtonIconProps = {
     className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(props.checked ? _RadioButtonIconModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonIconModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""),
     style: inlineStyle
@@ -31,7 +23,6 @@ RadioButtonIcon.propTypes = {
   size: _propTypes.default.string,
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  theme: _propTypes.default.object,
   hasErrors: _propTypes.default.bool
 };
 RadioButtonIcon.defaultProps = {

package/dist/components/RadioButtonIcon.module.scss

@@ -16,22 +16,22 @@
     cursor: pointer;
 
     &:not(.hasErrors) {
-        @include box-shadow(0 0 0 1px $color-primary);
+        @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
     }
     &.hasErrors {
-        @include box-shadow(0 0 0 1px $color-error);
+        @include box-shadow(0 0 0 1px var(--color-error, $color-error));
     }
 
     &.checked {
-        background: $color-primary;
+        background: var(--color-primary, $color-primary);
         &.hasErrors {
-            background: $color-error;
+            background: var(--color-error, $color-error);
         }
         &:not(.hasErrors) {
-            @include box-shadow(0 0 0 1px $color-primary);
+            @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
         }
         &.hasErrors {
-            @include box-shadow(0 0 0 1px $color-error);
+            @include box-shadow(0 0 0 1px var(--color-error, $color-error));
         }
     }
     &.disabled {

package/dist/components/RadioButtonInput.js

@@ -18,7 +18,6 @@ const RadioButtonInput = props => {
   const iconProps = {
     checked: props.checked,
     disabled: props.disabled,
-    theme: props.theme,
     hasErrors: !props.contentOnly && props.hasErrors
   };
   const inputProps = {
@@ -53,7 +52,6 @@ RadioButtonInput.propTypes = {
   onChange: _propTypes.default.func,
   contentOnly: _propTypes.default.bool,
   hasErrors: _propTypes.default.bool,
-  theme: _propTypes.default.object,
   inputValue: _propTypes.default.string.isRequired,
   "aria-controls": _propTypes.default.string,
   "aria-describedby": _propTypes.default.string

package/dist/components/RadioButtonInput.module.scss

@@ -23,7 +23,7 @@
     .labelText {
         font-size: 16px;
         line-height: 24px;
-        color: $color-primary;
+        color: var(--color-primary, $color-primary);
     }
 
     &.disabled {
@@ -34,13 +34,13 @@
 
     &.hasErrors {
         span {
-            color: $color-error;
+            color: var(--color-error, $color-error);
         }
     }
 
     &:focus-within {
         outline-width: 2px;
-        outline-color: $color-primary;
+        outline-color: var(--color-primary, $color-primary);
         outline-style: auto;
         outline-offset: 1px;
     }

package/dist/components/RadioButtonListItem.js

@@ -11,7 +11,7 @@ var _helpers = require("../functions/helpers");
 var _RadioButtonListItemModule = _interopRequireDefault(require("./RadioButtonListItem.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const RadioButtonListItem = props => {
-  const listItemClassNameArray = [_RadioButtonListItemModule.default.radioButtonListItem, props.checked ? _RadioButtonListItemModule.default.checked : null, props.disabled ? _RadioButtonListItemModule.default.disabled : null, props.compact ? _RadioButtonListItemModule.default.compact : null, props.contentOnly ? _RadioButtonListItemModule.default.contentOnly : null, props.hasErrors ? _RadioButtonListItemModule.default.hasErrors : null, props.theme && _RadioButtonListItemModule.default.hasTheme];
+  const listItemClassNameArray = [_RadioButtonListItemModule.default.radioButtonListItem, props.checked ? _RadioButtonListItemModule.default.checked : null, props.disabled ? _RadioButtonListItemModule.default.disabled : null, props.compact ? _RadioButtonListItemModule.default.compact : null, props.contentOnly ? _RadioButtonListItemModule.default.contentOnly : null, props.hasErrors ? _RadioButtonListItemModule.default.hasErrors : null];
   const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);
   const inputProps = {
     onChange: props.onChange,
@@ -25,8 +25,7 @@ const RadioButtonListItem = props => {
     "aria-controls": props["aria-controls"],
     "aria-describedby": props["aria-describedby"],
     id: props.id,
-    name: props.name,
-    theme: props.theme
+    name: props.name
   };
   return _react.default.createElement("div", {
     className: listItemClassNameString
@@ -43,7 +42,6 @@ RadioButtonListItem.propTypes = {
   onChange: _propTypes.default.func,
   contentOnly: _propTypes.default.bool,
   compact: _propTypes.default.bool,
-  theme: _propTypes.default.object,
   hasErrors: _propTypes.default.bool,
   "aria-controls": _propTypes.default.string,
   "aria-describedby": _propTypes.default.string

package/dist/components/RadioButtonListItem.module.scss

@@ -20,7 +20,7 @@
   color: #000;
 
   &:not(.contentOnly):not(.compact) {
-    border: 1px solid $color-secondary-light;
+    border: 1px solid var(--color-secondary-light, $color-secondary-light);
     background: white;
     margin-bottom: 8px;
     label {
@@ -42,16 +42,16 @@
     }
   }
 
-  &.checked:not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
-    background-color: $color-secondary-light;
+  &.checked:not(.contentOnly):not(.compact):not(.disabled) {
+    background-color: var(--color-secondary-light, $color-secondary-light);
   }
 
-  &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme):hover {
+  &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):hover {
     &:hover {
-      background-color: $color-secondary-x-light;
+      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
     }
     &:focus-within {
-      background-color: $color-secondary-x-light;
+      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
     }
   }
 

package/dist/components/Select.js

@@ -10,7 +10,6 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _CheckBoxList = _interopRequireDefault(require("./CheckBoxList"));
 var _CheckBoxListItem = _interopRequireDefault(require("./CheckBoxListItem"));
-var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
 var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
@@ -47,17 +46,6 @@ const Select = props => {
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", keyDownFunction, false);
   }, [props, wrapperRef]);
-  const getThemeErrorInputStyle = theme => {
-    return {
-      boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, "warning")),
-      borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
-    };
-  };
-  const getThemeArrowStyle = theme => {
-    return {
-      borderTopColor: (0, _theme.getThemePaletteBackgroundColor)(theme, "primary")
-    };
-  };
   const getKeyByValue = (value, options) => {
     const selectedOption = options && options.length ? options.find(option => {
       if (typeof option === "object") {
@@ -104,8 +92,7 @@ const Select = props => {
         id: "".concat(props.id, "-").concat(index),
         value: optionObject.value,
         checked: isSelected,
-        onChange: () => selectElementProps.onChange(optionObject.value),
-        theme: props.theme
+        onChange: () => selectElementProps.onChange(optionObject.value)
       }, optionObject.key);
     });
   };
@@ -138,7 +125,6 @@ const Select = props => {
     var _props$width, _props$errorMessage, _props$ariaDescribed, _props$width2;
     const defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
     const styleRules = {
-      ...(props.hasErrors ? getThemeErrorInputStyle(props.theme) : null),
       ...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
         maxWidth: props.width
       })
@@ -175,8 +161,7 @@ const Select = props => {
         })
       }
     }, _react.default.createElement("span", {
-      className: _SelectModule.default.selectListArrow,
-      style: getThemeArrowStyle(props.theme)
+      className: _SelectModule.default.selectListArrow
     }), props.multiple ? _react.default.createElement("div", {
       ref: dropdownRef
     }, _react.default.createElement("div", {
@@ -190,8 +175,7 @@ const Select = props => {
       compact: true
     }, renderCheckBoxElements(props.options, selectElementProps))) : null) : _react.default.createElement("select", selectElementProps, renderPlaceholderOption(props.placeholder, props.placeholderValue), renderOptionElements(props.options))), _react.default.createElement(_ErrorMessage.default, {
       id: getErrorElementId(),
-      content: props.errorMessage,
-      theme: props.theme
+      content: props.errorMessage
     }));
   }
 };
@@ -217,8 +201,7 @@ Select.propTypes = {
   defaultContent: _propTypes.default.string,
   "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
-  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  theme: _propTypes.default.object
+  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))])
 };
 Select.defaultProps = {
   onChange: () => {

package/dist/components/Select.module.scss

@@ -63,19 +63,19 @@
             font-family: inherit;
             font-size: 18px;
             padding: 10px 40px 10px 10px;
-            border: 1px solid $color-primary;
+            border: 1px solid var(--color-primary, $color-primary);
             border-radius: 0;
             line-height: 1.7;
             background: white;
             cursor: pointer;
 
             &:hover {
-                border-color: $color-primary;
-                background-color: $color-secondary-x-light;
+                border-color: var(--color-primary, $color-primary);
+                background-color: var(--color-secondary-x-light, $color-secondary-x-light);
             }
 
             &:focus {
-                outline-color: $color-primary;
+                outline-color: var(--color-primary, $color-primary);
             }
 
             &[disabled],
@@ -93,9 +93,9 @@
             }
 
             &.hasErrors {
-                border-color: $color-error;
+                border-color: var(--color-error, $color-error);
                 &:focus {
-                    border-color: $color-error;
+                    border-color: var(--color-error, $color-error);
                     outline-color: #b8565d;
                 }
                 &[disabled],

package/dist/components/Table.module.scss

@@ -10,7 +10,7 @@
         font-style: italic;
         line-height: 1;
         font-size: 17px;
-        color: $color-primary;
+        color: var(--color-primary, $color-primary);
     }
     &.captionSide-top {
         caption {
@@ -41,8 +41,8 @@
     }
     thead {
         tr {
-            background-color: $color-default-background;
-            border: 1px solid $color-secondary;
+            background-color: var(--color-default-background, $color-default-background);
+            border: 1px solid var(--color-secondary-text, $color-secondary-text);
             th {
                 text-align: left;
                 font-size: 16px;
@@ -52,8 +52,8 @@
     }
     tbody {
         tr {
-            background-color: $color-default-background;
-            border: 1px solid $color-secondary;
+            background-color: var(--color-default-background, $color-default-background);
+            border: 1px solid var(--color-secondary-text, $color-secondary-text);
             td {
                 padding: 10px;
                 font-size: 16px;

package/dist/components/Textarea.js

@@ -8,18 +8,11 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
-var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Textarea = props => {
-  const getThemeErrorInputStyle = theme => {
-    return {
-      boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, "warning")),
-      borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
-    };
-  };
   const renderValueAsText = (value, defaultContent) => {
     return value ? value : defaultContent;
   };
@@ -31,7 +24,6 @@ const Textarea = props => {
     const defaultValue = !((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.length) && (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 && _props$defaultValue.length ? props.defaultValue : false;
     const defaultKey = props.elementKey || null;
     const styleRules = {
-      ...(props.hasErrors ? getThemeErrorInputStyle(props.theme) : null),
       ...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
         maxWidth: props.width
       }),
@@ -69,8 +61,7 @@ const Textarea = props => {
     className: _TextareaModule.default.requiredSymbol
   })), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
     id: getErrorElementId(),
-    content: props.errorMessage,
-    theme: props.theme
+    content: props.errorMessage
   }));
 };
 Textarea.propTypes = {
@@ -92,8 +83,7 @@ Textarea.propTypes = {
   defaultContent: _propTypes.default.string,
   "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
-  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  theme: _propTypes.default.object
+  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))])
 };
 Textarea.defaultProps = {
   onChange: () => {

package/dist/components/Textarea.module.scss

@@ -34,12 +34,12 @@
         }
 
         &:hover {
-            border-color: $color-primary;
+            border-color: var(--color-primary, $color-primary);
         }
 
         &:focus {
-            border-color: $color-primary;
-            outline-color: #54acb8;
+            border-color: var(--color-primary, $color-primary);
+            outline-color: var(--color-focus, $color-focus);
         }
 
         &[disabled],
@@ -49,9 +49,9 @@
         }
 
         &.hasErrors {
-            border-color: $color-error;
+            border-color: var(--color-error, $color-error);
             &:focus {
-                border-color: $color-error;
+                border-color: var(--color-error, $color-error);
                 outline-color: #b8565d;
             }
             &[disabled],

package/dist/components/Theme.js

@@ -4,68 +4,114 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _theme = require("../functions/theme");
-var _dibkLogoMobile = _interopRequireDefault(require("../assets/svg/dibk-logo-mobile.svg?url"));
+var _Button = _interopRequireDefault(require("./Button"));
+var _Container = _interopRequireDefault(require("./Container"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+var _Paper = _interopRequireDefault(require("./Paper"));
+var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
+var _CheckBoxList = _interopRequireDefault(require("./CheckBoxList"));
+var _CheckBoxListItem = _interopRequireDefault(require("./CheckBoxListItem"));
+var _RadioButtonList = _interopRequireDefault(require("./RadioButtonList"));
+var _RadioButtonListItem = _interopRequireDefault(require("./RadioButtonListItem"));
 var _ThemeModule = _interopRequireDefault(require("./Theme.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Theme = props => {
-  const getThemeColorPaletteStyle = (theme, color) => {
-    return {
-      backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
-      color: (0, _theme.getThemePaletteTextColor)(theme, color)
-    };
-  };
-  const getThemeTextStyle = theme => {
-    return {
-      color: (0, _theme.getThemeTextColor)(theme)
-    };
-  };
-  const getThemeLinkStyle = theme => {
-    return {
-      color: (0, _theme.getThemeLinkColor)(theme)
-    };
-  };
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Theme = _ref => {
+  let {
+    theme
+  } = _ref;
   const renderColors = theme => {
-    const colors = ["default", "primary", "success", "warning", "info", "lightCyan", "orange", "lightOrange", "lime", "lightLime"];
-    return colors.map(color => {
+    return Object.keys(theme.colors).map(color => {
       const colorClassName = _ThemeModule.default[color];
-      const colorPaletteStyle = props.theme ? getThemeColorPaletteStyle(props.theme, color) : null;
-      return _react.default.createElement("div", {
-        key: color,
-        className: "".concat(_ThemeModule.default.color, " ").concat(colorClassName),
-        style: colorPaletteStyle
-      }, color);
-    });
-  };
-  const renderLogo = logoLink => {
-    const themeLogo = (0, _theme.getThemeLogo)(props.theme);
-    const themeAppName = (0, _theme.getThemeAppName)(props.theme);
-    const logoElement = themeLogo && themeAppName ? _react.default.createElement("img", {
-      alt: "".concat(themeAppName, " logo"),
-      src: themeLogo
-    }) : _react.default.createElement("img", {
-      alt: "DIBK logo",
-      src: _dibkLogoMobile.default
+      return _react.default.createElement(_react.Fragment, {
+        key: color
+      }, _react.default.createElement("div", null, color), _react.default.createElement("div", {
+        className: "".concat(_ThemeModule.default.color, " ").concat(colorClassName)
+      }));
     });
-    return logoLink && logoLink.length ? _react.default.createElement("a", {
-      href: logoLink
-    }, logoElement) : logoElement;
   };
-  const themeTextStyle = props.theme ? getThemeTextStyle(props.theme) : null;
-  const themeLinkStyle = props.theme ? getThemeLinkStyle(props.theme) : null;
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
+  return theme ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_NavigationBar.default, {
+    theme: theme
+  }), _react.default.createElement(_Container.default, {
+    maxWidth: "916px"
+  }, _react.default.createElement(_Paper.default, {
+    noMargin: true
+  }, _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Colors"), _react.default.createElement("div", {
     className: _ThemeModule.default.colorPalette
-  }, renderColors(props.theme)), _react.default.createElement("p", {
-    style: themeTextStyle
-  }, "The is default text"), _react.default.createElement("p", null, _react.default.createElement("a", {
-    style: themeLinkStyle,
+  }, " ", renderColors(theme))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Typography"), _react.default.createElement(_Header.default, {
+    size: 1,
+    htmlTag: "p"
+  }, "Heading size 1"), _react.default.createElement(_Header.default, {
+    size: 2,
+    htmlTag: "p"
+  }, "Heading size 2"), _react.default.createElement(_Header.default, {
+    size: 3,
+    htmlTag: "p"
+  }, "Heading size 3"), _react.default.createElement(_Header.default, {
+    size: 4,
+    htmlTag: "p"
+  }, "Heading size 4"), _react.default.createElement(_Header.default, {
+    size: 5,
+    htmlTag: "p"
+  }, "Heading size 5"), _react.default.createElement("p", null, "Paragraph"), _react.default.createElement("p", null, _react.default.createElement("a", {
     href: "#theme"
-  }, "This is a hyperlink")), renderLogo(props.theme));
+  }, "Hyperlink"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Accordions"), _react.default.createElement(_Accordion.default, {
+    title: "Accordion with default color"
+  }, _react.default.createElement("p", null, "Accordion content")), _react.default.createElement(_Accordion.default, {
+    title: "Accordion with secondary color",
+    color: "secondary"
+  }, _react.default.createElement("p", null, "Accordion content"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Buttons"), _react.default.createElement(_Button.default, {
+    color: "primary",
+    content: "Primary button",
+    arrow: "left"
+  }), _react.default.createElement(_Button.default, {
+    color: "secondary",
+    content: "Secondary button",
+    arrow: "right"
+  })), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Checkboxes"), _react.default.createElement(_CheckBoxList.default, {
+    legend: "Default checkbox list"
+  }, _react.default.createElement(_CheckBoxListItem.default, {
+    onChange: () => {},
+    checked: true,
+    name: "checkboxlist",
+    id: "checkboxList-listItem-1"
+  }, "Label for checked checkbox"), _react.default.createElement(_CheckBoxListItem.default, {
+    onChange: () => {},
+    name: "checkboxlist",
+    id: "checkboxList-listItem-2"
+  }, "Label for unchecked checkbox"))), _react.default.createElement("section", null, _react.default.createElement(_Header.default, {
+    size: 2
+  }, "Radio buttons"), _react.default.createElement(_RadioButtonList.default, {
+    legend: "Default radio button list"
+  }, _react.default.createElement(_RadioButtonListItem.default, {
+    onChange: () => {},
+    inputValue: "value 1",
+    name: "radio-button-list-list-item",
+    id: "radioButtonList-listItem-1",
+    checked: true
+  }, "Checked radio button"), _react.default.createElement(_RadioButtonListItem.default, {
+    onChange: () => {},
+    inputValue: "value 2",
+    name: "radio-button-list-list-item",
+    id: "radioButtonList-listItem-2"
+  }, "Unchecked radio button")))))) : "Select a theme";
 };
 Theme.propTypes = {
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object.isRequired
 };
 Theme.defaultProps = {};
 var _default = exports.default = Theme;