Merge pull request #13 from mondaycom/components/Iorr/SVG-icons

Components/iorr/svg icons
mondaycom · Oct 19, 2020 · cdb97b2 · cdb97b2
2 parents 7fb6e15 + a095bab
commit cdb97b2
Show file tree

Hide file tree

Showing 70 changed files with 1,807 additions and 426 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,13 +9,14 @@
     "auto:bump-major": "node scripts/autobump_major.js",
     "test": "./node_modules/karma/bin/karma start",
     "test-ci": "./node_modules/karma/bin/karma start --single-run",
-    "start": "webpack --mode production --watch --config webpack/default.config.js",
-    "build": "webpack --mode production --config webpack/default.config.js",
-    "storybook": "start-storybook -p 7007",
+    "start": "npm run build-react-icons && webpack --mode production --watch --config webpack/default.config.js",
+    "build": "npm run build-react-icons && webpack --mode production --config webpack/default.config.js",
+    "storybook": "npm run build-react-icons && start-storybook -p 7007",
     "build-storybook": "build-storybook",
     "deploy-storybook": "storybook-to-ghpages",
     "link-local": "npm link && npm start",
-    "plop": "plop"
+    "plop": "plop",
+    "build-react-icons": "svg2react-icon --keep-colors node_modules/monday-ui-style/src/Icons src/components/Icon/Icons"
   },
   "repository": {
     "type": "git",
@@ -34,11 +35,13 @@
   },
   "homepage": "https://github.com/mondaycom/monday-ui-react-core#readme",
   "dependencies": {
-    "monday-ui-style": "^0.0.1",
     "@popperjs/core": "^2.4.3",
+    "@react-hook/merged-ref": "^1.3.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.19",
+    "monday-ui-style": "0.0.9",
     "prop-types": "^15.7.2",
+    "react-inlinesvg": "^2.1.1",
     "react-popper": "^2.2.3",
     "react-transition-group": "^4.4.1"
   },
@@ -118,6 +121,7 @@
     "sinon-chai": "^3.5.0",
     "storybook-addon-themes": "^5.4.1",
     "style-loader": "^1.0.0",
+    "svg2react-icon": "^3.1.174",
     "terser-webpack-plugin": "^4.1.0",
     "vue": "^2.6.11",
     "webpack": "^4.43.0",

diff --git a/plop/component/component-js.txt b/plop/component/component-js.txt
@@ -14,7 +14,11 @@ const {{properCase componentName}} = ({
   );
 };
 
-{{properCase componentName}}.defaultProps = {};
-{{properCase componentName}}.propTypes = {};
+{{properCase componentName}}.defaultProps = {
+    componentClassName: PropTypes.string,
+};
+{{properCase componentName}}.propTypes = {
+    componentClassName: ""
+};
 
 export default {{properCase componentName}};
diff --git a/plop/component/component-scss.txt b/plop/component/component-scss.txt
@@ -1,4 +1,5 @@
 @import "../../styles/themes.scss";
+@import "../../styles/typography.scss";
 
 .{{dashCase componentName}}--wrapper {
 

diff --git a/plopfile.js b/plopfile.js
@@ -1,5 +1,5 @@
-const Component = require('./plop/component');
+const Component = require("./plop/component");
 
 module.exports = plop => {
-    Component(plop);
+  Component(plop);
 };
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
@@ -149,9 +149,11 @@ const Button = ({
       <button {...buttonProps}>
         {successIcon ? (
           <Icon
+            iconType={Icon.type.ICON_FONT}
             clickable={false}
-            iconName={successIcon}
+            icon={successIcon}
             className={cx({ "monday-style-button--left-icon": !!successText })}
+            ignoreFocusStyle
           />
         ) : null}
         {successText}
@@ -163,17 +165,21 @@ const Button = ({
     <button {...buttonProps}>
       {leftIcon ? (
         <Icon
+          iconType={Icon.type.ICON_FONT}
           clickable={false}
-          iconName={leftIcon}
+          icon={leftIcon}
           className={cx({ "monday-style-button--left-icon": !!children })}
+          ignoreFocusStyle
         />
       ) : null}
       {children}
       {rightIcon ? (
         <Icon
+            iconType={Icon.type.ICON_FONT}
           clickable={false}
-          iconName={rightIcon}
+          icon={rightIcon}
           className={cx({ "monday-style-button--right-icon": !!children })}
+          ignoreFocusStyle
         />
       ) : null}
     </button>
@@ -241,7 +247,6 @@ Button.defaultProps = {
 
 Button.sizes = BUTTON_SIZES;
 Button.colors = BUTTON_COLORS;
-Button.kind = BUTTON_TYPES;
 Button.kinds = BUTTON_TYPES;
 Button.inputTags = BUTTON_INPUT_TYPE;