npm - @platformatic/ui-components - Versions diffs - 0.1.121 → 0.1.123 - Mend

@platformatic/ui-components 0.1.121 → 0.1.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/assets/{index-d72b255b.css → index-3a61658e.css} +1 -1
package/dist/assets/index-8f6ac36c.js +206 -0
package/dist/index.html +2 -2
package/dist/main.css +14 -8
package/package.json +1 -1
package/src/components/FollowUs.jsx +7 -5
package/src/components/FollowUs.module.css +0 -6
package/src/components/HorizontalSeparator.jsx +2 -2
package/src/components/icons/ApiPerformanceIcon.jsx +100 -0
package/src/components/icons/ApplicationTypeIcon.jsx +51 -0
package/src/components/icons/ArrowLongRightIcon.jsx +77 -0
package/src/components/icons/CloudIcon.jsx +77 -0
package/src/components/icons/DepencenciesReloadIcon.jsx +90 -0
package/src/components/icons/EditDocumentIcon.jsx +97 -0
package/src/components/icons/GitHubRepo2Icon.jsx +86 -0
package/src/components/icons/ImportApplicationIcon.jsx +52 -0
package/src/components/icons/OutOfBoxGraphQLIcon.jsx +112 -0
package/src/components/icons/PlatformaticComposerIcon.jsx +79 -0
package/src/components/icons/PlatformaticDBIcon.jsx +99 -0
package/src/components/icons/PlatformaticRuntimeIcon.jsx +91 -0
package/src/components/icons/PlatformaticServiceIcon.jsx +91 -0
package/src/components/icons/PreviewPRIcon.jsx +100 -0
package/src/components/icons/SocialXIcon.jsx +79 -0
package/src/components/icons/index.js +30 -2
package/tailwind.config.cjs +8 -4
package/dist/assets/index-b5325ff4.js +0 -206
package/src/components/icons/SocialTwitterIcon.jsx +0 -78

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Platformatic UI Components</title>
-    <script type="module" crossorigin src="/assets/index-b5325ff4.js"></script>
-    <link rel="stylesheet" href="/assets/index-d72b255b.css">
+    <script type="module" crossorigin src="/assets/index-8f6ac36c.js"></script>
+    <link rel="stylesheet" href="/assets/index-3a61658e.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/main.css CHANGED Viewed

@@ -540,21 +540,27 @@ video {
   margin-left: auto;
 }
