dibk-design 0.4.42 → 0.4.45

package/dist/components/Button.module.scss

@@ -1,216 +1,232 @@
-@import "../style/global.scss";
-@include keyframes(pushnext) {
-  0% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform(rotate(45deg) translate3d(2px, -2px, 0));
-  }
-
-  100% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-}
-@include keyframes(pushprev) {
-  0% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
-  }
-
-  100% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-}
-
-:local(.button) {
-  @include appearance(none);
-  @include border-radius(0);
-  @include transition(
-    filter 300ms ease-out,
-    background-color 300ms ease-out,
-    color 300ms ease-out,
-    border-color 300ms ease-out
-  );
-  font-family: "Altis", sans-serif;
-  border-style: solid;
-  border-width: 1px;
-  $border-color: $color-primary;
-  cursor: pointer;
-  line-height: 1;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-size: 20px;
-  font-weight: 500;
-
-  &:local(.hasTheme) {
-    &:hover,
-    &:focus {
-      filter: brightness(90%);
-    }
-
-    &:active {
-      filter: brightness(85%);
-    }
-  }
-
-  &:local(.regular) {
-    padding: 17px 32px;
-  }
-
-  &:local(.small) {
-    padding: 6px 32px;
-    min-width: 80px;
-    line-height: 21px;;
-  }
-
-  &:local(.default) {
-    background-color: #fff;
-    color: $color-primary;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
-      &:active {
-        background-color: $color-primary;
-        color: #fff;
-        &:after,
-        &:before {
-          border-color: #fff;
-        }
-      }
-    }
-  }
-
-  &:local(.primary) {
-    background-color: $color-primary;
-    color: #fff;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
-      &:active {
-        background-color: #fff;
-        color: $color-primary;
-        &:after,
-        &:before {
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  &:disabled {
-    &:local(.hasTheme),
-    &:not(:local(.hasTheme)) {
-      &:local(.default) {
-        background-color: #fff;
-        cursor: default;
-        opacity: 0.6;
-        color: #afaba8;
-        border: 1px solid #e5e3e1;
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: #fff;
-          cursor: default;
-          opacity: 0.6;
-          color: #afaba8;
-          border: 1px solid #e5e3e1;
-          &:before,
-          &:after {
-            border-color: #afaba8;
-          }
-        }
-        &:before,
-        &:after {
-          border-color: #afaba8;
-        }
-      }
-      &:local(.primary) {
-        background-color: $color-primary;
-        cursor: default;
-        opacity: 0.6;
-        color: #fff;
-        border: 1px solid $color-primary;
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: $color-primary;
-          cursor: default;
-          opacity: 0.6;
-          color: #fff;
-          border: 1px solid $color-primary;
-          &:before,
-          &:after {
-            border-color: $color-primary;
-          }
-        }
-        &:before,
-        &:after {
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  &:local(.rounded){
-    border-radius: 20px;
-  }
-
-  &:local(.hasArrowLeft) {
-    &:before {
-      @include transform(rotate(-135deg));
-      @include calc("top", "50% - 0.3rem");
-      content: " ";
-      display: inline-block;
-      position: absolute;
-      left: 1em;
-      right: auto;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border: 2px solid white;
-      border-width: 2px 2px 0 0;
-      margin-right: 1em;
-    }
-
-    &:hover {
-      &:before {
-        @include animation(pushprev 0.8s linear infinite);
-      }
-    }
-    &:local(.default) {
-      &:before {
-        border-color: $color-primary;
-      }
-    }
-  }
-
-  &:local(.hasArrowRight) {
-    &:after {
-      @include transform(rotate(45deg));
-      @include calc("top", "50% - 0.3rem");
-      content: " ";
-      display: inline-block;
-      position: absolute;
-      left: auto;
-      right: 1em;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border: 2px solid white;
-      border-width: 2px 2px 0 0;
-      margin-left: 1em;
-    }
-
-    &:hover {
-      &:after {
-        @include animation(pushnext 0.8s linear infinite);
-      }
-    }
-  }
-}
+@import "../style/global.scss";
+@include keyframes(pushnext) {
+  0% {
+    @include transform(rotate(45deg) translate3d(0, 0, 0));
+  }
+
+  50% {
+    @include transform(rotate(45deg) translate3d(2px, -2px, 0));
+  }
+
+  100% {
+    @include transform(rotate(45deg) translate3d(0, 0, 0));
+  }
+}
+@include keyframes(pushprev) {
+  0% {
+    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+  }
+
+  50% {
+    @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
+  }
+
+  100% {
+    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+  }
+}
+
+:local(.button) {
+  @include appearance(none);
+  @include border-radius(0);
+  @include transition(
+    filter 300ms ease-out,
+    background-color 300ms ease-out,
+    color 300ms ease-out,
+    border-color 300ms ease-out
+  );
+  font-family: "Altis", sans-serif;
+  border-style: solid;
+  border-width: 1px;
+  $border-color: $color-primary;
+  cursor: pointer;
+  line-height: 1;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 17px;
+  font-weight: 500;
+  @media only screen and (min-width: $screen-sm) {
+    font-size: 20px;
+  }
+
+  &:local(.hasTheme) {
+    &:hover,
+    &:focus {
+      filter: brightness(90%);
+    }
+
+    &:active {
+      filter: brightness(85%);
+    }
+  }
+
+  &:local(.regular) {
+    padding: 14px 24px;
+    @media only screen and (min-width: $screen-sm) {
+      padding: 17px 32px;
+    }
+  }
+
+  &:local(.small) {
+    padding: 6px 24px;
+    min-width: 80px;
+    line-height: 18px;
+    @media only screen and (min-width: $screen-sm) {
+      line-height: 21px;
+      padding: 6px 32px;
+    }
+  }
+
+  &:local(.default) {
+    background-color: #fff;
+    color: $color-primary;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: $color-primary;
+        color: #fff;
+        &:after,
+        &:before {
+          border-color: #fff;
+        }
+      }
+    }
+  }
+
+  &:local(.primary) {
+    background-color: $color-primary;
+    color: #fff;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: #fff;
+        color: $color-primary;
+        &:after,
+        &:before {
+          border-color: $color-primary;
+        }
+      }
+    }
+  }
+
+  &:disabled {
+    &:local(.hasTheme),
+    &:not(:local(.hasTheme)) {
+      &:local(.default) {
+        background-color: #fff;
+        cursor: default;
+        opacity: 0.6;
+        color: #afaba8;
+        border: 1px solid #e5e3e1;
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: #fff;
+          cursor: default;
+          opacity: 0.6;
+          color: #afaba8;
+          border: 1px solid #e5e3e1;
+          &:before,
+          &:after {
+            border-color: #afaba8;
+          }
+        }
+        &:before,
+        &:after {
+          border-color: #afaba8;
+        }
+      }
+      &:local(.primary) {
+        background-color: $color-primary;
+        cursor: default;
+        opacity: 0.6;
+        color: #fff;
+        border: 1px solid $color-primary;
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: $color-primary;
+          cursor: default;
+          opacity: 0.6;
+          color: #fff;
+          border: 1px solid $color-primary;
+          &:before,
+          &:after {
+            border-color: $color-primary;
+          }
+        }
+        &:before,
+        &:after {
+          border-color: $color-primary;
+        }
+      }
+    }
+  }
+
+  &:local(.rounded) {
+    border-radius: 20px;
+  }
+
+  &:local(.hasArrowLeft) {
+    &:before {
+      @include transform(rotate(-135deg));
+      @include calc("top", "50% - 0.4rem");
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      right: auto;
+      left: 0.55em;
+      width: 0.5rem;
+      height: 0.5rem;
+      vertical-align: middle;
+      border: 2px solid white;
+      border-width: 2px 2px 0 0;
+      margin-right: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        left: 1em;
+      }
+    }
+
+    &:hover {
+      &:before {
+        @include animation(pushprev 0.8s linear infinite);
+      }
+    }
+    &:local(.default) {
+      &:before {
+        border-color: $color-primary;
+      }
+    }
+  }
+
+  &:local(.hasArrowRight) {
+    &:after {
+      @include transform(rotate(45deg));
+      @include calc("top", "50% - 0.4rem");
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      left: auto;
+      right: 0.55em;
+      width: 0.5rem;
+      height: 0.5rem;
+      vertical-align: middle;
+      border: 2px solid white;
+      border-width: 2px 2px 0 0;
+      margin-left: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        right: 1em;
+      }
+    }
+
+    &:hover {
+      &:after {
+        @include animation(pushnext 0.8s linear infinite);
+      }
+    }
+  }
+}

