Fix svg loading in visual-stack-redux and added propTypes

Author: Hoberg, Kyle

packages/visual-stack-redux/package-lock.json

@@ -81,6 +81,7 @@
     "rimraf": "^2.5.2",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
+    "url-loader": "^4.1.1",
     "webpack": "^3.6.0"
   }
 }

packages/visual-stack-redux/package.json

@@ -10,8 +10,13 @@ var config = {
         exclude: /node_modules/,
         use: 'babel-loader',
       },
-      { test: /\.css$/,
+      {
+        test: /\.css$/,
         use: 'ignore-loader',
+      },
+      {
+        test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
+        use: [{ loader: 'url-loader', options: { limit: 10000 } }],
       }
     ]
   },

packages/visual-stack-redux/webpack.config.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from 'react-inlinesvg';
 import classNames from 'classnames';
-import logoSvg from '../images/ui-kit/cj-logo-2021.svg';
+import logoSvg from '../../src/images/ui-kit/cj-logo-2021.svg';
 import './CJLogo.css';
 
 const CJLogo = ({ className, useStandardPadding = true, ...restProps }) => (
@@ -12,14 +12,15 @@ const CJLogo = ({ className, useStandardPadding = true, ...restProps }) => (
     className={classNames(
       'vs-cj-logo',
       'vs-cj-logo-svg',
-      className,
-      useStandardPadding && 'vs-cj-logo-padded'
+      useStandardPadding && 'vs-cj-logo-padded',
+      className
     )}
   />
 );
 
 CJLogo.propTypes = {
   className: PropTypes.string,
+  useStandardPadding: PropTypes.bool,
 };
 
 export default CJLogo;

packages/visual-stack/src/components/CJLogo.js

@@ -6,7 +6,7 @@ import Account from 'mdi-react/AccountCircleIcon';
 import Logout from 'mdi-react/LogoutIcon';
 import Settings from 'mdi-react/SettingsIcon';
 import Product from 'mdi-react/PackageVariantClosedIcon';
-import CJLogo from '../CJLogo';
+import CJLogo from '../../components/CJLogo';
 import classNames from 'classnames';
 
 export const AccountIcon = Account;