@platformatic/ui-components 0.9.0 → 0.10.0

package/src/components/icons/ImportIcon.jsx

@@ -0,0 +1,102 @@
+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 ImportIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  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='M8 5L8 9.5M8 9.5L9.5 8.16667M8 9.5L6.5 8.16667' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.6635 7.61495C13.874 7.34085 14 6.99244 14 6.61313C14 5.72977 13.3167 5.01413 12.4747 5.01413C12.4527 5.01413 12.4308 5.01475 12.4089 5.01599C12.0593 4.33701 11.3748 3.87607 10.5873 3.87607C10.2459 3.87607 9.92474 3.96304 9.64089 4.11648C9.28652 2.89144 8.20207 2 6.91852 2C5.71674 2 4.68978 2.78149 4.27319 3.886C4.20563 3.87917 4.13748 3.87544 4.06874 3.87544C2.92622 3.87544 2 4.8464 2 6.0441C2 6.49092 2.12487 6.90178 2.33947 7.24286' stroke='white' strokeWidth={1.02} stroke-miterlimit='10' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5 6.5H3.67188V11.1935H12.5V6.5H11' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7 11V13M9.5 11V13' stroke='white' />
+          <path d='M5.9999 12.7422H10.3999V13.9035H5.9999V12.7422Z' stroke='white' 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='M12 7.5L12 14.25M12 14.25L14.25 12.25M12 14.25L9.75 12.25' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.4953 11.4224C20.811 11.0113 21 10.4887 21 9.9197C21 8.59465 19.9751 7.52119 18.712 7.52119C18.6791 7.52119 18.6462 7.52213 18.6133 7.52399C18.0889 6.50551 17.0622 5.8141 15.8809 5.8141C15.3689 5.8141 14.8871 5.94455 14.4613 6.17471C13.9298 4.33716 12.3031 3 10.3778 3C8.57511 3 7.03467 4.17223 6.40978 5.82901C6.30844 5.81876 6.20622 5.81317 6.10311 5.81317C4.38933 5.81317 3 7.2696 3 9.06615C3 9.73638 3.1873 10.3527 3.5092 10.8643' stroke='white' strokeWidth={1.5} stroke-miterlimit='10' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.5 9.75H5.50781V16.7903H18.75V9.75H16.5' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.5 16.5V19.5M14.25 16.5V19.5' stroke='white' strokeWidth={1.5} />
+          <path d='M8.99985 19.1094H15.5999V20.8513H8.99985V19.1094Z' stroke='white' strokeWidth={1.5} 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='M20 12.5L20 23.75M20 23.75L23.75 20.4167M20 23.75L16.25 20.4167' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M34.1588 19.0374C34.685 18.3521 35 17.4811 35 16.5328C35 14.3244 33.2919 12.5353 31.1867 12.5353C31.1319 12.5353 31.077 12.5369 31.0222 12.54C30.1481 10.8425 28.437 9.69016 26.4681 9.69016C25.6148 9.69016 24.8119 9.90759 24.1022 10.2912C23.2163 7.2286 20.5052 5 17.2963 5C14.2919 5 11.7244 6.95372 10.683 9.71501C10.5141 9.69793 10.3437 9.68861 10.1719 9.68861C7.31556 9.68861 5 12.116 5 15.1103C5 16.2273 5.31217 17.2544 5.84867 18.1072' stroke='white' strokeWidth={2} stroke-miterlimit='10' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.5 16.25H9.17969V27.9839H31.25V16.25H27.5' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.5 27.5V32.5M23.75 27.5V32.5' stroke='white' strokeWidth={2} />
+          <path d='M14.9998 31.8516H25.9998V34.7548H14.9998V31.8516Z' stroke='white' strokeWidth={2} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ImportIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default ImportIcon

package/src/components/icons/NameAppIcon.jsx