package/dist/components/CheckBoxIcon.js

@@ -71,10 +71,14 @@ var CheckBoxIcon = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement("span", {
+      var ariaExpandedIndex = "aria-expanded";
+
+      var props = _defineProperty({
         className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(this.props.checked ? _CheckBoxIconModule.default.checked : '', " ").concat(this.props.disabled ? _CheckBoxIconModule.default.disabled : '', " ").concat(this.props.showBox ? _CheckBoxIconModule.default.showBox : '', " ").concat(this.props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ''),
         style: inlineStyle
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, ariaExpandedIndex, this.props.expandable ? this.props.checked.toString() : null);
+
+      return /*#__PURE__*/_react.default.createElement("span", props, /*#__PURE__*/_react.default.createElement("span", {
         className: _CheckBoxIconModule.default.checkmark
       }, this.props.checked ? this.props.checkmarkCharacter : ''));
     }
@@ -90,7 +94,8 @@ CheckBoxIcon.propTypes = {
   showBox: _propTypes.default.bool,
   theme: _propTypes.default.object,
   hasErrors: _propTypes.default.bool,
-  checkmarkCharacter: _propTypes.default.string
+  checkmarkCharacter: _propTypes.default.string,
+  expandable: _propTypes.default.bool
 };
 CheckBoxIcon.defaultProps = {
   size: '20px',
@@ -98,7 +103,8 @@ CheckBoxIcon.defaultProps = {
   disabled: false,
   showBox: true,
   hasErrors: false,
-  checkmarkCharacter: '✔'
+  checkmarkCharacter: '✔',
+  expandable: false
 };
 var _default = CheckBoxIcon;
 exports.default = _default;

package/dist/components/CheckBoxIcon.md

@@ -1,38 +1,38 @@
-Regular check box icons example:
-
-```js
-<CheckBoxIcon  />
-<CheckBoxIcon checked={true} />
-<CheckBoxIcon checked={true} checkmarkCharacter="✕" />
-<CheckBoxIcon disabled={true} />
-<CheckBoxIcon checked={true} disabled={true} />
-<CheckBoxIcon checked={true} checkmarkCharacter="✕" disabled={true} />
-```
-
-Themed Regular check box icons example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-<CheckBoxIcon size='43px' />
-<CheckBoxIcon size='43px' checked={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
-<CheckBoxIcon size='43px' disabled={true} />
-<CheckBoxIcon size='43px' checked={true} disabled={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
-</React.Fragment>
-```
-
-Check box icons with custom size example:
-
-```js
-<CheckBoxIcon size='43px' />
-<CheckBoxIcon size='43px' checked={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
-<CheckBoxIcon size='43px' disabled={true} />
-<CheckBoxIcon size='43px' checked={true} disabled={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
-```
-
-
-
+Regular check box icons example:
+
+```js
+<CheckBoxIcon  />
+<CheckBoxIcon checked={true} />
+<CheckBoxIcon checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon disabled={true} />
+<CheckBoxIcon checked={true} disabled={true} />
+<CheckBoxIcon checked={true} checkmarkCharacter="✕" disabled={true} />
+```
+
+Themed Regular check box icons example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+<CheckBoxIcon size='43px' />
+<CheckBoxIcon size='43px' checked={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon size='43px' disabled={true} />
+<CheckBoxIcon size='43px' checked={true} disabled={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
+</React.Fragment>
+```
+
+Check box icons with custom size example:
+
+```js
+<CheckBoxIcon size='43px' />
+<CheckBoxIcon size='43px' checked={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon size='43px' disabled={true} />
+<CheckBoxIcon size='43px' checked={true} disabled={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
+```
+
+
+