Additional Icons

.storybook/.babelrc

@@ -1,27 +1,26 @@
 {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "modules": "commonjs",
-          "targets": {
-            "chrome": "49",
-            "ie": "11",
-            "firefox": "51",
-            "edge": "14"
-          }
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": "commonjs",
+        "targets": {
+          "chrome": "49",
+          "ie": "11",
+          "firefox": "51",
+          "edge": "14"
         }
-      ],
-      "@babel/preset-react"
+      }
     ],
-    "plugins": [
-      "react-require",
-      [
-        "@babel/plugin-proposal-class-properties",
-        {
-          "loose": true
-        }
-      ]
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "react-require",
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
     ]
+  ]
 }
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {
@@ -42,7 +42,7 @@
     "@react-hook/merged-ref": "^1.3.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.19",
-    "monday-ui-style": "0.0.28",
+    "monday-ui-style": "0.0.29",
     "prop-types": "^15.7.2",
     "react-inlinesvg": "^2.1.1",
     "react-popper": "^2.2.3",

src/components/Icon/Icons/components/Bold.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Bold = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <g fill="currentColor" clipPath="url(#clip0)" fillRule="evenodd" clipRule="evenodd">
+      <path d="M6.84395 2.7332H11.3773C12.4912 2.7332 13.5595 3.17571 14.3472 3.96339C15.1349 4.75107 15.5774 5.81939 15.5774 6.93333C15.5774 8.04727 15.1349 9.11559 14.3472 9.90327C13.5595 10.6909 12.4912 11.1335 11.3773 11.1335H5.77728C5.07765 11.1335 4.51048 10.5663 4.51048 9.86666V5.06666C4.51048 4.44779 4.75633 3.85426 5.19394 3.41666C5.63155 2.97905 6.22507 2.7332 6.84395 2.7332ZM7.04407 5.26679H11.3773C11.8193 5.26679 12.2432 5.44237 12.5557 5.75491C12.8682 6.06745 13.0438 6.49134 13.0438 6.93333C13.0438 7.37532 12.8682 7.79921 12.5557 8.11175C12.2432 8.42429 11.8193 8.59987 11.3773 8.59987H7.04407V5.26679Z"
+      />
+      <path d="M4.51048 9.86666C4.51048 9.16703 5.07765 8.59987 5.77728 8.59987H11.3239C12.5793 8.59987 13.7833 9.09857 14.671 9.98627C15.5587 10.874 16.0574 12.0779 16.0574 13.3333C16.0574 14.5877 15.5595 15.7908 14.6731 16.6783C13.7866 17.5659 12.5842 18.0653 11.3298 18.0668L6.84821 18.0668C6.22934 18.0668 5.63581 17.821 5.1982 17.3833C4.7606 16.9457 4.51475 16.3522 4.51475 15.7333V9.97139C4.51192 9.93685 4.51048 9.90193 4.51048 9.86666ZM7.04834 11.1335V15.5332H11.3273C11.9101 15.5323 12.4686 15.3002 12.8805 14.8879C13.2924 14.4754 13.5238 13.9163 13.5238 13.3333C13.5238 12.7499 13.292 12.1903 12.8795 11.7778C12.4669 11.3652 11.9074 11.1335 11.3239 11.1335H7.04834Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <path fill="#fff" transform="translate(2 2)" d="M0 0H16V16H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+Bold.displayName = 'Bold';
+Bold.propTypes = {
+  size: PropTypes.string
+}
+export default Bold;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/Comment.js

@@ -0,0 +1,17 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Comment = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <path d="M5.18462 3.75C5.09383 3.75 5.00676 3.78606 4.94257 3.85026C4.87837 3.91445 4.84231 4.00152 4.84231 4.09231V13.9231C4.84231 14.0037 4.82931 14.0838 4.80382 14.1602L4.14356 16.141L7.18733 15.3801C7.24682 15.3652 7.30791 15.3577 7.36923 15.3577H16.1077C16.1985 15.3577 16.2855 15.3216 16.3497 15.2574C16.4139 15.1932 16.45 15.1062 16.45 15.0154V4.09231C16.45 4.00152 16.4139 3.91446 16.3497 3.85026C16.2855 3.78606 16.1985 3.75 16.1077 3.75H5.18462ZM3.88191 2.7896C4.22741 2.4441 4.69601 2.25 5.18462 2.25H16.1077C16.5963 2.25 17.0649 2.4441 17.4104 2.7896C17.7559 3.1351 17.95 3.6037 17.95 4.09231V15.0154C17.95 15.504 17.7559 15.9726 17.4104 16.3181C17.0649 16.6636 16.5963 16.8577 16.1077 16.8577H7.46156L3.1819 17.9276C2.91634 17.994 2.6357 17.9104 2.44971 17.7096C2.26372 17.5087 2.20192 17.2225 2.28849 16.9628L3.34231 13.8014V4.09231C3.34231 3.6037 3.53641 3.1351 3.88191 2.7896Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
+  </svg>
+);
+Comment.displayName = 'Comment';
+Comment.propTypes = {
+  size: PropTypes.string
+}
+export default Comment;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/Emoji.js