@@ -47,11 +47,11 @@ const NameAppIcon = ({
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M6.75 4.43994H4C3.44772 4.43994 3 4.88766 3 5.43994V14.9599C3 15.5122 3.44772 15.9599 4 15.9599H20C20.5523 15.9599 21 15.5122 21 14.9599V5.43994C21 4.88766 20.5523 4.43994 20 4.43994H17.25' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
-          <rect x='9' y='15.96' width='6' height='2.88' stroke='none' strokeWidth='1.5' />
-          <path d='M6 19.84C6 19.2877 6.44772 18.84 7 18.84H17C17.5523 18.84 18 19.2877 18 19.84V21H6V19.84Z' stroke='none' strokeWidth='1.5' />
-          <path d='M12 3L12.6735 5.07295H14.8532L13.0898 6.3541L13.7634 8.42705L12 7.1459L10.2366 8.42705L10.9102 6.3541L9.14683 5.07295H11.3265L12 3Z' stroke='none' strokeWidth='1.5' strokeLinejoin='round' />
-          <path d='M8.25 11.25V12.75M6 10.5H18V13.5H6V10.5Z' stroke='none' strokeWidth='1.5' strokeLinejoin='round' />
+          <path d='M6.75 4.43994H4C3.44772 4.43994 3 4.88766 3 5.43994V14.9599C3 15.5122 3.44772 15.9599 4 15.9599H20C20.5523 15.9599 21 15.5122 21 14.9599V5.43994C21 4.88766 20.5523 4.43994 20 4.43994H17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <rect x='9' y='15.96' width='6' height='2.88' stroke='none' strokeWidth={1.5} />
+          <path d='M6 19.84C6 19.2877 6.44772 18.84 7 18.84H17C17.5523 18.84 18 19.2877 18 19.84V21H6V19.84Z' stroke='none' strokeWidth={1.5} />
+          <path d='M12 3L12.6735 5.07295H14.8532L13.0898 6.3541L13.7634 8.42705L12 7.1459L10.2366 8.42705L10.9102 6.3541L9.14683 5.07295H11.3265L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M8.25 11.25V12.75M6 10.5H18V13.5H6V10.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
 
         </svg>
       )
@@ -66,11 +66,11 @@ const NameAppIcon = ({
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M11.25 7.40002H6C5.44772 7.40002 5 7.84774 5 8.40002V25.6C5 26.1523 5.44772 26.6 6 26.6H34C34.5523 26.6 35 26.1523 35 25.6V8.40002C35 7.84774 34.5523 7.40002 34 7.40002H28.75' stroke='none' strokeWidth='2' strokeLinecap='round' />
-          <rect x='15' y='26.6' width='10' height='4.8' stroke='none' strokeWidth='2' />
-          <path d='M10 32.4C10 31.8477 10.4477 31.4 11 31.4H29C29.5523 31.4 30 31.8477 30 32.4V35H10V32.4Z' stroke='none' strokeWidth='2' />
-          <path d='M20 5L21.1226 8.45492H24.7553L21.8164 10.5902L22.9389 14.0451L20 11.9098L17.0611 14.0451L18.1836 10.5902L15.2447 8.45492H18.8774L20 5Z' stroke='none' strokeWidth='2' strokeLinejoin='round' />
-          <path d='M13.75 17.5V22.5M10 17.5H30V22.5H10V17.5Z' stroke='none' strokeWidth='2' strokeLinejoin='round' />
+          <path d='M11.25 7.40002H6C5.44772 7.40002 5 7.84774 5 8.40002V25.6C5 26.1523 5.44772 26.6 6 26.6H34C34.5523 26.6 35 26.1523 35 25.6V8.40002C35 7.84774 34.5523 7.40002 34 7.40002H28.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <rect x='15' y='26.6' width='10' height='4.8' stroke='none' strokeWidth={2} />
+          <path d='M10 32.4C10 31.8477 10.4477 31.4 11 31.4H29C29.5523 31.4 30 31.8477 30 32.4V35H10V32.4Z' stroke='none' strokeWidth={2} />
+          <path d='M20 5L21.1226 8.45492H24.7553L21.8164 10.5902L22.9389 14.0451L20 11.9098L17.0611 14.0451L18.1836 10.5902L15.2447 8.45492H18.8774L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M13.75 17.5V22.5M10 17.5H30V22.5H10V17.5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
 
         </svg>
       )

package/src/components/icons/OpenAPIEditsIcon.jsx

@@ -53,10 +53,10 @@ const OpenAPIEditsIcon = ({
         >
           <path d='M17.7265 4.96689C17.6178 5.01476 17.6356 5.12562 17.6066 5.20813C17.278 6.13844 16.3166 6.62722 15.3388 6.33118C15.1261 6.26693 15.0089 6.30032 14.8581 6.44519C13.6952 7.56194 12.5257 8.67176 11.3516 9.7778C11.214 9.90755 11.1607 10.0058 11.2324 10.2036C11.5077 10.9676 11.1923 11.7663 10.4811 12.1883C9.78771 12.5996 8.85528 12.5039 8.27647 11.9622C7.68712 11.4098 7.55806 10.5588 7.96303 9.89307C8.3838 9.20147 9.24445 8.8645 10.0465 9.10888C10.2796 9.18006 10.4133 9.14164 10.5799 8.98102C11.7421 7.86427 12.9149 6.75697 14.0877 5.64967C14.2049 5.53881 14.2569 5.45378 14.195 5.27805C13.8585 4.32947 14.3655 3.37648 15.3434 3.08234C16.3278 2.7863 17.3248 3.31224 17.6297 4.27971C17.6554 4.36222 17.6139 4.4756 17.7271 4.52788V4.96626L17.7265 4.96689Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
           <path d='M9.37016 4.32678C10.8722 4.32867 12.07 4.68643 13.1657 5.37424C13.3218 5.4725 13.3435 5.52478 13.2019 5.6602C12.3479 6.48217 11.5004 7.30982 10.6595 8.14439C10.512 8.29052 10.3823 8.31886 10.1742 8.27036C8.52993 7.88488 6.90806 9.07092 6.93506 10.6582C6.95284 11.6886 7.477 12.4583 8.46013 12.8822C9.47816 13.3212 10.4527 13.1776 11.2969 12.4772C12.0199 11.8776 12.2853 11.094 12.1141 10.1921C12.0785 10.005 12.1167 9.88281 12.2537 9.75054C13.1005 8.93613 13.9447 8.12045 14.7764 7.29155C14.9634 7.10511 15.0259 7.1681 15.1425 7.34635C16.6458 9.6378 16.3515 12.852 14.4537 14.8581C13.1203 16.2671 11.4596 16.9871 9.47684 16.9858C6.41749 16.9839 3.68343 14.7851 3.12305 11.9059C2.43888 8.38814 4.66722 5.18969 8.3258 4.43889C8.73209 4.35575 9.1443 4.31922 9.37016 4.32678Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
-          <path d='M10.0824 16.8261H16.6364H20C20.5523 16.8261 21 16.3784 21 15.8261V10.2609C21 9.70858 20.5523 9.26086 20 9.26086H17.7273' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
-          <path d='M16.6367 16.8262V18.9131' stroke='none' strokeWidth='1.5' />
-          <path d='M14.4541 16.8262V18.9131' stroke='none' strokeWidth='1.5' />
-          <path d='M18.8184 20.9999H12.8186V19.913C12.8186 19.3607 13.2663 18.913 13.8186 18.913H16.0911H17.8184C18.3706 18.913 18.8184 19.3607 18.8184 19.913V20.9999Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.0824 16.8261H16.6364H20C20.5523 16.8261 21 16.3784 21 15.8261V10.2609C21 9.70858 20.5523 9.26086 20 9.26086H17.7273' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M16.6367 16.8262V18.9131' stroke='none' strokeWidth={1.5} />
+          <path d='M14.4541 16.8262V18.9131' stroke='none' strokeWidth={1.5} />
+          <path d='M18.8184 20.9999H12.8186V19.913C12.8186 19.3607 13.2663 18.913 13.8186 18.913H16.0911H17.8184C18.3706 18.913 18.8184 19.3607 18.8184 19.913V20.9999Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )
       break
@@ -72,10 +72,10 @@ const OpenAPIEditsIcon = ({
         >
           <path d='M29.5441 8.27815C29.363 8.35794 29.3927 8.5427 29.3444 8.68022C28.7967 10.2307 27.1944 11.0454 25.5646 10.552C25.2102 10.4449 25.0148 10.5005 24.7635 10.742C22.8253 12.6032 20.8762 14.4529 18.9194 16.2963C18.69 16.5126 18.6011 16.6764 18.7207 17.006C19.1795 18.2794 18.6538 19.6105 17.4685 20.3138C16.3128 20.9993 14.7588 20.8398 13.7941 19.937C12.8119 19.0163 12.5968 17.5981 13.2717 16.4884C13.973 15.3358 15.4074 14.7742 16.7442 15.1815C17.1327 15.3001 17.3555 15.2361 17.6331 14.9684C19.5702 13.1071 21.5248 11.2616 23.4794 9.41611C23.6748 9.23135 23.7615 9.08963 23.6583 8.79674C23.0975 7.21578 23.9426 5.62747 25.5723 5.13723C27.2131 4.64383 28.8747 5.5204 29.3828 7.13285C29.4256 7.27037 29.3565 7.45933 29.5452 7.54646V8.2771L29.5441 8.27815Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
           <path d='M15.6169 7.21133C18.1203 7.21448 20.1166 7.81076 21.9428 8.95711C22.203 9.12087 22.2392 9.20801 22.0032 9.43371C20.5798 10.8037 19.1673 12.1831 17.7658 13.574C17.52 13.8176 17.3038 13.8648 16.957 13.784C14.2165 13.1415 11.5134 15.1182 11.5584 17.7637C11.5881 19.4811 12.4617 20.7639 14.1002 21.4704C15.7969 22.2021 17.4212 21.9628 18.8282 20.7954C20.0332 19.796 20.4755 18.4901 20.1902 16.9868C20.1309 16.6751 20.1946 16.4714 20.4228 16.2509C21.8342 14.8936 23.2412 13.5341 24.6273 12.1526C24.939 11.8419 25.0432 11.9469 25.2375 12.244C27.7431 16.063 27.2525 21.42 24.0895 24.7636C21.8671 27.1119 19.0993 28.3118 15.7947 28.3097C10.6958 28.3066 6.13905 24.6418 5.20509 19.8433C4.0648 13.9803 7.7787 8.64953 13.8763 7.39819C14.5535 7.25962 15.2405 7.19874 15.6169 7.21133Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
-          <path d='M16.804 28.0436H27.7273H34C34.5523 28.0436 35 27.5959 35 27.0436V16.4348C35 15.8825 34.5523 15.4348 34 15.4348H29.5455' stroke='none' strokeWidth='2' strokeLinecap='round' />
-          <path d='M27.7285 28.0437V31.522' stroke='none' strokeWidth='2' />
-          <path d='M24.0908 28.0437V31.522' stroke='none' strokeWidth='2' />
-          <path d='M31.3633 35H21.3637V32.5217C21.3637 31.9694 21.8114 31.5217 22.3637 31.5217H26.8178H30.3633C30.9156 31.5217 31.3633 31.9694 31.3633 32.5217V35Z' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.804 28.0436H27.7273H34C34.5523 28.0436 35 27.5959 35 27.0436V16.4348C35 15.8825 34.5523 15.4348 34 15.4348H29.5455' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M27.7285 28.0437V31.522' stroke='none' strokeWidth={2} />
+          <path d='M24.0908 28.0437V31.522' stroke='none' strokeWidth={2} />
+          <path d='M31.3633 35H21.3637V32.5217C21.3637 31.9694 21.8114 31.5217 22.3637 31.5217H26.8178H30.3633C30.9156 31.5217 31.3633 31.9694 31.3633 32.5217V35Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )
       break

package/src/components/icons/RestartIcon.jsx

@@ -44,7 +44,7 @@ const RestartIcon = ({
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M16.7646 13.5883V17.8236H20.9999' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.7646 13.5883V17.8236H20.9999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
           <path d='M11.4706 19.9412C6.79241 19.9412 3 16.1488 3 11.4706C3 6.79241 6.79241 3 11.4706 3C16.1488 3 19.9412 6.79241 19.9412 11.4706C19.9412 12.5299 19.7467 13.5438 19.3916 14.4786C19.0265 15.4394 18.4916 16.3166 17.8235 17.0735' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )
@@ -59,7 +59,7 @@ const RestartIcon = ({
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <path d='M27.9412 22.647V29.7059H35' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M27.9412 22.647V29.7059H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
           <path d='M19.1176 33.2353C11.3207 33.2353 5 26.9146 5 19.1176C5 11.3207 11.3207 5 19.1176 5C26.9146 5 33.2353 11.3207 33.2353 19.1176C33.2353 20.8832 32.9112 22.573 32.3193 24.1309C31.7108 25.7324 30.8193 27.1944 29.7059 28.4559' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
         </svg>
       )

package/src/components/icons/index.js

@@ -31,6 +31,7 @@ import ArrowLongRightIcon from './ArrowLongRightIcon'
 import ArrowLongUpIcon from './ArrowLongUpIcon'
 import ArrowRightIcon from './ArrowRightIcon'
 import ArrowUpIcon from './ArrowUpIcon'
+import AWSIcon from './AWSIcon'
 import BellIcon from './BellIcon'
 import BillingIcon from './BillingIcon'
 import BuiltInLoggingIcon from './BuiltInLoggingIcon'
@@ -90,6 +91,7 @@ import EntryIcon from './EntryIcon'
 import EnvVariableszIcon from './EnvVariableszIcon'
 import ExpandIcon from './ExpandIcon'
 import ExploreDocIcon from './ExploreDocIcon'
+import ExportIcon from './ExportIcon'
 import EyeClosedIcon from './EyeClosedIcon'
 import EyeOpenedIcon from './EyeOpenedIcon'
 import FailureRateIcon from './FailureRateIcon'
@@ -108,6 +110,7 @@ import K8SIcon from './K8SIcon'
 import K8SMetricsIcon from './K8SMetricsIcon'
 import KeyIcon from './KeyIcon'
 import ImportAppIcon from './ImportAppIcon'
+import ImportIcon from './ImportIcon'
 import InfrastructureIcon from './InfrastructureIcon'
 import IngressControllIcon from './IngressControllIcon'
 import InternalLinkIcon from './InternalLinkIcon'
@@ -206,6 +209,7 @@ import WorkspaceReadyIcon from './WorkspaceReadyIcon'
 import WorkspaceStaticIcon from './WorkspaceStaticIcon'
 import ZoomInIcon from './ZoomInIcon'
 import ZoomOutIcon from './ZoomOutIcon'
+import AppOptimizedIcon from './AppOptimizedIcon'
 
 export default {
   AddIcon,
@@ -225,12 +229,13 @@ export default {
   AppConfigurationIcon,
   AppDetailsIcon,
   AppEditIcon,
-  AppIcon,
   AppEmptyIcon,
+  AppIcon,
+  ApplicationTypeIcon,
   AppListIcon,
   AppMissingIcon,
+  AppOptimizedIcon,
   AppSettingsIcon,
-  ApplicationTypeIcon,
   AppWorkspace,
   ArrowDownFullIcon,
   ArrowDownIcon,
@@ -241,6 +246,7 @@ export default {
   ArrowLongUpIcon,
   ArrowRightIcon,
   ArrowUpIcon,
+  AWSIcon,
   BellIcon,
   BillingIcon,
   BuiltInLoggingIcon,
@@ -299,6 +305,7 @@ export default {
   EyeOpenedIcon,
   ExpandIcon,
   ExploreDocIcon,
+  ExportIcon,
   EnlargeIcon,
   EntryIcon,
   EnvVariableszIcon,
@@ -315,6 +322,7 @@ export default {
   HorizontalPodAutoscalerIcon,
   HourglassIcon,
   ImportAppIcon,
+  ImportIcon,
   InfrastructureIcon,
   IngressControllIcon,
   InternalLinkIcon,

package/src/stories/icons/Icons.stories.jsx

@@ -5,10 +5,8 @@ import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
 import WorkspaceStaticIcon from '../../components/icons/WorkspaceStaticIcon'
 import UpgradeIcon from '../../components/icons/UpgradeIcon'
 import WorkspaceDynamicIcon from '../../components/icons/WorkspaceDynamicIcon'
-import CollapseIcon from '../../components/icons/CollapseIcon'
-import ExpandIcon from '../../components/icons/ExpandIcon'
-import EnlargeIcon from '../../components/icons/EnlargeIcon'
 import { COLORS_ICON } from '../../components/constants'
+import icons from '../../components/icons/index.js'
 
 const divStyle = {
   display: 'flex',
@@ -98,11 +96,17 @@ const LargeIconsTemplate = () =>
 export const LargeIconsDefault = LargeIconsTemplate.bind({})
 LargeIconsDefault.args = {}
 
-export const Expand = ExpandIcon.bind({})
-Expand.args = {}
-
-export const Collapse = CollapseIcon.bind({})
-Collapse.args = {}
+const AllSizesIcons = (Icon) => () => {
+  const icons = ['small', 'medium', 'large'].map((size) => (
+    <Icon key={size} size={size} />
+  ))
+  return icons
+}
 
-export const Enlarge = EnlargeIcon.bind({})
-Enlarge.args = {}
+export const ExpandIcons = AllSizesIcons(icons.ExpandIcon).bind({})
+export const CollapseIcons = AllSizesIcons(icons.CollapseIcon).bind({})
+export const EnlargeIcons = AllSizesIcons(icons.EnlargeIcon).bind({})
+export const AppOptimizedIcons = AllSizesIcons(icons.AppOptimizedIcon).bind({})
+export const AWSIcons = AllSizesIcons(icons.AWSIcon).bind({})
+export const ImportIcons = AllSizesIcons(icons.ImportIcon).bind({})
+export const ExportIcons = AllSizesIcons(icons.ExportIcon).bind({})