-@media (min-width: 640px) {
+@media (min-width: 350px) {
   .container {
-    max-width: 640px;
+    max-width: 350px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 390px) {
   .container {
-    max-width: 768px;
+    max-width: 390px;
   }
 }
-@media (min-width: 1280px) {
+@media (min-width: 744px) {
   .container {
-    max-width: 1280px;
+    max-width: 744px;
+  }
+}
+@media (min-width: 1240px) {
+  .container {
+    max-width: 1240px;
   }
 }
@@ -564,9 +570,9 @@ video {
   }
 }
-@media (min-width: 1536px) {
+@media (min-width: 1920px) {
   .container {
-    max-width: 1536px;
+    max-width: 1920px;
   }
 }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.121",
+  "version": "0.1.123",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/FollowUs.jsx CHANGED Viewed

@@ -1,16 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import commonStyles from './Common.module.css'
 import styles from './FollowUs.module.css'
 import Icons from './icons'
 import { MAIN_GREEN, WHITE, MEDIUM, SMALL, MAIN_DARK_BLUE, LIGHT_GREEN } from './constants'
-function FollowUs ({ label, useOnFrontpage, iconColor, iconSize, labelColor }) {
+function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize, labelColor }) {
   const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
   const className = styles[`container${suffix}`]
   const iconClassName = styles[`icon${suffix}`]
-  let labelClassName = styles[`label${suffix}`]
-  labelClassName += ' ' + commonStyles[`text--${labelColor}`]
   return (
     <div className={className}>
@@ -19,7 +16,7 @@ function FollowUs ({ label, useOnFrontpage, iconColor, iconSize, labelColor }) {
       </div>
       <div className={iconClassName}>
         <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <Icons.SocialTwitterIcon color={iconColor} size={iconSize} />
+          <Icons.SocialXIcon color={iconColor} size={iconSize} />
         </a>
       </div>
       <div className={iconClassName}>
@@ -46,6 +43,10 @@ FollowUs.propTypes = {
    * label
    */
   label: PropTypes.string,
+  /**
+   * labelClassName
+   */
+  labelClassName: PropTypes.string,
   /**
    * frontPageAspect
    */
@@ -66,6 +67,7 @@ FollowUs.propTypes = {
 FollowUs.defaultProps = {
   label: 'Follow us on',
+  labelClassName: '',
   useOnFrontpage: true,
   labelColor: LIGHT_GREEN,
   iconColor: WHITE,

package/src/components/FollowUs.module.css CHANGED Viewed

@@ -4,12 +4,6 @@
 .containerDashboard {
   @apply flex items-center;
 }
-.labelFrontpage {
-  @apply uppercase tracking-more-widest text-sm mr-8;
-}
-.labelDashboard {
-  @apply text-xs mr-2;
-}
 .iconFrontpage {
   @apply text-white text-xl hover:cursor-pointer hover:scale-125;
 }

package/src/components/HorizontalSeparator.jsx CHANGED Viewed

@@ -2,7 +2,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'
-import { DARK_GREEN, MAIN_DARK_BLUE } from './constants'
+import { DARK_GREEN, MAIN_DARK_BLUE, WHITE } from './constants'
 import styles from './HorizontalSeparator.module.css'
 function HorizontalSeparator ({ marginTop, marginBottom, color, opacity }) {
   function getClassName () {
@@ -29,7 +29,7 @@ HorizontalSeparator.propTypes = {
   /**
    * color
    */
-  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE]),
+  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE, WHITE]),
   /**
    * opacity
    */

package/src/components/icons/ApiPerformanceIcon.jsx ADDED Viewed

@@ -0,0 +1,100 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+const ApiPerformanceIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M7.2002 13L8.27465 10H8.82565L9.90355 13H9.31811L8.43651 10.3514H8.65691L7.77186 13H7.2002ZM7.73742 12.3571L7.8855 11.83H9.12526L9.27678 12.3571H7.73742Z' fill='none' className={filledClassName} />
+          <path d='M10.1537 13V10H11.1971C11.4129 10 11.5989 10.0443 11.755 10.1329C11.9111 10.2186 12.0316 10.3429 12.1166 10.5057C12.2015 10.6686 12.244 10.8629 12.244 11.0886C12.244 11.3114 12.2015 11.5043 12.1166 11.6671C12.0316 11.83 11.9111 11.9557 11.755 12.0443C11.5989 12.13 11.4129 12.1729 11.1971 12.1729H10.4636L10.7115 11.86V13H10.1537ZM10.7115 11.9371L10.4636 11.6071H11.1661C11.3383 11.6071 11.4669 11.5614 11.5518 11.47C11.6368 11.3786 11.6792 11.2514 11.6792 11.0886C11.6792 10.9229 11.6368 10.7943 11.5518 10.7029C11.4669 10.6114 11.3383 10.5657 11.1661 10.5657H10.4636L10.7115 10.2357V11.9371Z' fill='none' className={filledClassName} />
+          <path d='M12.6423 13V10H13.2002V13H12.6423Z' fill='none' className={filledClassName} />
+          <path d='M14 14V9H6.5V14H14Z' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 7.5V5.5C6 5.22386 5.77614 5 5.5 5H4.5C4.22386 5 4 5.22386 4 5.5V11.5C4 11.7761 4.22386 12 4.5 12H5' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 7.5V3.5C10 3.22386 9.77614 3 9.5 3H8.5C8.22386 3 8 3.22386 8 3.5V7.5' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14 7.5V2.5C14 2.22386 13.7761 2 13.5 2H12.5C12.2239 2 12 2.22386 12 2.5V7.5' stroke='white' strokeLinecap='round' />
+          <path d='M2 2V14H4.5' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M10.8003 19.5L12.412 15H13.2385L14.8553 19.5H13.9772L12.6548 15.5271H12.9854L11.6578 19.5H10.8003ZM11.6061 18.5357L11.8283 17.745H13.6879L13.9152 18.5357H11.6061Z' fill='none' className={filledClassName} />
+          <path d='M15.2305 19.5V15H16.7957C17.1194 15 17.3983 15.0664 17.6325 15.1993C17.8667 15.3279 18.0475 15.5143 18.1749 15.7586C18.3023 16.0029 18.366 16.2943 18.366 16.6329C18.366 16.9671 18.3023 17.2564 18.1749 17.5007C18.0475 17.745 17.8667 17.9336 17.6325 18.0664C17.3983 18.195 17.1194 18.2593 16.7957 18.2593H15.6954L16.0673 17.79V19.5H15.2305ZM16.0673 17.9057L15.6954 17.4107H16.7492C17.0075 17.4107 17.2003 17.3421 17.3277 17.205C17.4551 17.0679 17.5189 16.8771 17.5189 16.6329C17.5189 16.3843 17.4551 16.1914 17.3277 16.0543C17.2003 15.9171 17.0075 15.8486 16.7492 15.8486H15.6954L16.0673 15.3536V17.9057Z' fill='none' className={filledClassName} />
+          <path d='M18.9635 19.5V15H19.8003V19.5H18.9635Z' fill='none' className={filledClassName} />
+          <path d='M21 21V13.5H9.75V21H21Z' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9 11.25V8C9 7.72386 8.77614 7.5 8.5 7.5H6.5C6.22386 7.5 6 7.72386 6 8V17.5C6 17.7761 6.22386 18 6.5 18H7.5' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 11.25V5C15 4.72386 14.7761 4.5 14.5 4.5H12.5C12.2239 4.5 12 4.72386 12 5V11.25' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21 11.25V3.5C21 3.22386 20.7761 3 20.5 3H18.5C18.2239 3 18 3.22386 18 3.5V11.25' stroke='white' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M3 3V21H6.75' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M18.0005 32.5L20.6866 25H22.0641L24.7589 32.5H23.2953L21.0913 25.8786H21.6423L19.4296 32.5H18.0005ZM19.3436 30.8929L19.7138 29.575H22.8131L23.192 30.8929H19.3436Z' fill='none' className={filledClassName} />
+          <path d='M25.3841 32.5V25H27.9928C28.5323 25 28.9972 25.1107 29.3875 25.3321C29.7778 25.5464 30.0791 25.8571 30.2915 26.2643C30.5039 26.6714 30.61 27.1571 30.61 27.7214C30.61 28.2786 30.5039 28.7607 30.2915 29.1679C30.0791 29.575 29.7778 29.8893 29.3875 30.1107C28.9972 30.325 28.5323 30.4321 27.9928 30.4321H26.159L26.7788 29.65V32.5H25.3841ZM26.7788 29.8429L26.159 29.0179H27.9153C28.3458 29.0179 28.6672 28.9036 28.8795 28.675C29.0919 28.4464 29.1981 28.1286 29.1981 27.7214C29.1981 27.3071 29.0919 26.9857 28.8795 26.7571C28.6672 26.5286 28.3458 26.4143 27.9153 26.4143H26.159L26.7788 25.5893V29.8429Z' fill='none' className={filledClassName} />
+          <path d='M31.6058 32.5V25H33.0005V32.5H31.6058Z' fill='none' className={filledClassName} />
+          <path d='M35 35V22.5H16.25V35H35Z' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 18.75V13C15 12.7239 14.7761 12.5 14.5 12.5H10.5C10.2239 12.5 10 12.7239 10 13V29.5C10 29.7761 10.2239 30 10.5 30H12.5' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25 18.75V8C25 7.72386 24.7761 7.5 24.5 7.5H20.5C20.2239 7.5 20 7.72386 20 8V18.75' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M35 18.75V5.5C35 5.22386 34.7761 5 34.5 5H30.5C30.2239 5 30 5.22386 30 5.5V18.75' stroke='white' strokeWidth={2} strokeLinecap='round' />
+          <path d='M5 5V35H11.25' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+ApiPerformanceIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+ApiPerformanceIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+export default ApiPerformanceIcon

package/src/components/icons/ApplicationTypeIcon.jsx ADDED Viewed

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, LARGE, MAIN_DARK_BLUE } from '../constants'
+const ApplicationTypeIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={17.5} y={15.0002} width={17.5} height={20} stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M27.5 14.4447V10.0002H10V30.0002H17.5' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M10 22.5002H5V5.00021H22.5V8.8891' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M26.25 20.0002L27.6532 24.3189H32.1941L28.5204 26.9879L29.9237 31.3066L26.25 28.6375L22.5763 31.3066L23.9796 26.9879L20.3059 24.3189H24.8468L26.25 20.0002Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+ApplicationTypeIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+ApplicationTypeIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: LARGE
+}
+export default ApplicationTypeIcon

package/src/components/icons/ArrowLongRightIcon.jsx ADDED Viewed

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+const ArrowLongRightIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9.2 13L14 8.2M14 8.2L9.2 3.4M14 8.2L2 8.2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M13.8 19.5L21 12.3M21 12.3L13.8 5.1M21 12.3L3 12.3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M23 32.5L35 20.5M35 20.5L23 8.5M35 20.5L5 20.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+ArrowLongRightIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+ArrowLongRightIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+export default ArrowLongRightIcon

package/src/components/icons/CloudIcon.jsx ADDED Viewed

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+const CloudIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M4.01481 11.1923C2.89719 11.1626 2 10.2261 2 9.032C2 7.83788 2.92622 6.86983 4.06874 6.86983C4.13748 6.86983 4.20563 6.87355 4.27319 6.88036C4.68978 5.77915 5.71674 5 6.91852 5C8.20207 5 9.28652 5.88877 9.64089 7.11014C9.92474 6.95716 10.2459 6.87045 10.5873 6.87045C11.3748 6.87045 12.0593 7.33001 12.4089 8.00697C12.4308 8.00573 12.4527 8.00511 12.4747 8.00511C13.3167 8.00511 14 8.71861 14 9.59933C14 10.454 13.3564 11.1514 12.5481 11.1917V11.1935L4.01481 11.1923ZM4.01481 11.1923V11.1935' stroke='none' strokeWidth={1.02} strokeMiterlimit={10} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M6.02222 16.7885C4.34578 16.7439 3 15.3392 3 13.548C3 11.7568 4.38933 10.3047 6.10311 10.3047C6.20622 10.3047 6.30844 10.3103 6.40978 10.3205C7.03467 8.66872 8.57511 7.5 10.3778 7.5C12.3031 7.5 13.9298 8.83316 14.4613 10.6652C14.8871 10.4357 15.3689 10.3057 15.8809 10.3057C17.0622 10.3057 18.0889 10.995 18.6133 12.0105C18.6462 12.0086 18.6791 12.0077 18.712 12.0077C19.9751 12.0077 21 13.0779 21 14.399C21 15.6811 20.0347 16.7271 18.8222 16.7875V16.7903L6.02222 16.7885ZM6.02222 16.7885V16.7903' stroke='none' strokeWidth={1.5} strokeMiterlimit={10} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M10.037 27.9808C7.24296 27.9064 5 25.5653 5 22.58C5 19.5947 7.31556 17.1746 10.1719 17.1746C10.3437 17.1746 10.5141 17.1839 10.683 17.2009C11.7244 14.4479 14.2919 12.5 17.2963 12.5C20.5052 12.5 23.2163 14.7219 24.1022 17.7754C24.8119 17.3929 25.6148 17.1761 26.4681 17.1761C28.437 17.1761 30.1481 18.325 31.0222 20.0174C31.077 20.0143 31.1319 20.0128 31.1867 20.0128C33.2919 20.0128 35 21.7965 35 23.9983C35 26.1351 33.3911 27.8786 31.3704 27.9792V27.9839L10.037 27.9808ZM10.037 27.9808V27.9839' stroke='none' strokeWidth={2} strokeMiterlimit={10} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+CloudIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+CloudIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+export default CloudIcon

package/src/components/icons/DepencenciesReloadIcon.jsx ADDED Viewed

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+const DepencenciesReloadIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M7.5 4.68387L10.5 4.68384V7.5M4 4.68387L2 4.68387V10.3981H6V12.1296H4V13.4283H7' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.69783 2L4.5 2.95237M5.69783 2L7 2.95237M5.69783 2V5.33329M5.69783 5.33329L3.5 8.19039H8L5.69783 5.33329Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.19653 9.85861C8.68912 9.14007 9.53144 8.6665 10.4878 8.6665C12.0063 8.6665 13.2373 9.86043 13.2373 11.3332C13.2373 11.601 13.1966 11.8596 13.1209 12.1035M7.7763 10.8888C7.7513 11.0333 7.73828 11.1818 7.73828 11.3332C7.73828 12.806 8.96928 13.9999 10.4878 13.9999C11.309 13.9999 12.0461 13.6507 12.5499 13.0971' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.3896 11.2666L13.1079 12.1322L14.0004 11.4356' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.61621 11.521L7.75277 10.7907L6.99981 11.6281' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M11.25 7.02592L15.75 7.02588V11.2501M6 7.02592L3 7.02592V15.5973H9V18.1945H6V20.1425H10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.54675 3L6.75 4.42855M8.54675 3L10.5 4.42855M8.54675 3V7.99993M8.54675 7.99993L5.25 12.2856H12L8.54675 7.99993Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.2953 14.7879C13.0342 13.7101 14.2976 12.9998 15.7322 12.9998C18.01 12.9998 19.8565 14.7906 19.8565 16.9998C19.8565 17.4016 19.7954 17.7895 19.6818 18.1553M11.6649 16.3331C11.6274 16.55 11.6079 16.7727 11.6079 16.9998C11.6079 19.209 13.4544 20.9999 15.7322 20.9999C16.964 20.9999 18.0697 20.4761 18.8254 19.6457' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M18.5845 16.8999L19.6619 18.1984L21.0006 17.1534' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.9248 17.2812L11.6296 16.1858L10.5002 17.442' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M18.75 11.7098L26.25 11.7097V18.7501M10 11.7098L5 11.7098V25.9953H15V30.3241H10V33.5708H17.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.2446 5L11.25 7.38092M14.2446 5L17.5 7.38092M14.2446 5V13.3332M14.2446 13.3332L8.75 20.476H20L14.2446 13.3332Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.4918 24.647C21.7233 22.8507 23.8291 21.6667 26.22 21.6667C30.0163 21.6667 33.0938 24.6516 33.0938 28.3335C33.0938 29.0031 32.992 29.6496 32.8027 30.2593M19.4412 27.2224C19.3787 27.5837 19.3462 27.9549 19.3462 28.3335C19.3462 32.0155 22.4237 35.0003 26.22 35.0003C28.273 35.0003 30.1158 34.1274 31.3753 32.7433' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M30.9741 28.1665L32.7698 30.3306L35.0011 28.589' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21.541 28.8025L19.3824 26.9768L17.5 29.0704' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+DepencenciesReloadIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+DepencenciesReloadIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+export default DepencenciesReloadIcon

package/src/components/icons/EditDocumentIcon.jsx ADDED Viewed

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+const EditDocumentIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M10 6.8V3C10 2.44772 9.55228 2 9 2H3C2.44772 2 2 2.44771 2 3V10.6C2 11.1523 2.44772 11.6 3 11.6H6' stroke='none' strokeLinecap='round' />
+          <path d='M3.66675 4.66675H8.11119' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.66675 6.80005H8.11119' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.66675 8.93335H8.11119' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='12.2073' y='7.27808' width='1.80753' height='6.62762' transform='rotate(45 12.2073 7.27808)' stroke='none' strokeLinejoin='round' />
+          <path d='M8.79887 13.2427L7.52075 11.9646L6.88169 13.8818L8.79887 13.2427Z' stroke='none' strokeLinejoin='round' />
+          <path d='M12.8463 6.63906C13.1992 6.28612 13.7715 6.28612 14.1244 6.63906V6.63906C14.4774 6.992 14.4774 7.56424 14.1244 7.91718L13.4854 8.55624L12.2072 7.27812L12.8463 6.63906Z' stroke='none' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M15 10.2V4C15 3.44772 14.5523 3 14 3H4C3.44772 3 3 3.44772 3 4V16.4C3 16.9523 3.44772 17.4 4 17.4H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M5.5 7H12.1667' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.5 10.2H12.1667' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5.5 13.3999H12.1667' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='18.311' y='10.917' width='2.7113' height='9.94143' transform='rotate(45 18.311 10.917)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M13.1984 19.864L11.2812 17.9468L10.3227 20.8225L13.1984 19.864Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M19.5209 9.70711C19.9114 9.31658 20.5446 9.31658 20.9351 9.70711L21.4381 10.2101C21.8286 10.6006 21.8286 11.2338 21.4381 11.6243L20.228 12.8344L18.3108 10.9172L19.5209 9.70711Z' stroke='none' strokeWidth={1.5} />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M25 17V6C25 5.44772 24.5523 5 24 5H6C5.44772 5 5 5.44772 5 6V28C5 28.5523 5.44772 29 6 29H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M9.16675 11.6667H20.2779' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.16675 17H20.2779' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.16675 22.3333H20.2779' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <rect x='30.5183' y='18.1951' width='4.51883' height='16.5691' transform='rotate(45 30.5183 18.1951)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M21.9975 33.1064L18.8022 29.9111L17.2046 34.7041L21.9975 33.1064Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M33.0063 15.7071C33.3968 15.3166 34.03 15.3166 34.4205 15.7071L36.2016 17.4882C36.5921 17.8787 36.5921 18.5119 36.2016 18.9024L33.7134 21.3906L30.5181 18.1953L33.0063 15.7071Z' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+EditDocumentIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+EditDocumentIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+export default EditDocumentIcon