@@ -0,0 +1,21 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Emoji = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <path d="M4.57981 4.5798C6.04386 3.11575 8.02953 2.29326 10.1 2.29326C12.1705 2.29326 14.1561 3.11575 15.6202 4.5798C17.0842 6.04384 17.9067 8.02952 17.9067 10.1C17.9067 12.1705 17.0842 14.1561 15.6202 15.6202C14.1561 17.0842 12.1705 17.9067 10.1 17.9067C8.02953 17.9067 6.04386 17.0842 4.57981 15.6202C3.11576 14.1561 2.29327 12.1705 2.29327 10.1C2.29327 8.02952 3.11576 6.04384 4.57981 4.5798ZM10.1 3.70672C8.4044 3.70672 6.77825 4.38029 5.57928 5.57927C4.38031 6.77824 3.70673 8.40439 3.70673 10.1C3.70673 11.7956 4.38031 13.4217 5.57928 14.6207C6.77825 15.8197 8.4044 16.4933 10.1 16.4933C11.7956 16.4933 13.4218 15.8197 14.6207 14.6207C15.8197 13.4217 16.4933 11.7956 16.4933 10.1C16.4933 8.40439 15.8197 6.77824 14.6207 5.57927C13.4218 4.38029 11.7956 3.70672 10.1 3.70672Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
+    <path d="M6.25644 10.5141C6.63105 10.4044 7.0236 10.6192 7.13324 10.9938C7.32099 11.6352 7.71156 12.1986 8.24643 12.5993C8.7813 13.0001 9.43165 13.2167 10.1 13.2167C10.7683 13.2167 11.4187 13.0001 11.9536 12.5993C12.4884 12.1986 12.879 11.6352 13.0668 10.9938C13.1764 10.6192 13.569 10.4044 13.9436 10.5141C14.3182 10.6237 14.5329 11.0163 14.4233 11.3909C14.1497 12.3256 13.5805 13.1465 12.8011 13.7305C12.0217 14.3145 11.074 14.6301 10.1 14.6301C9.12605 14.6301 8.17833 14.3145 7.39889 13.7305C6.61945 13.1465 6.05028 12.3256 5.77669 11.3909C5.66705 11.0163 5.88184 10.6237 6.25644 10.5141Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
+    <path d="M13 8C13 8.55228 12.5523 9 12 9 11.4477 9 11 8.55228 11 8 11 7.44772 11.4477 7 12 7 12.5523 7 13 7.44772 13 8zM9 8C9 8.55228 8.55228 9 8 9 7.44772 9 7 8.55228 7 8 7 7.44772 7.44772 7 8 7 8.55228 7 9 7.44772 9 8z"
+      fill="currentColor" />
+  </svg>
+);
+Emoji.displayName = 'Emoji';
+Emoji.propTypes = {
+  size: PropTypes.string
+}
+export default Emoji;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/Highlight.js

