@uncinc/uncinc-react-kitchen-sink 2.13.2 → 2.14.0

package/dist/components/Download/index.d.ts

@@ -5,6 +5,7 @@ export interface DownloadProps {
     description?: string;
     filesize?: number;
     filename?: string;
+    materialIconName?: string;
     mime: string;
     target?: HTMLAnchorElement['target'];
     className?: string;

package/dist/components/Download/index.js

@@ -7,6 +7,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
 import c from 'classnames';
 import prettyBytes from 'pretty-bytes';
+import Icon from '../Icon';
 var Download = function Download(_ref) {
   var source = _ref.source,
     title = _ref.title,
@@ -16,6 +17,7 @@ var Download = function Download(_ref) {
     filesize = _ref$filesize === void 0 ? null : _ref$filesize,
     _ref$filename = _ref.filename,
     filename = _ref$filename === void 0 ? '' : _ref$filename,
+    materialIconName = _ref.materialIconName,
     mime = _ref.mime,
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_self' : _ref$target,
@@ -31,7 +33,11 @@ var Download = function Download(_ref) {
     target: target,
     href: source,
     rel: "noreferrer"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, materialIconName ? /*#__PURE__*/React.createElement(Icon, {
+    className: "Download__icon Icon-".concat(mimeType, " Icon-").concat(mimeSubType),
+    name: materialIconName,
+    flair: "outlined"
+  }) : /*#__PURE__*/React.createElement("span", {
     className: "Download__icon icon icon-download icon-".concat(mimeType, " icon-").concat(mimeSubType)
   }), /*#__PURE__*/React.createElement("div", {
     className: "Download__content"
@@ -43,7 +49,7 @@ var Download = function Download(_ref) {
     className: "Download__attributes"
   }, extension && /*#__PURE__*/React.createElement("span", {
     className: "Download__extension"
-  }, extension[0]), filesize && /*#__PURE__*/React.createElement("span", {
+  }, extension[0], "\xA0"), filesize && /*#__PURE__*/React.createElement("span", {
     className: "Download__filesize"
   }, "(", prettyBytes(filesize), ")")));
 };

package/dist/components/Form/Checkbox/index.js

@@ -58,7 +58,8 @@ export var Checkbox = function Checkbox(props) {
     var field = _ref.field,
       form = _ref.form;
     var id = "".concat(props.fieldName, "--").concat(props.value);
-    var classes = c('WebformCheckboxes__checkbox__input', {
+    // TODO: Remove the WebformCheckboxes class (BREAKING): This shouldn't be in KS.
+    var classes = c('Checkboxes__checkbox__input', 'WebformCheckboxes__checkbox__input', {
       'icon-before': true,
       'icon-checkmark': true,
       'icon-variant-0': !field.value,

package/dist/components/Form/Checkboxes/index.js

@@ -31,7 +31,8 @@ function Checkbox(props) {
       form = _ref.form;
     var name = "".concat(props.name, "--").concat(props.value);
     var checked = field.value && field.value.includes(value);
-    var classes = c('WebformCheckboxes__checkbox__input', {
+    // TODO: Remove the WebformCheckboxes class (BREAKING): This shouldn't be in KS.
+    var classes = c('Checkboxes__checkbox__input', 'WebformCheckboxes__checkbox__input', {
       'icon-before': true,
       'icon-checkmark': true,
       'icon-variant-0': !checked,

package/dist/components/Form/Select/Input/style.scss

@@ -4,28 +4,28 @@
 .Select {
   &__inner {
     &__control {
-      border-radius: 0 !important;
+      border-radius: 0;
       &--menu-is-open,
       &--is-focused {
-        border-color: inherit !important;
-        box-shadow: none !important;
+        border-color: inherit;
+        box-shadow: none;
         &:hover,
         &:focus {
-          border-color: inherit !important;
-          box-shadow: none !important;
+          border-color: inherit;
+          box-shadow: none;
         }
 
       }
     }
     &__option {
       &--is-selected {
-        background-color: transparent !important;
-        color: $color--primary !important;
+        background-color: transparent;
+        color: $color--primary;
       }
     }
     &__menu {
-      border-radius: 0 !important;
-      margin-top: 0 !important;
+      border-radius: 0;
+      margin-top: 0;
     }
   }
 }

package/dist/components/Icon/style.scss

@@ -108,6 +108,7 @@ $material-icon-styles: (
   $icon-name: null,
   $style: 'outlined',
   $custom: false,
+  $color: #000000,
 ) {
   @if not $icon-name {
     @error 'an icon name is required'
@@ -122,8 +123,26 @@ $material-icon-styles: (
   display: block;
   width: 1em;
   height: 1em;
-  background-color: transparent;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  background-color: $color;
   background-repeat: no-repeat;
   background-position: 0 0;
   background-size: 1em;
 }
+
+// For including a material or custom icon through CSS.
+// And a better name than gridIconToMaterialIcon, for backwards compatability.
+@mixin materialIcon(
+  $icon-name: null,
+  $style: 'outlined',
+  $custom: false,
+  $color: #000000,
+) {
+  @include gridIconToMaterialIcon(
+    $icon-name,
+    $style,
+    $custom,
+    $color,
+  )
+}

package/dist/organisms/Downloads/index.d.ts

@@ -5,6 +5,7 @@ export interface DownloadsProps {
     text?: string;
     downloads: DownloadProps[];
     target?: HTMLAnchorElement['target'];
+    materialIconName?: string;
     className?: string;
 }
 declare const Downloads: React.FC<DownloadsProps>;

package/dist/organisms/Downloads/index.js

@@ -7,6 +7,7 @@ var Downloads = function Downloads(_ref) {
     text = _ref.text,
     downloads = _ref.downloads,
     target = _ref.target,
+    materialIconName = _ref.materialIconName,
     className = _ref.className;
   var classes = c('Downloads', className);
   return /*#__PURE__*/React.createElement("div", {
@@ -23,6 +24,7 @@ var Downloads = function Downloads(_ref) {
       description: download.description,
       filesize: download.filesize,
       filename: download.filename,
+      materialIconName: materialIconName,
       target: target,
       mime: download.mime
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.13.2",
+  "version": "2.14.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",