@platformatic/ui-components 0.1.103 → 0.1.105

package/src/components/icons/EyeClosedIcon.jsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, MAIN_DARK_BLUE, SIZES, SMALL } from '../constants'
+
+const EyeClosedIcon = ({ 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='M14 8.50024C14 10.1571 11.3137 11.5002 8 11.5002C7.48205 11.5002 6.97943 11.4674 6.5 11.4057C5.14526 11.2314 3.9757 10.8264 3.1687 10.2795C2.43416 9.78172 2 9.16633 2 8.50024C2 6.84339 4.68629 5.50024 8 5.50024C9.30618 5.50024 10.5149 5.70893 11.5 6.06327C13.0141 6.60786 14 7.49648 14 8.50024Z' stroke='none' />
+          <ellipse cx='8' cy='8.38486' rx='3' ry='2.88462' stroke='none' />
+          <line x1='2' y1='13.7931' x2='13.2929' y2='2.50024' stroke='none' strokeLinecap='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+EyeClosedIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+EyeClosedIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: SMALL
+}
+
+export default EyeClosedIcon

package/src/components/icons/EyeOpenedIcon.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, MAIN_DARK_BLUE, SIZES, SMALL } from '../constants'
+
+const EyeOpenedIcon = ({ 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}
+        >
+          <ellipse cx='8' cy='8' rx='6' ry='3' stroke='none' />
+          <ellipse cx='8' cy='7.88462' rx='3' ry='2.88462' stroke='none' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+EyeOpenedIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+EyeOpenedIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: SMALL
+}
+
+export default EyeOpenedIcon