@@ -0,0 +1,19 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Highlight = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <path d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H17C17.4142 16.25 17.75 16.5858 17.75 17C17.75 17.4142 17.4142 17.75 17 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z"
+      fill="currentColor" className="highlight-bar" fillRule="evenodd" clipRule="evenodd" />
+    <path d="M14.5189 3.81513C14.5189 3.81516 14.5189 3.81511 14.5189 3.81513L7.45395 10.8801L7.1005 12.9032L9.11938 12.5466L16.1849 5.48108C16.1849 5.48105 16.1848 5.4811 16.1849 5.48108C16.2542 5.41166 16.2933 5.31747 16.2933 5.21935C16.2933 5.12122 16.2543 5.02711 16.1849 4.95769M16.1849 4.95769L15.0424 3.81513C15.0424 3.81511 15.0424 3.81516 15.0424 3.81513C14.973 3.74578 14.8788 3.70674 14.7807 3.70674C14.6825 3.70674 14.5883 3.74578 14.5189 3.81513M13.5196 2.8155C13.8541 2.48111 14.3077 2.29326 14.7807 2.29326C15.2536 2.29326 15.7072 2.48111 16.0417 2.8155L17.1844 3.95821C17.5188 4.2927 17.7067 4.74638 17.7067 5.21935C17.7067 5.69232 17.5189 6.14592 17.1845 6.48041L9.96138 13.7035C9.85888 13.806 9.72734 13.8745 9.58459 13.8997L6.35377 14.4705C6.12686 14.5106 5.89464 14.4376 5.73155 14.2748C5.56846 14.112 5.49496 13.8799 5.53462 13.6529L6.10002 10.4167C6.12504 10.2735 6.19365 10.1414 6.29647 10.0386L13.5196 2.8155Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
+  </svg>
+);
+Highlight.displayName = 'Highlight';
+Highlight.propTypes = {
+  size: PropTypes.string
+}
+export default Highlight;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/Italic.js

@@ -0,0 +1,21 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Italic = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <g fill="currentColor" fillRule="evenodd" clipRule="evenodd">
+      <path d="M13.2523 2.2937C13.6423 2.43301 13.8456 2.86218 13.7063 3.25226L8.70631 17.2523C8.567 17.6423 8.13784 17.8456 7.74775 17.7063C7.35767 17.567 7.15438 17.1378 7.2937 16.7478L12.2937 2.74775C12.433 2.35767 12.8622 2.15438 13.2523 2.2937Z"
+      />
+      <path d="M7.25 3C7.25 2.58579 7.58579 2.25 8 2.25H17C17.4142 2.25 17.75 2.58579 17.75 3 17.75 3.41421 17.4142 3.75 17 3.75H8C7.58579 3.75 7.25 3.41421 7.25 3zM3.25 17C3.25 16.5858 3.58579 16.25 4 16.25H13C13.4142 16.25 13.75 16.5858 13.75 17 13.75 17.4142 13.4142 17.75 13 17.75H4C3.58579 17.75 3.25 17.4142 3.25 17z"
+      />
+    </g>
+  </svg>
+);
+Italic.displayName = 'Italic';
+Italic.propTypes = {
+  size: PropTypes.string
+}
+export default Italic;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/Redo.js

@@ -0,0 +1,19 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const Redo = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <path d="M6.62673 4.4844C6.91149 4.76915 6.91149 5.23084 6.62673 5.51559L3.80899 8.33333L6.62673 11.1511C6.91149 11.4358 6.91149 11.8975 6.62673 12.1823C6.34197 12.467 5.88029 12.467 5.59553 12.1823L2.2622 8.84893C1.97744 8.56417 1.97744 8.10249 2.2622 7.81773L5.59553 4.4844C5.88029 4.19964 6.34197 4.19964 6.62673 4.4844Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
+    <path d="M2.04863 8.33334C2.04863 7.93063 2.37509 7.60417 2.7778 7.60417H12.7778C14.1499 7.60417 15.4659 8.14925 16.4361 9.11949C17.4063 10.0897 17.9514 11.4057 17.9514 12.7778V15C17.9514 15.4027 17.6249 15.7292 17.2222 15.7292C16.8195 15.7292 16.4931 15.4027 16.4931 15V12.7778C16.4931 11.7924 16.1016 10.8474 15.4049 10.1507C14.7081 9.45393 13.7632 9.06251 12.7778 9.06251H2.7778C2.37509 9.06251 2.04863 8.73605 2.04863 8.33334Z"
+      fill="currentColor" fillRule="evenodd" clipRule="evenodd" />
+  </svg>
+);
+Redo.displayName = 'Redo';
+Redo.propTypes = {
+  size: PropTypes.string
+}
+export default Redo;
+/* tslint:enable */
+/* eslint-enable */

