@uncinc/uncinc-react-kitchen-sink 2.7.0 → 2.7.2

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

@@ -0,0 +1,17 @@
+export default Icon;
+declare function Icon({ flair, name }: {
+    flair?: string | undefined;
+    name: any;
+}): React.JSX.Element;
+declare namespace Icon {
+    namespace defaultProps {
+        let flair: string;
+    }
+    namespace propTypes {
+        export let name: PropTypes.Validator<string>;
+        let flair_1: PropTypes.Requireable<string>;
+        export { flair_1 as flair };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/Icon/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Icon = function Icon(_ref) {
+  var _ref$flair = _ref.flair,
+    flair = _ref$flair === void 0 ? '' : _ref$flair,
+    name = _ref.name;
+  var flairPostFix = flair && flair.length > 0 ? '-' : '';
+  var className = (0, _classnames.default)('Icon', "Icon-".concat(flair).concat(flairPostFix).concat(name));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className
+  });
+};
+Icon.defaultProps = {
+  flair: ''
+};
+Icon.propTypes = {
+  name: _propTypes.default.string.isRequired,
+  flair: _propTypes.default.string
+};
+var _default = Icon;
+exports.default = _default;

package/dist/components/Icon/style.scss

@@ -0,0 +1,100 @@
+@use 'sass:list';
+@use 'sass:color';
+
+// https://github.com/marella/material-design-icons/tree/main/svg#readme
+// https://marella.me/material-design-icons/demo/svg/
+
+$custom-icon-path: '' !default;
+
+$material-icon-names: (
+    arrow_forward,
+    chevron_right,
+    download,
+    filter_list,
+    info,
+    check,
+    radio,
+    ) !default;
+
+$material-icon-styles: (
+    filled,
+    outlined,
+    round,
+    sharp,
+    two-tone
+);
+
+@mixin icon-color($color: #000000, $opacity: 1) {
+    $r: color.red($color) / 255;
+    $g: color.green($color) / 255;
+    $b: color.blue($color) / 255;
+    $a: $opacity;
+
+    // grayscale fallback if SVG from data url is not supported
+    $lightness: lightness($color);
+    filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
+
+    // color filter
+    $svg-filter-id: "recolor";
+    filter: url('data:image/svg+xml;utf8,\
+    <svg xmlns="http://www.w3.org/2000/svg">\
+      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
+        <feColorMatrix type="matrix" values="\
+          0 0 0 0 #{$r}\
+          0 0 0 0 #{$g}\
+          0 0 0 0 #{$b}\
+          0 0 0 #{$a} 0\
+        "/>\
+      </filter>\
+    </svg>\
+    ##{$svg-filter-id}');
+}
+
+@mixin unset-icon-color() {
+    filter: none;
+}
+
+@mixin generateMaterialIconClasses() {
+    @for $styleIndex from 1 through length($material-icon-styles) {
+        $style: list.nth($material-icon-styles, $styleIndex);
+
+        @for $nameIndex from 1 through length($material-icon-names) {
+            $name: list.nth($material-icon-names, $nameIndex);
+
+            .Icon-#{$style}-#{$name} {
+                background: url('~@material-design-icons/svg/#{$style}/#{$name}.svg');
+                font-size: 100%;
+                vertical-align: middle;
+                text-indent: -9999px;
+                overflow: hidden;
+                background-position: 0 0;
+                background-size: 1em;
+                background-repeat: no-repeat;
+            }
+        }
+    }
+}
+
+@mixin generateCustomIconClasses() {
+    @for $nameIndex from 1 through length($custom-icon-names) {
+      $name: list.nth($custom-icon-names, $nameIndex);
+  
+      .Icon-#{$name} {
+        background: url('#{$custom-icon-path}/#{$name}.svg');
+        font-size: 100%;
+        vertical-align: middle;
+        text-indent: -9999px;
+        overflow: hidden;
+        background-position: 0 0;
+        background-size: 1em;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+  
+
+.Icon {
+    height: 1em;
+    width: 1em;
+    @include icon-color(#000000);
+}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import 'videojs-vimeo-tech';
 import 'videojs-youtube';
 import { MediaPlayerProps } from './types';
-import '!style-loader!css-loader!video.js/dist/video-js.css';
+import 'video.js/dist/video-js.css';
 import './style.scss';
 declare const MediaPlayer: React.FC<MediaPlayerProps>;
 export default MediaPlayer;

package/dist/components/MediaPlayer/index.js

@@ -10,7 +10,7 @@ var _reactHookVideojs = require("react-hook-videojs");
 var _reactI18next = require("react-i18next");
 require("videojs-vimeo-tech");
 require("videojs-youtube");
-require("!style-loader!css-loader!video.js/dist/video-js.css");
+require("video.js/dist/video-js.css");
 require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -21,7 +21,6 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } // VideoJS plugins:
-// eslint-disable-next-line import/no-webpack-loader-syntax
 var MediaPlayer = function MediaPlayer(_ref) {
   var src = _ref.src,
     type = _ref.type,

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { default as AccordionItemVariant } from "./components/Accordion/Accordio
 export { default as Button } from "./components/Button";
 export { default as Hamburger } from "./components/Hamburger";
 export { default as Image } from "./components/Image";
+export { default as Icon } from "./components/Icon";
 export { default as ImageBackground } from "./components/Image/Background";
 export { default as Lottie } from "./components/Lottie";
 export { default as LottieAnimationWithMousePosition } from "./components/Lottie/LottieAnimationWithMousePosition";

package/dist/index.js

@@ -184,6 +184,12 @@ Object.defineProperty(exports, "Header", {
     return _Header.default;
   }
 });
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _Icon.default;
+  }
+});
 Object.defineProperty(exports, "Image", {
   enumerable: true,
   get: function get() {
@@ -479,6 +485,7 @@ var _AccordionItemVariant = _interopRequireDefault(require("./components/Accordi
 var _Button = _interopRequireDefault(require("./components/Button"));
 var _Hamburger = _interopRequireDefault(require("./components/Hamburger"));
 var _Image = _interopRequireDefault(require("./components/Image"));
+var _Icon = _interopRequireDefault(require("./components/Icon"));
 var _Background = _interopRequireDefault(require("./components/Image/Background"));
 var _Lottie = _interopRequireDefault(require("./components/Lottie"));
 var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./components/Lottie/LottieAnimationWithMousePosition"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -107,6 +107,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/runtime": "^7.9.6",
+    "@material-design-icons/svg": "^0.14.11",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
@@ -139,6 +140,9 @@
     "storybook-react-i18next": "^1.1.3",
     "webpack": "^5.85.1"
   },
+  "peerDependencies": {
+    "@material-design-icons/svg": "^0.14.11"
+  },
   "files": [
     "dist"
   ],