package/src/components/icons/GitHubRepoIcon.jsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, LARGE, MAIN_DARK_BLUE, MEDIUM, SIZES, SMALL } from '../constants'
+
+const GitHubRepoIcon = ({ 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='M10.7258 11.91C10.9484 11.8811 11.1496 11.8452 11.3465 11.7838C12.0398 11.5683 12.4166 11.079 12.5162 10.3475C12.5662 9.98042 12.573 9.61691 12.4335 9.26558C12.3717 9.11035 12.2891 8.9673 12.1804 8.84252C12.146 8.80303 12.1428 8.77041 12.1576 8.72129C12.2558 8.39629 12.2247 8.07659 12.1179 7.75945C12.0989 7.70325 12.0664 7.69362 12.0179 7.6946C11.8273 7.69834 11.6525 7.76279 11.4816 7.84197C11.3315 7.91153 11.1886 7.99544 11.0521 8.09054C11.0149 8.11648 10.9831 8.121 10.9389 8.1094C10.3133 7.9473 9.68652 7.94592 9.06111 8.1094C9.00714 8.12355 8.97236 8.10842 8.93131 8.0815C8.67172 7.91075 8.40453 7.75748 8.09515 7.70482C8.08888 7.70384 8.0828 7.70207 8.07653 7.70089C7.915 7.67535 7.89618 7.68635 7.84962 7.84866C7.76506 8.14359 7.74909 8.43991 7.84202 8.73661C7.85228 8.76943 7.85627 8.79399 7.83024 8.82425C7.4724 9.24062 7.4038 9.73598 7.46689 10.2659C7.49045 10.4642 7.5315 10.6585 7.60467 10.8446C7.81656 11.3848 8.22723 11.6738 8.75344 11.8176C8.91535 11.8619 9.08068 11.8878 9.26179 11.9133C9.12249 12.0666 9.04914 12.2391 9.02044 12.4323C9.01474 12.4706 8.98529 12.4743 8.96039 12.4851C8.51 12.6799 8.11492 12.5512 7.85266 12.1254C7.72401 11.9163 7.55507 11.7622 7.31334 11.7094C7.24721 11.6948 7.18164 11.6946 7.11665 11.7174C7.04824 11.7414 7.04292 11.785 7.08605 11.8357C7.11722 11.8721 7.15276 11.9072 7.19285 11.932C7.40627 12.0642 7.54119 12.2633 7.63203 12.4944C7.77741 12.8642 8.05828 13.0304 8.42278 13.0725C8.59001 13.0917 8.75857 13.0825 8.92314 13.044C8.98624 13.0292 9.00429 13.0402 9.00353 13.1094C9.00087 13.3253 9.00505 13.5415 9.00619 13.7574C9.00714 13.9522 8.88704 14.0424 8.70498 13.9799C8.24737 13.8225 7.83043 13.5863 7.45948 13.2684C6.63282 12.5608 6.141 11.6553 6.02413 10.5518C5.81889 8.6142 6.9403 6.83121 8.73349 6.21382C10.9301 5.45752 13.2875 6.77599 13.8746 9.08912C14.3945 11.1374 13.2518 13.3096 11.303 13.9779C11.1093 14.0443 10.9909 13.9588 10.9911 13.7509C10.9915 13.3876 10.9957 13.0243 10.9936 12.661C10.9919 12.3859 10.9334 12.1291 10.726 11.91H10.7258Z' fill='none' className={filledClassName} />
+          <path d='M8.90581 12.5939C8.94325 12.5994 8.98411 12.6075 8.97822 12.6539C8.97214 12.7026 8.92919 12.7185 8.88605 12.7199C8.84994 12.7211 8.81023 12.7106 8.81156 12.6653C8.81327 12.6057 8.86325 12.6008 8.90581 12.5939Z' fill='none' className={filledClassName} />
+          <path d='M8.00198 12.5503C7.95618 12.5422 7.9216 12.5147 7.91495 12.4591C7.91077 12.4239 7.92711 12.4029 7.96246 12.4047C8.02099 12.4076 8.05405 12.4444 8.06128 12.5008C8.06565 12.5347 8.04113 12.5518 8.00198 12.5505V12.5503Z' fill='none' className={filledClassName} />
+          <path d='M8.59086 12.6352C8.63001 12.6401 8.67523 12.6464 8.67314 12.6959C8.67105 12.7479 8.62468 12.7601 8.58231 12.758C8.54392 12.756 8.5023 12.7428 8.5061 12.6919C8.5099 12.6414 8.55418 12.6403 8.59086 12.6352Z' fill='none' className={filledClassName} />
+          <path d='M8.2551 12.5817C8.29995 12.5847 8.34328 12.6031 8.34727 12.6554C8.35088 12.7014 8.30945 12.7087 8.27335 12.7059C8.22698 12.7022 8.18384 12.6861 8.18384 12.6289C8.18384 12.5866 8.21937 12.5823 8.2551 12.5817Z' fill='none' className={filledClassName} />
+          <path d='M7.85162 12.2585C7.85181 12.2882 7.84364 12.3135 7.81152 12.3131C7.75831 12.3124 7.73399 12.2762 7.72753 12.2263C7.72392 12.1978 7.73342 12.1717 7.76611 12.1721C7.81989 12.1726 7.8406 12.2117 7.85162 12.2587V12.2585Z' fill='none' className={filledClassName} />
+          <path d='M7.6877 12.0321C7.69017 12.0638 7.67592 12.0813 7.65064 12.0811C7.6077 12.0809 7.58014 12.0557 7.5733 12.0117C7.56855 11.982 7.57995 11.9565 7.61226 11.96C7.65349 11.9647 7.67782 11.9944 7.6877 12.0321Z' fill='none' className={filledClassName} />
+          <path d='M7.51765 11.8701C7.51594 11.9008 7.49504 11.9108 7.47242 11.9086C7.44373 11.9057 7.41484 11.8937 7.40762 11.8607C7.40154 11.8324 7.42092 11.8188 7.44639 11.8186C7.48135 11.8184 7.5053 11.8367 7.51765 11.8701Z' fill='none' className={filledClassName} />
+          <path d='M5.99999 5.2048C8.20913 5.2048 9.99999 4.48738 9.99999 3.6024C9.99999 2.71742 8.20913 2 5.99999 2C3.79086 2 2 2.71742 2 3.6024C2 4.48738 3.79086 5.2048 5.99999 5.2048Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2 6.05729C2 6.75601 3.11659 7.35031 4.6738 7.5695' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2 3.60286V8.39805C2 9.06094 3.00501 9.62985 4.4378 9.87362' 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='M16.0888 17.865C16.4226 17.8217 16.7244 17.7677 17.0197 17.6758C18.0596 17.3524 18.6249 16.6185 18.7743 15.5212C18.8492 14.9706 18.8595 14.4254 18.6503 13.8984C18.5576 13.6655 18.4336 13.4509 18.2706 13.2638C18.219 13.2045 18.2141 13.1556 18.2364 13.0819C18.3837 12.5944 18.337 12.1149 18.1768 11.6392C18.1483 11.5549 18.0995 11.5404 18.0268 11.5419C17.7409 11.5475 17.4787 11.6442 17.2224 11.763C16.9972 11.8673 16.7829 11.9932 16.5782 12.1358C16.5223 12.1747 16.4747 12.1815 16.4083 12.1641C15.4699 11.9209 14.5298 11.9189 13.5917 12.1641C13.5107 12.1853 13.4585 12.1626 13.397 12.1223C13.0076 11.8661 12.6068 11.6362 12.1427 11.5572C12.1333 11.5558 12.1242 11.5531 12.1148 11.5513C11.8725 11.513 11.8443 11.5295 11.7744 11.773C11.6476 12.2154 11.6236 12.6599 11.763 13.1049C11.7784 13.1541 11.7844 13.191 11.7454 13.2364C11.2086 13.8609 11.1057 14.604 11.2003 15.3989C11.2357 15.6963 11.2973 15.9878 11.407 16.2669C11.7248 17.0771 12.3408 17.5107 13.1302 17.7265C13.373 17.7928 13.621 17.8317 13.8927 17.87C13.6837 18.0999 13.5737 18.3587 13.5307 18.6484C13.5221 18.7059 13.4779 18.7115 13.4406 18.7277C12.765 19.0198 12.1724 18.8267 11.779 18.188C11.586 17.8744 11.3326 17.6433 10.97 17.5641C10.8708 17.5423 10.7725 17.542 10.675 17.5761C10.5724 17.6121 10.5644 17.6775 10.6291 17.7536C10.6758 17.8081 10.7291 17.8609 10.7893 17.898C11.1094 18.0964 11.3118 18.3949 11.448 18.7416C11.6661 19.2963 12.0874 19.5456 12.6342 19.6087C12.885 19.6376 13.1379 19.6237 13.3847 19.5659C13.4794 19.5438 13.5064 19.5603 13.5053 19.6641C13.5013 19.988 13.5076 20.3122 13.5093 20.6362C13.5107 20.9282 13.3306 21.0635 13.0575 20.9698C12.3711 20.7337 11.7456 20.3794 11.1892 19.9025C9.94922 18.8412 9.2115 17.483 9.03619 15.8277C8.72833 12.9213 10.4104 10.2468 13.1002 9.32073C16.3952 8.18628 19.9313 10.164 20.8118 13.6337C21.5918 16.7061 19.8777 19.9644 16.9545 20.9669C16.664 21.0665 16.4864 20.9383 16.4867 20.6264C16.4873 20.0814 16.4935 19.5365 16.4904 18.9915C16.4878 18.5789 16.4 18.1936 16.089 17.865H16.0888Z' fill='none' className={filledClassName} />
+          <path d='M13.359 18.8909C13.4151 18.8991 13.4764 18.9112 13.4676 18.9808C13.4585 19.0539 13.394 19.0778 13.3293 19.0798C13.2752 19.0816 13.2156 19.066 13.2176 18.9979C13.2201 18.9086 13.2951 18.9012 13.359 18.8909Z' fill='none' className={filledClassName} />
+          <path d='M12.0029 18.8254C11.9342 18.8133 11.8823 18.7721 11.8723 18.6886C11.866 18.6359 11.8905 18.6043 11.9436 18.607C12.0314 18.6114 12.081 18.6665 12.0918 18.7511C12.0983 18.8021 12.0616 18.8278 12.0029 18.8257V18.8254Z' fill='none' className={filledClassName} />
+          <path d='M12.8863 18.9527C12.945 18.9601 13.0129 18.9695 13.0097 19.0438C13.0066 19.1219 12.937 19.1402 12.8735 19.137C12.8159 19.134 12.7535 19.1143 12.7592 19.0379C12.7649 18.9622 12.8313 18.9604 12.8863 18.9527Z' fill='none' className={filledClassName} />
+          <path d='M12.3825 18.8726C12.4498 18.877 12.5148 18.9047 12.5208 18.9831C12.5262 19.0521 12.4641 19.063 12.4099 19.0589C12.3403 19.0533 12.2756 19.0291 12.2756 18.9433C12.2756 18.8799 12.3289 18.8735 12.3825 18.8726Z' fill='none' className={filledClassName} />
+          <path d='M11.7773 18.3878C11.7776 18.4323 11.7653 18.4703 11.7172 18.4697C11.6373 18.4685 11.6009 18.4143 11.5912 18.3394C11.5858 18.2967 11.6 18.2575 11.649 18.2581C11.7297 18.259 11.7608 18.3176 11.7773 18.3881V18.3878Z' fill='none' className={filledClassName} />
+          <path d='M11.5316 18.0482C11.5353 18.0957 11.5139 18.1219 11.476 18.1216C11.4115 18.1213 11.3702 18.0836 11.3599 18.0176C11.3528 17.973 11.3699 17.9347 11.4184 17.94C11.4802 17.9471 11.5167 17.9916 11.5316 18.0482Z' fill='none' className={filledClassName} />
+          <path d='M11.2764 17.8052C11.2738 17.8511 11.2424 17.8662 11.2085 17.8629C11.1655 17.8585 11.1221 17.8405 11.1113 17.791C11.1022 17.7486 11.1313 17.7282 11.1695 17.7279C11.2219 17.7276 11.2578 17.7551 11.2764 17.8052Z' fill='none' className={filledClassName} />
+          <path d='M8.99999 7.8072C12.3137 7.8072 15 6.73107 15 5.4036C15 4.07613 12.3137 3 8.99999 3C5.68629 3 3 4.07613 3 5.4036C3 6.73107 5.68629 7.8072 8.99999 7.8072Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3 9.08593C3 10.134 4.67489 11.0255 7.01069 11.3542' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3 5.4043V12.5971C3 13.5914 4.50751 14.4448 6.65669 14.8104' 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='M26.8146 29.775C27.3709 29.7028 27.874 29.6129 28.3662 29.4596C30.0994 28.9207 31.0415 27.6976 31.2904 25.8687C31.4154 24.9511 31.4325 24.0423 31.0838 23.1639C30.9294 22.7759 30.7227 22.4182 30.451 22.1063C30.365 22.0076 30.3569 21.926 30.3939 21.8032C30.6396 20.9907 30.5616 20.1915 30.2946 19.3986C30.2471 19.2581 30.1659 19.2341 30.0447 19.2365C29.5682 19.2458 29.1311 19.407 28.704 19.6049C28.3287 19.7788 27.9714 19.9886 27.6303 20.2263C27.5372 20.2912 27.4579 20.3025 27.3472 20.2735C25.7832 19.8682 24.2163 19.8648 22.6528 20.2735C22.5178 20.3089 22.4309 20.2711 22.3283 20.2038C21.6793 19.7769 21.0113 19.3937 20.2379 19.2621C20.2222 19.2596 20.207 19.2552 20.1913 19.2522C19.7875 19.1884 19.7405 19.2159 19.6241 19.6216C19.4126 20.359 19.3727 21.0998 19.6051 21.8415C19.6307 21.9236 19.6407 21.985 19.5756 22.0606C18.681 23.1016 18.5095 24.34 18.6672 25.6648C18.7261 26.1605 18.8288 26.6463 19.0117 27.1115C19.5414 28.4619 20.5681 29.1845 21.8836 29.5441C22.2884 29.6546 22.7017 29.7195 23.1545 29.7833C22.8062 30.1665 22.6228 30.5978 22.5511 31.0807C22.5369 31.1765 22.4632 31.1858 22.401 31.2128C21.275 31.6997 20.2873 31.3779 19.6317 30.3134C19.31 29.7907 18.8877 29.4056 18.2833 29.2734C18.118 29.2371 17.9541 29.2366 17.7916 29.2936C17.6206 29.3535 17.6073 29.4626 17.7151 29.5893C17.793 29.6802 17.8819 29.7681 17.9821 29.83C18.5157 30.1606 18.853 30.6582 19.0801 31.2359C19.4435 32.1604 20.1457 32.576 21.0569 32.6811C21.475 32.7293 21.8964 32.7062 22.3079 32.6099C22.4656 32.5731 22.5107 32.6006 22.5088 32.7735C22.5022 33.3134 22.5126 33.8537 22.5155 34.3936C22.5178 34.8804 22.2176 35.1059 21.7625 34.9497C20.6184 34.5562 19.5761 33.9657 18.6487 33.1709C16.582 31.402 15.3525 29.1383 15.0603 26.3796C14.5472 21.5355 17.3507 17.078 21.8337 15.5346C27.3253 13.6438 33.2188 16.94 34.6864 22.7228C35.9863 27.8435 33.1295 33.2741 28.2574 34.9448C27.7733 35.1108 27.4773 34.8971 27.4778 34.3774C27.4788 33.4691 27.4892 32.5608 27.484 31.6525C27.4797 30.9648 27.3334 30.3227 26.8151 29.775H26.8146Z' fill='none' className={filledClassName} />
+          <path d='M22.2648 31.4848C22.3584 31.4986 22.4605 31.5187 22.4458 31.6346C22.4306 31.7565 22.3232 31.7963 22.2154 31.7997C22.1251 31.8026 22.0258 31.7766 22.0291 31.6631C22.0334 31.5143 22.1584 31.502 22.2648 31.4848Z' fill='none' className={filledClassName} />
+          <path d='M20.0048 31.3757C19.8903 31.3555 19.8039 31.2868 19.7872 31.1477C19.7768 31.0598 19.8177 31.0072 19.906 31.0117C20.0523 31.019 20.135 31.1109 20.1531 31.2519C20.164 31.3369 20.1027 31.3796 20.0048 31.3762V31.3757Z' fill='none' className={filledClassName} />
+          <path d='M21.4771 31.5879C21.575 31.6002 21.6881 31.6159 21.6829 31.7397C21.6776 31.8699 21.5617 31.9003 21.4558 31.8949C21.3598 31.89 21.2558 31.8571 21.2653 31.7299C21.2748 31.6036 21.3855 31.6007 21.4771 31.5879Z' fill='none' className={filledClassName} />
+          <path d='M20.6376 31.4543C20.7498 31.4617 20.8581 31.5078 20.8681 31.6385C20.8771 31.7535 20.7735 31.7716 20.6832 31.7648C20.5673 31.7554 20.4595 31.7151 20.4595 31.5722C20.4595 31.4666 20.5483 31.4558 20.6376 31.4543Z' fill='none' className={filledClassName} />
+          <path d='M19.6289 30.6463C19.6294 30.7205 19.609 30.7838 19.5287 30.7828C19.3957 30.7809 19.3349 30.6905 19.3187 30.5657C19.3097 30.4945 19.3334 30.4292 19.4151 30.4301C19.5496 30.4316 19.6014 30.5294 19.6289 30.6468V30.6463Z' fill='none' className={filledClassName} />
+          <path d='M19.2193 30.0803C19.2254 30.1594 19.1898 30.2032 19.1266 30.2027C19.0192 30.2022 18.9504 30.1393 18.9332 30.0293C18.9214 29.9551 18.9499 29.8912 19.0306 29.9001C19.1337 29.9118 19.1945 29.986 19.2193 30.0803Z' fill='none' className={filledClassName} />
+          <path d='M18.794 29.6753C18.7897 29.7519 18.7375 29.777 18.6809 29.7716C18.6092 29.7642 18.537 29.7342 18.5189 29.6517C18.5037 29.581 18.5522 29.5471 18.6158 29.5466C18.7033 29.5461 18.7631 29.5918 18.794 29.6753Z' fill='none' className={filledClassName} />
+          <path d='M15 13.012C20.5228 13.012 25 11.2184 25 9.006C25 6.79355 20.5228 5 15 5C9.47715 5 5 6.79355 5 9.006C5 11.2184 9.47715 13.012 15 13.012Z' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5 15.1432C5 16.89 7.79148 18.3758 11.6845 18.9237' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5 9.00716V20.9951C5 22.6524 7.51252 24.0746 11.0945 24.6841' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+GitHubRepoIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+GitHubRepoIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+
+export default GitHubRepoIcon

package/src/components/icons/NameAppIcon.jsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, LARGE, MAIN_DARK_BLUE, MEDIUM, SIZES, SMALL } from '../constants'
+
+const NameAppIcon = ({ 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.5 2.95996H3C2.44772 2.95996 2 3.40768 2 3.95996V9.63996C2 10.1922 2.44772 10.64 3 10.64H13C13.5523 10.64 14 10.1922 14 9.63996V3.95996C14 3.40768 13.5523 2.95996 13 2.95996H11.5' stroke='none' strokeLinecap='round' />
+          <rect x='6' y='10.64' width='4' height='1.92' stroke='none' />
+          <path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' stroke='none' />
+          <path d='M8 2L8.44903 3.38197H9.90211L8.72654 4.23607L9.17557 5.61803L8 4.76393L6.82443 5.61803L7.27346 4.23607L6.09789 3.38197H7.55097L8 2Z' stroke='none' strokeLinejoin='round' />
+          <path d='M5.5 7.5V8.5M4 7H12V9H4V7Z' stroke='none' 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.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>
+      )
+      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='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>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+NameAppIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+NameAppIcon.defaultProps = {
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
+}
+
+export default NameAppIcon

package/src/components/icons/RunningIcon.jsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
+
+const RunningIcon = ({ 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.05141 5.23517C4.89581 3.88792 6.33972 3 7.97913 3C10.5822 3 12.6924 5.23858 12.6924 8C12.6924 8.50216 12.6226 8.98702 12.4928 9.44428M3.33104 7.16667C3.28818 7.43767 3.26587 7.71607 3.26587 8C3.26587 10.7614 5.37607 13 7.97913 13C9.38685 13 10.6504 12.3453 11.5141 11.3073' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.2388 7.875L12.47 9.49804L14 8.1919' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.771 8.35156L3.29088 6.9823L2.00014 8.55246' 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='M6.077 7.85276C7.34359 5.83189 9.50946 4.5 11.9686 4.5C15.8732 4.5 19.0385 7.85786 19.0385 12C19.0385 12.7532 18.9338 13.4805 18.739 14.1664M4.99643 10.75C4.93214 11.1565 4.89868 11.5741 4.89868 12C4.89868 16.1421 8.06398 19.5 11.9686 19.5C14.0802 19.5 15.9755 18.518 17.271 16.9609' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.8582 11.8125L18.705 14.2471L21 12.2879' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.15649 12.5275L4.93632 10.4736L3.00022 12.8288' 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='M10.1282 13.0879C12.2392 9.71981 15.8489 7.5 19.9475 7.5C26.4551 7.5 31.7306 13.0964 31.7306 20C31.7306 21.2554 31.5562 22.4676 31.2316 23.6107M8.32723 17.9167C8.22008 18.5942 8.16431 19.2902 8.16431 20C8.16431 26.9036 13.4398 32.5 19.9475 32.5C23.4668 32.5 26.6257 30.8633 28.7848 28.2682' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M28.0969 19.6875L31.175 23.7451L34.9999 20.4798' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.9275 20.879L8.22721 17.4559L5.00036 21.3813' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+RunningIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES)
+}
+
+RunningIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default RunningIcon

package/src/components/icons/SocialGitLabIcon.jsx

@@ -19,7 +19,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <g clip-path='url(#clip0_852_2118)'>
+          <g clipPath='url(#clip0_852_2118)'>
             <path d='M8.21846 13.8988L8.21422 13.9059C8.25805 13.9031 8.30046 13.8932 8.34146 13.8763C10.4339 12.5321 12.3863 10.9935 14.4122 9.55918C14.6483 9.39151 14.7233 9.16467 14.62 8.88005C14.3755 8.19951 14.1394 7.51616 13.899 6.83421C13.9047 6.78631 13.8905 6.74404 13.858 6.7074C13.4183 5.30265 12.9843 3.89648 12.5319 2.49596C12.4725 2.31138 12.4753 2.01831 12.211 1.99999C11.8929 1.97745 11.8872 2.28602 11.8179 2.49736C11.3542 3.89648 10.8962 5.29701 10.4353 6.69613L10.4409 6.68909C8.81084 6.68909 7.17934 6.68909 5.54925 6.68768L5.55349 6.69472C5.08412 5.27306 4.61192 3.8514 4.14537 2.42973C4.08741 2.25079 4.06479 2.03381 3.84282 2.0014C3.58976 1.96618 3.5629 2.19021 3.50634 2.36774C3.04687 3.81476 2.58598 5.26179 2.12508 6.7074C2.09115 6.74263 2.07702 6.78349 2.08267 6.83139C1.85223 7.49221 1.63168 8.15724 1.38709 8.81242C1.25985 9.1534 1.34609 9.39856 1.63168 9.60427C3.635 11.0372 5.63691 12.4715 7.64023 13.9045C7.73071 13.9651 7.82119 14.0242 7.91167 14.0848C7.9654 14.1849 8.01912 14.1849 8.07567 14.0876C8.12233 14.0242 8.16898 13.9594 8.21564 13.896L8.21846 13.8988Z' fill='none' className={filledClassName} />
             <path d='M5.55212 6.69049C7.18221 6.69049 8.81371 6.69049 10.4438 6.6919C9.90514 8.31082 9.33963 9.9227 8.83916 11.5529C8.60164 12.3264 8.20861 13.0661 8.21427 13.9059L8.21851 13.8988C8.17185 13.9622 8.1252 14.0271 8.07854 14.0905C8.02199 14.1877 7.96686 14.1877 7.91455 14.0876C7.84951 13.8411 7.7972 13.5903 7.71803 13.3479C6.99842 11.1274 6.27456 8.90964 5.55354 6.69049H5.55212Z' fill='none' className={filledClassName} />
             <path d='M5.55205 6.6905C6.27449 8.90965 6.99834 11.1288 7.71654 13.3479C7.79571 13.5903 7.84802 13.8411 7.91306 14.0877C7.82258 14.0271 7.73209 13.9679 7.64303 13.9073C7.64303 13.7594 7.57658 13.6438 7.48468 13.5283C6.45545 12.2278 5.45309 10.9062 4.39841 9.62682C3.62931 8.69407 2.9917 7.65284 2.08405 6.83281C2.0784 6.7849 2.09112 6.74263 2.12647 6.70882C3.27021 6.70459 4.41255 6.69895 5.55629 6.69473L5.55205 6.68768V6.6905Z' fill='none' className={filledClassName} />
@@ -49,7 +49,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <g clip-path='url(#clip0_315_245)'>
+          <g clipPath='url(#clip0_315_245)'>
             <path d='M12.3277 20.8483L12.3213 20.8589C12.3871 20.8546 12.4507 20.8398 12.5122 20.8145C15.6508 18.7982 18.5794 16.4903 21.6183 14.3388C21.9725 14.0873 22.0849 13.747 21.9301 13.3201C21.5632 12.2993 21.209 11.2743 20.8485 10.2513C20.857 10.1795 20.8358 10.1161 20.787 10.0611C20.1275 7.95399 19.4765 5.84474 18.7978 3.74395C18.7088 3.46708 18.713 3.02748 18.3165 3.00001C17.8393 2.96619 17.8308 3.42904 17.7269 3.74606C17.0313 5.84474 16.3442 7.94553 15.6529 10.0442L15.6614 10.0336C13.2163 10.0336 10.769 10.0336 8.32388 10.0315L8.33024 10.0421C7.62618 7.9096 6.91788 5.77711 6.21806 3.64462C6.13111 3.3762 6.09718 3.05073 5.76424 3.00212C5.38464 2.94928 5.34434 3.28532 5.25952 3.55162C4.5703 5.72216 3.87896 7.8927 3.18763 10.0611C3.13673 10.114 3.11552 10.1752 3.12401 10.2471C2.77834 11.2383 2.44751 12.2359 2.08064 13.2186C1.88978 13.7301 2.01914 14.0979 2.44751 14.4064C5.4525 16.5558 8.45536 18.7073 11.4603 20.8567C11.5961 20.9476 11.7318 21.0364 11.8675 21.1273C11.9481 21.2773 12.0287 21.2773 12.1135 21.1315C12.1835 21.0364 12.2535 20.9392 12.3235 20.8441L12.3277 20.8483Z' fill='none' className={filledClassName} />
             <path d='M8.32812 10.0358C10.7733 10.0358 13.2205 10.0358 15.6656 10.0379C14.8577 12.4663 14.0094 14.8841 13.2587 17.3294C12.9024 18.4897 12.3129 19.5992 12.3213 20.8589L12.3277 20.8483C12.2577 20.9434 12.1877 21.0406 12.1178 21.1357C12.0329 21.2816 11.9502 21.2816 11.8718 21.1315C11.7742 20.7616 11.6957 20.3854 11.577 20.0219C10.4976 16.6911 9.41179 13.3645 8.33025 10.0358H8.32812Z' fill='none' className={filledClassName} />
             <path d='M8.32807 10.0358C9.41173 13.3645 10.4975 16.6932 11.5748 20.0219C11.6936 20.3854 11.772 20.7616 11.8696 21.1315C11.7339 21.0406 11.5981 20.9518 11.4645 20.861C11.4645 20.639 11.3649 20.4657 11.227 20.2924C9.68318 18.3417 8.17963 16.3593 6.59761 14.4402C5.44397 13.0411 4.48755 11.4793 3.12608 10.2492C3.1176 10.1774 3.13668 10.1139 3.1897 10.0632C4.90532 10.0569 6.61882 10.0484 8.33444 10.0421L8.32807 10.0315V10.0358Z' fill='none' className={filledClassName} />
@@ -78,7 +78,7 @@ const SocialGitLabIcon = ({ color, size }) => {
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <g clip-path='url(#clip0_852_2190)'>
+          <g clipPath='url(#clip0_852_2190)'>
             <path d='M20.5462 34.7471L20.5356 34.7647C20.6451 34.7577 20.7512 34.733 20.8537 34.6908C26.0846 31.3304 30.9657 27.4838 36.0306 23.898C36.6208 23.4788 36.8081 22.9117 36.5501 22.2001C35.9387 20.4988 35.3484 18.7904 34.7476 17.0855C34.7617 16.9658 34.7263 16.8601 34.6451 16.7685C33.5458 13.2566 32.4608 9.74122 31.3297 6.2399C31.1813 5.77846 31.1884 5.04579 30.5274 5C29.7322 4.94364 29.718 5.71506 29.5449 6.24343C28.3856 9.74122 27.2404 13.2425 26.0882 16.7403L26.1023 16.7227C22.0271 16.7227 17.9483 16.7227 13.8731 16.7192L13.8837 16.7368C12.7103 13.1827 11.5298 9.62851 10.3634 6.07435C10.2185 5.627 10.162 5.08454 9.60706 5.00352C8.97439 4.91546 8.90724 5.47553 8.76586 5.91936C7.61717 9.53692 6.46494 13.1545 5.31271 16.7685C5.22788 16.8566 5.19254 16.9587 5.20668 17.0785C4.63056 18.7305 4.07919 20.3931 3.46773 22.0311C3.14963 22.8835 3.36523 23.4964 4.07919 24.0107C9.0875 27.593 14.0923 31.1789 19.1006 34.7612C19.3268 34.9127 19.553 35.0606 19.7792 35.2121C19.9135 35.4622 20.0478 35.4622 20.1892 35.2191C20.3058 35.0606 20.4225 34.8986 20.5391 34.7401L20.5462 34.7471Z' fill='none' className={filledClassName} />
             <path d='M13.8801 16.7263C17.9553 16.7263 22.0341 16.7263 26.1093 16.7298C24.7627 20.7771 23.3489 24.8068 22.0977 28.8823C21.5039 30.8161 20.5213 32.6654 20.5355 34.7647L20.5461 34.7471C20.4295 34.9056 20.3128 35.0677 20.1962 35.2262C20.0548 35.4692 19.917 35.4692 19.7862 35.2191C19.6236 34.6027 19.4928 33.9757 19.2949 33.3699C17.4959 27.8185 15.6862 22.2741 13.8837 16.7263H13.8801Z' fill='none' className={filledClassName} />
             <path d='M13.8801 16.7263C15.6862 22.2741 17.4959 27.822 19.2914 33.3699C19.4893 33.9757 19.6201 34.6027 19.7826 35.2191C19.5564 35.0677 19.3302 34.9197 19.1076 34.7683C19.1076 34.3984 18.9414 34.1096 18.7117 33.8207C16.1386 30.5695 13.6327 27.2654 10.996 24.067C9.07328 21.7352 7.47925 19.1321 5.21013 17.082C5.196 16.9623 5.22781 16.8566 5.31617 16.772C8.17553 16.7615 11.0314 16.7474 13.8907 16.7368L13.8801 16.7192V16.7263Z' fill='none' className={filledClassName} />

package/src/components/icons/index.js

@@ -24,6 +24,7 @@ import CircleAddIcon from './CircleAddIcon'
 import CircleArrowLeftIcon from './CircleArrowLeftIcon'
 import CircleArrowRightIcon from './CircleArrowRightIcon'
 import CircleCheckMarkIcon from './CircleCheckMarkIcon'
+import CircleCheckMarkFullIcon from './CircleCheckMarkFullIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
@@ -34,7 +35,12 @@ import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
 import CreditCardIcon from './CreditCardIcon'
 import CopyPasteIcon from './CopyPasteIcon'
+import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
+import CreatingAppIcon from './CreatingAppIcon'
 import DatabaseIcon from './DatabaseIcon'
+import DatabaseMigrationIcon from './DatabaseMigrationIcon'
+import EyeClosedIcon from './EyeClosedIcon'
+import EyeOpenedIcon from './EyeOpenedIcon'
 import EditIcon from './EditIcon'
 import ExploreDocIcon from './ExploreDocIcon'
 import EnlargeIcon from './EnlargeIcon'
@@ -42,6 +48,7 @@ import EntryIcon from './EntryIcon'
 import GearIcon from './GearIcon'
 import GenerationLoadingIcon from './GenerationLoadingIcon'
 import GiveOwnershipIcon from './GiveOwnershipIcon'
+import GitHubRepoIcon from './GitHubRepoIcon'
 import GraphQLIcon from './GraphQLIcon'
 import KeyIcon from './KeyIcon'
 import LabelIcon from './LabelIcon'
@@ -52,6 +59,7 @@ import LoadingAppIcon from './LoadingAppIcon'
 import LogOutIcon from './LogOutIcon'
 import MetricsIcon from './MetricsIcon'
 import MetricsLoadingIcon from './MetricsLoadingIcon'
+import NameAppIcon from './NameAppIcon'
 import OrganizationIcon from './OrganizationIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
@@ -59,6 +67,7 @@ import PullRequestLoadingIcon from './PullRequestLoadingIcon'
 import RequestOwnershipIcon from './RequestOwnershipIcon'
 import RestartIcon from './RestartIcon'
 import RocketIcon from './RocketIcon'
+import RunningIcon from './RunningIcon'
 import SendIcon from './SendIcon'
 import ServiceIcon from './ServiceIcon'
 import SlotIcon from './SlotIcon'
@@ -112,6 +121,7 @@ export default {
   CircleArrowLeftIcon,
   CircleArrowRightIcon,
   CircleCheckMarkIcon,
+  CircleCheckMarkFullIcon,
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
@@ -122,14 +132,20 @@ export default {
   CloseIcon,
   CreditCardIcon,
   CopyPasteIcon,
+  ConfigureDatabaseIcon,
+  CreatingAppIcon,
   DatabaseIcon,
+  DatabaseMigrationIcon,
   EditIcon,
+  EyeClosedIcon,
+  EyeOpenedIcon,
   ExploreDocIcon,
   EnlargeIcon,
   EntryIcon,
   GearIcon,
   GenerationLoadingIcon,
   GiveOwnershipIcon,
+  GitHubRepoIcon,
   GraphQLIcon,
   KeyIcon,
   LabelIcon,
@@ -140,6 +156,7 @@ export default {
   LogOutIcon,
   MetricsIcon,
   MetricsLoadingIcon,
+  NameAppIcon,
   OrganizationIcon,
   PlayIcon,
   PullRequestIcon,
@@ -147,6 +164,7 @@ export default {
   RequestOwnershipIcon,
   RestartIcon,
   RocketIcon,
+  RunningIcon,
   SendIcon,
   ServiceIcon,
   StopIcon,

package/src/stories/ModalStepsForward.stories.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import ModalStepsForward from '../components/ModalStepsForward'
+import Button from '../components/Button'
+import { MAIN_DARK_BLUE, MAIN_GREEN, MODAL_LAYOUTS, MODAL_SIZES } from '../components/constants'
+export default {
+  title: 'Platformatic/ModalStepsForward',
+  component: ModalStepsForward,
+  argTypes: {
+    layout: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: MODAL_LAYOUTS
+      }
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: MODAL_SIZES
+      }
+    }
+  }
+}
+
+const Template = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { text, ...rest } = args
+  return (
+    <main>
+      <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen(true)} label='Open Modal' bold />
+      {isOpen && <ModalStepsForward setIsOpen={setIsOpen} {...rest}>{text}</ModalStepsForward>}
+    </main>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const SmallContentLeft = Template.bind({})
+SmallContentLeft.args = {
+  left: <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis, elit aliquam ullamcorper consectetur, nunc erat blandit turpis, dignissim efficitur risus eros a erat. Vestibulum rutrum odio turpis, vel mollis neque ullamcorper at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin accumsan leo sed nunc tristique tempor. Duis sit amet viverra nunc. Aliquam vehicula elit ut sodales pharetra. Sed imperdiet tempor urna id porta. Nullam ante velit, aliquet a eleifend quis, vulputate sit amet metus. Nullam faucibus libero at velit mattis tempus. Suspendisse potenti. Sed vitae enim ut magna rutrum volutpat at sed augue. Sed sed neque porttitor, gravida lorem vitae, semper felis.</div>
+}
+
+export const LongContentLeft = Template.bind({})
+LongContentLeft.args = {
+  left: (
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis, elit aliquam ullamcorper consectetur, nunc erat blandit turpis, dignissim efficitur risus eros a erat. Vestibulum rutrum odio turpis, vel mollis neque ullamcorper at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin accumsan leo sed nunc tristique tempor. Duis sit amet viverra nunc. Aliquam vehicula elit ut sodales pharetra. Sed imperdiet tempor urna id porta. Nullam ante velit, aliquet a eleifend quis, vulputate sit amet metus. Nullam faucibus libero at velit mattis tempus. Suspendisse potenti. Sed vitae enim ut magna rutrum volutpat at sed augue. Sed sed neque porttitor, gravida lorem vitae, semper felis.
+      <br /><br />
+      Mauris eget ultrices eros. Maecenas condimentum tristique odio, sit amet pellentesque lacus pretium sit amet. Etiam sed egestas nibh. Curabitur auctor posuere ante vel tempor. Etiam a vehicula erat. Cras aliquet eros ut magna vestibulum rhoncus. Sed sed vestibulum metus. Nam sed magna velit. Sed sit amet fermentum libero. Maecenas et faucibus elit. Integer ligula magna, congue et posuere nec, lobortis sed dui. Suspendisse potenti. Cras vestibulum nunc non volutpat tempus. In ultrices elementum consectetur. Vestibulum justo risus, rutrum et augue ac, suscipit lobortis erat. Sed rutrum sem at tortor molestie, tempus sagittis diam pulvinar.
+      <br /><br />
+      Nullam lacinia tortor ipsum. Curabitur nec nulla ut orci volutpat pulvinar ac ut sapien. Vestibulum aliquet ultricies leo, in cursus nibh cursus nec. In eget faucibus lorem. Sed fringilla efficitur tellus. Cras faucibus mauris eget dolor vehicula auctor. Vestibulum dignissim orci id fringilla bibendum.
+      <br /><br />
+      Morbi maximus sem ac nulla bibendum, eleifend blandit nunc sodales. Quisque maximus dapibus diam eu condimentum. Aenean ac justo viverra, pellentesque eros id, porta lectus. In ac risus orci. Fusce eleifend sollicitudin pellentesque. Nulla facilisi. Aenean nec nunc ut felis bibendum bibendum. Sed quam neque, scelerisque nec luctus a, facilisis non ante.
+      <br /><br />
+      Nullam id mauris vitae mi dignissim consequat eget sed leo. Maecenas venenatis orci sed blandit lobortis. Donec a purus risus. Phasellus mollis sem a ipsum cursus ultricies. Sed malesuada sit amet mi a ullamcorper. Mauris sodales eget nulla at porttitor. Etiam arcu mi, efficitur hendrerit metus ut, blandit molestie sapien. Nunc commodo justo nec mi volutpat, sit amet cursus tortor eleifend. Pellentesque tincidunt ac mauris at faucibus. Quisque sed purus quis nibh aliquet ullamcorper. Nunc est sem, accumsan eu pellentesque non, volutpat a nisl. Proin eu dolor ac quam dictum lobortis at ut elit. Aenean nec dui orci. Praesent aliquet eget metus vel elementum.
+    </div>
+  )
+}

package/src/stories/TabbedWindow.stories.jsx

@@ -25,9 +25,13 @@ Default.args = {
     key: 'second',
     component: () => <TextWithLabel label='Second component' text='Sed et dui facilisis, molestie urna sed, volutpat nibh' />
   }, {
-    label: 'Third',
+    label: 'Third Third Third',
     key: 'third',
     component: () => <TextWithLabel label='Third component' text='ivamus est nisl, maximus aliquet urna eu, consequat semper nisi' />
+  }, {
+    label: 'Fourth',
+    key: 'fourth',
+    component: () => <TextWithLabel label='Fourth component' text='Ipse dixit' />
   }]
 }