src/components/Icon/Icons/components/StrikethroughS.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* tslint:disable */
+import PropTypes from 'prop-types';
+import React from 'react';
+const StrikethroughS = ({size, ...props}) => (
+  <svg viewBox="0 0 20 20" fill="currentColor" width={ size || "20" } height={ size || "20" } {...props}>
+    <g fill="currentColor" clipPath="url(#clip0)" fillRule="evenodd" clipRule="evenodd">
+      <path d="M13.0282 11.2033C13.3426 10.9336 13.8161 10.9698 14.0858 11.2842 14.4291 11.6843 14.687 12.1504 14.8436 12.6538 15.0003 13.1572 15.0524 13.6873 14.9968 14.2116 14.9411 14.7359 14.7789 15.2432 14.5201 15.7026 14.2613 16.1619 13.9114 16.5635 13.4918 16.8826 13.4818 16.8902 13.4717 16.8975 13.4614 16.9045 12.4484 17.5982 11.2604 17.9925 10.0336 18.0423 8.80686 18.092 7.59087 17.7953 6.52494 17.186L6.52081 17.1836 6.52082 17.1836 5.50024 16.5916C5.14195 16.3838 5.01997 15.9248 5.22781 15.5665 5.43565 15.2082 5.89459 15.0863 6.25289 15.2941L7.27135 15.8849C8.09218 16.3536 9.02836 16.5818 9.97283 16.5435 10.9116 16.5054 11.8209 16.2055 12.598 15.6778 12.8485 15.4842 13.0578 15.2422 13.2133 14.9662 13.3718 14.685 13.4711 14.3743 13.5051 14.0533 13.5392 13.7323 13.5073 13.4077 13.4114 13.0995 13.3154 12.7913 13.1575 12.5059 12.9473 12.2609 12.6776 11.9466 12.7138 11.4731 13.0282 11.2033zM9.11638 1.97235C10.7629 1.87328 12.544 2.36625 13.7644 2.97738 14.1348 3.16285 14.2847 3.61344 14.0992 3.98382 13.9137 4.35419 13.4631 4.50408 13.0928 4.31861 12.056 3.79947 10.5371 3.38957 9.20648 3.46964 8.54773 3.50928 7.97837 3.66624 7.53823 3.94689 7.11257 4.21832 6.77115 4.6274 6.58114 5.25581 6.47832 5.60027 6.46649 5.96549 6.54681 6.31588 6.62278 6.64732 6.77875 6.95479 7.0007 7.2116 7.84731 7.86352 8.77239 8.40678 9.75432 8.82861 10.1349 8.9921 10.3109 9.43316 10.1474 9.81375 9.9839 10.1943 9.54283 10.3703 9.16225 10.2068 8.04211 9.72561 6.98817 9.10298 6.02616 8.35411 5.99297 8.32827 5.96201 8.29969 5.93361 8.26866 5.51555 7.81191 5.22307 7.25456 5.08473 6.65102 4.94639 6.04748 4.96691 5.41838 5.14429 4.82514L5.14488 4.82317 5.14488 4.82317C5.43779 3.8533 6.00123 3.14796 6.73177 2.68214 7.44806 2.2254 8.28655 2.02229 9.11638 1.97235z"
+      />
+      <path d="M1.82143 9.56686C1.82143 9.15265 2.15721 8.81686 2.57143 8.81686H17.4286C17.8428 8.81686 18.1786 9.15265 18.1786 9.56686C18.1786 9.98108 17.8428 10.3169 17.4286 10.3169H2.57143C2.15721 10.3169 1.82143 9.98108 1.82143 9.56686Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <path fill="#fff" transform="translate(2 2)" d="M0 0H16V16H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+StrikethroughS.displayName = 'StrikethroughS';
+StrikethroughS.propTypes = {
+  size: PropTypes.string
+}
+export default StrikethroughS;
+/* tslint:enable */
+/* eslint-enable */